/* Layout: бокова навігація + робоча область на порцеляновому тлі; конструктор — повноекранна темна студія з розворотом у центрі */
:root{
  --bg:#F6F2F2; --surface:#FFFFFF; --surface-2:#F0E9EA; --ink:#1C1518; --muted:#76686D; --line:#E7DDDF;
  --accent:#A93D5B; --accent-ink:#FFFFFF; --accent-soft:#F5E4E9; --gold:#957447; --gold-soft:#F3ECE2;
  --ok:#2F7A55; --ok-soft:#E2F1E8; --warn:#9E6814; --warn-soft:#F7EEDB; --crit:#B23A3A; --crit-soft:#F8E4E4; --info:#3C6587; --info-soft:#E3ECF4;
  --shadow:0 1px 2px rgba(40,20,28,.05),0 12px 32px -16px rgba(60,24,38,.22);
  --f-display:'Prata','Didot','Bodoni 72',Georgia,serif;
  --f-body:'Onest','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  /* конструктор — завжди темний */
  --ed-bg:#0E0C0D; --ed-panel:#161214; --ed-panel-2:#1F1A1D; --ed-line:#2C2529; --ed-ink:#EFE8EA; --ed-muted:#968A8F; --ed-accent:#E68BA6; --ed-gold:#D2B587;
  --paper:#FBF9F7; --paper-line:#E9E2DF;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121011; --surface:#1A1618; --surface-2:#231D20; --ink:#F2EBED; --muted:#A4979B; --line:#30282C;
    --accent:#E07D9B; --accent-ink:#1A0F13; --accent-soft:#3A2029; --gold:#D0B283; --gold-soft:#2D261C;
    --ok:#6CC59A; --ok-soft:#1A2E23; --warn:#E3B062; --warn-soft:#30261A; --crit:#EE8585; --crit-soft:#351D1D; --info:#88B3D9; --info-soft:#1B2633;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px -16px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121011; --surface:#1A1618; --surface-2:#231D20; --ink:#F2EBED; --muted:#A4979B; --line:#30282C;
  --accent:#E07D9B; --accent-ink:#1A0F13; --accent-soft:#3A2029; --gold:#D0B283; --gold-soft:#2D261C;
  --ok:#6CC59A; --ok-soft:#1A2E23; --warn:#E3B062; --warn-soft:#30261A; --crit:#EE8585; --crit-soft:#351D1D; --info:#88B3D9; --info-soft:#1B2633;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px -16px rgba(0,0,0,.7);
  color-scheme:dark;
}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.display{font-family:var(--f-display);letter-spacing:-.005em}

/* ---------- кнопки, пігулки, поля ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);padding:9px 16px;border-radius:999px;font-weight:500;font-size:13px;transition:background .15s,border-color .15s,transform .1s;white-space:nowrap}
.btn:hover{border-color:var(--muted)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--surface-2)}
.btn.lg{padding:13px 24px;font-size:14px}
.btn[disabled]{opacity:.45;pointer-events:none}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;padding:3px 10px;border-radius:999px;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.accent{color:var(--accent);background:var(--accent-soft)}
.pill.gold{color:var(--gold);background:var(--gold-soft)}
.pill.info{color:var(--info);background:var(--info-soft)}
.pill.ok{color:var(--ok);background:var(--ok-soft)}
.pill.muted{color:var(--muted);background:var(--surface-2)}
.field{display:grid;gap:6px}
.field>label,.field>.lbl{font-size:12px;color:var(--muted);font-weight:500}
.input,.select,.textarea{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;transition:border-color .15s}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent)}
.textarea{min-height:92px;resize:vertical;line-height:1.55}
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--surface-2);border-radius:999px}
.seg button{border:0;background:transparent;padding:7px 14px;border-radius:999px;font-size:13px;color:var(--muted);font-weight:500}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--surface);padding:7px 14px;border-radius:999px;font-size:13px;color:var(--muted)}
.chip.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.chip .n{font-family:var(--f-mono);font-size:11px;margin-left:6px;opacity:.75}

/* ---------- каркас ---------- */
.app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100dvh}
.side{position:sticky;top:env(safe-area-inset-top,0px);height:100dvh;display:flex;flex-direction:column;gap:28px;padding:28px 18px 20px;border-right:1px solid var(--line);background:var(--surface)}
.brand{display:flex;flex-direction:column;gap:2px;padding:0 10px}
.brand b{font-family:var(--f-display);font-weight:400;font-size:26px;letter-spacing:.01em;line-height:1}
.brand span{font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);font-weight:600}
.nav{display:grid;gap:2px}
.nav button{display:flex;align-items:center;gap:12px;border:0;background:transparent;padding:10px 12px;border-radius:12px;text-align:left;color:var(--muted);font-weight:500}
.nav button:hover{background:var(--surface-2);color:var(--ink)}
.nav button.on{background:var(--accent-soft);color:var(--accent)}
.nav svg{width:18px;height:18px;flex:none}
.nav .cnt{margin-left:auto;font-family:var(--f-mono);font-size:11px;background:var(--accent);color:var(--accent-ink);padding:1px 7px;border-radius:999px}
.side .new{justify-content:center}
.me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;background:var(--surface-2)}
.ava{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;color:#fff;flex:none}
.me .who{display:grid;gap:2px;line-height:1.25;min-width:0;flex:1}
/* довге ім'я — до двох рядків, далі «…»; повне — у підказці */
.me .who b{font-weight:600;font-size:13px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.me .who span{font-size:11.5px;color:var(--muted)}
.me .btn{margin-left:auto;padding:6px 10px}
.me .btn.me-out{flex:none;width:34px;height:34px;padding:0;justify-content:center;border-radius:50%}
.demo-note{font-size:11px;color:var(--muted);padding:0 10px;line-height:1.45}
.main{min-width:0;padding-block:40px 64px;padding-inline:clamp(16px,4vw,56px)}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;margin-bottom:32px}
.head h1{font-family:var(--f-display);font-size:clamp(28px,3.4vw,40px);line-height:1.1}
.head p{color:var(--muted);margin-top:8px;max-width:60ch}

/* ---------- конвеєр статусів ---------- */
.pipe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden;margin-bottom:28px}
.pipe button{border:0;background:transparent;text-align:left;padding:18px 20px;display:grid;gap:4px;position:relative;border-right:1px solid var(--line)}
.pipe button:last-child{border-right:0}
.pipe button:hover{background:var(--surface-2)}
.pipe button.on{background:var(--accent-soft)}
.pipe .n{font-family:var(--f-display);font-size:30px;line-height:1}
.pipe .t{font-size:12.5px;color:var(--muted)}
.pipe .pill{justify-self:start}

.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:20px}
.search{position:relative;flex:0 1 280px}
.search .input{padding-left:36px;border-radius:999px}
.search svg{position:absolute;left:13px;top:50%;width:15px;height:15px;transform:translateY(-50%);color:var(--muted)}

/* ---------- картки проєктів ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.pcard{border:1px solid var(--line);border-radius:20px;background:var(--surface);overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.pc-vis{padding:30px 26px 26px;background:var(--surface-2);display:grid;place-items:center}
.pc-vis .cover{width:100%;max-width:100%}
.pc-body{padding:18px 20px 20px;display:grid;gap:8px}
.pc-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pc-row h3{font-family:var(--f-display);font-size:20px;line-height:1.2;min-width:0}
.pc-meta{font-size:12.5px;color:var(--muted)}
.pc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.pc-foot .ava{width:24px;height:24px;font-size:10px}
.pc-foot .d{display:flex;align-items:center;gap:8px}
.empty-state{border:1px dashed var(--line);border-radius:20px;padding:48px 24px;text-align:center;color:var(--muted)}

/* ---------- замовлення з бота ---------- */
.orders{display:grid;gap:14px}
.order{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:20px;align-items:center;border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:18px 20px}
.order h3{font-family:var(--f-display);font-size:19px}
.order .spec{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--muted);margin-top:6px}
.order .spec b{color:var(--ink);font-weight:500}
.order blockquote{margin:0;font-size:13px;line-height:1.5;color:var(--ink);border-left:2px solid var(--gold);padding-left:12px;font-style:italic;min-width:0}
.order .strip{display:flex;gap:4px;margin-top:10px}
.order .strip .thumb{width:34px;height:34px;border-radius:6px}
.order .act{display:grid;gap:8px;justify-items:end}
.order .paid{font-size:11.5px;color:var(--ok);font-weight:500}

/* ---------- новий проєкт / завантаження ---------- */
.tabs{display:flex;gap:28px;border-bottom:1px solid var(--line);margin-bottom:24px}
.tabs button{border:0;background:transparent;padding:0 0 12px;color:var(--muted);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--ink);border-color:var(--accent)}
.drop{position:relative;display:grid;place-items:center;gap:10px;text-align:center;border:1.5px dashed var(--line);border-radius:22px;padding:52px 24px;background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop h3{font-family:var(--f-display);font-size:24px}
.drop p{color:var(--muted);max-width:52ch}
.drop input{position:absolute;width:1px;height:1px;opacity:0}
.upl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin-top:20px}
.upl-grid .thumb{border-radius:8px;aspect-ratio:1}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}

/* ---------- фото-заглушки ---------- */
.thumb{background-size:cover;background-position:center;background-color:var(--surface-2);position:relative;overflow:hidden}
.soft{filter:blur(1.4px) saturate(.9)}

