/* ══════════════════════════════════════════════════════════
   UkeSongBook — style.css (redesign)
   Warm paper palette · light, responsive
   Mobile → Tablette (priorité) → Desktop
   ══════════════════════════════════════════════════════════ */

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Surface / Ink ────────────────────────────────────── */
  --bg:            #FBF6EC;   /* page background */
  --bg2:           #FFFFFF;   /* card */
  --bg3:           #F8EFD9;   /* nav background / inset */
  --bg4:           #F4ECDD;   /* nested inset, "known" cards */
  --surface-warm:  #FFF9EE;   /* callouts */
  --border:        #E8DFCB;
  --border-strong: #D6C8AC;

  --text:          #1F1B16;   /* ink */
  --text2:         #5D5448;
  --text3:         #8A7E6E;
  --text-disabled: #BFB5A5;

  /* ── Brand ────────────────────────────────────────────── */
  --coral:         #F26B5E;   /* PRIMARY */
  --coral-hover:   #E55344;
  --coral-deep:    #C7493D;
  --coral-tint:    #FDE6E2;

  --teal:          #0EA391;
  --teal-hover:    #0B8B7B;
  --teal-deep:     #07685C;
  --teal-tint:     #DCF1ED;

  --sun:           #F6B642;   /* accent / streak / mastered */
  --sun-hover:     #E0A02E;
  --sun-deep:      #B47A11;
  --sun-tint:      #FCEFCF;

  --wood:          #B0764A;
  --wood-deep:     #7E5230;
  --wood-soft:     #E9D2B6;

  /* ── Semantic ─────────────────────────────────────────── */
  --easy:          #4FAE7A;
  --easy-tint:     #DEF1E5;
  --medium:        #E8A33A;
  --medium-tint:   #FBE9C9;
  --hard:          #DD5448;
  --hard-tint:     #FBDED9;

  --intro:    #8B7AC4;  --intro-tint:  #ECE5F7;
  --verse:    #3F8FCC;  --verse-tint:  #DCEBF7;
  --chorus:   #E8843A;  --chorus-tint: #FCE3CF;
  --bridge:   #D87099;  --bridge-tint: #F7DBE7;
  --outro:    #7A8590;  --outro-tint:  #E5E8EB;

  /* ── Type ─────────────────────────────────────────────── */
  --font-head: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* ── Spacing ──────────────────────────────────────────── */
  --sb-w:   220px;
  --radius: 12px;

  /* ── Shadows (warm-tinted, never blue-grey) ───────────── */
  --shadow-1: 0 1px 2px rgba(80,40,10,.06), 0 0 0 1px rgba(80,40,10,.04);
  --shadow-2: 0 6px 18px rgba(80,40,10,.10), 0 0 0 1px rgba(80,40,10,.06);
  --shadow-3: 0 24px 48px rgba(40,20,5,.18), 0 4px 12px rgba(40,20,5,.10);

  /* ── Easing ───────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
}

html, body { height: 100%; overflow-x: hidden; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--sun-tint); color: var(--text); }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; border-radius: 2px; }

/* ── Layout ─────────────────────────────────────────────── */
.layout       { display: flex; flex-direction: column; min-height: 100vh; }
.sidebar      { display: none; }
.content      { flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
.main-area    { flex: 1; padding: 1rem 1rem 5rem; overflow-y: auto; max-width: 100%; }

/* ── Mobile header ──────────────────────────────────────── */
.mob-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.mob-brand { display: flex; align-items: center; gap: .5rem; }
.mob-chips { display: flex; gap: .5rem; align-items: center; }
.chip-streak {
  background: var(--coral-tint);
  border: 1px solid var(--coral);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: .7rem;
  font-weight: 600;
  color: var(--coral-deep);
}
.chip-goal {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .9rem;
  color: var(--sun-deep);
  letter-spacing: -0.01em;
}

/* ── Brand ──────────────────────────────────────────────── */
.brand-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text);
  letter-spacing: -0.01em;
}
.brand-sub  { font-size: .68rem; color: var(--text3); margin-top: 2px; }

