/* ==========================================================================
   moderni-vyuka.cz — styles (Editorial redesign)
   Design system "Moderní výuka" — warm paper + ink, terracotta accent,
   Spectral / Hanken Grotesk / Spline Sans Mono. 80 % klid / 20 % hravost.
   Fonts loaded via <link> in index.html.
   ========================================================================== */

/* ===== TOKENS — color ===================================================== */
:root{
  --paper:#FBF8F1; --cream:#F4ECDD; --beige:#ECE2CF; --sand:#E3D8C1;
  --sand-strong:#D6C9AD; --taupe:#B7AB92; --stone:#8C8270; --stone-ink:#6B6253;
  --navy:#1E2A38; --navy-soft:#2A3848; --graphite:#33373E; --graphite-2:#474C54;
  --terracotta:#BC5D3C; --terracotta-hover:#A64E30; --terracotta-tint:#F3E0D6;
  --orange-muted:#CC8A4A; --orange-tint:#F5E8D4;

  --subj-matematika:#4C6E8A; --subj-cestina:#5D7A56; --subj-dejepis:#AE832F;
  --subj-prirodopis:#80967A; --subj-anglictina:#836F92; --subj-zemepis:#4F7E78;
  --subj-fyzika:#4D7986; --subj-chemie:#A06A75; --subj-prvouka:#87894F;

  --easy:#6F8A5F; --easy-tint:#E6EBDD; --medium:#C0843E; --medium-tint:#F4E8D2;
  --hard:#BC5D3C; --hard-tint:#F3E0D6; --success:#5E7F54; --success-tint:#E4EBDB;
  --danger:#B14A3C; --danger-tint:#F3DDD6;

  --bg:var(--cream); --bg-subtle:var(--beige); --surface:var(--paper); --surface-sunken:var(--beige);
  --text:var(--graphite); --text-strong:var(--navy); --text-muted:var(--stone-ink); --text-subtle:var(--stone);
  --text-on-accent:#FBF8F1; --text-on-ink:#F4ECDD;
  --border:var(--sand); --border-strong:var(--sand-strong); --divider:var(--sand);
  --accent:var(--terracotta); --accent-hover:var(--terracotta-hover); --accent-tint:var(--terracotta-tint);
  --action:var(--navy); --action-hover:var(--navy-soft);
  --focus-ring:color-mix(in srgb, var(--terracotta) 45%, white);

  /* type */
  --font-serif:'Spectral','Iowan Old Style',Georgia,'Times New Roman',serif;
  --font-sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'Spline Sans Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --font-display:var(--font-serif); --font-body:var(--font-sans); --font-ui:var(--font-sans); --font-meta:var(--font-mono);
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --fs-display:3.25rem; --fs-h1:2.5rem; --fs-h2:1.875rem; --fs-h3:1.375rem; --fs-h4:1.125rem;
  --fs-lede:1.1875rem; --fs-body:1rem; --fs-sm:.9375rem; --fs-xs:.8125rem; --fs-label:.6875rem;
  --lh-tight:1.08; --lh-snug:1.25; --lh-normal:1.5; --lh-relaxed:1.65;
  --ls-tight:-.02em; --ls-snug:-.01em; --ls-normal:0; --ls-label:.12em;

  /* spacing / shape / motion */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem;
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --bw-hair:1px; --bw-med:1.5px;
  --shadow-xs:0 1px 2px rgba(46,36,22,.04);
  --shadow-sm:0 1px 2px rgba(46,36,22,.04),0 2px 6px rgba(46,36,22,.05);
  --shadow-md:0 4px 14px rgba(46,36,22,.07),0 2px 5px rgba(46,36,22,.04);
  --shadow-lg:0 14px 38px rgba(46,36,22,.12),0 4px 10px rgba(46,36,22,.06);
  --shadow-focus:0 0 0 3px var(--focus-ring);
  --container:1120px; --container-rd:720px; --header-h:64px;
  --ease:cubic-bezier(.2,0,0,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:140ms; --dur:200ms; --dur-slow:320ms;
}

/* ===== BASE =============================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font-body); font-size:var(--fs-body); line-height:var(--lh-relaxed);
  color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; display:flex; flex-direction:column;
}
img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm); }
:focus:not(:focus-visible){ outline:none; }
::selection{ background:var(--terracotta-tint); color:var(--navy); }
#app{ flex:1 0 auto; outline:none; }

.u-container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--space-5); }

/* ===== BRAND / LOGO ====================================================== */
.mv-logo{ display:inline-flex; align-items:center; gap:10px; }
.mv-logo__mark{
  width:30px; height:30px; border-radius:8px; background:var(--terracotta); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-weight:600; font-size:18px; line-height:1;
}
.mv-logo--ink .mv-logo__mark{ background:var(--navy); }
.mv-logo__word{ font-family:var(--font-serif); font-weight:500; font-size:21px; letter-spacing:-.015em; color:var(--navy); white-space:nowrap; }

/* ===== HEADER (static shell) ============================================= */
.mvk-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--sand);
}
.mvk-header.is-scrolled{ box-shadow:var(--shadow-sm); }
.mvk-header__inner{ max-width:var(--container); margin-inline:auto; padding:0 var(--space-5);
  height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); }