/* ---------- бриф ---------- */
.brief{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.panel{border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:24px;display:grid;gap:22px}
.panel h2{font-family:var(--f-display);font-size:22px}
.stepper{display:inline-flex;align-items:center;gap:4px;background:var(--surface-2);border-radius:999px;padding:4px}
.stepper button{width:32px;height:32px;border-radius:50%;border:0;background:var(--surface);font-size:16px}
.stepper output{min-width:56px;text-align:center;font-family:var(--f-mono);font-size:15px}
.wish{border-left:2px solid var(--gold);padding:4px 0 4px 14px;font-style:italic;line-height:1.6}
.wish small{display:block;font-style:normal;color:var(--muted);font-size:11.5px;margin-top:4px}
.pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.pick button{position:relative;border:0;padding:0;border-radius:8px;overflow:hidden;aspect-ratio:1;background:none}
.pick .thumb{position:absolute;inset:0}
.pick .mk{position:absolute;left:4px;top:4px;font-size:10px;font-weight:600;padding:1px 6px;border-radius:999px;background:var(--accent);color:var(--accent-ink)}
.pick .mk.cv{background:var(--gold);color:#fff}
.sticky{position:sticky;top:calc(env(safe-area-inset-top,0px) + 24px)}
.sum{display:grid;gap:12px}
.sum .r{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.sum .r span{color:var(--muted)}
.sum .r b{font-weight:500;text-align:right}
.hint{font-size:12px;color:var(--muted);line-height:1.5}

/* ---------- збирання ---------- */
.build{display:grid;grid-template-columns:340px minmax(0,1fr);gap:28px;align-items:start}
.steps{display:grid;gap:4px}
.step{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:12px 0}
.step .dot{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-size:12px;color:var(--muted);font-family:var(--f-mono)}
.step.run .dot{border-color:var(--accent);color:var(--accent);animation:pulse 1.2s ease-in-out infinite}
.step.done .dot{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.step b{font-weight:500;display:block}
.step span{font-size:12.5px;color:var(--muted)}
@keyframes pulse{50%{box-shadow:0 0 0 6px var(--accent-soft)}}
.bar{height:4px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);transition:width .2s linear}
.timer{font-family:var(--f-display);font-size:44px;line-height:1}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px}
.agrid .cell{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden}
.agrid .cell .thumb{position:absolute;inset:0;transition:opacity .3s}
.agrid .cell.dim .thumb{opacity:.3}
.tag{position:absolute;left:4px;bottom:4px;font-size:9.5px;font-weight:600;padding:1px 6px;border-radius:999px;letter-spacing:.02em;background:rgba(20,14,17,.78);color:#fff}
.tag.best{background:var(--gold);color:#fff}
.tag.hero{background:var(--accent);color:var(--accent-ink)}
.tag.dup{background:rgba(20,14,17,.78)}
.tag.blur{background:#9E6814;color:#fff}
.scan{position:absolute;inset:0;border:2px solid var(--accent);border-radius:8px}
.result{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.result div{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--surface)}
.result b{font-family:var(--f-display);font-size:26px;font-weight:400;display:block;line-height:1.1}
.result span{font-size:12px;color:var(--muted)}

/* ---------- розворот (спільний рендер) ---------- */
.spread{position:relative;width:100%;aspect-ratio:2/1;background:var(--paper);box-shadow:0 1px 0 var(--paper-line),0 18px 40px -18px rgba(0,0,0,.45);overflow:hidden;container-type:inline-size}
.spread::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:6%;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(0,0,0,.09) 46%,rgba(0,0,0,.16) 50%,rgba(0,0,0,.09) 54%,transparent);pointer-events:none;z-index:3}
.slot{position:absolute;overflow:hidden;background:#EDE7E4}
.slot .ph{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat}
.slot .emp{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(8px,1.4cqi,12px);color:#9B8F92;border:1px dashed #CFC4C1;text-align:center;padding:4px}
.note{position:absolute;top:0;left:0;width:50%;height:100%;display:grid;place-content:center;text-align:center;gap:1.2cqi;padding:6cqi}
.spread.flip .note{left:50%}
.note .ey{font-family:var(--f-body);font-size:max(6px,1.05cqi);letter-spacing:.28em;text-transform:uppercase;color:#9A7D57}
.note .tt{font-family:var(--f-display);font-size:max(9px,3.4cqi);color:#2A2124;line-height:1.15}
.note .dd{font-family:var(--f-body);font-size:max(6px,1.1cqi);color:#8E8285}
.guides .bleed{position:absolute;inset:0;border:1.5cqi solid rgba(229,80,120,.16);pointer-events:none;z-index:4}
.guides .safe{position:absolute;inset:3.2cqi;border:1px dashed rgba(229,80,120,.55);pointer-events:none;z-index:4}
.guides .safe.r{left:auto;right:3.2cqi;width:calc(50% - 6.4cqi)}
.guides .safe.l{width:calc(50% - 6.4cqi)}

/* ---------- обкладинка ---------- */
.cover{display:flex;width:100%;box-shadow:0 2px 0 rgba(0,0,0,.06),0 22px 44px -20px rgba(30,10,20,.55);border-radius:2px 4px 4px 2px;overflow:hidden;container-type:inline-size;position:relative}
.cv-back,.cv-front{flex:1 1 0;position:relative;overflow:hidden}
.cv-spine{flex:none;position:relative;display:grid;place-items:center;box-shadow:inset 3px 0 4px -2px rgba(0,0,0,.25),inset -3px 0 4px -2px rgba(0,0,0,.25)}
.cv-spine span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--f-display);font-size:max(5px,.85cqi);white-space:nowrap;opacity:.8}
.cv-logo{position:absolute;transform:translateX(-50%);height:auto;pointer-events:none}
.cv-mark{position:absolute;bottom:7%;left:0;right:0;text-align:center;font-size:max(5px,.8cqi);letter-spacing:.3em;text-transform:uppercase;opacity:.55}
.cv-photo{position:absolute;inset:0;overflow:hidden}
.cv-photo .ph{position:absolute;inset:0;background-size:cover}
.cv-photo.acr::after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.28),rgba(255,255,255,0) 38%,rgba(255,255,255,0) 70%,rgba(255,255,255,.12));pointer-events:none}
.cv-title{position:absolute;left:0;right:0;bottom:9%;text-align:center;font-family:var(--f-display);font-size:max(8px,2.6cqi);line-height:1.1;padding:0 8%;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.cv-title small{display:block;font-family:var(--f-body);font-size:max(5px,.8cqi);letter-spacing:.3em;text-transform:uppercase;margin-top:.8cqi;opacity:.85}
.cv-engr{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:1cqi;padding:10%}
.cv-engr b{font-family:var(--f-display);font-weight:400;font-size:max(8px,3cqi);line-height:1.15}
.cv-engr i{font-style:normal;font-size:max(5px,.8cqi);letter-spacing:.32em;text-transform:uppercase;opacity:.75}
.cv-badge{width:max(18px,7cqi);height:max(18px,7cqi);border-radius:50%;margin:0 auto 1.2cqi;box-shadow:inset 0 1px 2px rgba(255,255,255,.6),0 1px 3px rgba(0,0,0,.35)}

/* ---------- конструктор ---------- */
.ed{--bg:var(--ed-bg);display:grid;grid-template-columns:208px minmax(0,1fr) 320px;grid-template-rows:auto minmax(0,1fr);height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));min-height:620px;background:var(--ed-bg);color:var(--ed-ink);color-scheme:dark}
.ed .btn{background:var(--ed-panel-2);border-color:var(--ed-line);color:var(--ed-ink)}
.ed .btn:hover{border-color:var(--ed-muted)}
.ed .btn.primary{background:var(--ed-accent);border-color:var(--ed-accent);color:#1A0E12}
.ed .btn.ghost{background:transparent;border-color:transparent}
.ed .btn.ghost:hover{background:var(--ed-panel-2)}
.ed .btn.on{border-color:var(--ed-accent);color:var(--ed-accent)}
.ed .eyebrow{color:var(--ed-muted)}
.ed-top{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--ed-line);background:var(--ed-panel);flex-wrap:wrap}
.ed-top .ttl{display:grid;line-height:1.2;min-width:0}
.ed-top .ttl b{font-family:var(--f-display);font-weight:400;font-size:19px}
.ed-top .ttl span{font-size:12px;color:var(--ed-muted)}
.ed-top .mid{display:flex;gap:6px;margin-left:auto}
.ed-top .right{display:flex;gap:8px}
.saved{font-size:11.5px;color:var(--ed-muted);display:flex;align-items:center;gap:6px}
.saved::before{content:"";width:6px;height:6px;border-radius:50%;background:#6CC59A}
.ed-strip{border-right:1px solid var(--ed-line);background:var(--ed-panel);overflow-y:auto;padding:14px 12px;display:grid;gap:12px;align-content:start}
.st-item{border:0;background:transparent;padding:6px;border-radius:10px;display:grid;gap:6px;text-align:left;color:var(--ed-muted);position:relative}
.st-item:hover{background:var(--ed-panel-2)}
.st-item.on{background:var(--ed-panel-2);box-shadow:inset 0 0 0 1.5px var(--ed-accent);color:var(--ed-ink)}
.st-item .lab{display:flex;justify-content:space-between;font-size:11px}
.st-item .lab i{font-style:normal;font-family:var(--f-mono)}
.st-item .spread,.st-item .cover{box-shadow:0 4px 10px -4px rgba(0,0,0,.6)}
.st-flags{display:flex;gap:4px}
.st-flags span{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:9px}
.st-flags .lk{background:var(--ed-panel);border:1px solid var(--ed-line)}
.st-flags .wr{background:#9E6814;color:#fff}
.ed-stage{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-width:0;min-height:0;background:radial-gradient(ellipse at 50% 40%,#1D181B,var(--ed-bg) 70%)}
.stage-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 20px}
.stage-bar h2{font-family:var(--f-display);font-size:20px;margin-right:auto}
.stage-bar h2 small{font-family:var(--f-body);font-size:12px;color:var(--ed-muted);margin-left:10px}
.canvas{display:grid;place-items:center;padding:16px 28px;min-height:0;overflow:auto}
.canvas .wrap{width:min(100%,1100px,calc((100dvh - 240px)*2));min-width:min(100%,520px)}
.canvas .slot{cursor:grab;transition:box-shadow .15s}
.canvas .slot:hover{box-shadow:inset 0 0 0 2px rgba(230,139,166,.7)}
.canvas .slot.sel{box-shadow:inset 0 0 0 3px var(--ed-accent);z-index:5}
.canvas .slot.over{box-shadow:inset 0 0 0 3px var(--ed-gold)}
.slot .fl{position:absolute;right:4px;top:4px;display:flex;gap:3px;z-index:2}
.slot .fl span{font-size:max(7px,.9cqi);font-weight:600;padding:1px 5px;border-radius:999px;background:rgba(20,14,17,.8);color:#fff}
.slot .fl .w{background:#9E6814}
.slot .fl .h{background:var(--ed-accent);color:#1A0E12}
.canvas .cv-photo{cursor:pointer}
.canvas .cv-photo.sel{box-shadow:inset 0 0 0 3px var(--ed-accent)}
.stage-foot{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;padding:10px 20px 16px;font-size:11.5px;color:var(--ed-muted)}
.stage-foot .mono{color:var(--ed-ink)}
.ed-panel{border-left:1px solid var(--ed-line);background:var(--ed-panel);display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0}
.ptabs{display:flex;border-bottom:1px solid var(--ed-line)}
.ptabs button{flex:1;border:0;background:transparent;padding:13px 6px;color:var(--ed-muted);font-size:12.5px;font-weight:500;border-bottom:2px solid transparent}
.ptabs button.on{color:var(--ed-ink);border-color:var(--ed-accent)}
.pbody{overflow-y:auto;padding:18px;display:grid;gap:18px;align-content:start}
.focus{position:relative;border-radius:10px;overflow:hidden;cursor:crosshair}
.focus .thumb{width:100%}
.focus .pt{position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 2px rgba(0,0,0,.4);transform:translate(-50%,-50%);pointer-events:none}
.kv{display:grid;gap:8px;font-size:12.5px}
.kv div{display:flex;justify-content:space-between;gap:10px}
.kv span{color:var(--ed-muted)}
.kv b{font-weight:500;text-align:right;min-width:0;overflow-wrap:anywhere}
.q-ok{color:#6CC59A}.q-warn{color:#E3B062}.q-crit{color:#EE8585}
.range{width:100%;accent-color:var(--ed-accent)}
.acts{display:flex;flex-wrap:wrap;gap:8px}
.acts .btn{padding:7px 12px;font-size:12px}
.tpls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tpl{border:1px solid var(--ed-line);background:var(--ed-panel-2);border-radius:10px;padding:8px;display:grid;gap:6px;text-align:left;color:var(--ed-muted);font-size:11px}
.tpl:hover{border-color:var(--ed-muted)}
.tpl.on{border-color:var(--ed-accent);color:var(--ed-ink)}
.tpl .mini{position:relative;aspect-ratio:2/1;background:#F4EFEB;border-radius:2px;overflow:hidden;display:block;width:100%}
.tpl .mini i{position:absolute;background:#8E7C82;box-shadow:0 0 0 1px #F4EFEB;box-sizing:border-box}   /* світла лінія між секціями — видно навіть при «мінімумі білого» */
.tpl .mini .nt{position:absolute;height:2px;background:#B9A88E}
.tpl .mini .fz{position:absolute;left:0;top:0;width:50%;height:100%;background:repeating-linear-gradient(135deg,#ECE5DF 0 4px,#F4EFEB 4px 8px)}
.tpl.on .mini i{background:#A88592}
.tpl .mini::after{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1px solid rgba(0,0,0,.18)}
.tpl .cap{display:flex;justify-content:space-between}
.pool{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pool button{position:relative;border:0;padding:0;background:none;border-radius:6px;overflow:hidden;aspect-ratio:1;cursor:grab}
.pool .thumb{position:absolute;inset:0}
.pool .tag{font-size:8.5px}
.sec-t{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.sec-t h3{font-family:var(--f-display);font-size:16px}
.sec-t span{font-size:11.5px;color:var(--ed-muted)}
.ed .hint{color:var(--ed-muted)}
.ed .q-ok{color:#6CC59A}.ed .q-warn{color:#E3B062}.ed .q-crit{color:#EE8585}

/* ---------- перегляд ---------- */
.pv{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.pv-stage{background:#151113;border-radius:22px;padding:clamp(18px,4vw,48px);display:grid;gap:18px;color:#EFE8EA}
.pv-stage .wrap{perspective:1600px}
.pv-stage .flip{animation:flip .55s cubic-bezier(.2,.7,.2,1)}
@keyframes flip{from{opacity:0;transform:rotateY(-14deg) translateX(3%)}to{opacity:1;transform:none}}
.pv-nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pv-nav .btn{background:#231D20;border-color:#3A3236;color:#EFE8EA}
.pv-nav .mono{font-size:12px;color:#A99CA1}
.dots{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.dots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;background:#4A4044}
.dots button.on{background:var(--ed-accent);width:20px;border-radius:4px}
.comments{display:grid;gap:14px}
.cmt{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px}
.cmt .ava{width:28px;height:28px;font-size:10px}
.cmt b{font-weight:600;font-size:12.5px}
.cmt span{font-size:11.5px;color:var(--muted);margin-left:6px}
.cmt p{font-size:13px;margin-top:2px}

/* ---------- історія, команда ---------- */
.tl{display:grid;gap:0;max-width:760px}
.tl-i{display:grid;grid-template-columns:96px 18px minmax(0,1fr);gap:14px;padding-bottom:22px;position:relative}
.tl-i .tm{font-size:12px;color:var(--muted);text-align:right;padding-top:1px}
.tl-i .ln{position:relative}
.tl-i .ln::before{content:"";position:absolute;left:8px;top:6px;bottom:-22px;width:1px;background:var(--line)}
.tl-i:last-child .ln::before{display:none}
.tl-i .ln i{position:absolute;left:4px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.tl-i .ln i.g{background:var(--gold)}
.tl-i .ln i.o{background:var(--ok)}
.tl-i b{font-weight:500}
.tl-i p{font-size:12.5px;color:var(--muted);margin-top:2px}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:720px}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);font-size:13px;white-space:nowrap}
th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
tr:last-child td{border-bottom:0}
td .person{display:flex;align-items:center;gap:10px}
td .person .ava{width:30px;height:30px;font-size:11px}
.mbar{display:flex;align-items:center;gap:10px}
.mbar i{display:block;height:6px;border-radius:3px;background:var(--accent);min-width:2px}
.mbar.g i{background:var(--gold)}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:24px}
.kpi{border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:20px}
.kpi b{font-family:var(--f-display);font-weight:400;font-size:34px;display:block;line-height:1.1}
.kpi span{font-size:12.5px;color:var(--muted)}

/* ---------- вхід ---------- */
.login{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:100dvh}
.login .art{background:#171214;color:#F2EBED;padding:clamp(28px,6vw,72px);display:flex;flex-direction:column;justify-content:space-between;gap:40px;position:relative;overflow:hidden}
.login .art .bk{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;transform:rotate(-6deg);opacity:.9}
.login .art .bk .cover{box-shadow:0 30px 50px -20px rgba(0,0,0,.8)}
.login .art h1{font-family:var(--f-display);font-size:clamp(34px,4.6vw,60px);line-height:1.05}
.login .art h1 em{font-style:normal;color:var(--ed-accent)}
.login .art p{color:#B9ACB1;max-width:44ch;margin-top:14px}
.login form{align-self:center;justify-self:center;width:min(380px,100%);display:grid;gap:18px;padding:40px 16px}
.login form h2{font-family:var(--f-display);font-size:28px}

/* ---------- модальне вікно, тост ---------- */
.modal{position:fixed;inset:0;background:rgba(14,10,12,.55);display:grid;place-items:center;padding:16px;z-index:50;backdrop-filter:blur(4px)}
.modal .box{background:var(--surface);color:var(--ink);border-radius:24px;padding:28px;width:min(560px,100%);display:grid;gap:18px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);max-height:90dvh;overflow:auto}
.modal h2{font-family:var(--f-display);font-size:26px}
.files{display:grid;gap:6px;max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:14px;padding:10px 14px}
.files div{display:flex;justify-content:space-between;gap:12px;font-size:12.5px}
.files div span{color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:#1C1518;color:#F6EEF0;padding:11px 18px;border-radius:999px;font-size:13px;z-index:60;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);animation:tin .25s ease}
@keyframes tin{from{opacity:0;transform:translate(-50%,8px)}}

/* ---------- адаптив ---------- */
@media (max-width:1180px){
  .ed{grid-template-columns:168px minmax(0,1fr) 280px}
  .brief,.build,.pv{grid-template-columns:minmax(0,1fr)}
  .sticky{position:static}
}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 16px;border-right:0;border-bottom:1px solid var(--line)}
  .nav{display:flex;flex-wrap:wrap;gap:4px;order:3;width:100%}
  .nav button{padding:8px 10px;font-size:13px}
  .side .new{margin-left:auto}
  .me,.demo-note{display:none}
  .main{padding-block:24px 48px}
  .pipe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pipe button{border-bottom:1px solid var(--line)}
  .order{grid-template-columns:minmax(0,1fr)}
  .order .act{justify-items:start}
  .ed{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;height:auto;min-height:0}
  .ed-strip{grid-row:3;display:flex;overflow-x:auto;border-right:0;border-top:1px solid var(--ed-line)}
  .st-item{width:150px;flex:none}
  .ed-panel{border-left:0;border-top:1px solid var(--ed-line)}
  .canvas{padding:12px}
  .login{grid-template-columns:minmax(0,1fr)}
  .login .art .bk{display:none}
  .result,.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .row2{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- ручки зміни розміру рамки ---------- */
.hd{position:absolute;z-index:6;background:#fff;border:2px solid var(--ed-accent);border-radius:999px;box-shadow:0 1px 4px rgba(0,0,0,.4);touch-action:none}
.hd-l,.hd-r{top:50%;width:10px;height:38px;transform:translateY(-50%);cursor:ew-resize}
.hd-t,.hd-b{left:50%;width:38px;height:10px;transform:translateX(-50%);cursor:ns-resize}
.hd-l{left:3px}.hd-r{right:3px}.hd-t{top:3px}.hd-b{bottom:3px}
.hd:hover{background:var(--ed-accent)}
.rz-tip{position:absolute;left:50%;top:-34px;transform:translateX(-50%);background:var(--ed-accent);color:#1A0E12;font-size:12px;padding:4px 10px;border-radius:999px;pointer-events:none}
.ed-seg{background:var(--ed-panel-2)}
.ed-seg button{color:var(--ed-muted);padding:6px 11px;font-size:12px}
.ed-seg button.on{background:var(--ed-line);color:var(--ed-ink);box-shadow:none}

/* ---------- калька ---------- */
.kalka-scene{position:relative;width:100%;overflow:hidden}
.kalka-scene>.spread{filter:saturate(.85)}
.kalka-sheet{position:absolute;top:0;bottom:0;left:50%;width:50%;container-type:inline-size;z-index:4;
  background:linear-gradient(180deg,rgba(252,250,247,.80),rgba(248,245,241,.84));backdrop-filter:blur(3px) saturate(.7);-webkit-backdrop-filter:blur(3px) saturate(.7);
  box-shadow:-6px 0 18px -10px rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3cqi;padding:5%;text-align:center;color:#2A2124;overflow:hidden}
/* padding у % — від ширини розвороту (5% = 10% аркуша); cqi для тексту рахується від вмісту аркуша */
.kalka-sheet::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:radial-gradient(rgba(0,0,0,.05) 1px,transparent 1.2px);background-size:5px 5px}
.kalka-sheet .k-title{font-family:var(--f-display);font-weight:400;font-size:max(9px,8cqi);line-height:1.1;text-wrap:balance}
.kalka-sheet .k-sub{font-style:normal;font-family:var(--f-body);font-size:max(5px,2.6cqi);letter-spacing:.3em;text-transform:uppercase;color:#7A6A5E}
.kalka-sheet .k-text{margin:0;font-family:var(--f-display);font-style:italic;font-size:max(6px,3.2cqi);line-height:1.6;color:#4A3E40;max-width:80%}
.kalka-sheet .k-date{font-style:normal;font-family:var(--f-body);font-size:max(5px,2.4cqi);letter-spacing:.25em;color:#9A7D57}
.kalka-sheet .k-line{width:18cqi;height:1px;background:#B79B74}
.k-monogram .k-mono{width:34cqi;height:34cqi;border:1px solid #B79B74;border-radius:50%;display:grid;place-items:center;margin-bottom:2cqi}
.k-monogram .k-mono span{font-family:var(--f-display);font-size:max(10px,11cqi);color:#6E4F33;letter-spacing:.04em}
.k-monogram .k-title{font-size:max(8px,5.4cqi)}
.k-script .k-title{font-family:var(--k-hand,'Marck Script'),'Segoe Script',cursive;font-size:max(11px,calc(12cqi * var(--k-hs,1)));color:#3B2B2E}
.k-script .k-text{font-style:normal;font-family:var(--f-body);font-weight:300}
.k-minimal{justify-content:flex-end;align-items:flex-start;text-align:left}
.k-minimal .k-min{display:grid;gap:1.6cqi}
.k-minimal .k-title{font-family:var(--f-body);font-weight:500;font-size:max(7px,4.2cqi);letter-spacing:.02em}
.k-minimal .k-text{font-family:var(--f-body);font-style:normal;font-weight:300;font-size:max(5px,2.6cqi);max-width:100%}
.k-minimal .k-date{font-family:var(--f-mono);letter-spacing:.1em}
.tpl .k-mini{aspect-ratio:1/1;background:#D9CFC7;overflow:hidden}
.tpl .k-mini .kalka-sheet{left:0;width:100%;padding:8%}
.tpl .k-mini::after{display:none}

/* форзац: ліва сторінка першого розвороту приклеюється до обкладинки */
.fz{position:absolute;left:0;top:0;width:50%;height:100%;display:grid;place-content:center;gap:.6cqi;text-align:center;
  background:repeating-linear-gradient(135deg,rgba(150,135,128,.07) 0 6px,transparent 6px 14px);color:#A39892;pointer-events:none}
.fz b{font-family:var(--f-display);font-weight:400;font-size:max(7px,1.6cqi)}
.fz small{font-size:max(6px,.9cqi);letter-spacing:.12em;text-transform:uppercase}

/* згорнутий блок «Додатково» в брифі */
.more{border-top:1px solid var(--line);padding-top:12px}
.more summary{cursor:pointer;font-size:12.5px;color:var(--muted);font-weight:500;list-style:none}
.more summary::before{content:"+ "}
.more[open] summary::before{content:"− "}
.more .check{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:13px;line-height:1.5;color:var(--ink);cursor:pointer}
.more .check input{margin-top:3px;accent-color:var(--accent)}

/* ---------- калька: дизайнерські стилі ---------- */
.kalka-sheet .k-star{color:#B79B74;font-size:max(6px,3cqi);line-height:1}
.kalka-sheet img{max-width:100%;height:auto;pointer-events:none}
/* Журнальний: асиметрія, великий заголовок ліворуч */
.k-editorial{align-items:flex-start;justify-content:space-between;text-align:left}
.k-editorial .k-ed-top{font-family:var(--f-mono);font-size:max(5px,2.3cqi);letter-spacing:.2em;color:#9A7D57}
.k-editorial .k-ed-mid{display:grid;gap:2.6cqi;justify-items:start}
.k-editorial .k-title{font-size:max(10px,13cqi);line-height:.98;letter-spacing:-.01em;text-align:left}
.k-editorial .k-line{width:30cqi}
.k-editorial .k-text{text-align:left;max-width:72%;font-size:max(6px,3cqi)}
/* Рамка: подвійна золотиста рамка і розділювач */
.k-frame::after{content:"";position:absolute;inset:4%;border:3px double rgba(183,155,116,.85);pointer-events:none}
.k-frame .k-title{font-size:max(9px,7.6cqi)}
.k-frame .k-flourish{width:46cqi}
/* Вінок: лавровий вінок навколо ініціалів */
.k-wreath .k-wr{position:relative;width:62cqi;aspect-ratio:1;display:grid;place-items:center;margin-bottom:-2cqi}
.k-wreath .k-wr img{position:absolute;inset:0;width:100%;height:100%}
.k-wreath .k-wr span{position:relative;font-family:var(--f-display);font-size:max(10px,12cqi);color:#6E4F33;letter-spacing:.03em}
.k-wreath .k-title{font-size:max(8px,5.6cqi)}
/* Гілочка */
.k-botanic .k-sprig{width:16cqi;margin-bottom:1cqi}
.k-botanic .k-title{font-size:max(9px,8cqi)}
/* Велика дата: рік світлими цифрами на тлі */
.k-bigdate .k-big{position:absolute;left:0;right:0;top:50%;transform:translateY(-56%);font-family:var(--f-display);font-size:max(20px,42cqi);line-height:1;color:rgba(168,139,102,.16);letter-spacing:-.02em;pointer-events:none}
.k-bigdate>*:not(.k-big){position:relative}
.k-bigdate .k-title{font-size:max(9px,8.6cqi)}
/* Лист: рукописний лист з підписом */
.k-letter{align-items:stretch;text-align:left}
.k-letter .k-lt{display:grid;gap:3cqi}
.k-letter .k-title{font-family:var(--k-hand,'Marck Script'),'Segoe Script',cursive;font-size:max(9px,calc(7.4cqi * var(--k-hs,1)));text-align:left}
.k-letter .k-text{font-family:var(--k-hand,'Marck Script'),'Segoe Script',cursive;font-style:normal;font-size:max(7px,calc(4.6cqi * var(--k-hs,1)));line-height:1.55;max-width:100%;text-align:left;color:#3E3335}
.k-letter .k-sign{font-family:var(--k-hand,'Marck Script'),'Segoe Script',cursive;font-size:max(7px,calc(5cqi * var(--k-hs,1)));justify-self:end;color:#4A3E40}
.k-letter .k-date{justify-self:end}
/* прев'ю стилів у панелі — трохи щільніше */
.tpls .k-mini .kalka-sheet{gap:2cqi}

/* кутові ручки — пропорційне масштабування */
.hd-c{width:14px;height:14px;border-radius:3px;transform:none}
.hd-tl{left:3px;top:3px;cursor:nwse-resize}.hd-br{right:3px;bottom:3px;cursor:nwse-resize}
.hd-tr{right:3px;top:3px;cursor:nesw-resize}.hd-bl{left:3px;bottom:3px;cursor:nesw-resize}

/* загальна панель завантаження */
.upl-sum{margin-top:20px;gap:12px}
.upl-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.upl-row b{font-weight:500}
.upl-arc{display:grid;gap:6px;padding-top:6px;border-top:1px solid var(--line)}
.upl-done b{color:var(--ok)}

/* вибір почерку */
.hands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.hand{border:1px solid var(--ed-line);background:#F4EFEA;border-radius:10px;padding:10px 8px 8px;display:grid;gap:4px;justify-items:center;color:#3B2B2E;overflow:hidden}
.hand span{white-space:nowrap;line-height:1.25;max-width:100%;overflow:hidden;text-overflow:clip}
.hand small{font-size:11px;color:#8E8287;font-family:var(--f-body)}
.hand.on{border-color:var(--ed-accent);box-shadow:inset 0 0 0 1px var(--ed-accent)}

/* зворот кальки на лівій сторінці першого розвороту: дзеркальний бліде відображення напису */
.kalka-back{position:absolute;inset:0;pointer-events:none;z-index:3}
.kalka-back .kalka-sheet{left:0;transform:scaleX(-1);box-shadow:6px 0 18px -10px rgba(0,0,0,.3)}
.kalka-back .kalka-sheet>*{opacity:.3;filter:blur(.3px)}
.kb-tag{position:absolute;left:1.2%;bottom:2%;font-size:max(7px,.9cqi);letter-spacing:.12em;text-transform:uppercase;color:#A39892;background:rgba(255,255,255,.6);padding:2px 8px;border-radius:999px}

/* ---------- картки завантаження ---------- */
.dl-group{display:grid;gap:10px}
.dl-card{display:grid;grid-template-columns:44px minmax(0,1fr) 36px;align-items:center;gap:14px;width:100%;text-align:left;
  padding:14px 14px 14px 12px;border-radius:16px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;
  box-shadow:0 1px 2px rgba(40,20,28,.04);transition:transform .18s,box-shadow .18s,border-color .18s,background .18s}
.dl-card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 14px 30px -18px rgba(169,61,91,.55)}
.dl-card:active{transform:translateY(0)}
.dl-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dl-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2);color:var(--muted)}
.dl-ico svg{width:22px;height:22px}
.dl-txt{display:grid;gap:3px;min-width:0}
.dl-txt b{font-family:var(--f-display);font-weight:400;font-size:17px;line-height:1.2}
.dl-txt small{font-size:12px;color:var(--muted);line-height:1.35}
.dl-go{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--ink);transition:background .18s,color .18s,border-color .18s}
.dl-go svg{width:16px;height:16px}
.dl-card:hover .dl-go{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.dl-primary{background:linear-gradient(135deg,var(--accent-soft),var(--surface) 70%);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.dl-primary .dl-ico{background:var(--accent);color:var(--accent-ink)}
.dl-primary .dl-go{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.dl-busy{cursor:progress;transform:none!important}
.dl-bar{display:block;height:3px;border-radius:3px;background:var(--surface-2);overflow:hidden;margin-top:4px}
.dl-bar i{display:block;height:100%;background:var(--accent);transition:width .3s}
.dl-spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:dlspin .8s linear infinite}
@keyframes dlspin{to{transform:rotate(360deg)}}
.dl-locked{cursor:default;opacity:.6;grid-template-columns:44px minmax(0,1fr)}
.dl-locked:hover{transform:none;border-color:var(--line);box-shadow:none}

/* дизайни базової обкладинки */
.cover.cv-des{background:#EEE7E2}
.cover.cv-des>img{position:absolute;inset:0;width:100%;height:100%;display:block}
.cover.cv-des .cv-hit{left:auto;right:0;top:0;bottom:0;background:transparent}
.cv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cv-tile{border:1px solid var(--ed-line);background:var(--ed-panel-2);border-radius:10px;padding:6px;display:grid;gap:6px;text-align:left;color:var(--ed-muted);font-size:11px;cursor:pointer;transition:border-color .15s,transform .15s}
.cv-tile:hover{border-color:var(--ed-muted);transform:translateY(-1px)}
.cv-tile.on{border-color:var(--ed-accent);color:var(--ed-ink);box-shadow:0 0 0 1px var(--ed-accent)}
.cv-tile img{width:100%;aspect-ratio:1/1.03;object-fit:cover;border-radius:3px;background:#E9E3DF;display:block;box-shadow:0 6px 14px -8px rgba(0,0,0,.6)}
.cv-tile span{display:grid;gap:2px;padding:0 2px 2px}
.cv-tile b{font-weight:500;color:var(--ed-ink)}
.cv-tile.ai{border-color:rgba(200,160,90,.55)}
.cv-tile small{font-size:10.5px;line-height:1.35}
.cv-ai{width:100%}
.cv-sw{display:flex;flex-wrap:wrap;gap:7px}
.cv-sw button{width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.22);cursor:pointer;padding:0;font-size:11px;color:#fff}
.cv-sw button.auto{background:conic-gradient(#CF7A3D,#DDA23A,#B8CAB1,#3E9BD6,#8C1E2B,#CF7A3D)}
.cv-sw button.on{outline:2px solid var(--ed-accent);outline-offset:2px}
.cv-icons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.cv-icons button{aspect-ratio:1/1;border-radius:8px;border:1px solid var(--ed-line);background:#5C7088;padding:5px;cursor:pointer}
.cv-icons button.on{border-color:var(--ed-accent);box-shadow:0 0 0 1px var(--ed-accent)}
.cv-icons img{width:100%;height:100%;object-fit:contain}
.cv-label{position:absolute;top:50%;z-index:2;transform:translate(-50%,-50%) rotate(90deg);font-family:'Tinos','Times New Roman',serif;font-size:.97cqi;color:#C4161E;white-space:nowrap;-webkit-text-stroke:.03cqi #fff;paint-order:stroke;pointer-events:none}
.wish-h{font-family:var(--f-display);font-weight:400;font-size:19px;margin:6px 0 2px;display:grid;gap:3px}
.wish-h small{font-family:var(--f-body);font-size:12px;color:var(--muted)}
.wish-h ~ .wish-h{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.cv-wish{border:1px solid var(--ed-line);border-radius:10px;padding:8px 10px;background:var(--ed-panel-2)}
.cv-wish summary{cursor:pointer;color:var(--ed-ink);font-size:12.5px}
.cv-wish[open] summary{margin-bottom:8px}
.cv-wish .field{margin-top:8px}
/* бібліотека дизайнів обкладинок */
.dz-list{display:grid;gap:18px;margin-top:24px}
.dz-card{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:22px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px}
.dz-imgs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dz-imgs figure{margin:0;display:grid;gap:6px}
.dz-imgs img,.dz-wait{width:100%;aspect-ratio:1/1.03;object-fit:cover;border-radius:6px;background:#EEE7E2;box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
.dz-wait{display:grid;place-content:center;gap:12px;text-align:center;padding:18px;color:#7A6E6A;font-size:13px;line-height:1.5;justify-items:center}
.dz-imgs figcaption{font-size:11.5px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
.dz-body{display:grid;gap:10px;align-content:start}
.dz-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dz-name{font-family:var(--f-display);font-size:18px}
.dz-redo summary{cursor:pointer;color:var(--muted);font-size:13px}
.dz-redo[open]{display:grid;gap:8px}
.dz-redo textarea{min-height:64px}
.spin{width:22px;height:22px;border-radius:50%;border:2px solid rgba(0,0,0,.12);border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:900px){.dz-card{grid-template-columns:1fr}}

/* ===== сторінка параметрів книги — щільна сітка ===== */
@media (min-width:1101px){.brief{grid-template-columns:minmax(0,1fr) 300px;gap:20px}}
.bgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.bgrid .wide{grid-column:1/-1}
.bp{padding:18px 20px 20px;gap:14px;border-radius:16px}
.bp h2,.brief aside h2{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;font-size:19px;letter-spacing:-.005em;padding-bottom:12px;border-bottom:1px solid var(--line)}
.bp h2 i{font-style:normal;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;color:var(--gold)}
.bp .h2-note{margin-left:auto;font-family:var(--f-body);font-size:11.5px;color:var(--muted);font-weight:400}
.mk-i{font-size:10px;font-weight:600;padding:1px 6px;border-radius:999px;background:var(--accent);color:var(--accent-ink)}
.mk-i.cv{background:var(--gold);color:#fff}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px;align-items:end}
.bp .field{gap:5px}
.bp .field>label,.bp .field>.lbl{font-size:11.5px}
.bp .input,.bp .select{padding:8px 11px;border-radius:10px}
.bp .seg{width:100%}
.bp .seg button{flex:1}
.bp .stepper{width:100%;justify-content:space-between}
.bp .textarea{min-height:62px;padding:8px 11px;border-radius:10px;font-size:13.5px}
.bp .hint{font-size:11.5px}
.bp .more{padding-top:10px}
.wcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.wcol{display:grid;gap:10px;align-content:start}
.wcol .wish-h{font-size:16px;margin:0}
.wcol .wish-h ~ .wish-h{margin:0;padding:0;border:0}
.wcols .wcol + .wcol{padding-left:20px;border-left:1px solid var(--line)}
.bp .pick{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:5px;max-height:244px;overflow:auto;padding-right:2px}
.bp .pick button{border-radius:6px}
.brief aside{padding:18px 20px;gap:14px;border-radius:16px}
.brief aside .sum{gap:8px}
.brief aside .sum .r{padding-bottom:8px;font-size:12.5px}
@media (max-width:1100px){.row3{grid-template-columns:repeat(2,minmax(0,1fr))}.row3 .field:first-child{grid-column:1/-1}}
@media (max-width:900px){.bgrid,.wcols{grid-template-columns:minmax(0,1fr)}.wcols .wcol + .wcol{padding:16px 0 0;border-left:0;border-top:1px solid var(--line)}.row3{grid-template-columns:minmax(0,1fr)}}
.bp .seg{flex-wrap:nowrap;gap:2px;padding:3px}
.bp .seg button{padding:7px 6px;font-size:12.5px;white-space:nowrap;min-width:0}
.bgrid{align-items:stretch}
.bgrid .wide{align-self:start}
.bp{align-content:start}
.bp .pick{align-content:start;grid-auto-rows:max-content}

/* ===== клікабельне видно одразу: рамка, тінь, реакція на наведення (світлі сторінки) ===== */
.app .btn{box-shadow:0 1px 2px rgba(28,21,24,.06);border-color:color-mix(in srgb,var(--line) 70%,var(--muted))}
.app .btn:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 3px 10px rgba(169,61,91,.12);transform:translateY(-1px)}
.app .btn:active{transform:translateY(0)}
.app .btn.primary{box-shadow:0 4px 14px rgba(169,61,91,.28)}
.app .btn.primary:hover{color:var(--accent-ink);box-shadow:0 6px 18px rgba(169,61,91,.34)}
.app .btn.ghost{background:transparent;border-color:color-mix(in srgb,var(--line) 70%,var(--muted));box-shadow:none}
.app .btn.ghost:hover{background:var(--surface)}
.app .seg{border:1px solid var(--line)}
.app .seg button{color:var(--ink);opacity:.72;transition:background .15s,opacity .15s,color .15s}
.app .seg button:hover:not(.on){opacity:1;background:color-mix(in srgb,var(--surface) 65%,transparent)}
.app .seg button.on{opacity:1;color:var(--accent);font-weight:600;box-shadow:0 1px 4px rgba(28,21,24,.1),0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}
.app .chip{color:var(--ink);border-color:color-mix(in srgb,var(--line) 70%,var(--muted));box-shadow:0 1px 2px rgba(28,21,24,.05);transition:border-color .15s,color .15s,background .15s}
.app .chip:hover:not(.on){border-color:var(--accent);color:var(--accent)}
.app .chip.on{font-weight:600}
.app .stepper{border:1px solid var(--line)}
.app .stepper button{border:1px solid var(--line);box-shadow:0 1px 2px rgba(28,21,24,.08);color:var(--accent);font-weight:600;transition:background .15s,color .15s}
.app .stepper button:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.app .more summary{display:inline-flex;align-items:center;gap:4px;color:var(--accent);font-weight:600}
.app .more summary:hover{text-decoration:underline;text-underline-offset:3px}
.app .pick button{transition:transform .12s,box-shadow .12s}
.app .pick button:hover{transform:scale(1.04);box-shadow:0 0 0 2px var(--accent),0 4px 10px rgba(28,21,24,.18);z-index:1}
.app .select{cursor:pointer}
.app .select:hover,.app .input:hover,.app .textarea:hover{border-color:color-mix(in srgb,var(--line) 40%,var(--muted))}
.app .nav button:not(.on):hover{color:var(--accent)}
.app :is(button,summary,select,input,textarea,.btn):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.app .range{cursor:pointer}

/* ===== шапка проєкту: кроки + назва + мітки ===== */
.phead{align-items:flex-end;margin-bottom:24px}
.ph-main{display:grid;gap:10px;min-width:0;flex:1 1 420px}
.phead h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.01em}
.steps{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.steps .st{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;padding:0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.steps .st span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid color-mix(in srgb,var(--line) 60%,var(--muted));font-family:var(--f-mono);font-size:10px;letter-spacing:0}
.steps .st.cur{color:var(--accent)}
.steps .st.cur span{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 3px var(--accent-soft)}
.steps .st.done{color:var(--ink)}
.steps .st.done span{background:var(--gold-soft);border-color:var(--gold);color:var(--gold)}
.steps button.st:not([disabled]):hover{color:var(--accent)}
.steps button.st[disabled]{cursor:default}
.steps .st-line{display:block;width:28px;height:1px;background:color-mix(in srgb,var(--line) 50%,var(--muted))}
.pmeta{display:flex;flex-wrap:wrap;gap:6px}
.pm{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:12px;color:var(--muted)}
.pm b{color:var(--ink);font-weight:600}
.pm svg{width:13px;height:13px}
.pm.mono{font-family:var(--f-mono);font-size:11px}
@media (max-width:700px){.steps .st-line{width:14px}.phead h1{white-space:normal}}
.phead{flex-wrap:nowrap;align-items:center;gap:18px}
.ph-back{flex:none;align-self:center;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid color-mix(in srgb,var(--line) 70%,var(--muted));background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(28,21,24,.06);transition:border-color .15s,color .15s,transform .15s,box-shadow .15s}
.ph-back svg{width:20px;height:20px}
.ph-back:hover{border-color:var(--accent);color:var(--accent);transform:translateX(-2px);box-shadow:0 3px 10px rgba(169,61,91,.14)}
@media (max-width:700px){.phead{flex-wrap:wrap}.ph-back{width:38px;height:38px}}
@media (max-width:700px){.phead{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:12px}.phead>.ph-back{align-self:start}.phead>.chips{grid-column:1/-1}}
@media (max-width:700px){.steps{gap:4px;flex-wrap:nowrap}.steps .st{letter-spacing:.04em;font-size:10px;gap:5px}.steps .st-line{width:8px}}
/* стрілка «назад» — заповнена винним, щоб одразу кидалась в око */
.ph-back{width:50px;height:50px;border:0;background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 16px rgba(169,61,91,.32),0 0 0 5px var(--accent-soft)}
.ph-back svg{width:24px;height:24px;stroke-width:2.4}
.ph-back:hover{color:var(--accent-ink);filter:brightness(1.08);transform:translateX(-3px);box-shadow:0 8px 20px rgba(169,61,91,.4),0 0 0 6px var(--accent-soft)}
@media (max-width:700px){.ph-back{width:42px;height:42px}.ph-back svg{width:21px;height:21px}}

/* ===== обкладинка в конструкторі: стрічка дизайнів, кнопки на обкладинці, пульт праворуч ===== */
.ed-stage.has-film{grid-template-rows:auto minmax(0,1fr) auto auto}
.has-film .canvas{padding:10px 28px 6px}
.has-film .canvas .wrap{width:min(100%,1100px,calc((100dvh - 420px)*2))}
.has-film .stage-foot{padding:6px 20px 10px}
.cover.cv-des{background-size:100% 100%;background-repeat:no-repeat}
.cover.cv-des>img{transition:opacity .2s}
.cover.cv-des.ld::after{content:"";position:absolute;right:14px;bottom:14px;width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:var(--ed-accent);animation:spin .8s linear infinite;box-shadow:0 0 0 4px rgba(0,0,0,.18);z-index:3}
.cv-tools{position:absolute;top:12px;display:flex;gap:6px;z-index:2;opacity:.0;transform:translateY(-4px);transition:opacity .18s,transform .18s;pointer-events:none}
.cover.cv-des:hover .cv-tools,.cover.cv-des:focus-within .cv-tools{opacity:1;transform:none;pointer-events:auto}
@media (hover:none){.cv-tools{opacity:1;transform:none;pointer-events:auto}}
.cv-tools button{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:7px 12px 7px 10px;font-size:12px;font-weight:600;color:#fff;background:rgba(22,16,19,.78);backdrop-filter:blur(6px);box-shadow:0 4px 14px rgba(0,0,0,.3);cursor:pointer;transition:background .15s}
.cv-tools button:hover{background:var(--ed-accent);color:#1A0E12}
.cv-tools svg{width:14px;height:14px}
.cover.cv-des .cv-hit{cursor:pointer}
.cover.cv-des .cv-hit:hover{box-shadow:inset 0 0 0 2px rgba(230,139,166,.55)}
.cover.cv-des .cv-hit.over{box-shadow:inset 0 0 0 3px var(--ed-accent);background:rgba(230,139,166,.12)}

.cv-film{border-top:1px solid var(--ed-line);background:linear-gradient(180deg,rgba(22,18,20,.6),rgba(14,12,13,.9));padding:10px 20px 12px;display:grid;gap:9px;min-width:0}
.cvf-top{display:flex;align-items:center;gap:12px;min-width:0}
.cvf-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;min-width:0}
.cvf-tabs button{flex:none;border:1px solid var(--ed-line);background:transparent;color:var(--ed-muted);border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:500;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.cvf-tabs button i{font-style:normal;font-family:var(--f-mono);font-size:10px;margin-left:6px;opacity:.7}
.cvf-tabs button:hover{color:var(--ed-ink);border-color:var(--ed-muted)}
.cvf-tabs button.on{color:#1A0E12;background:var(--ed-accent);border-color:var(--ed-accent)}
.cvf-hint{margin-left:auto;flex:none;font-size:11px;color:var(--ed-muted);display:flex;align-items:center;gap:4px}
.cvf-hint kbd{font-family:var(--f-mono);font-size:10px;border:1px solid var(--ed-line);border-bottom-width:2px;border-radius:4px;padding:0 5px;color:var(--ed-ink)}
.cvf-row{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 6px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--ed-line) transparent}
.cvf-tile{flex:none;width:96px;border:0;background:transparent;padding:0;display:grid;gap:5px;cursor:pointer;color:var(--ed-muted);text-align:center}
.cvf-tile img{width:96px;height:98px;object-fit:cover;border-radius:5px;background:#E9E3DF;display:block;outline:2px solid transparent;outline-offset:2px;box-shadow:0 6px 14px -8px rgba(0,0,0,.7);transition:outline-color .15s,transform .15s}
.cvf-tile span{font-size:10.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cvf-tile:hover img{transform:translateY(-2px);outline-color:var(--ed-muted)}
.cvf-tile:hover span{color:var(--ed-ink)}
.cvf-tile.on img{outline-color:var(--ed-accent)}
.cvf-tile.on span{color:var(--ed-accent);font-weight:600}

.cvp-head{display:grid;gap:2px;padding-bottom:12px;border-bottom:1px solid var(--ed-line)}
.cvp-head span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ed-gold);font-weight:600}
.cvp-head b{font-family:var(--f-display);font-weight:400;font-size:21px;line-height:1.2}
.cvp-head small{font-size:11.5px;color:var(--ed-muted)}
.cvp-sec{display:grid;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--ed-line)}
.cvp-sec h4{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--ed-ink)}
.cvp-sec h4 svg{width:14px;height:14px;color:var(--ed-gold)}
.cvp-sec h4 small{margin-left:auto;font-weight:400;font-size:11px;color:var(--ed-muted);letter-spacing:0}
.cvp-sec .field>label{color:var(--ed-muted)}
.cvp-dot{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.cvp-sec .cv-sw button{width:24px;height:24px}
.cvp-slots{display:flex;flex-wrap:wrap;gap:8px}
.cvp-slots>button{position:relative;width:64px;height:64px;border-radius:8px;overflow:hidden;border:1px solid var(--ed-line);background:var(--ed-panel-2);padding:0;cursor:pointer;transition:box-shadow .15s}
.cvp-slots>button .thumb{position:absolute;inset:0}
.cvp-slots>button span{position:absolute;left:0;right:0;bottom:0;padding:10px 4px 3px;font-size:9.5px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));text-align:center}
.cvp-slots>button:hover,.cvp-slots>button.over{box-shadow:0 0 0 2px var(--ed-muted)}
.cvp-slots>button.on{box-shadow:0 0 0 2px var(--ed-accent)}
.cvp-slots .cvp-crop{display:grid;place-content:center;justify-items:center;gap:4px;color:var(--ed-muted);border-style:dashed}
.cvp-slots .cvp-crop span{position:static;background:none;padding:0;color:inherit}
.cvp-slots .cvp-crop svg{width:18px;height:18px}
.cvp-slots .cvp-crop:hover{color:var(--ed-ink)}
.cvp-pick-h{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ed-muted)}
.cvp-pick-h button{margin-left:auto;border:0;background:none;color:var(--ed-accent);font-size:11px;font-weight:600;cursor:pointer}
.cvp-pick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;max-height:236px;overflow-y:auto;padding-right:2px}
.cvp-pick button{position:relative;aspect-ratio:1;border:0;padding:0;border-radius:5px;overflow:hidden;cursor:pointer;background:var(--ed-panel-2)}
.cvp-pick button .thumb{position:absolute;inset:0}
.cvp-pick button:hover{box-shadow:0 0 0 2px var(--ed-accent);z-index:1}
.cvp-pick button.used::after{content:"✓";position:absolute;right:3px;top:3px;width:15px;height:15px;border-radius:50%;background:var(--ed-accent);color:#1A0E12;font-size:9px;font-weight:700;display:grid;place-items:center}
.cvp-ai{border-bottom:0;padding-bottom:0}
.cvp-ai h4{color:var(--ed-gold)}
/* поля вводу в темному конструкторі */
.ed .input,.ed .select,.ed .textarea{background:var(--ed-panel-2);border-color:var(--ed-line);color:var(--ed-ink)}
.ed .input::placeholder,.ed .textarea::placeholder{color:color-mix(in srgb,var(--ed-muted) 70%,transparent)}
.ed .input:hover,.ed .select:hover,.ed .textarea:hover{border-color:var(--ed-muted)}
.ed .input:focus,.ed .select:focus,.ed .textarea:focus{border-color:var(--ed-accent);box-shadow:0 0 0 3px rgba(230,139,166,.15)}
.ed .select option{background:var(--ed-panel);color:var(--ed-ink)}
.cvp-pick{grid-auto-rows:max-content;align-content:start}

/* ===== Claude — арт-директор обкладинки ===== */
.cvp-run{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:linear-gradient(135deg,rgba(210,181,135,.14),rgba(230,139,166,.1));border:1px solid rgba(210,181,135,.35);font-size:12.5px;color:var(--ed-ink)}
.cvp-run .dl-spin{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:var(--ed-gold);animation:spin .8s linear infinite}
.cvp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cvp-steps span{position:relative;padding-top:10px;font-size:10.5px;color:var(--ed-muted);line-height:1.3}
.cvp-steps span::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:var(--ed-line)}
.cvp-steps span.cur{color:var(--ed-ink)}
.cvp-steps span.cur::before{background:linear-gradient(90deg,var(--ed-gold),var(--ed-line));background-size:200% 100%;animation:cvpbar 1.2s linear infinite}
.cvp-steps span.done{color:var(--ed-gold)}
.cvp-steps span.done::before{background:var(--ed-gold)}
@keyframes cvpbar{from{background-position:100% 0}to{background-position:-100% 0}}
.cv-recs{display:grid;gap:8px}
.cv-rec{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;align-items:start;text-align:left;padding:8px;border-radius:12px;border:1px solid var(--ed-line);background:var(--ed-panel-2);color:var(--ed-muted);cursor:pointer;transition:border-color .15s,transform .15s}
.cv-rec:hover{border-color:var(--ed-gold);transform:translateY(-1px)}
.cv-rec.on{border-color:var(--ed-accent);box-shadow:0 0 0 1px var(--ed-accent)}
.cv-rec img{width:84px;height:86px;object-fit:cover;border-radius:5px;background:#E9E3DF;box-shadow:0 6px 14px -8px rgba(0,0,0,.7)}
.cv-rec span{display:grid;gap:3px;align-content:start}
.cv-rec b{font-weight:500;font-size:13px;color:var(--ed-ink)}
.cv-rec small{font-size:11px;line-height:1.4}
.cv-rec small.fix{color:var(--ed-gold)}
.cv-rec .mood{justify-self:start;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:rgba(210,181,135,.16);color:var(--ed-gold)}
.cv-rec .mood.calm{background:rgba(160,180,200,.16);color:#AFC3D6}
.cv-rec .mood.bold{background:rgba(230,139,166,.18);color:var(--ed-accent)}
.cvp-more{width:100%;justify-content:center}
.cvf-tile.rec img{outline-color:rgba(210,181,135,.55)}
.cvf-tile.rec span{color:var(--ed-gold);font-weight:600}
.cvf-tile.rec.on img{outline-color:var(--ed-accent)}
.cvf-sep{flex:none;width:1px;margin:6px 4px 24px;background:var(--ed-line)}

/* ===== верхня панель конструктора: згруповані інструменти ===== */
.ed-top{flex-wrap:nowrap;gap:12px;padding:10px 16px;min-height:60px}
.ed-top .ttl{flex:0 1 auto;max-width:240px}
.ed-top .ttl b,.ed-top .ttl span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.et-back{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--ed-line);background:var(--ed-panel-2);color:var(--ed-ink);cursor:pointer;transition:border-color .15s,color .15s}
.et-back svg{width:17px;height:17px}
.et-back:hover{border-color:var(--ed-accent);color:var(--ed-accent)}
.ed-top .mid{display:flex;align-items:center;gap:8px;margin:0 auto;min-width:0}
.et-grp{display:flex;align-items:center;height:34px;padding:3px;gap:2px;border:1px solid var(--ed-line);border-radius:10px;background:var(--ed-panel-2)}
.et-ic{display:grid;place-items:center;width:28px;height:26px;border:0;border-radius:7px;background:transparent;color:var(--ed-ink);cursor:pointer}
.et-ic svg{width:16px;height:16px}
.et-ic:hover:not([disabled]){background:var(--ed-line)}
.et-ic[disabled]{opacity:.3;cursor:default}
.et-lab{padding:0 8px 0 7px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ed-muted);font-weight:600;border-right:1px solid var(--ed-line);margin-right:2px;height:18px;display:flex;align-items:center}
.et-opt{height:26px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:var(--ed-muted);font-size:12px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
.et-opt:hover:not(.on){color:var(--ed-ink)}
.et-opt.on{background:var(--ed-line);color:var(--ed-ink);box-shadow:inset 0 0 0 1px rgba(230,139,166,.35)}
.et-tog,.et-act{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--ed-line);background:transparent;color:var(--ed-ink);font-size:12.5px;font-weight:500;white-space:nowrap;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.et-tog svg,.et-act svg{width:16px;height:16px;flex:none;color:var(--ed-muted)}
.et-tog:hover,.et-act:hover{border-color:var(--ed-muted)}
.et-tog:hover svg,.et-act:hover svg{color:var(--ed-ink)}
.et-tog.on{border-color:var(--ed-accent);color:var(--ed-accent);background:rgba(230,139,166,.08)}
.et-tog.on svg{color:var(--ed-accent)}
.et-act{border-color:transparent}
.et-act:hover{background:var(--ed-panel-2)}
.et-div{flex:none;width:1px;height:22px;background:var(--ed-line);margin:0 2px}
.ed-top .right{flex:none;display:flex;align-items:center;gap:8px}
.ed-top .right .btn{height:34px;padding:0 14px}
.ed-top .right .btn svg{width:15px;height:15px}
@media (max-width:1500px){.et-tog span,.et-act span{display:none}.et-tog,.et-act{padding:0 9px}.ed-top .ttl{max-width:180px}}
@media (max-width:1180px){.ed-top{flex-wrap:wrap}.ed-top .mid{order:3;width:100%;justify-content:flex-start;margin:0}.saved{display:none}}
.ed-top .ttl{max-width:260px}
.ed-top .ttl span{display:flex;align-items:center;gap:8px}
.ed-top .ttl .pill{font-size:10.5px;padding:1px 8px}
.et-lab{text-transform:none;letter-spacing:.02em;font-size:11px}
.et-w{display:inline-flex;align-items:center;gap:6px;color:var(--ed-ink)}
.et-w svg{width:15px;height:15px;color:var(--ed-muted)}
.et-w:hover svg{color:var(--ed-ink)}
.et-w:hover{background:var(--ed-line)}
.stage-bar .btn svg{width:15px;height:15px}
@media (max-width:1500px){.saved{font-size:0;gap:0}.ed-top .ttl{max-width:200px}}
@media (max-width:1180px){.ed-top .right{margin-left:auto}}
/* параметри вже зібраної книги: повернутись або зібрати нову */
.brief-go{display:grid;gap:10px}
.brief-go .bg-back{justify-content:center;transition:opacity .25s,background .25s,color .25s,box-shadow .25s}
.brief-go .bg-back .b,.brief-go .bg-new{display:none}
.brief-go.dirty .bg-back{order:3;background:transparent;color:var(--muted);border-color:var(--line);box-shadow:none;opacity:.7;font-size:13px;padding:10px 16px}
.brief-go.dirty .bg-back:hover{opacity:1;color:var(--ink);transform:none}
.brief-go.dirty .bg-back .a,.brief-go.dirty .bg-ok{display:none}
.brief-go.dirty .bg-back .b{display:inline}
.brief-go.dirty .bg-new{display:grid;gap:10px;animation:bgin .3s ease}
.brief-go .bg-new .btn{justify-content:center}
.bg-note{font-size:12.5px;line-height:1.45;padding:10px 12px;border-radius:12px;background:var(--accent-soft);color:var(--accent);font-weight:500}
@keyframes bgin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* перегляд: помітна кнопка «назад у конструктор» у нашому стилі */
.pv-back{display:inline-flex;align-items:center;gap:12px;padding:6px 20px 6px 6px;border:0;border-radius:999px;background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 16px rgba(169,61,91,.3),0 0 0 4px var(--accent-soft);cursor:pointer;text-align:left;transition:filter .15s,transform .15s,box-shadow .15s}
.pv-back:hover{filter:brightness(1.07);transform:translateX(-2px);box-shadow:0 8px 20px rgba(169,61,91,.38),0 0 0 5px var(--accent-soft)}
.pv-back-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.18)}
.pv-back-ic svg{width:20px;height:20px}
.pv-back-t{display:grid;line-height:1.15;font-size:14px;font-weight:600}
.pv-back-t small{font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.pv{align-items:center}.pv>aside{align-self:center}
.pv{grid-template-columns:minmax(0,1fr) 290px;gap:20px}.pv-stage{padding:clamp(14px,2vw,28px) clamp(14px,2vw,28px) 18px;gap:14px}.pv>aside{padding:20px}.pv>aside .dl-card{padding:12px}
.pv{grid-template-columns:minmax(0,1fr) 250px;gap:16px}.pv>aside h2{font-size:19px}.pv>aside .dl-card b{font-size:15px}.pv>aside .dl-card{grid-template-columns:36px minmax(0,1fr) 30px;gap:10px}.pv>aside .dl-ico{width:36px;height:36px}.pv>aside .dl-go{width:30px;height:30px}
.pv>aside{margin-bottom:96px}

/* ---------- категорії дизайнів: стрічка конструктора ---------- */
.cvf-ev{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;min-width:0;align-items:center}
.cv-film .cvf-ev{margin-top:-2px}
.cv-film .cvf-ev button{flex:none;border:0;background:transparent;color:var(--ed-muted);border-radius:999px;padding:3px 9px;font-size:11px;cursor:pointer;transition:color .15s,background .15s}
.cv-film .cvf-ev button:hover{color:var(--ed-ink);background:rgba(255,255,255,.06)}
.cv-film .cvf-ev button.book{color:var(--ed-accent)}
.cv-film .cvf-ev button.on{color:var(--ed-ink);background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px var(--ed-muted)}

/* ---------- бібліотека: фільтри, теги, статистика ---------- */
.dz-filters{display:grid;gap:8px;margin-top:22px}
.dz-filters .cvf-tabs button,.dz-filters .cvf-ev button{flex:none;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:500;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.dz-filters button i{font-style:normal;font-family:var(--f-mono);font-size:10.5px;margin-left:6px;opacity:.7}
.dz-filters button:hover{border-color:var(--muted);color:var(--ink)}
.dz-filters button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.dz-filters .cvf-ev .hint{flex:none;width:52px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.dz-tags{border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--surface)}
.dz-tags summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.dz-tags summary::-webkit-details-marker{display:none}
.dz-tags summary em{margin-left:auto;font-style:normal;font-size:12px;color:var(--accent);font-weight:500}
.dz-tags[open] summary{padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:8px}
.dz-tags[open] summary em{color:var(--muted)}
.dz-trow{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:3px 0}
.dz-trow b{width:46px;flex:none;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.tg{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:3px 10px;font-size:12px;cursor:pointer;transition:all .15s}
button.tg:hover{border-color:var(--muted);color:var(--ink)}
.tg.on{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));color:var(--accent)}
.tg:disabled{opacity:.5;cursor:default}
.dz-stats{display:flex;gap:14px;font-size:12px;color:var(--muted);font-family:var(--f-mono)}

/* ---------- бібліотека: черга розбору, пропущені, масові дії ---------- */
.dz-q{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;padding:12px 16px;border:1px solid color-mix(in srgb,var(--gold) 35%,var(--line));background:var(--gold-soft);border-radius:14px;font-size:13.5px}
.dz-q i{position:absolute;left:0;bottom:0;height:3px;width:var(--w);background:var(--accent);transition:width .3s}
.dz-skip{margin-top:12px;padding:10px 14px;border-radius:12px;background:var(--surface-2);font-size:12.5px;color:var(--muted);line-height:1.55}
.dz-skip b{color:var(--ink)}
.dz-skip .btn{margin-left:8px;padding:4px 10px;font-size:12px}
.dz-bulk{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:14px}
.dz-card.queued .dz-imgs figure:last-child .dz-wait{background:repeating-linear-gradient(-45deg,#EEE7E2 0 12px,#E9E1DB 12px 24px)}

/* стрічка дизайнів: кнопка «Усі дизайни» в кінці топ-10 */
.cvf-more{flex:none;width:96px;height:98px;align-self:start;border:1px dashed var(--ed-line);background:transparent;color:var(--ed-muted);border-radius:6px;cursor:pointer;display:grid;place-content:center;gap:4px;font-size:11px;text-align:center;transition:color .15s,border-color .15s}
.cvf-more b{font-family:var(--f-mono);font-size:15px;color:var(--ed-ink);font-weight:500}
.cvf-more:hover{color:var(--ed-ink);border-color:var(--ed-muted)}

/* ---------- редактор шарів обкладинки (як у Canva) ---------- */
.ly-front{position:absolute;top:0;bottom:0;z-index:3;cursor:default}
.ly-front.gx::before,.ly-front.gy::after{content:"";position:absolute;background:#FF4FA3;pointer-events:none;z-index:999}
.ly-front.gx::before{left:50%;top:0;bottom:0;width:1px}
.ly-front.gy::after{top:50%;left:0;right:0;height:1px}
.ly-box{position:absolute;min-width:8px;min-height:8px;cursor:move;outline:1px dashed transparent;outline-offset:1px;transform-origin:50% 50%;transition:outline-color .12s;background-repeat:no-repeat}
.ly-front:hover .ly-box{outline-color:rgba(255,255,255,.35)}
.ly-box:hover{outline:1px solid #8B5CF6 !important}
.ly-box.sel{outline:2px solid #8B5CF6 !important;z-index:500 !important}
.ly-box.ghost{opacity:.92;box-shadow:0 8px 24px -10px rgba(0,0,0,.6)}
.ly-box.k-line{min-height:10px;margin-top:-5px}
.ly-h{position:absolute;width:11px;height:11px;background:#fff;border:1.5px solid #8B5CF6;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.ly-h.nw{left:-7px;top:-7px;cursor:nwse-resize}.ly-h.se{right:-7px;bottom:-7px;cursor:nwse-resize}
.ly-h.ne{right:-7px;top:-7px;cursor:nesw-resize}.ly-h.sw{left:-7px;bottom:-7px;cursor:nesw-resize}
.ly-h.e{right:-5px;top:calc(50% - 9px);width:7px;height:18px;border-radius:4px;cursor:ew-resize}
.ly-h.s{bottom:-5px;left:calc(50% - 9px);width:18px;height:7px;border-radius:4px;cursor:ns-resize}
.ly-rot{position:absolute;left:calc(50% - 9px);top:-34px;width:18px;height:18px;border-radius:50%;background:#fff;border:1.5px solid #8B5CF6;cursor:grab;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.ly-rot::before{content:"↻";position:absolute;inset:0;display:grid;place-content:center;font-size:11px;color:#8B5CF6;font-weight:700}
.ly-rot::after{content:"";position:absolute;left:8px;top:18px;width:1.5px;height:14px;background:#8B5CF6}
.ly-bar{position:absolute;z-index:1000;display:flex;align-items:center;gap:2px;padding:5px 6px;background:#fff;color:#1C1518;border-radius:10px;box-shadow:0 10px 30px -8px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.06);white-space:nowrap;font-size:13px}
.ly-bar button{border:0;background:transparent;color:inherit;min-width:30px;height:30px;padding:0 7px;border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-size:13px}
.ly-bar button svg{width:15px;height:15px}
.ly-bar button:hover{background:#F1ECEE}
.ly-bar button.on{background:#EDE7FB;color:#6D3FE0}
.ly-bar button.del:hover{background:#FDE8EC;color:#B3263E}
.ly-bar .ly-font{min-width:130px;max-width:170px;justify-content:space-between;border:1px solid #E4DEE0;font-size:15px;overflow:hidden;text-overflow:ellipsis}
.ly-num{min-width:34px;text-align:center;font-weight:600;font-family:var(--f-mono);font-size:12px}
.ly-sep{width:1px;height:20px;background:#E4DEE0;margin:0 4px}
.ly-col{position:relative;display:inline-grid;place-content:center;width:30px;height:30px;border-radius:7px;cursor:pointer}
.ly-col:hover{background:#F1ECEE}
.ly-col i{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.ly-col input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.ly-col.big i{width:24px;height:24px}
.ly-zoom{display:inline-flex;align-items:center;gap:4px;padding:0 6px}
.ly-zoom svg{width:15px;height:15px}
.ly-zoom input{width:84px;accent-color:#8B5CF6}
.ly-fmenu{position:absolute;top:calc(100% + 6px);left:0;width:280px;max-height:360px;overflow:auto;background:#fff;border-radius:10px;box-shadow:0 14px 40px -10px rgba(0,0,0,.5);padding:6px;white-space:normal}
.ly-fmenu h5{margin:8px 8px 4px;font:600 10.5px var(--f-body,system-ui);letter-spacing:.12em;text-transform:uppercase;color:#8A7F84}
.ly-fmenu button{display:flex;width:100%;justify-content:space-between;align-items:baseline;height:auto;padding:7px 10px;font-size:17px;text-align:left}
.ly-fmenu button small{font-size:12px;color:#8A7F84}
.ly-fmenu button.on{background:#EDE7FB}
.ly-top{position:absolute;top:10px;left:10px;z-index:4;display:flex;align-items:center;gap:10px;padding:5px 6px 5px 12px;border-radius:999px;background:rgba(20,15,18,.82);color:#fff;font-size:12.5px;backdrop-filter:blur(6px)}
.ly-top button{border:0;border-radius:999px;background:#8B5CF6;color:#fff;font-weight:600;padding:6px 14px;cursor:pointer}
.ly-edit{position:absolute;inset:-4px;min-height:40px;z-index:1001;resize:none;border:2px solid #8B5CF6;border-radius:6px;background:rgba(255,255,255,.96);color:#1C1518;font:16px/1.3 var(--f-body,system-ui);padding:6px;text-align:center}
.cv-tools .ly-go{background:#8B5CF6 !important;color:#fff !important}
/* права панель */
.ly-open{width:100%;justify-content:center;margin-top:10px;background:#8B5CF6 !important;border-color:#8B5CF6 !important;color:#fff !important}
.ly-head-act{display:flex;gap:8px;margin-top:10px}
.ly-head-act .btn{flex:1;justify-content:center}
.ly-head-act .btn.primary{background:#8B5CF6;border-color:#8B5CF6;color:#fff}
.ly-add{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ly-add button,.ly-icons button,.ly-list button{border:1px solid var(--ed-line);background:var(--ed-panel-2);color:var(--ed-ink);border-radius:9px;padding:9px 10px;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:12.5px;transition:border-color .15s,background .15s}
.ly-add button svg{width:14px;height:14px}
.ly-add button:hover,.ly-icons button:hover,.ly-list button:hover{border-color:#8B5CF6}
.ly-icons{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px}
.ly-icons button{padding:6px;justify-content:center;background:#F3EEE9}
.ly-icons button.on{border-color:#8B5CF6;box-shadow:0 0 0 2px #8B5CF6}
.ly-icons img{width:100%;aspect-ratio:1;object-fit:contain}
.ly-list{display:grid;gap:4px;max-height:260px;overflow:auto}
.ly-list button{padding:7px 9px}
.ly-list button.on{border-color:#8B5CF6;background:rgba(139,92,246,.16)}
.ly-list i{width:22px;height:22px;flex:none;display:grid;place-content:center;border-radius:6px;background:rgba(255,255,255,.07);font-style:normal;font-size:12px}
.ly-list span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;font-size:14px}
.ly-list em{font-style:normal;font-size:10.5px;color:var(--ed-muted)}
.ly-props{border:1px solid rgba(139,92,246,.45);border-radius:12px;padding:12px !important;background:rgba(139,92,246,.06)}
.ly-prop-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ly-prop-h b{font-size:14px}
.ly-prop-h button{border:1px solid var(--ed-line);background:transparent;color:var(--ed-ink);border-radius:7px;width:30px;height:28px;cursor:pointer;margin-left:3px}
.ly-prop-h button:hover{border-color:#8B5CF6}
.ly-rng{display:grid;gap:4px;margin:8px 0}
.ly-rng label{display:flex;justify-content:space-between;font-size:12px;color:var(--ed-muted)}
.ly-rng label b{color:var(--ed-ink);font-family:var(--f-mono);font-weight:500;font-size:11.5px}
.ly-rng input{width:100%;accent-color:#8B5CF6}
.ly-colrow{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:8px 0}
.ly-colrow span{font-size:12px;color:var(--ed-muted);width:100%}
.ly-dot{width:22px;height:22px;border-radius:50%;border:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.ly-chks{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0}
.ly-chk{display:flex;align-items:center;gap:6px;font-size:12.5px;cursor:pointer}
.ly-chk input{accent-color:#8B5CF6}
.ly-seg{display:flex;margin:8px 0}
.ly-seg button{flex:1}
.ly-ph{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.ly-ph img{width:56px;height:56px;object-fit:cover;border-radius:6px}
#ly-panel .field{margin:8px 0}
#ly-panel .cvp-pick{max-height:220px}
.ly-icons img[src*="line_"]{filter:brightness(0) opacity(.8)}

/* ---------- лінія обрізу (зелена на схемах друкарні) ---------- */
.spread .cut{position:absolute;inset:0;pointer-events:none;z-index:5}
.spread .cut i{position:absolute;background:rgba(14,10,12,.5)}
.spread .cut .t{left:0;right:0;top:0;height:var(--cy);border-bottom:1px solid #6BD66B}
.spread .cut .b{left:0;right:0;bottom:0;height:var(--cy);border-top:1px solid #6BD66B}
.spread .cut .l{left:0;top:var(--cy);bottom:var(--cy);width:var(--cx);border-right:1px solid #6BD66B}
.spread .cut .r{right:0;top:var(--cy);bottom:var(--cy);width:var(--cx);border-left:1px solid #6BD66B}
.trimwrap{position:relative;overflow:hidden;width:100%}
.trimwrap>div{position:absolute}

/* =================== Студія обкладинки =================== */
:root{--sel:#8B5CF6;--sel-soft:rgba(139,92,246,.16)}
/* полотно */
.studio-canvas .wrap{width:min(100%,calc((100dvh - 330px)*1.02),860px)}
.ed-stage.has-film .studio-canvas .wrap{width:min(100%,calc((100dvh - 470px)*1.02),860px)}
.cover.studio{box-shadow:0 30px 70px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.04)}
.cover.studio:not(.is-front) .wrap{width:min(100%,1100px)}
.studio-canvas .wrap:has(.cover.studio:not(.is-front)){width:min(100%,1100px,calc((100dvh - 470px)*2))}
.ly-front{position:absolute;top:0;bottom:0;z-index:3}
.ly-box{position:absolute;min-width:8px;min-height:8px;cursor:move;transform-origin:50% 50%;background-repeat:no-repeat;border-radius:1px}
.ly-box::before{content:"";position:absolute;inset:-2px;border:1.5px solid transparent;border-radius:2px;pointer-events:none;transition:border-color .12s}
.ly-box:hover::before{border-color:rgba(139,92,246,.75)}
.ly-box.sel::before{border:2px solid var(--sel)}
.ly-box.sel{z-index:500 !important}
.ly-box.locked{cursor:default}
.ly-box.locked.sel::before{border-style:dashed}
.ly-box.ghost{opacity:.94;box-shadow:0 10px 26px -12px rgba(0,0,0,.6)}
.ly-box.k-line{min-height:12px;margin-top:-6px}
.ly-h{position:absolute;width:12px;height:12px;background:#fff;border:1.5px solid var(--sel);border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.35);z-index:2}
.ly-h.nw{left:-7px;top:-7px;cursor:nwse-resize}.ly-h.se{right:-7px;bottom:-7px;cursor:nwse-resize}
.ly-h.ne{right:-7px;top:-7px;cursor:nesw-resize}.ly-h.sw{left:-7px;bottom:-7px;cursor:nesw-resize}
.ly-h.e,.ly-h.w{top:calc(50% - 9px);width:7px;height:18px;border-radius:4px}.ly-h.e{right:-5px;cursor:ew-resize}.ly-h.w{left:-5px;cursor:ew-resize}
.ly-h.s,.ly-h.n{left:calc(50% - 9px);width:18px;height:7px;border-radius:4px}.ly-h.s{bottom:-5px;cursor:ns-resize}.ly-h.n{top:-5px;cursor:ns-resize}
.ly-rot{position:absolute;left:calc(50% - 12px);bottom:-40px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.4);cursor:grab;z-index:2}
.ly-rot::before{content:"";position:absolute;inset:5px;background:var(--sel);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M20 12a8 8 0 11-2.3-5.6L20 8'/%3E%3Cpath d='M20 3v5h-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M20 12a8 8 0 11-2.3-5.6L20 8'/%3E%3Cpath d='M20 3v5h-5'/%3E%3C/svg%3E") center/contain no-repeat}
.ly-guides{position:absolute;inset:0;pointer-events:none;z-index:900}
.ly-guides i{position:absolute;background:#FF4FA3}
.ly-guides .gv{top:-6px;bottom:-6px;width:1px}
.ly-guides .gh{left:-6px;right:-6px;height:1px}
.ly-front.cropping .ly-box:not(.crop){opacity:.25;pointer-events:none}
.ly-box.crop{cursor:grab;overflow:visible}
.ly-box.crop::before{border:2px solid #fff;box-shadow:0 0 0 9999px rgba(10,8,9,.55)}
.ly-cropview{position:absolute;inset:0;overflow:hidden}
.ly-cropview .ph{position:absolute;inset:0;background-size:cover}
.ly-croptip{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);white-space:nowrap;font-size:11.5px;background:rgba(20,15,18,.85);color:#fff;padding:4px 10px;border-radius:999px;pointer-events:none}
.ly-edit{position:absolute;inset:-6px;min-height:36px;z-index:1001;resize:none;border:2px solid var(--sel);border-radius:6px;background:rgba(255,255,255,.94);line-height:1.2;padding:4px 6px;outline:none;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.ly-tip{position:fixed;z-index:9999;pointer-events:none;background:#1C1518;color:#fff;font-size:11.5px;padding:3px 8px;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.4)}
/* контекстна панель (як у Canva — над полотном) */
.stage-bar:has(.sb-wrap){padding:10px 16px}
.sb-wrap{flex:1;min-width:0}
.sb{display:flex;align-items:center;gap:4px;min-height:44px;padding:4px 6px;background:var(--ed-panel);border:1px solid var(--ed-line);border-radius:12px;flex-wrap:wrap;box-shadow:0 8px 24px -16px rgba(0,0,0,.8)}
.sb.dragging{opacity:.5}
.sb-title{display:flex;flex-direction:column;padding:0 10px 0 6px;font-family:var(--f-display);font-size:16px;line-height:1.15;margin-right:6px}
.sb-title small{font:500 10px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ed-muted)}
.sb-title em{font:600 10px var(--f-body);font-style:normal;color:var(--sel);letter-spacing:.06em;text-transform:uppercase}
.sb-title svg{width:16px;height:16px;display:inline}
span.sb-title:has(svg){flex-direction:row;align-items:center;gap:8px;font-family:var(--f-body);font-size:13.5px;font-weight:600}
.sb-kind{display:inline-flex;align-items:center;gap:7px;padding:0 12px 0 8px;margin-right:4px;border-right:1px solid var(--ed-line);font-size:12.5px;font-weight:600;color:var(--ed-ink);height:28px}
.sb-kind svg{width:16px;height:16px;color:var(--sel)}
.sb-hint{margin-left:auto;font-size:11.5px;color:var(--ed-muted);padding:0 8px}
.sb-grp{position:relative}
.sb-sep{width:1px;height:22px;background:var(--ed-line);margin:0 4px}
.sb-b{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:34px;height:34px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:var(--ed-ink);font-size:12.5px;font-weight:500;cursor:pointer;transition:background .12s,color .12s}
.sb-b svg{width:17px;height:17px}
.sb-b:hover{background:rgba(255,255,255,.07)}
.sb-b.on,.sb-b.open{background:var(--sel-soft);color:#C9B5FF}
.sb-b.del:hover{background:rgba(229,72,77,.16);color:#FF8A8F}
.sb-b.sb-w{padding:0 11px}
.sb-b.sb-txt{font-weight:700;font-size:13px}
.sb-b.sb-done{margin-left:auto;background:var(--sel);color:#fff;padding:0 16px;font-weight:600}
.sb-b.sb-done:hover{background:#7C4DEB}
.sb-font{min-width:170px;max-width:210px;justify-content:space-between;border:1px solid var(--ed-line);background:var(--ed-panel-2);font-size:15px}
.sb-font span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-font svg{width:14px;height:14px;flex:none;opacity:.7}
.sb-size{display:inline-flex;align-items:center;border:1px solid var(--ed-line);border-radius:8px;height:34px;overflow:hidden;background:var(--ed-panel-2)}
.sb-size button{width:28px;height:100%;border:0;background:transparent;color:var(--ed-ink);font-size:16px;cursor:pointer}
.sb-size button:hover{background:rgba(255,255,255,.07)}
.sb-size input{width:44px;height:100%;border:0;border-left:1px solid var(--ed-line);border-right:1px solid var(--ed-line);background:transparent;color:var(--ed-ink);text-align:center;font:500 12.5px var(--f-mono)}
.sb-A{font-weight:700;font-size:16px;line-height:1;padding-bottom:3px;border-bottom:4px solid var(--c);min-width:16px;text-align:center}
.sb-sw{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);flex:none}
.sb-ico img{width:20px;height:20px;object-fit:contain;filter:invert(1) brightness(1.4)}
.sb-seg{display:inline-flex;padding:3px;border-radius:9px;background:var(--ed-panel-2);border:1px solid var(--ed-line);margin:0 6px}
.sb-seg button{border:0;background:transparent;color:var(--ed-muted);font-size:12px;font-weight:500;padding:6px 12px;border-radius:7px;cursor:pointer}
.sb-seg button.on{background:rgba(255,255,255,.1);color:var(--ed-ink)}
.sb-zoom{display:inline-flex;align-items:center;gap:8px;padding:0 10px;color:var(--ed-muted)}
.sb-zoom svg{width:16px;height:16px}
.sb-zoom input{width:140px;accent-color:var(--sel)}
/* спливні вікна контекстної панелі */
.sb-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:1200;min-width:220px;background:#211B1E;border:1px solid #352C31;border-radius:12px;box-shadow:0 24px 50px -16px rgba(0,0,0,.85);padding:10px;color:var(--ed-ink)}
.sb-pop h6{display:flex;justify-content:space-between;margin:2px 4px 8px;font:600 10.5px var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ed-muted)}
.sb-pop h6 b{font:500 11.5px var(--f-mono);letter-spacing:0;color:var(--ed-ink)}
.pop-slider{width:240px}
.pop-slider input,.sb-pop input[type=range]{width:100%;accent-color:var(--sel)}
.pop-opts{width:210px;display:grid;gap:2px}
.pop-opts button{border:0;background:transparent;color:var(--ed-ink);text-align:left;padding:8px 10px;border-radius:8px;font-size:13px;cursor:pointer}
.pop-opts button:hover{background:rgba(255,255,255,.06)}
.pop-opts button.on{background:var(--sel-soft);color:#D7C8FF}
.pop-font{width:300px;padding:8px}
.pf-q{width:100%;height:36px;border:1px solid #3A3035;border-radius:8px;background:#171215;color:var(--ed-ink);padding:0 10px;font-size:13px;outline:none;margin-bottom:6px}
.pf-q:focus{border-color:var(--sel)}
.pf-list{max-height:380px;overflow:auto;display:grid;gap:1px;padding-right:2px}
.pf-list h6{margin:10px 6px 4px}
.pf-list button{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border:0;background:transparent;color:var(--ed-ink);padding:8px 10px;border-radius:8px;cursor:pointer;text-align:left}
.pf-list button span{font-size:18px;white-space:nowrap}
.pf-list button small{font-size:12.5px;color:var(--ed-muted);white-space:nowrap}
.pf-list button:hover{background:rgba(255,255,255,.06)}
.pf-list button.on{background:var(--sel-soft)}
.pop-color{width:248px}
.pc-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.pc-grid button{aspect-ratio:1;border:0;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:transform .1s}
.pc-grid button:hover{transform:scale(1.12)}
.pc-grid button.on{box-shadow:0 0 0 2px #211B1E,0 0 0 4px var(--sel)}
.pc-grid.big{grid-template-columns:repeat(10,1fr);gap:6px}
.pc-own{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding:8px 10px;border:1px dashed #3A3035;border-radius:9px;font-size:12.5px;color:var(--ed-muted);cursor:pointer}
.pc-own:hover{border-color:var(--sel);color:var(--ed-ink)}
.pc-own i{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.pc-own input{position:absolute;inset:0;opacity:0;cursor:pointer}
.pop-icons>div{display:grid;grid-template-columns:repeat(5,40px);gap:6px}
.pop-icons button{width:40px;height:40px;border:1px solid #3A3035;border-radius:8px;background:#F3EEE9;cursor:pointer;padding:5px}
.pop-icons button.on{box-shadow:0 0 0 2px var(--sel)}
.pop-icons img{width:100%;height:100%;object-fit:contain}
/* права панель студії */
.ed-panel>#ly-panel{grid-row:1 / -1;display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0}
.ss-tabs{display:flex;gap:2px;padding:8px 8px 0;border-bottom:1px solid var(--ed-line);overflow-x:auto;scrollbar-width:none}
.ss-tabs button{flex:none;border:0;background:transparent;color:var(--ed-muted);font-size:12.5px;font-weight:500;padding:10px 11px;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.ss-tabs button:hover{color:var(--ed-ink)}
.ss-tabs button.on{color:var(--ed-ink);border-bottom-color:var(--sel)}
.ss-body{overflow-y:auto;padding:14px 16px 24px;display:grid;gap:4px;align-content:start}
.ss{padding:12px 0;border-bottom:1px solid var(--ed-line)}
.ss:last-child{border-bottom:0}
.ss h4{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 10px;font:600 11px var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ed-muted)}
.ss h4 small{font-size:11px;letter-spacing:0;text-transform:none;font-weight:400}
.ss .field{margin:0 0 10px}
.ss .hint{font-size:11.5px;line-height:1.5}
.tp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tp{position:relative;display:grid;place-items:center;align-content:center;gap:2px;min-height:68px;padding:10px 8px;border:1px solid transparent;border-radius:10px;background:#F4EFEA;color:#2A2228;cursor:pointer;overflow:hidden;transition:transform .12s,box-shadow .12s}
.tp:hover{transform:translateY(-1px);box-shadow:0 0 0 2px var(--sel)}
.tp span{line-height:1.1;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp small{font:600 9.5px var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:#9A8D93}
.ad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ad-grid button{display:grid;justify-items:center;gap:7px;padding:12px 4px 9px;border:1px solid var(--ed-line);border-radius:10px;background:var(--ed-panel-2);color:var(--ed-ink);font-size:11.5px;cursor:pointer;transition:border-color .12s,background .12s}
.ad-grid button:hover{border-color:var(--sel);background:var(--sel-soft)}
.ad-r{width:40px;height:26px;background:#E8DCCB;border-radius:2px}
.ad-r.rd{border-radius:8px}.ad-r.ci{width:30px;height:30px;border-radius:50%;background:#8C1E2B}.ad-r.band{width:44px;height:12px;margin:7px 0;background:#3A2E2A}
.ad-l{width:40px;height:2px;margin:12px 0;background:#E8DCCB}.ad-l.v{width:2px;height:28px;margin:0}
.ad-f{width:34px;height:30px;background:linear-gradient(135deg,#C9B79C,#7A6A5C)}
.ad-f.ci{width:30px;border-radius:50%}.ad-f.ar{width:28px;height:32px;border-radius:14px 14px 2px 2px}.ad-f.ov{width:26px;height:32px;border-radius:50%}
.ad-f.pol{width:30px;height:34px;border:3px solid #fff;border-bottom-width:9px;box-sizing:border-box}.ad-f.wh{border:4px solid #fff;box-sizing:border-box}
.ic-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.ic-grid button{aspect-ratio:1;border:1px solid transparent;border-radius:9px;background:#F3EEE9;padding:7px;cursor:pointer}
.ic-grid button:hover,.ic-grid button.on{box-shadow:0 0 0 2px var(--sel)}
.ic-grid img{width:100%;height:100%;object-fit:contain}
.ic-grid img[src*="line_"],.sb-ico img[src*="line_"]{filter:brightness(0) opacity(.8)}
.sb-ico img[src*="line_"]{filter:invert(1)}
.fr-list{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.fr-list button{display:grid;gap:4px;border:0;background:transparent;color:var(--ed-muted);font-size:10.5px;cursor:pointer;padding:0}
.fr-list .thumb{aspect-ratio:1;border-radius:7px;box-shadow:0 0 0 1px var(--ed-line)}
.fr-list button.on .thumb{box-shadow:0 0 0 2px var(--sel)}
.ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ph-grid button{border:0;padding:0;background:transparent;cursor:pointer;border-radius:7px;overflow:hidden;position:relative}
.ph-grid .thumb{aspect-ratio:1;transition:transform .15s}
.ph-grid button:hover .thumb{transform:scale(1.05)}
.ph-grid button.used::after{content:"✓";position:absolute;right:4px;top:4px;width:18px;height:18px;border-radius:50%;background:var(--sel);color:#fff;font-size:11px;display:grid;place-content:center}
.lr-list{display:grid;gap:3px}
.lr{display:flex;align-items:center;gap:2px;border-radius:9px;padding:2px;transition:background .12s}
.lr:hover{background:rgba(255,255,255,.04)}
.lr.on{background:var(--sel-soft)}
.lr.off .lr-main{opacity:.4}
.lr-main{flex:1;min-width:0;display:flex;align-items:center;gap:9px;border:0;background:transparent;color:var(--ed-ink);padding:6px 6px;cursor:pointer;text-align:left}
.lr-main i{width:28px;height:28px;flex:none;display:grid;place-content:center;border-radius:7px;background:var(--ed-panel-2);color:var(--ed-muted)}
.lr-main i svg{width:15px;height:15px}
.lr-main span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
.lr-b{width:30px;height:30px;flex:none;border:0;border-radius:7px;background:transparent;color:var(--ed-muted);cursor:pointer;display:grid;place-content:center;opacity:.55}
.lr:hover .lr-b,.lr-b.on{opacity:1}
.lr-b:hover{background:rgba(255,255,255,.07);color:var(--ed-ink)}
.lr-b svg{width:15px;height:15px}
.ss-reset{margin-top:12px;width:100%;justify-content:center;gap:8px}
.ss-reset svg{width:15px;height:15px}
.pp-head{display:flex;align-items:center;justify-content:space-between;padding:4px 0 10px;border-bottom:1px solid var(--ed-line)}
.pp-kind{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600}
.pp-kind svg{width:18px;height:18px;color:var(--sel)}
.pp-act{display:flex;gap:2px}
.pp-act button{width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--ed-ink);cursor:pointer;display:grid;place-content:center}
.pp-act button:hover{background:rgba(255,255,255,.07)}
.pp-act button.del:hover{background:rgba(229,72,77,.16);color:#FF8A8F}
.pp-act svg{width:16px;height:16px}
.pp-role{display:flex;padding:3px;border-radius:9px;background:var(--ed-panel-2);border:1px solid var(--ed-line);margin-bottom:8px}
.pp-role button{flex:1;border:0;background:transparent;color:var(--ed-muted);font-size:11.5px;padding:6px 4px;border-radius:7px;cursor:pointer}
.pp-role button.on{background:rgba(255,255,255,.1);color:var(--ed-ink)}
.pp-text{font-size:18px;min-height:56px;margin-bottom:6px}
.pp-rng{display:grid;gap:5px;margin:10px 0}
.pp-rng label{display:flex;justify-content:space-between;font-size:12px;color:var(--ed-muted)}
.pp-rng label b{font:500 11.5px var(--f-mono);color:var(--ed-ink)}
.pp-rng input{width:100%;accent-color:var(--sel)}
.pp-chk{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px}
.pp-chk label{display:flex;align-items:center;gap:7px;font-size:12.5px;cursor:pointer}
.pp-chk input{accent-color:var(--sel);width:15px;height:15px}
.pp-btns{display:flex;gap:6px;margin-bottom:6px}
.pp-btns .btn{flex:1;justify-content:center;gap:6px}
.pp-btns svg{width:15px;height:15px}
.pp-sel{margin:10px 0}
.pp-sel label{display:block;font-size:12px;color:var(--ed-muted);margin-bottom:6px}
.pp-sel>div{display:flex;flex-wrap:wrap;gap:5px}
.pp-sel button{border:1px solid var(--ed-line);background:var(--ed-panel-2);color:var(--ed-ink);font-size:12px;padding:6px 10px;border-radius:8px;cursor:pointer}
.pp-sel button:hover{border-color:var(--ed-muted)}
.pp-sel button.on{border-color:var(--sel);background:var(--sel-soft);color:#D7C8FF}
.pp-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pp-num{display:flex;align-items:center;gap:6px;height:36px;padding:0 10px;border:1px solid var(--ed-line);border-radius:8px;background:var(--ed-panel-2)}
.pp-num:focus-within{border-color:var(--sel)}
.pp-num span{font:600 11px var(--f-body);color:var(--ed-muted);width:12px}
.pp-num input{flex:1;min-width:0;border:0;background:transparent;color:var(--ed-ink);font:500 13px var(--f-mono);outline:none}
.pp-num em{font-style:normal;font-size:11px;color:var(--ed-muted)}
.pp-align{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:8px 0 2px}
.pp-align button{border:1px solid var(--ed-line);background:transparent;color:var(--ed-muted);font-size:11px;padding:6px 2px;border-radius:7px;cursor:pointer}
.pp-align button:hover{color:var(--ed-ink);border-color:var(--ed-muted)}
.cvp-studio{display:block;margin-top:6px;color:var(--ed-muted)}
@media (max-width:1300px){.sb-hint{display:none}.sb-font{min-width:130px}}
/* студія: виправлення розмірів */
.ed-panel>#ly-panel{min-width:0;overflow:hidden}
.ss-body{grid-template-columns:minmax(0,1fr)}
.ss,.ss>*{min-width:0}
.pp-role button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-grid button{min-width:0}
.sb{flex-wrap:nowrap;overflow:visible}
.sb-hint{flex:1;min-width:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-kind{flex:none}
.sb-kind span{display:none}
@media (max-width:1560px){.sb-kind{font-size:0;gap:0;padding:0 8px 0 4px}.sb-kind svg{width:18px;height:18px}.sb-font{min-width:140px;max-width:160px}.sb-b.sb-w{padding:0 8px}}
@media (max-width:1380px){.sb-b.sb-w{font-size:0;gap:0}.sb-b.sb-w svg,.sb-b.sb-w img{width:17px;height:17px}.sb-b.sb-w .sb-sw{width:18px;height:18px}}
.studio-canvas{padding:14px 24px;overflow:hidden}
.studio-canvas .wrap,.ed-stage.has-film .studio-canvas .wrap{height:100%;width:auto;max-width:100%;max-height:100%;aspect-ratio:var(--ar);display:grid;place-items:center;container-type:size}
.studio-canvas .wrap>.cover{width:min(100cqw,calc(100cqh * var(--ar)));height:auto}
/* згортання стрічки дизайнів */
.cvf-toggle{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--ed-ink);font-size:12.5px;font-weight:500;cursor:pointer;padding:4px 8px;border-radius:8px}
.cvf-toggle:hover{background:rgba(255,255,255,.06)}
.cvf-toggle svg{width:15px;height:15px}
.cvf-toggle.up{padding:4px;color:var(--ed-muted);margin-right:2px}
.cvf-toggle.up svg{transform:rotate(180deg)}
.cvf-toggle i{font-style:normal;font-family:var(--f-mono);font-size:10.5px;color:var(--ed-muted)}
.cv-film.mini{display:flex;align-items:center;justify-content:space-between;padding:6px 16px}
.cvf-cur{font-size:12px;color:var(--ed-muted)}
.cvf-cur b{color:var(--ed-ink);font-weight:500}
.pp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.pp-num{min-width:0}
.pp-num input{width:100%}
.pp-align{grid-template-columns:repeat(3,minmax(0,1fr))}
.ss-tabs button{padding:10px 8px;font-size:12px}
/* полотно студії: обкладинка вписується і за шириною, і за висотою */
.ed-stage .canvas.studio-canvas{container-type:size;padding:0;place-items:center}
.studio-canvas .wrap,.ed-stage.has-film .studio-canvas .wrap{width:min(100cqw - 48px,(100cqh - 32px) * var(--ar));height:auto;max-height:none;aspect-ratio:var(--ar);container-type:normal;display:block}
.studio-canvas .wrap>.cover{width:100%}
@media (max-width:1400px){.ss-tabs button{padding:10px 6px;font-size:11.5px}}
.ed-stage .studio-canvas .wrap{min-width:0}
.pp-align{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.pp-align button{height:34px;padding:0;display:grid;place-content:center;color:var(--ed-ink)}
.pp-align button svg{width:18px;height:18px}
.pp-align button:hover{border-color:var(--sel);background:var(--sel-soft)}
/* інструмент «Текст»: клік будь-де на обкладинці */
.ly-catch{position:absolute;inset:0;z-index:950;cursor:text;background:rgba(139,92,246,.04);outline:2px dashed rgba(139,92,246,.55);outline-offset:-2px}
.ly-catch[hidden]{display:none}
.sb-place.on{background:var(--sel);color:#fff}
.ss-place{width:100%;justify-content:center;gap:8px;margin-bottom:10px}
.ss-place svg{width:16px;height:16px}
.ss-place.on{background:var(--sel);border-color:var(--sel);color:#fff}
.ly-edit::placeholder{color:#9A8D93;font-family:var(--f-body);font-size:14px}
/* статус збереження в студії */
.ly-save{flex:none;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 12px;border-radius:12px;border:1px solid var(--ed-line);background:var(--ed-panel);color:var(--ed-muted);font-size:12.5px;font-weight:500;cursor:default;transition:background .25s,border-color .25s,color .25s;white-space:nowrap}
.ly-save .ls-ic{width:20px;height:20px;border-radius:50%;display:grid;place-content:center;font-size:12px;font-weight:700;flex:none}
.ly-save[data-st=idle] .ls-ic{background:rgba(74,186,120,.16);color:#5FCB8C}
.ly-save[data-st=ok]{border-color:rgba(74,186,120,.55);background:rgba(74,186,120,.12);color:#8FE0B0}
.ly-save[data-st=ok] .ls-ic{background:#3DBE74;color:#0E1A12;animation:lsPop .45s cubic-bezier(.2,1.6,.4,1)}
.ly-save[data-st=pending]{color:var(--ed-ink)}
.ly-save[data-st=saving],.ly-save[data-st=render]{color:var(--ed-ink);border-color:rgba(139,92,246,.45)}
.ly-save[data-st=err]{border-color:rgba(229,72,77,.6);background:rgba(229,72,77,.12);color:#FF9A9E;cursor:pointer}
.ly-save[data-st=err] .ls-ic{background:#E5484D;color:#fff}
.ly-save[data-st=err] b{margin-left:4px;text-decoration:underline;font-weight:600}
.ls-dot{width:8px;height:8px;border-radius:50%;background:#E5B04A;box-shadow:0 0 0 4px rgba(229,176,74,.18)}
.ls-spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(139,92,246,.3);border-top-color:#A78BFA;animation:lsSpin .7s linear infinite}
@keyframes lsSpin{to{transform:rotate(360deg)}}
@keyframes lsPop{0%{transform:scale(.4)}100%{transform:scale(1)}}
/* коротка зелена галочка на виділеному елементі після збереження */
.ly-front.flash .ly-box.sel::after{content:"✓";position:absolute;right:-10px;top:-10px;width:22px;height:22px;border-radius:50%;background:#3DBE74;color:#0E1A12;font:700 12px/22px var(--f-body);text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.35);animation:lsFlash 1.6s ease forwards;z-index:3}
@keyframes lsFlash{0%{transform:scale(.3);opacity:0}15%{transform:scale(1.15);opacity:1}25%{transform:scale(1)}80%{opacity:1}100%{opacity:0}}
@media (max-width:1380px){.ly-save .ls-t{display:none}.ly-save{padding:0 12px}}
.ly-save{width:188px;justify-content:flex-start}
.sb>*{flex:none}
.sb>.sb-hint{flex:1 1 auto}
@media (max-width:1380px){.ly-save{width:46px;justify-content:center}}
/* збереження вручну */
.ly-save{width:auto;min-width:188px;gap:8px;padding:0 6px 0 12px}
.ly-save[data-st=dirty]{border-color:rgba(229,176,74,.55);background:rgba(229,176,74,.08);color:var(--ed-ink);padding-right:5px}
.ls-note{display:inline-flex;align-items:center;gap:9px;margin-right:4px}
.ls-save{height:34px;padding:0 16px;border:0;border-radius:9px;background:var(--sel);color:#fff;font-weight:600;font-size:13px;cursor:pointer;box-shadow:0 6px 16px -8px rgba(139,92,246,.9);transition:background .15s,transform .1s}
.ls-save:hover{background:#7C4DEB}
.ls-save:active{transform:scale(.97)}
.ls-discard{height:34px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:var(--ed-muted);font-size:12.5px;cursor:pointer}
.ls-discard:hover{color:var(--ed-ink);background:rgba(255,255,255,.06)}
.ly-save[data-st=err] .ls-save{background:#E5484D}
@media (max-width:1380px){.ly-save{min-width:0}.ly-save[data-st=dirty] .ls-t{display:none}.ls-discard{display:none}}
/* вікно «Зберегти зміни обкладинки?» */
.ly-modal{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;background:rgba(10,7,9,.55);backdrop-filter:blur(3px);animation:lmIn .18s ease}
.lm-card{width:min(440px,calc(100vw - 32px));background:#1E181B;border:1px solid #352C31;border-radius:16px;padding:24px 24px 18px;color:var(--ed-ink,#EFE8EA);box-shadow:0 30px 80px -20px rgba(0,0,0,.8);animation:lmUp .22s cubic-bezier(.2,1.2,.4,1)}
.lm-ic{width:42px;height:42px;border-radius:12px;display:grid;place-content:center;background:rgba(229,176,74,.14);color:#E5B04A;margin-bottom:14px}
.lm-ic svg{width:22px;height:22px}
.lm-card h3{margin:0 0 8px;font-family:var(--f-display);font-size:21px;font-weight:500}
.lm-card p{margin:0 0 20px;color:#A99CA2;font-size:13.5px;line-height:1.55}
.lm-act{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.lm-act button{height:38px;padding:0 14px;border-radius:10px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid #3A3035;background:transparent;color:#EFE8EA}
.lm-act button:hover{background:rgba(255,255,255,.06)}
.lm-act .lm-stay{margin-right:auto;border-color:transparent;color:#A99CA2}
.lm-act .lm-drop:hover{border-color:rgba(229,72,77,.6);color:#FF9A9E;background:rgba(229,72,77,.08)}
.lm-act .lm-save{background:#8B5CF6;border-color:#8B5CF6;color:#fff;font-weight:600}
.lm-act .lm-save:hover{background:#7C4DEB}
.lm-act .lm-save:disabled{opacity:.7}
@keyframes lmIn{from{opacity:0}}
@keyframes lmUp{from{opacity:0;transform:translateY(10px) scale(.98)}}
/* панель збереження — нагорі правої панелі */
.ed-panel>#ly-panel{grid-template-rows:auto auto minmax(0,1fr)}
#ly-panel .ly-save{width:auto;min-width:0;height:auto;min-height:48px;margin:10px 12px 0;padding:6px 6px 6px 12px;border-radius:12px;justify-content:flex-start}
#ly-panel .ly-save .ls-note{flex:1;min-width:0}
#ly-panel .ly-save .ls-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ly-panel .ly-save[data-st=dirty] .ls-t,#ly-panel .ls-discard{display:inline}
#ly-panel .ly-save[data-st=idle]{border-color:transparent;background:transparent;min-height:36px;padding-left:4px}
#ly-panel .ly-save[data-st=err] .ls-t{flex:1}
.lm-card{width:min(470px,calc(100vw - 32px))}
.lm-act{flex-wrap:nowrap}
.lm-act button{white-space:nowrap}
/* «Зберегти» — на верхній панелі над обкладинкою */
.stage-bar:has(.sb-wrap){flex-wrap:nowrap}
.stage-bar .ly-save{flex:none;width:auto;min-width:0;height:44px;padding:4px;gap:4px;border-radius:12px;background:var(--ed-panel);border:1px solid var(--ed-line)}
.stage-bar .ly-save[data-st=dirty]{border-color:rgba(229,176,74,.5);background:rgba(229,176,74,.07);padding:4px}
.ls-chip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px 0 8px;font-size:12.5px;font-weight:500;color:var(--ed-muted);white-space:nowrap}
.ls-chip b{width:20px;height:20px;border-radius:50%;display:grid;place-content:center;font-size:11px;background:rgba(74,186,120,.16);color:#5FCB8C}
.ls-chip.ok{color:#8FE0B0}
.ls-chip.ok b{background:#3DBE74;color:#0E1A12;animation:lsPop .45s cubic-bezier(.2,1.6,.4,1)}
.stage-bar .ly-save[data-st=ok]{border-color:rgba(74,186,120,.5);background:rgba(74,186,120,.1)}
.ls-chip .ls-spin{margin-right:2px}
.stage-bar .ls-save{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 16px 0 13px;white-space:nowrap}
.stage-bar .ls-save .ls-dot{width:7px;height:7px;background:#FFD58A;box-shadow:0 0 0 3px rgba(255,213,138,.25)}
.ls-undo{width:34px;height:34px;border:0;border-radius:9px;background:transparent;color:var(--ed-muted);cursor:pointer;display:grid;place-content:center}
.ls-undo:hover{background:rgba(255,255,255,.07);color:var(--ed-ink)}
.ls-undo svg{width:16px;height:16px}
.pp-act button.on{color:#C9B5FF;background:var(--sel-soft)}
.stage-bar{min-width:0}
.sb-al1{display:none}
@media (max-width:1400px){
  .sb-al3{display:none}.sb-al1{display:inline-flex}
  .sb .sb-sep,.sb .sb-kind{display:none}
  .sb-font{min-width:112px;max-width:120px;font-size:14px}
  .sb-size input{width:36px}
  .sb-b{min-width:30px;padding:0 6px}
  .stage-bar .ls-save{padding:0 12px 0 10px}
}
/* повноекранний режим студії */
.ly-fs{flex:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--ed-line);background:var(--ed-panel);color:var(--ed-ink);cursor:pointer;display:grid;place-content:center;transition:border-color .15s,background .15s}
.ly-fs:hover{border-color:var(--sel);background:var(--sel-soft)}
.ly-fs svg{width:19px;height:19px}
.ed.fs{grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:minmax(0,1fr);height:100dvh;position:fixed;inset:0;z-index:2000}
.ed.fs>.ed-top,.ed.fs>.ed-strip{display:none}
.ed.fs .ed-stage{grid-column:1;grid-row:1;grid-template-rows:auto minmax(0,1fr)}
.ed.fs .ed-panel{grid-column:2;grid-row:1}
.ed.fs .cv-film,.ed.fs .stage-foot{display:none}
.ed.fs .stage-bar{padding:12px 16px}
.ed.fs .ly-fs{background:var(--sel);border-color:var(--sel);color:#fff}
.ed-stage .studio-canvas .wrap:has(.cover.studio){width:min(100cqw - 48px,(100cqh - 32px) * var(--ar));max-width:none}
.ed.fs .studio-canvas .wrap:has(.cover.studio){width:min(100cqw - 40px,(100cqh - 24px) * var(--ar))}
/* перетягування фото на обкладинку */
.cover.studio.drop-on{outline:3px dashed var(--sel);outline-offset:4px}
.ly-box.k-photo.drop-on::before{border:3px solid #3DBE74 !important;background:rgba(61,190,116,.18)}
.ph-grid button{cursor:grab}
.ph-tip{margin:-4px 0 10px}
/* текст пишеться прямо на обкладинці — поле прозоре */
.ly-edit{background:transparent;border:0;box-shadow:none;outline:none;caret-color:#8B5CF6;padding:0 4px;inset:-2px;overflow:hidden;line-height:1.15;display:flex}
.ly-edit::selection{background:rgba(139,92,246,.3)}
.ly-edit::placeholder{color:rgba(120,110,115,.75)}
.ly-box.editing::before{border:2px dashed var(--sel) !important}
.ly-box.editing .ly-h,.ly-box.editing .ly-rot{display:none}
/* кружечок оновлення — лише якщо чекати довше ~0,35 с (швидкі зміни без блимання) */
.cover.cv-des.studio.ld::after{opacity:0;animation:spin .8s linear infinite,ldShow .2s ease .35s forwards}
@keyframes ldShow{to{opacity:1}}
/* точне значення повзунка й скидання */
.pp-rng label,.sb-pop h6{align-items:center}
.pp-v{display:inline-flex;align-items:center;gap:2px;margin-left:auto}
.pp-vin{width:48px;height:24px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ed-ink);font:500 12px var(--f-mono);text-align:right;padding:0 4px;outline:none;transition:border-color .15s,background .15s}
.pp-vin:hover{border-color:var(--ed-line)}
.pp-vin:focus{border-color:var(--sel);background:var(--ed-panel-2)}
.pp-v em{font-style:normal;font:500 11px var(--f-mono);color:var(--ed-muted);min-width:10px}
.pp-reset{width:22px;height:22px;margin-left:3px;border:0;border-radius:6px;background:var(--sel-soft);color:#C9B5FF;cursor:pointer;font-size:13px;line-height:1;display:grid;place-content:center;transition:opacity .15s,background .15s}
.pp-reset:hover{background:var(--sel);color:#fff}
.pp-reset.hide{opacity:0;pointer-events:none}
.sb-pop h6 .pp-vin{color:var(--ed-ink);letter-spacing:0;text-transform:none}
/* поля точного значення — компактніше й акуратніше */
.pp-v{gap:0}
.pp-vin{width:auto;min-width:22px;max-width:40px;field-sizing:content;height:20px;padding:0 2px;border-radius:5px;font-size:11.5px;color:var(--ed-ink);border-color:transparent}
.pp-vin:hover{border-color:transparent;background:rgba(255,255,255,.05)}
.pp-vin:focus{border-color:var(--sel);background:var(--ed-panel-2)}
.pp-v em{min-width:0;margin-left:1px;font-size:11px}
.pp-reset{width:18px;height:18px;margin-left:5px;border-radius:50%;background:transparent;color:var(--ed-muted);font-size:12px}
.pp-reset:hover{background:var(--sel-soft);color:#C9B5FF}
/* положення й розмір — компактно, в один рядок */
.pp-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.pp-num{height:30px;padding:0 6px;gap:4px;border-radius:7px;border-color:transparent;background:rgba(255,255,255,.04)}
.pp-num:hover{background:rgba(255,255,255,.07)}
.pp-num:focus-within{border-color:var(--sel);background:var(--ed-panel-2)}
.pp-num span{width:auto;font-size:10.5px}
.pp-num input{font-size:12px}
.pp-num em{display:none}
/* поле тексту в правій панелі — менший шрифт, більше вміщається */
.pp-text{font-size:14px !important;line-height:1.35;min-height:44px;padding:8px 10px;resize:vertical}
/* меню шрифтів: браузер малює (і завантажує шрифт) лише для рядків, які видно */
.pf-list button{content-visibility:auto;contain-intrinsic-size:auto 40px}
.pf-cnt{font:500 11px var(--f-mono);color:var(--ed-muted);margin:2px 4px 6px}
.pf-list{grid-template-columns:minmax(0,1fr)}
.pf-list button{min-width:0}
.pf-list button span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pf-list button small{flex:none}
/* ---------- свій колір ---------- */
.cp-btn{width:100%;display:flex;align-items:center;gap:10px;margin-top:10px;height:40px;padding:0 10px 0 8px;border:1px solid var(--ed-line);border-radius:10px;background:var(--ed-panel-2);color:var(--ed-ink);font-size:13px;font-weight:500;cursor:pointer;transition:border-color .15s,background .15s}
.cp-btn:hover,.cp-btn.open{border-color:var(--sel);background:var(--sel-soft)}
.cp-rainbow{width:24px;height:24px;border-radius:50%;flex:none;background:conic-gradient(#FF4D4D,#FFB84D,#FFF04D,#5BE36B,#4DD8FF,#5B6BFF,#C04DFF,#FF4D4D);box-shadow:inset 0 0 0 2px rgba(255,255,255,.85),0 0 0 1px rgba(0,0,0,.3)}
.cp-btn span{flex:1;text-align:left}
.cp-btn b{display:inline-flex;align-items:center;gap:6px;font:500 11.5px var(--f-mono);color:var(--ed-muted)}
.cp-btn b::before{content:"";width:14px;height:14px;border-radius:4px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.cp-btn svg{width:14px;height:14px;opacity:.7;transition:transform .15s}
.cp-btn.open svg{transform:rotate(180deg)}
.cpk{margin-top:8px;padding:10px;border:1px solid var(--ed-line);border-radius:12px;background:#1A1517;display:grid;gap:10px}
.cpk-sv{position:relative;height:150px;border-radius:9px;cursor:crosshair;touch-action:none;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,hsl(var(--hue) 100% 50%))}
.cpk-knob{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:3px solid #fff;box-shadow:0 1px 6px rgba(0,0,0,.5);pointer-events:none}
.cpk-hue{-webkit-appearance:none;appearance:none;width:100%;height:14px;border-radius:7px;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);outline:none;cursor:pointer}
.cpk-hue::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.5)}
.cpk-hue::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.5)}
.cpk-row{display:flex;align-items:center;gap:8px}
.cpk-sw{width:34px;height:34px;border-radius:8px;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.cpk-hex{flex:1;display:flex;align-items:center;gap:6px;height:34px;padding:0 10px;border:1px solid var(--ed-line);border-radius:8px;background:#141012}
.cpk-hex:focus-within{border-color:var(--sel)}
.cpk-hex span{font:600 10px var(--f-body);letter-spacing:.1em;color:var(--ed-muted)}
.cpk-hex input{flex:1;min-width:0;border:0;background:transparent;color:var(--ed-ink);font:500 13px var(--f-mono);outline:none;text-transform:uppercase}
.cpk-drop{width:34px;height:34px;flex:none;border:1px solid var(--ed-line);border-radius:8px;background:var(--ed-panel-2);color:var(--ed-ink);cursor:pointer;display:grid;place-content:center}
.cpk-drop:hover{border-color:var(--sel);background:var(--sel-soft)}
.cpk-drop svg{width:17px;height:17px}
.cpk-rec{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.cpk-rec span{font-size:11px;color:var(--ed-muted);margin-right:4px}
.cpk-rec button{width:20px;height:20px;border-radius:50%;border:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.pop-color .cpk-sv{height:130px}
.cpk,.cp-btn{box-sizing:border-box;max-width:100%;min-width:0}
.cpk{overflow:hidden}
.cpk-row,.cpk-hex{min-width:0}
.cpk-hue{box-sizing:border-box;max-width:100%;margin:0}
.cpk-drop{width:auto;padding:0 10px;gap:6px;display:inline-flex;align-items:center;font-size:12px;font-weight:500}
.cpk-drop svg{width:16px;height:16px}
/* бібліотека елементів */
.art-search{position:sticky;top:-14px;z-index:2;background:var(--ed-panel);padding:4px 0 8px}
.art-search input{width:100%;height:34px;border:1px solid var(--ed-line);border-radius:9px;background:var(--ed-panel-2);color:var(--ed-ink);padding:0 10px;font-size:12.5px;outline:none}
.art-search input:focus{border-color:var(--sel)}
.art-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.art-grid.wide{grid-template-columns:repeat(3,minmax(0,1fr))}
.art-it{aspect-ratio:1;border:1px solid transparent;border-radius:9px;background:#F4EFEA;padding:8px;cursor:pointer;display:grid;place-items:center;transition:box-shadow .12s,transform .12s}
.art-grid.wide .art-it{aspect-ratio:1.25}
.art-it:hover{box-shadow:0 0 0 2px var(--sel);transform:translateY(-1px)}
.art-it.on{box-shadow:0 0 0 2px var(--sel)}
.art-it img{max-width:100%;max-height:100%;object-fit:contain;filter:brightness(0) opacity(.82)}
.art-it img[src*="color_"]{filter:none}
.pop-icons{width:330px;max-height:420px;overflow:auto}
.pop-icons .ss{border:0;padding:6px 0}
.art-swap summary{list-style:none;cursor:pointer}
.art-swap summary::-webkit-details-marker{display:none}
.art-swap summary h4{margin:0}
.art-swap[open] summary h4{margin-bottom:8px}
/* живий елемент під час перетягування — лише сам елемент, без тла */
.ly-live{position:absolute;inset:0;pointer-events:none}
.ly-live.k-text{display:flex;align-items:center;overflow:visible}
.ly-live.k-text span{white-space:nowrap;display:inline-block}
.ly-live.k-line{inset:auto 0;top:50%;height:0;border-top:2px solid var(--c)}
.ly-live.k-photo{overflow:visible}
.ly-live.k-photo>div{position:relative;width:100%;height:100%;overflow:hidden}
.ly-live.k-photo .ph{position:absolute;inset:0;background-size:cover}
/* ---------- швидкі налаштування елемента ---------- */
.ss.qp{padding:10px 0}
.qp-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.qp-pos{padding:4px;border:1px solid var(--ed-line);border-radius:8px;background:var(--ed-panel-2);cursor:pointer;display:grid;place-items:center;gap:2px;transition:border-color .12s,background .12s}
.qp-pos:hover{border-color:var(--ed-muted)}
.qp-pos.on{border-color:var(--sel);background:var(--sel-soft)}
.qp-pos.wide{grid-column:span 2;grid-template-columns:auto auto;gap:6px;font-size:11px;color:var(--ed-ink)}
.qp-c{position:relative;display:block;width:38px;height:22px}
.qp-c b{position:absolute;top:0;bottom:0;background:#4A3F44;border-radius:1px}
.qp-c .qb{left:0;width:46%}
.qp-c .qs{left:47%;width:4%;background:#2E272A}
.qp-c .qs.on{background:var(--sel)}
.qp-c .qf{left:52%;width:48%}
.qp-c .qf.fill{background:var(--sel)}
.qp-c em{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#EFE8EA}
.qp-pos.on .qp-c em{background:#C9B5FF;box-shadow:0 0 0 2px rgba(139,92,246,.45)}
.qp-size{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.qp-size button{height:32px;border:1px solid var(--ed-line);border-radius:8px;background:var(--ed-panel-2);color:var(--ed-ink);font-size:12.5px;font-weight:600;cursor:pointer}
.qp-size button:hover{border-color:var(--ed-muted)}
.qp-size button.on{border-color:var(--sel);background:var(--sel-soft);color:#D7C8FF}
.qp-styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.qp-styles button{display:grid;place-items:center;gap:3px;padding:10px 4px 7px;border:1px solid transparent;border-radius:10px;background:#F4EFEA;color:#2A2228;cursor:pointer;transition:box-shadow .12s}
.qp-styles button:hover{box-shadow:0 0 0 2px rgba(139,92,246,.5)}
.qp-styles button.on{box-shadow:0 0 0 2px var(--sel)}
.qp-styles span{font-size:19px;line-height:1.1;white-space:nowrap}
.qp-styles small{font-size:10px;color:#8A7F84;font-weight:500}
.qp-styles.ph button{padding:12px 4px 7px}
.qp-ph{display:block;width:30px;height:30px;background:linear-gradient(135deg,#C9B79C,#7A6A5C)}
.qp-ph.f-white{outline:3px solid #fff;outline-offset:0;box-shadow:0 3px 6px rgba(0,0,0,.25)}
.qp-ph.f-polaroid{border:3px solid #fff;border-bottom-width:9px;box-sizing:border-box;box-shadow:0 3px 6px rgba(0,0,0,.25)}
.qp-ph.s-circle{border-radius:50%}
.qp-ph.s-arch{border-radius:15px 15px 2px 2px;height:34px;width:26px}
.qp-ph.s-oval{border-radius:50%;width:24px;height:32px}
.qp-cols{display:flex;flex-wrap:wrap;gap:6px}
.qp-cols button{width:26px;height:26px;border-radius:50%;border:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.qp-cols button.on{box-shadow:0 0 0 2px #161214,0 0 0 4px var(--sel)}
.pp-more-h{margin:14px 0 2px;padding-top:12px;border-top:1px dashed var(--ed-line);font:600 10.5px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ed-muted);text-align:center}
.cover.studio.dimold>img{opacity:.55;transition:opacity .1s}
/* плитки елементів — фіксованого розміру, малюнок вписується всередину */
.art-it{position:relative;overflow:hidden;min-height:0;padding:0}
.art-it img{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);max-width:none;max-height:none;object-fit:contain}
.pop-icons .art-it img,.ic-grid img{object-fit:contain}
/* ✦ 10 обкладинок для цієї книги */
.cvf-gen{flex:none;width:200px;height:98px;align-self:start;display:grid;align-content:center;gap:5px;padding:10px 14px;border:1px dashed rgba(139,92,246,.6);border-radius:8px;background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(230,139,166,.12));color:var(--ed-ink);cursor:pointer;text-align:left;transition:border-color .15s,background .15s}
.cvf-gen:hover{border-style:solid;border-color:#8B5CF6}
.cvf-gen b{font-size:13px;font-weight:600}
.cvf-gen small{font-size:11px;color:var(--ed-muted);line-height:1.35}
.cvf-gen.run{cursor:default;grid-template-columns:auto 1fr;column-gap:10px}
.cvf-gen.run small{grid-column:1/-1}
.cvf-tile.gen img{outline:1px solid rgba(139,92,246,.35)}
.cvf-tile.gen span{color:#C9B5FF}
.cvf-tile.gen.on span{color:var(--ed-accent)}
/* ---------- обкладинки на погодження ---------- */
.cvf-tile{position:relative}
.ch-heart{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;background:rgba(20,14,16,.6);color:#fff;font-style:normal;font-size:14px;line-height:24px;text-align:center;opacity:0;transition:opacity .15s,background .15s;z-index:2}
.cvf-tile:hover .ch-heart,.ch-heart.on{opacity:1}
.ch-heart:hover{background:#A93D5B}
.ch-heart.on{background:#E6487A}
.cl-list{display:grid;gap:6px;margin-bottom:10px}
.cl-card{display:flex;align-items:center;gap:10px;padding:6px;border:1px solid var(--ed-line);border-radius:10px;background:var(--ed-panel-2)}
.cl-card.on{border-color:#3DBE74;background:rgba(61,190,116,.1)}
.cl-card img{width:52px;height:52px;object-fit:cover;border-radius:5px;flex:none}
.cl-card>div{flex:1;min-width:0;display:grid;gap:2px}
.cl-card b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-card small{font-size:11px;color:var(--ed-muted)}
.cl-card p{font-size:12px;color:var(--ed-ink);font-style:italic}
.cl-act{display:flex;gap:2px}
.cl-act button{width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:var(--ed-muted);cursor:pointer}
.cl-act button:hover{background:rgba(255,255,255,.08);color:var(--ed-ink)}
.cl-add,.cl-send,.cl-apply{width:100%;justify-content:center}
.cl-apply{margin-top:8px}
.cl-chosen h4{color:#5FCB8C}
.cl-link{display:flex;gap:6px}
.cl-link input{flex:1;min-width:0;height:36px;border:1px solid var(--ed-line);border-radius:8px;background:var(--ed-panel-2);color:var(--ed-ink);padding:0 10px;font:500 12px var(--f-mono)}
.cl-row{margin-top:8px}
.cv-film.locked{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;background:rgba(61,190,116,.08);border-top:1px solid rgba(61,190,116,.4)}
.cvf-lock{font-size:13px;color:var(--ed-ink)}
.cvf-lock b{color:#8FE0B0;font-weight:600}
/* ---------- велюр / шкіра / тканина ---------- */
.cover.mat{position:relative;overflow:hidden;border-radius:2px;box-shadow:0 30px 70px -30px rgba(0,0,0,.85)}
.cover.mat img{display:block;width:100%;height:100%;object-fit:cover}
.cover.mat.ld::after{content:"";position:absolute;right:12px;bottom:12px;width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#E68BA6;animation:spin .8s linear infinite}
.mt-pres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mt-pre{border:1px solid var(--ed-line);border-radius:10px;background:var(--ed-panel-2);padding:5px 5px 6px;cursor:pointer;display:grid;gap:5px;color:var(--ed-ink);transition:border-color .15s}
.mt-pre:hover{border-color:#8B5CF6}
.mt-pre img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;background:#2a2326}
.mt-pre span{font-size:10.5px;line-height:1.25;text-align:center;color:var(--ed-muted)}
.mt-grp{margin-bottom:8px}
.mt-grp small{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ed-muted);margin-bottom:6px}
.mt-sws{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.mt-sw{aspect-ratio:1.5;border:0;border-radius:8px;background:var(--c);cursor:pointer;position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);transition:transform .12s}
.mt-sw:hover{transform:translateY(-1px)}
.mt-sw b{position:absolute;left:6px;bottom:3px;font:600 11px var(--f-mono);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.mt-sw.on{box-shadow:0 0 0 2px var(--ed-panel),0 0 0 4px #8B5CF6}
.mt-sws.named{grid-template-columns:auto 1fr;align-items:center;column-gap:10px;row-gap:6px}
.mt-sws.named .mt-sw{width:48px}
.mt-nm{font-size:13px}
.mt-seg{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.mt-seg button{flex:1;min-width:0;border:1px solid var(--ed-line);background:var(--ed-panel-2);color:var(--ed-ink);font-size:12px;padding:8px 6px;border-radius:8px;cursor:pointer;white-space:nowrap}
.mt-seg button.on{border-color:#8B5CF6;background:rgba(139,92,246,.16);color:#D7C8FF}
.mt-l{display:block;font-size:11.5px;color:var(--ed-muted);margin:8px 0 5px}
.mt-fonts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.mt-fonts button{display:grid;gap:1px;padding:7px 8px;border:1px solid var(--ed-line);border-radius:8px;background:#F4EFEA;color:#2A2228;cursor:pointer;text-align:left;overflow:hidden}
.mt-fonts button span{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-fonts button small{font-size:9.5px;color:#8A7F84}
.mt-fonts button.on{box-shadow:0 0 0 2px #8B5CF6}
.mt-chk{display:flex;gap:8px;align-items:center;font-size:12.5px;margin-top:8px}
.mat-panel .field{margin:8px 0}
/* обкладинка з матеріалу — на сторінці параметрів (світла тема) */
.mat-brief{--ed-ink:var(--ink);--ed-muted:var(--muted);--ed-line:var(--line);--ed-panel:var(--surface);--ed-panel-2:var(--surface-2)}
.mb-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);gap:24px;align-items:start}
.mb-prev{position:sticky;top:16px;display:grid;gap:10px}
.mb-ctl .cvp-head{display:none}
.mb-ctl .cvp-sec{padding:12px 0;border-bottom:1px solid var(--line)}
.mb-ctl .cvp-sec h4{display:flex;justify-content:space-between;font-size:13px;margin-bottom:10px}
.mb-ctl .cvp-sec h4 small{font-weight:400;color:var(--muted)}
.mat-brief .mt-seg button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.mat-brief .mt-sw.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.mat-brief .mt-fonts button.on{box-shadow:0 0 0 2px var(--accent)}
.mat-brief .mt-pre:hover{border-color:var(--accent)}
.mat-brief .mt-pre img{background:#e9e3df}
@media (max-width:900px){.mb-grid{grid-template-columns:1fr}.mb-prev{position:static}}
.mb-metal{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mb-m{display:grid;justify-items:center;gap:10px;padding:16px 10px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.mb-m:hover{border-color:var(--muted)}
.mb-m.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.mb-m b{font-size:14px;font-weight:600}
.mb-chip{width:92px;height:51px;border-radius:5px;box-shadow:0 6px 14px -6px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.4)}
.mb-chip.gold{background:linear-gradient(120deg,#A88442,#ECD6A0 45%,#B8934E 60%,#E3C887)}
.mb-chip.silver{background:linear-gradient(120deg,#8F9196,#F2F2F2 45%,#A4A6AA 60%,#E6E6E6)}
.mb-none{margin-top:10px;width:100%;border:1px dashed var(--line);background:transparent;border-radius:10px;padding:9px;font-size:12.5px;color:var(--muted);cursor:pointer}
.mb-none.on{border-style:solid;border-color:var(--accent);color:var(--accent)}
.mat-hide{display:none}
.cvf-tile .cvf-st{display:block;font-size:9.5px;opacity:.65;font-weight:400;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-row{display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:8px 10px;margin-top:6px;border:1px solid var(--ed-line,#333);border-radius:10px;background:transparent;color:inherit;cursor:pointer;text-align:left}.mb-row span{font-size:18px;line-height:1.2}.mb-row small{opacity:.6;font-size:11px}.mb-row:hover{border-color:var(--ed-acc,#a78bfa)}
.mb-m{color:#2A2326}
.ly-hold{position:absolute;z-index:4;pointer-events:none;white-space:pre-wrap;box-sizing:border-box;overflow:hidden;background:transparent}
.kalka-back .kb-img{position:absolute;left:0;top:0;width:50%;height:100%;object-fit:cover;transform:scaleX(-1);opacity:.32;filter:blur(.3px);mix-blend-mode:multiply}
.kf-film .cvf-tile.kg img{aspect-ratio:auto}
.dz-match{font-weight:600}.dz-match.ok{color:#3DBE74}.dz-match.mid{color:#E0A93C}.dz-match.low{color:#E05555}
.pop-fx{min-width:290px}
.pop-fx h6 label{display:flex;align-items:center;gap:7px;cursor:pointer}
.fx-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fx-b{display:grid;justify-items:center;gap:4px;padding:6px 4px;border:1px solid var(--ed-line,#333);border-radius:9px;background:transparent;color:inherit;font-size:11px;cursor:pointer}
.fx-b i{width:100%;height:16px;border-radius:5px;display:block}
.fx-b.on{border-color:var(--ed-accent,#a78bfa);box-shadow:0 0 0 2px rgba(167,139,250,.25)}
.fx-sw{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:4px}
.fx-sw button{width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,255,255,.25);cursor:pointer}
.fx-sw button.on{box-shadow:0 0 0 2px var(--ed-accent,#a78bfa)}
.fx-clear{margin-top:8px;width:100%;padding:7px;border-radius:9px;border:1px solid var(--ed-line,#333);background:transparent;color:inherit;cursor:pointer}
.pf-top{max-height:none;border-bottom:1px solid var(--ed-line,#333);margin-bottom:6px;padding-bottom:6px}
/* бібліотека дизайнів: зразок і відтворення — цілком, у своїй формі (без обрізання), в однакових клітинках */
.dz-imgs img{object-fit:contain;background:#F1ECE8;box-shadow:none;padding:6px;box-sizing:border-box;filter:drop-shadow(0 6px 10px rgba(0,0,0,.22))}
.cyr-warn{margin:6px 0 0;padding:8px 12px;border-radius:10px;background:rgba(224,169,60,.14);border:1px solid rgba(224,169,60,.55);color:#F2C46B;font-size:12.5px;line-height:1.35}
.pf-lat{font-style:normal;font-family:system-ui,sans-serif;font-size:9.5px;margin-left:6px;padding:1px 6px;border-radius:6px;background:rgba(224,169,60,.18);color:#E0A93C;vertical-align:middle}
/* бібліотека елементів */
.dz-tabs{margin:0 0 18px;gap:6px;padding:5px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;width:max-content;max-width:100%}
.dz-tabs button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:10px 18px;font-size:14px;font-weight:600}
.dz-tabs button i{margin-left:0;font-size:11px;opacity:1;background:var(--surface);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 8px}
.dz-tabs button:hover{color:var(--ink);background:var(--surface);border-color:var(--accent);box-shadow:var(--shadow)}
.dz-tabs button.on{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);box-shadow:var(--shadow)}
.dz-tabs button.on i{background:rgba(255,255,255,.22);color:inherit;border-color:transparent}
.el-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-top:20px}
.el-card{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px}
.el-card.rejected{opacity:.6}
.el-img{aspect-ratio:1;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:10px;
  background:repeating-conic-gradient(#EEE9E5 0% 25%,#FAF8F6 0% 50%) 0 0/18px 18px}
.el-img img{max-width:100%;max-height:100%;object-fit:contain}
.el-tags{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.el-tags .tg{font-size:11px;padding:2px 7px}
.el-col{width:14px;height:14px;border-radius:50%;border:1px solid var(--line);display:inline-block}
.el-src{font-size:12px}
.el-card .chips{margin-top:auto}
/* «У шаблони» — зберегти обкладинку книги як шаблон студії */
.ly-tpl{flex:none;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:12px;border:1px solid rgba(240,170,200,.45);
  background:linear-gradient(135deg,rgba(240,170,200,.16),rgba(170,140,255,.14));color:#F6D9E6;font:500 13px/1 inherit;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.ly-tpl:hover{background:linear-gradient(135deg,rgba(240,170,200,.28),rgba(170,140,255,.24));border-color:rgba(240,170,200,.8)}
.ly-tpl svg{width:16px;height:16px}
@media (max-width:1100px){.ly-tpl span{display:none}.ly-tpl{padding:0 10px}}
.tpl-box{max-width:520px}
.tpl-prev{display:block;width:100%;max-height:300px;object-fit:contain;border-radius:12px;background:var(--line);margin:4px 0 6px}

/* ================= Маркетинг — окремий «нічний» простір: глибокий індиго, кораловo-бурштинове сяйво ================= */
.mk-navwrap{margin-top:-14px;padding-top:12px;border-top:1px dashed var(--line)}
.mk-nav{width:100%;display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;border:1px solid transparent;font-weight:600;text-align:left;
  color:#fff;background:linear-gradient(120deg,#FF6B5A,#FF9A4D 55%,#FFC65C);box-shadow:0 8px 22px -10px rgba(255,120,80,.65);transition:transform .15s,box-shadow .15s}
.mk-nav:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(255,120,80,.8)}
.mk-nav svg{width:18px;height:18px;flex:none}
.mk-nav.on{background:linear-gradient(120deg,#1D1B3A,#2A2556);color:#FFC65C;border-color:rgba(255,198,92,.35);box-shadow:none}
.mk-nav.off{background:var(--surface-2);color:var(--muted);opacity:.45;box-shadow:none;cursor:not-allowed;filter:grayscale(1);font-weight:500}
.mk-nav.off:hover{transform:none}
.mk-nav .lk{margin-left:auto;width:14px;height:14px}

.app.mk{--mk-bg:#0B0C1A;--mk-panel:rgba(255,255,255,.045);--mk-panel-2:rgba(255,255,255,.075);--mk-line:rgba(255,255,255,.09);--mk-ink:#F3F1FA;--mk-muted:#9A97B8;
  --mk-hot:#FF7A59;--mk-amber:#FFC65C;--mk-cyan:#6FE3D6;--mk-violet:#A99BFF;
  --bg:var(--mk-bg);--surface:#12132A;--surface-2:#1B1C38;--ink:var(--mk-ink);--muted:var(--mk-muted);--line:var(--mk-line);--accent:var(--mk-amber);--accent-soft:rgba(255,198,92,.12);--accent-ink:#1A1206;
  background:var(--mk-bg);color:var(--mk-ink);color-scheme:dark}
.app.mk .side{background:#0F1024;border-right-color:var(--mk-line)}
.app.mk .brand b{color:#fff}
.app.mk .main{position:relative;isolation:isolate;overflow:hidden}
.app.mk .main::before{content:"";position:absolute;inset:-200px -100px auto;height:620px;z-index:-1;pointer-events:none;
  background:radial-gradient(520px 300px at 18% 40%,rgba(255,110,80,.22),transparent 70%),radial-gradient(520px 320px at 70% 20%,rgba(169,155,255,.20),transparent 70%),radial-gradient(420px 260px at 92% 60%,rgba(111,227,214,.12),transparent 70%)}
.mk-page{max-width:1240px;margin:0 auto;display:grid;gap:22px}
.mk-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 28px;align-items:end;padding:6px 0 4px}
.mk-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  background:linear-gradient(90deg,var(--mk-hot),var(--mk-amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.mk-eyebrow svg{width:15px;height:15px;color:var(--mk-amber)}
.mk-hero h1{font-family:var(--f-display);font-size:clamp(26px,3.4vw,42px);line-height:1.12;margin-top:10px;max-width:22ch;color:#fff}
.mk-sub{color:var(--mk-muted);margin-top:10px;max-width:70ch}
.mk-hero-a{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.mk-focus,.mk-run{grid-column:1/-1}
.mk-focus{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:12px;border-radius:16px;background:var(--mk-panel);border:1px solid var(--mk-line)}
.mk-focus .mk-in{flex:1 1 320px}
.mk-btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:12px;border:1px solid var(--mk-line);background:var(--mk-panel-2);color:var(--mk-ink);font-weight:600;font-size:13.5px;white-space:nowrap;text-decoration:none;transition:filter .15s,transform .15s}
.mk-btn svg{width:16px;height:16px}
.mk-btn:hover{filter:brightness(1.15)}
.mk-btn.hot{border:0;color:#1B0E05;background:linear-gradient(120deg,var(--mk-hot),#FF9A4D 55%,var(--mk-amber));box-shadow:0 10px 26px -12px rgba(255,122,89,.8)}
.mk-btn.hot:hover{transform:translateY(-1px)}
.mk-btn.ghost{background:transparent}
.mk-btn.sm{height:34px;padding:0 13px;font-size:12.5px;border-radius:10px}
.mk-btn:disabled{opacity:.7;cursor:progress;transform:none}
.mk-in,.mk-sel{background:rgba(0,0,0,.25);border:1px solid var(--mk-line);border-radius:12px;color:var(--mk-ink);padding:10px 13px;font:inherit;min-width:0}
.mk-in:focus,.mk-sel:focus{outline:none;border-color:rgba(255,198,92,.6);box-shadow:0 0 0 3px rgba(255,198,92,.14)}
.mk-sel{height:42px;padding:0 12px}
.mk-sel option{background:#15162E}
textarea.mk-in{resize:vertical;width:100%;line-height:1.5}
.mk-hint{font-size:12px;color:var(--mk-muted)}
.mk-run{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;border-radius:16px;
  background:linear-gradient(100deg,rgba(255,122,89,.16),rgba(169,155,255,.12));border:1px solid rgba(255,198,92,.28)}
.mk-run b{color:#fff}
.mk-run span:last-child{color:var(--mk-muted);font-size:13px}
.mk-run.sm{padding:10px 14px}
.mk-pulse{width:10px;height:10px;border-radius:50%;background:var(--mk-amber);box-shadow:0 0 0 0 rgba(255,198,92,.7);animation:mkPulse 1.6s infinite}
@keyframes mkPulse{70%{box-shadow:0 0 0 12px rgba(255,198,92,0)}100%{box-shadow:0 0 0 0 rgba(255,198,92,0)}}
.mk-spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(27,14,5,.3);border-top-color:#1B0E05;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.mk-pulse,.mk-spin{animation:none}}
.mk-tabs{display:flex;gap:4px;padding:5px;border-radius:14px;background:var(--mk-panel);border:1px solid var(--mk-line);overflow-x:auto;scrollbar-width:none;width:max-content;max-width:100%}
.mk-tabs button{border:0;background:transparent;color:var(--mk-muted);padding:9px 16px;border-radius:10px;font-weight:600;font-size:13.5px;display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
.mk-tabs button:hover{color:#fff}
.mk-tabs button.on{background:#fff;color:#14122B}
.mk-tabs i{font-style:normal;font-family:var(--f-mono);font-size:11px;padding:1px 7px;border-radius:999px;background:rgba(255,198,92,.18);color:var(--mk-amber)}
.mk-tabs button.on i{background:#14122B;color:var(--mk-amber)}
.mk-card{background:var(--mk-panel);border:1px solid var(--mk-line);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.mk-card h3{font-size:18px;font-weight:600;color:#fff;line-height:1.3}
.mk-card p{color:#D9D6EA;line-height:1.55}
.mk-card.glass{background:linear-gradient(160deg,rgba(255,122,89,.10),rgba(169,155,255,.07) 60%,rgba(255,255,255,.03));}
.mk-k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mk-amber);font-weight:600}
.mk-lead{font-size:15.5px;line-height:1.6;color:#ECEAF6}
.mk-h2{font-family:var(--f-display);font-size:22px;color:#fff;margin-top:8px}
.mk-grid2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px}
.mk-grid2.sm{grid-template-columns:repeat(2,minmax(0,1fr))}
.mk-cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mk-cards2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.mk-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mk-chip{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--mk-panel-2);color:#CFCBE6;border:1px solid var(--mk-line)}
.mk-chip.pl{background:rgba(169,155,255,.16);color:#CFC6FF;border-color:rgba(169,155,255,.3)}
.mk-chip.up{background:rgba(111,227,214,.13);color:var(--mk-cyan);border-color:rgba(111,227,214,.3)}
.mk-chip.lite{font-weight:500}
.mk-chip.hotc{background:rgba(255,122,89,.18);color:#FFB09A;border-color:rgba(255,122,89,.4)}
.mk-str{display:inline-flex;gap:3px;margin-left:auto}
.mk-str i{width:14px;height:5px;border-radius:3px;background:rgba(255,255,255,.12)}
.mk-str i.on{background:linear-gradient(90deg,var(--mk-hot),var(--mk-amber))}
.mk-why,.mk-hooks,.mk-us,.mk-row{display:grid;gap:5px}
.mk-why b,.mk-hooks b,.mk-us b,.mk-row b{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mk-muted);font-weight:600;display:flex;align-items:center;gap:10px}
.mk-hooks q{display:block;quotes:none;padding:8px 12px;border-left:3px solid var(--mk-amber);background:rgba(255,198,92,.06);border-radius:0 10px 10px 0;color:#fff;font-weight:500}
.mk-us{padding:12px 14px;border-radius:14px;background:rgba(111,227,214,.07);border:1px solid rgba(111,227,214,.18)}
.mk-us b{color:var(--mk-cyan)}
.mk-card-a{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.mk-card-a .mk-hint{margin-right:auto}
.mk-src{display:flex;flex-wrap:wrap;gap:6px}
.mk-src a{font-size:11.5px;color:#BDB6F5;text-decoration:none;padding:3px 9px;border-radius:8px;background:rgba(169,155,255,.10);border:1px solid rgba(169,155,255,.2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-src a:hover{color:#fff;border-color:rgba(169,155,255,.5)}
.mk-card.todo ol{margin:0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:t}
.mk-card.todo li label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;padding:9px 11px;border-radius:12px;background:rgba(255,255,255,.035)}
.mk-card.todo input{accent-color:var(--mk-hot);margin-top:3px;flex:none;width:16px;height:16px}
.mk-card.todo input:checked + span{text-decoration:line-through;color:var(--mk-muted)}
.mk-cal-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mk-card.cal{flex-direction:row;align-items:flex-start;gap:14px;padding:16px}
.mk-card.cal h4{color:#fff;font-size:14.5px;font-weight:600;margin:0 0 3px}
.mk-card.cal p{font-size:13px;color:var(--mk-muted);margin-bottom:8px}
.mk-card.cal.now{border-color:rgba(255,122,89,.45);background:linear-gradient(160deg,rgba(255,122,89,.12),rgba(255,255,255,.03))}
.mk-days{font-family:var(--f-display);font-weight:400;font-size:30px;line-height:1;color:var(--mk-amber);display:flex;flex-direction:column;align-items:center;min-width:46px}
.mk-days small{font-family:var(--f-body);font-size:11px;color:var(--mk-muted);margin-top:4px}
.mk-timeline{display:grid;gap:12px}
.mk-card.cal.row{align-items:center}
.mk-cal-t{flex:1;min-width:0}
.mk-filter{display:flex;gap:6px;flex-wrap:wrap}
.mk-filter button{border:1px solid var(--mk-line);background:transparent;color:var(--mk-muted);padding:7px 13px;border-radius:999px;font-weight:600;font-size:12.5px}
.mk-filter button.on{background:rgba(255,198,92,.14);color:var(--mk-amber);border-color:rgba(255,198,92,.4)}
.mk-comp-h{display:flex;align-items:center;gap:12px}
.mk-comp-h > div{flex:1;min-width:0}
.mk-ava{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:17px;color:#1B0E05;background:linear-gradient(135deg,var(--mk-amber),var(--mk-hot));flex:none}
.mk-card.follow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px;align-items:start}
.mk-card.follow .mk-card-a{grid-column:2}
.mk-card.new{gap:10px}
.mk-form-r{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.mk-sc{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
.mk-sc-list{display:grid;gap:8px;position:sticky;top:16px;max-height:calc(100dvh - 32px);overflow:auto}
.mk-sc-i{display:grid;gap:4px;text-align:left;padding:12px 14px;border-radius:14px;border:1px solid var(--mk-line);background:var(--mk-panel);color:var(--mk-ink)}
.mk-sc-i b{font-weight:600;font-size:13.5px;line-height:1.35}
.mk-sc-i small{color:var(--mk-muted);font-size:11.5px}
.mk-sc-i.on{border-color:rgba(255,198,92,.55);background:rgba(255,198,92,.07)}
.mk-st{justify-self:start;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:6px;background:var(--mk-panel-2);color:var(--mk-muted)}
.mk-st.work{background:rgba(255,198,92,.16);color:var(--mk-amber)}
.mk-st.shot{background:rgba(169,155,255,.18);color:#CFC6FF}
.mk-st.posted{background:rgba(111,227,214,.16);color:var(--mk-cyan)}
.mk-card.script{gap:16px}
.mk-card.script h2{font-family:var(--f-display);font-size:26px;color:#fff;margin-top:10px;line-height:1.2}
.mk-sc-top{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.mk-stsel{display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid var(--mk-line)}
.mk-stsel button{border:0;background:transparent;color:var(--mk-muted);padding:6px 10px;border-radius:8px;font-size:12px;font-weight:600}
.mk-stsel button.on{background:var(--mk-panel-2);color:#fff}
.mk-stsel button.on.work{color:var(--mk-amber)}.mk-stsel button.on.shot{color:#CFC6FF}.mk-stsel button.on.posted{color:var(--mk-cyan)}
.mk-hook{padding:16px 18px;border-radius:16px;background:linear-gradient(120deg,rgba(255,122,89,.2),rgba(255,198,92,.1));border:1px solid rgba(255,198,92,.3)}
.mk-hook span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mk-amber);font-weight:700}
.mk-hook p{font-size:20px;font-weight:600;color:#fff;margin-top:6px;line-height:1.35}
.mk-shots{border:1px solid var(--mk-line);border-radius:16px;overflow:hidden}
.mk-shot{display:grid;grid-template-columns:72px minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.2fr);gap:14px;padding:12px 14px;border-top:1px solid var(--mk-line);font-size:13.5px;color:#E3E0F2}
.mk-shot:first-child{border-top:0}
.mk-shot.h{background:rgba(255,255,255,.04);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mk-muted);font-weight:600}
.mk-shot .mono{color:var(--mk-amber)}
.mk-shot .tx{font-weight:700;color:#fff}
.mk-shot .vo{color:#C9C4E8;font-style:italic}
.mk-row ul{margin:0;padding-left:18px;display:grid;gap:4px;color:#D9D6EA}
.mk-row p.pre{white-space:pre-wrap}
.mk-hash{color:#BDB6F5;font-size:13px}
.mk-copy{margin-left:auto;border:1px solid var(--mk-line);background:transparent;color:var(--mk-amber);border-radius:8px;padding:3px 9px;font-size:11px;font-weight:600;text-transform:none;letter-spacing:0}
.mk-empty{display:grid;justify-items:center;text-align:center;gap:10px;padding:56px 20px;border-radius:22px;border:1px dashed var(--mk-line);background:var(--mk-panel)}
.mk-empty svg{width:34px;height:34px;color:var(--mk-amber)}
.mk-empty h3{font-family:var(--f-display);font-size:22px;color:#fff}
.mk-empty p{color:var(--mk-muted);max-width:52ch}
.mk-empty.sm{padding:40px 20px}
.mk-note{font-size:12.5px;color:var(--mk-muted);padding:12px 16px;border-radius:14px;border:1px solid var(--mk-line)}
@media (max-width:1180px){.mk-cards3{grid-template-columns:repeat(2,minmax(0,1fr))}.mk-cal-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.mk-sc{grid-template-columns:240px minmax(0,1fr)}}
@media (max-width:900px){.mk-hero{grid-template-columns:1fr}.mk-hero-a{justify-content:flex-start}.mk-grid2,.mk-grid2.sm,.mk-cards2,.mk-cards3,.mk-cal-strip,.mk-card.follow,.mk-sc{grid-template-columns:minmax(0,1fr)}
  .mk-card.follow .mk-card-a{grid-column:1}.mk-sc-list{position:static;max-height:none}.mk-shot{grid-template-columns:56px minmax(0,1fr)}.mk-shot span:nth-child(n+3){grid-column:2}.mk-shot.h{display:none}}
.mk-hero h1.long{font-size:clamp(22px,2.3vw,30px);max-width:40ch;line-height:1.22}
/* еко-шкіра: сріблястий металік у палітрі, попередження про напис поза шильдою */
.mt-sw.metal{background:linear-gradient(135deg,#F2F1EF,#B9B7B4 45%,#E8E7E5 60%,#A7A5A2)!important}
.sb-warn{font-size:11.5px;font-weight:600;color:#F2B45A;background:rgba(242,180,90,.12);border:1px solid rgba(242,180,90,.35);padding:4px 9px;border-radius:8px;white-space:nowrap}
/* старт сторінки: нічого не показуємо, а якщо завантаження затяглося — тихий кружечок */
.boot-ld{position:fixed;left:50%;top:45%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid rgba(150,138,143,.25);border-top-color:#E68BA6;opacity:0;animation:spin .8s linear infinite,ldShow .3s ease .6s forwards}
/* ================= Маркетинг v2: живий фон, скло, пульт, телефон-програвач, дошка роликів ================= */
@property --mkn{syntax:'<integer>';inherits:false;initial-value:0}
@property --p{syntax:'<number>';inherits:false;initial-value:0}
/* «північне сяйво» — повільно пливе */
.app.mk .main::before{inset:-260px -160px auto;height:760px;animation:mkAur 22s ease-in-out infinite alternate;filter:saturate(1.15)}
.app.mk .main::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:26px 26px;mask-image:linear-gradient(180deg,#000,transparent 520px)}
@keyframes mkAur{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(60px,30px,0) scale(1.08)}100%{transform:translate3d(-40px,10px,0) scale(1.02)}}
.app.mk .side{background:linear-gradient(180deg,#121334,#0D0E22 60%);}
/* скляні картки */
.mk-card{backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 40px -28px rgba(0,0,0,.8);transition:transform .2s,border-color .2s}
.mk-card.trend:hover,.mk-card.cal:hover{transform:translateY(-2px);border-color:rgba(255,198,92,.28)}
/* поява блоків при відкритті вкладки */
.mk-page.enter > *,.mk-page.enter .mk-kpis > *,.mk-page.enter .mk-bento > *{animation:mkUp .55s cubic-bezier(.2,.7,.2,1) both}
.mk-page.enter > :nth-child(2){animation-delay:.04s}.mk-page.enter > :nth-child(3){animation-delay:.08s}.mk-page.enter > :nth-child(4){animation-delay:.12s}.mk-page.enter > :nth-child(n+5){animation-delay:.16s}
.mk-page.enter .mk-kpis > :nth-child(2){animation-delay:.12s}.mk-page.enter .mk-kpis > :nth-child(3){animation-delay:.18s}.mk-page.enter .mk-kpis > :nth-child(4){animation-delay:.24s}
.mk-page.enter .mk-bento > :nth-child(2){animation-delay:.2s}.mk-page.enter .mk-bento > :nth-child(3){animation-delay:.28s}
@keyframes mkUp{from{opacity:0;transform:translateY(14px)}}
/* шапка */
.mk-hero h1{max-width:26ch;font-size:clamp(28px,3.6vw,46px);background:linear-gradient(100deg,#fff 40%,#FFD9C9 70%,#FFC65C);-webkit-background-clip:text;background-clip:text;color:transparent}
.mk-sub2{margin-top:10px;font-size:16px;color:#CFCBE6;max-width:60ch}
.mk-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.mk-meta span{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--mk-muted);padding:4px 10px;border-radius:999px;background:var(--mk-panel);border:1px solid var(--mk-line)}
.mk-live{width:7px;height:7px;border-radius:50%;background:var(--mk-cyan);box-shadow:0 0 0 0 rgba(111,227,214,.6);animation:mkPulse 2s infinite}
/* плитки з цифрами */
.mk-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mk-kpi{position:relative;overflow:hidden;display:grid;gap:2px;align-content:start;text-align:left;padding:18px 20px;border-radius:20px;border:1px solid var(--mk-line);background:var(--mk-panel);color:var(--mk-ink);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:transform .2s,border-color .2s}
button.mk-kpi:hover{transform:translateY(-2px);border-color:rgba(255,198,92,.35)}
.mk-kpi::before{content:"";position:absolute;right:-40px;top:-50px;width:140px;height:140px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,198,92,.22),transparent);pointer-events:none}
.mk-kpi.hot::before{background:radial-gradient(closest-side,rgba(255,122,89,.3),transparent)}
.mk-kpi.vio::before{background:radial-gradient(closest-side,rgba(169,155,255,.3),transparent)}
.mk-kpi.now{border-color:rgba(255,122,89,.45)}
.mk-kpi span{font-weight:600;font-size:14px;color:#fff}
.mk-kpi small{font-size:12px;color:var(--mk-muted)}
.mk-num{font-family:var(--f-display);font-weight:400;font-size:44px;line-height:1;color:var(--mk-amber);--mkn:var(--to);counter-reset:mkn var(--mkn)}
.mk-num::after{content:counter(mkn)}
.mk-kpi.hot .mk-num{color:#FF9A7A}.mk-kpi.vio .mk-num{color:#C9BFFF}
.mk-page.enter .mk-num{animation:mkCount 1.2s cubic-bezier(.2,.7,.2,1) both .15s}
@keyframes mkCount{from{--mkn:0}}
.mk-kpi.ring{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px}
.mk-kpi.ring > div{display:grid;gap:2px}
/* кільце прогресу */
.mk-ring{--sz:64px;width:var(--sz);height:var(--sz);flex:none;border-radius:50%;display:grid;place-items:center;transition:--p .6s ease;
  background:radial-gradient(closest-side,#15162E 76%,transparent 77% 100%),conic-gradient(var(--mk-hot),var(--mk-amber) calc(var(--p) * 1%),rgba(255,255,255,.08) 0)}
.mk-ring b{font-family:var(--f-mono);font-size:13px;color:#fff;font-weight:600}
.mk-ring.sm{--sz:48px}.mk-ring.sm b{font-size:11px}
.mk-page.enter .mk-ring{animation:mkRing 1.1s ease both .2s}
@keyframes mkRing{from{--p:0}}
/* мозаїка головної */
.mk-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:stretch}
.mk-bento .hero-tr{grid-column:span 8;display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:22px;align-items:center;padding:24px;
  background:linear-gradient(140deg,rgba(255,122,89,.16),rgba(169,155,255,.10) 55%,rgba(255,255,255,.03));border-color:rgba(255,198,92,.22)}
.mk-hero-tr-t{display:grid;gap:12px;min-width:0}
.mk-hero-tr-t .mk-k{display:inline-flex;align-items:center;gap:6px}.mk-hero-tr-t .mk-k svg{width:14px;height:14px}
.mk-bento .hero-tr h3{font-family:var(--f-display);font-weight:400;font-size:30px;line-height:1.15}
.mk-bento .todo{grid-column:span 4;grid-row:span 2}
.mk-bento .sum{grid-column:span 8}
.mk-todo-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mk-todo-h small{color:var(--mk-muted);font-size:12px}
.mk-more summary{cursor:pointer;color:var(--mk-amber);font-weight:600;font-size:13px;list-style:none;margin:-4px 0 4px}
.mk-more summary::-webkit-details-marker{display:none}
.mk-more[open] summary{display:none}
.mk-h2row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:8px}
.mk-h2row .mk-h2{margin:0}
.mk-link{border:0;background:none;color:var(--mk-amber);font-weight:600;font-size:13.5px;padding:4px 0}
.mk-link:hover{color:#fff}
/* «телефон»: кадри ролика */
.mk-phone{display:grid;gap:12px;justify-items:center}
.mk-ph-screen{position:relative;width:100%;aspect-ratio:9/16;border-radius:30px;overflow:hidden;background:#05050D;isolation:isolate;
  box-shadow:0 0 0 7px #191A30,0 0 0 8px rgba(255,255,255,.12),0 30px 60px -20px rgba(0,0,0,.9),0 0 80px -20px rgba(255,122,89,.35)}
.mk-ph-s{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.mk-ph-s.on{opacity:1;z-index:1}
.mk-ph-s .bg{position:absolute;inset:-6%;background:#22233F center/cover no-repeat;filter:saturate(1.05) brightness(.82)}
.mk-ph-s .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 28%,transparent 55%,rgba(0,0,0,.75))}
.mk-ph-s.on .bg{animation:mkKB 7s ease-out both}
.mk-phone.paused .mk-ph-s .bg,.mk-phone.paused .mk-ph-s .tx{animation-play-state:paused}
@keyframes mkKB{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.16) translate(-2%,-3%)}}
.mk-ph-s .tx{position:absolute;left:8%;right:16%;top:40%;transform:translateY(-50%);margin:0;font-weight:800;font-size:clamp(15px,1.6vw,21px);line-height:1.15;color:#fff;text-transform:uppercase;letter-spacing:.01em;
  text-shadow:0 2px 14px rgba(0,0,0,.6)}
.mk-ph-s .tx::before{content:"";position:absolute;left:-10px;top:4px;bottom:4px;width:4px;border-radius:2px;background:linear-gradient(var(--mk-hot),var(--mk-amber))}
.mk-ph-s.on .tx{animation:mkPop .5s cubic-bezier(.2,.9,.3,1.3) both .15s}
@keyframes mkPop{from{opacity:0;transform:translateY(calc(-50% + 16px)) scale(.94)}}
.mk-ph-s .vo{position:absolute;left:8%;right:18%;bottom:23%;margin:0;padding:6px 10px;border-radius:8px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;line-height:1.35;font-style:italic;width:max-content;max-width:74%}
.mk-ph-cam{position:absolute;left:10px;right:10px;top:40px;font-size:10.5px;line-height:1.35;color:rgba(255,255,255,.75);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.mk-ph-bars{position:absolute;left:10px;right:10px;top:10px;display:flex;gap:4px;z-index:3}
.mk-ph-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.mk-ph-bars b{display:block;height:100%;width:0;background:#fff;border-radius:2px}
.mk-ph-bars b.run{animation:mkBar 5s linear infinite}
@keyframes mkBar{from{width:0}to{width:100%}}
.mk-ph-top{position:absolute;left:12px;top:20px;z-index:3;font-size:11px;font-weight:700;color:#fff;opacity:.9}
.mk-phone:not(.mini) .mk-ph-top{display:none}
.mk-ph-side{position:absolute;right:10px;bottom:24%;z-index:3;display:grid;gap:14px;color:#fff}
.mk-ph-side i{width:24px;height:24px;display:block;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.mk-ph-side i:first-child{color:#FF6B81}
.mk-ph-foot{position:absolute;left:12px;right:46px;bottom:14px;z-index:3;color:#fff;display:grid;gap:4px}
.mk-ph-foot b{display:flex;align-items:center;gap:7px;font-size:12px}
.mk-ph-foot p{margin:0;font-size:11px;line-height:1.35;opacity:.85;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mk-ph-ava{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;color:#1B0E05;background:linear-gradient(135deg,var(--mk-amber),var(--mk-hot))}
.mk-phone.mini{width:100%}
.mk-phone.mini .mk-ph-screen{border-radius:24px;box-shadow:0 0 0 6px #191A30,0 0 0 7px rgba(255,255,255,.12),0 24px 50px -18px rgba(0,0,0,.9);transform:rotate(3deg)}
.mk-phone.mini .mk-ph-s .tx{font-size:15px;top:44%}
.mk-ph-ctl{display:flex;align-items:center;gap:8px;width:100%;padding:6px;border-radius:14px;background:var(--mk-panel);border:1px solid var(--mk-line)}
.mk-ph-b{width:36px;height:36px;border-radius:10px;border:0;background:var(--mk-panel-2);color:#fff;font-size:13px;display:grid;place-items:center}
.mk-ph-b:hover{background:rgba(255,198,92,.2);color:var(--mk-amber)}
#mk-play{background:linear-gradient(120deg,var(--mk-hot),var(--mk-amber));color:#1B0E05}
.mk-ph-ctl .mono{font-family:var(--f-mono);font-size:12px;color:#fff}
.mk-ph-ctl small{margin-left:auto;padding-right:6px;font-size:11px;color:var(--mk-muted)}
@media (prefers-reduced-motion:reduce){.app.mk .main::before,.mk-ph-s.on .bg,.mk-ph-bars b.run,.mk-page.enter *{animation:none!important}}
/* сценарій: телефон ліворуч + деталі */
.mk-new-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.mk-new-h .mk-k{display:inline-flex;align-items:center;gap:6px}.mk-new-h svg{width:14px;height:14px}
.mk-sc2{display:grid;grid-template-columns:320px minmax(0,1fr);gap:22px;align-items:start;scroll-margin-top:16px}
.mk-ph-wrap{position:sticky;top:16px}
.mk-shot[data-i]{cursor:pointer;transition:background .2s}
.mk-shot[data-i]:hover{background:rgba(255,255,255,.03)}
.mk-shot.on{background:linear-gradient(90deg,rgba(255,198,92,.13),rgba(255,198,92,.02));box-shadow:inset 3px 0 0 var(--mk-amber)}
/* дошка роликів */
.mk-kb{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mk-kb-col{display:grid;align-content:start;gap:8px;min-height:120px;padding:10px;border-radius:18px;background:rgba(255,255,255,.025);border:1px dashed var(--mk-line);transition:background .15s,border-color .15s}
.mk-kb-col header{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 4px}
.mk-kb-col header i{font-style:normal;font-family:var(--f-mono);font-size:11px;color:var(--mk-muted)}
.mk-kb-col.over{background:rgba(255,198,92,.08);border-color:rgba(255,198,92,.5);border-style:solid}
.mk-kb-0{margin:0;padding:18px 6px;text-align:center;font-size:12px;color:rgba(154,151,184,.6)}
.mk-kb-card{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center;text-align:left;padding:8px;border-radius:14px;border:1px solid var(--mk-line);background:var(--mk-panel-2);color:var(--mk-ink);cursor:grab;transition:transform .15s,border-color .15s,box-shadow .15s}
.mk-kb-card:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.2)}
.mk-kb-card.on{border-color:rgba(255,198,92,.6);box-shadow:0 0 0 3px rgba(255,198,92,.12)}
.mk-kb-card.drag{opacity:.45;cursor:grabbing}
.mk-kb-th{width:44px;aspect-ratio:9/16;border-radius:8px;background:#22233F center/cover no-repeat;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.mk-kb-tx{display:grid;gap:3px;min-width:0}
.mk-kb-tx b{font-size:12.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mk-kb-tx small{font-size:11px;color:var(--mk-muted)}
@media (max-width:1180px){.mk-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.mk-bento .hero-tr,.mk-bento .sum{grid-column:span 12}.mk-bento .todo{grid-column:span 12;grid-row:auto}.mk-sc2{grid-template-columns:260px minmax(0,1fr)}}
@media (max-width:900px){.mk-kpis,.mk-kb{grid-template-columns:repeat(2,minmax(0,1fr))}.mk-bento .hero-tr{grid-template-columns:minmax(0,1fr)}.mk-phone.mini{display:none}.mk-sc2{grid-template-columns:minmax(0,1fr)}.mk-ph-wrap{position:static;max-width:300px;margin:0 auto;width:100%}}
@media (max-width:560px){.mk-kpis,.mk-kb{grid-template-columns:minmax(0,1fr)}.mk-num{font-size:36px}}
/* ================= Маркетинг v3: платформи, пульс трендів, «Запитати маркетолога», карта ринку, стрічка календаря ================= */
.mk-chip.pl{gap:6px}
.mk-chip.pl svg,.mk-filter svg{width:13px;height:13px;flex:none}
.mk-chip.pl.tiktok{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.18)}
.mk-chip.pl.tiktok svg{filter:drop-shadow(1px 0 0 #25F4EE) drop-shadow(-1px 0 0 #FE2C55)}
.mk-chip.pl.insta{background:linear-gradient(120deg,rgba(254,218,117,.16),rgba(214,41,118,.2),rgba(150,47,191,.2));color:#FFD3E6;border-color:rgba(214,41,118,.35)}
.mk-chip.pl.yt{background:rgba(255,0,0,.14);color:#FF9C9C;border-color:rgba(255,60,60,.35)}
.mk-chip.pl.pin{background:rgba(230,0,35,.14);color:#FF9DAE;border-color:rgba(230,0,35,.35)}
.mk-chip.pl.fb,.mk-chip.pl.meta{background:rgba(24,119,242,.16);color:#A9CBFF;border-color:rgba(24,119,242,.38)}
.mk-pulse-w{margin-left:auto;display:inline-flex;align-items:center;gap:8px;color:var(--mk-muted)}
.mk-pulse-w svg{width:84px;height:26px;overflow:visible}
.mk-pulse-w em{font-style:normal;font-size:11px;font-weight:700;white-space:nowrap}
.mk-pulse-w.up{color:var(--mk-cyan)}.mk-pulse-w.peak{color:var(--mk-amber)}.mk-pulse-w.flat{color:#A9A6C6}
.mk-card.trend.hot{border-color:rgba(255,122,89,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(255,122,89,.12),0 18px 50px -24px rgba(255,122,89,.55)}
.mk-card.trend.hot::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:radial-gradient(380px 160px at 0 0,rgba(255,122,89,.16),transparent 70%)}
.mk-card.trend{position:relative}
.mk-filter button{display:inline-flex;align-items:center;gap:7px}
.mk-filter button i{font-style:normal;font-family:var(--f-mono);font-size:10.5px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.08)}
/* «Запитати маркетолога» */
.mk-ask{display:grid;gap:10px}
.mk-ask-bar{position:relative;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border-radius:18px;background:rgba(10,10,26,.55);border:1px solid rgba(169,155,255,.28);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 0 0 0 rgba(255,198,92,0),0 16px 40px -26px rgba(169,155,255,.7);transition:border-color .2s,box-shadow .2s}
.mk-ask-bar:focus-within{border-color:rgba(255,198,92,.6);box-shadow:0 0 0 4px rgba(255,198,92,.1),0 16px 40px -20px rgba(255,122,89,.6)}
.mk-ask-bar::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:.7;
  background:linear-gradient(110deg,rgba(255,122,89,.6),rgba(169,155,255,.5),rgba(111,227,214,.5),rgba(255,122,89,.6));background-size:300% 100%;animation:mkSheen 8s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@keyframes mkSheen{to{background-position:300% 0}}
.mk-ask-ic svg{width:20px;height:20px;color:var(--mk-amber);display:block}
.mk-ask-in{flex:1;min-width:0;height:40px;border:0;background:transparent;color:#fff;font:inherit;font-size:15px;outline:none}
.mk-ask-in::placeholder{color:#8784A8}
.mk-ask-bar kbd{font-family:var(--f-mono);font-size:10.5px;color:var(--mk-muted);padding:3px 7px;border-radius:6px;border:1px solid var(--mk-line);white-space:nowrap}
.mk-ask-sug{display:flex;flex-wrap:wrap;gap:6px}
.mk-ask-sug button{border:1px solid var(--mk-line);background:rgba(255,255,255,.03);color:#CFCBE6;padding:6px 12px;border-radius:999px;font-size:12.5px;transition:all .15s}
.mk-ask-sug button:hover{border-color:rgba(255,198,92,.45);color:#fff;background:rgba(255,198,92,.08)}
.mk-ask-sug button.old{color:var(--mk-muted);border-style:dashed}
.mk-ans{display:grid;gap:12px;padding:20px 22px;border-radius:20px;background:linear-gradient(150deg,rgba(169,155,255,.14),rgba(111,227,214,.06) 60%,rgba(255,255,255,.03));border:1px solid rgba(169,155,255,.3);animation:mkUp .45s cubic-bezier(.2,.7,.2,1) both}
.mk-ans p{color:#E6E3F5;line-height:1.6;margin:0}
.mk-ans-h{display:flex;gap:12px;align-items:flex-start}
.mk-ans-h > div{flex:1;min-width:0}
.mk-ans-h h3{font-family:var(--f-display);font-weight:400;font-size:22px;color:#fff;line-height:1.2}
.mk-ans-h small{color:var(--mk-muted);font-size:12.5px}
.mk-ans-ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--mk-violet),var(--mk-cyan));color:#14122B;flex:none}
.mk-ans-ic svg{width:18px;height:18px}
.mk-x{border:0;background:rgba(255,255,255,.06);color:var(--mk-muted);width:30px;height:30px;border-radius:9px;font-size:18px;line-height:1}
.mk-x:hover{color:#fff;background:rgba(255,255,255,.12)}
.mk-steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:6px}
.mk-steps li{counter-increment:s;display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start;color:#ECEAF6;padding:8px 10px;border-radius:12px;background:rgba(0,0,0,.18)}
.mk-steps li::before{content:counter(s);width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font-family:var(--f-mono);font-size:12px;font-weight:700;color:#14122B;background:var(--mk-cyan)}
/* карта ринку */
.mk-map0{flex-direction:row;align-items:center;gap:16px;background:linear-gradient(120deg,rgba(169,155,255,.12),rgba(255,255,255,.03))}
.mk-map0 > div:nth-child(2){flex:1}
.mk-map0-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(169,155,255,.18);color:var(--mk-violet);flex:none}
.mk-map0-ic svg{width:22px;height:22px}
.mk-map-h{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}
.mk-map-plot{position:relative;height:420px;border-radius:16px;margin:4px 0 0 22px;border:1px solid var(--mk-line);overflow:visible;
  background:linear-gradient(90deg,transparent calc(50% - .5px),rgba(255,255,255,.08) 0 calc(50% + .5px),transparent 0),linear-gradient(0deg,transparent calc(50% - .5px),rgba(255,255,255,.08) 0 calc(50% + .5px),transparent 0),
    radial-gradient(60% 60% at 0 0,rgba(111,227,214,.10),transparent),radial-gradient(60% 60% at 100% 0,rgba(255,198,92,.08),transparent),rgba(0,0,0,.18)}
.mk-map-plot .q{position:absolute;transform:translate(-50%,-50%);font-style:normal;font-family:var(--f-display);font-size:20px;color:rgba(154,151,184,.16);white-space:nowrap;pointer-events:none}
.mk-map-plot .q.tl{left:25%;top:25%;color:rgba(111,227,214,.3)}.mk-map-plot .q.tr{left:75%;top:25%}.mk-map-plot .q.bl{left:25%;top:75%}.mk-map-plot .q.br{left:75%;top:75%}
.mk-map-plot .ax{position:absolute;font-size:11px;color:var(--mk-muted);white-space:nowrap}
.mk-map-plot .ax b{color:var(--mk-amber)}
.mk-map-plot .ax.x{left:50%;bottom:-22px;transform:translateX(-50%)}
.mk-map-plot .ax.y{left:-14px;top:50%;transform:translate(-50%,-50%) rotate(-90deg)}
.mk-dot{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;z-index:1;outline:none;cursor:default}
.mk-dot i{width:14px;height:14px;border-radius:50%;background:#BDB6F5;box-shadow:0 0 0 4px rgba(169,155,255,.18);transition:transform .15s}
.mk-dot > b{font-size:11.5px;font-weight:600;color:#DCD8F2;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.mk-dot.us{z-index:2}
.mk-dot.us i{width:20px;height:20px;background:linear-gradient(135deg,var(--mk-amber),var(--mk-hot));box-shadow:0 0 0 6px rgba(255,122,89,.2),0 0 30px rgba(255,122,89,.7);animation:mkPulse 2.4s infinite}
.mk-dot.us > b{color:var(--mk-amber);font-size:12.5px}
.mk-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);width:220px;padding:10px 12px;border-radius:12px;background:#1B1C38;border:1px solid var(--mk-line);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.9);font-size:12px;line-height:1.45;color:#D9D6EA;display:grid;gap:4px;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.mk-tip b{color:#fff;font-size:13px}.mk-tip small{color:var(--mk-muted);font-family:var(--f-mono);font-size:10.5px}
.mk-dot:hover,.mk-dot:focus{z-index:5}
.mk-dot:hover i,.mk-dot:focus i{transform:scale(1.25)}
.mk-dot:hover .mk-tip,.mk-dot:focus .mk-tip{opacity:1;transform:translateX(-50%)}
/* стрічка календаря */
.mk-tl-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.mk-tl-h .lg{display:inline-block;vertical-align:middle;margin:0 6px 0 12px}
.mk-tl-h .lg.band{width:18px;height:8px;border-radius:4px;background:linear-gradient(90deg,rgba(169,155,255,.5),rgba(255,198,92,.6))}
.mk-tl-h .lg.dot{width:9px;height:9px;transform:rotate(45deg);background:var(--mk-amber)}
.mk-tl-body{position:relative;height:calc(var(--lanes) * 44px + 46px);margin-top:4px;border-radius:14px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px calc(100% / 17.14));border:1px solid var(--mk-line);overflow:hidden}
.mk-tl-m{position:absolute;top:0;bottom:0;border-left:1px dashed rgba(255,255,255,.12);padding:6px 8px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mk-muted);font-weight:600}
.mk-tl-now{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--mk-hot);box-shadow:0 0 12px var(--mk-hot)}
.mk-tl-now b{position:absolute;left:6px;top:6px;font-size:10.5px;color:var(--mk-hot);white-space:nowrap;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.mk-tl-band{position:absolute;top:calc(var(--lane) * 44px + 32px);height:34px;min-width:0;display:flex;align-items:center;gap:8px;padding:0 10px;border-radius:10px;border:1px solid rgba(169,155,255,.35);
  background:linear-gradient(90deg,rgba(169,155,255,.22),rgba(255,198,92,.22));color:#fff;font-size:12px;font-weight:600;text-align:left;overflow:hidden;transition:filter .15s,transform .15s}
.mk-tl-band:hover{filter:brightness(1.2);transform:translateY(-1px);z-index:2}
.mk-tl-band span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.mk-tl-band em{font-style:normal;font-family:var(--f-mono);font-size:10.5px;color:var(--mk-amber);flex:none}
.mk-tl-band.now{border-color:rgba(255,122,89,.6);background:linear-gradient(90deg,rgba(255,122,89,.35),rgba(255,198,92,.3));box-shadow:0 0 24px -6px rgba(255,122,89,.7)}
.mk-tl-dot{position:absolute;top:calc(var(--lane) * 44px + 44px);width:11px;height:11px;margin-left:-6px;transform:rotate(45deg);background:var(--mk-amber);box-shadow:0 0 0 3px rgba(11,12,26,.9);z-index:3;pointer-events:none}
.mk-card.cal.row.flash{animation:mkFlash 1.4s ease}
@keyframes mkFlash{0%,40%{border-color:var(--mk-amber);box-shadow:0 0 0 4px rgba(255,198,92,.2)}}
@media (max-width:900px){.mk-map-plot{height:340px}.mk-map0{flex-direction:column;align-items:flex-start}.mk-ask-bar kbd{display:none}.mk-pulse-w svg{width:60px}}
@media (prefers-reduced-motion:reduce){.mk-ask-bar::before,.mk-dot.us i{animation:none}}

/* ---------- Конкуренти v2: значки, вільна ніша, фільтр, нові картки ---------- */
.mk-map-t{margin:4px 0 0;font-family:var(--f-display);font-size:22px;line-height:1.3;font-weight:500;color:#fff;max-width:780px}
.mk-map-more summary{cursor:pointer;font-size:12.5px;color:var(--mk-violet);list-style:none;width:max-content}
.mk-map-more summary::-webkit-details-marker{display:none}
.mk-map-more summary::after{content:" ↓"}.mk-map-more[open] summary::after{content:" ↑"}
.mk-map-more p{margin:8px 0 0;color:#CFCBE6;font-size:14px;line-height:1.55;max-width:820px}
.mk-map-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.mk-fchips{display:flex;gap:6px;padding:4px;border-radius:999px;background:rgba(0,0,0,.22);border:1px solid var(--mk-line)}
.mk-fchip{display:inline-flex;align-items:center;gap:7px;border:0;background:none;color:#CFCBE6;font:600 12.5px var(--f-body);padding:6px 12px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s}
.mk-fchip em{font-style:normal;font-family:var(--f-mono);font-size:11px;color:var(--mk-muted)}
.mk-fchip i{width:8px;height:8px;border-radius:50%;background:linear-gradient(90deg,var(--mk-cyan) 50%,var(--mk-violet) 50%)}
.mk-fchip.ua i{background:var(--mk-cyan)}.mk-fchip.world i{background:var(--mk-violet)}
.mk-fchip:hover{color:#fff}.mk-fchip.on{background:rgba(255,255,255,.1);color:#fff}
.mk-legend{display:flex;gap:14px;font-size:11.5px;color:var(--mk-muted);flex-wrap:wrap}
.mk-legend span{display:inline-flex;align-items:center;gap:6px}
i.lg{width:10px;height:10px;border-radius:50%;display:inline-block}
i.lg.us{background:linear-gradient(135deg,var(--mk-amber),var(--mk-hot))}
i.lg.hi{border:2px solid var(--mk-hot);width:12px;height:12px}
i.lg.gap{border-radius:3px;border:1.5px dashed var(--mk-amber);background:rgba(255,198,92,.12)}
.mk-map-g{display:grid;grid-template-columns:26px minmax(0,1fr);grid-template-rows:auto auto;gap:6px 6px}
.mk-map-g .mk-map-plot{margin:0}
.mk-ax-y{display:flex;flex-direction:row;justify-content:space-between;align-items:center;writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;color:var(--mk-muted);padding:6px 0}
.mk-ax-x{display:flex;justify-content:space-between;font-size:11px;color:var(--mk-muted);padding:0 6px}
.mk-ax-y em,.mk-ax-x em{font-style:normal;font-family:var(--f-mono);letter-spacing:.14em;text-transform:uppercase;font-size:10px;color:rgba(154,151,184,.6)}
.mk-map-plot .q{transform:none;font-family:var(--f-body);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(154,151,184,.42)}
.mk-map-plot .q.tl{left:14px;top:12px;color:rgba(111,227,214,.55)}.mk-map-plot .q.tr{left:auto;right:14px;top:12px}
.mk-map-plot .q.bl{left:14px;top:auto;bottom:12px}.mk-map-plot .q.br{left:auto;right:14px;top:auto;bottom:12px}
.mk-gap{position:absolute;border-radius:14px;border:1.5px dashed rgba(255,198,92,.7);background:radial-gradient(closest-side,rgba(255,198,92,.16),rgba(255,198,92,.05));
  box-shadow:0 0 40px -6px rgba(255,198,92,.35) inset;pointer-events:none;animation:mkGap 3.2s ease-in-out infinite}
.mk-gap span{position:absolute;left:10px;bottom:8px;font-size:11.5px;font-weight:700;color:var(--mk-amber);white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.8)}
@keyframes mkGap{50%{border-color:rgba(255,198,92,.35);box-shadow:0 0 60px -4px rgba(255,198,92,.5) inset}}
.mk-arrow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1}
.mk-arrow .ln{fill:none;stroke:var(--mk-amber);stroke-width:2;stroke-dasharray:6 6;stroke-linecap:round;animation:mkDash 1.2s linear infinite}
.mk-arrow .hd{fill:none;stroke:var(--mk-amber);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mk-arrow text{fill:var(--mk-amber);font:600 11px var(--f-body);text-anchor:middle;paint-order:stroke;stroke:rgba(10,10,25,.85);stroke-width:4px}
@keyframes mkDash{to{stroke-dashoffset:-12}}
/* значки конкурентів: м'ятні — Україна, бузкові — світ, коралове кільце — висока загроза */
.mk-ava2{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 10px var(--f-body);letter-spacing:.02em;color:#0E1022;flex:none;
  background:var(--mk-violet);box-shadow:0 0 0 3px rgba(169,155,255,.18);transition:transform .15s,box-shadow .15s}
.mk-ava2.ua{background:var(--mk-cyan);box-shadow:0 0 0 3px rgba(111,227,214,.18)}
.mk-ava2.thr-high{box-shadow:0 0 0 2px #14152B,0 0 0 4px var(--mk-hot),0 0 18px rgba(255,122,89,.45)}
.mk-ava2.thr-mid{box-shadow:0 0 0 2px #14152B,0 0 0 3.5px rgba(255,198,92,.75)}
.mk-ava2.big{width:46px;height:46px;font-size:15px;border-radius:14px}
button.mk-dot{border:0;background:none;padding:0;font:inherit;cursor:pointer}
.mk-dot{transition:opacity .2s,filter .2s}
.mk-dot.off{opacity:.14;filter:grayscale(1);pointer-events:none}
.mk-dot:hover .mk-ava2,.mk-dot:focus-visible .mk-ava2,.mk-dot.hl .mk-ava2{transform:scale(1.22)}
.mk-dot.hl{z-index:6}.mk-dot.hl > b{color:#fff}
.mk-dot.us i{width:30px;height:30px;display:grid;place-items:center;font:700 13px var(--f-display);color:#1B0E05;font-style:normal}
.mk-tip em{font-style:normal;font-size:11px;color:var(--mk-violet)}
/* картки */
.mk-card.comp{transition:border-color .2s,transform .2s}
.mk-card.comp:hover{border-color:rgba(255,255,255,.18)}
.mk-card.comp.thr-high{border-color:rgba(255,122,89,.35);background:linear-gradient(160deg,rgba(255,122,89,.08),transparent 45%),var(--mk-panel,rgba(255,255,255,.04))}
.mk-card.comp.flash{animation:mkFlash 1.4s ease}
.mk-comp-m{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mk-thr{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px}
.mk-thr.high{background:rgba(255,122,89,.16);color:#FF9C80}.mk-thr.mid{background:rgba(255,198,92,.13);color:var(--mk-amber)}.mk-thr.low{background:rgba(255,255,255,.06);color:var(--mk-muted)}
.mk-chip.ua{color:var(--mk-cyan);border-color:rgba(111,227,214,.3)}.mk-chip.world{color:var(--mk-violet);border-color:rgba(169,155,255,.3)}
.mk-plic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.06);color:#CFCBE6}
.mk-plic svg{width:14px;height:14px}
.mk-plic.insta{color:#F58FB8}.mk-plic.tiktok{color:#7FF0E8}.mk-plic.fb{color:#8DB3FF}.mk-plic.yt{color:#FF7D7D}.mk-plic.pin{color:#FF8A8A}
.mk-comp-sc{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mk-sc5{display:flex;align-items:center;gap:4px;padding:8px 10px;border-radius:12px;background:rgba(0,0,0,.2)}
.mk-sc5 em{font-style:normal;font-size:11.5px;color:var(--mk-muted);margin-right:auto}
.mk-sc5 i{width:16px;height:6px;border-radius:3px;background:rgba(255,255,255,.1)}
.mk-sc5 i.on{background:linear-gradient(90deg,var(--mk-amber),var(--mk-hot))}
.mk-comp-note{margin:0;font-size:13.5px;line-height:1.5;color:#D9D6EA}
.mk-comp-x{display:none;gap:12px}.mk-comp-x.open{display:grid;animation:mkIn .25s ease}
@keyframes mkIn{from{opacity:0;transform:translateY(-4px)}}
.mk-comp-more{align-self:flex-start;border:0;background:none;padding:0;color:var(--mk-violet);font:600 12.5px var(--f-body);cursor:pointer}
.mk-comp-more:hover{color:#fff}
@media (max-width:900px){.mk-map-t{font-size:18px}.mk-map-plot .q{display:none}.mk-legend{display:none}}
@media (max-width:560px){.mk-comp-sc{grid-template-columns:1fr}.mk-dot > b{font-size:10px}.mk-ava2{width:22px;height:22px;font-size:9px}}
@media (prefers-reduced-motion:reduce){.mk-gap,.mk-arrow .ln{animation:none}}
.mk-cards2{align-items:start}
.mk-page{grid-template-columns:minmax(0,1fr)}
@media (max-width:560px){.mk-dot:not(.us) > b{display:none}.mk-gap span{font-size:10px;left:6px;bottom:5px}.mk-tip{width:180px}}
/* кнопки розвороту — прямо над ним, ~2 см від верхнього краю */
.canvas .wrap.sp-wrap{width:min(100%,1100px,calc((100dvh - 290px)*2))}
.canvas:has(> .sp-wrap){place-items:start center;padding-top:28px}   /* книга вище: кнопки й розворот — від верху полотна */
.sp-tools{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.sp-tools .btn{height:36px;padding:0 14px;font-size:13px;background:rgba(255,255,255,.04);border:1px solid var(--ed-line);backdrop-filter:blur(6px)}
.sp-tools .btn svg{width:15px;height:15px}
.sp-tools .btn:not(:disabled):hover{border-color:rgba(230,139,166,.6)}
.sp-tools .btn.on{border-color:var(--ed-gold);color:var(--ed-gold)}
.sp-wrap .rz-tip{top:0}
.sp-tools .btn.sp-flip{width:36px;padding:0;justify-content:center}.sp-tools .btn.sp-flip svg{width:18px;height:18px}
/* фото з білою рамкою поверх панорами */
.spread .slot.bd{box-shadow:inset 0 0 0 .22cqi #fff}
.canvas .slot.bd.sel{box-shadow:inset 0 0 0 .22cqi #fff,inset 0 0 0 calc(.22cqi + 3px) var(--ed-accent)}
.tpl .mini i.bd{box-shadow:0 0 0 1.5px #fff;z-index:1}
/* кадрування: рамка із сіткою стоїть, фото під нею тягнеться; що поза рамкою — затемнено (обріжеться) */
.cropper{position:relative;border-radius:10px;overflow:hidden;cursor:grab;touch-action:none;user-select:none;background:#0B0809;height:260px}
.cropper.drag{cursor:grabbing}
.cr-img{position:absolute;background-size:100% 100%;background-repeat:no-repeat;will-change:left,top}
.cr-box{position:absolute;box-shadow:0 0 0 2px var(--ed-gold);border-radius:1px;pointer-events:none}
.cr-dim{position:absolute;background:rgba(11,8,9,.62);pointer-events:none;transition:background .15s}
.cropper.drag .cr-dim{background:rgba(11,8,9,.45)}
.cr-box .g{position:absolute;background:rgba(255,255,255,.5)}
.cr-box .g.v1,.cr-box .g.v2{top:0;bottom:0;width:1px}.cr-box .g.v1{left:33.333%}.cr-box .g.v2{left:66.666%}
.cr-box .g.h1,.cr-box .g.h2{left:0;right:0;height:1px}.cr-box .g.h1{top:33.333%}.cr-box .g.h2{top:66.666%}

.pbody{grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content}   /* рядки не стискаються — панель прокручується (інакше блок з overflow:hidden «сплющувався») */
/* вкладка «Фото»: вільні — яскраві з рамкою, ті, що в книзі, — притушені з номером розвороту */
.pool button.free{box-shadow:0 0 0 2px var(--ed-accent);cursor:grab}
.pool button.free:hover{box-shadow:0 0 0 2px var(--ed-accent),0 6px 16px -6px rgba(230,139,166,.7);transform:translateY(-1px)}
.pool .pf-free{position:absolute;left:4px;top:4px;font-size:9px;font-weight:700;padding:2px 6px;border-radius:999px;background:var(--ed-accent);color:#1A0E12}
.pool button.used{cursor:pointer}
.pool button.used .thumb{opacity:.38;filter:saturate(.45);transition:opacity .15s,filter .15s}
.pool button.used:hover .thumb{opacity:.75;filter:none}
.pool button.used.here .thumb{opacity:.6}
.pool .pf-n{position:absolute;right:4px;top:4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:rgba(14,12,13,.78);color:var(--ed-ink);font:600 10px/18px var(--f-mono);text-align:center}
.pool button.used.here .pf-n{background:var(--ed-gold);color:#1A0E12}
.pf-cnt{color:var(--ed-accent);font-family:var(--f-body)}
.ptabs .pt-free{display:inline-block;margin-left:6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--ed-accent);color:#1A0E12;font:700 10px/16px var(--f-body);font-style:normal;vertical-align:1px}
/* перетягування розворотів у лівій стрічці */
.st-item[data-drag="spread"]{cursor:grab}
.st-item.dragging{opacity:.35;outline:1.5px dashed var(--ed-muted);outline-offset:-2px}
.st-item.dragging .lab span:first-child::after{content:" · переміщується";color:var(--ed-accent)}
.st-ph{height:72px;margin:2px 0;border-radius:10px;border:2px dashed var(--ed-accent);background:rgba(230,139,166,.12);display:grid;place-content:center;gap:2px;text-align:center;
  color:var(--ed-accent);font-size:11.5px;pointer-events:none;animation:stPh .18s ease-out}
.st-ph b{font-weight:700}.st-ph span{font-family:var(--f-mono);font-size:10.5px;color:var(--ed-ink);opacity:.8}
@keyframes stPh{from{height:0;opacity:0}}
/* шпаргалка гарячих клавіш */
.et-keys{font-size:17px;line-height:1}
.keys-ov{position:fixed;inset:0;z-index:200;background:rgba(8,6,7,.62);display:grid;place-items:center;padding:16px;animation:mkIn .15s ease}
.keys-box{width:min(560px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--ed-panel);border:1px solid var(--ed-line);border-radius:16px;padding:18px 20px;color:var(--ed-ink);box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.keys-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.keys-h h3{margin:0;font-family:var(--f-display);font-size:22px;font-weight:500}
.keys-l{display:grid}
.keys-l > div{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:8px 0;border-bottom:1px solid var(--ed-line)}
.keys-l > div:last-child{border-bottom:0}
.keys-l span{display:flex;flex-wrap:wrap;gap:4px;align-items:center;color:var(--ed-muted);font-size:12px}
.keys-l i{font-style:normal;margin:0 4px;color:var(--ed-muted)}
.keys-l b{font-weight:500;font-size:13px;text-align:right}
.keys-l kbd{font:600 11.5px var(--f-mono);padding:3px 7px;border-radius:6px;background:var(--ed-panel-2);border:1px solid var(--ed-line);border-bottom-width:2px;color:var(--ed-ink)}
.sp-tools .btn.sp-alt{width:36px;padding:0;justify-content:center;font-size:17px}
/* чорно-біле фото */
.cropper.bw .cr-img{filter:grayscale(1)}
.tone-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tone-row > span{color:var(--ed-muted);font-size:13px}
/* перемикач «Кольорове / Чорно-біле» — лише в темній панелі конструктора (на світлих сторінках .seg — свій, світлий) */
.tone-row .seg{display:inline-flex;padding:3px;border-radius:10px;background:var(--ed-panel-2);border:1px solid var(--ed-line)}
.tone-row .seg button{border:0;background:none;color:var(--ed-muted);font:600 12.5px var(--f-body);padding:6px 12px;border-radius:7px;cursor:pointer}
.tone-row .seg button.on{background:var(--ed-ink);color:#1A0E12}
.tone-row .seg button:not(.on):hover{color:var(--ed-ink)}

/* перемикач ролі акаунта і «Мої / Усі акаунти» */
.rseg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);white-space:nowrap}
.rseg button{border:0;background:transparent;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:500;color:var(--muted);cursor:pointer}
.rseg button:hover:not(.on){color:var(--ink)}
.rseg button.on{background:var(--surface);color:var(--accent);font-weight:600;box-shadow:0 1px 3px rgba(28,21,24,.12)}

/* ручка «пересунути рамку» — у центрі виділеної рамки */
.hd-m{left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%);display:grid;place-items:center;cursor:move;color:var(--ed-accent);border-radius:50%}
.hd-m:hover{color:#fff}
.hd-m svg{pointer-events:none}
/* написи й декор на розвороті — картинка шарів поверх фото (кліки проходять до рамок) */
.spread>.sp-ly{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:5}
.sp-tools .btn.sp-decor{border-color:color-mix(in srgb,var(--accent,#c9a46a) 55%,transparent)}
#ly-panel>.sp-exit{width:calc(100% - 32px);margin:12px 16px 0;height:34px;font-size:13px}
/* чек-лист побажань */
.wish-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.wish-list li{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.4}
.wish-list li>b{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:rgba(90,170,120,.18);color:#4fae7a}
.wish-list li.wl-rep>b{background:rgba(214,170,70,.2);color:#d6a43e}
.wish-list li.wl-no>b{background:rgba(220,110,90,.2);color:#e07a5f}
.wish-list li>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.wish-list small{opacity:.6;font-size:11.5px}
.wish-list em{font-style:normal;font-size:12px;opacity:.8}
/* вкладка «Фото» в конструкторі: додати нові фото — картка з іконкою, тонкою золотою рамкою й м'яким світінням */
.pf-add{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px 8px 8px;margin-bottom:2px;
  border-radius:12px;cursor:pointer;overflow:hidden;isolation:isolate;color:var(--ed-ink);
  background:linear-gradient(135deg,color-mix(in srgb,var(--ed-accent) 9%,var(--ed-panel-2)),var(--ed-panel-2) 55%,color-mix(in srgb,var(--ed-gold) 7%,var(--ed-panel-2)));
  border:1px solid color-mix(in srgb,var(--ed-gold) 32%,var(--ed-line));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 26px -18px rgba(0,0,0,.9);
  transition:border-color .2s,box-shadow .2s,transform .2s}
.pf-add::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .25s;
  background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--ed-accent) 22%,transparent),transparent 60%)}
.pf-add:hover,.pf-add.over{border-color:color-mix(in srgb,var(--ed-accent) 60%,var(--ed-gold));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 4px color-mix(in srgb,var(--ed-accent) 12%,transparent),0 14px 30px -18px rgba(0,0,0,.95);transform:translateY(-1px)}
.pf-add:hover::before,.pf-add.over::before{opacity:1}
.pf-add.over{border-style:dashed}
.pf-add input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pf-add:focus-within{outline:2px solid var(--ed-accent);outline-offset:2px}
.pf-ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--ed-gold);
  background:color-mix(in srgb,var(--ed-gold) 12%,var(--ed-panel));border:1px solid color-mix(in srgb,var(--ed-gold) 28%,transparent);transition:transform .25s,color .2s}
.pf-ico svg{width:18px;height:18px}
.pf-add:hover .pf-ico,.pf-add.over .pf-ico{transform:rotate(-4deg) scale(1.05);color:var(--ed-accent)}
.pf-tx{display:grid;gap:1px;min-width:0}
.pf-tx b{font-family:var(--f-display);font-weight:400;font-size:14px;letter-spacing:.01em;line-height:1.2}
.pf-tx small{font-size:11px;color:var(--ed-muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-go{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:var(--ed-accent);
  background:color-mix(in srgb,var(--ed-accent) 14%,transparent);border:1px solid color-mix(in srgb,var(--ed-accent) 30%,transparent);transition:background .2s,color .2s}
.pf-go svg{width:13px;height:13px}
.pf-add:hover .pf-go{background:var(--ed-accent);color:#1A0F13}
.pf-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:color-mix(in srgb,var(--ed-ink) 8%,transparent)}
.pf-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ed-gold),var(--ed-accent));transition:width .4s}
.pf-spin{width:11px;height:11px;border-radius:50%;border:2px solid color-mix(in srgb,var(--ed-accent) 30%,transparent);border-top-color:var(--ed-accent);animation:pfspin .8s linear infinite}
@keyframes pfspin{to{transform:rotate(360deg)}}
.pf-add.busy{cursor:progress}
@media (prefers-reduced-motion:reduce){.pf-add,.pf-ico,.pf-bar i{transition:none}.pf-add:hover{transform:none}.pf-spin{animation-duration:2s}}
.pool .free.pf-new{outline:2px solid var(--ed-accent);outline-offset:-2px}
/* шаблони з фото розвороту */
.tpls.live .tpl .mini i.ph{background-color:#8E7C82;background-size:cover;background-repeat:no-repeat}
.tpls.live .tpl .mini i.ph.bd{box-shadow:0 0 0 1.5px #fff}
.tpls.live .tpl{transition:border-color .15s,transform .15s}
.tpls.live .tpl:hover{border-color:color-mix(in srgb,var(--ed-accent) 55%,var(--ed-line));transform:translateY(-1px)}
.tpls.live .tpl.on{border-color:var(--ed-accent);box-shadow:0 0 0 1px var(--ed-accent)}
.tpl-best{position:absolute;right:4px;top:4px;z-index:2;font-style:normal;font-size:9px;letter-spacing:.04em;padding:2px 6px;border-radius:99px;background:var(--ed-gold);color:#1A0F13}
/* рецепти: кольорові підкладки під фото і фото в білому паспарту з тінню (як у друці) */
.spread{container-type:inline-size}
.spread>.sp-plate{position:absolute;z-index:0;pointer-events:none}
.spread>.slot.mat{box-shadow:0 0 0 .7cqw #fff,0 .35cqw 1.3cqw .3cqw rgba(40,30,32,.28)}
.tpl .mini i.ph.mat{box-shadow:0 0 0 1.5px #fff}
/* панель інструментів над обкладинкою — завжди однакової висоти: інакше при виборі елемента полотно «стрибає» і обкладинка збільшується/зменшується */
.stage-bar:has(.sb-wrap){height:66px;box-sizing:border-box;flex:none}
.stage-bar .sb{height:44px;min-height:44px;box-sizing:border-box}
/* ручки фото-рамки на розвороті — тонкі й акуратні, як на обкладинці; зона захоплення більша за саму ручку */
.canvas .slot.sel{box-shadow:inset 0 0 0 2px var(--ed-accent)}
.hd{border-width:1.5px;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.hd::before{content:"";position:absolute;inset:-7px}
.hd-l,.hd-r{width:6px;height:22px;border-radius:3px}
.hd-t,.hd-b{width:22px;height:6px;border-radius:3px}
.hd-l{left:0}.hd-r{right:0}.hd-t{top:0}.hd-b{bottom:0}
.hd-c{width:10px;height:10px;border-radius:2px}
.hd-tl{left:0;top:0}.hd-br{right:0;bottom:0}.hd-tr{right:0;top:0}.hd-bl{left:0;bottom:0}
.hd-m{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.92)}
.hd-m::before{inset:-4px}
.hd-m svg{width:14px;height:14px}
.canvas .slot.sel::after{content:"";position:absolute;inset:0;border:2px solid var(--ed-accent);pointer-events:none;z-index:5}
/* ручки написів і елементів — тонкі, точно на лінії рамки (як у фото-рамок); зона захоплення більша за саму ручку */
.ly-box.sel::before{inset:-1px;border-width:1.5px}
.ly-h{width:10px;height:10px;border-radius:2px;border-width:1.5px;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.ly-h::after{content:"";position:absolute;inset:-6px}
.ly-h.nw{left:-6px;top:-6px}.ly-h.ne{right:-6px;top:-6px}.ly-h.sw{left:-6px;bottom:-6px}.ly-h.se{right:-6px;bottom:-6px}
.ly-h.e,.ly-h.w{top:calc(50% - 11px);width:6px;height:22px;border-radius:3px}.ly-h.e{right:-4px}.ly-h.w{left:-4px}
.ly-h.s,.ly-h.n{left:calc(50% - 11px);width:22px;height:6px;border-radius:3px}.ly-h.s{bottom:-4px}.ly-h.n{top:-4px}
.ly-box:hover,.ly-box.sel{outline:none !important}   /* рамку малює лише ::before — без подвійної лінії */
.ly-rot{left:calc(50% - 11px);top:-36px;bottom:auto;width:22px;height:22px;border:1.5px solid var(--sel);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.ly-rot::before{inset:4px}
.ly-rot::after{content:"";position:absolute;left:calc(50% - .75px);top:100%;width:1.5px;height:12px;background:var(--sel)}
/* звичайний розворот під полотном швидкої правки — поки сервер малює картинку */
.cover.is-spread>.sp-ghost{position:absolute !important;inset:0;width:100% !important;height:100% !important;max-width:none;max-height:none;margin:0;z-index:2;pointer-events:none;box-shadow:none;transform:none}
/* тінь під паспарту — як у друкованому файлі (render._mat_shadow), щоб у правці напису нічого не «темнішало» */
.spread>.slot.mat{box-shadow:0 0 0 .7cqw #fff,0 .36cqw 1.2cqw .7cqw rgba(40,30,32,.37)}
/* стрічка стилів написів під розворотом */
.ed-stage.has-film .canvas .wrap.sp-wrap{width:min(100%,1100px,calc((100dvh - 430px)*2))}
.tx-film .tx-h{font-size:12px;font-weight:600;color:var(--ed-ink);letter-spacing:.02em}
.tx-film .cvf-top{display:flex;align-items:center;gap:12px}
.tx-film .cvf-hint{margin-left:auto;font-size:11px;color:var(--ed-muted)}
.cvf-tile.tx-tile{width:168px}
.tx-mini{position:relative;width:168px;border-radius:5px;overflow:hidden;outline:2px solid transparent;outline-offset:2px;box-shadow:0 6px 14px -8px rgba(0,0,0,.7);transition:outline-color .15s,transform .15s;background:#EFE9E4}
.tx-mini .spread{width:100%;pointer-events:none}
.tx-mini .tx-ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.tx-mini .tx-ov:not([src]){visibility:hidden}
.cvf-tile.tx-tile:hover .tx-mini{transform:translateY(-2px);outline-color:var(--ed-muted)}
.cvf-tile.tx-tile.on .tx-mini{outline-color:var(--ed-accent)}
.cvf-tile.tx-tile.rec .tx-mini{outline-color:rgba(210,181,135,.55)}
.cvf-tile.tx-tile.rec.on .tx-mini{outline-color:var(--ed-accent)}
.cvf-tile.tx-tile[disabled]{cursor:default}
.cvf-tile .tx-mini .tx-ov{width:100%;height:100%;background:none;border-radius:0;box-shadow:none;outline:0;object-fit:fill;transform:none}
/* мініатюра — лише сторінка з написом */
.tx-mini .tx-in{position:relative}
.cvf-tile.tx-tile.pg-l,.cvf-tile.tx-tile.pg-r{width:96px}
.tx-tile.pg-l .tx-mini,.tx-tile.pg-r .tx-mini{width:96px}
.tx-tile.pg-l .tx-in,.tx-tile.pg-r .tx-in{width:200%}
.tx-tile.pg-r .tx-in{margin-left:-100%}
/* варіанти обкладинки з матеріалу */
.cvf-tile.mat-tile{width:108px}
.cvf-tile.mat-tile img{width:108px;height:108px;object-fit:cover}
.mat-film .tx-h{font-size:12px;font-weight:600;color:var(--ed-ink)}
.mat-film .cvf-top{display:flex;align-items:center;gap:12px}
.mat-film .cvf-hint{margin-left:auto;font-size:11px;color:var(--ed-muted)}
.cvf-tile.mat-tile .mt-box{display:block;width:108px;height:108px;overflow:hidden;border-radius:5px;outline:2px solid transparent;outline-offset:2px;box-shadow:0 6px 14px -8px rgba(0,0,0,.7);transition:outline-color .15s}
.cvf-tile.mat-tile .mt-box img{outline:0;box-shadow:none;border-radius:0;transform:none}
.cvf-tile.mat-tile.zoom .mt-box img{transform:scale(1.9);transform-origin:50% 42%}
.cvf-tile.mat-tile:hover .mt-box{outline-color:var(--ed-muted)}
.cvf-tile.mat-tile.rec .mt-box{outline-color:rgba(210,181,135,.55)}
.cvf-tile.mat-tile.on .mt-box{outline-color:var(--ed-accent)}
.ss.art-theme .art-grid{grid-template-columns:repeat(5,1fr)}
/* «Усі елементи бібліотеки» — помітна кнопка, що розгортає каталог */
.art-swap summary.as-btn{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--ed-line);border-radius:10px;background:rgba(255,255,255,.04);transition:background .15s,border-color .15s}
.art-swap summary.as-btn:hover{background:rgba(255,255,255,.08);border-color:var(--ed-muted)}
.art-swap .as-ico{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:rgba(139,92,246,.18);color:#C9B5FF;flex:none}
.art-swap .as-ico svg{width:16px;height:16px}
.art-swap .as-t{display:grid;gap:2px;min-width:0;flex:1}
.art-swap .as-t b{font-size:12.5px;font-weight:600;color:var(--ed-ink)}
.art-swap .as-t small{font-size:11px;color:var(--ed-muted)}
.art-swap .as-close,.art-swap[open] .as-open{display:none}
.art-swap[open] .as-close{display:block}
.art-swap .as-chev{display:grid;place-items:center;color:var(--ed-muted);transition:transform .2s;flex:none}
.art-swap .as-chev svg{width:14px;height:14px}
.art-swap[open] .as-chev{transform:rotate(180deg)}
.art-swap[open] summary.as-btn{margin-bottom:10px}
/* чотири вкладки панелі (Кадр, Шаблони, Фото, Декор) — в один рядок */
.ptabs button{white-space:nowrap;padding-left:6px;padding-right:6px;min-width:0}
.canvas .spread.decor-over{outline:2px dashed var(--ed-accent);outline-offset:4px}
/* мініатюри: чорним — лише лінійні малюнки (вони перефарбовуються під книгу); кольорові зі зразків — у своїх кольорах */
.art-it img{filter:none}
.art-it img[src*="/line_"]{filter:brightness(0) opacity(.82)}
.emph-row label small{display:block;font-size:10.5px;color:var(--ed-muted);font-weight:400;text-transform:none;letter-spacing:0}
.emph-row button i{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:middle}
/* генератори у вкладці «Декор» */
.gen-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.gen-btns button{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--ed-line);border-radius:9px;background:rgba(255,255,255,.04);color:var(--ed-ink);font-size:12px;cursor:pointer;text-align:left}
.gen-btns button:hover{border-color:var(--ed-muted)}
.gen-btns button.on{border-color:var(--sel);background:rgba(139,92,246,.14)}
.gen-btns .gn-i{font-size:15px;width:20px;text-align:center}
.gen-f{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.gen-f label{display:grid;gap:4px;font-size:11px;color:var(--ed-muted)}
.gen-f input,.gen-f select{background:var(--ed-panel);border:1px solid var(--ed-line);border-radius:7px;color:var(--ed-ink);padding:6px 8px;font:inherit;font-size:12px;min-width:0}
.gen-go{margin-top:10px;width:100%}
/* шаблони кальки за зразками */
.kf-film .kt-lab{flex:none;align-self:center;writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ed-gold);margin-right:2px}
.kf-film .kt-sep{flex:none;width:1px;background:var(--ed-line);margin:0 6px}
.cvf-tile.kt-tile{width:96px}
.cvf-tile.kt-tile .kt-box{display:block;width:96px;height:96px;overflow:hidden;border-radius:5px;outline:2px solid transparent;outline-offset:2px;box-shadow:0 6px 14px -8px rgba(0,0,0,.7);background:#F4F1EC}
.cvf-tile.kt-tile .kt-box img{width:200%;height:100%;max-width:none;margin-left:-100%;object-fit:cover;outline:0;box-shadow:none;border-radius:0;transform:none}
.cvf-tile.kt-tile.on .kt-box{outline-color:var(--ed-accent)}
.cvf-tile.kt-tile:hover .kt-box{outline-color:var(--ed-muted)}
/* тонкі лінії гравіювання */
.ly-box.thin::after{content:"";position:absolute;inset:-4px;border:1.5px dashed #F0A030;border-radius:3px;pointer-events:none}
.ly-box.thin:not(.sel)::before{border-color:transparent}
.ss.thin-warn{background:rgba(240,160,48,.1);border:1px solid rgba(240,160,48,.45);border-radius:10px;padding:10px 12px}
.ss.thin-warn b{color:#F4B45C;font-size:12.5px}
.ss.thin-warn p{margin:4px 0 0;font-size:11.5px;color:var(--ed-ink);line-height:1.4}
/* лінії-підказки при перетягуванні фото-рамки */
.spread>.sp-guides{position:absolute;inset:0;pointer-events:none;z-index:8}
.sp-guides i{position:absolute;background:#FF4FA3;box-shadow:0 0 0 .5px rgba(255,79,163,.35)}
.sp-guides .gv{top:0;bottom:0;width:1px;margin-left:-.5px}
.sp-guides .gh{left:0;right:0;height:1px;margin-top:-.5px}
/* маленька рамка: бічні ручки ховаємо (лишаються кути), кути — назовні, рамка не перекрита */
.ly-box.sel.sm-w .ly-h.n,.ly-box.sel.sm-w .ly-h.s{display:none}
.ly-box.sel.sm-h .ly-h.e,.ly-box.sel.sm-h .ly-h.w{display:none}
.ly-box.sel.sm .ly-h.nw{left:-13px;top:-13px}.ly-box.sel.sm .ly-h.ne{right:-13px;top:-13px}
.ly-box.sel.sm .ly-h.sw{left:-13px;bottom:-13px}.ly-box.sel.sm .ly-h.se{right:-13px;bottom:-13px}
.ly-box.sel.sm .ly-h.e{right:-12px}.ly-box.sel.sm .ly-h.w{left:-12px}.ly-box.sel.sm .ly-h.n{top:-12px}.ly-box.sel.sm .ly-h.s{bottom:-12px}
.ly-box.sel.sm .ly-rot{top:-44px}
/* бриф: перемикачі не налазять на сусідні поля на вужчих екранах */
.row3>.field{min-width:0}
.row3 .seg{flex-wrap:wrap;max-width:100%}
.row3 .seg{display:flex}
.row3 .seg button{flex:1 1 auto;min-width:max-content}
/* «Зробити з текстом» — процес на розвороті */
.btn.sp-mktext{border-color:rgba(210,181,135,.55);color:var(--ed-gold)}
.spread>.sp-mk-ld{position:absolute;inset:0;z-index:20;display:grid;place-content:center;justify-items:center;gap:12px;background:rgba(20,16,18,.45);backdrop-filter:blur(3px);color:#fff;font-size:14px;animation:mkIn .25s ease}
.sp-mk-ld b{font-weight:600;letter-spacing:.01em;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.sp-mk-spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.3);border-top-color:var(--ed-accent);animation:spin .8s linear infinite}
/* напис від Claude */
.sp-mk-ld small{font-size:11.5px;opacity:.85;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.tx-mini .tx-in .tx-full{display:block;width:100%;height:auto}
.cvf-gen.spt-run{min-width:170px}
.art-find{width:100%;justify-content:center;margin:0 0 10px;gap:6px}
/* «Варіанти розвороту» — стрічка під полотном (web/app.js optFilm) */
.op-film .cvf-tile.rec span{color:var(--ed-accent)}
/* кілька вибраних фото (Ctrl/⌘ + клік) — спільна рамка з ручками */
.canvas .grp{position:absolute;z-index:7;outline:1.5px dashed var(--ed-accent);outline-offset:2px;pointer-events:none}
.canvas .grp .hd{pointer-events:auto}

/* перейменування книги в шапці редактора */
.ed-top .ttl .ttl-in{font-family:var(--f-display);font-size:19px;line-height:1.2;width:240px;max-width:100%;padding:0 6px;border:1px solid var(--ed-accent);border-radius:6px;background:color-mix(in srgb,currentColor 8%,transparent);color:inherit;outline:none}
.ed-top .ttl .ttl-row{display:flex;align-items:center;gap:4px;min-width:0}
.ed-top .ttl .ttl-row .ttl-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-top .ttl .ttl-pen{flex:none;background:none;border:0;padding:0;color:inherit;display:grid;place-items:center;width:24px;height:24px;border-radius:6px;opacity:.6;transition:opacity .15s,background .15s}
.ed-top .ttl .ttl-pen:hover{opacity:1;background:color-mix(in srgb,currentColor 12%,transparent)}
.ed-top .ttl .ttl-pen svg{width:15px;height:15px}

/* погодження книги клієнтом */
.bs-f{display:inline-grid;place-content:center;width:16px;height:16px;border-radius:50%;font-size:10px;margin-left:6px;vertical-align:1px}
.bs-f.ok{background:#2F7D5B;color:#fff}
.bs-f.fix{background:var(--ed-accent);color:#fff;font-size:9px}
.bs-has-fix{border-color:var(--ed-accent)!important}
.bs-dot{display:inline-grid;place-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ed-accent);color:#fff;font-style:normal;font-size:11px;font-weight:700;margin-left:4px}
.bs-note{position:relative;flex:1 0 100%;margin:0;padding:10px 200px 10px 14px;border-radius:12px;background:color-mix(in srgb,var(--ed-accent) 14%,transparent);border:1px solid var(--ed-accent);font-size:13.5px;line-height:1.45}
.bs-note b{display:block;margin-bottom:2px}
.bs-note p{margin:2px 0}
.bs-note ol{margin:4px 0 0;padding-left:20px}
.bs-note.min{padding-top:6px;padding-bottom:6px}
.bs-note .bs-acts{position:absolute;right:10px;top:7px;display:flex;align-items:center;gap:12px}
.bs-note .bs-x{background:none;border:0;color:inherit;text-decoration:underline;font-size:12.5px;opacity:.8}
.bs-note .bs-ack{background:var(--ed-accent);border:0;color:#fff;font-weight:600;font-size:12.5px;padding:5px 12px;border-radius:999px}
.bs-note .bs-ack:hover{filter:brightness(1.1)}
.bs-pins{position:absolute;inset:0;pointer-events:none;z-index:9}
.bs-pin{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--ed-accent);color:#fff;font-weight:700;font-size:12px;display:grid;place-content:center;box-shadow:0 0 0 3px #fff,0 4px 10px rgba(0,0,0,.35)}
.bs-link{display:flex;gap:8px;margin:6px 0 12px}
.bs-link input{flex:1;min-width:0;font-size:13px}
.bs-stat{display:grid;gap:6px;margin-bottom:12px}
.bs-stat small{opacity:.7}
.bs-bar{height:6px;border-radius:3px;background:color-mix(in srgb,currentColor 15%,transparent);overflow:hidden}
.bs-bar i{display:block;height:100%;background:#2F7D5B}
.bs-ok{color:#2F7D5B}
.bs-list{display:grid;gap:10px;margin-bottom:12px;max-height:min(520px,55vh);overflow:auto;padding-right:4px}
.bs-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;text-align:left;padding:10px 12px;border-radius:10px;border:1px solid color-mix(in srgb,currentColor 18%,transparent);background:none;color:inherit}
.bs-row:hover{border-color:var(--ed-accent)}
.bs-row span{font-size:13px;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bs-card{border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:12px;padding:10px 12px;display:grid;gap:10px}
.bs-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bs-card-h .btn{padding:6px 12px;font-size:12.5px}
.bs-shot{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px;align-items:start}
.bs-shot.sm{grid-template-columns:minmax(0,220px) minmax(0,1fr);margin-top:6px}
.bs-img{position:relative;border-radius:6px;overflow:hidden;background:#000}
.bs-img img{display:block;width:100%}
.bs-img .bs-pin{width:22px;height:22px;margin:-11px 0 0 -11px;font-size:11px;box-shadow:0 0 0 2px #fff,0 3px 8px rgba(0,0,0,.4)}
.bs-txt{font-size:13.5px;line-height:1.45;display:grid;gap:4px}
.bs-txt ol{margin:0;padding-left:20px}
.bs-txt ol li::marker{font-weight:700;color:var(--ed-accent)}
@media (max-width:900px){.bs-shot,.bs-shot.sm{grid-template-columns:1fr}}
.ed-stage{position:relative}
.bs-note.float{position:absolute;left:16px;bottom:16px;width:min(560px,calc(100% - 32px));z-index:30;background:#2A1E24;box-shadow:0 18px 40px -12px rgba(0,0,0,.6)}
.bs-note.float.min{width:auto}
.bs-f.fix.ack{background:color-mix(in srgb,currentColor 30%,transparent);font-size:10px}
.bs-card.ack{opacity:.6}
.bs-card-a{display:flex;gap:6px}
.bs-tag{font-weight:500;font-size:12px;color:#5FB38C;margin-left:6px}


/* додати кальку з редактора, без перезбирання книги */
.ed-strip .st-add{display:block;width:100%;margin:2px 0 10px;padding:10px;border:1.5px dashed color-mix(in srgb,currentColor 30%,transparent);border-radius:10px;background:none;color:var(--ed-muted);font-size:13px;text-align:center;transition:border-color .15s,color .15s}
.ed-strip .st-add:hover{border-color:var(--ed-accent);color:var(--ed-ink)}
.hint.q-dup{color:#E7C27D}
.q-go{background:none;border:0;padding:0;color:inherit;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}

/* зміна типу обкладинки в редакторі */
.ed-strip .st-type{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;margin:-2px 0 10px;padding:7px 10px;border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:9px;background:none;color:var(--ed-ink);font-size:12.5px;transition:border-color .15s}
.ed-strip .st-type i{font-style:normal;color:var(--ed-muted);text-decoration:underline}
.ed-strip .st-type:hover{border-color:var(--ed-accent)}
.modal .box.ck-box{width:min(1120px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);overflow:auto;scrollbar-width:thin;gap:16px;padding:24px 28px}
.ck-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.ck-head h2{margin:2px 0 0}
.ck-head .hint{max-width:340px;text-align:right;margin:0}
.ck-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.ck{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;padding:16px 12px 14px;border-radius:14px;border:1.5px solid color-mix(in srgb,currentColor 14%,transparent);background:none;color:inherit;cursor:pointer;transition:border-color .15s,transform .15s,background .15s}
.ck:hover{border-color:var(--ed-accent);transform:translateY(-2px)}
.ck.on{border-color:var(--ed-accent);background:color-mix(in srgb,var(--ed-accent) 10%,transparent)}
.ck b{font-size:15px;font-weight:600;margin-top:8px}
.ck b i{font-style:normal;font-size:11px;font-weight:500;color:var(--ed-accent);margin-left:3px}
.ck-d{font-size:12.5px;line-height:1.4;opacity:.75}
.ck u{font-size:12px;color:#7FC8A4;text-decoration:none;margin-top:2px}
/* маленька книжка: корінець, фактура, легкий обʼєм */
.ck-book{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  position:relative;display:grid;place-items:center;width:112px;height:128px;overflow:hidden;border-radius:2px 5px 5px 2px;box-shadow:0 12px 20px -10px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,255,255,.07)}
.ck-book::before{content:"";position:absolute;inset:0 auto 0 0;width:9px;z-index:3;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.1) 60%,rgba(0,0,0,.2))}
.ck-book img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ck-book em{position:relative;z-index:2;max-width:82%;font:400 11px/1.25 var(--f-display);font-style:normal;text-align:center}
.ck-book.t-base em{position:absolute;left:9px;right:0;bottom:0;max-width:none;padding:12px 6px 6px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.ck-book.t-acr::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(120deg,rgba(255,255,255,.55),rgba(255,255,255,.05) 38%,transparent 55%,rgba(255,255,255,.18))}
.ck-book.t-vel{background:var(--grain),radial-gradient(circle at 35% 25%,#8D3C4E,#5C1F2B)}
.ck-book.t-eco{background:var(--grain),linear-gradient(140deg,#C49B73,#8B6547)}
.ck-book.t-lin{background:repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 1px,transparent 1px 3px),#C9BCA5}
.ck-book.t-vel em,.ck-book.t-eco em,.ck-book.t-lin em{padding:5px 7px;border-radius:2px;color:#4A3A1E;background:linear-gradient(135deg,#F0DCA6,#C9A24E 55%,#EBD391);box-shadow:0 1px 2px rgba(0,0,0,.4)}
.ck-foot{display:flex;justify-content:flex-end}
@media (max-width:980px){.ck-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ck-head{display:block}.ck-head .hint{text-align:left;max-width:none;margin-top:6px}}
@media (max-width:560px){.ck-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* архів: очікування повернення книги */
.arch-ov{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:rgba(14,10,12,.72);backdrop-filter:blur(4px)}
.arch-box{display:grid;justify-items:center;gap:8px;padding:30px 40px;border-radius:18px;background:#1B1619;color:#F4E9EC;text-align:center;max-width:360px}
.arch-box p{font-size:13.5px;opacity:.75}
.arch-spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:#E58DA8;animation:archspin 1s linear infinite}
@keyframes archspin{to{transform:rotate(360deg)}}
.pc-dup{flex:none;font-size:11px;padding:2px 8px;border-radius:999px;background:var(--warn-soft);color:var(--warn);font-weight:600;white-space:nowrap}
.pc-arch{flex:none;font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid currentColor;opacity:.65}

/* повтор фото в книзі: плашка «Дубль N» (лише редактор) */
.slot .rep{position:absolute;left:8px;top:8px;z-index:4;display:inline-flex;align-items:center;gap:5px;padding:4px 9px 4px 7px;border-radius:999px;
  background:rgba(18,18,22,.55);-webkit-backdrop-filter:blur(8px) saturate(1.4);backdrop-filter:blur(8px) saturate(1.4);color:#fff;
  font-size:11px;font-weight:600;line-height:1;letter-spacing:.02em;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 4px 14px rgba(0,0,0,.25);pointer-events:auto;white-space:nowrap}
.slot .rep svg{opacity:.9;flex:none}
.pool button.used{position:relative}
.pool button.used .pf-x{position:absolute;left:4px;bottom:4px;padding:2px 6px;border-radius:999px;background:rgba(18,18,22,.62);color:#fff;font-size:10.5px;font-weight:700;line-height:1.2;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* «Дизайни» → Кальки / Шаблони розворотів */
.lib-how{margin:6px 0 18px;padding:14px 18px;border-radius:14px;background:var(--surface-2, rgba(0,0,0,.035));font-size:14px;line-height:1.5}
.lib-how ol{margin:6px 0 0;padding-left:20px}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:8px 0 26px}
.lib-grid.sm{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.lib-grid.xs{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.lib-card{border:1px solid var(--line, rgba(0,0,0,.1));border-radius:14px;overflow:hidden;background:var(--surface, #fff);display:flex;flex-direction:column}
.lib-card.hid{opacity:.55}
.lib-img{position:relative;background:#f6f3ef;aspect-ratio:2/1;display:flex;align-items:center;justify-content:center}
.lib-grid.sm .lib-img,.lib-grid .lib-img:has(img){aspect-ratio:1/1}
.lib-img img{width:100%;height:100%;object-fit:contain;display:block}
.lib-img .lib-cal{color:#998;font-size:13px}
.lib-sp{width:100%;height:100%;display:block}
.lib-sp .pg{fill:#fbfaf8}
.lib-sp .ph{fill:#d9d1c7}
.lib-sp .ph.bd{stroke:#fff;stroke-width:1.2;fill:#cfc5b9}
.lib-sp .tx{fill:none;stroke:#b07a5a;stroke-width:.7;stroke-dasharray:2 1.5}
.lib-sp .ar{fill:rgba(176,122,90,.18)}
.lib-sp line{stroke:rgba(0,0,0,.18);stroke-width:.5}
.lib-n{position:absolute;right:6px;bottom:6px;padding:2px 7px;border-radius:999px;background:rgba(18,18,22,.6);color:#fff;font-size:11px;font-weight:600}
.lib-body{padding:10px 12px 12px;display:grid;gap:7px;font-size:13px}
.lib-top{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.lib-nm{font-weight:600;font-size:14px}
.lib-ev summary{cursor:pointer;color:var(--muted, #776);font-size:12.5px}
.lib-ev .cvf-ev{margin-top:6px;flex-wrap:wrap}
.btn.lib-save{margin-top:12px;width:100%}
.dz-filters .cvf-ev .hint{white-space:nowrap}
.lib-grid .lib-img:has(img){aspect-ratio:auto;height:240px}
.lib-grid.sm .lib-img:has(img){height:190px}

/* «Дизайни»: зразки, шрифти, новинки */
.lib-drop{margin:0 0 14px}
.lib-img .lib-smp{position:absolute;left:6px;bottom:6px;width:34%;max-height:46%;height:auto;object-fit:cover;border-radius:6px;border:2px solid #fff;box-shadow:0 3px 12px rgba(0,0,0,.25)}
.lib-card.analyzing .lib-img .lib-smp,.lib-card.error .lib-img .lib-smp{position:static;width:100%;max-height:none;height:100%;border:0;border-radius:0;box-shadow:none;opacity:.5}
.lib-wait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-weight:600;color:#3a302b;font-size:13px;text-align:center;padding:10px}
.lib-wait small{font-weight:400;opacity:.75}
.lib-notes{color:var(--accent-ink, #a0603e)}
.lib-fonts{display:grid;gap:10px;margin:6px 0 26px}
.lib-ff{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lib-ff .input{flex:1 1 220px}
.lib-fres{padding:10px 14px;border-radius:12px;background:var(--surface-2, rgba(0,0,0,.04));font-size:14px}
.lib-fl{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.lib-f{border:1px solid var(--line, rgba(0,0,0,.1));border-radius:12px;padding:12px 14px;display:grid;gap:4px;background:#fbfaf8;color:#2b2522}
.lib-f span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
.lib-f small{color:#8a807a;font-size:12px}
.lib-feed{margin:-4px 0 14px;padding:10px 14px;border-radius:12px;background:rgba(201,162,77,.12);font-size:13.5px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.lib-feed .lnk{background:none;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit}
.lib-drop{padding:22px 20px!important;min-height:0!important}
.lib-drop h3{font-size:20px;margin:0 0 6px}
.lib-drop p{max-width:720px;margin:0 auto 12px}

.field-err{margin:6px 0 0;font-size:12.5px;color:var(--crit);line-height:1.4}.field-err a{color:inherit;text-decoration:underline}
.input.bad{border-color:var(--crit)}
/* колір сторінок розвороту */
.pg-side{display:flex;width:100%;margin:2px 0 10px}
.pg-side button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.pg-dot{width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(127,127,127,.55)}
.pg-sw{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pg-sw button{display:grid;justify-items:center;gap:4px;padding:6px 2px;border:1px solid var(--ed-line);border-radius:10px;background:transparent;color:var(--ed-muted);font-size:11px;cursor:pointer;transition:border-color .15s,background .15s}
.pg-sw button i{width:30px;height:30px;border-radius:6px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(127,127,127,.45)}
.pg-sw button:hover{border-color:var(--sel)}
.pg-sw button.on{border-color:var(--sel);background:var(--sel-soft);color:var(--ed-ink)}
.pg-act{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pg-act button{flex:1;min-width:120px;height:34px;border:1px solid var(--ed-line);border-radius:9px;background:var(--ed-panel-2);color:var(--ed-ink);font-size:12.5px;cursor:pointer}
.pg-act button:hover{border-color:var(--sel);background:var(--sel-soft)}

/* ===== Клієнт сайту: той самий редактор, світлий преміальний стиль сайту (чорний / білий / сірий, Montserrat) ===== */
html.client{--ed-bg:#EFEDEA;--ed-panel:#FFFFFF;--ed-panel-2:#F4F2EF;--ed-line:#E4E1DC;--ed-ink:#141414;--ed-muted:#6D6B67;--ed-accent:#141414;--ed-gold:#8A6D3B;
  --bg:#EFEDEA;--surface:#FFFFFF;--surface-2:#F4F2EF;--ink:#141414;--muted:#6D6B67;--line:#E4E1DC;--accent:#141414;--accent-ink:#FFFFFF;--accent-soft:#ECEAE6;
  --f-display:'Montserrat',system-ui,sans-serif;--f-body:'Montserrat',system-ui,sans-serif;--shadow:0 1px 2px rgba(0,0,0,.05),0 14px 34px -18px rgba(0,0,0,.28)}
html.client .ed{color-scheme:light}
html.client .ed .btn.primary{color:#fff}
html.client .ed .btn.primary:hover{background:#2b2b2b}
html.client .ed-top .ttl-pen,html.client .ed-top .ttl .pill,html.client .st-type,html.client [data-act="toBrief"],html.client .et-keys{display:none!important}
html.client .cl-logo{display:grid;place-items:center;background:none!important;border:0!important}
html.client .cl-logo img{display:block;border-radius:8px}
html.client .cl-saved{font-size:12.5px;color:var(--ed-muted);display:inline-flex;align-items:center;gap:7px;margin-right:6px}
html.client .cl-saved::before{content:"";width:7px;height:7px;border-radius:50%;background:#1f9d55}
html.client .ed h1,html.client .ed h2,html.client .ed h3,html.client .ed .display{font-weight:700;letter-spacing:-.01em}
/* клієнт: прибираємо темні місця редактора */
html.client .ed-stage{background:radial-gradient(ellipse at 50% 38%,#FAF9F7,var(--ed-bg) 72%)}
html.client .cv-film{background:linear-gradient(180deg,#F7F6F3,#EFEDEA)}
html.client .cvf-gen{border-color:#BDB8B0;background:linear-gradient(135deg,#FFFFFF,#F1EEEA)}
html.client .cvf-gen small{color:var(--ed-muted)}
html.client .slot .fl .h,html.client .rz-tip,html.client .cv-tools button:hover,html.client .cvf-tabs button.on,html.client .cvp-pick button.used::after,
html.client .pool .pf-free,html.client .ptabs .pt-free,html.client .pf-add:hover .pf-go,html.client .tone-row .seg button.on{color:#fff}
html.client .pool .pf-n{background:rgba(255,255,255,.9);color:#141414}
html.client .pool button.used.here .pf-n,html.client .tpl-best{color:#fff}
html.client .sb-pop,html.client .lm-card{background:#fff;border-color:var(--ed-line)}
html.client .pf-q,html.client .cpk-hex{background:#fff;border-color:var(--ed-line)}
html.client .cpk{background:#F7F6F3}
html.client .pc-grid button.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--sel)}
html.client .qp-cols button.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--sel)}
html.client .qp-c .qs{background:#D8D4CE}
html.client .st-item .spread,html.client .st-item .cover{box-shadow:0 4px 10px -5px rgba(0,0,0,.25)}
html.client .cover.studio,html.client .cover.mat{box-shadow:0 30px 60px -30px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.04)}
html.client .pf-add{box-shadow:0 10px 26px -18px rgba(0,0,0,.3)}
html.client .ly-tpl{display:none!important}
/* клієнт: без збереження в бібліотеку дизайнерів; головні кнопки — чорні, як на сайті */
html.client [data-act="libSaveKalka"],html.client [data-act="libSaveSpread"],html.client .lib-save{display:none!important}
html.client .ly-top button,html.client .ls-save,html.client .lm-act .lm-save,html.client .cv-tools .ly-go,html.client .ly-open,html.client .ly-head-act .btn.primary{background:#141414!important;border-color:#141414!important;color:#fff!important}
html.client .mt-seg button.on{color:#141414}
html.client .cvf-gen:hover{border-color:#141414}
html.client .ed-top a.btn{text-decoration:none}
html.client .cvf-tile.gen img{outline:1px solid #D6D2CB}
html.client .cvf-tile.gen span{color:#3A3936}
html.client .cvf-tile.gen.on span{color:#141414;font-weight:700}

/* ===== Клієнт сайту: преміальна біло-сіра палітра (холодні нейтральні, без бежевого) ===== */
html.client{--ed-bg:#F3F3F4;--ed-panel:#FFFFFF;--ed-panel-2:#F6F6F7;--ed-line:#E7E7EA;--ed-ink:#111113;--ed-muted:#8B8B92;--ed-accent:#111113;--ed-gold:#6E6E76;
  --bg:#F3F3F4;--surface:#FFFFFF;--surface-2:#F6F6F7;--ink:#111113;--muted:#8B8B92;--line:#E7E7EA;--accent:#111113;--accent-ink:#FFFFFF;--accent-soft:#EFEFF1;
  --sel:#111113;--sel-soft:rgba(17,17,19,.08);--shadow:0 1px 2px rgba(16,16,20,.04),0 16px 36px -20px rgba(16,16,20,.22)}
html.client body{background:#F3F3F4}
/* верх: чисто білий, тонка лінія, кнопки-групи — світло-сірі «пігулки» */
html.client .ed-top{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:#EDEDF0;box-shadow:0 1px 0 rgba(16,16,20,.02)}
html.client .et-grp{background:#F6F6F7;border-color:#EDEDF0;border-radius:12px}
html.client .et-opt.on,html.client .et-grp .on{background:#fff;color:#111113;box-shadow:0 1px 3px rgba(16,16,20,.12),0 0 0 1px rgba(16,16,20,.04)}
html.client .ed-top .ttl-name{font-weight:700;letter-spacing:-.01em}
html.client .ed-top .ttl span{color:#8B8B92}
/* сцена: майже біле світло зверху, м'який сірий унизу — книга «лежить» на студійному фоні */
html.client .ed-stage{background:radial-gradient(90% 75% at 50% 38%,#FFFFFF 0%,#F6F6F7 45%,#ECECEE 100%)}
html.client .ed-stage .spread,html.client .ed-stage .cover{box-shadow:0 40px 60px -36px rgba(16,16,20,.35),0 8px 18px -10px rgba(16,16,20,.12)}
/* ліва стрічка й права панель — білі, вибране — тонка чорна рамка на світло-сірому */
html.client .ed-strip,html.client .ed-panel{background:#FFFFFF;border-color:#EDEDF0}
html.client .st-item{color:#8B8B92;transition:background .2s}
html.client .st-item:hover{background:#F8F8F9}
html.client .st-item.on{background:#F6F6F7;box-shadow:inset 0 0 0 1.5px #111113}
html.client .st-add{border-color:#DCDCE0;color:#6E6E76;background:#FAFAFB}
html.client .st-add:hover{border-color:#111113;color:#111113}
html.client .ptabs{border-bottom-color:#EDEDF0}
html.client .ptabs button{color:#8B8B92;font-weight:600}
html.client .ptabs button.on{color:#111113;border-color:#111113}
/* кнопки: біла з тонкою рамкою; головна — глибокий чорний */
html.client .ed .btn{background:#fff;border-color:#E2E2E6;color:#111113;box-shadow:0 1px 2px rgba(16,16,20,.04)}
html.client .ed .btn:hover{border-color:#111113}
html.client .ed .btn.primary,html.client .ed-top a.btn.primary{background:#111113;border-color:#111113;color:#fff;box-shadow:0 8px 18px -10px rgba(16,16,20,.6)}
html.client .ed .btn.primary:hover{background:#2A2A2E}
html.client .sp-mktext{border-color:#D9D9DE!important;color:#111113!important;background:#fff!important}
/* поля, перемикачі, картки в панелі */
html.client .seg,html.client .tone-row .seg{background:#F3F3F4;border-color:#EDEDF0}
html.client .seg button.on{background:#111113;color:#fff}
html.client input,html.client textarea,html.client select{background:#fff;border-color:#E2E2E6;color:#111113}
html.client .tp,html.client .qp-styles button,html.client .mt-fonts button{background:#F6F6F7;color:#111113}
html.client .cv-film{background:linear-gradient(180deg,#FAFAFB,#F3F3F4);border-top-color:#EDEDF0}
html.client .cvf-gen{border-color:#CFCFD4;background:linear-gradient(135deg,#FFFFFF,#F2F2F4)}
html.client .cvf-tile.gen img{outline-color:#E2E2E6}
html.client .cl-saved{color:#8B8B92}
/* позначки якості фото — стримані, не жовто-коричневі */
html.client .st-flags .wr{background:#111113;color:#fff}
/* виділення елементів на обкладинці — чорне з білим ореолом, видно і на світлому, і на темному фото */
html.client .ly-box.sel{outline:2px solid #111113!important;box-shadow:0 0 0 4px rgba(255,255,255,.85)}
html.client .ly-box:hover{outline-color:#111113!important}
html.client .ly-h{border-color:#111113}
html.client ::-webkit-scrollbar{width:10px;height:10px}
html.client ::-webkit-scrollbar-thumb{background:#DCDCE0;border-radius:10px;border:3px solid #fff}

/* ===== Клієнт: ліва стрічка розворотів — сірий «стіл», на ньому білі сторінки з тінню, як справжні мініатюри книги ===== */
html.client .ed-strip{background:linear-gradient(180deg,#F1F1F3,#ECECEF);border-right:1px solid #E4E4E8;padding:16px 14px 24px;gap:4px;
  box-shadow:inset -10px 0 18px -16px rgba(16,16,20,.18)}
html.client .st-item{padding:10px 10px 12px;border-radius:14px;gap:9px;transition:background .25s,box-shadow .25s,transform .25s}
html.client .st-item .lab{font-size:11.5px;font-weight:600;letter-spacing:.02em;color:#7C7C84;align-items:center}
html.client .st-item .lab i{font-family:var(--f-body);font-weight:500;color:#9B9BA2}
/* сторінки: білі, з тонким контуром і глибокою м'якою тінню — не зливаються з фоном */
html.client .st-item .trimwrap,html.client .st-item>.spread,html.client .st-item>.cover{border-radius:3px;
  box-shadow:0 0 0 1px rgba(16,16,20,.07),0 2px 4px rgba(16,16,20,.06),0 14px 22px -12px rgba(16,16,20,.38);transition:box-shadow .25s,transform .25s}
html.client .st-item .trimwrap .spread,html.client .st-item .trimwrap .cover{box-shadow:none}
html.client .st-item:hover{background:rgba(255,255,255,.55)}
html.client .st-item:hover .trimwrap,html.client .st-item:hover>.spread,html.client .st-item:hover>.cover{transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(16,16,20,.08),0 4px 8px rgba(16,16,20,.06),0 20px 28px -14px rgba(16,16,20,.42)}
/* вибраний — біла картка з чорним контуром і тінню, підпис чорний */
html.client .st-item.on{background:#fff;box-shadow:0 0 0 1.5px #111113,0 16px 30px -18px rgba(16,16,20,.4)}
html.client .st-item.on .lab{color:#111113}
html.client .st-item.on .lab i{color:#6E6E76}
/* позначки: маленькі акуратні кружечки */
html.client .st-flags span{width:17px;height:17px;font-size:9.5px;font-weight:700;box-shadow:0 2px 6px -2px rgba(16,16,20,.4)}
html.client .st-flags .lk{background:#fff;border:0}
/* «+ Додати кальку» — тонка пунктирна картка на сірому */
html.client .ed-strip .st-add{background:rgba(255,255,255,.6);border:1.5px dashed #C9C9CF;color:#55555C;border-radius:12px;margin:6px 0 12px;font-weight:600}
html.client .ed-strip .st-add:hover{background:#fff;border-color:#111113;color:#111113}
html.client .ed-strip::-webkit-scrollbar-thumb{border-color:#EEEEF1}
html.client .sb-title{min-width:0;max-width:240px;justify-content:center;gap:2px}
html.client .sb-title small{display:flex;align-items:center;gap:5px;white-space:nowrap}
html.client .sb-title em.cl-mod{font:600 10px var(--f-body);font-style:normal;letter-spacing:.04em;text-transform:none;color:#111113}
html.client .sb-title .cl-name{font:600 15px/1.2 var(--f-body);color:#111113;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
html.client .cl-film .tx-h{font-weight:700;font-size:13.5px;color:#111113}
html.client .cl-film .cvf-hint{color:#8B8B92}
html.client .cl-film .cvf-row .cvf-sep:last-child{display:none}

/* ===== Клієнт: перевірка книги перед замовленням ===== */
html.client .pv-stage{background:radial-gradient(90% 80% at 50% 35%,#FFFFFF,#ECECEE);color:#111113;border:1px solid #EDEDF0}
html.client .pv-nav .btn{background:#fff;border-color:#E2E2E6;color:#111113}
html.client .pv-nav span{font-size:13px;font-weight:600;color:#6E6E76}
html.client .pv-stage .dots button{background:#D5D5DA}html.client .pv-stage .dots button.on{background:#111113}
html.client .cr-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
html.client .cr-panel{display:grid;gap:12px;background:#fff;border:1px solid #EDEDF0;border-radius:18px;padding:22px}
html.client .cr-panel h2{font-size:18px;margin:0}
.cr-sum{margin:0;font-weight:700;font-size:14px;border-radius:12px;padding:10px 12px}
.cr-sum.ok{background:#E9F6EF;color:#1F7A4A}.cr-sum.warn{background:#FFF5E1;color:#8A5A00}
.cr-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-height:46vh;overflow:auto}
.cr-it{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid #EDEDF0;border-radius:12px;font-size:12.5px;line-height:1.4;color:#3A3A40}
.cr-it b{display:block;font-size:12px;color:#111113;margin-bottom:2px}
.cr-it .btn{padding:6px 12px;font-size:12px;flex:none}
.cr-it.info{background:#FAFAFB}
.cr-more summary{cursor:pointer;font-size:13px;font-weight:600;color:#6E6E76;padding:4px 0}
.cr-go{width:100%;justify-content:center;padding:13px;font-size:14.5px}
.cr-note{margin:0;text-align:center;font-size:12px}
/* перевірка — окремий світлий екран, як редактор */
html.client body{background:#F3F3F4}
.crv{min-height:100dvh;background:#F3F3F4;color:#111113}
.crv-top{display:flex;align-items:center;gap:16px;padding:12px 20px;background:rgba(255,255,255,.92);border-bottom:1px solid #EDEDF0;position:sticky;top:0;z-index:5;backdrop-filter:blur(14px)}
.crv-ttl{display:grid;line-height:1.25;margin-right:auto}
.crv-ttl small{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8B8B92}
.crv-ttl b{font-size:18px;font-weight:700}
.crv-ttl span{font-size:12.5px;color:#8B8B92}
.crv-top .btn{background:#fff;border:1px solid #E2E2E6;color:#111113;border-radius:999px;padding:9px 16px;font-weight:600}
.crv .pv{padding:22px 24px;max-width:1500px;margin:0 auto}
html.client .crv .btn.primary{background:#111113;border-color:#111113;color:#fff}
.cr-it .btn{background:#111113;border:0;color:#fff;border-radius:999px}
html.client .crv .cr-go{border-radius:999px}
html.client .modal .box{background:#fff;color:#111113;border:1px solid #EDEDF0}
html.client .modal .box h2{color:#111113;font-weight:700}
html.client .modal .box .btn.primary{background:#111113;border-color:#111113;color:#fff;text-decoration:none}
html.client .modal .box .btn.ghost{color:#111113}
.cl-empty{min-height:100dvh;display:grid;place-content:center;justify-items:center;gap:12px;text-align:center;background:#F3F3F4;color:#111113;padding:24px}
.cl-empty h1{font-size:24px;margin:6px 0 0}.cl-empty p{color:#6E6E76;margin:0 0 8px}
.cl-empty .btn{background:#111113;color:#fff;border-radius:999px;padding:12px 22px;text-decoration:none}
@media (max-width:900px){.crv .pv{grid-template-columns:1fr;padding:14px}.crv-top{flex-wrap:wrap}}
.cr-it{flex-direction:column;align-items:stretch;gap:8px}
.cr-it .btn{align-self:flex-start}
html.client .cr-panel h2{font-weight:700}
/* ===== Клієнт: показ готової книги + «Замовити книгу» ===== */
.sh-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:center;max-width:1560px;margin:0 auto;padding:26px 28px 34px;min-height:calc(100dvh - 70px)}
.sh-stage{position:relative;display:grid;justify-items:center;gap:14px;padding:30px 70px 22px;border-radius:26px;
  background:radial-gradient(85% 75% at 50% 38%,#FFFFFF 0%,#F4F4F5 55%,#E9E9EC 100%);border:1px solid #EDEDF0}
.sh-book{width:100%;max-width:1000px;perspective:2000px}
.sh-book .spread,.sh-book .cover,.sh-book .trimwrap{box-shadow:0 46px 70px -40px rgba(16,16,20,.45),0 10px 22px -12px rgba(16,16,20,.18);border-radius:3px}
.sh-book .trimwrap .spread,.sh-book .trimwrap .cover{box-shadow:none}
.sh-book .flip{animation:shFlip .6s cubic-bezier(.2,.7,.2,1)}
.sh-book .flip.back{animation-name:shFlipB}
@keyframes shFlip{from{opacity:0;transform:rotateY(-9deg) translateX(26px)}to{opacity:1;transform:none}}
@keyframes shFlipB{from{opacity:0;transform:rotateY(9deg) translateX(-26px)}to{opacity:1;transform:none}}
.sh-arr{position:absolute;top:calc(50% - 40px);width:48px;height:48px;border-radius:50%;border:1px solid #E4E4E8;background:#fff;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 10px 24px -12px rgba(16,16,20,.4);transition:transform .2s,opacity .2s}
.sh-arr::before{content:"";width:10px;height:10px;border:solid #111113;border-width:0 2px 2px 0;transform:rotate(135deg);margin-left:4px}
.sh-arr.next::before{transform:rotate(-45deg);margin:0 4px 0 0}
.sh-arr.prev{left:14px}.sh-arr.next{right:14px}
.sh-arr:hover{transform:scale(1.07)}.sh-arr:disabled{opacity:0;pointer-events:none}
.sh-cap{margin:6px 0 0;font-size:14px;font-weight:700;color:#111113;letter-spacing:.01em}
.sh-cap i{font-style:normal;font-weight:500;color:#8B8B92}
.sh-dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.sh-dots button{width:7px;height:7px;border-radius:99px;border:0;padding:0;background:#D3D3D8;cursor:pointer;transition:width .25s,background .25s}
.sh-dots button.on{width:22px;background:#111113}
.sh-card{background:#fff;border:1px solid #EDEDF0;border-radius:22px;padding:26px;display:grid;gap:16px;box-shadow:0 30px 60px -40px rgba(16,16,20,.35);position:sticky;top:90px}
.sh-eyebrow{margin:0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8B8B92}
.sh-card h2{margin:-8px 0 0;font-size:24px;font-weight:700;letter-spacing:-.01em}
.sh-rows{display:grid;border-top:1px solid #F0F0F2}
.sh-r{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #F0F0F2;font-size:14px}
.sh-r span{color:#8B8B92}.sh-r b{font-weight:600}
.sh-price{display:flex;justify-content:space-between;align-items:baseline}
.sh-price span{font-size:14px;color:#8B8B92}.sh-price b{font-size:24px;font-weight:700}
html.client .sh-go{width:100%;justify-content:center;padding:16px;font-size:15.5px;font-weight:700;border-radius:999px;background:#111113;border-color:#111113;color:#fff;box-shadow:0 16px 30px -16px rgba(16,16,20,.7)}
html.client .sh-go:hover{background:#2A2A2E}
.sh-fine{margin:-4px 0 0;text-align:center;font-size:12.5px;color:#8B8B92}
@media (max-width:1000px){.sh-body{grid-template-columns:1fr;padding:14px}.sh-stage{padding:18px 12px}.sh-arr{width:38px;height:38px}.sh-arr.prev{left:4px}.sh-arr.next{right:4px}.sh-card{position:static}}
html.client .st-flags .wr{display:none!important}