/* ── Bottom nav (mobile) ────────────────────────────────── */
.bot-nav {
  /* Barre ancrée pleine largeur (direction validée) — couleurs en dur :
     iOS ignore les variables CSS sur les éléments position:fixed */
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex;
  background: #FFFFFF;
  border-top: 1px solid #E8DFCB;
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
}
.bnav-btn {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: .5rem .1rem;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  color: #6F665A;
  font-size: .75rem;
  min-height: 52px;
  font-weight: 500;
  font-family: var(--font-body);
  position: relative;
  transition: color var(--ease-out) 120ms, background var(--ease-out) 120ms;
}
.bnav-btn:hover { color: var(--text); }
.bnav-on { color: #B0412A !important; background: transparent; font-weight: 700; }
.bnav-badge {
  position: absolute; top: 3px; right: calc(50% - 16px);
  background: var(--coral);
  color: #fff;
  border-radius: 10px;
  font-size: .56rem;
  padding: 1px 5px;
  font-weight: 700;
  min-width: 14px;
  text-align: center;
}

/* ── TABLET 768px+ ──────────────────────────────────────── */
@media (min-width: 768px) {
  .layout { flex-direction: row; }

  .sidebar {
    display: flex;
    flex-direction: column;
    width: var(--sb-w);
    min-height: 100vh;
    background: var(--bg);
    border-right: 1px solid var(--border);
    position: sticky; top: 0;
    height: 100vh;
    flex-shrink: 0;
  }
  .mob-header, .bot-nav, .fab { display: none !important; }
  .content { flex: 1; min-width: 0; }
  .main-area { padding: 1.75rem 2rem 2rem; }

  .song-col { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .stat-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ── DESKTOP 1200px+ ────────────────────────────────────── */
@media (min-width: 1200px) {
  :root { --sb-w: 260px; }
  .main-area { padding: 2rem 3rem; max-width: 1200px; }
  .song-col { grid-template-columns: repeat(3, 1fr); }
}

/* ── Sidebar internals ──────────────────────────────────── */
.sb-brand {
  display: flex; align-items: center; gap: .8rem;
  padding: 1.3rem 1rem 1rem;
  border-bottom: 1px solid var(--border);
}
.sb-nav { flex: 1; padding: .8rem .5rem; display: flex; flex-direction: column; gap: 3px; }
.nav-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .65rem .85rem;
  border-radius: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text);
  font-size: .87rem;
  font-weight: 500;
  font-family: var(--font-body);
  transition: all .15s var(--ease-out);
  position: relative;
  width: 100%;
  text-align: left;
}
.nav-item:hover { background: var(--bg3); }
.nav-on { color: var(--coral-deep) !important; background: var(--coral-tint) !important; font-weight: 600; }
.nav-badge {
  margin-left: auto;
  background: var(--coral);
  color: #fff;
  border-radius: 999px;
  font-size: .65rem;
  padding: 1px 7px;
  font-weight: 700;
}
.sb-foot {
  padding: 1rem;
  border-top: 1px solid var(--border);
  font-size: .75rem;
}
.sb-progress-track {
  height: 6px;
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin: .5rem 0;
}
.sb-progress-fill  {
  height: 100%;
  background: linear-gradient(90deg, var(--coral), var(--sun));
  border-radius: 999px;
  transition: width .5s var(--ease-out);
}

/* ── Page headers ───────────────────────────────────────── */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 1.4rem; gap: .8rem; flex-wrap: wrap;
}
.page-head h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.page-sub { font-size: .82rem; color: var(--text2); margin-top: 3px; font-weight: 500; }
.header-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* ── Today sections ─────────────────────────────────────── */
.today-sec { margin-bottom: 1.6rem; }
.sec-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -0.005em;
  margin-bottom: .7rem;
}
.sec-sub {
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: .72rem;
  color: var(--text3);
}
.sec-count {
  background: var(--bg4);
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: .68rem;
  font-weight: 500;
  font-family: var(--font-body);
}

