/* سحاب · نظام التصميم النهائي · الجولة 3 · 8 نوفمبر 2026 */
body{margin:0}
.sb{--sb-font-ui:"IBM Plex Sans Arabic",system-ui,sans-serif;--sb-font-display:"Readex Pro","IBM Plex Sans Arabic",sans-serif;--sb-font-mono:"JetBrains Mono","IBM Plex Sans Arabic",ui-monospace,monospace;
--sb-r-xs:6px;--sb-r-sm:10px;--sb-r-md:14px;--sb-r-lg:20px;--sb-r-xl:28px;--sb-r-2xl:32px;--sb-r-pill:999px;
--sb-bg:#0A0F14;--sb-surface:#111A22;--sb-surface-2:#18242E;--sb-well:#0D141B;--sb-native:#1B2833;--sb-text:#E6EDF2;--sb-muted:#97A7B3;--sb-faint:#5F707C;--sb-border:#22313C;--sb-border-strong:#344753;
--sb-primary:#7CC7E8;--sb-on-primary:#04121A;--sb-primary-soft:rgba(124,199,232,.12);--sb-success:#5FD3A6;--sb-warning:#F3C25B;--sb-warning-soft:rgba(243,194,91,.12);--sb-danger:#FF7A7A;--sb-on-danger:#1A0505;--sb-danger-soft:rgba(255,122,122,.12);
--sb-on-warning:#1A1200;--sb-hold-ms:1200ms;--sb-hold-gap:28px;--sb-local:#D7A6FF;--sb-local-soft:rgba(215,166,255,.12);--sb-seal:#EAF2F6;--sb-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 48px rgba(0,0,0,.45);
--sb-overlay:rgba(2,5,8,.62);--sb-mark:rgba(124,199,232,.26);--sb-kbd-bg:#18242E;--sb-kbd-edge:#344753;--sb-locked-bg:#141E27;--sb-ring:0 0 0 2px #0A0F14,0 0 0 4px #7CC7E8;
--sb-code-kw:#C3A6FF;--sb-code-str:#9EE0B5;--sb-code-cm:#7D8F9B;--sb-diff-add:rgba(95,211,166,.14);--sb-diff-del:rgba(255,122,122,.14);
--sb-sheet:#05080B;--sb-sheet-text:#97A7B3;font-family:var(--sb-font-ui);color:var(--sb-text)}
.sb[data-theme="light"]{--sb-bg:#F3F5F6;--sb-surface:#FFFFFF;--sb-surface-2:#EEF2F4;--sb-well:#F8FAFB;--sb-native:#E6EDF1;--sb-text:#0D1B24;--sb-muted:#4E606C;--sb-faint:#8696A1;--sb-border:#D6DFE4;--sb-border-strong:#B8C6CE;
--sb-primary:#0B6E95;--sb-on-primary:#FFFFFF;--sb-primary-soft:rgba(11,110,149,.10);--sb-success:#0E7A55;--sb-warning:#8A5A00;--sb-warning-soft:rgba(214,150,20,.14);--sb-danger:#C0262D;--sb-on-danger:#FFFFFF;--sb-danger-soft:rgba(192,38,45,.10);
--sb-on-warning:#FFFFFF;--sb-local:#7B3FB5;--sb-local-soft:rgba(123,63,181,.10);--sb-seal:#0D1B24;--sb-shadow:0 1px 2px rgba(13,27,36,.06),0 12px 32px rgba(13,27,36,.10);
--sb-overlay:rgba(13,27,36,.38);--sb-mark:rgba(11,110,149,.16);--sb-kbd-bg:#FFFFFF;--sb-kbd-edge:#B8C6CE;--sb-locked-bg:#E6EDF1;--sb-ring:0 0 0 2px #F3F5F6,0 0 0 4px #0B6E95;
--sb-code-kw:#6B3FD4;--sb-code-str:#13774A;--sb-code-cm:#6A7A85;--sb-diff-add:rgba(14,122,85,.10);--sb-diff-del:rgba(192,38,45,.09);--sb-sheet:#DCE3E7;--sb-sheet-text:#3F515D}
.sb *{box-sizing:border-box}
.mono{font-family:var(--sb-font-mono);direction:ltr;unicode-bidi:isolate}
/* board */
.board{background:var(--sb-sheet);padding:64px;display:flex;flex-direction:column;gap:36px;overflow:hidden}
.bh{display:flex;flex-direction:column;gap:8px}
.bh h2{margin:0;font-family:var(--sb-font-display);font-weight:500;font-size:32px;color:var(--sb-text)}
.bh p{margin:0;font-size:16px;line-height:1.6;color:var(--sb-sheet-text);max-width:1400px}
.rowp{display:flex;gap:44px;align-items:flex-start;flex-wrap:wrap}
.cap{font-size:14px;color:var(--sb-sheet-text);margin:0 0 12px;font-weight:600;max-width:390px}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font-size:11px;font-weight:700;background:var(--sb-surface-2);color:var(--sb-muted);margin-inline-start:6px;vertical-align:middle}
/* frames */
.ph{width:390px;height:844px;flex:none;border-radius:44px;overflow:hidden;background:var(--sb-bg);color:var(--sb-text);position:relative;display:flex;flex-direction:column;box-shadow:0 0 0 1px var(--sb-border-strong),var(--sb-shadow)}
.dk{width:1280px;height:800px;flex:none;border-radius:18px;overflow:hidden;background:var(--sb-bg);color:var(--sb-text);position:relative;box-shadow:0 0 0 1px var(--sb-border-strong),var(--sb-shadow)}
.tile{width:300px;height:330px;flex:none;border-radius:24px;overflow:hidden;background:var(--sb-bg);position:relative;display:flex;flex-direction:column;box-shadow:0 0 0 1px var(--sb-border-strong)}
.tile .tl{font-size:12px;font-weight:700;color:var(--sb-muted);padding:12px 16px 0}
/* header */
.bar{display:flex;align-items:center;gap:2px;padding:50px 6px 8px;background:var(--sb-bg);box-shadow:0 1px 0 var(--sb-border);position:relative;z-index:10;flex:none}
.ttl{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ttl b{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--sb-muted);flex-wrap:wrap}
.ib{width:44px;height:44px;flex:none;border-radius:14px;border:0;background:transparent;color:var(--sb-text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.seal{display:inline-flex;align-items:center;gap:6px;font-family:var(--sb-font-display);font-size:12px;font-weight:600;color:var(--sb-seal)}
.seal svg{width:16px;height:16px}
/* stream */
.well{flex:1;background:var(--sb-well);padding:16px;display:flex;flex-direction:column;gap:14px;overflow:hidden;position:relative;box-shadow:inset 0 6px 14px rgba(0,0,0,.18);min-height:0}
.you{align-self:flex-start;max-width:86%;background:var(--sb-surface-2);border-radius:20px 20px 20px 6px;padding:11px 14px;font-size:15.5px;line-height:1.65}
.ack{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--sb-muted);margin-top:-8px;padding-inline-start:6px}
.md{font-size:15.5px;line-height:1.75;margin:0}
.ic{font-family:var(--sb-font-mono);font-size:12.5px;background:var(--sb-surface-2);padding:1px 6px;border-radius:6px;direction:ltr;unicode-bidi:isolate}
.fade1{opacity:.55}.fade2{opacity:.25}
.wl{background:var(--sb-well);box-shadow:inset 0 0 0 1px var(--sb-border);border-radius:8px;padding:2px 8px}
.tline{display:flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--sb-border);font-size:13.5px;color:var(--sb-muted);align-self:flex-start;max-width:100%}
.tline.err{box-shadow:inset 0 0 0 1.5px var(--sb-danger);color:var(--sb-text)}
.eot{font-size:11.5px;color:var(--sb-muted);display:flex;align-items:center;gap:8px}
.eot::before,.eot::after{content:"";flex:1;height:1px;background:var(--sb-border)}
.blk{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--sb-surface);box-shadow:inset 0 0 0 1px var(--sb-border);font-size:13.5px;line-height:1.6}
/* native (sealed) */
.note{background:var(--sb-native);border-radius:18px;padding:14px 16px;box-shadow:var(--sb-shadow),inset 0 0 0 1px var(--sb-border-strong);display:flex;flex-direction:column;gap:8px;position:relative;z-index:50}
.note b{font-size:15px;font-weight:600}
.note p{margin:0;font-size:13.5px;line-height:1.65;color:var(--sb-muted)}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--sb-native);border-radius:32px 32px 44px 44px;box-shadow:0 -1px 0 var(--sb-border-strong),0 -24px 60px rgba(0,0,0,.45);padding:12px 18px 30px;display:flex;flex-direction:column;gap:14px;z-index:50}
.sheet.plain{background:var(--sb-surface)}
.grab{align-self:center;width:40px;height:5px;border-radius:5px;background:var(--sb-border-strong)}
.ov{position:absolute;inset:0;background:var(--sb-overlay);z-index:40}
.dim{opacity:.35}
/* composer */
.comp{background:var(--sb-bg);padding:8px 12px 30px;box-shadow:0 -1px 0 var(--sb-border);position:relative;z-index:10;flex:none}
.live{display:flex;align-items:center;gap:8px;padding:0 8px 8px;font-size:12px;color:var(--sb-muted)}
.cbox{background:var(--sb-surface);border-radius:24px;box-shadow:inset 0 0 0 1px var(--sb-border-strong);padding:8px 6px 6px;display:flex;align-items:flex-end;gap:4px}
.cbox .tx{flex:1;min-height:44px;display:flex;align-items:center;font-size:16px;padding:0 6px}
.cbox .ph-t{color:var(--sb-muted)}
.send,.stop{width:44px;height:44px;border-radius:50%;border:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.send{background:var(--sb-primary);color:var(--sb-on-primary)}
.send[aria-disabled="true"]{opacity:.35}
.stop{background:var(--sb-danger-soft);color:var(--sb-danger)}
.kb{background:#1E2A33;padding:10px 6px 34px;display:flex;flex-direction:column;gap:9px;flex:none}
.sb[data-theme="light"] .kb{background:#D5DCE1}
.kr{display:flex;gap:5px;justify-content:center}
.k{height:40px;flex:1;max-width:32px;border-radius:6px;background:#2C3A45}
.sb[data-theme="light"] .k{background:#FFF}
/* buttons */
.btn{min-height:50px;border-radius:999px;border:0;font:600 15px/1 var(--sb-font-ui);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 20px;cursor:pointer;text-decoration:none}
.btn-p{background:var(--sb-primary);color:var(--sb-on-primary)}
.btn-g{background:var(--sb-surface-2);color:var(--sb-text);box-shadow:inset 0 0 0 1px var(--sb-border-strong)}
.btn-d{background:var(--sb-danger);color:var(--sb-on-danger)}
.btn-do{background:transparent;color:var(--sb-danger);box-shadow:inset 0 0 0 1.5px var(--sb-danger)}
.btn-t{background:transparent;color:var(--sb-primary);padding:0 6px;min-height:40px}
.btn-sm{min-height:38px;font-size:13.5px;padding:0 14px}
.wide{width:100%}
.lnk{border:0;background:none;color:var(--sb-primary);font:600 13.5px var(--sb-font-ui);padding:6px 0;cursor:pointer}
/* chips, marks, states */
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--sb-surface-2);color:var(--sb-muted)}
.pend{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;background:var(--sb-warning);color:var(--sb-on-warning);font-size:12px;font-weight:700;flex:none;gap:4px}
.m-local{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:4px;box-shadow:inset 0 0 0 1.5px var(--sb-local);color:var(--sb-local);font-size:11.5px;font-weight:700;white-space:nowrap}
.m-nobox{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:4px;border:1.5px dashed var(--sb-local);color:var(--sb-local);font-size:11.5px;font-weight:700;white-space:nowrap}
.conn{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--sb-muted)}
.conn i{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--sb-success)}
.conn.off i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--sb-muted)}
/* lists */
.row{display:flex;align-items:flex-start;gap:14px;padding:12px 20px;text-decoration:none;color:inherit}
.row + .row{box-shadow:0 -1px 0 var(--sb-border)}
.rt{font-size:15.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm{font-size:12.5px;color:var(--sb-muted);margin-top:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sec{font-size:12px;font-weight:600;color:var(--sb-muted);padding:14px 20px 4px}
.new{display:flex;width:7px;height:7px;border-radius:2px;background:var(--sb-primary);transform:rotate(45deg);flex:none;margin-top:8px}
.seg{display:flex;background:var(--sb-surface-2);border-radius:14px;padding:4px;gap:4px}
.seg button{flex:1;height:38px;border:0;border-radius:10px;background:transparent;color:var(--sb-muted);font:600 14px var(--sb-font-ui);cursor:pointer}
.seg button.on{background:var(--sb-bg);color:var(--sb-text);box-shadow:inset 0 0 0 1px var(--sb-border-strong)}
.sk{background:var(--sb-surface-2);border-radius:8px;animation:sbk 1.4s ease-in-out infinite}
@keyframes sbk{50%{opacity:.45}}
/* files */
.fcard{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 6px;border-radius:16px;background:var(--sb-surface);box-shadow:inset 0 0 0 1px var(--sb-border);text-decoration:none;color:inherit}
.fi{width:44px;height:44px;border-radius:12px;background:var(--sb-surface-2);display:inline-flex;align-items:center;justify-content:center;flex:none;font-family:var(--sb-font-mono);font-size:10.5px;font-weight:700;color:var(--sb-muted)}
.thumb{width:96px;height:96px;border-radius:14px;flex:none;overflow:hidden;position:relative;background:var(--sb-surface-2);box-shadow:inset 0 0 0 1px var(--sb-border)}
.thumb.s64{width:64px;height:64px}
.pic{position:absolute;inset:0}
.pic-a{background:linear-gradient(160deg,#2B4A5C 0%,#1A2E3A 55%,#0F1C24 100%)}
.pic-a::after{content:"";position:absolute;left:18%;right:18%;bottom:18%;height:34%;border-radius:40% 40% 8px 8px;background:#6E93A6;opacity:.6}
.pic-b{background:linear-gradient(200deg,#5C4A2B 0%,#3A2E1A 60%,#24180F 100%)}
.pic-b::after{content:"";position:absolute;width:30%;height:30%;top:20%;right:22%;border-radius:50%;background:#E8C27A;opacity:.7}
.pic-c{background:#E9EEF1}
.pic-c::after{content:"";position:absolute;left:14%;right:14%;top:20%;bottom:20%;background:repeating-linear-gradient(0deg,#9AA9B3 0 3px,transparent 3px 11px);opacity:.7}
/* fields */
.lbl{font-size:13.5px;font-weight:600}
.field{min-height:52px;border-radius:14px;background:var(--sb-surface);box-shadow:inset 0 0 0 1px var(--sb-border-strong);display:flex;align-items:center;gap:10px;padding:0 14px;font-size:15.5px;color:var(--sb-text)}
.field.focus{box-shadow:inset 0 0 0 2px var(--sb-primary)}
.field .hint{color:var(--sb-muted)}
.sw{width:50px;height:30px;border-radius:999px;background:var(--sb-border-strong);position:relative;flex:none;border:0;padding:0}
.sw::after{content:"";position:absolute;top:3px;right:3px;width:24px;height:24px;border-radius:50%;background:var(--sb-surface)}
.sw.on{background:var(--sb-primary)}
.sw.on::after{right:auto;left:3px;background:var(--sb-on-primary)}
.grp{background:var(--sb-surface);border-radius:18px;box-shadow:inset 0 0 0 1px var(--sb-border);overflow:hidden}
.gi{display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 16px}
.gi + .gi{box-shadow:0 -1px 0 var(--sb-border)}
.gt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.gt b{font-size:15px;font-weight:600}
.gt span{font-size:12.5px;color:var(--sb-muted);line-height:1.5}
.glbl{font-size:12px;font-weight:700;color:var(--sb-muted);margin:18px 6px 8px}
.meter{height:8px;border-radius:8px;background:var(--sb-surface-2);overflow:hidden}
.meter i{display:block;height:100%;border-radius:8px;background:var(--sb-primary)}
.meter.hi i{background:var(--sb-warning)}
/* code */
.code{background:var(--sb-bg);border-radius:12px;box-shadow:inset 0 0 0 1px var(--sb-border);overflow:hidden}
.code pre{margin:0;padding:10px 12px;font-family:var(--sb-font-mono);font-size:12px;line-height:1.65;direction:ltr;text-align:left;white-space:pre;overflow:hidden}
.k1{color:var(--sb-code-kw)}.k2{color:var(--sb-code-str)}.k3{color:var(--sb-code-cm)}
.dl{display:block;padding:0 10px}
.dl.a{background:var(--sb-diff-add)}.dl.d{background:var(--sb-diff-del)}
.dl.a::before{content:"+ ";color:var(--sb-success)}.dl.d::before{content:"− ";color:var(--sb-danger)}.dl.c::before{content:"  "}
/* permission card (local, unchanged) */
.cmd{background:var(--sb-well);border-radius:14px;box-shadow:inset 0 0 0 1px var(--sb-border);padding:10px 12px;font-family:var(--sb-font-mono);font-size:12px;line-height:1.6;white-space:pre-wrap;word-break:break-all;margin:0;direction:ltr;text-align:left;color:var(--sb-text)}
.inv{display:inline-block;padding:0 3px;border-radius:3px;background:var(--sb-danger-soft);color:var(--sb-danger);font-size:10px;font-weight:700;vertical-align:1px}
.deny{height:58px;border-radius:18px;border:0;background:var(--sb-surface-2);color:var(--sb-text);box-shadow:inset 0 0 0 1.5px var(--sb-border-strong);font:700 17px var(--sb-font-ui);flex:1.25;cursor:pointer}
.hold{position:relative;overflow:hidden;height:58px;border-radius:18px;border:0;background:transparent;color:var(--sb-success);box-shadow:inset 0 0 0 1.5px var(--sb-success);font:600 14px var(--sb-font-ui);flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}
/* kbd */
.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;border-radius:7px;background:var(--sb-kbd-bg);box-shadow:inset 0 -1.5px 0 var(--sb-kbd-edge),inset 0 0 0 1px var(--sb-kbd-edge);font-family:var(--sb-font-mono);font-size:11.5px;color:var(--sb-text);direction:ltr}
/* round 3 */
.code .k1{color:color-mix(in srgb,var(--sb-code-kw) 70%,var(--sb-text))}.code .k2{color:color-mix(in srgb,var(--sb-code-str) 70%,var(--sb-text))}.code .k3{color:color-mix(in srgb,var(--sb-code-cm) 65%,var(--sb-text))}
.verb{display:inline-flex;align-items:center;gap:6px;color:var(--sb-text);animation:sbb 2.4s ease-in-out infinite}
@keyframes sbb{50%{color:var(--sb-muted)}}
.hold{gap:6px}.decide{display:flex;gap:var(--sb-hold-gap)}
.sb ::-webkit-scrollbar{width:6px;height:6px}.sb ::-webkit-scrollbar-thumb{background:var(--sb-border-strong);border-radius:6px}.sb ::-webkit-scrollbar-track{background:transparent}
.sb *{scrollbar-width:thin;scrollbar-color:var(--sb-border-strong) transparent}
@media (pointer:coarse){.sb *{scrollbar-width:none}.sb ::-webkit-scrollbar{display:none}}
@media (prefers-reduced-motion:reduce){.verb,.sk{animation:none}}
.load{display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:14px;background:var(--sb-native);box-shadow:inset 0 0 0 1px var(--sb-border-strong);font-size:13.5px;color:var(--sb-text)}