/* FeedPilot web -- one stylesheet, no framework.
   Tokens first, then layout, then the pieces, then motion. Logical
   properties throughout so Persian lays out mirrored for free. */

:root{
  --bg:#f6f5f2;--surface:#ffffff;--surface-2:#f0eee9;--ink:#17171c;--muted:#6d6d78;--line:#e6e3dc;--line-2:#d9d5cc;
  --accent:#7c3aed;--accent-ink:#ffffff;--accent-soft:#ede9fe;--accent-soft-2:#ddd6fe;
  --ok:#1f8a4c;--ok-soft:#e3f4ea;--bad:#c0392b;--bad-soft:#fbe7e4;--warn:#a86b00;--warn-soft:#fff4d6;
  --shadow:0 1px 2px rgba(20,16,40,.05),0 8px 24px -12px rgba(20,16,40,.18);
  --shadow-lg:0 24px 60px -20px rgba(20,16,40,.35);
  --radius:16px;--radius-sm:10px;--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.4,.64,1);
  --top:56px;--side:248px;--gutter:clamp(16px,3vw,32px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#0f0f14;--surface:#17171e;--surface-2:#1f1f28;--ink:#ecebf3;--muted:#9c9ba9;--line:#272732;--line-2:#34343f;
  --accent:#a78bfa;--accent-ink:#14101f;--accent-soft:#2a2340;--accent-soft-2:#3a2f5e;
  --ok:#4ade80;--ok-soft:#14301f;--bad:#f87171;--bad-soft:#3a1a1a;--warn:#fbbf24;--warn-soft:#3a2d10;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);--shadow-lg:0 24px 60px -20px rgba(0,0,0,.8);color-scheme:dark;
}}
:root[data-theme=dark]{
  --bg:#0f0f14;--surface:#17171e;--surface-2:#1f1f28;--ink:#ecebf3;--muted:#9c9ba9;--line:#272732;--line-2:#34343f;
  --accent:#a78bfa;--accent-ink:#14101f;--accent-soft:#2a2340;--accent-soft-2:#3a2f5e;
  --ok:#4ade80;--ok-soft:#14301f;--bad:#f87171;--bad-soft:#3a1a1a;--warn:#fbbf24;--warn-soft:#3a2d10;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);--shadow-lg:0 24px 60px -20px rgba(0,0,0,.8);color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;min-height:100dvh}
/* Persian is set in the face the post cards are drawn in (assets/fonts, the
   same two files as core/text_render.py), served from here: a name alone
   only works on a machine that happens to have the font installed. */
@font-face{font-family:"Vazirmatn";font-weight:100 599;font-display:swap;src:url("Vazirmatn-Medium.woff2?v=1") format("woff2")}
@font-face{font-family:"Vazirmatn";font-weight:600 900;font-display:swap;src:url("Vazirmatn-Bold.woff2?v=1") format("woff2")}
[lang=fa] body,html[lang=fa]{font-family:"Vazirmatn",Tahoma,system-ui,sans-serif}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.01em}
h1{font-size:1.5rem}h2{font-size:1.15rem}h3{font-size:1rem}
p{margin:.4rem 0}
.muted{color:var(--muted)}.small{font-size:.86rem}.bold{font-weight:650}
bdi{unicode-bidi:isolate}
img{max-width:100%}
button{font:inherit;color:inherit}
input,select,textarea{font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  padding:.55rem .7rem;width:100%;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea{min-height:5.2rem;resize:vertical}
/* One height for every one-line field -- a list, a number, a word, a date --
   so fields side by side line up (operator, 2026-10-05). A list draws its own
   arrow: the browser's own select keeps its own height and ignores padding. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),select{height:2.6rem;line-height:1.2}
select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-inline-end:2.1rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239c9ba9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:.75rem;background-position:right .8rem center}
[dir=rtl] select{background-position:left .8rem center}
label{display:block;font-size:.82rem;color:var(--muted);margin:.7rem 0 .25rem}
label:first-child{margin-top:0}
.fld>label{margin-top:.7rem}.fld:first-child>label{margin-top:0}
.grid2>.fld>label{margin-top:.7rem}
.grid2:has(>.fld){align-items:end}   /* a two-line label never pushes its field below its neighbour's */
input[type=file]{padding:.4rem}
input[type=checkbox]{width:auto;accent-color:var(--accent)}
::selection{background:var(--accent-soft-2)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* --- layout ------------------------------------------------------------- */
.app{display:grid;grid-template-columns:var(--side) 1fr;grid-template-rows:var(--top) 1fr;min-height:100dvh}
.top{grid-column:1/-1;position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.8rem;padding:0 var(--gutter);height:var(--top);
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.top-spacer{flex:1}
/* the search, beside the brand's name: a real magnifier, larger than the other icons */
.search-btn{width:42px;height:42px;color:var(--ink)}
.search-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.search-btn:hover{background:var(--surface-2)}
.top-actions{display:flex;align-items:center;gap:.4rem}
.brand-mark{display:flex;align-items:center;gap:.55rem;color:inherit;font-weight:700;font-size:1.05rem;letter-spacing:-.01em;min-width:0}
.brand-mark b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.brand-mark:hover{text-decoration:none}
/* a phone: five icons and the brand fit one row (the ❓ help made it five) */
@media (max-width:480px){.top{gap:.4rem}.top .icon{width:34px}.top-actions{gap:.15rem}.brand-mark{gap:.35rem}.brand-mark b{max-width:26vw}}
.mark{width:26px;height:26px;fill:var(--accent);flex:none}
.side{position:sticky;top:var(--top);height:calc(100dvh - var(--top));overflow:auto;padding:1rem .8rem;border-inline-end:1px solid var(--line);background:var(--bg)}
.main{padding:1.4rem var(--gutter) 6rem;max-width:1040px;width:100%;justify-self:center;min-width:0}
.bottom{display:none}
.menu-btn{display:none}
@media (max-width:920px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset-inline-start:0;top:var(--top);width:min(84vw,320px);z-index:30;transform:translateX(calc(-100% - 8px));transition:transform .35s var(--ease);box-shadow:var(--shadow-lg)}
  [dir=rtl] .side{transform:translateX(calc(100% + 8px))}
  .side.open{transform:none}
  .menu-btn{display:grid}
  /* the tab bar, as an app's (operator, 2026-10-18): frosted, a line icon a
     door and a pill that slides to the door you are in; docked to the bottom
     edge, its frost running down under the home indicator (2026-10-21: "fill
     the space between the menu and the bottom of the page") */
  .bottom{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;inset-inline:0;bottom:0;z-index:20;padding:6px 8px calc(6px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;
    background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:saturate(1.8) blur(22px);-webkit-backdrop-filter:saturate(1.8) blur(22px);
    border-top:1px solid color-mix(in srgb,var(--line-2) 60%,transparent);box-shadow:0 -6px 24px rgba(0,0,0,.18)}
  .bottom .ind{position:absolute;top:6px;bottom:calc(6px + env(safe-area-inset-bottom));inset-inline-start:calc(8px + var(--i,0) * (100% - 16px) / var(--n,4));width:calc((100% - 16px) / var(--n,4));
    border-radius:20px;background:var(--accent-soft);transition:inset-inline-start .5s var(--spring)}
  .bottom button{position:relative;z-index:1;display:grid;justify-items:center;gap:3px;border:0;background:none;padding:8px 2px 6px;border-radius:20px;
    font-size:.68rem;font-weight:500;letter-spacing:.01em;color:var(--muted);transition:color .25s;-webkit-tap-highlight-color:transparent}
  .bottom button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--spring)}
  .bottom button.on{color:var(--accent);font-weight:700}
  .bottom button.on svg{transform:translateY(-1px) scale(1.08);stroke-width:2.1}
  .bottom button:active svg{transform:scale(.86)}
  .main{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
  .pill.status span:not(.dot){display:none}.pill.status{padding:.3rem .45rem}
}

/* --- side nav ------------------------------------------------------------- */
.side .grp{margin:.2rem 0 .9rem}
.side .grp-title{display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem;border-radius:12px;font-weight:650;cursor:pointer;user-select:none;transition:background .2s}
.side .grp-title:hover{background:var(--surface-2)}
.side .grp-title .em{width:1.4rem;text-align:center}
/* "›" is a mirrored character: inside right-to-left text the browser already
   draws it as "‹", and the turns below then pointed it the wrong way (closed:
   right, open: up). Kept left-to-right here, so a chevron is what its rule
   says in every language (operator, 2026-09-30). */
.chev{display:inline-block;direction:ltr;unicode-bidi:isolate}
.side .grp-title .chev{margin-inline-start:auto;transition:transform .3s var(--ease);opacity:.5}
.side .grp.open .grp-title .chev{transform:rotate(90deg)}
[dir=rtl] .side .grp-title .chev{transform:rotate(180deg)}[dir=rtl] .side .grp.open .grp-title .chev{transform:rotate(90deg)}
.side .items{display:grid;gap:2px;padding-inline-start:.6rem;max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.side .grp.open .items{max-height:600px}
.side .item{position:relative;display:flex;align-items:center;gap:.5rem;border:0;background:none;text-align:start;padding:.45rem .7rem .45rem 1rem;border-radius:10px;cursor:pointer;color:var(--muted);transition:color .2s,background .2s}
[dir=rtl] .side .item{padding:.45rem 1rem .45rem .7rem}
.side .item:hover{background:var(--surface-2);color:var(--ink)}
.side .item.on{color:var(--ink);background:var(--accent-soft)}
.side .item::before{content:"";position:absolute;inset-inline-start:.2rem;top:50%;width:3px;height:0;border-radius:3px;background:var(--accent);transform:translateY(-50%);transition:height .3s var(--spring)}
.side .item.on::before{height:60%}
.side .foot{margin-top:1.2rem;padding:.6rem .7rem;font-size:.8rem;color:var(--muted)}

/* --- header pieces ------------------------------------------------------------ */
.icon{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:12px;background:transparent;cursor:pointer;transition:background .2s,transform .2s var(--spring)}
.icon:hover{background:var(--surface-2)}.icon:active{transform:scale(.92)}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:transform .3s var(--ease)}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;inset-inline-start:0}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:.85rem;overflow:hidden;flex:none}
.avatar img{width:100%;height:100%;object-fit:cover}
.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:.85rem;cursor:pointer;transition:border-color .2s,background .2s,transform .2s var(--spring)}
.pill:hover{border-color:var(--line-2);background:var(--surface-2)}.pill:active{transform:scale(.96)}
.pill.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.pill.paused .dot{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
.dd{position:relative}
.dd-menu{position:absolute;inset-inline-end:0;top:calc(100% + 6px);min-width:220px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:.4rem;z-index:40;
  transform-origin:top;animation:pop .22s var(--spring)}
.dd-menu button,.dd-menu a{display:flex;width:100%;align-items:center;gap:.6rem;border:0;background:none;padding:.55rem .7rem;border-radius:10px;cursor:pointer;text-align:start;color:inherit}
.dd-menu button:hover,.dd-menu a:hover{background:var(--surface-2);text-decoration:none}
.dd-menu hr{border:0;border-top:1px solid var(--line);margin:.3rem 0}

/* --- cards & content ----------------------------------------------------------- */
.hero{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.8rem;margin:0 0 1.2rem}
.hero .sub{color:var(--muted);margin-top:.15rem}
fieldset.sub{border:0;border-top:1px solid var(--line);border-radius:0;padding:.9rem 0 0;margin:1rem 0 0;min-width:0}
fieldset.sub h3{margin:0 0 .2rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;margin:.8rem 0;box-shadow:var(--shadow);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .2s}
.card.hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.card h3{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem}
.card h3 .count{font-weight:500;color:var(--muted);font-size:.85rem}
.card.note{background:var(--warn-soft);border-color:transparent}
.card.soft{background:var(--surface-2);border-color:transparent;box-shadow:none}
.grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.grid2{display:grid;gap:.8rem;grid-template-columns:1fr 1fr}
@media (max-width:640px){.grid2{grid-template-columns:1fr}}
.row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.row.end{justify-content:flex-end}.row.between{justify-content:space-between}
.stack{display:grid;gap:.5rem}
.list .li{display:flex;gap:.8rem;align-items:center;padding:.7rem 0;border-top:1px solid var(--line);cursor:pointer;transition:background .15s;margin:0 -.5rem;padding-inline:.5rem;border-radius:10px}
.list .li:first-child{border-top:0}
.list .li:hover{background:var(--surface-2)}
.list .li .th{width:56px;height:56px;border-radius:12px;object-fit:cover;background:var(--surface-2);flex:none;display:grid;place-items:center;font-size:1.4rem}
.list .li .body{flex:1;min-width:0}
.list .li .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list .li .s{color:var(--muted);font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list .li .chev{opacity:.4}
[dir=rtl] .list .li .chev{transform:scaleX(-1)}
.chip{display:inline-flex;align-items:center;gap:.3rem;border:1px solid var(--line-2);border-radius:999px;padding:.25rem .75rem;margin:.15rem;cursor:pointer;background:var(--surface);font-size:.9rem;user-select:none;transition:background .2s,border-color .2s,color .2s,transform .15s var(--spring)}
.chip:hover{border-color:var(--accent)}.chip:active{transform:scale(.95)}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chip.static{cursor:default}
.tag{display:inline-flex;align-items:center;gap:.3rem;font-size:.78rem;padding:.15rem .55rem;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.tag.ok{background:var(--ok-soft);color:var(--ok)}.tag.bad{background:var(--bad-soft);color:var(--bad)}.tag.warn{background:var(--warn-soft);color:var(--warn)}.tag.acc{background:var(--accent-soft);color:var(--accent)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font-weight:600;padding:.55rem 1rem;border-radius:var(--radius-sm);border:1px solid var(--line-2);background:var(--surface);cursor:pointer;
  transition:transform .15s var(--spring),background .2s,border-color .2s,box-shadow .2s,opacity .2s;white-space:nowrap}
.btn:hover{background:var(--surface-2);text-decoration:none}.btn:active{transform:scale(.96)}
.btn.p{background:var(--accent);color:var(--accent-ink);border-color:transparent;box-shadow:0 6px 18px -8px var(--accent)}
.btn.p:hover{filter:brightness(1.06)}
.btn.d{color:var(--bad)}.btn.d:hover{background:var(--bad-soft)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.sm{padding:.35rem .7rem;font-size:.86rem}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn.busy{position:relative;color:transparent!important;pointer-events:none}
.btn.busy>.busy-hide{visibility:hidden;display:inline-flex;align-items:center;gap:inherit}
.btn.busy::after{content:"";position:absolute;width:16px;height:16px;border:2px solid currentColor;border-color:var(--muted) transparent var(--muted) transparent;border-radius:50%;animation:spin .7s linear infinite}
.btn.p.busy::after{border-color:var(--accent-ink) transparent var(--accent-ink) transparent}
.switch{position:relative;display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;user-select:none}
.switch i{width:40px;height:24px;border-radius:999px;background:var(--line-2);position:relative;transition:background .25s;flex:none}
.switch i::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .3s var(--spring)}
.switch.on i{background:var(--accent)}
.switch.on i::after{transform:translateX(16px)}
[dir=rtl] .switch.on i::after{transform:translateX(-16px)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;align-items:baseline}
.kv b{font-weight:600}
.empty{padding:2rem 1rem;text-align:center;color:var(--muted)}
.empty .em{font-size:2rem;display:block;margin-bottom:.4rem}
.meter{height:6px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.meter i{display:block;height:100%;background:var(--accent);border-radius:6px;transition:width .6s var(--ease)}
.meter.full i{background:var(--bad)}
.drop{border:1.5px dashed var(--line-2);border-radius:var(--radius-sm);padding:1rem;text-align:center;color:var(--muted);cursor:pointer;transition:border-color .2s,background .2s;position:relative}
.drop.over,.drop:hover{border-color:var(--accent);background:var(--accent-soft)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop img,.drop video{max-height:180px;border-radius:10px;display:block;margin:0 auto .5rem}
.prog{position:absolute;inset-inline:0;bottom:0;height:4px;background:var(--accent);transform-origin:left;transform:scaleX(0);transition:transform .2s}
[dir=rtl] .prog{transform-origin:right}
.working .prog{animation:pulse 1.2s ease-in-out infinite}
pre.post{white-space:pre-wrap;font:inherit;margin:0}
.draft{display:grid;grid-template-columns:96px 1fr;gap:1rem}
.draft .pic{width:96px;height:96px;border-radius:12px;object-fit:cover;background:var(--surface-2)}
.draft .pics{display:grid;gap:.3rem}
.draft .pics .pic{height:46px}
/* the workshop's ▶ Draft today's posts, a line of its own: a step away from the switches under it */
.ws .ws-first{margin-bottom:.75rem}
/* 🎞 Media and every other sheet: the post's pictures as tiles, a thumbnail
   beside its label -- the card's own sizes are .draft-only, and in a sheet a
   picture fell back to its full size */
.sheet .pics{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0 .8rem}
.sheet .pics .pic{width:150px;height:150px;object-fit:cover;border-radius:12px;background:var(--surface-2)}
.sheet .th:not(.framed){width:44px;height:44px;object-fit:cover;border-radius:8px;vertical-align:middle;flex:none}
.sheet .btn .th:not(.framed){width:32px;height:32px}
.sheet .btn:has(.th){display:inline-flex;align-items:center;gap:.4rem}
@media (max-width:520px){.draft{grid-template-columns:1fr}.draft .pic{width:100%;height:180px}}
.draft .text{max-height:9.5rem;overflow:hidden;position:relative;line-height:1.6}
.draft .text.open{max-height:none}
.draft .text:not(.open)::after{content:"";position:absolute;inset-inline:0;bottom:0;height:3rem;background:linear-gradient(transparent,var(--surface))}
.draft .acts{margin-top:.7rem}
.pulse{animation:pulse 1.6s ease-in-out infinite}
.stat{display:grid;gap:.15rem}.stat b{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}.stat span{color:var(--muted);font-size:.82rem}
.ol{padding-inline-start:1.2rem;margin:.3rem 0}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86rem}
.tt{position:relative}
.tt[data-tt]:hover::after{content:attr(data-tt);position:absolute;inset-inline-start:0;top:calc(100% + 6px);background:var(--ink);color:var(--bg);font-size:.78rem;padding:.3rem .55rem;border-radius:8px;white-space:nowrap;z-index:5;animation:pop .2s var(--spring)}

.grow{flex:1}.minw{min-width:8rem}.w5{width:5rem}.wa{width:auto}.mt{margin-top:.8rem}.mb{margin:.3rem 0}.of{font-size:1rem}
.list .li.static{cursor:default}.list .li.static:hover{background:transparent}
.dd-head{padding:.3rem .7rem}
fieldset.card{border:1px solid var(--line);min-width:0}fieldset[disabled]{opacity:.7}

.strip{display:flex;flex-wrap:wrap;gap:.5rem}
.pic-t{position:relative;margin:0;width:88px;height:88px;border-radius:12px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line)}
.pic-t.cover{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.pic-t img{width:100%;height:100%;object-fit:cover;display:block}
.th.framed{position:relative;overflow:hidden;display:block}
.pic.framed{position:relative;overflow:hidden;display:block}
.pic.framed.sq{aspect-ratio:1/1;max-width:420px}
.pic-b{position:absolute;border:0;border-radius:8px;cursor:pointer;font-size:.75rem;line-height:1;padding:.2rem .35rem;background:rgba(10,8,20,.62);color:#fff;backdrop-filter:blur(4px)}
.pic-b.star{inset-block-start:4px;inset-inline-start:4px}
.pic-b.del{inset-block-start:4px;inset-inline-end:4px}
.pic-b.tagc{inset-block-end:4px;inset-inline-start:4px;background:var(--accent);color:var(--accent-ink);cursor:default}
.pic-b.fo{inset-block-end:4px;inset-inline-end:4px}
.pic-b.fo.on{background:var(--accent);color:var(--accent-ink)}
.pic-t video{width:100%;height:100%;object-fit:cover;display:block}
.pic-b.vtag{inset-block-start:4px;left:50%;transform:translateX(-50%);cursor:default}
.pic-b.mv{inset-block-end:30px;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:0;background:none;backdrop-filter:none}
.pic-b.mv button{border:0;border-radius:8px;cursor:pointer;font-size:.8rem;line-height:1;padding:.25rem .45rem;background:rgba(10,8,20,.62);color:#fff}
.fview{position:relative;width:min(100%,420px);aspect-ratio:1/1;overflow:hidden;border-radius:10px;touch-action:none;cursor:grab;background:#111}
.fview:active{cursor:grabbing}
.fview img{position:absolute;left:0;top:0;max-width:none;user-select:none;-webkit-user-drag:none;transform-origin:0 0}
.pic-t.add{display:grid;place-items:center;align-content:center;gap:2px;border-style:dashed;cursor:pointer;color:var(--muted);font-size:1.6rem}.pic-t.add small{font-size:.8rem;line-height:1;opacity:.85}
.pic-t.add:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.pic-t.add input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* --- sheet (editor) --------------------------------------------------------------- */
.sheet{position:fixed;inset:0;z-index:50;display:grid;place-items:end center;background:rgba(10,8,20,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .25s var(--ease)}
.sheet[hidden]{display:none}
.sheet.closing{animation:fade .2s var(--ease) reverse forwards}
.sheet-card{width:min(100%,640px);max-height:92dvh;overflow:auto;background:var(--surface);border-radius:22px 22px 0 0;padding:1.2rem 1.3rem calc(1.4rem + env(safe-area-inset-bottom));box-shadow:var(--shadow-lg);
  animation:rise .38s var(--spring)}
.sheet.closing .sheet-card{animation:drop .2s var(--ease) forwards}
@media (min-width:720px){.sheet{place-items:center}.sheet-card{border-radius:22px;animation:pop .3s var(--spring)}}
.sheet-card h2{margin-bottom:.4rem}
.sheet .grab{width:40px;height:4px;border-radius:4px;background:var(--line-2);margin:0 auto .8rem}
@media (min-width:720px){.sheet .grab{display:none}}
.sheet .foot{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.1rem;position:sticky;bottom:-1.4rem;background:var(--surface);padding:.8rem 0 .2rem}

/* --- toast, palette, skeleton --------------------------------------------------- */
.toast{position:fixed;bottom:calc(1.2rem + env(safe-area-inset-bottom));inset-inline-start:50%;transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:.6rem 1rem;border-radius:12px;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .35s var(--spring);z-index:60;max-width:min(92vw,480px);box-shadow:var(--shadow-lg);font-size:.92rem}
[dir=rtl] .toast{transform:translate(50%,20px)}
.toast.on{opacity:1;transform:translate(-50%,0)}[dir=rtl] .toast.on{transform:translate(50%,0)}
.toast.bad{background:var(--bad);color:#fff}.toast.ok{background:var(--ok);color:#fff}
@media (max-width:920px){.toast{bottom:calc(5.2rem + env(safe-area-inset-bottom))}}
.palette{position:fixed;inset:0;z-index:55;display:grid;place-items:start center;padding-top:12vh;background:rgba(10,8,20,.42);backdrop-filter:blur(6px);animation:fade .2s var(--ease)}
.palette[hidden]{display:none}
.palette .box{width:min(92vw,560px);background:var(--surface);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden;animation:pop .25s var(--spring)}
.palette input{border:0;border-radius:0;border-bottom:1px solid var(--line);padding:.9rem 1.1rem;font-size:1.05rem;box-shadow:none!important;height:auto}
.palette .res{max-height:50vh;overflow:auto;padding:.4rem}
.palette .res button{display:flex;width:100%;gap:.6rem;align-items:center;border:0;background:none;padding:.6rem .8rem;border-radius:10px;cursor:pointer;text-align:start;color:inherit}
.palette .res button:hover,.palette .res button.sel{background:var(--accent-soft)}
.palette .res .k{margin-inline-start:auto;color:var(--muted);font-size:.8rem}
.skeleton{display:grid;gap:.8rem}
.sk-line,.sk-card{border-radius:12px;background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.sk-line{height:28px;width:40%}.sk-card{height:120px}

/* --- login ----------------------------------------------------------------------- */
.page-login{display:grid;place-items:center;min-height:100dvh;overflow:hidden}
.login{position:relative;width:100%;min-height:100dvh;display:grid;place-items:center;padding:1rem}
.login-card{position:relative;z-index:1;width:min(92vw,420px);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line);border-radius:24px;padding:2rem 1.8rem;box-shadow:var(--shadow-lg);text-align:center;animation:rise .6s var(--spring)}
.login-card .mark{width:44px;height:44px;margin-bottom:.8rem}
.login-card h1{font-size:1.5rem}
.login-card .lead{color:var(--muted);margin:.5rem 0 1.4rem}
.login-card .flash{background:var(--warn-soft);color:var(--warn);border-radius:10px;padding:.5rem .7rem}
.btn.big{width:100%;padding:.8rem 1rem;font-size:1.02rem;justify-content:center}
.login-card .btn.big{margin-top:.2rem}
.email-login{display:flex;gap:.5rem;margin-top:.6rem}#otherLogin .btn.big{width:100%}.email-login input{flex:1;min-width:0}
.or{display:flex;align-items:center;gap:.7rem;margin:1.1rem 0 .3rem;color:var(--muted);font-size:.84rem}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.orbs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.orbs i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:drift 14s ease-in-out infinite alternate}
.orbs i:nth-child(1){width:46vmax;height:46vmax;background:var(--accent-soft-2);top:-20vmax;inset-inline-start:-10vmax}
.orbs i:nth-child(2){width:38vmax;height:38vmax;background:#c7d2fe;bottom:-16vmax;inset-inline-end:-8vmax;animation-delay:-5s}
.orbs i:nth-child(3){width:28vmax;height:28vmax;background:#fbcfe8;bottom:10vmax;inset-inline-start:30vmax;animation-delay:-9s}
:root[data-theme=dark] .orbs i:nth-child(2){background:#312e81}:root[data-theme=dark] .orbs i:nth-child(3){background:#4a1d4a}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .orbs i:nth-child(2){background:#312e81}:root:not([data-theme=light]) .orbs i:nth-child(3){background:#4a1d4a}}

/* --- motion ----------------------------------------------------------------------- */
.reveal{animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0)*45ms)}
.screen{animation:fade .3s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes drop{to{opacity:0;transform:translateY(20px)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes drift{to{transform:translate(8vmax,6vmax) scale(1.08)}}
::view-transition-old(root){animation:fade .18s var(--ease) reverse}
::view-transition-new(root){animation:rise .28s var(--ease)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
.gridwrap{overflow-x:auto;margin:.6rem -.2rem;-webkit-overflow-scrolling:touch}
table.igrid{width:100%;border-collapse:collapse;font-size:.9rem}
table.igrid th{text-align:start;font-weight:600;color:var(--muted);padding:.4rem;border-bottom:1px solid var(--line);white-space:nowrap}
table.igrid td{padding:.35rem .4rem;border-bottom:1px solid var(--line);vertical-align:top}
table.igrid tr:not(.on) td{opacity:.62}table.igrid tr:not(.on) td:first-child{opacity:1}
table.igrid input[type=checkbox]{width:1.35rem;height:1.35rem;margin:.55rem .2rem 0;cursor:pointer}table.igrid input[type=checkbox]:disabled{cursor:default}
table.igrid th:first-child,table.igrid td:first-child{width:2.2rem;text-align:center}table.igrid th input[type=checkbox]{margin:0 .2rem}
table.igrid input:not([type=checkbox]){min-width:9rem;padding:.3rem .45rem;font-size:.88rem}
table.igrid input.num{min-width:4rem;width:4.5rem}
table.igrid .gth{width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--surface-2);display:grid;place-items:center}
table.igrid .what{min-width:12rem;font-size:.84rem}
table.igrid .gpic{position:relative;width:52px}
table.igrid .gvid{position:absolute;bottom:.2rem;inset-inline-end:.1rem;font-size:.8rem;background:var(--surface);border-radius:6px;padding:0 .15rem}
.chip .cnt{display:inline-block;min-width:1.4em;margin-inline-start:.35rem;padding:0 .4em;border-radius:999px;background:var(--surface-2);font-size:.8em;text-align:center}
.chip.on .cnt{background:rgba(255,255,255,.25)}
.gsel{text-align:center;margin:.5rem 0;padding:.45rem .6rem;border-radius:10px;background:var(--accent-soft)}
.gpager{align-items:center;gap:.4rem}
/* a list's search box and its choices (app.js FINDS) */
.findbar{margin:0 0 .6rem}.findbar select{max-width:14rem}
.findfoot{text-align:center;margin:.5rem 0}
@media (max-width:600px){.findbar input[type=search]{flex-basis:100%}}
.list .li > .tickgap{width:1.35rem;flex:none}
.list .li > input[type=checkbox]{width:1.35rem;height:1.35rem;flex:none;cursor:pointer}
.phead{flex-wrap:wrap}.phead .pbar{gap:.35rem;flex-wrap:wrap;width:100%}
.list .gpager{justify-content:center;margin-top:.6rem}
.gfoot{flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.drop.busy{opacity:.6;pointer-events:none}
/* 🎵 music: one button that picks the file (a drop box too), a player, small chips, one choice */
.drop.pick{display:flex;align-items:center;justify-content:center;gap:.4rem;border-style:solid;border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600;padding:.75rem 1rem}
.row .drop.pick{flex:1;padding:.5rem .8rem;font-size:.9rem}
.music-head{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin:.9rem 0 .5rem}
.music-play{width:100%;height:40px;margin-bottom:.5rem}
/* ✂️ the stretch of the song that plays: one bar, two handles */
.cut{display:flex;flex-direction:column;gap:.15rem;margin:-.1rem 0 .6rem}
.cut-track{position:relative;height:30px}
.cut-track::before{content:"";position:absolute;inset-inline:11px;top:13px;height:4px;border-radius:2px;background:var(--line)}
.cut-fill{position:absolute;top:13px;height:4px;border-radius:2px;background:var(--accent)}
.cut-track input{position:absolute;inset:0;width:100%;height:30px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.cut-track input::-webkit-slider-runnable-track{background:none;height:30px}
.cut-track input::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;width:22px;height:22px;margin-top:4px;border-radius:50%;background:var(--surface);border:2px solid var(--accent);box-shadow:var(--shadow);cursor:grab}
.cut-track input::-moz-range-track{background:none}
.cut-track input::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border-radius:50%;background:var(--surface);border:2px solid var(--accent);cursor:grab}
.cut-t{color:var(--muted)}
.seg{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:3px;gap:3px}
.seg button{flex:1;border:0;background:none;border-radius:9px;padding:.45rem .3rem;font:inherit;font-size:.85rem;color:var(--muted);cursor:pointer}
.seg button.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.18)}

/* help mode (app.js HELP): everything that can be explained is marked, and a
   click shows its note in a pop-up beside it -- a card along the bottom on a phone */
.helpmode :is(#main,.sheet,#side,#bottomNav,.top) :is(button,a,.chip,.li,.item,label.switch,input,select,textarea,.pic-t,.drop){cursor:help;outline:1.5px dashed var(--accent);outline-offset:2px}
.helpmode :is(#helpBtn,[data-hm-toggle]){background:var(--accent);color:var(--accent-ink)}
.sheet-card{position:relative}
.sheet-help{position:absolute;top:.7rem;inset-inline-end:.8rem}
.help-bar{position:fixed;top:6px;inset-inline:0;margin:0 auto;min-height:44px;width:max-content;max-width:calc(100% - 32px);z-index:60;display:flex;align-items:center;gap:.7rem;
  padding:.35rem .5rem;padding-inline-start:1rem;border-radius:14px;background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-lg);font-size:.9rem;animation:rise .25s var(--ease)}
.help-pop{position:fixed;z-index:70;width:min(380px,calc(100vw - 24px));max-height:70dvh;overflow:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line-2);
  border-radius:16px;padding:.9rem 1rem;box-shadow:var(--shadow-lg);animation:pop .18s var(--ease)}
.help-pop[hidden]{display:none}
.help-pop .hp-name{display:block;margin-bottom:.25rem}
.help-pop p{margin:.3rem 0}
.help-pop .row{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:.6rem}
.help-pop .hp-more{border-top:1px solid var(--line);margin-top:.5rem;padding-top:.4rem;font-size:.92rem}
.help-pop .hp-more ul,.help-pop .hp-more ol{padding-inline-start:1.2rem;margin:.3rem 0}
.help-pop .hp-more .btn{display:inline-block;padding:0 .4rem;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);font-size:.88em;white-space:nowrap}
/* the Instagram export, step by step, on the import page: the manual's own text (instagram_export.steps) */
.steps{margin:.6rem 0;border:1px solid var(--line);border-radius:10px;padding:.5rem .8rem}
.steps summary{cursor:pointer;font-weight:600}
.steps .help-body{font-size:.94rem;margin-top:.4rem}
.steps .help-body ul,.steps .help-body ol{padding-inline-start:1.2rem;margin:.3rem 0}
.steps .help-body li{margin:.15rem 0}
.steps .help-body .btn{display:inline-block;padding:0 .4rem;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);font-size:.88em;white-space:nowrap}
.help-bar .btn{background:var(--surface);color:var(--ink);border-color:transparent}
.help-bar .hb-short{display:none}
@media (max-width:640px){.help-bar .hb-long{display:none}.help-bar .hb-short{display:inline}}
@media (max-width:639px){.help-pop{left:12px!important;right:12px;top:auto!important;bottom:calc(12px + env(safe-area-inset-bottom));width:auto}}

.prev{margin:.75rem 0;min-height:4rem;display:grid;place-items:center}
.prev img{max-width:min(100%,360px);border-radius:12px;display:block}
.samples{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem;margin:.75rem 0}
.samples figure{margin:0;display:flex;flex-direction:column;gap:.4rem}
.samples img{width:100%;border-radius:10px;display:block}

/* a press at work with no button of its own: a thin bar along the top (app.js press) */
body.working::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1000;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 40% 100%;
  background-repeat: no-repeat; animation: workbar 1.1s linear infinite; }
@keyframes workbar { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { body.working::before { animation: none; background: var(--accent); opacity: .6; } }

/* 💳 the brand's subscription beside its publishing status (app.js renderTop) */
.pill.tier { cursor: pointer; background: var(--accent-soft); color: var(--ink); }
@media (max-width: 560px) { .pill.tier { display: none; } }   /* the phone's bar is full: Account shows it */

/* a toast longer than a few words stays until it is closed (app.js toast) */
.toast.stays{pointer-events:auto;cursor:pointer;display:flex;align-items:flex-start;gap:.6rem;max-width:min(560px,calc(100vw - 32px))}
.toast.stays .x{background:none;border:0;color:inherit;font-size:1rem;line-height:1;padding:.1rem .2rem;cursor:pointer;opacity:.8}
.toast.stays .x:hover{opacity:1}
.toast:not(.on){pointer-events:none}

/* ⏸ paused: one line and ▶ Resume; the rest under ⓘ */
.pause-bar{padding:.6rem .9rem}.pause-bar .row{flex-wrap:nowrap;align-items:center;gap:.5rem}
.pause-bar .grow{font-weight:600;font-size:.93rem;line-height:1.45}.pause-bar .pause-more{margin:.5rem 0 0;color:var(--muted)}
.pause-bar .icon.sm{width:32px;height:32px;flex:none}
/* 📲 the install offer: a card that rises above the tab bar */
.install-card{position:fixed;z-index:40;inset-inline:12px;bottom:calc(84px + env(safe-area-inset-bottom));display:flex;gap:.8rem;align-items:flex-start;padding:.9rem 1rem;border-radius:20px;
  background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-lg);transform:translateY(24px);opacity:0;transition:transform .45s var(--spring),opacity .3s}
.install-card.on{transform:none;opacity:1}
.install-card img{width:48px;height:48px;border-radius:12px;flex:none}
.install-card p{margin:.2rem 0 .6rem}
@media (min-width:921px){.install-card{inset-inline:auto 24px;bottom:24px;width:380px}}
/* opened from the home screen: the status bar sits over the page's top */
@media (display-mode:standalone){:root{--top:calc(56px + env(safe-area-inset-top))}.top{padding-top:env(safe-area-inset-top)}}
/* 💳 the plans: each its own tile, a step apart (operator, 2026-10-18: "too compact") */
.plans{display:grid;gap:.7rem;margin-top:.8rem}
.plans .li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem .9rem;padding:.85rem 1rem;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.plans .li.cur{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft)}
.plans .li .body{flex:1 1 220px;min-width:0}.plans .li details{margin-top:.35rem}
/* 🗂 My music: a song's name typed in place, its player beside */
.song-name{width:100%;margin-bottom:.35rem}.li .body audio{width:100%;height:34px}
#musPick,#mdSong{width:100%;margin-bottom:.5rem}

/* 😀 a story's sticker editor (web/static/marks.js): the story on the left,
   its tools beside it; one column on a phone, the story first */
.page-marks{min-height:100dvh}
.mk{max-width:980px;margin:0 auto;padding:0 var(--gutter) 2rem}
.mk-top{display:flex;align-items:center;gap:.6rem;height:var(--top)}
.mk-top .mark{width:26px;height:26px;fill:var(--accent)}
.mk-title{font-size:1.05rem}
.mk-lead{margin:.2rem 0 .8rem}
.mk-frames{margin:.4rem 0 .8rem}
.mk-work{display:grid;grid-template-columns:minmax(0,auto) minmax(260px,1fr);gap:1.2rem;align-items:start}
@media (max-width:760px){.mk-work{grid-template-columns:1fr;gap:.6rem}.mk-lead{font-size:.86rem;margin-bottom:.5rem}
  .mk-stage{width:min(100%,calc(56dvh * 9 / 16))!important}.mk-top{height:46px}}
/* a definite width, % only as a cap: the stage's grid column is sized by it (a % of that
   auto column was 0, and the editor showed no picture on a wide screen, 2026-10-22) */
.mk-stage{position:relative;width:min(calc((100dvh - 150px) * 9 / 16),420px);max-width:100%;aspect-ratio:9/16;margin-inline:auto;
  border-radius:14px;overflow:hidden;background:#111;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:var(--shadow-lg)}
.mk-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.mk-layer{position:absolute;inset:0}
.mk-making{display:flex;align-items:center;gap:.6rem;font-weight:600}
.mk-spin{flex:none;width:18px;height:18px;border:2px solid var(--accent);border-color:var(--accent) transparent var(--accent) transparent;border-radius:50%;animation:spin .8s linear infinite}
@media (prefers-reduced-motion:reduce){.mk-spin{animation-duration:2.4s}}
.mk-mark{position:absolute;white-space:nowrap;cursor:grab;line-height:1.22;font-family:"Vazirmatn",system-ui,sans-serif;font-weight:700;
  padding:.06em;border-radius:.3em;outline:2px solid transparent;outline-offset:2px}
.mk-mark.on{outline-color:rgba(255,255,255,.95);box-shadow:0 0 0 4px rgba(124,58,237,.65)}
.mk-mark.emoji{line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.mk-words{text-align:center}
.mk-words:not(.box){-webkit-text-stroke:calc(1em / 16) var(--ol,#111);paint-order:stroke fill}
.mk-words.box{padding:.22em .45em;border-radius:.42em}
.mk-panel label{display:block;margin:.5rem 0 .2rem;font-weight:600;font-size:.9rem}
.mk-panel textarea,.mk-panel input:not([type]){width:100%;font:inherit;font-family:"Vazirmatn",system-ui,sans-serif;padding:.55rem .7rem;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink)}
.mk-panel input[type=range]{width:100%}
.mk-panel .row{margin-top:.7rem}
.mk-check{display:flex!important;align-items:center;gap:.4rem;font-weight:500!important}
.mk-colors{display:flex;flex-wrap:wrap;gap:.45rem;margin:.6rem 0}
.mk-color{width:32px;height:32px;border-radius:50%;border:2px solid var(--line-2);cursor:pointer;padding:0}
.mk-color.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft-2)}
.mk-emojis{display:grid;grid-template-columns:repeat(8,1fr);gap:.25rem}
.mk-emoji{font-size:1.6rem;line-height:1.2;background:none;border:0;border-radius:8px;cursor:pointer;padding:.15rem}
.mk-emoji:hover{background:var(--surface-2)}
.mk-stickers{display:flex;flex-wrap:wrap;gap:.5rem}
.mk-sticker{font:700 1rem/1.3 "Vazirmatn",system-ui,sans-serif;border:0;border-radius:.6em;padding:.4em .8em;cursor:pointer;box-shadow:var(--shadow)}
.mk-foot{margin:1rem 0 .5rem}
.mk-looks{display:flex;flex-wrap:wrap;gap:.5rem}
.mk-looks img{width:140px;aspect-ratio:9/16;object-fit:cover;border-radius:10px}