/* ── Song card ──────────────────────────────────────────── */
.song-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
  box-shadow: var(--shadow-1);
}
.song-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.song-card-known { background: var(--bg4); }

.song-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem .95rem;
  cursor: pointer;
  gap: .5rem;
}
.song-info { min-width: 0; flex: 1; }
.known-tag {
  display: inline-block;
  font-size: .62rem; font-weight: 700;
  color: var(--coral-deep);
  background: var(--coral-tint);
  border: 1px solid var(--coral);
  border-radius: 4px;
  padding: 1px 6px;
  margin-bottom: 4px;
}
.pdf-tag {
  display: inline-block;
  font-size: .62rem; font-weight: 700;
  color: var(--easy);
  background: var(--easy-tint);
  border: 1px solid var(--easy);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 4px;
}
.song-title {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .98rem;
  color: var(--text);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.song-artist {
  display: block;
  font-size: .75rem;
  color: var(--text2);
  margin-top: 2px;
  font-weight: 500;
}
.song-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.song-body { padding: 0 .95rem .95rem; }
.song-details { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .7rem; }
.song-detail-chip {
  font-size: .72rem;
  color: var(--text2);
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  font-weight: 500;
}
.due-chip {
  color: var(--coral-deep) !important;
  background: var(--coral-tint) !important;
  border-color: var(--coral) !important;
}
.prog-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.prog-label { font-size: .68rem; color: var(--text3); white-space: nowrap; font-weight: 500; }
.rep-bar    { display: flex; gap: 4px; flex: 1; }
.rep-pip    {
  height: 7px;
  flex: 1;
  border-radius: 999px;
  background: var(--bg4);
  border: 1px solid var(--border);
  transition: background .3s var(--ease-out), border-color .3s var(--ease-out);
}

/* ── Notes block ────────────────────────────────────────── */
.notes-block {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .6rem .75rem;
  margin-bottom: .7rem;
}
.notes-row { display: flex; align-items: flex-start; gap: 7px; font-size: .75rem; color: var(--text2); line-height: 1.5; }
.notes-icon { flex-shrink: 0; margin-top: 1px; }
.chant-row { color: var(--bridge); }

/* ── Song actions ───────────────────────────────────────── */
.song-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.act-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 600;
  font-family: var(--font-body);
  transition: all .15s var(--ease-out);
}
.act-btn:active { transform: scale(.985); }
.act-practice { background: var(--coral); color: #fff; }
.act-practice:hover { background: var(--coral-hover); }
.act-pdf      { background: var(--verse-tint); color: var(--verse); border-color: var(--verse); }
.act-pdf:hover{ background: #C7DEF0; }
.act-review   { background: var(--easy-tint);  color: var(--easy);  border-color: var(--easy); }
.act-review:hover { background: #C8E8D2; }
.act-master   { background: var(--sun-tint);   color: var(--sun-deep); border-color: var(--sun); }
.act-master:hover { background: #F8E2B0; }
.act-edit     { background: var(--verse-tint); color: var(--verse); border-color: var(--verse); }
.act-reset    { background: var(--bg4);        color: var(--text2); border-color: var(--border); }
.act-del      { background: var(--hard-tint);  color: var(--hard);  border-color: var(--hard); margin-left: auto; }

/* ── Diff badge ─────────────────────────────────────────── */
.diff-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .7rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
  font-family: var(--font-body);
}

/* ── Timer ──────────────────────────────────────────────── */
.timer-wrap {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: .9rem;
  margin-bottom: .8rem;
  transition: border-color .3s var(--ease-out);
}
.timer-lbl {
  display: flex; align-items: center; gap: 5px;
  font-size: .68rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
  margin-bottom: .7rem;
  font-family: var(--font-body);
}
.timer-body  { display: flex; align-items: center; gap: 1rem; }
.timer-ring  { position: relative; width: 80px; height: 80px; flex-shrink: 0; }
.timer-ring svg { position: absolute; top: 0; left: 0; }
.timer-digits {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800;
  font-size: 1.05rem;
  color: var(--text);
}
.timer-ctrls { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.timer-btn {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: .8rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all .15s var(--ease-out);
  width: 100%;
}
.timer-btn:active { transform: scale(.985); }
.timer-rst { background: var(--bg4); color: var(--text2); border: 1px solid var(--border); }

/* ── Practice view ──────────────────────────────────────── */
.practice-view { max-width: 800px; margin: 0 auto; }
.practice-header {
  display: flex; align-items: flex-start; gap: .8rem;
  margin-bottom: 1.3rem;
  flex-wrap: wrap;
}
.back-btn {
  background: var(--bg2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 10px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 500;
  white-space: nowrap;
  font-family: var(--font-body);
  transition: all .15s var(--ease-out);
}
.back-btn:hover { background: var(--bg3); }

.pdf-info-card {
  background: var(--bg2);
  border: 1px dashed var(--verse);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.pdf-info-path {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--verse);
  background: var(--verse-tint);
  border-radius: 6px;
  padding: 5px 10px;
  margin: .5rem 0;
  word-break: break-all;
}

.section-toggles {
  background: var(--bg2);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.section-toggle-lbl {
  font-size: .68rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
  margin-bottom: .6rem;
  font-family: var(--font-body);
}
.section-toggle-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.sec-toggle {
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 6px 14px;
  background: var(--bg2);
  color: var(--text2);
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s var(--ease-out);
  font-family: var(--font-body);
}
.sec-toggle:hover { border-color: var(--text3); }

.section-block {
  background: var(--bg2);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin-bottom: .8rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.section-blk-head {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin-bottom: .8rem;
}
.chord-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chord-chip {
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: .74rem;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-body);
}
.section-lines { display: flex; flex-direction: column; gap: .7rem; }
.chord-row {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--coral-deep);
  letter-spacing: .04em;
  white-space: pre;
  line-height: 1.4;
  font-weight: 600;
}
.lyric-line {
  font-size: .92rem;
  color: var(--text);
  line-height: 1.6;
}
.instrumental {
  font-size: .8rem;
  color: var(--text3);
  font-style: italic;
}

.practice-footer { display: flex; gap: .7rem; flex-wrap: wrap; padding: 1rem 0; }

.no-pdf-card {
  text-align: center;
  padding: 2rem 1rem;
  background: var(--bg2);
  border-radius: 12px;
  border: 1px dashed var(--border-strong);
  margin-bottom: 1rem;
}
.no-pdf-card p { color: var(--text2); font-size: .88rem; margin-bottom: .8rem; }

/* ── Stat grid ──────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: 1.4rem;
}
.stat-card {
  background: var(--bg2);
  border-radius: 14px;
  padding: 1rem;
  text-align: center;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.stat-val {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.stat-lbl {
  font-size: .72rem;
  color: var(--text3);
  margin-top: 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Goal card ──────────────────────────────────────────── */
.goal-card {
  background: var(--bg2);
  border-radius: 14px;
  padding: 1.1rem;
  border: 1px solid var(--border);
  margin-bottom: 1.4rem;
  box-shadow: var(--shadow-1);
}
.goal-row {
  display: flex;
  justify-content: space-between;
  font-size: .85rem;
  color: var(--text);
  margin-bottom: .8rem;
  font-weight: 500;
}
.progress-track {
  height: 10px;
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--coral), var(--sun));
  border-radius: 999px;
  transition: width .5s var(--ease-out);
}
.goal-hint { font-size: .75rem; color: var(--text3); margin-top: .6rem; font-weight: 500; }

/* ── Diff breakdown ─────────────────────────────────────── */
.diff-breakdown {
  background: var(--bg2);
  border-radius: 14px;
  padding: 1.1rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.diff-row {
  display: flex; align-items: center; gap: .8rem;
  margin-bottom: .8rem;
}
.diff-row:last-child { margin-bottom: 0; }
.diff-row-label {
  width: 130px;
  font-size: .82rem;
  flex-shrink: 0;
  font-weight: 600;
}
.diff-row-bar {
  flex: 1;
  height: 8px;
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}

/* ── Settings ───────────────────────────────────────────── */
.settings-card {
  background: var(--bg2);
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-1);
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--border);
  gap: 1rem;
}
.settings-row:last-child { border-bottom: none; }
.settings-lbl { font-size: .9rem; font-weight: 600; color: var(--text); }
.settings-sub { font-size: .72rem; color: var(--text3); margin-top: 3px; font-weight: 500; }
.settings-ctrl { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.ctrl-btn {
  background: var(--bg4);
  border: 1px solid var(--border);
  color: var(--text);
  width: 32px; height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  transition: background .15s var(--ease-out);
}
.ctrl-btn:hover { background: var(--wood-soft); }
.ctrl-val {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1rem;
  min-width: 56px;
  text-align: center;
  color: var(--text);
}
.settings-section-title {
  padding: .9rem 1.1rem .3rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text3);
  font-family: var(--font-body);
}
.settings-info-row {
  padding: .7rem 1.1rem;
  font-size: .82rem;
  color: var(--text2);
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}
.settings-info-row:last-child { border-bottom: none; }
.settings-info-row code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text);
}