.mvk-header__brand{ background:none; border:0; padding:0; cursor:pointer; }
.mvk-header__nav{ display:flex; align-items:center; gap:var(--space-2); }
.mvk-navlink{
  display:inline-flex; align-items:center; gap:var(--space-2); height:40px; padding:0 var(--space-3);
  border-radius:var(--r-md); font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:var(--fw-semibold);
  color:var(--graphite); background:none; border:0; cursor:pointer;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mvk-navlink:hover{ background:var(--beige); color:var(--navy); }
.mvk-navlink svg{ width:18px; height:18px; }

/* ===== BUTTONS =========================================================== */
.mv-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:44px; padding:0 var(--space-5); border:1px solid transparent; border-radius:var(--r-md);
  font-family:var(--font-sans); font-weight:var(--fw-semibold); font-size:var(--fs-sm);
  line-height:1; cursor:pointer; white-space:nowrap; user-select:none;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.mv-btn--block{ width:100%; }
.mv-btn--sm{ min-height:36px; padding:0 var(--space-4); font-size:var(--fs-xs); }
.mv-btn--lg{ min-height:52px; padding:0 var(--space-6); font-size:var(--fs-body); }
.mv-btn--primary{ background:var(--action); color:var(--text-on-ink); }
.mv-btn--primary:hover{ background:var(--action-hover); }
.mv-btn--primary:active{ transform:translateY(1px); }
.mv-btn--accent{ background:var(--accent); color:var(--text-on-accent); }
.mv-btn--accent:hover{ background:var(--accent-hover); }
.mv-btn--accent:active{ transform:translateY(1px); }
.mv-btn--secondary{ background:var(--surface); border-color:var(--border-strong); color:var(--text-strong); }
.mv-btn--secondary:hover{ background:var(--bg-subtle); border-color:var(--taupe); }
.mv-btn--secondary:active{ transform:translateY(1px); }
.mv-btn--ghost{ background:transparent; color:var(--text-strong); padding-inline:var(--space-3); }
.mv-btn--ghost:hover{ background:var(--bg-subtle); }
.mv-btn--success{ background:var(--success); color:#fff; }
.mv-btn--success:hover{ filter:brightness(.95); }
.mv-btn[disabled],.mv-btn.is-disabled{ opacity:.45; cursor:not-allowed; pointer-events:none; }
.mv-btn svg{ width:18px; height:18px; }

/* spinner inside button */
.mv-spinner{ width:16px; height:16px; border-radius:50%; border:2px solid currentColor; border-top-color:transparent; display:inline-block; animation:mv-spin .7s linear infinite; }
@keyframes mv-spin{ to{ transform:rotate(360deg); } }

/* ===== CHIPS ============================================================= */
.mv-chip{
  display:inline-flex; align-items:center; gap:var(--space-2); min-height:38px; padding:0 var(--space-4);
  border-radius:var(--r-pill); border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer;
  font-family:var(--font-sans); font-size:var(--fs-xs); font-weight:var(--fw-medium); white-space:nowrap;
  transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.mv-chip:hover{ border-color:var(--border-strong); background:var(--bg-subtle); }
.mv-chip__dot{ width:8px; height:8px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.mv-chip.is-active{ background:var(--accent-tint); border-color:var(--accent); color:var(--accent-hover); font-weight:var(--fw-semibold); }
.mv-chip--subject.is-active{
  background:color-mix(in srgb, var(--subject-color, var(--accent)) 12%, var(--paper));
  border-color:color-mix(in srgb, var(--subject-color, var(--accent)) 40%, var(--paper));
  color:var(--subject-color, var(--accent));
}

.mv-gradechip{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  width:84px; height:84px; border-radius:var(--r-lg); border:1.5px solid var(--border-strong);
  background:var(--surface); cursor:pointer;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.mv-gradechip:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.mv-gradechip__num{ font-family:var(--font-serif); font-weight:500; font-size:2rem; line-height:1; color:var(--navy); }
.mv-gradechip__label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); }
.mv-gradechip.is-active{ border-color:var(--accent); background:var(--accent-tint); }

/* ===== TAGS / BADGES / PILLS ============================================ */
.mv-badge{
  display:inline-flex; align-items:center; gap:var(--space-2); padding:4px 10px; border-radius:var(--r-pill);
  font-family:var(--font-mono); font-size:var(--fs-label); font-weight:var(--fw-medium); letter-spacing:.08em;
  text-transform:uppercase; line-height:1.4; background:var(--beige); color:var(--graphite-2); border:1px solid var(--sand);
}
.mv-badge--accent{ background:var(--terracotta-tint); color:var(--terracotta-hover); border-color:transparent; }
.mv-meta{
  display:inline-flex; align-items:center; gap:var(--space-2); padding:4px 11px; border-radius:var(--r-pill);
  font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-muted); background:var(--beige); border:1px solid var(--sand);
}
.mv-meta svg{ width:14px; height:14px; opacity:.7; }
.mv-subject{
  display:inline-flex; align-items:center; gap:var(--space-2); padding:4px 11px; border-radius:var(--r-pill); line-height:1.4;
  font-family:var(--font-sans); font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--subject-color, var(--accent));
  background:color-mix(in srgb, var(--subject-color, var(--accent)) 12%, var(--paper));
  border:1px solid color-mix(in srgb, var(--subject-color, var(--accent)) 28%, var(--paper));
}
.mv-subject__dot{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.mv-diff{ display:inline-flex; align-items:center; gap:var(--space-2); padding:4px 11px; border-radius:var(--r-pill); line-height:1.4;
  font-family:var(--font-sans); font-size:var(--fs-xs); font-weight:var(--fw-semibold); }
.mv-diff__dot{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.mv-diff--lehka{ color:var(--easy); background:var(--easy-tint); }
.mv-diff--stredni{ color:var(--medium); background:var(--medium-tint); }
.mv-diff--tezka{ color:var(--hard); background:var(--hard-tint); }

/* ===== CARD / PRODUCT CARD ============================================== */
.mv-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:var(--space-5); }
.mv-card--interactive{ cursor:pointer; transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease); }
.mv-card--interactive:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--border-strong); }

