@font-face{font-family:'JRS Title';src:url(RDRLino-Regular.ttf);font-display:swap}
@font-face{font-family:'JRS Body';src:url(Hapna-Regular.ttf);font-display:swap}

/* ---------- tokens (JRS store theme: charcoal brush cards, white inset edge) ---------- */
:root{
  --bg:#050505;--panel:#0c0c0b;--panel2:#131312;--field:rgba(0,0,0,.44);
  --line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.17);
  --text:#f2eee7;--muted:#c8c3bb;--dim:#85817b;--edge:rgba(255,255,255,.85);
  --danger:#c77f79;--ok:#9db5a7;--warn:#d9bd7e;
  --code-bg:#0a0a09;--tok-kw:#d9a066;--tok-str:#a9c29b;--tok-num:#c9a0dc;--tok-com:#6f6b64;--tok-fn:#f2eee7;--tok-nat:#8fb8c9;
  --title:'JRS Title',Georgia,'Times New Roman',serif;
  --body:'JRS Body','Segoe UI',system-ui,-apple-system,'Noto Sans',Tahoma,sans-serif;
  --mono:'Cascadia Code',Consolas,'SFMono-Regular',Menlo,monospace;
  --card:url(store/card.png);--card-on:url(store/card-active.png);--tab:url(store/tab.png);--tab-on:url(store/tab-active.png);
  --hdr:url(store/ui-header.png);--paper:url(store/panel-background.png);
  --gutter:clamp(14px,4vw,52px);--hdr-h:62px;--z:1;
  --surface:rgba(0,0,0,.42);--hover:rgba(255,255,255,.08);--hover2:rgba(255,255,255,.04);--hover3:rgba(255,255,255,.1);--code-inline:rgba(255,255,255,.07);
  color-scheme:dark;
}
:root[data-theme=light]{
  --bg:#efeae0;--panel:#faf7f0;--panel2:#f1ecdf;--field:#fff;
  --line:rgba(0,0,0,.12);--line2:rgba(0,0,0,.22);
  --text:#1b1a17;--muted:#46433c;--dim:#76716a;--edge:#1b1a17;
  --code-bg:#1b1a17;--card:none;--card-on:none;--tab:none;--tab-on:none;--hdr:none;--paper:none;
  --surface:rgba(255,255,255,.75);--hover:rgba(0,0,0,.06);--hover2:rgba(0,0,0,.035);--hover3:rgba(0,0,0,.08);--code-inline:rgba(0,0,0,.06);
  --danger:#a8433c;--ok:#3d7a5c;--warn:#9a741c;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 24px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.lock{overflow:hidden}
body{margin:0;min-height:calc(100vh / var(--z));background:var(--bg) var(--paper) center top/cover fixed;color:var(--text);font-family:var(--body);font-size:16px;line-height:1.7;
  overflow-x:hidden;overflow-wrap:break-word}
:root[data-theme=light] body{background:var(--bg)}
a{color:var(--text);text-decoration-color:var(--line2);text-underline-offset:3px}
a:hover{text-decoration-color:var(--edge)}
img,svg,video{max-width:100%;height:auto}
code{font-family:var(--mono);font-size:.86em;background:var(--code-inline);border:1px solid var(--line);border-radius:5px;padding:.08em .38em;overflow-wrap:anywhere}
hr{border:0;border-top:1px solid var(--line);margin:28px 0}
:focus-visible{outline:2px solid var(--edge);outline-offset:2px;border-radius:4px}
.skip{position:absolute;inset-inline-start:8px;top:-60px;z-index:100;background:var(--text);color:var(--bg);padding:8px 14px;border-radius:8px}
.skip:focus{top:8px}
[hidden]{display:none!important}
/* scripts without letter-joining must not be letter-spaced or upper-cased */
:lang(ar) *,:lang(fa) *,:lang(hi) *{letter-spacing:0!important;text-transform:none!important}
:lang(ar),:lang(fa){--title:'Segoe UI',Tahoma,'Noto Naskh Arabic',serif;--body:'Segoe UI',Tahoma,'Noto Sans Arabic',system-ui,sans-serif}
:lang(zh){--title:'Microsoft YaHei','PingFang SC','Noto Sans SC',serif;--body:'Microsoft YaHei','PingFang SC','Noto Sans SC',system-ui,sans-serif}
:lang(ja){--title:'Yu Mincho','Hiragino Mincho ProN','Noto Serif JP',serif;--body:'Yu Gothic','Hiragino Sans','Noto Sans JP',system-ui,sans-serif}
:lang(ko){--title:'Malgun Gothic','Noto Sans KR',serif;--body:'Malgun Gothic','Noto Sans KR',system-ui,sans-serif}
:lang(hi){--title:'Nirmala UI','Noto Sans Devanagari',serif;--body:'Nirmala UI','Noto Sans Devanagari',system-ui,sans-serif}
.doc[dir=ltr]{text-align:left}.doc[dir=rtl]{text-align:right}
.doc code,.doc pre{direction:ltr;unicode-bidi:isolate}

/* ---------- announcement + top bar ---------- */
.announce{padding:9px var(--gutter);text-align:center;font-size:14px;background:#1b1a17;border-bottom:1px solid var(--line2);color:var(--text)}
.announce.warn{background:#3b2f16;color:#f3dfae}
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:clamp(8px,1.6vw,18px);min-height:var(--hdr-h);padding:6px var(--gutter);
  padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right));
  background:var(--hdr) center/100% 100% no-repeat,rgba(5,5,5,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line2)}
:root[data-theme=light] .top{background:rgba(250,247,240,.92)}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;flex:none}
.brand img{width:34px;height:34px;border-radius:8px}
.brand b{font-family:var(--title);font-weight:400;letter-spacing:.14em;font-size:19px;text-shadow:0 2px 4px #000}
.brand em{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line2);border-radius:5px;padding:1px 7px}
.search-btn{margin-inline:auto;display:flex;align-items:center;gap:10px;width:min(440px,100%);min-width:0;height:42px;padding:0 12px;border:1px solid var(--line2);
  border-radius:4px;background:var(--field);color:var(--dim);font:inherit;font-size:14px;cursor:pointer;flex:0 1 440px}
