/* ============ Recall — редакторская тема: тёмный лес, бумага, антиква ============ */
:root{
  --bg:#11150f;
  --panel:#181d15;
  --panel-2:#1b2118;
  --paper:#f0ead8;
  --paper-2:#e9e2cd;
  --paper-ink:#232d1f;
  --ink:#edf0e2;
  --ink-2:#c8cfba;
  --muted:#929c84;
  --sage:#a9c8b0;
  --sage-deep:#6f9d7f;
  --amber:#d3b878;
  --ok:#7fb892;
  --ok-ink:#c2e0cb;
  --ok-bg:rgba(127,184,146,.12);
  --bad:#d98d8d;
  --bad-ink:#eec3bc;
  --bad-bg:rgba(217,141,141,.1);
  --line:rgba(240,234,216,.12);
  --hair:rgba(240,234,216,.07);
  --radius:18px;
  --sh:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.22);
  --sh-lg:0 24px 60px rgba(0,0,0,.45);
  --display:"Golos Text","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  background-image:
    radial-gradient(1100px 700px at 12% -12%, rgba(84,134,102,.42), transparent 62%),
    radial-gradient(800px 560px at 92% -4%, rgba(169,200,176,.14), transparent 55%),
    radial-gradient(900px 620px at 50% 118%, rgba(58,94,72,.32), transparent 62%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* зерно плёнки поверх всего */
body::after{
  content:"";position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
button{font-family:inherit}
input,textarea,select{font-family:inherit;color:var(--ink)}
a{color:var(--sage);text-decoration:none}
::selection{background:rgba(169,200,176,.35);color:#fff}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-thumb{background:rgba(240,234,216,.14);border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

svg.ic{width:18px;height:18px;flex:none;vertical-align:-3px}
:focus-visible{outline:2px solid var(--sage);outline-offset:2px;border-radius:6px}

.overline{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* ---------- шапка ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(17,21,15,.78);
  backdrop-filter:saturate(140%) blur(18px);
  -webkit-backdrop-filter:saturate(140%) blur(18px);
  border-bottom:1px solid var(--hair);
}
.topbar-in{max-width:1000px;margin:0 auto;padding:0 22px;height:60px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{font-family:var(--display);font-size:23px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:11px;color:var(--paper)}
.logo:hover{color:#fff}
.logo-mark{width:29px;height:29px;border-radius:8px;background:var(--paper);color:var(--paper-ink);display:flex;align-items:center;justify-content:center;flex:none}
.logo-mark svg.ic{width:15px;height:15px}
.top-actions{display:flex;gap:8px}

.wrap{max-width:1000px;margin:0 auto;padding:40px 22px 76px}
h1.page-title{font-family:var(--display);font-size:clamp(34px,5vw,54px);font-weight:500;letter-spacing:-.015em;line-height:1.05;margin:6px 0 10px;color:var(--paper)}
.page-sub{color:var(--muted);margin:0 0 28px;font-size:16.5px;line-height:1.5;max-width:56ch}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);background:transparent;color:var(--ink);padding:8px 16px;border-radius:980px;font-weight:500;font-size:14px;cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform .1s;white-space:nowrap}
.btn:hover{background:rgba(240,234,216,.07);border-color:rgba(240,234,216,.24)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--paper);border-color:var(--paper);color:var(--paper-ink);font-weight:600}
.btn-primary:hover{background:#fff;border-color:#fff}
.btn-ghost{border-color:transparent;background:transparent;color:var(--sage)}
.btn-ghost:hover{background:rgba(169,200,176,.1);border-color:transparent}
.btn-danger{color:#e0a49c}
.btn-danger:hover{background:var(--bad-bg);border-color:rgba(217,141,141,.35)}
.btn-big{padding:12px 26px;font-size:15px}
.icon-btn{width:32px;height:32px;padding:0;border-radius:50%}
.btn:disabled{opacity:.45;cursor:default;pointer-events:none}

.text-input{width:100%;padding:10px 14px;border:1px solid var(--line);border-radius:10px;font-size:15px;background:rgba(240,234,216,.035);color:var(--ink);outline:none;transition:border .15s,box-shadow .15s}
.text-input::placeholder{color:#77816c}
.text-input:focus{border-color:var(--sage);box-shadow:0 0 0 3px rgba(169,200,176,.14)}
textarea.text-input{resize:vertical;min-height:120px;border-radius:12px}
select.text-input option{background:var(--panel);color:var(--ink)}

.check{display:flex;align-items:center;gap:9px;font-size:15px;padding:5px 0;cursor:pointer;color:var(--ink-2)}
.check input{width:17px;height:17px;accent-color:var(--sage-deep)}

/* ---------- главная ---------- */
.statline{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 26px;color:var(--muted);font-size:14.5px}
.statline b{font-family:var(--display);font-size:21px;font-weight:600;color:var(--paper);margin-right:2px}
.statline .dot{opacity:.5;margin:0 6px}

.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.toolbar .search{margin-bottom:0;flex:1;max-width:420px}
.search{position:relative;max-width:420px;margin-bottom:24px}
.search svg.ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none}
.search .text-input{padding-left:42px;border-radius:980px}
.sort-sel{width:auto;min-width:150px}

.set-grid{border-top:1px solid var(--line)}
.set-row{display:grid;grid-template-columns:44px 1fr auto;gap:4px 18px;align-items:center;padding:19px 6px 15px;border-bottom:1px solid var(--hair);cursor:pointer;transition:background .15s;position:relative}
.set-row:hover{background:rgba(240,234,216,.025)}
.set-row .idx{grid-row:span 2;font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px;font-weight:500;align-self:start;padding-top:3px}
.set-row h3{margin:0;font-family:var(--display);font-size:21px;font-weight:500;letter-spacing:-.01em;line-height:1.25;color:var(--ink);transition:color .15s;word-break:break-word}
.set-row:hover h3{color:var(--sage)}
.set-row .meta{grid-column:2;font-size:13.5px;color:var(--muted)}
.set-row .side{grid-row:span 2;text-align:right}
.set-row .pct{font-family:var(--display);font-size:19px;font-weight:600;color:var(--paper)}
.set-row .pct.zero{color:var(--muted);font-weight:400}
.set-row .side .meta{grid-column:auto;padding-top:2px}
.set-row .bar{grid-column:2/-1;height:2px;background:var(--hair);border-radius:2px;margin-top:9px;overflow:hidden}
.set-row .bar i{display:block;height:100%;background:var(--sage-deep);border-radius:2px}

.empty{text-align:center;padding:72px 20px;color:var(--muted)}
.empty-ic{width:64px;height:64px;border-radius:16px;border:1px solid var(--line);color:var(--sage);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.empty-ic svg.ic{width:28px;height:28px}
.empty h2{font-family:var(--display);font-weight:500;font-size:26px;color:var(--paper);margin:0 0 6px;letter-spacing:-.01em}
.empty p{margin:4px 0;font-size:15px}
.footer-note{text-align:center;color:var(--muted);font-size:13px;margin-top:52px}
.footer-note a{border-bottom:1px solid rgba(169,200,176,.35);padding-bottom:1px}

/* ---------- страница набора ---------- */
.set-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.backlink{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:14px;font-weight:500;margin-bottom:18px;transition:color .15s}
.backlink svg.ic{width:15px;height:15px}
.backlink:hover{color:var(--sage)}

.mode-list{border-top:1px solid var(--line);margin:26px 0 30px}
.mode-row{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center;padding:17px 6px;border-bottom:1px solid var(--hair);cursor:pointer;color:var(--ink);transition:background .15s}
.mode-row:hover{background:rgba(240,234,216,.025)}
.mode-row .idx{font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px}
.mode-row h3{margin:0;font-family:var(--display);font-size:20px;font-weight:500;letter-spacing:-.01em;transition:color .15s}
.mode-row:hover h3{color:var(--sage)}
.mode-row .desc{font-size:13.5px;color:var(--muted);margin-top:2px}
.mode-row .go{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all .15s}
.mode-row:hover .go{background:var(--paper);border-color:var(--paper);color:var(--paper-ink)}
.mode-row .go svg.ic{width:15px;height:15px}

.cards-list{border-top:1px solid var(--line)}
.cards-head{display:grid;grid-template-columns:44px 1fr 1fr;gap:14px;padding:12px 6px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.cards-head span:first-child{width:20px}
.cards-row{display:grid;grid-template-columns:44px 1fr 1fr;gap:14px;padding:13px 6px;border-top:1px solid var(--hair);align-items:baseline}
.cards-row .num{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.cards-row .t{font-family:var(--display);font-size:17.5px;font-weight:500;color:var(--paper);word-break:break-word}
.cards-row .d{color:var(--ink-2);font-size:15px;word-break:break-word}

.set-info-block{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin:20px 0;box-shadow:var(--sh)}
.best-line{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:14px;margin:4px 0 22px}
.best-line svg.ic{width:15px;height:15px;color:var(--amber)}
.best-line b{color:var(--ink-2);font-family:var(--display);font-size:16px}

/* ---------- флеш-карточки ---------- */
.fc-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.fc-counter{font-variant-numeric:tabular-nums;font-family:var(--display);font-size:19px;font-weight:600;color:var(--paper)}
.fc-stage{perspective:1400px;display:flex;justify-content:center;margin:4px 0 22px}
.fc-card{width:min(680px,100%);height:min(420px,60vh);min-height:260px;position:relative;cursor:pointer}
.fc-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.7,.25,1)}
.fc-card.flipped .fc-inner{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 36px;box-shadow:var(--sh-lg)}
.fc-front{background:linear-gradient(175deg,#f4efdf,#e7dfc8);color:var(--paper-ink)}
.fc-back{background:#161c12;border:1px solid rgba(169,200,176,.4);transform:rotateY(180deg);box-shadow:var(--sh-lg),inset 0 0 0 1px var(--hair)}
.fc-word{font-family:var(--display);font-size:clamp(26px,4.4vw,42px);font-weight:500;line-height:1.18;letter-spacing:-.01em;word-break:break-word}
.fc-front .fc-word{color:var(--paper-ink)}
.fc-back .fc-word{color:#dceade}
.fc-tag{position:absolute;top:18px;left:22px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:rgba(35,45,31,.5)}
.fc-back .fc-tag{color:rgba(169,200,176,.6)}
.fc-hint{position:absolute;bottom:16px;font-size:12px;opacity:.5;font-weight:500}
.fc-back .fc-hint{color:var(--ink);opacity:.35}
.fc-progress{width:min(680px,100%);margin:0 auto 16px;display:flex;align-items:center;gap:14px}
.fc-progress .progress-track{flex:1}
.progress-track{height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.progress-fill{height:100%;background:var(--sage-deep);transition:width .45s cubic-bezier(.2,.7,.25,1)}

.fc-controls{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.nav-round{width:50px;height:50px;border-radius:50%;font-size:0;padding:0}
.nav-round svg.ic{width:19px;height:19px}
.known-btn.on{background:rgba(211,184,120,.13);border-color:rgba(211,184,120,.5);color:var(--amber)}

/* ---------- заучивание ---------- */
.learn-wrap{max-width:640px;margin:0 auto}
.prompt-card{background:linear-gradient(175deg,#f4efdf,#e7dfc8);color:var(--paper-ink);border-radius:20px;padding:34px 26px;text-align:center;box-shadow:var(--sh);margin-bottom:16px;position:relative}
.prompt-card .p-word{font-family:var(--display);font-size:clamp(24px,4vw,34px);font-weight:500;letter-spacing:-.01em;word-break:break-word;color:var(--paper-ink)}
.prompt-card .p-sub{margin-top:8px;color:rgba(35,45,31,.55);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.prompt-card .icon-btn{border-color:rgba(35,45,31,.25);color:var(--paper-ink);margin-top:14px}
.prompt-card .icon-btn:hover{background:rgba(35,45,31,.08);border-color:rgba(35,45,31,.4)}
.opts{display:grid;gap:9px}
.opt{width:100%;text-align:left;background:transparent;border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:15.5px;cursor:pointer;transition:border-color .13s,background .13s;font-weight:500;color:var(--ink-2)}
.opt:hover{border-color:rgba(169,200,176,.55);color:var(--ink)}
.opt.sel{border-color:var(--sage);background:rgba(169,200,176,.1);color:var(--ink)}
.opt.correct{border-color:var(--ok);background:var(--ok-bg);color:var(--ok-ink);font-weight:600}
.opt.wrong{border-color:var(--bad);background:var(--bad-bg);color:var(--bad-ink)}
.opt.dim{opacity:.4}
.opt:disabled{cursor:default}
.tf-row{display:flex;gap:10px}
.tf-row .opt{flex:1;text-align:center;font-weight:600}
.banner{border-radius:14px;padding:13px 16px;font-weight:600;margin:14px 0 0;display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;font-size:15px}
.banner .banner-ic{display:inline-flex;align-items:center;gap:8px}
.banner .banner-ic svg.ic{width:17px;height:17px}
.banner.ok{background:var(--ok-bg);color:var(--ok-ink)}
.banner.err{background:var(--bad-bg);color:var(--bad-ink)}
.banner .btn{border-color:rgba(240,234,216,.25)}
.type-input-row{display:flex;gap:10px;flex-wrap:wrap}
.type-input-row .text-input{flex:1;min-width:160px}
.learn-progress{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.learn-progress .lbl{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap}
.learn-progress .progress-track{flex:1}

/* ---------- тест ---------- */
.test-q{border-top:1px solid var(--line);padding:22px 2px;margin-bottom:6px}
.test-q .q-head{display:flex;gap:12px;margin-bottom:14px;align-items:baseline}
.q-num{font-family:var(--display);font-size:19px;font-weight:600;color:var(--paper);font-variant-numeric:tabular-nums}
.q-type{font-size:10.5px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.q-mark{margin-left:auto;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;align-self:center}
.q-mark svg.ic{width:13px;height:13px}
.q-mark.ok{background:var(--ok);color:#12271a}
.q-mark.err{background:var(--bad);color:#2a1210}
.score-hero{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:34px;margin-bottom:26px;box-shadow:var(--sh)}
.score-circle{width:112px;height:112px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:32px;font-weight:600;border:1px solid;letter-spacing:-.02em;background:rgba(240,234,216,.03)}
.score-circle.good{border-color:var(--ok);color:var(--ok-ink)}
.score-circle.mid{border-color:var(--amber);color:#e9d9ab}
.score-circle.bad{border-color:var(--bad);color:var(--bad-ink)}
.score-hero h2{font-family:var(--display);font-weight:500;font-size:24px;color:var(--paper);margin:6px 0 0;letter-spacing:-.01em}
.hero-ic{width:64px;height:64px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.hero-ic svg.ic{width:30px;height:30px}
.h-green{color:var(--ok-ink);border-color:rgba(127,184,146,.5)}
.h-orange{color:#e9d9ab;border-color:rgba(211,184,120,.5)}
.h-red{color:var(--bad-ink);border-color:rgba(217,141,141,.5)}
.review-note{margin-top:10px;font-size:14px}
.review-note .u{font-weight:600}
.review-note.ok{color:var(--ok-ink)}
.review-note.err{color:var(--bad-ink)}

/* ---------- пары ---------- */
.match-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.timer{font-variant-numeric:tabular-nums;font-family:var(--display);font-weight:600;font-size:25px;background:transparent;border:none;color:var(--paper);padding:4px 2px}
.timer::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--sage-deep);margin-right:12px;vertical-align:2px}
.match-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;min-height:84px;padding:10px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:500;font-size:14px;cursor:pointer;transition:border-color .12s,background .12s;word-break:break-word;user-select:none;-webkit-user-select:none;color:var(--ink-2)}
.tile:hover{border-color:rgba(169,200,176,.5);color:var(--ink)}
.tile.sel{background:rgba(169,200,176,.1);box-shadow:inset 0 0 0 1.5px var(--sage);color:var(--ink)}
.tile.matched{background:var(--ok-bg);box-shadow:inset 0 0 0 1.5px rgba(127,184,146,.6);opacity:.35;cursor:default;pointer-events:none;color:var(--ok-ink)}
.tile.wrong{background:var(--bad-bg);box-shadow:inset 0 0 0 1.5px var(--bad);color:var(--bad-ink)}

/* ---------- оверлеи ---------- */
.overlay{position:fixed;inset:0;background:rgba(9,12,7,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;animation:fade .2s}
.overlay-card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:36px 38px;max-width:460px;width:100%;text-align:center;box-shadow:var(--sh-lg);animation:pop .28s cubic-bezier(.2,.7,.25,1)}
.overlay-card h2{font-family:var(--display);font-weight:500;font-size:25px;letter-spacing:-.01em;color:var(--paper);margin:8px 0 6px}
@keyframes pop{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- создание набора ---------- */
.create-head{display:grid;gap:10px;max-width:760px;margin-bottom:18px}
.crow{display:grid;grid-template-columns:34px 1fr 36px;gap:10px;align-items:start;margin-bottom:10px;animation:fadein .25s;padding-top:2px}
@keyframes fadein{from{opacity:0;transform:translateY(-3px)}to{opacity:1}}
.crow .num{font-family:var(--display);color:var(--muted);font-weight:500;font-size:15px;padding-top:11px;text-align:center;font-variant-numeric:tabular-nums}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.crow .del{margin-top:3px}
.create-tools{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 28px;padding-top:16px;border-top:1px solid var(--hair)}

/* ---------- прочее ---------- */
.muted{color:var(--muted)}
.mt{margin-top:16px}
.mb{margin-bottom:16px}
.flex{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#toasts{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--paper);color:var(--paper-ink);padding:11px 20px;border-radius:980px;font-size:14px;font-weight:500;box-shadow:var(--sh-lg);opacity:0;transform:translateY(8px) scale(.97);transition:all .28s cubic-bezier(.2,.7,.25,1);max-width:90vw}
.toast.show{opacity:1;transform:none}
.toast.ok{background:#cfe0cf}

.view-in{animation:viewin .3s cubic-bezier(.2,.7,.25,1)}
@keyframes viewin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.prompt-card.shake{animation:shake .45s}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
.prompt-card.pulse{animation:pulseOk .5s}
@keyframes pulseOk{0%{transform:scale(1)}40%{transform:scale(1.012)}100%{transform:scale(1)}}
.streak{display:inline-flex;align-items:center;gap:6px;background:rgba(211,184,120,.1);border:1px solid rgba(211,184,120,.4);color:#e9d9ab;padding:4px 12px;border-radius:980px;font-size:12.5px;font-weight:600;white-space:nowrap}
.streak svg.ic{width:13px;height:13px}

@media (max-width:760px){
  .match-grid{grid-template-columns:repeat(2,1fr)}
  .cards-head{display:none}
  .cards-row{grid-template-columns:34px 1fr;gap:6px 12px;padding:13px 2px}
  .cards-row .num{grid-row:span 2;padding-top:2px}
  .cards-row .d{grid-column:2}
  .pair{grid-template-columns:1fr}
  h1.page-title{font-size:32px}
  .fc-card{height:52vh;min-height:230px}
  .topbar-in{padding:0 16px}
  .wrap{padding:26px 16px 60px}
  .set-row{grid-template-columns:1fr auto;gap:2px 14px;padding:16px 2px 13px}
  .set-row .idx{display:none}
  .set-row h3{grid-column:1}
  .set-row .meta{grid-column:1}
  .set-row .side{grid-row:1;grid-column:2}
  .set-row .bar{grid-column:1/-1}
  .mode-row{grid-template-columns:1fr auto;gap:12px}
  .mode-row .idx{display:none}
}

/* ---------- узкие экраны: компактная шапка ---------- */
@media (max-width:520px){
  .topbar-in{height:52px;padding:0 14px}
  .logo{font-size:20px}
  .import-btn{display:none}
  .top-actions .btn{padding:7px 13px}
}

/* ---------- соты категорий ---------- */
.honey-btn{position:relative}
.honey-btn.on::after{content:"";position:absolute;top:2px;right:2px;width:9px;height:9px;border-radius:50%;background:var(--sage-deep);box-shadow:0 0 0 2px var(--bg)}
.overlay.honey{flex-direction:column}
.honey-stage{position:relative;width:min(460px,88vw);height:min(460px,88vw)}
.honey-node{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translate(var(--x),var(--y));width:98px;height:98px;border-radius:50%;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s,background .2s;animation:honeyin .4s cubic-bezier(.2,.7,.25,1) backwards}
.honey-node:hover{border-color:var(--sage)}
.honey-node .mono{font-family:var(--display);font-size:31px;font-weight:600;color:var(--ink);line-height:1}
.honey-node .mono svg.ic{width:26px;height:26px;color:var(--sage)}
.honey-node .nm{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);font-size:11.5px;color:var(--muted);white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.honey-node.active{width:114px;height:114px;background:var(--paper);border-color:var(--paper)}
.honey-node.active .mono{color:var(--paper-ink)}
.honey-node.active .nm{color:var(--paper);font-weight:600}
@keyframes honeyin{from{opacity:0;transform:translate(-50%,-50%) translate(var(--x),var(--y)) scale(.55)}to{opacity:1;transform:translate(-50%,-50%) translate(var(--x),var(--y)) scale(1)}}
.filter-chip{display:inline-flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:980px;padding:5px 6px 5px 14px;font-size:13.5px;color:var(--ink-2);margin-bottom:14px}
.filter-chip b{color:var(--paper);font-weight:600}
.filter-chip .btn{width:24px;height:24px;padding:0;border:none}
.filter-chip .btn svg.ic{width:13px;height:13px}
@media (max-width:480px){
  .honey-node{width:78px;height:78px}
  .honey-node.active{width:92px;height:92px}
  .honey-node .mono{font-size:25px}
  .honey-stage{width:min(400px,92vw);height:min(400px,92vw)}
}

/* ---------- анимации сот v2 ---------- */
@keyframes honeyin{0%{opacity:0;transform:translate(-50%,-50%) rotate(-14deg) scale(.35)}70%{opacity:1}100%{opacity:1;transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(0deg) scale(1)}}
.honey-node .inner{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;animation:idlefloat 4.2s ease-in-out infinite alternate;animation-delay:var(--fd,0ms)}
@keyframes idlefloat{from{transform:translateY(-2.5px)}to{transform:translateY(2.5px)}}
.honey-node .mono{transition:transform .2s cubic-bezier(.2,.7,.25,1)}
.honey-node:hover .mono{transform:scale(1.12)}
.honey-node.active::before{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid rgba(169,200,176,.55);animation:ringpulse 2.6s ease-out infinite}
@keyframes ringpulse{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(1.3);opacity:0}}
.honey-node.picked{animation-delay:0s !important;animation:honeypick .36s cubic-bezier(.3,.6,.4,1) forwards}
@keyframes honeypick{0%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) translate(var(--x),var(--y)) scale(1.5)}}
.honey-node.collapse{animation-delay:0s !important;animation:honeycollapse .34s ease-in forwards}
@keyframes honeycollapse{0%{opacity:1;transform:translate(-50%,-50%) translate(var(--x),var(--y)) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.22)}}
.overlay.honey.closing{pointer-events:none}
.overlay.honey .overline,.overlay.honey .honey-stage,.overlay.honey p{animation:fadeup .5s cubic-bezier(.2,.7,.25,1) backwards}
.overlay.honey .overline{animation-delay:.08s}
.overlay.honey p{animation-delay:.4s}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- избранное, автопрокрутка, написание, серия ---------- */
.fc-star{position:absolute;top:12px;right:14px;background:none;border:none;color:rgba(35,45,31,.28);cursor:pointer;padding:4px;line-height:0;transition:color .15s,transform .15s;z-index:2}
.fc-star svg.ic{width:18px;height:18px}
.fc-star:hover{transform:scale(1.18)}
.fc-star.on{color:#c9a24b}
.fc-back .fc-star{color:rgba(169,200,176,.35)}
.fc-back .fc-star.on{color:var(--amber)}
.prompt-card.write .p-word{font-size:clamp(18px,2.6vw,24px);line-height:1.45}
.write-hint{margin-top:12px;text-align:center;font-size:14px;color:var(--sage)}
.flame-stat{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.flame-stat svg.ic{width:15px;height:15px;color:var(--amber)}

/* ---------- полировка v4: редакторские детали ---------- */
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(125% 95% at 50% 38%, transparent 52%, rgba(4,7,3,.5) 100%)}

.statline{font-size:14px}
.statline b{font-size:22px}

.set-row{align-items:start;padding:20px 8px 16px;animation:rowin .45s cubic-bezier(.2,.7,.25,1) backwards;animation-delay:var(--d,0ms)}
@keyframes rowin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.set-row .idx{font-family:var(--display);font-size:33px;font-weight:400;color:rgba(240,234,216,.12);line-height:1;padding-top:4px;transition:color .2s}
.set-row:hover .idx{color:rgba(169,200,176,.4)}
.set-row .side{position:relative;padding-top:3px}
.set-row .pct{transition:opacity .18s}
.set-row .side .arr{position:absolute;right:0;top:4px;opacity:0;transform:translateX(-8px);transition:opacity .18s,transform .18s;color:var(--sage)}
.set-row .side .arr svg.ic{width:20px;height:20px}
.set-row:hover .side .pct{opacity:0}
.set-row:hover .side .arr{opacity:1;transform:translateX(0)}
.set-row .meta .cat{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);font-weight:600;margin-right:8px}
.set-row .meta .dot{margin:0 4px}

.mode-list .mode-row{animation:rowin .45s cubic-bezier(.2,.7,.25,1) backwards;animation-delay:var(--d,0ms)}
.mode-row .idx{font-family:var(--display);font-size:30px;font-weight:400;color:rgba(240,234,216,.13);line-height:1;width:48px;transition:color .2s}
.mode-row:hover .idx{color:rgba(169,200,176,.4)}
.mode-row{align-items:center}

.fc-face.fc-front::before{content:"";position:absolute;left:26px;right:26px;top:54px;height:1px;background:rgba(35,45,31,.16)}
.fc-face.fc-front{box-shadow:var(--sh-lg),inset 0 0 0 1px rgba(35,45,31,.05)}
.prompt-card{box-shadow:var(--sh),inset 0 0 0 1px rgba(35,45,31,.06)}
.score-circle{font-size:42px}

.filter-chip{animation:fadeup .3s cubic-bezier(.2,.7,.25,1) backwards}
.toast{transition:all .34s cubic-bezier(.34,1.45,.5,1)}
.logo-mark{transition:transform .25s cubic-bezier(.34,1.45,.5,1)}
.logo:hover .logo-mark{transform:rotate(-7deg)}
@media (max-width:760px){
  .set-row{padding:16px 4px 13px}
  .fc-face.fc-front::before{left:20px;right:20px;top:46px}
}

/* ---------- живые анимации ---------- */
#app{position:relative;z-index:2}
.glow{position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(90px)}
.g1{width:560px;height:560px;background:#3a6b4e;opacity:.5;top:-160px;left:-100px;animation:drift1 26s ease-in-out infinite alternate}
.g2{width:480px;height:480px;background:#274b35;opacity:.45;top:30%;right:-140px;animation:drift2 32s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(9vw,7vh) scale(1.18)}}
@keyframes drift2{from{transform:translate(0,0) scale(1.1)}to{transform:translate(-7vw,10vh) scale(.95)}}
@keyframes viewin{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.view-in{animation:viewin .42s cubic-bezier(.2,.7,.25,1)}
@keyframes rowin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes dealin{from{opacity:0;transform:translateY(18px) scale(.96) rotate(.6deg)}to{opacity:1;transform:none}}
.fc-card{animation:dealin .42s cubic-bezier(.2,.7,.25,1) backwards;transition:transform .16s ease-out}
@keyframes tilein{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
.tile.pop{animation:tilein .34s cubic-bezier(.34,1.45,.5,1) backwards}
.flame-stat svg{animation:flamepulse 2.2s ease-in-out infinite}
@keyframes flamepulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2);filter:drop-shadow(0 0 7px rgba(211,184,120,.65))}}
.progress-fill{transition:width .8s cubic-bezier(.2,.7,.25,1)}
@keyframes pop{0%{transform:scale(.9);opacity:0}60%{transform:scale(1.02);opacity:1}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- фирменный курсор ---------- */
html.custom-cursor, html.custom-cursor *{cursor:none!important}
html.custom-cursor input, html.custom-cursor textarea, html.custom-cursor select{cursor:text!important}
.cursor-dot{position:fixed;left:0;top:0;width:8px;height:8px;border-radius:50%;background:var(--paper);pointer-events:none;z-index:1001;transform:translate(-50%,-50%);transition:opacity .25s}
.cursor-ring{position:fixed;left:0;top:0;width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(169,200,176,.7);pointer-events:none;z-index:1000;transform:translate(-50%,-50%);transition:width .22s cubic-bezier(.2,.7,.25,1),height .22s cubic-bezier(.2,.7,.25,1),background .22s,border-color .22s,opacity .25s}
.cursor-dot.hidden,.cursor-ring.hidden{opacity:0}
.cursor-ring.hot{width:54px;height:54px;background:rgba(169,200,176,.1);border-color:var(--sage)}
.cursor-ring.cool{width:20px;height:20px;border-color:rgba(240,234,216,.5)}

/* ---------- курсор v2: комета, частицы, инверсия, магнит ---------- */
.cursor-dot{mix-blend-mode:difference}
#cursorFx{position:fixed;inset:0;pointer-events:none;z-index:998}
.cursor-ring.idle{animation:idlering 2.4s ease-in-out infinite}
@keyframes idlering{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.14)}}

/* ---------- курсор: оптимизация производительности ---------- */
.cursor-dot{mix-blend-mode:normal;will-change:transform}
.cursor-ring{will-change:transform}
#cursorFx{z-index:40;width:100vw;height:100vh}

/* ---------- пауза фона под оверлеями (анти-лаг) ---------- */
body.modal-open .glow{animation-play-state:paused}

/* ---------- энергосбережение ---------- */
.glow{filter:none}
.g1{width:780px;height:780px;background:radial-gradient(circle,rgba(88,144,111,.5),rgba(88,144,111,0) 68%)}
.g2{width:680px;height:680px;background:radial-gradient(circle,rgba(50,88,66,.45),rgba(50,88,66,0) 68%)}
body.idle .glow{animation-play-state:paused}
body.idle .flame-stat svg{animation:none}
body.idle .honey-node .inner{animation-play-state:paused}
body.idle .honey-node.active::before{animation-play-state:paused}