.mv-product{ display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-5); height:100%; }
.mv-product__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.mv-product__owned{ font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.06em; text-transform:uppercase; color:var(--success); }
.mv-product__title{ font-family:var(--font-serif); font-weight:var(--fw-medium); font-size:var(--fs-h3); line-height:var(--lh-snug); letter-spacing:var(--ls-snug); color:var(--text-strong); margin:0; text-wrap:balance; }
.mv-product__topic{ font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--text-subtle); margin:calc(-1 * var(--space-2)) 0 0; }
.mv-product__tags{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.mv-product__summary{ font-size:var(--fs-sm); line-height:var(--lh-normal); color:var(--text-muted); margin:0; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mv-product__meta{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.mv-product__foot{ margin-top:auto; padding-top:var(--space-3); border-top:1px solid var(--divider); display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.mv-product__price{ font-family:var(--font-serif); font-weight:var(--fw-semibold); font-size:var(--fs-h4); color:var(--text-strong); }
/* karta s AI cover obrázkem */
.mv-product--cover{ padding:0; gap:0; overflow:hidden; }
.mv-product__cover{ aspect-ratio:16/10; overflow:hidden; background:var(--bg-subtle); border-bottom:1px solid var(--border); }
.mv-product__cover img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--dur-slow) var(--ease); }
.mv-card--interactive:hover .mv-product__cover img{ transform:scale(1.04); }
.mv-product__body{ display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-5); flex:1 1 auto; }

/* ===== FORM FIELD / INPUT =============================================== */
.mv-field{ display:flex; flex-direction:column; gap:var(--space-2); }
.mv-field__label{ font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text-strong); }
.mv-field__hint{ font-size:var(--fs-xs); color:var(--text-subtle); }
.mv-field__error{ font-size:var(--fs-xs); color:var(--danger); }
.mv-input{
  width:100%; min-height:44px; padding:0 var(--space-4); border:1px solid var(--border-strong); border-radius:var(--r-md);
  background:var(--surface); color:var(--text); font-family:var(--font-sans); font-size:var(--fs-body);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.mv-input::placeholder{ color:var(--text-subtle); }
.mv-input:focus{ outline:none; border-color:var(--accent); box-shadow:var(--shadow-focus); }
.mv-input.is-invalid{ border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-tint); }

