@font-face{font-family:'IBM Plex Sans Arabic';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/plex-ar-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/plex-ar-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/plex-ar-arabic-700.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/plex-ar-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Naskh Arabic';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/noto-naskh-arabic-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'Noto Naskh Arabic';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/noto-naskh-arabic-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Naskh Arabic';font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/noto-naskh-arabic-arabic-700.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'Noto Naskh Arabic';font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/noto-naskh-arabic-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Amiri';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/amiri-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'Amiri';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/amiri-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Amiri';font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/amiri-arabic-700.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'Amiri';font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/amiri-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cairo';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/cairo-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'Cairo';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/cairo-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cairo';font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/cairo-arabic-700.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'Cairo';font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/cairo-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Tajawal';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/tajawal-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'Tajawal';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/tajawal-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Tajawal';font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/tajawal-arabic-700.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'Tajawal';font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/tajawal-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Kufi Arabic';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/noto-kufi-arabic-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'Noto Kufi Arabic';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/noto-kufi-arabic-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Kufi Arabic';font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/noto-kufi-arabic-arabic-700.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'Noto Kufi Arabic';font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/noto-kufi-arabic-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/inter-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/inter-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lora';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/lora-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lora';font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/lora-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto Mono';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/roboto-mono-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto Mono';font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/roboto-mono-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Handi';font-weight:700;font-display:swap;src:url(/fonts/handicrafts-bold.woff2) format('woff2')}
:root{--ink:#1d1a45;--ink2:#4a4772;--muted:#6c6990;--brand:#4b3fb0;--brand2:#6a5cf0;--brand-soft:#efedfb;--cyan:#1ec8f7;--violet:#9179f3;--bg:#f4f3fa;--card:#fff;--line:#e5e2f6;--line2:#d8d4f0;--soft:#f6f5fd;--hover:#f0eefb;--ok:#13856b;--bad:#7a2fb8;--warn:#b26a00;--r:12px;--r2:8px;--sh1:0 1px 2px rgba(29,26,69,.06);--sh:0 1px 2px rgba(29,26,69,.06),0 8px 24px rgba(29,26,69,.08);--sh3:0 12px 40px rgba(29,26,69,.18);--grad:linear-gradient(120deg,#1ec8f7,#6b8ff7 50%,#9179f3);--ui:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;--canvas:#eceaf5;--page:#fff;--tb-h:52px;--st-h:30px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%}
body{margin:0;font-family:var(--ui);color:var(--ink);background:var(--bg);font-size:15px;line-height:1.55;min-height:100%;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
button:disabled{cursor:default;opacity:.45}
a{color:var(--brand)}
:focus-visible{outline:2px solid #7c6ff5;outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.ic.xs{width:13px;height:13px}
[dir=rtl] .ic.flip,[dir=rtl] .ic.dir{transform:scaleX(-1)}
/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 16px;border-radius:10px;font-weight:600;font-size:14.5px;border:1px solid transparent;white-space:nowrap;transition:background .15s,border-color .15s,box-shadow .15s,transform .05s;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(75,63,176,.3)}
.btn.pri:hover{background:#3f34a0}
.btn.ghost{background:var(--card);border-color:var(--line2);color:var(--ink)}
.btn.ghost:hover{background:var(--hover);border-color:#c9c3ee}
.btn.danger{background:var(--bad);color:#fff}
.btn.sm{min-height:34px;padding:0 12px;font-size:13.5px;border-radius:9px}
.btn.wide{width:100%}
.btn .ic{width:17px;height:17px}
.ib{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:9px;color:var(--ink2);flex:none;transition:background .12s,color .12s}
.ib:hover{background:var(--hover);color:var(--ink)}
.ib[aria-pressed=true]{background:var(--brand-soft);color:var(--brand)}
.ib.star[aria-pressed=true] .ic,.dstar[aria-pressed=true] .ic{fill:#f5b400;stroke:#e0a200}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:99px;background:var(--brand-soft);color:var(--brand);font-size:12.5px;font-weight:600;border:1px solid transparent}
button.chip:hover{border-color:#cfc8f5}
.chip[aria-pressed=true],.chip.on{background:var(--brand);color:#fff}
.lnk{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.fine{font-size:12.5px;color:var(--muted);line-height:1.5}
.sub{font-size:14px;margin:16px 0 8px;color:var(--ink2)}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],input[type=url],input:not([type]),select,textarea{border:1px solid var(--line2);border-radius:9px;background:var(--card);min-height:40px;padding:7px 11px;font-size:14.5px;width:100%;transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{outline:none;border-color:#8b80e8;box-shadow:0 0 0 3px rgba(106,92,240,.16)}
textarea{resize:vertical;line-height:1.5}
input[type=color]{width:44px;height:36px;padding:2px;border:1px solid var(--line2);border-radius:8px;background:var(--card);cursor:pointer}
input[type=checkbox],input[type=radio]{accent-color:var(--brand);width:17px;height:17px;margin:0}
input[type=range]{accent-color:var(--brand);width:100%}
.fld,.fl{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:var(--ink2);min-width:0}
.fld>span,.fl>span{display:block}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.grid2 .full,.grid2 .wide{grid-column:1/-1}
.chk,.radio{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;min-height:32px}
.chks,.radios,.opts{display:flex;flex-wrap:wrap;gap:6px 16px;margin:6px 0}
.seg{display:inline-flex;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{min-height:32px;padding:0 12px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--ink2);display:inline-flex;align-items:center;gap:6px}
.seg button[aria-pressed=true],.seg button.on{background:var(--card);color:var(--brand);box-shadow:var(--sh1)}
.kv{width:100%;border-collapse:collapse;font-size:14px}.kv td{padding:7px 4px;border-bottom:1px solid var(--line)}.kv td:last-child{text-align:end;font-weight:700;font-variant-numeric:tabular-nums}
.keys{width:100%;border-collapse:collapse;font-size:13.5px}.keys td{padding:6px 4px;border-bottom:1px solid var(--line)}.keys kbd,kbd{font:600 12px 'Roboto Mono',monospace;background:var(--soft);border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;padding:1px 6px;direction:ltr;display:inline-block;white-space:nowrap}
.tokens{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
/* ---------- splash ---------- */
#splash{position:fixed;inset:0;z-index:200;background:radial-gradient(1200px 600px at 50% 40%,#fff,#efedfb);display:grid;place-items:center;transition:opacity .4s ease,visibility .4s}
#splash.out{opacity:0;visibility:hidden}
#splash .in{display:flex;flex-direction:column;align-items:center;gap:14px}
#splash svg{width:80px;height:92px}
#splash .s1,#splash .s2{stroke-dasharray:160;stroke-dashoffset:160;animation:draw .8s cubic-bezier(.6,.1,.2,1) forwards}
#splash .s2{animation-delay:.12s}
#splash .dot{transform-origin:70px 43px;transform:scale(0);animation:pop .35s .7s cubic-bezier(.3,1.6,.5,1) forwards}
#splash .wm{font-family:'Handi',var(--ui);font-size:26px;color:var(--brand);text-align:center;line-height:1.1}
#splash .wm small{display:block;font:600 10px/1.8 var(--ui);letter-spacing:.32em;color:var(--muted)}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes pop{to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* ---------- toasts ---------- */
#toasts{position:fixed;inset-inline:0;bottom:calc(18px + env(safe-area-inset-bottom));z-index:300;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 12px}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;max-width:min(560px,100%);background:#25214f;color:#fff;border-radius:12px;padding:10px 16px;font-size:14px;box-shadow:var(--sh3);opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s}
.toast.on{opacity:1;transform:none}
.toast.err{background:#4a2378}
.toast.busy span::before{content:'';display:inline-block;width:12px;height:12px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;margin-inline-end:9px;vertical-align:-1px;animation:spin .8s linear infinite}
.toast button{color:#c9c2ff;font-weight:700;white-space:nowrap}
@keyframes spin{to{transform:rotate(360deg)}}
/* ---------- modal + sheets ---------- */
.mback{position:fixed;inset:0;z-index:150;background:rgba(22,19,52,.42);display:grid;place-items:center;padding:20px;animation:fade .15s ease}
.modal{background:var(--card);border-radius:16px;box-shadow:var(--sh3);width:min(520px,100%);max-height:min(88vh,860px);display:flex;flex-direction:column;animation:rise .18s cubic-bezier(.2,.8,.3,1)}
.modal.wide{width:min(820px,100%)}
.mhead{display:flex;align-items:center;gap:8px;padding:16px 18px 10px 18px;padding-inline-end:10px}
.mhead h2{flex:1;margin:0;font-size:17px;line-height:1.35}
.mbody{padding:4px 18px 16px;overflow:auto;overscroll-behavior:contain}
.mfoot{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.mfoot:empty{display:none}
.mback.sheet{place-items:end stretch;padding:0}
.mback.sheet .modal{width:100%;max-width:none;border-radius:18px 18px 0 0;max-height:88vh;padding-bottom:env(safe-area-inset-bottom);animation:up .22s cubic-bezier(.2,.8,.3,1)}
.mback.sheet .modal::before{content:'';display:block;width:38px;height:4px;border-radius:9px;background:#d4d0ea;margin:8px auto 0}
@keyframes fade{from{opacity:0}}@keyframes rise{from{opacity:0;transform:translateY(8px) scale(.98)}}@keyframes up{from{transform:translateY(40px);opacity:.4}}
.mtext{font-size:14.5px;color:var(--ink2);margin:0 0 10px}
.form{display:flex;flex-direction:column;gap:12px}.ferr{color:var(--bad);font-size:13.5px;min-height:1em}.note{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13.5px;color:var(--ink2)}
/* popover menus */
.pop{position:fixed;z-index:180;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh3);padding:6px;min-width:200px;max-width:min(360px,calc(100vw - 16px));max-height:min(70vh,560px);overflow:auto;animation:rise .12s ease}
.pop>button,.smenu>button{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:6px 10px;border-radius:8px;text-align:start;font-size:14px;color:var(--ink)}
.pop>button:hover,.pop>button:focus-visible,.smenu>button:hover{background:var(--hover);outline:none}
.pop>button[aria-checked=true]{color:var(--brand);font-weight:700}
.pop>button[aria-checked=true]::after{content:'✓';margin-inline-start:auto;color:var(--brand)}
.pop>button.danger,.smenu>button.danger{color:var(--bad)}
.pop>button kbd{margin-inline-start:auto}
.pop .sep,.smenu .sep{height:1px;background:var(--line);margin:5px 4px}
.pop .mhd,.smenu .mhd{font-size:11.5px;font-weight:700;color:var(--muted);padding:8px 10px 4px;text-transform:uppercase;letter-spacing:.04em}
.smenu{display:flex;flex-direction:column;gap:2px}
/* ---------- brand / account ---------- */
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-size:17px;white-space:nowrap}
.brand img{width:30px;height:30px}
.brand b{font-family:'Handi',var(--ui);color:var(--brand);font-weight:700;font-size:19px}
.pts{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 11px;border-radius:99px;background:var(--brand-soft);color:var(--brand);font-weight:700;font-size:13.5px}
.acct{display:inline-flex;align-items:center;gap:8px;min-height:36px;border-radius:99px;font-weight:600;font-size:14px;color:var(--ink)}
.acct .btn{min-height:36px}
.av{width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;background:var(--grad);color:#fff;font-weight:700;font-size:13px;flex:none}
.wal .bal{font-size:28px;font-weight:700;color:var(--brand)}.packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:12px 0}.pack{border:1px solid var(--line2);border-radius:12px;padding:12px;text-align:center;background:var(--card)}.pack:hover{border-color:var(--brand)}.pack b{display:block;font-size:18px}.ledger{width:100%;border-collapse:collapse;font-size:13px}.ledger td{padding:6px 4px;border-bottom:1px solid var(--line)}.nm{font-weight:700}
/* ---------- home ---------- */
#home{min-height:100vh;display:flex;flex-direction:column}
.htop{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;padding:10px 20px;padding-top:calc(10px + env(safe-area-inset-top));background:rgba(244,243,250,.86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.hsearch{flex:1;max-width:560px;margin-inline-start:24px;position:relative;display:flex;align-items:center}
.hsearch .ic{position:absolute;inset-inline-start:12px;color:var(--muted);pointer-events:none}
.hsearch input{padding-inline-start:38px;border-radius:99px;background:var(--card);min-height:40px}
.tsp{flex:1}
.hbody{flex:1;display:grid;grid-template-columns:248px minmax(0,1fr);gap:0;max-width:1440px;width:100%;margin:0 auto}
.hnav{position:sticky;top:61px;align-self:start;display:flex;flex-direction:column;gap:2px;padding:18px 14px;max-height:calc(100vh - 61px);overflow:auto}
.newbtn{margin-bottom:12px;min-height:44px;font-size:15px}
.nv{display:flex;align-items:center;gap:11px;min-height:40px;padding:0 12px;border-radius:10px;color:var(--ink2);font-weight:500;font-size:14.5px;text-align:start}
.nv span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nv small{color:var(--muted);font-size:12px}
.nv:hover{background:var(--hover);color:var(--ink)}
.nv[aria-current=page]{background:var(--brand-soft);color:var(--brand);font-weight:700}
.nvh{display:flex;align-items:center;justify-content:space-between;margin:16px 4px 2px 12px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.nvh .ib{width:30px;height:30px}
.nvempty{font-size:12.5px;color:var(--muted);margin:2px 12px}
.nvfoot{margin-top:18px;padding:12px;border-radius:10px;background:var(--card);border:1px solid var(--line);font-size:12.5px;color:var(--muted);line-height:1.6}
.nvfoot .ic{width:14px;height:14px}
.hmain{padding:22px 28px 90px;min-width:0;outline:none}
.start{margin-bottom:26px}
.start .srow{display:flex;gap:16px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin}
.tcard{flex:none;width:150px;display:flex;flex-direction:column;gap:8px;text-align:start;font-size:13.5px;font-weight:600;color:var(--ink)}
.tcard .tthumb{width:150px}
.tcard:hover .tthumb{border-color:#a99ff0;box-shadow:0 6px 18px rgba(75,63,176,.16)}
.tcard small{font-weight:500;color:var(--muted);font-size:12px;margin-top:-6px}
.tcard.blank .tthumb,.tcard.ai .tthumb,.tcard.more .tthumb{display:grid;place-items:center;color:var(--brand)}
.tcard.ai .tthumb{background:linear-gradient(160deg,#f3f0ff,#e9f8ff);color:#6a46d8}.tcard.more .tthumb{background:var(--soft)}
.tcard.blank .tthumb .ic,.tcard.ai .tthumb .ic,.tcard.more .tthumb .ic{width:38px;height:38px;stroke-width:1.5}
.tthumb{display:block;aspect-ratio:210/297;background:#fff;border:1px solid var(--line2);border-radius:8px;overflow:hidden;position:relative;transition:border-color .15s,box-shadow .15s;box-shadow:var(--sh1)}
.tthumb.yo-doc{padding:14px 12px;font-size:4.6px;line-height:1.45;pointer-events:none;user-select:none}
.tthumb.yo-doc>*{max-width:none}
.tthumb.yo-doc table{font-size:inherit}
.tthumb.big.yo-doc{font-size:6.4px;padding:18px 16px}
.tthumb::after{content:'';position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(transparent,#fff)}
.tcard.blank .tthumb::after,.tcard.ai .tthumb::after,.tcard.more .tthumb::after{display:none}
.dlist-grid>.empty,.dlist-grid>.loading{grid-column:1/-1}
.hhead{display:flex;align-items:center;gap:8px;margin:0 0 14px;flex-wrap:wrap}
.hhead h1{font-size:21px;margin:0;line-height:1.3}
.segi{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:2px}
.segi .ib{width:32px;height:32px}
.dlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:18px}
.dlist-grid .doc{position:relative;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .15s}
.dlist-grid .doc:hover{border-color:#c4bdf2;box-shadow:var(--sh);transform:translateY(-1px)}
.dopen{display:flex;flex-direction:column;width:100%;text-align:start}
.dlist-grid .dthumb{display:block;aspect-ratio:4/3.3;background:linear-gradient(#fff,#fbfaff);border-bottom:1px solid var(--line);padding:16px 16px 0;overflow:hidden;position:relative}
.dlist-grid .dthumb span{display:block;font-size:9.5px;line-height:1.6;color:#6d6a8e;overflow:hidden;max-height:100%;word-break:break-word}
.dlist-grid .dthumb::after{content:'';position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,#fbfaff)}
.dinfo{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px;min-width:0}
.dinfo b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dinfo small{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlist-grid .dstar,.dlist-grid .dmore{position:absolute;top:8px;width:32px;height:32px;background:rgba(255,255,255,.92);box-shadow:var(--sh1);opacity:0;transition:opacity .15s}
.dlist-grid .dstar{inset-inline-start:8px}.dlist-grid .dmore{inset-inline-end:8px}
.dlist-grid .doc:hover .dstar,.dlist-grid .doc:hover .dmore,.dlist-grid .doc:focus-within .dstar,.dlist-grid .doc:focus-within .dmore,.dlist-grid .dstar[aria-pressed=true]{opacity:1}
@media (hover:none){.dlist-grid .dstar,.dlist-grid .dmore{opacity:1}}
.dlist-list{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.dlist-list .doc{display:flex;align-items:center;gap:4px;padding-inline-end:8px;border-bottom:1px solid var(--line)}
.dlist-list .doc:last-child{border-bottom:0}
.dlist-list .doc:hover{background:var(--soft)}
.dlist-list .dopen{flex-direction:row;align-items:center;flex:1;min-width:0;padding:4px 10px}
.dlist-list .dthumb{width:34px;height:42px;flex:none;border:1px solid var(--line2);border-radius:5px;background:#fff;overflow:hidden}
.dlist-list .dthumb span{display:none}
.dlist-list .dinfo{flex-direction:row;align-items:baseline;gap:14px;flex:1}
.dlist-list .dinfo b{flex:1}
.empty{text-align:center;padding:48px 16px;color:var(--muted)}
.empty .eill{width:84px;height:84px;margin:0 auto 14px;border-radius:24px;background:var(--brand-soft);display:grid;place-items:center;color:var(--brand)}
.empty .eill .ic{width:40px;height:40px;stroke-width:1.5}
.empty h2,.empty h3{color:var(--ink);font-size:18px;margin:0 0 6px}
.empty p{margin:0 auto 16px;max-width:420px}
.loading{padding:40px;text-align:center;color:var(--muted)}
.lead{color:var(--ink2);margin:0 0 18px;max-width:720px}
.tgallery .tgrid2,.tgrid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:20px;margin-bottom:28px}
.tgallery h2,.tgallery h3{font-size:15px;margin:6px 0 12px;color:var(--ink2)}
.tpl{display:flex;flex-direction:column;gap:6px;text-align:start}
.tpl b{font-size:14px}.tpl small{font-size:12.5px;color:var(--muted)}
.tpl:hover .tthumb{border-color:#a99ff0;box-shadow:0 8px 22px rgba(75,63,176,.16)}
.fab{display:none}
/* ---------- editor shell ---------- */
body.editing{overflow:hidden;background:var(--canvas)}
#ed{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--canvas)}
#titlebar{flex:none;display:flex;align-items:center;gap:4px;height:var(--tb-h);padding:0 10px;padding-top:env(safe-area-inset-top);box-sizing:content-box;background:var(--card);border-bottom:1px solid var(--line)}
#titlebar .back{color:var(--ink2)}
#titlebar .dicon{width:32px;height:32px;border-radius:8px;background:var(--brand);color:#fff;display:grid;place-items:center;flex:none;margin-inline-start:2px}
#titlebar .dicon .ic{width:18px;height:18px}
.tmeta{display:flex;flex-direction:column;min-width:0;flex:0 1 auto;margin-inline-start:6px}
.title-in{border:1px solid transparent!important;background:transparent!important;min-height:30px!important;padding:2px 6px!important;font-size:15.5px!important;font-weight:700;width:auto;min-width:120px;max-width:min(46vw,520px);border-radius:6px!important;box-shadow:none!important;text-overflow:ellipsis}
.title-in:hover{border-color:var(--line2)!important}
.title-in:focus{border-color:#8b80e8!important;background:var(--card)!important}
.savest{font-size:11.5px;color:var(--muted);padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.savest.err{color:var(--bad)}.savest.ok{color:var(--ok)}.savest.off{color:var(--warn)}
#titlebar .btn.pri{margin-inline-start:6px}
#titlebar .acct{margin-inline-start:4px}
#titlebar .chip{margin-inline-start:6px}
#ribbon{flex:none;background:var(--card);border-bottom:1px solid var(--line);position:relative;z-index:5;box-shadow:0 1px 0 rgba(29,26,69,.02)}
.rtabs{display:flex;align-items:center;gap:2px;padding:2px 10px 0;overflow-x:auto;scrollbar-width:none}
.rtabs::-webkit-scrollbar{display:none}
.rtab{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 13px;font-size:14px;font-weight:600;color:var(--ink2);border-radius:8px 8px 0 0;white-space:nowrap}
.rtab:hover{background:var(--soft);color:var(--ink)}
.rtab[aria-selected=true]{color:var(--brand)}
.rtab[aria-selected=true]::after{content:'';position:absolute;inset:auto 12px 0;height:3px;border-radius:3px 3px 0 0;background:var(--brand)}
.rtab.file{color:#fff;background:var(--brand);border-radius:8px;min-height:30px;margin:3px 4px 3px 0;margin-inline-end:4px}
.rtab.file:hover{background:#3f34a0;color:#fff}
.rtab.ai{color:#6a46d8}.rtab.ai .ic{width:16px;height:16px;color:#7a5cf0}
.rtab.ctx{color:#0f7d69}.rtab.ctx[aria-selected=true]::after{background:#13a386}.rtab.ctx::before{content:'';position:absolute;inset:4px 2px 0;border-radius:8px 8px 0 0;background:rgba(19,163,134,.08);z-index:-1}
.rspace{flex:1}
.rcollapse{width:30px;height:30px}
.rbody{display:flex;align-items:stretch;gap:0;padding:6px 8px 4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;min-height:104px;border-top:1px solid var(--line)}
.rbody.min{display:none}
.rg{display:flex;flex-direction:column;align-items:stretch;padding:0 8px;border-inline-end:1px solid var(--line);flex:none}
.rg:last-child{border-inline-end:0}
.rgi{flex:1;display:flex;flex-direction:column;justify-content:center;gap:3px}
.rgr{display:flex;align-items:center;gap:2px}
.rgl{font-size:11px;color:var(--muted);text-align:center;padding-top:3px;white-space:nowrap}
.rb{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:32px;height:32px;padding:0 6px;border-radius:7px;color:var(--ink);font-size:13px;position:relative;white-space:nowrap}
.rb:hover{background:var(--hover)}
.rb[aria-pressed=true]{background:var(--brand-soft);color:var(--brand);box-shadow:inset 0 0 0 1px #d2ccf6}
.rb .ic{width:18px;height:18px}
.rb.lg{flex-direction:column;height:78px;min-width:58px;padding:6px 6px 4px;gap:4px;font-size:12px;line-height:1.2;justify-content:flex-start}
.rb.lg .ic{width:28px;height:28px;stroke-width:1.6;color:var(--brand)}
.rb.lg .bl{max-width:76px;white-space:normal;text-align:center}
.rb.lg .ic.dd{width:12px;height:12px;color:var(--muted);stroke-width:2.4;margin-top:-2px}
.rb.md{height:28px;font-size:12.5px;padding:0 8px;justify-content:flex-start}
.rb.md .ic{width:16px;height:16px;color:var(--brand)}
.rcol{display:flex;flex-direction:column;gap:1px;justify-content:center}
.rsplit{display:inline-flex;align-items:stretch;border-radius:7px}
.rsplit:hover{box-shadow:inset 0 0 0 1px var(--line2)}
.rsplit .rb{border-start-end-radius:0;border-end-end-radius:0;padding-inline-end:3px}
.rsplit .rdd{border-start-start-radius:0;border-end-start-radius:0}
.rsplit.lg{flex-direction:column}
.rsplit.lg .rb{border-radius:7px 7px 0 0;height:58px;padding-inline-end:6px}
.rsplit.lg .rdd{border-radius:0 0 7px 7px;width:auto;height:18px}
.rdd{display:inline-grid;place-items:center;width:16px;height:32px;border-radius:7px;color:var(--muted)}
.rdd:hover{background:var(--hover);color:var(--ink)}
.rdd .ic{width:12px;height:12px;stroke-width:2.4}
.cbar{position:absolute;inset-inline:7px;bottom:4px;height:3.5px;border-radius:2px;background:currentColor}
.rb.lg .cbar{bottom:22px;inset-inline:16px}
.rsel{display:inline-flex;align-items:center;justify-content:space-between;gap:4px;height:30px;min-height:30px!important;border:1px solid var(--line2);border-radius:7px;background:var(--card);padding:0 6px 0 8px;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden}
.rsel:hover{border-color:#bdb5ee}
.rsel .v{overflow:hidden;text-overflow:ellipsis}
.rsel .ic{width:13px;height:13px;color:var(--muted);stroke-width:2.4}
.rsel.font{width:168px}
.rsize{display:inline-flex;align-items:stretch;height:30px;border:1px solid var(--line2);border-radius:7px;background:var(--card);overflow:hidden;flex:none}
.rsize:focus-within{border-color:#8b80e8;box-shadow:0 0 0 3px rgba(106,92,240,.14)}
.rsel.size{width:44px;height:auto!important;min-height:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0 4px!important;text-align:center;font-size:13px!important;background:transparent!important}
.rsize .rdd{height:auto;width:20px;border-radius:0;border-inline-start:1px solid var(--line)}
.rrow .rsize{height:36px}.rrow .rsize .rdd{height:auto}
.rsel.zoomv{width:70px;justify-content:center}
.rsel.styl{width:130px}
.sgal{display:grid;grid-auto-flow:column;grid-template-rows:repeat(1,74px);gap:4px;max-width:520px;overflow-x:auto;scrollbar-width:thin;padding:2px}
.sgi{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:86px;height:70px;border:1px solid var(--line);border-radius:8px;background:var(--card);overflow:hidden;padding:4px}
.sgi:hover{border-color:#b9b0ef;background:var(--soft)}
.sgi[aria-selected=true]{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.sgp{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:clip;line-height:1.25}
.sgn{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sgal-side{display:flex;flex-direction:column;justify-content:center;gap:0}
.sgal-side .ib{width:26px;height:24px;border-radius:6px}.sgal-side .ib .ic{width:14px;height:14px}
.rnum{display:flex;flex-direction:column;gap:3px}
.rnl{font-size:11px;font-weight:700;color:var(--muted)}
.rnum label{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ink2)}
.rnum label .ic{width:15px;height:15px;color:var(--muted)}
.rnum input{width:62px!important;min-height:26px!important;height:26px;padding:0 6px!important;font-size:12.5px!important;border-radius:6px!important}
.rnum small{color:var(--muted);font-size:11px;min-width:26px}
/* phone toolbar */
.rrow{display:flex;align-items:center;gap:2px;padding:4px 6px;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--line)}
.rrow::-webkit-scrollbar{display:none}
.rrow .rb{min-width:40px;height:40px}
.rrow .rb .ic{width:20px;height:20px}
.rrow .rsplit .rb{min-width:34px}
.rrow .rdd{height:40px;width:18px}
.rrow .rsel{height:36px}
.rrow .more{position:sticky;inset-inline-end:-6px;background:var(--card);box-shadow:-8px 0 10px -4px rgba(255,255,255,.95);margin-inline-start:auto}
[dir=rtl] .rrow .more{box-shadow:8px 0 10px -4px rgba(255,255,255,.95)}
.vsep{width:1px;height:24px;background:var(--line2);margin:0 4px;flex:none}
.msheet .mbody section+section{margin-top:12px}
.msheet h3{font-size:12px;font-weight:700;color:var(--muted);margin:6px 2px 8px;text-transform:uppercase;letter-spacing:.04em}
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mitem{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;min-height:74px;padding:10px 4px 8px;border-radius:12px;background:var(--soft);font-size:11.5px;line-height:1.25;text-align:center;color:var(--ink)}
.mitem .ic{width:22px;height:22px;color:var(--brand)}
.mitem.on,.mitem[aria-pressed=true]{background:var(--brand);color:#fff}.mitem.on .ic{color:#fff}
.mitem:active{transform:scale(.97)}
/* colour popover */
.cpop{padding:10px;min-width:244px}
.cpop .crow{display:grid;grid-template-columns:repeat(10,20px);gap:3px;margin-bottom:4px}
.cpop .sw,.sw{width:20px;height:20px;border-radius:4px;border:1px solid rgba(0,0,0,.08)}
.cpop .sw:hover{transform:scale(1.15);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--brand)}
.cpop .mhd{padding:6px 2px 4px}
.cpop .cust{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px}
.cpop>button{min-height:32px}
/* selection bubble */
.bubble{position:fixed;z-index:60;display:flex;align-items:center;gap:1px;padding:4px;background:#25214f;border-radius:12px;box-shadow:var(--sh3);opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .12s,transform .12s}
.bubble.on{opacity:1;pointer-events:auto;transform:none}
.bubble button{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;color:#ece9ff}
.bubble button:hover,.bubble button.on{background:rgba(255,255,255,.14);color:#fff}
.bubble button.ai{display:inline-flex;gap:6px;width:auto;padding:0 10px;font-weight:700;font-size:13px;color:#d8cfff}
.bubble .vsep{background:rgba(255,255,255,.2);height:20px}
body.painting #editor .ProseMirror{cursor:copy}
/* work area */
#work{flex:1;min-height:0;display:flex;position:relative}
#nav{flex:none;width:264px;background:var(--card);border-inline-end:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
#canvasWrap{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
#hruler{flex:none;height:22px;background:var(--canvas);overflow:hidden;display:flex;justify-content:center;border-bottom:1px solid #dedbee;user-select:none}
#hruler .rin{position:relative;height:22px;background:#fff;flex:none;direction:ltr}
#hruler .rm{position:absolute;top:0;bottom:0;background:#e3e0f1}
#hruler .rm.l{left:0}#hruler .rm.r{right:0}
#hruler i{position:absolute;bottom:0;width:1px;background:#9a95bf}
#hruler b{position:absolute;top:2px;font:500 9px var(--ui);color:#77739c;transform:translateX(-50%)}
#hruler .rh{position:absolute;top:0;width:10px;height:22px;margin-left:-5px;cursor:ew-resize;z-index:2}
#hruler .rh::after{content:'';position:absolute;left:1px;top:12px;border:4px solid transparent;border-bottom:7px solid var(--brand);border-top:0}
#hruler .rh:focus-visible{outline:2px solid var(--brand)}
#canvas{flex:1;min-height:0;overflow:auto;position:relative;padding:24px 24px 64px;scroll-padding:80px;overscroll-behavior:contain}
#stack{position:relative;margin:0 auto}
#pages{position:absolute;inset:0;z-index:0;pointer-events:none}
#pages .page{position:absolute;left:0;right:0;background:var(--page);box-shadow:0 1px 3px rgba(29,26,69,.1),0 6px 22px rgba(29,26,69,.07);border-radius:2px;overflow:hidden}
#pages .hz,#pages .fz{position:absolute;display:flex;flex-direction:column;gap:2px;font-size:12px;color:#77739c;pointer-events:none;line-height:1.4}
#pages .zt{display:block;white-space:pre-wrap}
#pages .pn{font-variant-numeric:tabular-nums}
#pages .wm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;opacity:.16;transform:rotate(-35deg);white-space:nowrap;font-family:var(--docfont,var(--ui));pointer-events:none}
#pages .pborder{position:absolute;pointer-events:none}
#pages .fnz{position:absolute;font-size:10.5px;line-height:1.45;color:#45426a;border-top:1px solid #cfcbe6;padding-top:5px;width:auto}
#pages .fnz>div{margin:1px 0}
#pages .hfedit{position:absolute;inset-inline-end:6px;width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--muted);background:rgba(255,255,255,.9);opacity:0;pointer-events:auto;transition:opacity .15s}
#pages .page:hover .hfedit,#pages .hfedit:focus-visible{opacity:1}
@media (hover:none){#pages .hfedit{opacity:.7}}
#editor{position:relative;z-index:1}
#editor .ProseMirror{outline:none;min-height:60vh;caret-color:var(--brand);word-wrap:break-word;white-space:pre-wrap;font-variant-ligatures:common-ligatures}
body.lay-print #editor .ProseMirror{min-height:0}
body.lay-web #canvas{padding:0;background:var(--page)}
body.lay-web #stack{max-width:860px}
body.lay-web #editor .ProseMirror{padding:36px 40px 120px;min-height:calc(100vh - 220px)}
#editor .ProseMirror p.is-editor-empty:first-child::before{content:attr(data-placeholder);color:#aaa6c6;float:inline-start;height:0;pointer-events:none}
.ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute}.ProseMirror-gapcursor:after{content:'';display:block;position:absolute;top:-2px;width:20px;border-top:1px solid var(--ink);animation:blink 1.1s steps(2,start) infinite}@keyframes blink{to{visibility:hidden}}.ProseMirror-focused .ProseMirror-gapcursor{display:block}
.ProseMirror ::selection{background:rgba(106,92,240,.22)}
.yo-pgap{pointer-events:none;user-select:none}
.endn{margin:24px auto 0;background:var(--page);box-shadow:0 1px 3px rgba(29,26,69,.1);padding:22px 36px;border-radius:2px;font-size:13px;max-width:100%}
.endn h4{margin:0 0 8px;font-size:13px;color:var(--ink2)}.endn ol{margin:0;padding:0;list-style:none}.endn li{margin:3px 0}.endn .en-n{color:var(--brand);font-weight:700;margin-inline-end:4px}
body.focus #titlebar,body.focus #ribbon,body.focus #status,body.focus #hruler{display:none}
body.focus #canvas{padding-top:48px}
body.focus .exitfocus{display:inline-flex}
.exitfocus{display:none;position:fixed;top:12px;inset-inline-end:12px;z-index:40}
body.dark-page{--page:#1e1b3d}
body.dark-page .yo-doc{color:#e7e4ff}
body.show-marks .yo-doc p::after,body.show-marks .yo-doc h1::after,body.show-marks .yo-doc h2::after,body.show-marks .yo-doc h3::after,body.show-marks .yo-doc h4::after{content:'¶';color:#b9b2ea;margin-inline-start:2px;font-weight:400}
body.show-marks .yo-pb{border-top:1px dashed #9d94e8}
.findbar{position:absolute;top:10px;inset-inline-end:18px;z-index:30;width:min(400px,calc(100% - 20px));background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh3);padding:10px;display:flex;flex-direction:column;gap:8px;animation:rise .14s ease}
.findbar .fr{display:flex;align-items:center;gap:6px}
.findbar input{min-height:36px}
.findbar .fc{font-size:12px;color:var(--muted);white-space:nowrap;min-width:52px;text-align:center}
.findbar .rep{display:grid;grid-template-columns:auto 1fr auto auto;gap:6px;align-items:center}
@media (max-width:520px){.findbar .rep{grid-template-columns:auto 1fr 1fr}.findbar .rep input{grid-column:2 / 4}.findbar .rep .btn{grid-row:2}.findbar .rep [data-f=rep]{grid-column:2}.findbar .rep [data-f=all]{grid-column:3}}
.findbar .fr input{flex:1;min-width:0}
/* side panel */
#side{flex:none;width:360px;background:var(--card);border-inline-start:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;animation:slidein .18s ease}
@keyframes slidein{from{opacity:0;transform:translateX(12px)}}
[dir=rtl] #side{animation-name:slideinr}@keyframes slideinr{from{opacity:0;transform:translateX(-12px)}}
.phead{flex:none;display:flex;align-items:center;gap:6px;padding:10px 10px 8px 16px;padding-inline-start:16px;border-bottom:1px solid var(--line)}
.phead h2{flex:1;margin:0;font-size:15.5px;display:flex;align-items:center;gap:7px}
.phead.ai h2 .ic{color:#7a5cf0}
.pbody{flex:1;overflow:auto;padding:12px 14px 24px;overscroll-behavior:contain}
.pempty{text-align:center;color:var(--muted);font-size:13.5px;padding:28px 10px}
.pempty .ic{width:30px;height:30px;color:#b3abea;margin-bottom:6px}
.psearch{padding:10px 12px 4px}.psearch input{min-height:36px}
.ptabs{display:flex;align-items:center;justify-content:space-between;padding:8px 16px 4px;font-size:12px;font-weight:700;color:var(--muted)}
.outline{list-style:none;margin:0;padding:4px 8px 20px;overflow:auto;flex:1}
.outline li button{display:block;width:100%;text-align:start;padding:6px 8px;border-radius:7px;font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.outline li button:hover{background:var(--hover)}
.outline .l0 button{font-weight:700;font-size:14px}.outline .l1 button{font-weight:600}.outline .l2 button{padding-inline-start:22px}.outline .l3 button{padding-inline-start:36px;color:var(--ink2)}.outline .l4 button{padding-inline-start:50px;color:var(--muted)}
.outline .empty{padding:20px 8px;font-size:13px;text-align:start}
/* comments */
.thread{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:var(--card);transition:border-color .15s,box-shadow .15s}
.thread.focus,.thread:focus-within{border-color:#b8afef;box-shadow:0 4px 16px rgba(75,63,176,.1)}
.thread.resolved{opacity:.7;background:var(--soft)}
.thread .quote{display:block;width:100%;text-align:start;font-size:12.5px;color:var(--muted);border-inline-start:3px solid #f5c84b;padding:2px 8px;margin-bottom:8px;background:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread .quote.gone{border-color:var(--line2);font-style:italic}
.cmt{display:flex;gap:9px;align-items:flex-start}
.cmt+.cmt,.reply{margin-top:10px}
.cb{flex:1;min-width:0}
.cm{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.cm b{font-size:13.5px}.cm small{font-size:11.5px;color:var(--muted)}
.ctext{margin-top:4px;font-size:14px;white-space:pre-wrap;word-break:break-word}
textarea.ctext{white-space:normal}
.cacts{display:flex;gap:6px;justify-content:flex-end;margin-top:8px;flex-wrap:wrap}
.creply{display:flex;gap:6px;margin-top:10px}.creply input{min-height:34px;font-size:13.5px}
.chlist{display:flex;flex-direction:column;gap:8px}
.ctrack{border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13.5px}
.ctrack .cha{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:12px;color:var(--muted)}
.ctrack .cht{display:block;word-break:break-word}
.ctrack .cht.ins{color:#0f7a47;text-decoration:underline;text-decoration-color:#7fd3a4}.ctrack .cht.del{color:#7a2fb8;text-decoration:line-through}
.chm{display:flex;gap:6px;margin-top:8px;justify-content:flex-end}
.chlist{list-style:none;padding:0;margin:0}.chlist .chm{justify-content:flex-start;flex-wrap:wrap;margin-top:0}
.tacts{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.vlist{display:flex;flex-direction:column;gap:6px}
.ver{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:13.5px;text-align:start;width:100%}
.ver:hover{background:var(--soft)}.ver.on{border-color:var(--brand);background:var(--brand-soft)}
.ver b{display:block;font-size:13.5px}.ver small{color:var(--muted);font-size:12px}
.vprev{border:1px solid var(--line);border-radius:10px;padding:14px;max-height:340px;overflow:auto;font-size:12px;margin:10px 0;background:#fff}
.linkrow{display:flex;gap:6px;align-items:center}.linkrow input{direction:ltr;font-size:13px}
.row2{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.va{font-size:13px;color:var(--muted)}
/* AI panel */
.aiwrap{display:flex;flex-direction:column;gap:12px}
.aihead{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.aihead .ctx{font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.aihead .ctx .ic{width:14px;height:14px}
.askbox{position:relative;border:1px solid var(--line2);border-radius:14px;background:var(--card);padding:8px;padding-inline-end:48px;transition:border-color .12s,box-shadow .12s}
.askbox:focus-within{border-color:#8b80e8;box-shadow:0 0 0 3px rgba(106,92,240,.14)}
.askbox textarea{border:0!important;box-shadow:none!important;min-height:44px;padding:4px 6px;resize:none;background:transparent}
.askbox .send{position:absolute;inset-inline-end:8px;bottom:8px;background:var(--brand);color:#fff;width:34px;height:34px;border-radius:10px}
.askbox .send:hover{background:#3f34a0;color:#fff}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.qa{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 10px;border:1px solid var(--line);border-radius:10px;font-size:13px;font-weight:600;text-align:start;background:var(--card)}
.qa:hover{border-color:#bdb3f2;background:var(--soft)}
.qa .ic{width:17px;height:17px;color:#7a5cf0}
.results{display:flex;flex-direction:column;gap:10px}
.rcard{border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--card);box-shadow:var(--sh1)}
.rcard.applied{opacity:.65}
.rcard.err{border-color:#f0c9d1;background:#fff8f9}
.rcard .rh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.rcard .rh b{font-size:13px;display:flex;align-items:center;gap:6px;min-width:0}
.rcard .rh b small{font-weight:500;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rcard .rh>small{color:var(--muted);font-size:11.5px;white-space:nowrap}
.rcard p{margin:4px 0;font-size:13.5px}
.rprev{max-height:300px;overflow:auto;font-size:13px;border-radius:8px;background:var(--soft);padding:10px 12px}
.ra{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.ra .ib{width:32px;height:32px}
.skel{display:flex;flex-direction:column;gap:7px;padding:6px 0}
.skel i{display:block;height:10px;border-radius:5px;background:linear-gradient(90deg,#efedfb 25%,#e3dffa 50%,#efedfb 75%);background-size:200% 100%;animation:shimmer 1.2s infinite}
.skel i:nth-child(2){width:86%}.skel i:nth-child(3){width:62%}
@keyframes shimmer{to{background-position:-200% 0}}
.unavail{text-align:center;padding:14px 4px}
.unavail>.ic{width:34px;height:34px;color:#a99ff0;stroke-width:1.5}
.unavail h3{font-size:16px;margin:8px 0 4px}
.unavail p{font-size:13.5px;color:var(--ink2);margin:0 0 14px}
.altlist{display:flex;flex-direction:column;gap:8px;text-align:start}
.alt{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card);text-align:start;width:100%}
.alt:hover{border-color:#bdb3f2;background:var(--soft)}
.alt .ic{width:22px;height:22px;color:var(--brand)}
.alt b{display:block;font-size:14px}.alt small{display:block;font-size:12.5px;color:var(--muted)}
/* status bar */
#status{flex:none;display:flex;align-items:center;gap:2px;height:var(--st-h);padding:0 8px;padding-bottom:env(safe-area-inset-bottom);box-sizing:content-box;background:var(--card);border-top:1px solid var(--line);font-size:12px;color:var(--ink2);user-select:none}
#status button{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;border-radius:6px;font-size:12px;color:var(--ink2);white-space:nowrap}
#status button:hover{background:var(--hover);color:var(--ink)}
#status button .ic{width:15px;height:15px}
#status .sp{flex:1}
#status [data-lay][aria-pressed=true]{color:var(--brand);background:var(--brand-soft)}
#stTrack{color:#0f7a47!important;font-weight:700}
.offnote{display:none;color:var(--warn);font-weight:600;align-items:center;gap:5px;padding:0 8px}
body.offline .offnote{display:inline-flex}
/* dialogs */
.pgprev,.ppreview{display:grid;place-items:center;background:var(--canvas);border-radius:12px;padding:14px;min-height:160px}
.pgprev>div,.ppreview>div{background:#fff;box-shadow:var(--sh);position:relative}
.symgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:4px;max-height:300px;overflow:auto;margin-top:10px}
.symgrid button,.sympick button{height:40px;border:1px solid var(--line);border-radius:8px;font-size:18px;background:var(--card)}
.symgrid button:hover{border-color:var(--brand);background:var(--soft)}
.sympick{display:flex;flex-wrap:wrap;gap:6px}
.shgrid,.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.shgrid button,.shpick button,.tpick button{height:64px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;background:var(--card);padding:6px}
.shgrid button:hover,.tpick button:hover{border-color:var(--brand)}
.shgrid svg{width:100%;height:100%}
.tpick{display:grid;grid-template-columns:repeat(10,22px);gap:3px;justify-content:center;margin:6px 0}
.tpick button{height:22px;width:22px;border-radius:3px;padding:0}
.tpick button.on{background:var(--brand-soft);border-color:var(--brand)}
.tlab{text-align:center;font-size:13px;color:var(--muted);margin:4px 0}
.dlist,.blist{display:flex;flex-direction:column;gap:6px}
.dopt{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;text-align:start;width:100%;font-size:14px}
.dopt:hover{border-color:var(--brand);background:var(--soft)}
.eqprev{min-height:56px;display:grid;place-items:center;background:var(--soft);border-radius:10px;padding:10px;font-size:20px;margin:8px 0;overflow:auto}
.wh{display:flex;gap:8px;align-items:center}
.filemodal .mbody{padding-top:0}
.backstage{display:flex;flex-direction:column;gap:2px}
.bsgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.bsi{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:10px;font-size:14px;text-align:start;width:100%}
.bsi:hover{background:var(--hover)}.bsi .ic{color:var(--brand)}
.bsi:disabled{opacity:.4}
.bsinfo{font-size:12.5px;color:var(--muted);padding:8px 12px;border-top:1px solid var(--line);margin-top:8px}
.drop{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 16px;border:2px dashed #cbc4f2;border-radius:16px;background:var(--soft);text-align:center;cursor:pointer;transition:background .15s,border-color .15s}
.drop:hover,.drop.on{background:var(--brand-soft);border-color:var(--brand)}
.drop .dicon.big{width:56px;height:56px;border-radius:16px;background:var(--card);display:grid;place-items:center;color:var(--brand);box-shadow:var(--sh1)}
.drop .dicon.big .ic{width:28px;height:28px}
.drop small{color:var(--muted)}
.badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;font-weight:700;position:absolute;top:-2px;inset-inline-end:-2px}
/* ---------- document content ---------- */
.yo-doc{font-family:var(--docfont,'IBM Plex Sans Arabic'),'IBM Plex Sans Arabic',sans-serif;color:#1d1a45;font-size:12pt;line-height:1.5;unicode-bidi:plaintext;text-align:start}
.yo-doc p{margin:0 0 8pt}
.yo-doc h1,.yo-doc h2,.yo-doc h3,.yo-doc h4{margin:0}
.yo-doc p,.yo-doc h1,.yo-doc h2,.yo-doc h3,.yo-doc h4,.yo-doc li{unicode-bidi:plaintext}
.yo-doc a{color:#4b3fb0;text-decoration:underline;text-underline-offset:2px}
.yo-doc strong{font-weight:700}
.yo-doc mark{border-radius:2px;padding:0 1px;color:inherit}
.yo-doc hr{border:0;border-top:1px solid #cfcbe6;margin:12pt 0}
.yo-doc blockquote{margin:8pt 0;padding-inline-start:14px;border-inline-start:3px solid #c9c2f2;color:#4a4772}
.yo-doc p[data-style=quote]{padding-inline-start:14px;border-inline-start:3px solid #c9c2f2}
.yo-doc p[data-style=intense]{padding:8px 14px;border-block:1px solid #b9b0ef;text-align:center}
.yo-doc p[data-style=title]{border-bottom:2px solid #e5e2f6;padding-bottom:4pt}
.yo-doc ul,.yo-doc ol{margin:0 0 8pt;padding-inline-start:26px}
.yo-doc li>p{margin:0 0 2pt}
.yo-doc li::marker{color:#4b3fb0}
.yo-doc ul[data-bullet=circle]{list-style-type:circle}.yo-doc ul[data-bullet=square]{list-style-type:square}
.yo-doc ul[data-bullet=dash]{list-style-type:'–  '}.yo-doc ul[data-bullet=arrow]{list-style-type:'➤  '}.yo-doc ul[data-bullet=check]{list-style-type:'✓  '}.yo-doc ul[data-bullet=diamond]{list-style-type:'◆  '}
.yo-doc ul ul{list-style-type:circle}.yo-doc ul ul ul{list-style-type:square}
.yo-doc ol[data-ls=arabic-indic]{list-style-type:arabic-indic}.yo-doc ol[data-ls=lower-alpha]{list-style-type:lower-alpha}.yo-doc ol[data-ls=upper-alpha]{list-style-type:upper-alpha}.yo-doc ol[data-ls=lower-roman]{list-style-type:lower-roman}.yo-doc ol[data-ls=upper-roman]{list-style-type:upper-roman}.yo-doc ol[data-ls=arabic-abjad]{list-style-type:arabic-abjad,arabic-indic}
.yo-doc ol ol{list-style-type:lower-alpha}.yo-doc ol ol ol{list-style-type:lower-roman}
.yo-doc ol[data-ls=multilevel],.yo-doc ol[data-ls=multilevel] ol{counter-reset:ml;list-style:none}
.yo-doc ol[data-ls=multilevel] li{counter-increment:ml;position:relative}
.yo-doc ol[data-ls=multilevel] li::before{content:counters(ml,'.') '. ';position:absolute;inset-inline-end:calc(100% + 6px);color:#4b3fb0;white-space:nowrap;font-variant-numeric:tabular-nums}
.yo-doc ul[data-type=taskList]{list-style:none;padding-inline-start:4px}
.yo-doc ul[data-type=taskList] li{display:flex;gap:8px;align-items:flex-start}
.yo-doc ul[data-type=taskList] li>label{flex:none;margin-top:.25em}
.yo-doc ul[data-type=taskList] li>div{flex:1}
.yo-doc ul[data-type=taskList] li[data-checked=true]>div{color:#8a87a8;text-decoration:line-through}
.yo-doc .tableWrapper{overflow-x:auto;margin:6pt 0 10pt}
.yo-doc table{border-collapse:collapse;width:100%;table-layout:fixed;margin:6pt 0 10pt;--tb:#bdb7e6}
.yo-doc .tableWrapper table{margin:0}
.yo-doc td,.yo-doc th{border:1px solid var(--tb);padding:5px 8px;vertical-align:top;position:relative;min-width:40px;box-sizing:border-box}
.yo-doc td>p,.yo-doc th>p{margin:0}
.yo-doc th{background:#efedfb;font-weight:700;text-align:start}
.yo-doc table[data-tstyle=brand] th{background:#4b3fb0;color:#fff;border-color:#4b3fb0}
.yo-doc table[data-tstyle=banded] tr:nth-child(odd) td{background:#f5f4fc}
.yo-doc table[data-tstyle=minimal] td,.yo-doc table[data-tstyle=minimal] th{border-inline:0;background:none}
.yo-doc table[data-tstyle=minimal] th{border-bottom:2px solid #4b3fb0;color:#2b2580}
.yo-doc table[data-borders=none] td,.yo-doc table[data-borders=none] th{border-color:transparent}
.yo-doc table[data-borders=outer] td,.yo-doc table[data-borders=outer] th{border-color:transparent}.yo-doc table[data-borders=outer]{outline:1px solid var(--tb)}
.yo-doc table[data-borders=horizontal] td,.yo-doc table[data-borders=horizontal] th{border-inline-color:transparent}
#editor .yo-doc table[data-borders=none] td,#editor .yo-doc table[data-borders=none] th{border:1px dashed #e0dcf3}
#editor .selectedCell::after{content:'';position:absolute;inset:0;background:rgba(106,92,240,.14);pointer-events:none}
#editor .column-resize-handle{position:absolute;inset-inline-end:-2px;top:0;bottom:-2px;width:4px;background:#8b80e8;pointer-events:none}
#editor.resize-cursor,#editor .resize-cursor{cursor:col-resize}
.yo-doc .yo-fig{margin:8pt auto 10pt;display:table;max-width:100%;position:relative}
.yo-doc .yo-fig img{display:block;max-width:100%;height:auto;border-radius:2px}
.yo-doc .yo-fig[data-align=left]{margin-left:0;margin-right:auto}.yo-doc .yo-fig[data-align=right]{margin-right:0;margin-left:auto}
.yo-doc .yo-fig[data-wrap=square][data-align=left]{float:left;margin:4pt 14px 8pt 0}.yo-doc .yo-fig[data-wrap=square][data-align=right]{float:right;margin:4pt 0 8pt 14px}
.yo-doc .yo-fig figcaption{font-size:10pt;font-style:italic;color:#6c6990;text-align:center;padding-top:4px;display:table-caption;caption-side:bottom}
.yo-doc .yo-fig figcaption:empty{display:none}
.yo-doc .yo-fig figcaption:dir(rtl),.yo-doc [data-style=caption]:dir(rtl){font-style:normal}
#editor .yo-fig.ProseMirror-selectednode img,#editor .yo-shape.ProseMirror-selectednode{outline:2px solid #6a5cf0;outline-offset:2px}
.yo-rz{position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #6a5cf0;inset-inline-end:-7px;bottom:-7px;cursor:nwse-resize;display:none;z-index:2;touch-action:none}
.yo-rz.yo-rz-s{inset-inline-end:auto;inset-inline-start:-7px;cursor:nesw-resize}
#editor .ProseMirror-selectednode .yo-rz{display:block}
.yo-doc .yo-shape{margin:8pt auto;display:table;position:relative;max-width:100%}
.yo-doc .yo-shape svg{display:block;max-width:100%;height:auto;overflow:visible}
.yo-doc .yo-cols{column-gap:28px;margin:0 0 8pt}
.yo-doc .yo-cols[data-rule]{column-rule:1px solid #d8d4f0}
.yo-doc .yo-cols>*{break-inside:avoid-column}
#editor .yo-cols{outline:1px dashed #e3dff6;outline-offset:4px}
.yo-doc .yo-pb{height:0;margin:0;border:0}
#editor .yo-pb{position:relative;height:18px;margin:6px 0}
#editor .yo-pb::before{content:'';position:absolute;inset-inline:0;top:50%;border-top:1px dashed #b0a8e8}
#editor .yo-pb::after{content:attr(data-label);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--page);padding:0 8px;font-size:10.5px;color:#8a83c6;font-family:var(--ui)}
body.lay-print #editor .yo-pb{height:0;margin:0}body.lay-print #editor .yo-pb::before,body.lay-print #editor .yo-pb::after{display:none}
.yo-doc .yo-fn{color:#4b3fb0;font-size:.72em;vertical-align:super;line-height:0;font-weight:700;padding:0 1px;cursor:help}
.yo-doc .yo-fn::after{content:'*'}
.yo-doc .yo-fn[data-n]::after{content:attr(data-n)}
.yo-doc .yo-bm{display:inline-block;width:0;height:1em;vertical-align:text-bottom}
body.show-marks .yo-doc .yo-bm{width:auto;border-inline-start:2px solid #6a5cf0}
.yo-doc .yo-toc{margin:6pt 0 14pt;padding:12px 14px;border:1px solid #e5e2f6;border-radius:6px;background:#fcfbff}
.yo-doc .toc-t{font-weight:700;font-size:14pt;color:#2b2580;margin-bottom:6px}
.yo-doc .toc-l{display:flex;align-items:baseline;gap:6px;padding:2px 0;color:inherit;text-decoration:none;cursor:pointer}
.yo-doc .toc-l .tl{flex:none;max-width:85%}
.yo-doc .toc-l::after{content:'';flex:1;border-bottom:1px dotted #b6b1d6;order:1;margin-bottom:4px}
.yo-doc .toc-l.nopg::after{display:none}
.yo-doc .toc-l .tp{order:2;font-weight:600;font-variant-numeric:tabular-nums;color:#6c6990}
.yo-doc .toc-l[data-l='2']{padding-inline-start:16px}.yo-doc .toc-l[data-l='3']{padding-inline-start:32px;font-size:.95em}.yo-doc .toc-l[data-l='4']{padding-inline-start:48px;font-size:.92em}
.yo-doc .toc-empty{color:#8a87a8;font-size:.95em}
.yo-doc .yo-eq{display:inline-block;padding:0 2px;font-size:1.05em}
#editor .yo-eq{cursor:pointer;border-radius:4px}#editor .yo-eq:hover{background:rgba(106,92,240,.08)}
.yo-doc math{font-family:'Latin Modern Math','STIX Two Math','Cambria Math',serif}
#editor .yo-comment{background:rgba(245,200,75,.32);border-bottom:2px solid #f0b92a;cursor:pointer}
#editor .yo-comment.active{background:rgba(245,200,75,.6)}
body.no-markup #editor .yo-comment{background:none;border:0}
#editor .yo-ins{color:#0f7a47;text-decoration:underline;text-decoration-color:#57c08a;background:rgba(87,192,138,.1)}
#editor .yo-del{color:#7a2fb8;text-decoration:line-through;background:rgba(220,60,90,.08)}
body.no-markup #editor .yo-ins{color:inherit;text-decoration:none;background:none}
body.no-markup #editor .yo-del{display:none}
.yo-find{background:#ffe680;border-radius:2px}.yo-find.cur{background:#ffb84d;box-shadow:0 0 0 1px #e08a00}
/* ---------- dark mode ---------- */
:root.dark{--ink:#ebe9ff;--ink2:#c3c0e6;--muted:#9592bd;--card:#1d1a3a;--bg:#141230;--line:#2e2a55;--line2:#3b3668;--soft:#24204a;--hover:#2b2756;--brand-soft:#2e2862;--canvas:#100e26;--sh3:0 12px 40px rgba(0,0,0,.5)}
:root.dark .htop{background:rgba(20,18,48,.86)}
:root.dark #splash{background:#141230}
:root.dark .tthumb,:root.dark .dlist-grid .dthumb,:root.dark .vprev{filter:brightness(.92)}
:root.dark .dlist-grid .dstar,:root.dark .dlist-grid .dmore{background:rgba(29,26,58,.92)}
:root.dark .rrow .more{background:var(--card);box-shadow:-8px 0 10px -4px rgba(29,26,58,.95)}
:root.dark #hruler .rin{background:#24204a}:root.dark #hruler .rm{background:#1a1738}
:root.dark input,:root.dark select,:root.dark textarea{background:#24204a}
:root.dark .toast{background:#3a3480}
:root.dark .rcard.err{background:#2b1a2c;border-color:#5a2b3e}
/* ---------- tablets ---------- */
@media (max-width:1100px){#side{width:320px}#nav{width:230px}.hbody{grid-template-columns:220px minmax(0,1fr)}}
@media (max-width:980px){#side{position:absolute;inset-block:0;inset-inline-end:0;z-index:20;box-shadow:var(--sh3)}#nav{position:absolute;inset-block:0;inset-inline-start:0;z-index:20;box-shadow:var(--sh3)}}
/* ---------- phones ---------- */
@media (max-width:760px){
  body{font-size:15px}
  .htop{padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top));gap:4px;flex-wrap:wrap}
  .brand span{font-size:16px}
  .hsearch{order:9;flex-basis:100%;max-width:none;margin:6px 0 2px}
  .hsearch input{min-height:40px}
  .htop .pts b{font-size:13px}
  .hbody{display:block}
  .hnav{position:static;flex-direction:row;align-items:center;gap:6px;padding:10px 12px 4px;overflow-x:auto;max-height:none;scrollbar-width:none}
  .hnav::-webkit-scrollbar{display:none}
  .hnav .newbtn,.hnav .nvh,.hnav .nvempty,.hnav .nvfoot{display:none}
  .nv{flex:none;min-height:36px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-size:13.5px;padding:0 13px;gap:7px}
  .nv span{overflow:visible}
  .nv .ic{width:16px;height:16px}
  .hmain{padding:12px 14px 110px}
  .start .srow{gap:12px;margin:0 -14px;padding:4px 14px 10px}
  .tcard{width:104px;font-size:12.5px}.tcard .tthumb{width:104px}
  .hhead h1{font-size:18px}
  .hhead #hImport{order:3}
  .dlist-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .dlist-grid .dthumb{padding:10px 10px 0}
  .dlist-grid .dthumb span{font-size:8px}
  .tgrid2,.tgallery .tgrid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .fab{display:grid;place-items:center;position:fixed;inset-inline-end:18px;bottom:calc(20px + env(safe-area-inset-bottom));width:58px;height:58px;border-radius:18px;background:var(--brand);color:#fff;box-shadow:0 8px 24px rgba(75,63,176,.4);z-index:30}
  .fab .ic{width:26px;height:26px}
  :root{--tb-h:50px}
  #titlebar{padding:0 4px;padding-top:env(safe-area-inset-top);gap:0}
  #titlebar .dicon{display:none}
  .title-in{max-width:calc(100vw - 210px);min-width:80px;font-size:15px!important}
  .hide-sm{display:none!important}
  #titlebar .btn.pri{padding:0 10px;min-height:34px;margin-inline-start:2px}
  #titlebar .btn.pri span{display:none}
  .rtabs{padding:0 4px}
  .rtab{min-height:38px;padding:0 11px;font-size:13.5px}
  .rtab.file{min-height:30px}
  #canvas{padding:12px 6px 80px}
  body.lay-web #editor .ProseMirror{padding:20px 18px 140px;min-height:calc(100vh - 200px)}
  #side,#nav{position:fixed;inset:auto 0 0 0;width:auto;height:min(78vh,640px);border-radius:18px 18px 0 0;border:0;z-index:120;box-shadow:0 -10px 40px rgba(29,26,69,.25);animation:up .22s cubic-bezier(.2,.8,.3,1);padding-bottom:env(safe-area-inset-bottom)}
  body.side-open #ed::after{content:'';position:fixed;inset:0;background:rgba(22,19,52,.32);z-index:110}
  .phead{padding:12px 10px 10px 16px}
  .qgrid{grid-template-columns:1fr 1fr}
  .findbar{top:6px;inset-inline:6px;width:auto}
  #status{font-size:11.5px;gap:0;padding:0 4px;padding-bottom:env(safe-area-inset-bottom)}
  #status .hide-sm{display:none}
  .modal{max-height:92vh}
  .mgrid{grid-template-columns:repeat(4,1fr)}
  .grid2{grid-template-columns:1fr}
  .bubble button{width:40px;height:40px}
  .bsgrid{grid-template-columns:1fr}
  .pop{max-width:calc(100vw - 16px)}
}
@media (max-width:380px){.mgrid{grid-template-columns:repeat(3,1fr)}.title-in{max-width:calc(100vw - 190px)}}
@media print{body.editing #titlebar,body.editing #ribbon,body.editing #status,body.editing #side,body.editing #nav,#hruler{display:none!important}}

/* home bottom tab bar (phones only) */
.hbar{display:none}
@media (max-width:760px){
  .hbar{display:flex;position:fixed;inset-inline:0;bottom:0;z-index:25;background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));justify-content:space-around}
  .hbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:48px;padding:4px 2px;border-radius:12px;color:var(--muted);font-size:11px;font-weight:600}
  .hbar button .ic{width:22px;height:22px}
  .hbar button[aria-current=page]{color:var(--brand)}
  .hbar button[aria-current=page] .ic{background:var(--brand-soft);border-radius:999px;padding:2px 14px;width:52px;box-sizing:border-box}
  body:not(.editing) .fab{bottom:calc(82px + env(safe-area-inset-bottom))}
  body:not(.editing) .hmain,body:not(.editing) #home{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
@media (max-width:760px){.hbody>.hnav{display:none!important}}
.pts.trial{background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 12%,transparent),color-mix(in srgb,#1ec8f7 14%,transparent));color:var(--brand);border:1px solid color-mix(in srgb,var(--brand) 25%,transparent)}
.pts.trial .ic{color:var(--brand)}
.rbody>.rg{flex-shrink:0}.rbody>.rg:has(.sgal){flex-shrink:1;min-width:240px}.rg:has(.sgal) .rgi{min-width:0;display:flex}.rg:has(.sgal) .sgal{min-width:0;flex:1 1 auto}
.backstage .bsinfo{display:flex;align-items:center;gap:10px;border-top:0;margin:0 0 6px;padding:4px 12px 12px;border-bottom:1px solid var(--line)}
.backstage .bsinfo b{display:block;font-size:14.5px;color:var(--ink);line-height:1.4}.backstage .bsinfo small{display:block;margin-top:2px}
@media (max-width:760px){body.side-open .bubble{display:none}}
.tablepop .tpick{display:block;margin:2px 0}
.tablepop .tgrid{display:grid;gap:3px;width:max-content;margin:4px auto}
.tablepop .tgrid button{width:22px;height:22px;padding:0;border-radius:3px}
@media (pointer:coarse){.tablepop .tgrid button{width:34px;height:34px;border-radius:5px}.tablepop .tgrid{gap:4px}}
.tablepop .tacts{justify-content:center;margin:8px 0 2px}
.tablepop .tacts .btn{width:auto;height:auto;min-height:34px;padding:6px 12px;border-radius:9px;display:inline-flex;gap:6px;white-space:nowrap}
.ctrack label.chk{display:flex;align-items:center;gap:10px;white-space:nowrap;flex-direction:row}
.ctrack label.chk input{flex:none;margin:0}

:root.dark #hruler{border-bottom-color:var(--line)}
:root.dark .sgi{background:#f6f5fc}:root.dark .sgi[aria-selected=true]{box-shadow:0 0 0 2px #8f84ff}
:root.dark .title-in::placeholder{color:#a9a5d6;opacity:1}
.cpop>div.sw{display:grid;grid-template-columns:repeat(8,26px);gap:5px;width:auto;height:auto;border:0;border-radius:0;margin-bottom:8px}
.cpop>div.sw>button{width:26px;height:26px;border-radius:6px;border:1px solid rgba(0,0,0,.12);cursor:pointer}
.cpop>div.sw>button:hover,.cpop>div.sw>button:focus-visible{transform:scale(1.12);box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--brand)}
.cpop>.crow:has(.btn){display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#ribbon .rsel.zoomv{flex:none;min-width:58px;text-align:center}

/* c7: on narrow phones the late assistant toggle wrapped the header to a 2nd row (search jumped 46 px); keep one row */
@media (max-width:420px){.htop:has(.yox-aitg) .brand span{display:none}.htop:has(.yox-aitg) .brand{min-width:44px;min-height:44px;justify-content:center}.htop .yox-aitg kbd{display:none}}

/* w64-fcj-8856d5: wallet «Recent activity» rows (amount and time no longer run together) + account email shown as typed */
ul.ledger{list-style:none;margin:0;padding:0}
ul.ledger li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:baseline;gap:14px;padding:8px 4px;border-bottom:1px solid var(--line)}
ul.ledger li b{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
ul.ledger li small{color:var(--muted);font-size:12px;white-space:nowrap}
.pop .mhd.mhd-em,.smenu .mhd.mhd-em{text-transform:none;letter-spacing:0;font-weight:600;overflow-wrap:anywhere}
/* w64-fcj-8856d5-b: on a phone, while a dialog is open, notices show at the top so they never cover the dialog's buttons (share «دعوة», «تم») */
@media (max-width:760px){body:has(.mback) #toasts{top:calc(10px + env(safe-area-inset-top));bottom:auto!important}}