/* app.css — extends muscles-west.css for the unified study app */

/* ── Screen-reader only utility ──────────────────────────────── */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* ── Skip link (visible on focus for keyboard users) ─────────── */
.skip-link { position:absolute; top:-100%; left:8px; z-index:9999;
  padding:8px 16px; background:#2a2535; color:#f0ebe0; border-radius:6px;
  text-decoration:none; font-size:.85rem; border:1px solid rgba(255,255,255,.2) }
.skip-link:focus { top:8px }

/* ── Header ──────────────────────────────────────────────────── */
.app-subtitle { font-size: .72rem; color: #7a8090; margin-top: 4px; letter-spacing: .5px }

header { position: relative }
.btn-help { position:absolute; top:12px; right:12px; width:28px; height:28px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.2); background:rgba(255,255,255,.07); color:#aab0be;
  font-size:.85rem; font-weight:700; cursor:pointer; line-height:1; transition:all .18s }
.btn-help:hover { background:rgba(255,255,255,.15); color:#f0ebe0; border-color:rgba(255,255,255,.4) }

/* Filter summary */
.filter-summary { display:flex; flex-wrap:wrap; gap:4px; justify-content:center;
  max-width:560px; margin:0 auto 8px; }

/* Gear/settings button — visible on both desktop and mobile */
.btn-settings { display:flex; align-items:center; justify-content:center;
  position:absolute; top:12px; right:48px; width:28px; height:28px;
  border-radius:50%; border:1.5px solid rgba(255,255,255,.2); background:rgba(255,255,255,.07);
  color:#aab0be; font-size:.9rem; cursor:pointer; transition:all .18s; }
.btn-settings:hover { background:rgba(255,255,255,.15); color:#f0ebe0; border-color:rgba(255,255,255,.4) }
.settings-badge { position:absolute; top:-4px; right:-4px; width:14px; height:14px;
  border-radius:50%; background:#b85c4a; color:#fff; font-size:.52rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; }

/* Settings panel: always visible on desktop */
.settings-panel { position:relative; }
.btn-settings-close { display:none; position:absolute; top:8px; right:10px;
  background:none; border:none; color:#7a8090; font-size:1.3rem; cursor:pointer; line-height:1; }
.btn-settings-close:hover { color:#f0ebe0; }

/* ── Mobile layout ───────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Full-height no-scroll layout */
  body { height:100dvh; overflow:hidden; display:flex; flex-direction:column;
    align-items:stretch; padding:8px 10px 6px; min-height:0; }
  header { margin-bottom:6px; flex-shrink:0; }
  header h1 { font-size:1.3rem; }
  .app-subtitle { display:none; }
  .eyebrow { font-size:.55rem; letter-spacing:3px; }

  /* Deck strip: horizontal scroll, no wrap */
  .deck-selector { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    padding-bottom:2px; margin-bottom:5px; scrollbar-width:none; -ms-overflow-style:none; flex-shrink:0; }
  .deck-selector::-webkit-scrollbar { display:none; }
  .dbtn { padding:4px 11px; font-size:.66rem; white-space:nowrap; flex-shrink:0; }

  /* Category + tag strips */
  #filter-cat, #filter-tags { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    scrollbar-width:none; -ms-overflow-style:none; flex-shrink:0; }
  #filter-cat::-webkit-scrollbar,
  #filter-tags::-webkit-scrollbar { display:none; }
  .filt, .tag-chip { white-space:nowrap; flex-shrink:0; }

  /* Search always visible */
  .search-wrap { margin-bottom:6px; flex-shrink:0; }

  /* Filter summary strip (collapsed state) */
  .filter-summary { display:flex; flex-wrap:wrap; gap:4px; margin-top:-2px; margin-bottom:4px; flex-shrink:0; }
  .fsumchip { padding:2px 9px; border-radius:100px; border:1.5px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.08); color:#d0d5e0; font-size:.62rem; font-weight:600;
    font-family:Georgia,serif; cursor:pointer; }

  /* Settings panel: mobile open style */
  .settings-panel { flex-shrink:0; }
  .settings-panel.open { background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08); border-radius:12px;
    padding:10px; margin-bottom:6px; overflow-y:auto; max-height:55vh; }

  /* Chips left-aligned inside panel */
  .deck-selector { justify-content:flex-start; margin-bottom:6px; }
  #filter-cat { justify-content:flex-start; margin-bottom:0; }

  /* Toggles stack vertically */
  .options-row { flex-direction:column; align-items:flex-start; }

  /* Progress bar compact */
  .prog { margin-bottom:6px; flex-shrink:0; width:100%; max-width:none; }

  /* Card fills remaining space */
  .scene { flex:1; min-height:0; height:auto !important; width:100%; max-width:none; margin:0 0 6px; }
  .card { height:100%; }
  .face { overflow-y:auto; }

  /* Controls and grade row compact */
  .controls { margin-bottom:4px; flex-shrink:0; gap:6px; }
  .btn { padding:7px 14px; font-size:.75rem; }
  .grade-row { margin-bottom:4px; flex-shrink:0; }
  .btn-grade { padding:8px 18px; font-size:.76rem; }

  /* Stats: tiny strip at the bottom */
  .stats { display:flex; flex-shrink:0; gap:0; margin:0; max-width:none;
    border-top:1px solid rgba(255,255,255,.06); padding-top:3px; }
  .stat { flex:1; }
  .sn { font-size:1rem; }
  .sl { font-size:.52rem; letter-spacing:.5px; }
  .sn--learning ~ .sl, .sn--known ~ .sl { display:none; }

  /* Warn banner */
  .warn-banner { flex-shrink:0; }
}

/* ── Help modal ──────────────────────────────────────────────── */
.help-sections { display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; margin:14px 0 }
@media (max-width:520px) { .help-sections { grid-template-columns:1fr } }
.help-section h3 { font-size:.65rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  margin:0 0 7px; }
.help-section:nth-child(1) h3 { color:#4a7c8a; }
.help-section:nth-child(2) h3 { color:#c9a84c; }
.help-section:nth-child(3) h3 { color:#b85c4a; }
.help-section:nth-child(4) h3 { color:#7a5c9e; }
.help-section ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px }
.help-section li { font-size:.78rem; color:#c0c8d8; line-height:1.4 }
.help-key { display:inline-block; padding:1px 6px; border-radius:4px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  font-family:monospace; font-size:.72rem; color:#f0ebe0; white-space:nowrap }
/* Grading keys colored by outcome */
.help-section:nth-child(2) li:nth-child(1) .help-key { border-color:#22c55e55; background:#22c55e18; color:#22c55e; }
.help-section:nth-child(2) li:nth-child(2) .help-key { border-color:#f59e0b55; background:#f59e0b18; color:#f59e0b; }
.help-footer { display:flex; align-items:center; justify-content:flex-end;
  margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08) }

/* ── Card face overrides ─────────────────────────────────────── */
/* Dim front from pure white to warm off-white */
.front { background: #e8e2d8; }
/* Soften the hint divider on the off-white background */
.front .hint { border-top-color: #cdc8be; color: #8a8680; }
/* Both top rows: truly center the page-ref, push right items to edge */
.front-top { position:relative; justify-content:flex-start; margin-bottom:12px; }
.back-top  { position:relative; display:flex; align-items:center; margin-bottom:12px; }
.front-top .page-ref,
.back-top  .page-ref { position:absolute; left:50%; transform:translateX(-50%); pointer-events:none; }
.front-top #grade-badge { margin-left:auto; }
.back-top  .btn-edit-card { margin-left:auto; }
/* Fix hint border/color on dark back face */
.back .hint { border-top-color: rgba(255,255,255,.08); color: #7a8090; }

/* ── Settings panel sections ─────────────────────────────────── */
.settings-section { padding-bottom:10px; margin-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.08); }
.settings-section--last { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.settings-section--last .options-row { margin-bottom:0; }
.settings-label { font-size:.58rem; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:#555c6e; margin:0 0 7px; line-height:1; }

/* Desktop: hidden by default, toggled by gear, contained to middle column */
.settings-panel { display:none; max-width:560px; margin:0 auto; }
.settings-panel.open { display:block; margin-bottom:16px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:10px 16px 10px; }
.btn-settings-close { display:none; }
.settings-panel.open .btn-settings-close { display:flex; align-items:center; justify-content:center; }
.settings-subsection-label { font-size:.55rem; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:#444b5a; margin-top:10px; margin-bottom:6px;
  padding-top:10px; border-top:1px solid rgba(255,255,255,.06);
  width:100%; display:block; }
.settings-subsection-label { font-size:.55rem; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:#444b5a; margin-top:10px; margin-bottom:6px;
  padding-top:10px; border-top:1px solid rgba(255,255,255,.06);
  width:100%; display:block; }

/* ── Shared chip base (deck, category, mode, tag, summary) ──── */
.dbtn, .filt, .mode, .tag-chip, .fsumchip {
  padding:4px 13px; border-radius:100px; border:1.5px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.05); color:#aab0be; font-size:.72rem; font-weight:500;
  cursor:pointer; font-family:Georgia,serif; transition:all .18s; letter-spacing:.2px;
  white-space:nowrap; }
.dbtn:hover, .filt:hover, .mode:hover { background:rgba(255,255,255,.12); color:#f0ebe0; border-color:rgba(255,255,255,.3); }

/* Active chips — larger, filled */
.dbtn.active, .filt.active, .mode.active, .fsumchip {
  padding:5px 16px; font-size:.78rem; font-weight:700; }
.fsumchip.fsum-deck { border-color:var(--deck-color, #b85c4a); background:color-mix(in srgb, var(--deck-color, #b85c4a) 15%, transparent); }
.fsumchip.fsum-mode { border-color:#c9a84c; background:rgba(201,168,76,.15); color:#c9a84c; }
.fsumchip.fsum-flipped  { border-color:#4a7c8a; background:rgba(74,124,138,.15); color:#4a9aad; }
.fsumchip.fsum-learning { border-color:#f59e0b; background:rgba(245,158,11,.15); color:#f59e0b; }
.fsumchip.fsum-search   { border-color:#6b8aaf; background:rgba(107,138,175,.15); color:#8aafd4; }
.fsumchip.fsum-all      { border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#9098a9; }

/* ── Deck Selector ───────────────────────────────────────────── */
.deck-selector { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:10px; }
.dbtn { font-weight:600; }
.dbtn.active              { background:#b85c4a; color:#fff; border-color:#b85c4a }
.dbtn.active.d-bones      { background:#c9a84c; border-color:#c9a84c; color:#1a1f2e }
.dbtn.active.d-pathology  { background:#7a8a4a; border-color:#7a8a4a }
.dbtn.active.d-muscles    { background:#4a7c8a; border-color:#4a7c8a }
.dbtn.active.d-prime      { background:#7a5c9e; border-color:#7a5c9e }

/* ── Category chips ──────────────────────────────────────────── */
#filter-cat { display:flex; flex-wrap:wrap; align-items:center; gap:5px; justify-content:center; margin-bottom:6px; min-height:0; }
#filter-cat:empty { margin-bottom:0; }
.filt { border-radius:100px; }
.filt.active { background:#b85c4a; color:#fff; border-color:#b85c4a; }
.filt.active.f { background:#4a7c8a; border-color:#4a7c8a; }

/* ── Tags feature flag — hidden unless :root has .tags-enabled ── */
:root:not(.tags-enabled) #filter-tags,
:root:not(.tags-enabled) .card-tag-area,
:root:not(.tags-enabled) .tag-assign-dropdown,
:root:not(.tags-enabled) #tags-toggle ~ * { /* keep toggle itself visible */ }
:root:not(.tags-enabled) #filter-tags { display:none !important; }
:root:not(.tags-enabled) .card-tag-area { display:none !important; }
:root:not(.tags-enabled) .tag-assign-dropdown { display:none !important; }

/* ── Tag chips (Tier 3) ──────────────────────────────────────── */
#filter-tags { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin-bottom:8px; align-items:center }
.tag-chip { padding:4px 11px; border-radius:100px; border:1.5px solid; background:transparent;
  color:#d0d5e0; font-size:.68rem; font-weight:500; cursor:pointer; font-family:Georgia,serif; transition:all .15s }
.tag-chip:hover { opacity:.85 }
.tag-chip.active { color:#1a1f2e; font-weight:700 }
.btn-manage-tags { padding:4px 11px; border-radius:100px; border:1px dashed rgba(255,255,255,.2);
  background:transparent; color:#7a8090; font-size:.67rem; cursor:pointer; font-family:Georgia,serif; transition:all .15s }
.btn-manage-tags:hover { border-color:rgba(255,255,255,.4); color:#aab0be }

/* ── Search bar ──────────────────────────────────────────────── */
.search-wrap { max-width:560px; margin:0 auto 10px; position:relative }
.search-wrap svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.4; pointer-events:none }
#search-input { width:100%; padding:9px 12px 9px 36px; border-radius:10px;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.06);
  color:#f0ebe0; font-size:.82rem; font-family:Georgia,serif; outline:none; transition:border-color .2s }
#search-input::placeholder { color:#7a8090 }
#search-input:focus { border-color:rgba(255,255,255,.25) }

/* ── Options toggles ─────────────────────────────────────────── */
#smart-review-toggle.toggle.checked { border-color:#f59e0b; color:#f59e0b }
#flip-label.toggle.checked          { border-color:#4a9aad; color:#4a9aad }

/* ── Card title size variants ────────────────────────────────── */
.card-title { font-size:clamp(1.3rem,3vw,1.9rem); font-weight:700; color:#1a1f2e; line-height:1.25; margin-bottom:8px }
.card-title.card-title--qa { font-size:clamp(.9rem,2.2vw,1.15rem); font-weight:600; line-height:1.45 }

/* ── Grade badge on card front ───────────────────────────────── */
#grade-badge { font-size:.58rem; font-weight:700; letter-spacing:.5px; padding:2px 7px;
  border-radius:100px; text-transform:uppercase; visibility:hidden }
#grade-badge.badge--known    { background:#22c55e22; color:#22c55e; border:1px solid #22c55e55; visibility:visible }
#grade-badge.badge--learning { background:#f59e0b22; color:#f59e0b; border:1px solid #f59e0b55; visibility:visible }

/* ── Grade row (below card) ──────────────────────────────────── */
.grade-row { display:flex; gap:10px; justify-content:center; max-width:560px; margin:0 auto 14px }
.btn-grade { padding:10px 26px; border-radius:100px; border:2px solid; font-size:.82rem;
  font-weight:600; cursor:pointer; font-family:Georgia,serif; transition:all .2s; letter-spacing:.2px }
.btn-known    { background:transparent; border-color:#22c55e; color:#22c55e }
.btn-known:hover    { background:#22c55e18; transform:translateY(-1px) }
.btn-learning { background:transparent; border-color:#f59e0b; color:#f59e0b }
.btn-learning:hover { background:#f59e0b18; transform:translateY(-1px) }

/* ── Stats (4-box override) ──────────────────────────────────── */
.stats { max-width:560px }
.sn.sn--known    { color:#22c55e }
.sn.sn--learning { color:#f59e0b }
.sn-all { font-size:.65em; opacity:.45; font-weight:400; }

/* ── Card bottom bar (tag + hint share one divider) ─────────── */
.card-bottom { margin-top:auto; position:relative;
  border-top:1px solid rgba(255,255,255,.08); padding-top:10px;
  display:flex; align-items:center; justify-content:space-between; gap:8px; }
.front .card-bottom { border-top-color: rgba(0,0,0,.12); }
/* hint lives inside card-bottom now — no extra margin/border needed */
.hint { margin-top:0 !important; border:none !important; padding-top:0 !important;
  position:absolute; left:50%; transform:translateX(-50%); pointer-events:none; }
.card-tag-area { flex:1; min-width:0; }
.card-tag-area-inner { display:flex; flex-wrap:wrap; gap:5px; align-items:center }
.card-tag-pill { display:inline-flex; align-items:center; gap:4px; padding:3px 9px;
  border-radius:100px; font-size:.64rem; font-weight:600; border:1.5px solid; color:#1a1f2e }
.card-tag-pill .remove-tag { background:none; border:none; cursor:pointer; color:inherit;
  font-size:.75rem; padding:0; line-height:1; opacity:.7 }
.card-tag-pill .remove-tag:hover { opacity:1 }
.btn-add-tag { padding:3px 10px; border-radius:100px; border:1px dashed rgba(255,255,255,.25);
  background:transparent; color:#7a8090; font-size:.64rem; cursor:pointer; font-family:Georgia,serif }
.btn-add-tag:hover { border-color:rgba(255,255,255,.45); color:#aab0be }
/* Front face: fix near-invisible colors on light background */
.front .btn-add-tag { border-color:rgba(0,0,0,.25); color:#7a8090 }
.front .btn-add-tag:hover { border-color:rgba(0,0,0,.45); color:#3a4050 }
.tag-assign-dropdown { position:absolute; background:#252b3b; border:1px solid rgba(255,255,255,.15);
  border-radius:10px; padding:6px; z-index:100; box-shadow:0 8px 24px rgba(0,0,0,.5);
  display:flex; flex-direction:column; gap:3px; min-width:140px }
.tag-assign-dropdown button { text-align:left; background:none; border:none; color:#d0d5e0;
  font-size:.72rem; padding:5px 9px; border-radius:6px; cursor:pointer; font-family:Georgia,serif }
.tag-assign-dropdown button:hover { background:rgba(255,255,255,.08) }
.tag-assign-dropdown .no-tags-msg { color:#7a8090; font-size:.7rem; padding:5px 9px }

/* ── Tag Management Modal ────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:200; display:none }
.modal-overlay.open { display:block }
.modal { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  background:#1e2436; border:1px solid rgba(255,255,255,.12); border-radius:18px;
  padding:28px; z-index:201; width:min(480px,92vw); max-height:80vh; overflow-y:auto;
  display:none; box-shadow:0 24px 60px rgba(0,0,0,.6) }
.modal.open { display:block }
.modal h2 { font-size:1.1rem; color:#f0ebe0; margin-bottom:18px; font-weight:600 }
.modal-close { position:absolute; top:16px; right:18px; background:none; border:none;
  color:#7a8090; font-size:1.3rem; cursor:pointer; line-height:1 }
.modal-close:hover { color:#f0ebe0 }

/* New tag form */
.new-tag-form { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap }
.new-tag-form input { flex:1; min-width:120px; padding:8px 12px; border-radius:8px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.07);
  color:#f0ebe0; font-size:.8rem; font-family:Georgia,serif; outline:none }
.new-tag-form input:focus { border-color:rgba(255,255,255,.28) }
.color-swatches { display:flex; gap:5px }
.swatch { width:20px; height:20px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:border-color .15s }
.swatch.selected { border-color:#fff }
.btn-create-tag { padding:8px 16px; border-radius:100px; background:#b85c4a; color:#fff;
  border:none; font-size:.75rem; font-weight:600; cursor:pointer; font-family:Georgia,serif; white-space:nowrap }
.btn-create-tag:hover { background:#c96850 }

/* Tag list in modal */
.tag-list { display:flex; flex-direction:column; gap:6px }
.tag-list-item { display:flex; align-items:center; gap:8px; padding:8px 10px;
  background:rgba(255,255,255,.04); border-radius:10px; border:1px solid rgba(255,255,255,.06) }
.tag-list-color { width:12px; height:12px; border-radius:50%; flex-shrink:0 }
.tag-list-label { flex:1; color:#d0d5e0; font-size:.8rem }
.tag-list-count { color:#7a8090; font-size:.68rem; margin-right:4px }
.tag-list-item input.rename-input { flex:1; background:none; border:none; border-bottom:1px solid rgba(255,255,255,.2);
  color:#f0ebe0; font-size:.8rem; font-family:Georgia,serif; outline:none; padding:1px 0 }
.tag-action-btns { display:flex; gap:4px }
.tag-action-btns button { background:none; border:none; font-size:.72rem; cursor:pointer;
  padding:3px 7px; border-radius:6px; font-family:Georgia,serif; transition:background .15s }
.btn-tag-edit   { color:#c9a84c } .btn-tag-edit:hover   { background:rgba(201,168,76,.12) }
.btn-tag-hide   { color:#7a8090 } .btn-tag-hide:hover   { background:rgba(255,255,255,.08) }
.btn-tag-delete { color:#ef4444 } .btn-tag-delete:hover { background:rgba(239,68,68,.12) }
.tag-list-item.hidden-tag { opacity:.45 }
.no-tags-placeholder { color:#7a8090; font-size:.8rem; text-align:center; padding:16px 0 }

/* ── Reset all row ───────────────────────────────────────────── */
.reset-row { display:flex; justify-content:center; margin-top:8px }
.btn-reset-all { background:none; border:none; color:#7a8090; font-size:.65rem;
  cursor:pointer; font-family:Georgia,serif; letter-spacing:.3px; padding:4px 8px;
  border-radius:6px; transition:color .15s }
.btn-reset-all:hover { color:#ef4444 }

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state { display:none; flex-direction:column; align-items:center; justify-content:center;
  height:100%; gap:10px; color:#7a8090 }
.empty-state.visible { display:flex }
.empty-state p { font-size:.85rem; text-align:center }

/* ── Grade reset banner ──────────────────────────────────────── */
.grade-reset-banner { max-width:560px; margin:-6px auto 14px; padding:8px 14px;
  background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.25); border-radius:10px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.72rem; color:#fca5a5 }
.grade-reset-banner button { padding:3px 10px; border-radius:100px; border:1px solid rgba(239,68,68,.4);
  background:transparent; color:#fca5a5; font-size:.7rem; cursor:pointer; font-family:Georgia,serif }
.grade-reset-banner button:hover { background:rgba(239,68,68,.15) }
.grade-reset-banner .suppress-btn { border-color:rgba(255,255,255,.15); color:#7a8090 }
.grade-reset-banner .suppress-btn:hover { background:rgba(255,255,255,.06); color:#aab0be }

/* ── Edit card button (front-top) ───────────────────────────── */
.btn-edit-card { background:none; border:none; color:#7a8090; font-size:.85rem; cursor:pointer;
  padding:2px 5px; border-radius:5px; transition:color .15s; line-height:1; margin-left:2px }
.btn-edit-card:hover { color:#f0ebe0 }

/* ── Edit modal fields ───────────────────────────────────────── */
.edit-field { margin-bottom:14px }
.edit-lbl { display:block; font-size:.58rem; font-weight:600; letter-spacing:2px;
  text-transform:uppercase; color:#7a8090; margin-bottom:5px }
.edit-ta { width:100%; padding:9px 11px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); border-radius:9px; color:#f0ebe0;
  font-size:.82rem; font-family:Georgia,serif; resize:none; overflow:hidden;
  line-height:1.55; outline:none; transition:border-color .2s; box-sizing:border-box }
.edit-ta:focus { border-color:rgba(255,255,255,.28) }

/* ── Edit status ─────────────────────────────────────────────── */
.edit-status { font-size:.75rem; margin-bottom:12px; min-height:1.2em }
.edit-status--loading { color:#aab0be }
.edit-status--success { color:#22c55e }
.edit-status--success a { color:#22c55e }
.edit-status--error   { color:#f87171 }
@keyframes spin { to { transform:rotate(360deg) } }
.edit-spinner { display:inline-block; width:11px; height:11px; border:2px solid rgba(255,255,255,.2);
  border-top-color:#aab0be; border-radius:50%; animation:spin .7s linear infinite; vertical-align:middle }

/* ── Edit / GH modal action buttons ─────────────────────────── */
.edit-actions { display:flex; gap:8px; align-items:center; margin-top:4px }
.edit-btn-settings { background:none; border:1px solid rgba(255,255,255,.12); color:#7a8090;
  font-size:.72rem; padding:7px 12px; border-radius:100px; cursor:pointer; font-family:Georgia,serif;
  margin-right:auto; transition:all .15s }
.edit-btn-settings:hover { border-color:rgba(255,255,255,.28); color:#aab0be }
.edit-btn-cancel { background:none; border:1px solid rgba(255,255,255,.12); color:#aab0be;
  font-size:.75rem; padding:8px 16px; border-radius:100px; cursor:pointer; font-family:Georgia,serif;
  transition:all .15s }
.edit-btn-cancel:hover { background:rgba(255,255,255,.06) }
.edit-btn-submit { background:#b85c4a; color:#fff; border:none; font-size:.75rem; font-weight:600;
  padding:8px 18px; border-radius:100px; cursor:pointer; font-family:Georgia,serif; transition:background .15s }
.edit-btn-submit:hover { background:#c96850 }

/* ── GitHub Settings modal ───────────────────────────────────── */
.gh-row { display:flex; gap:8px; align-items:center; margin-bottom:10px }
.gh-lbl { font-size:.68rem; font-weight:600; letter-spacing:1px; text-transform:uppercase;
  color:#7a8090; width:44px; flex-shrink:0 }
.gh-row input { flex:1; padding:8px 11px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); border-radius:8px; color:#f0ebe0;
  font-size:.8rem; font-family:Georgia,serif; outline:none }
.gh-row input:focus { border-color:rgba(255,255,255,.28) }
.gh-divider { border:none; border-top:1px solid rgba(255,255,255,.08); margin:16px 0 }
.gh-section-title { font-size:.72rem; font-weight:600; color:#aab0be; margin:0 0 8px; letter-spacing:.3px }
.gh-help-link { color:#7aa2f7; text-decoration:none; font-weight:400 }
.gh-help-link:hover { text-decoration:underline }
.gh-hint { font-size:.68rem; color:#7a8090; margin:0 0 10px; line-height:1.5 }
.gh-device-panel { margin-top:12px; padding:12px; background:rgba(255,255,255,.04);
  border-radius:10px; border:1px solid rgba(255,255,255,.08) }
.gh-device-panel p { font-size:.75rem; color:#aab0be; margin:0 0 8px }
.gh-device-panel a { color:#c9a84c }
.gh-user-code { font-size:1.4rem; font-weight:700; letter-spacing:4px; color:#f0ebe0;
  text-align:center; padding:8px 0 }
.gh-file-label { font-size:.75rem; color:#aab0be; cursor:pointer; padding:4px 8px;
  border:1px solid #444; border-radius:6px; display:inline-block }
.gh-file-label:hover { color:#f0ebe0; border-color:#888 }
.gh-save-status { font-size:.75rem; font-weight:600; padding:5px 8px; border-radius:6px; margin-bottom:6px }
.gh-save-status--ok    { background:#1a3a2a; color:#22c55e }
.gh-save-status--error { background:#3a1a1a; color:#f87171 }
.gh-status { font-size:.72rem; color:#aab0be; padding:4px 0 }
.gh-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; vertical-align:middle }
.gh-dot--ok  { background:#22c55e }
.gh-dot--off { background:#7a8090 }

/* ── Warning banner ──────────────────────────────────────────── */
.warn-banner { max-width:560px; margin:0 auto 10px; padding:8px 14px; background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.3); border-radius:8px; color:#fca5a5; font-size:.72rem; text-align:center }