/* ===== HERO / PATH PICKER =============================================== */
.mvk-hero{ border-bottom:1px solid var(--sand); }
.mvk-hero__inner{ max-width:var(--container); margin-inline:auto; padding:var(--space-8) var(--space-5) var(--space-7); }
.mvk-hero__title{ font-family:var(--font-serif); font-weight:500; font-size:var(--fs-display); line-height:var(--lh-tight); letter-spacing:var(--ls-tight); color:var(--navy); max-width:16ch; text-wrap:balance; }
.mvk-hero__sub{ font-size:var(--fs-lede); line-height:var(--lh-normal); color:var(--stone-ink); max-width:46ch; margin-top:var(--space-4); }
.mvk-picker{ margin-top:var(--space-7); }
.mvk-picker__q{ font-family:var(--font-serif); font-weight:500; font-size:var(--fs-h2); color:var(--navy); margin-bottom:var(--space-4); }
.mvk-picker__q em{ font-style:normal; color:var(--terracotta); }
.mvk-picker__grades,.mvk-picker__subjects{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
.mvk-picker__back{ margin-bottom:var(--space-4); }
.mvk-subjtile{
  display:flex; align-items:center; gap:var(--space-3); min-width:220px; padding:var(--space-4) var(--space-5);
  background:var(--paper); border:1.5px solid var(--border-strong); border-radius:var(--r-lg); cursor:pointer; text-align:left;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.mvk-subjtile:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.mvk-subjtile[disabled]{ opacity:.45; cursor:not-allowed; }
.mvk-subjtile__dot{ width:12px; height:12px; border-radius:50%; flex:0 0 auto; }
.mvk-subjtile__name{ font-family:var(--font-serif); font-weight:500; font-size:var(--fs-h4); color:var(--navy); }
.mvk-subjtile__count{ font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--stone); margin-left:auto; }

/* ===== CATALOG ========================================================== */
.mvk-catalog{ max-width:var(--container); margin-inline:auto; padding:var(--space-6) var(--space-5) var(--space-8); }
.mvk-steps{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; color:var(--stone); margin-bottom:var(--space-5); }
.mvk-steps b{ color:var(--terracotta); font-weight:500; }
.mvk-steps__sep{ color:var(--taupe); }
.mvk-filterbar{ display:flex; flex-direction:column; gap:var(--space-4); margin-bottom:var(--space-6); }
.mvk-filtergroup{ display:flex; flex-direction:column; gap:var(--space-2); }
.mvk-filtergroup__label{ font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase; color:var(--stone); }
.mvk-filtergroup__row{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.mvk-results{ font-family:var(--font-sans); font-size:var(--fs-sm); color:var(--stone-ink); margin-bottom:var(--space-4); }
.mvk-results b{ color:var(--navy); font-weight:var(--fw-semibold); }
.mvk-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--space-4); }
.mvk-empty{ text-align:center; padding:var(--space-8) var(--space-5); border:1px dashed var(--border-strong); border-radius:var(--r-lg); background:var(--paper); }
.mvk-empty__t{ font-family:var(--font-serif); font-size:var(--fs-h3); color:var(--navy); margin-bottom:var(--space-2); }
.mvk-empty__p{ color:var(--stone-ink); margin-bottom:var(--space-4); }

