/* ===========================================================================
   PianoPro — "Warm hybrid" theme (redesign direction)
   Shared by every warm screen. One source of truth for Claude Code.
   Pairs with the design-system tokens in ../styles.css (magenta, Lato, gold).
   Tweak panel overrides --r / --paper / --panel / --hair / --color-primary /
   --hero-font at runtime; the values below are the locked defaults.
   =========================================================================== */

:root {
  /* paper + ink (warm neutrals) */
  --paper:    #efe9da;   /* slonovina (locked default) */
  --panel:    #f9f5ec;
  --panel-2:  #f3ecdc;
  --ink:      #2f291f;
  --ink-soft: #6c6250;
  --ink-mute: #a0967f;
  --hair:     #ded3bd;
  --sunken:   #ece2cb;

  /* type */
  --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --hero-font: var(--serif);

  /* shape (locked default: near-sharp, editorial) */
  --r: 1px;
  --r-cta: 4px;

  /* accent comes from ../styles.css (--color-primary = magenta); the tweak
     panel can repoint it. Espresso for the one dark block: */
  --espresso: #38301f;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(rgba(120,100,70,0.045) 1px, transparent 1px);
  background-size: 8px 8px;
}

/* ---- type helpers ---- */
.serif { font-family: var(--hero-font); }
.eyebrow { color: var(--color-primary); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.lbl { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }
h1.hero { font-family: var(--hero-font); font-weight: 600; font-size: 46px; line-height: 1.06; letter-spacing: 0; margin: 0 0 26px; max-width: 680px; color: var(--ink); }
h2.sec { font-family: var(--hero-font); font-weight: 600; font-size: 30px; margin: 0 0 6px; color: var(--ink); }
.lead { font-family: var(--text, var(--font-body)); font-size: 14px; color: var(--ink-soft); margin: 0; }

/* ---- layout ---- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 30px; }
.panel { background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r); }

/* ---- top nav ---- */
.nav { border-bottom: 1px solid var(--hair); position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(8px); }
.navin { height: 66px; display: flex; align-items: center; justify-content: space-between; }
.brand { font-family: var(--serif); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.brand b { color: var(--color-primary); font-weight: 600; }
.links { display: flex; gap: 30px; }
.links a { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; padding-bottom: 4px; position: relative; white-space: nowrap; }
.links a:hover { color: var(--ink); }
.links a.on { color: var(--ink); }
.links a.on::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background: var(--color-primary); }
.navright { display: flex; align-items: center; gap: 14px; }
.streak { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; font-size: 13.5px; color: var(--color-primary); }
.ava { width: 34px; height: 34px; border-radius: 999px; background: var(--ink); color: var(--paper); display:flex; align-items:center; justify-content:center; font-weight: 700; font-size: 13px; }

/* ---- chips / filters ---- */
.chips { display: flex; gap: 9px; flex-wrap: wrap; }
.chip { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; padding: 8px 15px; border: 1px solid var(--hair); background: transparent; color: var(--ink-soft); cursor: pointer; border-radius: var(--r); transition: all .15s ease; }
.chip:hover { border-color: var(--ink-mute); color: var(--ink); }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip.solid.on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ---- magenta focal action ---- */
.continue { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; border: none; cursor: pointer; padding: 26px; border-radius: var(--r-cta); color: #fff; background: linear-gradient(135deg, var(--magenta-500), var(--magenta-600)); box-shadow: 0 16px 36px color-mix(in srgb, var(--color-primary) 28%, transparent); }
.continue .k { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.continue .t { font-family: var(--hero-font); font-weight: 600; font-size: 28px; margin: 7px 0 16px; display: block; }
.pb { height: 6px; background: rgba(255,255,255,0.25); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.pb i { display: block; height: 100%; background: #fff; border-radius: 999px; }
.play { width: 58px; height: 58px; flex-shrink: 0; border-radius: 999px; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border: none; border-radius: var(--r-cta); font-family: var(--font-body); font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; }
.btn.primary { background: var(--color-primary); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--hair); }
.btn.soft { background: var(--surface-tint-primary); color: var(--color-primary); }

/* ---- progress ---- */
.bar { height: 7px; background: var(--sunken); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--magenta-500), var(--magenta-400)); border-radius: 999px; }

/* ---- stat row ---- */
.statrow { padding: 20px 22px; display: grid; }
.statrow .s { padding: 4px 18px; }
.statrow .s + .s { border-left: 1px solid var(--hair); }
.statrow .h { display: flex; align-items: center; gap: 6px; color: var(--ink-mute); margin-bottom: 9px; }
.statrow .v { font-family: var(--hero-font); font-weight: 600; font-size: 34px; line-height: 1; color: var(--ink); }

/* ---- generic icon tile ---- */
.tile { flex-shrink: 0; display:flex; align-items:center; justify-content:center; border-radius: var(--r); }
.tile.pri { background: var(--surface-tint-primary); color: var(--color-primary); }
.tile.mut { background: var(--sunken); color: var(--ink-soft); }

/* ---- card (lesson / song) ---- */
.lcard { background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r); padding: 20px; cursor: pointer; transition: box-shadow .18s ease, transform .18s ease; }
.lcard:hover { box-shadow: 0 14px 30px rgba(60,45,25,0.12); transform: translateY(-3px); }
.lcard h3 { margin: 10px 0 6px; font-family: var(--hero-font); font-weight: 600; font-size: 21px; color: var(--ink); }
.lcard p { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }

/* ---- quiz ---- */
.qopt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 16px 18px; border-radius: var(--r); cursor: pointer; font-family: var(--font-body); font-size: 16px; font-weight: 600; background: var(--panel); border: 1.5px solid var(--hair); color: var(--ink); transition: all .15s ease; }
.qopt:hover { border-color: var(--ink-mute); }
.qopt.correct { background: var(--color-success-transparent); border-color: var(--color-success); color: #166a4e; }
.qopt.wrong { background: rgba(239,68,68,0.08); border-color: var(--color-danger); color: #b3261e; }

/* ---- piano keyboard ---- */
.kbd { position: relative; display: flex; gap: 4px; height: 150px; user-select: none; }
.wk { position: relative; flex: 1; background: var(--panel); border: 1.5px solid var(--hair); border-radius: 0 0 6px 6px; box-shadow: var(--shadow-subtle); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 9px; font-size: 12px; font-weight: 700; color: var(--ink-mute); }
.wk.on { background: var(--surface-tint-primary); border-color: var(--color-primary); color: var(--color-primary); }
.bk { position: absolute; top: 0; width: 24px; height: 92px; background: var(--espresso); border-radius: 0 0 5px 5px; z-index: 2; box-shadow: 0 3px 6px rgba(0,0,0,0.3); }

/* ---- espresso block ---- */
.dark { background: var(--espresso); border-radius: var(--r); color: #fff; }

svg.lucide { stroke-width: 2; }