.fight-library-open {
  width: 46px; min-height: 58px; display: grid; place-items: center; align-content: center; gap: 5px;
  border: 1px solid rgba(221,230,236,.2); background: rgba(5,10,17,.72); color: var(--silver);
  padding: 7px 4px; cursor: pointer;
}
.fight-library-open span { font-size: 15px; line-height: 1; }
.fight-library-open b { font: 700 12px/1 var(--mono); letter-spacing: .05em; }
.fight-library-open:hover,.fight-library-open:focus-visible { border-color: var(--actual); color: var(--actual); outline: none; }

.fight-library-dialog {
  width: min(1040px,calc(100vw - 32px)); max-height: min(880px,calc(100svh - 32px));
  border: 1px solid rgba(218,231,239,.25); background: rgba(4,9,15,.97); color: var(--text); padding: 0;
  overflow: hidden; box-shadow: 0 36px 110px rgba(0,0,0,.7),inset 0 1px rgba(255,255,255,.05); backdrop-filter: blur(20px);
}
.fight-library-dialog::backdrop { background: rgba(1,4,8,.8); backdrop-filter: blur(10px); }
.fight-library-panel { max-height: inherit; overflow-y: auto; padding: clamp(22px,3.6vw,40px); }
.fight-library-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.fight-library-head p { margin: 0 0 9px; color: var(--actual); font: 700 12px/1.2 var(--mono); letter-spacing: .16em; }
.fight-library-head h2 { margin: 0; font: 700 clamp(32px,5vw,54px)/.9 var(--display); letter-spacing: .08em; }
.fight-library-close { flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid rgba(220,232,239,.2); border-radius: 50%; background: transparent; color: var(--silver); font-size: 20px; cursor: pointer; }
.fight-library-intro { max-width: 720px; margin: 20px 0 24px; color: var(--muted); font-size: 14px; line-height: 1.8; letter-spacing: .045em; }

.fight-library-controls { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 10px; align-items: stretch; }
.fight-library-search,.fight-library-select,.fight-library-form input,.fight-library-form select,.fight-library-form textarea {
  width: 100%; border: 1px solid rgba(218,231,239,.18); background: rgba(255,255,255,.025); color: var(--silver);
  padding: 12px 13px; font: 600 13px/1.3 var(--mono); letter-spacing: .04em; outline: none;
}
.fight-library-search:focus,.fight-library-select:focus,.fight-library-form input:focus,.fight-library-form select:focus,.fight-library-form textarea:focus { border-color: var(--actual); }
.fight-library-select { width: auto; min-width: 150px; }
.fight-library-favorite-filter { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(218,231,239,.18); padding: 0 14px; color: var(--muted); font: 700 13px/1 var(--mono); letter-spacing: .06em; white-space: nowrap; }
.fight-library-favorite-filter input { accent-color: var(--actual); }
.fight-library-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 14px 0 22px; }
.fight-library-youtube,.fight-library-new,.fight-library-save,.fight-library-cancel { min-height: 42px; border: 1px solid rgba(218,231,239,.2); background: transparent; color: var(--silver); padding: 10px 14px; font: 700 13px/1 var(--mono); letter-spacing: .06em; text-decoration: none; cursor: pointer; }
.fight-library-youtube:hover,.fight-library-new:hover,.fight-library-save:hover { border-color: var(--actual); color: var(--actual); }
.fight-library-action-group { display: flex; gap: 10px; }
.fight-library-count { color: var(--muted); font: 700 13px/1 var(--mono); letter-spacing: .06em; }