/* ===== DETAIL =========================================================== */
.mvk-detail{ max-width:920px; margin-inline:auto; padding:var(--space-5) var(--space-5) var(--space-9); }
.mvk-detail__back{ margin:var(--space-4) 0 var(--space-5); }
.mvk-detail__eyebrow{ margin-bottom:var(--space-3); }
.mvk-detail__title{ font-family:var(--font-serif); font-weight:500; font-size:var(--fs-h1); line-height:var(--lh-snug); letter-spacing:var(--ls-snug); color:var(--navy); text-wrap:balance; }
.mvk-detail__tags{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4); }
.mvk-detail__lede{ font-size:var(--fs-lede); line-height:var(--lh-normal); color:var(--stone-ink); margin-top:var(--space-5); max-width:60ch; }
.mvk-detail__cover{ margin-bottom:var(--space-5); border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--sand); box-shadow:var(--shadow-md); aspect-ratio:16/9; background:var(--bg-subtle); }
.mvk-detail__cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.mvk-detail__about{ margin-top:var(--space-6); max-width:var(--container-rd); }
.mvk-detail__about p{ font-size:var(--fs-body); line-height:var(--lh-relaxed); color:var(--graphite); }
.mvk-detail__preview{ margin-top:var(--space-7); }
.mvk-preview{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--space-4); margin-top:var(--space-3); }
.mvk-preview__item{ display:block; border:1px solid var(--sand); border-radius:var(--r-md); overflow:hidden; background:var(--paper); box-shadow:var(--shadow-sm); transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease); }
.mvk-preview__item:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.mvk-preview__item img{ width:100%; height:auto; display:block; }
.mvk-preview__note{ font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--stone); margin-top:var(--space-3); }
.mvk-detail__grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:var(--space-5); margin-top:var(--space-6); align-items:start; }
.mvk-detail__h{ font-family:var(--font-sans); font-weight:var(--fw-semibold); font-size:var(--fs-h4); color:var(--navy); margin-bottom:var(--space-3); }
.mvk-taglist{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.mvk-pill{ display:inline-flex; align-items:center; padding:5px 12px; border-radius:var(--r-pill); background:var(--beige); border:1px solid var(--sand); font-size:var(--fs-xs); color:var(--graphite); }
.mvk-inside{ display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-6); }
.mvk-inside__item{ display:flex; align-items:flex-start; gap:var(--space-3); font-size:var(--fs-sm); color:var(--graphite); }
.mvk-inside__check{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--easy-tint); color:var(--easy); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
.mvk-buy{ position:sticky; top:calc(var(--header-h) + var(--space-5)); }
.mvk-buy__spec{ display:flex; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-5); }
.mvk-buy__row{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding-bottom:var(--space-3); border-bottom:1px solid var(--divider); }
.mvk-buy__row:last-child{ border-bottom:0; padding-bottom:0; }
.mvk-buy__k{ font-size:var(--fs-sm); color:var(--stone-ink); }
.mvk-buy__v{ font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--navy); text-align:right; }
.mvk-buy__price{ display:flex; align-items:baseline; gap:var(--space-2); margin:var(--space-4) 0; }
.mvk-buy__amount{ font-family:var(--font-serif); font-weight:600; font-size:2rem; color:var(--navy); }
.mvk-buy__note{ font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--stone); }
.mvk-buy__reassure{ font-size:var(--fs-xs); color:var(--stone); text-align:center; margin-top:var(--space-3); }
.mvk-buy__owned{ display:inline-flex; align-items:center; gap:var(--space-2); font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.06em; text-transform:uppercase; color:var(--success); margin-bottom:var(--space-4); }