.date-input {
  background: var(--bg2);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text);
  padding: 7px 12px;
  font-size: .85rem;
  font-family: var(--font-body);
  font-weight: 500;
  outline: none;
  transition: border-color .15s var(--ease-out);
}
.date-input:focus { border-color: var(--coral); border-width: 2px; padding: 6px 11px; }

/* ── Buttons ────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--coral);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 9px 16px;
  font-size: .85rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all .15s var(--ease-out);
  white-space: nowrap;
}
.btn-primary:hover { background: var(--coral-hover); }
.btn-primary:active { transform: scale(.985); }
.btn-primary:disabled { opacity: .4; cursor: default; transform: none; }
.btn-primary.lg { padding: 12px 22px; font-size: .95rem; }

.btn-import {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--teal-tint);
  color: var(--teal-deep);
  border: 1px solid var(--teal);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: .82rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all .15s var(--ease-out);
  white-space: nowrap;
}
.btn-import:hover { background: #CFE9E3; }
.btn-import:active { transform: scale(.985); }

.btn-master {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--sun);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 11px 18px;
  font-size: .9rem;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all .15s var(--ease-out);
  white-space: nowrap;
}
.btn-master:hover { background: var(--sun-hover); }
.btn-master:active { transform: scale(.985); }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all .15s var(--ease-out);
}
.btn-ghost:hover { background: var(--bg3); }

.btn-danger {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--hard-tint);
  color: var(--hard);
  border: 1px solid var(--hard);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all .15s var(--ease-out);
}
.btn-danger:hover { background: #F8C8C0; }

/* ── FAB (mobile only) ──────────────────────────────────── */
.fab {
  position: fixed;
  bottom: 6rem;
  right: 1.2rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(199,73,61,.35), 0 0 0 1px rgba(199,73,61,.4);
  z-index: 15;
  transition: all .2s var(--ease-out);
}
.fab:hover { background: var(--coral-hover); transform: translateY(-2px); }
.fab:active { transform: scale(.96); }