.search-btn:hover{border-color:rgba(255,255,255,.35)}
.search-btn span{flex:1;text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--line2);border-radius:5px;padding:1px 6px;color:var(--dim)}
.links{display:flex;align-items:center;gap:clamp(8px,1.4vw,16px);font-size:14px;flex:none;margin-inline-start:auto}
.search-btn + .links{margin-inline-start:0}
.links a.ext{color:var(--muted);text-decoration:none}
.links a.ext:hover{color:var(--text)}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;background:var(--field);border:1px solid var(--line2);color:var(--muted);border-radius:4px;cursor:pointer;font-size:20px;line-height:1;padding:0;flex:none}
.icon-btn:hover{color:var(--text);border-color:rgba(255,255,255,.35)}
.burger{display:none;flex-direction:column;gap:4px;align-content:center}
.burger span{display:block;width:16px;height:2px;background:currentColor;border-radius:2px}
/* store-style button */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 18px;border:0;border-radius:0;color:var(--text);font:inherit;font-size:15px;
  text-decoration:none;text-shadow:0 1px 2px #000;cursor:pointer;background:var(--tab) center/100% 100% no-repeat,#242422;white-space:nowrap}
:root[data-theme=light] .btn{background:#e5dfd1;border:1px solid var(--line2);text-shadow:none}
.btn:hover{filter:brightness(1.14);text-decoration:none}
.btn.primary,.btn.on{color:#fff;background-image:var(--tab-on);box-shadow:inset 3px 0 0 var(--edge),inset 0 -2px 0 rgba(255,255,255,.35);filter:brightness(1.12)}
:root[dir=rtl] .btn.primary,:root[dir=rtl] .btn.on{box-shadow:inset -3px 0 0 var(--edge),inset 0 -2px 0 rgba(255,255,255,.35)}
.btn.danger{color:#ffd9d6;box-shadow:inset 3px 0 0 var(--danger)}
:root[dir=rtl] .btn.danger{box-shadow:inset -3px 0 0 var(--danger)}
.btn.small{min-height:38px;padding:6px 14px;font-size:14px}
.btn:disabled{opacity:.5;cursor:default;filter:none}

#accountBtn .uico{display:none}
#accountBtn .lbl{max-width:150px;overflow:hidden;text-overflow:ellipsis}
@media(max-width:480px){#accountBtn{width:40px;min-height:40px;padding:0}#accountBtn .lbl{display:none}#accountBtn .uico{display:block}}

/* txAdmin button + sidebar tabs + useful links */
.btn.txadmin{background:#0e8a6a;background-image:none;color:#fff;text-shadow:none;border-radius:999px;min-height:38px;padding:6px 16px;font-size:14px;gap:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);filter:none}
.btn.txadmin:hover{background:#12a07c;filter:none}
.btn.txadmin span{font-size:18px;line-height:1}
:root[dir=rtl] .btn.txadmin span{transform:scaleX(-1)}
.side .side-tx{display:none;margin:0 0 14px;width:100%}
.side-tabs{display:flex;gap:4px;margin:0 0 16px;border-bottom:1px solid var(--line)}
.side .side-tabs a{flex:1 1 auto;text-align:center;white-space:nowrap;background:none;opacity:1;min-height:0;margin:0;padding:8px 6px;color:var(--dim);border-bottom:2px solid transparent;font-weight:700;font-size:14px;box-shadow:none;filter:none}
.side .side-tabs a:hover{color:var(--text)}
.side .side-tabs a.on{color:var(--text);border-bottom-color:var(--edge);background:none;box-shadow:none}
.side a.extlink{display:flex;align-items:center;gap:10px;padding:7px 10px;opacity:1}
.ext-ico{flex:none;display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line2);border-radius:8px;background:var(--surface);color:var(--muted)}
.side a.extlink:hover .ext-ico{color:var(--text);border-color:var(--edge)}

.auth-tabs{margin:0 0 14px;gap:8px}
.auth-tabs .btn{flex:1 1 0;min-height:46px;font-size:16px}
@media(max-width:640px){#signupBtn{display:none}}

/* language menu */
.lang{position:relative}
.lang summary{display:flex;align-items:center;gap:7px;list-style:none;cursor:pointer;min-height:40px;padding:0 10px;border:1px solid var(--line2);border-radius:4px;background:var(--field);color:var(--muted);font-size:14px;user-select:none}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover{color:var(--text)}
.lang-list{position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:60;width:210px;max-width:calc(100vw - 24px);max-height:min(70vh,440px);overflow:auto;padding:6px;
  background:#0d0d0c var(--paper) center/cover;border:1px solid var(--line2);box-shadow:0 20px 60px rgba(0,0,0,.7)}
:root[data-theme=light] .lang-list{background:#faf7f0}
.lang-list a{display:block;padding:9px 12px;color:var(--muted);text-decoration:none;font-size:14.5px;border-inline-start:2px solid transparent}
.lang-list a:hover{background:var(--hover);color:var(--text)}
.lang-list a.on{color:var(--text);border-inline-start-color:var(--edge);font-weight:700}

/* ---------- layout ---------- */
.shell{display:grid;grid-template-columns:344px minmax(0,1fr) 240px;max-width:1720px;margin:0 auto}
.side{position:sticky;top:var(--hdr-h);height:calc(100vh / var(--z) - var(--hdr-h));overflow:auto;overscroll-behavior:contain;padding:28px 20px 40px max(28px,env(safe-area-inset-left));border-inline-end:1px solid var(--line)}
:root[dir=rtl] .side{padding:26px max(22px,env(safe-area-inset-right)) 40px 14px}
.nav-group{margin-bottom:24px}
.nav-title{font-family:var(--title);letter-spacing:.14em;text-transform:uppercase;font-size:12.5px;color:var(--dim);margin:0 0 8px 10px;margin-inline:10px 0}
.side a{display:block;padding:11px 18px;margin-bottom:4px;color:var(--muted);font-size:15.5px;text-decoration:none;background:var(--tab) center/100% 100% no-repeat;border-inline-start:0;min-height:40px;overflow-wrap:anywhere}
:root[data-theme=light] .side a{background:none;border-radius:6px}
.side a{background-color:transparent;opacity:.82}
.side a:hover{opacity:1;color:var(--text);filter:brightness(1.15)}
.side a.on{opacity:1;color:#fff;background-image:var(--tab-on);box-shadow:inset 3px 0 0 var(--edge);filter:brightness(1.18);font-weight:700}
:root[dir=rtl] .side a.on{box-shadow:inset -3px 0 0 var(--edge)}
:root[data-theme=light] .side a.on{background:rgba(0,0,0,.08);color:var(--text)}
.main{padding:clamp(22px,4vw,40px) var(--gutter) 90px;min-width:0;max-width:1060px;width:100%;margin-inline:auto}
.crumb{font-family:var(--title);letter-spacing:.14em;text-transform:uppercase;font-size:12.5px;color:var(--dim);margin-bottom:6px}
.page-title{font-family:var(--title);font-weight:400;font-size:clamp(28px,4.4vw,42px);letter-spacing:.07em;text-transform:uppercase;margin:0 0 6px;line-height:1.15;text-shadow:0 2px 4px #000}
:root[data-theme=light] .page-title{text-shadow:none}
.sub{color:var(--muted);font-size:clamp(16px,2vw,18px);margin:0 0 22px}
.toc{position:sticky;top:var(--hdr-h);align-self:start;max-height:calc(100vh / var(--z) - var(--hdr-h));overflow:auto;padding:38px 18px 40px 6px;font-size:13px}
:root[dir=rtl] .toc{padding:38px 6px 40px 18px}
.toc-title{font-family:var(--title);letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--dim);margin-bottom:10px}
.toc a{display:block;color:var(--dim);padding:3px 10px;border-inline-start:1px solid var(--line);line-height:1.45;text-decoration:none;overflow-wrap:anywhere}
.toc a.l3{padding-inline-start:22px}
.toc a:hover,.toc a.on{color:var(--text);border-inline-start-color:var(--edge)}
.toc:not(:has(a)){display:none}

/* ---------- doc typography ---------- */
.doc h1{font-family:var(--title);font-weight:400;font-size:clamp(30px,4.6vw,40px);letter-spacing:.07em;text-transform:uppercase;margin:.2em 0 .4em;text-shadow:0 2px 4px #000}
.doc h2{font-family:var(--title);font-weight:400;font-size:clamp(22px,3vw,27px);letter-spacing:.07em;text-transform:uppercase;margin:2em 0 .6em;padding-bottom:.35em;border-bottom:1px solid var(--line)}
.doc h3{font-family:var(--title);font-weight:400;font-size:clamp(18px,2.4vw,21px);letter-spacing:.05em;margin:1.6em 0 .5em}
.doc h4{font-size:17px;margin:1.4em 0 .4em}
.doc p,.doc li{color:var(--muted)}
.doc strong{color:var(--text)}
.doc ul,.doc ol{padding-inline-start:1.5em}
.doc .anchor{opacity:0;margin-inline-start:8px;color:var(--dim);font-size:.7em;text-decoration:none}
.doc h2:hover .anchor,.doc h3:hover .anchor,summary:hover .anchor,.anchor:focus-visible{opacity:1}
@media(hover:none){.doc .anchor{opacity:.5}}
.tbl{overflow-x:auto;margin:16px 0;border:1px solid var(--line2);background:var(--surface);-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:520px}
th,td{padding:10px 14px;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--title);font-weight:400;letter-spacing:.08em;text-transform:uppercase;font-size:12.5px;color:var(--dim);background:var(--hover2)}
tr:last-child td{border-bottom:0}
.frame{margin:18px 0;text-align:center}
.frame img{border-radius:18px;border:1px solid var(--line2)}

/* callouts */
.callout{display:flex;gap:12px;margin:18px 0;padding:14px 16px;border:1px solid var(--line2);border-inline-start:3px solid var(--edge);background:var(--surface)}
.callout b{font-family:var(--title);letter-spacing:.1em;text-transform:uppercase;font-size:12.5px;color:var(--text);padding-top:3px;flex:none}
.callout>div{min-width:0}
.callout>div>*:first-child{margin-top:0}.callout>div>*:last-child{margin-bottom:0}
.callout.warning{border-inline-start-color:var(--warn)}.callout.warning b{color:var(--warn)}
.callout.tip{border-inline-start-color:var(--ok)}.callout.tip b{color:var(--ok)}
.callout.notice{margin-top:0}

/* store cards */
.cards{display:grid;gap:12px;margin:20px 0;grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cards.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{display:flex;gap:14px;padding:16px 18px;color:var(--muted);text-decoration:none;background:var(--card) center/100% 100% no-repeat,#1a1a19;transition:filter .15s,transform .15s;min-width:0}
:root[data-theme=light] .card{background:var(--panel);border:1px solid var(--line2)}
a.card:hover{filter:brightness(1.18);transform:translateY(-1px);background-image:var(--card-on);box-shadow:inset 3px 0 0 var(--edge)}
:root[dir=rtl] a.card:hover{box-shadow:inset -3px 0 0 var(--edge)}
.card .card-t{margin:0 0 4px;font-family:var(--title);font-weight:400;font-size:18px;letter-spacing:.06em;color:var(--text);text-shadow:0 1px 2px #000}
.card p{margin:0;font-size:14.5px}
.card-ico{flex:none;width:38px;height:38px;border:1px solid var(--line2);display:grid;place-items:center;color:var(--text);background:var(--surface)}
.card-body{min-width:0}.card-body>*:last-child{margin-bottom:0}

/* accordion */
.acc{margin:10px 0;border:1px solid var(--line2);background:var(--surface);overflow:hidden}
.acc summary{display:flex;align-items:center;gap:10px;padding:12px 16px;min-height:48px;cursor:pointer;list-style:none;font-weight:700;color:var(--text);user-select:none;background:var(--tab) center/100% 100% no-repeat}
:root[data-theme=light] .acc summary{background:var(--panel2)}
.acc summary::-webkit-details-marker{display:none}
.acc summary>span{min-width:0;overflow-wrap:anywhere}
.acc summary::after{content:'';margin-inline-start:auto;flex:none;width:8px;height:8px;border-inline-end:2px solid var(--dim);border-bottom:2px solid var(--dim);transform:rotate(45deg);transition:transform .15s;order:5}
.acc[open] summary::after{transform:rotate(-135deg)}
.acc[open] summary{background-image:var(--tab-on);box-shadow:inset 3px 0 0 var(--edge)}
:root[dir=rtl] .acc[open] summary{box-shadow:inset -3px 0 0 var(--edge)}
.acc summary .anchor{order:4;margin-inline-start:6px}
.acc summary .ic{color:var(--dim);flex:none}
.acc summary:hover{filter:brightness(1.15)}
.acc-body{padding:4px 18px 16px;border-top:1px solid var(--line)}
.acc-body>*:first-child{margin-top:14px}
.param{padding:12px 0;border-bottom:1px dashed var(--line)}
.param:last-of-type{border-bottom:0}
.param-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.param-head code{background:var(--hover3);color:var(--text);font-weight:700}
.ptype{font-family:var(--mono);font-size:12px;color:var(--dim)}
.req{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 50%,transparent);border-radius:20px;padding:0 8px}
.param-body p{margin:.3em 0 0;font-size:14.5px}

/* tabs */
.tabs{margin:18px 0;border:1px solid var(--line2);background:var(--surface)}
.tab-list{display:flex;gap:2px;padding:6px 8px 0;border-bottom:1px solid var(--line);background:var(--hover2);overflow-x:auto;scrollbar-width:thin}
.tab-btn{background:none;border:0;border-bottom:2px solid transparent;color:var(--dim);font:inherit;font-size:14px;padding:10px 14px;min-height:42px;cursor:pointer;white-space:nowrap}
.tab-btn:hover{color:var(--text)}
.tab-btn.on{color:var(--text);border-bottom-color:var(--edge);font-weight:700}
.tab-pane{display:none;padding:6px 18px 14px;min-width:0}
.tab-pane.on{display:block}

.tabs.many .tab-list{flex-wrap:wrap;overflow:visible;gap:4px;padding:10px 10px 0}
.tabs.many .tab-btn{border:1px solid var(--line);border-radius:var(--r-sm,10px);margin-bottom:4px;font-family:var(--mono);font-size:13px;padding:6px 12px;min-height:36px}
.tabs.many .tab-btn.on{border-color:var(--edge);background:var(--hover)}

/* code */
.code{margin:16px 0;border:1px solid var(--line2);background:var(--code-bg);overflow:hidden;direction:ltr;text-align:left}
.tab-pane>.code{margin:12px -18px 0;border-width:1px 0 0}
.code-title{padding:8px 14px;font-family:var(--mono);font-size:12.5px;color:#a6a199;border-bottom:1px solid rgba(255,255,255,.08)}
.code-bar{display:flex;justify-content:space-between;align-items:center;padding:6px 10px 0 14px;min-height:8px}
.code-lang{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6f6b64}
.copy{margin-inline-start:auto;background:none;border:1px solid rgba(255,255,255,.14);color:#a6a199;border-radius:6px;font:inherit;font-size:12px;padding:3px 10px;min-height:28px;cursor:pointer;opacity:.6}
.code:hover .copy,.copy:focus-visible{opacity:1}.copy:hover{color:#fff;border-color:rgba(255,255,255,.4)}
pre{margin:0;padding:8px 16px 16px;overflow:auto;font-family:var(--mono);font-size:13.5px;line-height:1.6;color:#f2eee7;tab-size:4;-webkit-overflow-scrolling:touch}
pre code{background:none;border:0;padding:0;font-size:inherit;color:inherit;overflow-wrap:normal}
.tk-kw{color:var(--tok-kw)}.tk-str{color:var(--tok-str)}.tk-num{color:var(--tok-num)}.tk-com{color:var(--tok-com);font-style:italic}
.tk-fn{color:var(--tok-fn);font-weight:700}.tk-nat{color:var(--tok-nat)}

/* prev / next, footer */
.pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:48px}
.pn a{display:block;padding:14px 18px;color:var(--text);text-decoration:none;background:var(--card) center/100% 100% no-repeat,#1a1a19;min-width:0;overflow-wrap:anywhere}
.pn a:hover{filter:brightness(1.18)}
.pn small{display:block;color:var(--dim);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.pn .next{text-align:end}
.foot{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);color:var(--dim);font-size:13px}

/* widgets: feedback, comments, forms */
.widget{margin-top:40px;padding:18px;border:1px solid var(--line2);background:var(--surface)}
.widget h2{margin:0 0 12px;font-family:var(--title);font-weight:400;font-size:19px;letter-spacing:.08em;text-transform:uppercase;border:0;padding:0}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.field{display:block;width:100%;background:var(--field);border:1px solid var(--line);color:var(--text);padding:10px 12px;font:inherit;font-size:16px;outline:none;min-height:44px;border-radius:0}
.field:focus{border-color:rgba(255,255,255,.4)}
textarea.field{resize:vertical;min-height:84px;line-height:1.5}
label.lbl{display:block;margin:14px 0 6px;font-size:14px;color:var(--muted)}
.hint{font-size:13px;color:var(--dim);margin:6px 0 0}
.msg{margin:12px 0;padding:10px 14px;border:1px solid var(--line2);border-inline-start:3px solid var(--edge);background:var(--surface);font-size:14.5px}
.msg.err{border-inline-start-color:var(--danger);color:#ffd9d6}.msg.ok{border-inline-start-color:var(--ok)}
.comment{padding:12px 0;border-top:1px solid var(--line)}
.comment:first-of-type{border-top:0}
.comment .who{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:13px;color:var(--dim)}
.comment .who b{color:var(--text);font-size:14.5px}
.comment p{margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted)}
.badge{font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line2);padding:0 7px;color:var(--muted)}
.panel{margin:0 0 18px;padding:18px;border:1px solid var(--line2);background:var(--card) center/100% 100% no-repeat,#151514}
:root[data-theme=light] .panel{background:var(--panel)}
.panel h2{margin:0 0 10px;font-family:var(--title);font-weight:400;font-size:19px;letter-spacing:.08em;text-transform:uppercase;border:0;padding:0}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat{padding:14px;border:1px solid var(--line2);background:var(--surface)}
.stat b{display:block;font-size:26px;font-family:var(--title);color:var(--text)}
.stat span{font-size:13px;color:var(--dim)}
.seg{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.list li:first-child{border-top:0}
.app-root{min-height:40vh}
.editor-area{width:100%;min-height:50vh;font-family:var(--mono);font-size:13.5px;line-height:1.55;tab-size:2;white-space:pre;overflow:auto}
select.field{appearance:auto}

/* search */
.modal{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.72);backdrop-filter:blur(3px);display:flex;justify-content:center;align-items:flex-start;padding:max(8vh,12px) 12px 12px}
.modal-box{width:min(660px,100%);background:#0d0d0c var(--paper) center/cover;border:1px solid var(--line2);box-shadow:0 30px 80px rgba(0,0,0,.7);overflow:hidden;max-height:calc(100vh - 24px);display:flex;flex-direction:column}
:root[data-theme=light] .modal-box{background:#faf7f0}
.modal-head{display:flex;align-items:center;gap:8px;padding-inline-end:8px;border-bottom:1px solid var(--line)}
#q{flex:1;min-width:0;padding:18px 20px;background:none;border:0;color:var(--text);font:inherit;font-size:17px;outline:none}
#results{overflow:auto;padding:8px}
#results a{display:block;padding:10px 14px;color:var(--text);text-decoration:none;overflow-wrap:anywhere}
#results a:hover,#results a.sel{background:var(--hover);box-shadow:inset 3px 0 0 var(--edge)}
:root[dir=rtl] #results a:hover,:root[dir=rtl] #results a.sel{box-shadow:inset -3px 0 0 var(--edge)}
#results small{display:block;color:var(--dim);font-size:12px}
#results .none{padding:18px;color:var(--dim)}
.scrim{position:fixed;inset:0;z-index:35;background:rgba(0,0,0,.6)}


/* ---------- rounded look + wide screens (2K / 4K) ---------- */
:root{--r:14px;--r-sm:10px}
.card,.acc,.panel,.widget,.tabs,.code,.callout,.tbl,.modal-box,.msg,.stat,.lang-list,.pn a,.frame img{border-radius:var(--r);overflow:hidden}
.btn,.search-btn,.icon-btn,.field,.lang summary,.ext-ico,.side a,.side-tabs a,#results a,.tab-btn{border-radius:var(--r-sm)}
.callout{border-inline-start-width:3px}
.tab-list{border-radius:var(--r) var(--r) 0 0}
.code{border-radius:var(--r)}
.btn.txadmin{border-radius:999px}
.badge,.req{border-radius:999px}
.card{box-shadow:0 10px 30px rgba(0,0,0,.35)}
a.card:hover{box-shadow:inset 3px 0 0 var(--edge),0 14px 40px rgba(0,0,0,.5)}
:root[dir=rtl] a.card:hover{box-shadow:inset -3px 0 0 var(--edge),0 14px 40px rgba(0,0,0,.5)}
.side{scrollbar-width:thin}

@media(min-width:1700px){
  .shell{grid-template-columns:400px minmax(0,1fr) 280px;max-width:2200px}
  .main{max-width:1300px}
  .cards.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:2200px){
  :root{zoom:1.22;--z:1.22}
  .shell{max-width:2300px}.main{max-width:1500px}
}
@media(min-width:3000px){
  :root{zoom:1.7;--z:1.7}
  .shell{max-width:2200px}.main{max-width:1500px}
}
@supports not (zoom:1){
  @media(min-width:2200px){body{font-size:20px}.shell{grid-template-columns:360px minmax(0,1fr) 320px}}
}

/* ---------- responsive ---------- */
@media(min-width:1900px){body{font-size:17px}.shell{grid-template-columns:300px minmax(0,1fr) 260px}.main{max-width:1180px}}
@media(max-width:1240px){.shell{grid-template-columns:300px minmax(0,1fr)}.toc{display:none}}
@media(max-width:900px){
  :root{--hdr-h:58px}
  .burger{display:inline-flex}
  .links a.ext{display:none}
  .links .btn.txadmin{display:none}
  .side .side-tx{display:inline-flex}
  .search-btn kbd{display:none}
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;z-index:40;top:var(--hdr-h);inset-inline-start:0;width:min(86vw,320px);height:calc(100dvh - var(--hdr-h));background:#0a0a09 var(--paper) center/cover;
    transform:translateX(-104%);transition:transform .2s;border-inline-end:1px solid var(--line2);box-shadow:0 0 60px rgba(0,0,0,.7)}
  :root[dir=rtl] .side{transform:translateX(104%)}
  :root[data-theme=light] .side{background:#faf7f0}
  .side.open{transform:none}
  .main{padding-top:22px}
  .grid2{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
  .brand em,.brand b{display:none}
  .search-btn{flex:1 1 auto;width:auto}
  .cards,.cards.cols-3,.cards.cols-4{grid-template-columns:minmax(0,1fr)}
  .pn{grid-template-columns:minmax(0,1fr)}
  .tab-pane{padding-inline:14px}.tab-pane>.code{margin-inline:-14px}
  .acc-body{padding-inline:14px}
  .widget,.panel{padding:14px}
  .callout{flex-direction:column;gap:4px}
  pre{font-size:13px}
  .lang summary .lang-cur{display:none}
}
@media(max-width:380px){
  .brand{display:none}
  .top{gap:6px}.icon-btn{width:38px;height:38px}
  .lang summary{padding:0 9px}
  .search-btn{padding:0 8px}.search-btn span{display:none}.search-btn{width:40px;flex:none;justify-content:center;margin-inline:0 auto}
  table{min-width:460px}
}
@media(pointer:coarse){.btn,.tab-btn,.copy,.side a,.lang-list a{min-height:44px}.copy{opacity:1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(prefers-contrast:more){:root{--line:rgba(255,255,255,.35);--line2:rgba(255,255,255,.55)}}
@media print{
  body{background:#fff;color:#000}.top,.side,.toc,.scrim,.modal,.widget,.pn,.announce,.copy{display:none!important}
  .shell{display:block}.main{max-width:none;padding:0}.doc p,.doc li,.callout,.acc-body{color:#000}
  details>*{display:block}.acc{break-inside:avoid;border-color:#999}pre{white-space:pre-wrap}
}

/* ---------- accordion without the outer frame (the textured bar is the control) ---------- */
.acc{border:0!important;border-radius:0!important;background:transparent!important;overflow:visible!important;margin:8px 0}
.acc summary{border-radius:0}
.acc-body{margin-top:2px;padding:6px 18px 16px;border:0;border-inline-start:2px solid var(--line2);background:var(--surface);border-radius:0 0 var(--r-sm) var(--r-sm)}
.acc-body>*:first-child{margin-top:12px}

/* ---------- light mode: complete pass ---------- */
:root[data-theme=light] *{text-shadow:none!important}
:root[data-theme=light] body{background:var(--bg)}
:root[data-theme=light] .announce{background:#2a2924;color:#f2eee7}
:root[data-theme=light] .top{border-bottom-color:var(--line2);box-shadow:0 1px 0 rgba(0,0,0,.04)}
:root[data-theme=light] .brand b{color:var(--text)}
:root[data-theme=light] .side a{background:none;opacity:1;color:var(--muted)}
:root[data-theme=light] .side a:hover{background:var(--hover);filter:none;color:var(--text)}
:root[data-theme=light] .side a.on{background:var(--hover3);box-shadow:inset 3px 0 0 var(--edge);color:var(--text)}
:root[dir=rtl][data-theme=light] .side a.on{box-shadow:inset -3px 0 0 var(--edge)}
:root[data-theme=light] .side-tabs a.on{background:none;box-shadow:none}
:root[data-theme=light] .card{background:var(--panel);border:1px solid var(--line2);box-shadow:0 6px 18px rgba(40,30,10,.07)}
:root[data-theme=light] a.card:hover{background:#fff;filter:none;box-shadow:inset 3px 0 0 var(--edge),0 10px 26px rgba(40,30,10,.12)}
:root[data-theme=light] .card h3,:root[data-theme=light] .card .card-t{color:var(--text)}
:root[data-theme=light] .card-ico{background:var(--hover2)}
:root[data-theme=light] .pn a{background:var(--panel);border:1px solid var(--line2)}
:root[data-theme=light] .acc summary{background:var(--panel2);border:1px solid var(--line2);color:var(--text)}
:root[data-theme=light] .acc[open] summary{background:var(--hover3);box-shadow:inset 3px 0 0 var(--edge)}
:root[data-theme=light] .acc-body{background:#fff;border-inline-start-color:var(--line2)}
:root[data-theme=light] .tabs,:root[data-theme=light] .tbl,:root[data-theme=light] .widget,:root[data-theme=light] .msg,:root[data-theme=light] .stat,:root[data-theme=light] .callout{background:#fff}
:root[data-theme=light] .tab-list{background:var(--panel2)}
:root[data-theme=light] .callout b,:root[data-theme=light] .callout{color:var(--text)}
:root[data-theme=light] th{background:var(--panel2)}
:root[data-theme=light] .btn{color:var(--text)}
:root[data-theme=light] .btn.primary,:root[data-theme=light] .btn.on{background:#1b1a17;color:#fff;box-shadow:none}
:root[data-theme=light] .btn.danger{color:#fff;background:#a8433c;box-shadow:none}
:root[data-theme=light] .btn.txadmin{background:#0b7a5d;color:#fff}
:root[data-theme=light] .btn:hover{filter:none;background:#d9d2c0}
:root[data-theme=light] .btn.primary:hover,:root[data-theme=light] .btn.on:hover{background:#000}
:root[data-theme=light] .lang summary,:root[data-theme=light] .icon-btn,:root[data-theme=light] .search-btn{background:#fff}
:root[data-theme=light] .lang-list a:hover,:root[data-theme=light] #results a:hover,:root[data-theme=light] #results a.sel{background:var(--hover)}
:root[data-theme=light] .field{background:#fff;border-color:var(--line2)}
:root[data-theme=light] .modal{background:rgba(30,25,15,.55)}
:root[data-theme=light] .modal-box{border-color:var(--line2)}
:root[data-theme=light] .ext-ico{background:var(--hover2)}
:root[data-theme=light] .msg.err{color:#7a1f19}
:root[data-theme=light] .tabs.many .tab-btn.on{background:var(--hover3)}
:root[data-theme=light] .doc a:not(.card):not(.btn){text-decoration-color:var(--dim)}
:root[data-theme=light] hr,:root[data-theme=light] .foot{border-color:var(--line2)}
:root[data-theme=light] .code{box-shadow:0 4px 14px rgba(40,30,10,.12)}
:root[data-theme=light] ::selection{background:#d8cfb8}
::selection{background:rgba(233,227,214,.25)}

/* smooth theme switch */
html.theme-anim,html.theme-anim *{transition:background-color .25s,color .25s,border-color .25s,box-shadow .25s!important}

/* theme button icons: dark shows the sun (click = light), light shows the moon */
#themeBtn .i-moon{display:none}
:root[data-theme=light] #themeBtn .i-sun{display:none}
:root[data-theme=light] #themeBtn .i-moon{display:block}

/* animated logo */
.brand .logo{display:block;height:40px;width:auto;flex:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.brand:hover .logo{filter:drop-shadow(0 0 8px rgba(233,227,214,.35))}
:root[data-theme=light] .brand .logo{filter:invert(1) hue-rotate(180deg) drop-shadow(0 1px 3px rgba(0,0,0,.25))}
.frame .logo-big{width:min(240px,60vw);height:auto;border:0;border-radius:0}

/* table filter box (added by app.js to long tables) */
.tbl-filter{display:block;width:100%;margin:0 0 8px;padding:9px 12px;font:inherit;font-size:14px;color:var(--text);background:var(--field);border:1px solid var(--line2);border-radius:var(--r-sm)}
.tbl-count{font-size:12px;color:var(--dim);margin:-2px 0 8px}

/* side tabs v2: roomy pill tabs, our logo on the reference links */
.shell{grid-template-columns:376px minmax(0,1fr) 240px}
@media(min-width:1700px){.shell{grid-template-columns:430px minmax(0,1fr) 290px}}
@media(max-width:1240px){.shell{grid-template-columns:320px minmax(0,1fr)}}
.side{padding:30px 22px 44px max(30px,env(safe-area-inset-left))}
.side-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 20px;border:0;padding:0}
.side .side-tabs a{display:flex;align-items:center;justify-content:center;text-align:center;white-space:normal;line-height:1.25;min-height:50px;margin:0;padding:10px 8px;
  font-size:14.5px;font-weight:700;color:var(--muted);background:var(--hover2);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:none;filter:none;opacity:1}
.side .side-tabs a:hover{background:var(--hover);color:var(--text)}
.side .side-tabs a.on{color:var(--text);background:var(--hover3);border-color:var(--edge);box-shadow:inset 0 -3px 0 var(--edge)}
.nav-title{margin:6px 0 12px 0}
.side a.reflink{display:flex;align-items:center;gap:12px;padding:8px 14px;min-height:50px}
.side a.reflink span{min-width:0;overflow-wrap:anywhere}
.ref-logo{flex:none;width:30px;height:30px;border-radius:8px;object-fit:cover;border:1px solid var(--line2)}
.side a.reflink.on{box-shadow:inset 3px 0 0 var(--edge)}
.hero-banner,.frame .hero-banner{display:block;width:100%;max-width:960px;height:auto;margin:0 auto;border-radius:var(--r);border:1px solid var(--line2);box-shadow:0 18px 50px rgba(0,0,0,.45)}
:root[data-theme=light] .hero-banner{box-shadow:0 14px 34px rgba(40,30,10,.25)}

/* fixes: tabs never break words, search never collapses */
.side-tabs{grid-template-columns:repeat(auto-fit,minmax(98px,1fr))}
.side .side-tabs a{font-size:14px;padding:10px 4px;overflow-wrap:normal;word-break:normal;hyphens:none}
.search-btn{flex:1 1 180px;min-width:150px}
.search-btn span{min-width:0}
@media(max-width:1180px){
  .links .btn.txadmin{display:none}
  .side .side-tx{display:inline-flex}
  .search-btn kbd{display:none}
}
@media(max-width:1000px){#signupBtn{font-size:13px;padding-inline:10px}}

/* tabs like bars: same brush bars as every link below them */
.side-tabs{gap:6px}
.side .side-tabs a{background:var(--tab) center/100% 100% no-repeat;background-color:transparent;border:0;border-radius:0;color:var(--muted);opacity:.82;box-shadow:none;min-height:48px}
.side .side-tabs a:hover{opacity:1;color:var(--text);filter:brightness(1.15);background:var(--tab) center/100% 100% no-repeat}
.side .side-tabs a.on{opacity:1;color:#fff;background:var(--tab-on) center/100% 100% no-repeat;box-shadow:inset 3px 0 0 var(--edge);filter:brightness(1.18);border:0}
:root[dir=rtl] .side .side-tabs a.on{box-shadow:inset -3px 0 0 var(--edge)}
:root[data-theme=light] .side .side-tabs a{background:var(--hover2);border:1px solid var(--line);border-radius:var(--r-sm);opacity:1;filter:none}
:root[data-theme=light] .side .side-tabs a.on{background:var(--hover3);color:var(--text);box-shadow:inset 0 -3px 0 var(--edge);filter:none}

/* reference rows: page link + official site option */
.refrow{display:flex;gap:6px;align-items:stretch;margin-bottom:4px}
.refrow .reflink{flex:1 1 auto;min-width:0;margin:0}
.side a.ref-ext{flex:none;display:grid;place-items:center;width:48px;margin:0;padding:0;color:var(--muted);opacity:.82}
.side a.ref-ext:hover{opacity:1;color:var(--text)}
:root[data-theme=light] .side a.ref-ext{background:var(--hover2);border:1px solid var(--line);border-radius:var(--r-sm);opacity:1}
.ref-open{margin:4px 0 22px}
.ref-open .btn{max-width:100%;white-space:normal;text-align:center}

/* three tabs always on one row */
.side-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
.side .side-tabs a{font-size:13.5px;padding:8px 2px;letter-spacing:0}
@media(max-width:1240px){.shell{grid-template-columns:344px minmax(0,1fr)}.side{padding:26px 16px 40px 18px}}
@media(max-width:900px){.side{padding:22px 16px 40px 18px}}

/* animated background: the JRS banner elements, full screen, always behind the page */
.bg-fx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(1200px 700px at 70% 10%,rgba(255,255,255,.035),transparent 60%)}
.bg-fx img{display:block;width:100%;height:100%;object-fit:cover}
:root[data-theme=light] .bg-fx{filter:invert(1);opacity:.5;background:none}
@media(prefers-reduced-motion:reduce){.bg-fx img{display:none}}
@media print{.bg-fx{display:none}}

/* VORP style cards: icon on top */
.card.stack{flex-direction:column;gap:14px;padding:24px 26px}
.card.stack .card-ico{width:auto;height:auto;border:0;background:none;display:block;color:var(--text)}
.card.stack .card-ico.ic-discord{color:#7289da}
.card.stack .card-t{font-family:var(--body);font-size:17px;letter-spacing:0;font-weight:700}
.card.stack p{color:var(--muted)}

.card.stack .card-ico.ic-discord svg{color:#7289da}
.card.stack .card-ico.ic-github svg{color:var(--text)}

/* Discord: live numbers on cards, sign in button */
.dc-live{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;font-size:.86rem;color:var(--muted)}
.dc-live b{color:var(--text);font-weight:700}
.dc-live .dot{width:8px;height:8px;border-radius:50%;background:#43b581;box-shadow:0 0 0 0 rgba(67,181,129,.6);animation:dcpulse 2s infinite}
.dc-live .sep{opacity:.5;margin-inline:2px}
@keyframes dcpulse{0%{box-shadow:0 0 0 0 rgba(67,181,129,.55)}70%{box-shadow:0 0 0 7px rgba(67,181,129,0)}100%{box-shadow:0 0 0 0 rgba(67,181,129,0)}}
.btn.discord{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#5865f2;border-color:#5865f2;color:#fff;font-weight:700;text-decoration:none}
.btn.discord:hover{background:#4752c4;border-color:#4752c4;color:#fff}
.btn.discord svg{width:20px;height:20px;flex:none}
.or-sep{display:flex;align-items:center;gap:12px;margin:14px 0;color:var(--dim);font-size:.85rem}
.or-sep::before,.or-sep::after{content:"";flex:1;height:1px;background:var(--line)}
@media (prefers-reduced-motion:reduce){.dc-live .dot{animation:none}}

/* phones: single column (the 1240px rule above re-adds the sidebar column), centred burger, logo kept */
.burger{justify-content:center;align-items:center}
@media(max-width:900px){.shell{grid-template-columns:minmax(0,1fr)}}
@media(max-width:380px){.brand{display:flex}.brand .logo{height:30px}}
@media(max-width:900px){:root[dir=rtl] .side.open{transform:none}}
/* all devices: search may shrink on narrow phones (320-350px overflowed), never scroll sideways, notch-safe content */
@media(max-width:480px){.search-btn{min-width:0;flex:1 1 40px;justify-content:center}.top{gap:6px}}
@media(max-width:350px){.top{padding-inline:max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right))}.icon-btn,.lang summary{width:36px;min-width:36px;height:36px}.brand .logo{height:28px}}
html,body{overflow-x:clip}
.main{padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right))}
.doc img,.doc video,.doc iframe{max-width:100%;height:auto}
.doc pre,.doc code{overflow-wrap:normal}
.doc :not(pre)>code{overflow-wrap:anywhere}
/* phones/tablets (Android/Samsung): no live blur, still background instead of the animated SVG, snappy taps */
@media(max-width:1024px),(pointer:coarse){
  .top{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--hdr) center/100% 100% no-repeat,rgba(5,5,5,.97)}
  :root[data-theme=light] .top{background:rgba(250,247,240,.98)}
  .modal{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.85)}
  .bg-fx img{display:none}
  .bg-fx,:root[data-theme=light] .bg-fx{background:url(bg-fx-static.svg) center/cover no-repeat}
  .side{overscroll-behavior:contain}
}
a,button,summary,.tab-btn{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* ---------- JRS assistant (assistant.js) ---------- */
.ai-fab{position:fixed;z-index:70;inset-inline-end:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 18px 0 15px;border-radius:999px;border:1px solid var(--line2);background:var(--panel2);color:var(--text);font:inherit;font-size:15px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.04)}
.ai-fab:hover{border-color:var(--edge)}
.ai-fab:focus-visible,.ai-panel button:focus-visible,.ai-in:focus-visible{outline:2px solid var(--edge);outline-offset:2px}
body.ai-on .ai-fab{display:none}
.ai-panel{position:fixed;z-index:75;inset-inline-end:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:min(440px,calc(100vw - 36px));height:min(680px,calc(100dvh - 110px));display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r,14px);box-shadow:0 24px 70px rgba(0,0,0,.65);overflow:hidden}
.ai-panel[hidden]{display:none}
.ai-head{display:flex;align-items:center;gap:6px;padding:12px 12px 12px 16px;border-bottom:1px solid var(--line);background:var(--panel2)}
:root[dir=rtl] .ai-head{padding:12px 16px 12px 12px}
.ai-ttl{flex:1;min-width:0;display:flex;flex-direction:column}
.ai-ttl b{font-family:var(--title);font-weight:400;letter-spacing:.06em;font-size:18px}
.ai-ttl span{font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-hbtn{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;border:1px solid transparent;background:none;color:var(--muted);cursor:pointer}
.ai-hbtn:hover{background:var(--hover);color:var(--text)}
.ai-list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:14px;display:flex;flex-direction:column;gap:12px}
.ai-msg{max-width:100%;font-size:14.5px;line-height:1.65}
.ai-msg p{margin:0 0 8px}.ai-msg p:last-child{margin-bottom:0}
.ai-msg.me{align-self:flex-end;max-width:88%;background:var(--hover3);border:1px solid var(--line2);border-radius:14px;padding:9px 13px;white-space:pre-wrap;overflow-wrap:anywhere}
.ai-msg.bot{align-self:stretch}
.ai-sub{font-size:12.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;margin:4px 0 6px!important}
:root[dir=rtl] .ai-sub{text-transform:none;letter-spacing:0}
.ai-wait{color:var(--dim)}
.ai-wait::after{content:'';display:inline-block;width:1em;text-align:start;animation:aidots 1.2s steps(4) infinite}
@keyframes aidots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
.ai-chips,.ai-rel{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ai-chip{border:1px solid var(--line2);background:var(--hover2);color:var(--muted);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer;text-align:start;max-width:100%;overflow-wrap:anywhere}
.ai-chip:hover{color:var(--text);border-color:var(--edge)}
.ai-card{border:1px solid var(--line2);border-radius:12px;background:var(--surface);padding:12px 13px;margin:6px 0 10px}
.ai-card-h{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.ai-card-h b{font-size:15px;overflow-wrap:anywhere}
.ai-crumb{font-size:12px;color:var(--dim);overflow-wrap:anywhere}
.ai-card-f{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
.ai-link{background:none;border:0;padding:0;color:var(--text);font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ai-md{overflow-wrap:anywhere}
.ai-md h4{margin:10px 0 4px;font-size:14px}
.ai-md ul,.ai-md ol{margin:4px 0 8px;padding-inline-start:20px}
.ai-md li{margin:2px 0}
.ai-md code{font-family:var(--mono);font-size:.88em;background:var(--code-inline);padding:1px 5px;border-radius:5px}
.ai-md a{color:var(--text)}
.ai-code{margin:8px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--code-bg)}
.ai-code-h{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 4px 10px;font-size:11.5px;color:var(--dim);border-bottom:1px solid var(--line)}
.ai-copy{border:1px solid var(--line2);background:none;color:var(--muted);border-radius:6px;font:inherit;font-size:11.5px;padding:3px 9px;cursor:pointer;min-height:28px}
.ai-code pre{margin:0;padding:10px 12px;overflow-x:auto;font-size:12.5px;line-height:1.55;color:#f2eee7;text-align:left}
.ai-code pre code{background:none;padding:0;font-size:inherit}
.ai-tbl{overflow-x:auto;margin:6px 0 8px;border:1px solid var(--line);border-radius:8px}
.ai-tbl table{border-collapse:collapse;width:100%;font-size:12.5px;min-width:0}
.ai-tbl td,.ai-tbl th{border-bottom:1px solid var(--line);padding:6px 8px;text-align:start;vertical-align:top}
.ai-tbl th{color:var(--dim);font-weight:600}
.ai-form{display:flex;align-items:flex-end;gap:8px;padding:10px;border-top:1px solid var(--line);background:var(--panel2)}
.ai-in{flex:1;min-width:0;resize:none;max-height:140px;border:1px solid var(--line2);border-radius:12px;background:var(--field);color:var(--text);font:inherit;font-size:16px;line-height:1.4;padding:10px 12px}
.ai-send{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line2);background:var(--text);color:var(--bg);cursor:pointer}
:root[dir=rtl] .ai-send svg{transform:scaleX(-1)}
.ai-foot{font-size:11px;color:var(--dim);text-align:center;padding:0 10px 8px;background:var(--panel2)}
@media(max-width:640px){
  .ai-fab{height:52px;width:52px;padding:0;justify-content:center}
  .ai-fab-l{display:none}
  .ai-panel{inset:0;width:100%;height:100dvh;border-radius:0;border:0;padding-bottom:env(safe-area-inset-bottom)}
  body.ai-on{overflow:hidden}
}
@media print{.ai-fab,.ai-panel{display:none!important}}
.ai-refuse{border:1px solid var(--danger);border-radius:10px;padding:9px 12px!important;color:var(--text);background:rgba(199,127,121,.08)}
.ai-blocked .ai-in,.ai-blocked .ai-send{opacity:.5;cursor:not-allowed}
/* assistant mascot */
.ai-fab{padding:0 18px 0 8px;height:56px}
:root[dir=rtl] .ai-fab{padding:0 8px 0 18px}
.ai-bot{width:40px;height:44px;flex:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6));animation:aibob 3.2s ease-in-out infinite}
.ai-fab:hover .ai-bot{animation-duration:1.2s}
@keyframes aibob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.ai-avatar{width:34px;height:37px;flex:none;filter:drop-shadow(0 2px 5px rgba(0,0,0,.55))}
@media(max-width:640px){.ai-fab{width:60px;height:60px;padding:0!important}.ai-bot{width:42px;height:46px}}
@media(prefers-reduced-motion:reduce){.ai-bot{animation:none}}

/* static (Cloudflare Pages) build */
#signupBtn,#accountBtn{display:none!important}