/* ===== CHECKOUT ========================================================= */
.mvk-checkout{ max-width:460px; margin:var(--space-7) auto var(--space-9); padding:0 var(--space-5); }
.mvk-checkout__back{ margin-bottom:var(--space-4); }
.mvk-checkout__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-5); }
.mvk-checkout__h{ font-family:var(--font-serif); font-weight:500; font-size:var(--fs-h3); color:var(--navy); }
.mvk-summary{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-4); background:var(--beige); border:1px solid var(--sand); border-radius:var(--r-md); margin-bottom:var(--space-5); }
.mvk-summary__name{ font-size:var(--fs-sm); color:var(--graphite); }
.mvk-summary__price{ font-family:var(--font-serif); font-weight:600; font-size:var(--fs-h4); color:var(--navy); white-space:nowrap; }
.mvk-cardmock{ display:flex; align-items:center; gap:var(--space-3); padding:0 var(--space-4); min-height:44px; border:1px dashed var(--border-strong); border-radius:var(--r-md); background:var(--surface-sunken); color:var(--stone); font-size:var(--fs-sm); }
.mvk-cardmock svg{ width:20px; height:20px; opacity:.7; }
.mvk-checkout__note{ font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--stone); text-align:center; margin-top:var(--space-3); }
.mvk-stack{ display:flex; flex-direction:column; gap:var(--space-4); }

/* ===== SUCCESS ========================================================== */
.mvk-success{ max-width:560px; margin:var(--space-9) auto; text-align:center; padding:0 var(--space-5); }
.mvk-success__check{ width:64px; height:64px; margin:0 auto var(--space-5); border-radius:50%; background:var(--success-tint); color:var(--success); display:flex; align-items:center; justify-content:center; }
.mvk-success__check svg{ width:32px; height:32px; }
.mvk-success__title{ font-family:var(--font-serif); font-weight:500; font-size:var(--fs-h1); color:var(--navy); }
.mvk-success__text{ font-size:var(--fs-lede); color:var(--stone-ink); margin-top:var(--space-3); }
.mvk-success__actions{ margin-top:var(--space-6); max-width:340px; margin-inline:auto; }
.mvk-success__links{ display:flex; gap:var(--space-4); justify-content:center; margin-top:var(--space-5); flex-wrap:wrap; }

/* ===== LIBRARY ========================================================== */
.mvk-library{ max-width:var(--container); margin-inline:auto; padding:var(--space-6) var(--space-5) var(--space-9); }
.mvk-library__head{ margin-bottom:var(--space-6); }
.mvk-library__title{ font-family:var(--font-serif); font-weight:500; font-size:var(--fs-h1); color:var(--navy); margin-top:var(--space-3); }
.mvk-libitem{ display:flex; align-items:center; gap:var(--space-4); padding:var(--space-4) var(--space-5); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-xs); }
.mvk-libitem + .mvk-libitem{ margin-top:var(--space-3); }
.mvk-libitem__dot{ width:12px; height:12px; border-radius:50%; flex:0 0 auto; }
.mvk-libitem__body{ flex:1 1 auto; min-width:0; }
.mvk-libitem__title{ font-family:var(--font-serif); font-weight:500; font-size:var(--fs-h4); color:var(--navy); }
.mvk-libitem__meta{ font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--stone); margin-top:2px; }

/* ===== FOOTER =========================================================== */
.mvk-footer{ border-top:1px solid var(--sand); background:var(--paper); flex:0 0 auto; }
.mvk-footer__inner{ max-width:var(--container); margin-inline:auto; padding:var(--space-6) var(--space-5); display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; }
.mvk-footer__note{ font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--stone); letter-spacing:.02em; }

/* ===== RESPONSIVE ======================================================= */
@media (max-width:760px){
  .mvk-hero__title{ font-size:2.25rem; }
  .mvk-hero__inner{ padding:var(--space-7) var(--space-5) var(--space-6); }
  .mvk-detail__grid{ grid-template-columns:1fr; }
  .mvk-buy{ position:static; }
  .mvk-subjtile{ min-width:0; width:100%; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
  .mv-card--interactive:hover,.mv-gradechip:hover,.mvk-subjtile:hover{ transform:none; }
}