.fight-library-form { display: none; margin: 0 0 24px; border: 1px solid rgba(130,205,252,.22); background: rgba(130,205,252,.025); padding: 20px; }
.fight-library-form.is-open { display: block; }
.fight-library-form-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.fight-library-form-head strong { color: var(--actual); font: 700 14px/1.2 var(--mono); letter-spacing: .14em; }
.fight-library-form-head small { color: var(--muted); font: 600 12px/1.4 var(--mono); letter-spacing: .04em; }
.fight-library-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.fight-library-field { display: grid; gap: 7px; color: var(--muted); font: 700 13px/1.2 var(--mono); letter-spacing: .05em; }
.fight-library-field.wide { grid-column: 1 / -1; }
.fight-library-form textarea { min-height: 78px; resize: vertical; }
.fight-library-form option,.fight-library-select option { background: #07111b; }
.fight-library-form-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 16px; }
.fight-library-form-footer label { display: flex; align-items: center; gap: 8px; color: var(--silver); font: 700 13px/1 var(--mono); letter-spacing: .05em; }
.fight-library-form-footer input { width: auto; accent-color: var(--actual); }
.fight-library-form-buttons { display: flex; gap: 9px; }
.fight-library-save { border-color: color-mix(in srgb,var(--actual) 52%,transparent); color: var(--actual); }
.fight-library-status { min-height: 22px; margin: -10px 0 10px; color: var(--actual); font: 700 13px/1.5 var(--mono); letter-spacing: .04em; }
.fight-library-status.is-error { color: #ff8f7b; }

.fight-library-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.fight-library-empty { grid-column: 1 / -1; margin: 0; border: 1px solid rgba(218,231,239,.1); padding: 44px 20px; color: var(--muted); font: 600 13px/1.7 var(--mono); letter-spacing: .07em; text-align: center; }
.fight-library-card { min-width: 0; display: grid; grid-template-columns: 152px minmax(0,1fr); border: 1px solid rgba(218,231,239,.13); background: rgba(1,5,9,.72); overflow: hidden; }
.fight-library-thumb { position: relative; min-height: 112px; background: #02070b; }
.fight-library-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .76; }
.fight-library-thumb a { position: absolute; inset: 0; display: grid; place-items: center; color: white; text-decoration: none; font-size: 23px; background: radial-gradient(circle,rgba(0,0,0,.05),rgba(0,0,0,.28)); }
.fight-library-card-body { min-width: 0; padding: 13px; }
.fight-library-card-top { display: flex; justify-content: space-between; gap: 8px; }
.fight-library-card-title { min-width: 0; margin: 0; color: var(--silver); font: 700 13px/1.45 var(--mono); letter-spacing: .035em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fight-library-star { flex: 0 0 30px; height: 30px; border: 0; background: transparent; color: #64717d; font-size: 19px; cursor: pointer; }
.fight-library-star.is-active { color: var(--actual); }
.fight-library-card-meta { margin: 8px 0 0; color: var(--muted); font: 600 12px/1.5 var(--mono); letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fight-library-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.fight-library-tags span { border: 1px solid rgba(130,205,252,.16); padding: 4px 6px; color: #8fa4b4; font: 600 12px/1 var(--mono); letter-spacing: .04em; }
.fight-library-card-actions { display: flex; gap: 7px; margin-top: 11px; }
.fight-library-card-actions button { border: 0; background: transparent; padding: 0; color: var(--muted); font: 700 12px/1 var(--mono); letter-spacing: .05em; cursor: pointer; }
.fight-library-card-actions button:hover { color: var(--actual); }

@media (max-width:760px) {
  .fight-library-open { width: 40px; min-height: 38px; padding: 4px 3px; gap: 2px; }
  .fight-library-open span { font-size: 16px; } .fight-library-open b { font-size: 12px; }
  .fight-library-dialog { width: calc(100vw - 18px); max-height: calc(100svh - 18px); }
  .fight-library-panel { padding: 22px 16px 28px; }
  .fight-library-controls { grid-template-columns: 1fr; } .fight-library-select { width: 100%; }
  .fight-library-favorite-filter { min-height: 42px; }
  .fight-library-actions { align-items: flex-start; flex-direction: column; }
  .fight-library-action-group { width: 100%; } .fight-library-youtube,.fight-library-new { flex: 1; text-align: center; }
  .fight-library-form-grid { grid-template-columns: 1fr; } .fight-library-field.wide { grid-column: auto; }
  .fight-library-form-footer { align-items: stretch; flex-direction: column; }
  .fight-library-form-buttons { width: 100%; } .fight-library-save,.fight-library-cancel { flex: 1; }
  .fight-library-list { grid-template-columns: 1fr; }
  .fight-library-card { grid-template-columns: 116px minmax(0,1fr); } .fight-library-thumb { min-height: 124px; }
}
@media (max-width:420px) { .fight-library-card { grid-template-columns: 94px minmax(0,1fr); } .fight-library-card-body { padding: 11px; } }

body.fight-library-editor-open { overflow:hidden; }

.fight-library-panel {
  position:relative;
  display:grid;
  grid-template-rows:auto auto auto minmax(0,1fr);
  height:min(880px,calc(100svh - 32px));
  max-height:inherit;
  box-sizing:border-box;
  overflow:hidden;
  padding:0;
}

.fight-library-head { padding:32px 36px 0; }
.fight-library-intro { margin:18px 36px 22px; }

.fight-library-tabs {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  margin:0 36px;
  border:1px solid rgba(218,231,239,.14);
  background:rgba(218,231,239,.1);
}

.fight-library-tabs button {
  min-height:48px;
  border:0;
  background:rgba(3,8,13,.94);
  color:#748590;
  font:700 12px/1.2 var(--mono);
  letter-spacing:.12em;
  cursor:pointer;
}

.fight-library-tabs button[aria-selected="true"] {
  background:color-mix(in srgb,var(--actual) 10%,rgba(3,8,13,.96));
  color:var(--actual);
  box-shadow:inset 0 -2px var(--actual);
}

.fight-library-tabs button:focus-visible {
  outline:2px solid var(--actual);
  outline-offset:-3px;
}

.fight-library-view {
  min-height:0;
  overflow-y:auto;
  padding:22px 36px 32px;
  scrollbar-gutter:stable;
}

.fight-library-view[hidden] { display:none; }

.fight-library-list-view .fight-library-status { margin:0 0 10px; }

.fight-library-form {
  display:block;
  width:min(720px,100%);
  box-sizing:border-box;
  margin:0 auto;
  padding:22px;
}

.fight-library-form-head {
  align-items:flex-start;
}

.fight-library-form-head>div { display:grid; gap:7px; }

.fight-library-form-head small,
.fight-library-form-head>span {
  color:#71838e;
  font:700 9px/1.2 var(--mono);
  letter-spacing:.16em;
}

.fight-library-core-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.fight-library-core-grid .wide { grid-column:1/-1; }

.fight-library-form input,
.fight-library-form select {
  min-height:46px;
  box-sizing:border-box;
  font-size:16px;
}

.fight-library-form textarea {
  box-sizing:border-box;
  font-size:16px;
}

.fight-library-details {
  margin-top:18px;
  border-top:1px solid rgba(218,231,239,.14);
  border-bottom:1px solid rgba(218,231,239,.14);
}

.fight-library-details summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:58px;
  color:#becbd2;
  cursor:pointer;
  list-style:none;
}

.fight-library-details summary::-webkit-details-marker { display:none; }
.fight-library-details summary::after { content:"+"; flex:0 0 auto; color:var(--actual); font-size:22px; }
.fight-library-details[open] summary::after { content:"−"; }

.fight-library-details summary>span {
  font:700 12px/1.3 var(--mono);
  letter-spacing:.09em;
}

.fight-library-details summary>small {
  max-width:440px;
  color:#6f808b;
  font:600 10px/1.5 var(--mono);
  letter-spacing:.04em;
  text-align:right;
}

.fight-library-details .fight-library-form-grid { padding:4px 0 20px; }

.fight-library-form-footer input {
  width:20px;
  height:20px;
}

.fight-library-save,
.fight-library-cancel {
  min-height:44px;
  padding:0 16px;
}

.fight-library-form-status {
  min-height:20px;
  margin:12px 0 0;
  color:var(--actual);
  font:700 12px/1.5 var(--mono);
}

.fight-library-form-status.is-error { color:#ff8f7b; }

.fight-library-undo {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0 0 14px;
  border:1px solid rgba(130,205,252,.24);
  background:rgba(130,205,252,.045);
  padding:11px 13px;
  color:#aebdc6;
  font:650 12px/1.5 var(--mono);
}

.fight-library-undo[hidden] { display:none; }

.fight-library-undo button {
  min-height:40px;
  border:1px solid rgba(130,205,252,.34);
  background:transparent;
  padding:0 14px;
  color:var(--actual);
  font:700 11px/1 var(--mono);
  cursor:pointer;
}

.fight-library-card-actions {
  justify-content:flex-end;
}

.fight-library-card-actions button {
  min-height:38px;
  border:1px solid rgba(218,231,239,.16);
  padding:0 12px;
}

.fight-library-discard {
  position:absolute;
  inset:auto 18px 18px;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border:1px solid rgba(255,177,130,.42);
  background:rgba(15,10,8,.98);
  padding:16px;
  box-shadow:0 20px 48px rgba(0,0,0,.58);
}

.fight-library-discard[hidden] { display:none; }
.fight-library-discard strong { color:#ffd0b5; font-size:15px; }
.fight-library-discard p { margin:6px 0 0; color:rgba(229,219,211,.7); font-size:13px; }
.fight-library-discard>div:last-child { display:flex; gap:8px; }

.fight-library-discard button {
  min-height:44px;
  border:1px solid rgba(255,208,181,.28);
  background:transparent;
  padding:0 14px;
  color:#f2ddd0;
  font:700 12px/1 var(--mono);
  cursor:pointer;
}

.fight-library-discard-changes {
  border-color:rgba(255,142,116,.5)!important;
  color:#ffad99!important;
}

/* Keep the complete video form and its actions visible on a normal desktop. */
@media (min-width:900px) and (min-height:640px) {
  .fight-library-form-view {
    overflow-y:hidden;
    padding-top:8px;
    padding-bottom:8px;
  }

  .fight-library-form {
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    grid-template-rows:auto auto auto;
    column-gap:24px;
    padding:10px 16px;
  }

  .fight-library-form-head {
    grid-column:1/-1;
    margin-bottom:8px;
  }

  .fight-library-core-grid {
    grid-column:1;
    align-content:start;
  }

  .fight-library-details {
    grid-column:2;
    grid-row:2;
    align-self:start;
    margin-top:0;
  }

  .fight-library-details summary {
    min-height:46px;
  }

  .fight-library-details .fight-library-form-grid {
    gap:8px 12px;
    padding-bottom:6px;
  }

  .fight-library-details .fight-library-form-grid .wide {
    grid-column:auto;
  }

  .fight-library-form textarea {
    min-height:54px;
  }

  .fight-library-form-footer {
    grid-column:1/-1;
    min-height:48px;
    margin-top:6px;
  }

  .fight-library-form-status {
    grid-column:1/-1;
    margin-top:4px;
  }
}

@media (max-width:760px) {
  .fight-library-panel { height:calc(100svh - 18px); }
  .fight-library-head { padding:22px 16px 0; }
  .fight-library-intro { margin:15px 16px 18px; font-size:13px; }
  .fight-library-tabs { margin:0 16px; }
  .fight-library-tabs button { min-height:50px; padding:0 8px; }
  .fight-library-view { padding:16px 16px 24px; }
  .fight-library-form { padding:18px; }
  .fight-library-core-grid { grid-template-columns:1fr; }
  .fight-library-core-grid .wide { grid-column:auto; }
  .fight-library-details summary { align-items:flex-start; flex-direction:column; justify-content:center; gap:6px; padding:12px 32px 12px 0; position:relative; }
  .fight-library-details summary::after { position:absolute; right:4px; top:50%; transform:translateY(-50%); }
  .fight-library-details summary>small { text-align:left; }
  .fight-library-undo { align-items:stretch; flex-direction:column; }
  .fight-library-undo button { width:100%; }
  .fight-library-discard { inset:auto 8px 8px; align-items:stretch; flex-direction:column; }
  .fight-library-discard>div:last-child { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (prefers-reduced-motion:reduce) { .fight-library-dialog *,.fight-library-open { transition: none !important; } }