/* ── Modals ─────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0;
  background: rgba(40, 25, 10, 0.45);
  z-index: 100;
  display: flex; align-items: flex-end; justify-content: center;
  animation: scrimIn .22s var(--ease-out);
}
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 768px) {
  .overlay { align-items: center; }
  .modal { border-radius: 20px !important; max-height: 80vh; }
}
.modal {
  background: var(--bg2);
  border-radius: 22px 22px 0 0;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-3);
  animation: slideUp .28s var(--ease-out);
}
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 1.2rem .6rem;
}
.modal-head h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
  letter-spacing: -0.01em;
}
.modal-head button {
  background: var(--bg4);
  border: 1px solid var(--border);
  color: var(--text2);
  cursor: pointer;
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s var(--ease-out);
}
.modal-head button:hover { background: var(--wood-soft); }
.modal-body { padding: .6rem 1.2rem; display: flex; flex-direction: column; gap: .7rem; }
.modal-body label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-family: var(--font-body);
}
.modal-body input,
.modal-body select {
  background: var(--bg2);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text);
  padding: .7rem .85rem;
  font-size: .9rem;
  font-family: var(--font-body);
  font-weight: 500;
  width: 100%;
  margin-top: 3px;
  outline: none;
  transition: border-color .15s var(--ease-out);
}
.modal-body input:focus,
.modal-body select:focus { border-color: var(--coral); border-width: 2px; padding: calc(.7rem - 1px) calc(.85rem - 1px); }

.chk-label {
  display: flex !important;
  align-items: center; gap: .6rem;
  cursor: pointer;
  font-size: .9rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--text) !important;
  padding: .7rem .85rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.chk-label input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  accent-color: var(--coral);
  cursor: pointer;
}
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: .7rem;
  padding: 1rem 1.2rem 1.4rem;
}
.known-hint {
  font-size: .78rem;
  color: var(--coral-deep);
  background: var(--coral-tint);
  border: 1px solid var(--coral);
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 500;
}

/* ── Import preview ─────────────────────────────────────── */
.import-ok-block {
  background: var(--easy-tint);
  border: 1px solid var(--easy);
  border-radius: 12px;
  padding: .9rem;
}
.import-ok-title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--easy);
  margin-bottom: .6rem;
  font-family: var(--font-head);
}
.import-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  padding: 3px 0;
}
.import-err-block {
  background: var(--hard-tint);
  border: 1px solid var(--hard);
  border-radius: 12px;
  padding: .9rem;
}
.import-err-title {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--hard);
  margin-bottom: .4rem;
}
.import-err-row {
  font-size: .72rem;
  color: var(--hard);
  opacity: 0.8;
  padding: 2px 0;
}

/* ── Parsing overlay ────────────────────────────────────── */
.parsing-overlay {
  position: fixed; inset: 0;
  background: rgba(40, 25, 10, 0.55);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.parsing-card {
  background: var(--bg2);
  border-radius: 18px;
  padding: 2rem 2.5rem;
  text-align: center;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-3);
}
.parsing-anim {
  font-size: 2.8rem;
  animation: bounce .8s infinite;
  margin-bottom: .8rem;
}

/* ── Empty states ───────────────────────────────────────── */
.empty-card {
  text-align: center;
  padding: 2.8rem 1.2rem;
  background: var(--bg2);
  border-radius: 14px;
  border: 1px dashed var(--border-strong);
  box-shadow: var(--shadow-1);
}
.empty-icon {
  font-size: 2.8rem;
  margin-bottom: .8rem;
}
.empty-card p {
  color: var(--text);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: .4rem;
  letter-spacing: -0.01em;
}
.empty-sub {
  font-size: .8rem !important;
  color: var(--text2) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  margin-bottom: 1.2rem !important;
}
.empty-actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }

/* ── Toast ──────────────────────────────────────────────── */
.toast {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 11px 18px;
  border-radius: 12px;
  font-size: .85rem;
  font-weight: 500;
  z-index: 300;
  white-space: nowrap;
  animation: toastIn .22s var(--ease-out);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-2);
  font-family: var(--font-body);
  max-width: calc(100% - 32px);
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.toast-ok   { background: rgba(222, 241, 229, 0.96); border: 1px solid var(--easy); color: #2D7050; }
.toast-warn { background: rgba(251, 222, 217, 0.96); border: 1px solid var(--hard); color: var(--hard); }
.toast-info { background: rgba(220, 235, 247, 0.96); border: 1px solid var(--verse); color: var(--verse); }

/* ── Animations ─────────────────────────────────────────── */
.fade-in { animation: fadeIn .25s var(--ease-out); }
@keyframes fadeIn  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes bounce  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }