/* WhyCloud Support Desk — shared by console, admin panel and whyadmin.ir.
   Depends only on /kit/theme.css tokens ("Airy Glass"); RTL first, light + dark, responsive. */
.sd{--sd-r:22px;direction:rtl;color:var(--text-1);max-width:1440px;margin:0 auto;padding:0 0 32px;animation:sd-in var(--dur-4,.36s) var(--ease-out,ease) both}
.sd *,.sd *::before,.sd *::after{box-sizing:border-box}
.sd svg.i,.sd-modal svg.i{width:16px;height:16px;flex:none}

/* buttons */
.sd-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:12px;border:1px solid var(--border-input);background:var(--surface-solid);color:var(--text-1);font:600 13.5px/1 var(--font-sans);cursor:pointer;white-space:nowrap;transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2),background-color var(--dur-2),border-color var(--dur-2),color var(--dur-2)}
.sd-btn:hover:not(:disabled){border-color:var(--border-strong);color:var(--blue-700)}
.sd-btn:active:not(:disabled){transform:translateY(1px) scale(.98)}
.sd-btn.primary{background:var(--brand-grad);border-color:transparent;color:#fff;box-shadow:var(--shadow-brand)}
.sd-btn.primary:hover:not(:disabled){color:#fff;filter:brightness(1.06);box-shadow:var(--shadow-glow)}
.sd-btn.ghost{background:transparent;border-color:var(--border-hair);box-shadow:none;color:var(--text-2)}
.sd-btn.ghost:hover:not(:disabled){background:var(--surface-hover);color:var(--brand)}
.sd-btn.sm{height:34px;padding:0 12px;font-size:12.5px}
.sd-btn:disabled{opacity:.55;cursor:wait}
.sd-icon-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;border:1px solid var(--border-hair);background:var(--surface-glass-2);color:var(--text-2);cursor:pointer;transition:background-color var(--dur-2),color var(--dur-2),transform var(--dur-1)}
.sd-icon-btn:hover{background:var(--surface-hover);color:var(--brand)}
.sd-icon-btn:active{transform:scale(.95)}
.sd-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;border:1px solid var(--border-hair);background:var(--surface-glass-2);color:var(--text-2);font:600 12px var(--font-sans);cursor:pointer;white-space:nowrap;transition:all var(--dur-2)}
.sd-chip:hover,.sd-chip.on{border-color:var(--border-strong);color:var(--brand);background:var(--blue-50)}
.sd-chip svg.i{width:14px;height:14px}

/* hero */
.sd-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:20px 28px;flex-wrap:wrap;padding:22px 28px;margin-bottom:18px;border-radius:28px;border:1px solid var(--border-soft);background:linear-gradient(125deg,var(--surface-glass-2),var(--surface-glass));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));box-shadow:var(--shadow-inset-hi),var(--shadow-md)}
.sd-hero>*{position:relative;z-index:1}
.sd-orb{position:absolute!important;z-index:0!important;border-radius:50%;filter:blur(36px);pointer-events:none}
.sd-orb.a{width:280px;height:280px;inset-inline-start:-80px;top:-150px;background:radial-gradient(circle,rgba(38,103,255,.28),transparent 70%);animation:sd-drift 14s ease-in-out infinite}
.sd-orb.b{width:220px;height:220px;inset-inline-end:28%;bottom:-160px;background:radial-gradient(circle,rgba(124,92,255,.22),transparent 70%);animation:sd-drift 18s ease-in-out infinite reverse}
.sd-eyebrow{display:inline-flex;align-items:center;gap:7px;font:750 11px/1 var(--font-sans);letter-spacing:.14em;color:var(--brand)}
.sd-eyebrow svg.i{width:14px;height:14px}
.sd-hero h1{font-size:clamp(24px,3vw,32px);font-weight:850;letter-spacing:-.03em;margin:10px 0 6px}
.sd-hero p{color:var(--text-2);font-size:13.5px;line-height:1.9;max-width:560px;margin:0}
.sd-hero-side{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.sd-stats{display:flex;gap:10px;flex-wrap:wrap}
.sd-stat{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;min-width:112px;padding:12px 14px;border-radius:18px;background:var(--surface-glass-2);border:1px solid var(--border-hair);box-shadow:var(--shadow-xs)}
.sd-stat span{grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--blue-50);color:var(--brand)}
.sd-stat.warn span{background:var(--warning-50);color:var(--warning-600)}
.sd-stat.good span{background:var(--success-50);color:var(--success-600)}
.sd-stat b{font-size:20px;font-weight:850;line-height:1.1;font-variant-numeric:tabular-nums}
.sd-stat small{font-size:11.5px;color:var(--text-3);white-space:nowrap}

/* desk layout */
.sd-desk{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:16px;min-height:640px;height:calc(100vh - 290px);max-height:960px}
.sd-inbox,.sd-pane{min-height:0;border-radius:var(--sd-r);border:1px solid var(--border-hair);background:var(--surface-glass);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));box-shadow:var(--shadow-inset-hi),var(--shadow-sm);overflow:hidden}
.sd-inbox{display:flex;flex-direction:column}
.sd-inbox-head{display:flex;gap:8px;align-items:center;padding:14px 14px 10px}
.sd-search{flex:1;display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:12px;border:1px solid var(--border-input);background:var(--surface-sunken);color:var(--text-3);transition:border-color var(--dur-2),box-shadow var(--dur-2)}
.sd-search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(38,103,255,.12)}
.sd-search input{flex:1;min-width:0;height:100%;border:0!important;outline:0;background:transparent!important;box-shadow:none!important;padding:0!important;color:var(--text-1);font:400 13px var(--font-sans)}
.sd-tabs{display:flex;gap:4px;padding:0 10px 10px;border-bottom:1px solid var(--border-hair);overflow-x:auto;scrollbar-width:none}
.sd-tabs button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border:0;border-radius:10px;background:transparent;color:var(--text-2);font:600 12.5px var(--font-sans);cursor:pointer;white-space:nowrap;transition:background-color var(--dur-2),color var(--dur-2)}
.sd-tabs button i{font-style:normal;font-size:11px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;background:var(--ink-100);color:var(--text-3)}
.sd-tabs button:hover{background:var(--surface-hover)}
.sd-tabs button[aria-selected=true]{background:var(--blue-50);color:var(--brand)}
.sd-tabs button[aria-selected=true] i{background:var(--brand);color:#fff}
.sd-list{flex:1;overflow-y:auto;padding:8px;scrollbar-width:thin}
.sd-row{position:relative;display:flex;gap:12px;width:100%;padding:13px 12px;margin-bottom:4px;border:1px solid transparent;border-radius:16px;background:transparent;color:inherit;text-align:right;font:inherit;cursor:pointer;transition:background-color var(--dur-2),border-color var(--dur-2),transform var(--dur-2) var(--ease-out);animation:sd-in .32s var(--ease-out) both}
.sd-row:hover{background:var(--surface-hover)}
.sd-row.on{background:var(--surface-selected);border-color:var(--border-soft);box-shadow:var(--shadow-xs)}
.sd-row.needs::after{content:"";position:absolute;inset-inline-end:10px;top:16px;width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(38,103,255,.14)}
.sd.customer .sd-row.needs::after{background:var(--warning-500);box-shadow:0 0 0 4px rgba(242,162,12,.16)}
.sd-row-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:var(--blue-50);color:var(--brand)}
.sd-row-ico.s-waiting_customer{background:var(--warning-50);color:var(--warning-600)}
.sd-row-ico.s-resolved{background:var(--success-50);color:var(--success-600)}
.sd-row-ico.s-closed{background:var(--ink-100);color:var(--text-3)}
.sd-row-main{flex:1;min-width:0;display:grid;gap:4px;padding-inline-end:12px}
.sd-row-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.sd-row-top b{font-size:13.5px;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-row-top time{flex:none;font-size:11px;color:var(--text-3)}
.sd-row-prev{font-size:12px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.6}
.sd-row-prev em{font-style:normal;color:var(--text-3)}
.sd-row-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;color:var(--text-3)}
.sd-row-meta>span:not(.sd-pri):not(.sd-late):not(.sd-asg){display:inline-flex;align-items:center;gap:4px}
.sd-row-meta svg.i{width:12px;height:12px}
.sd-row-meta>*+*:not(.sd-pri):not(.sd-late):not(.sd-asg)::before{content:"·";margin-inline-end:2px;opacity:.6}
.sd-pri{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font-size:10.5px;font-weight:750;background:var(--ink-100);color:var(--text-2)}
.sd-pri.high{background:var(--warning-50);color:var(--warning-700)}
.sd-pri.urgent{background:var(--danger-50);color:var(--danger-700)}
.sd-pri.low{background:var(--info-50);color:var(--info-700)}
.sd-late{display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 7px;border-radius:999px;font-size:10.5px;font-weight:700;background:var(--danger-50);color:var(--danger-700)}
.sd-asg{margin-inline-start:auto;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:10px;font-weight:800;background:var(--ai-50);color:var(--ai-700)}
.sd-list-empty{display:grid;justify-items:center;gap:6px;padding:56px 20px;text-align:center;color:var(--text-3)}
.sd-list-empty svg.i{width:30px;height:30px;color:var(--brand);opacity:.8}
.sd-list-empty b{color:var(--text-1);font-size:14px}
.sd-list-empty small{font-size:12px}

/* status pill */
.sd-status{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--blue-50);color:var(--blue-700)}
.sd-status svg.i{width:13px;height:13px}
.sd-status.warn{background:var(--warning-50);color:var(--warning-700)}
.sd-status.good{background:var(--success-50);color:var(--success-700)}
.sd-status.muted{background:var(--ink-100);color:var(--text-2)}

/* welcome pane */
.sd-welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:40px 28px}
.sd-welcome h2{font-size:21px;font-weight:850;letter-spacing:-.02em;margin:6px 0 0}
.sd-welcome p{color:var(--text-2);font-size:13.5px;max-width:440px;line-height:1.9;margin:0 0 8px}
.sd-illus{width:220px;height:150px;margin-bottom:6px}
.sd-il-shadow{fill:rgba(38,103,255,.10)}
.sd-il-card{fill:var(--surface-solid);stroke:var(--border-soft);stroke-width:1.5}
.sd-il-line{fill:var(--blue-200)}.sd-il-line.soft{fill:var(--blue-100)}
.sd-il-b1{animation:sd-bob 6s ease-in-out infinite}.sd-il-b2{animation:sd-bob 6s ease-in-out -3s infinite}
.sd-il-spark{transform-origin:186px 34px;animation:sd-spin 9s linear infinite}
.sd-keys{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;font-size:12px;color:var(--text-3);margin-top:8px}
.sd-keys kbd{font:600 11px var(--font-mono);padding:2px 7px;border-radius:6px;border:1px solid var(--border-input);background:var(--surface-solid);color:var(--text-2)}
.sd-tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:560px;margin-top:18px}
.sd-tips a{display:grid;justify-items:center;gap:4px;padding:16px 10px;border-radius:16px;border:1px solid var(--border-hair);background:var(--surface-glass-2);transition:transform var(--dur-2) var(--ease-out),border-color var(--dur-2),box-shadow var(--dur-2)}
.sd-tips a:hover{transform:translateY(-2px);border-color:var(--border-soft);box-shadow:var(--shadow-sm)}
.sd-tips span{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--blue-50);color:var(--brand)}
.sd-tips b{font-size:13px}.sd-tips small{font-size:11.5px;color:var(--text-3)}

/* conversation */
.sd-conv{display:flex;flex-direction:column;position:relative;container-type:inline-size;container-name:sdconv}
.sd-conv-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border-hair);background:var(--surface-glass-2)}
.sd-back{display:none}
.sd-conv-title{flex:1;min-width:0}
.sd-conv-title h2{font-size:17px;font-weight:800;letter-spacing:-.015em;margin:0 0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-conv-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--text-3)}
.sd-conv-meta>span:not(.sd-status):not(.sd-pri){display:inline-flex;align-items:center;gap:4px}
.sd-conv-meta svg.i{width:13px;height:13px}
.sd-conv-body{flex:1;min-height:0;display:grid;grid-template-columns:1fr 250px}
.sd-thread{min-height:0;overflow-y:auto;padding:20px 22px 12px;display:flex;flex-direction:column;gap:2px;scroll-behavior:smooth;background:radial-gradient(120% 60% at 50% 0%,rgba(38,103,255,.035),transparent 70%)}
.sd-day{display:flex;justify-content:center;margin:14px 0 10px}
.sd-day span{font-size:11px;font-weight:650;color:var(--text-3);padding:4px 12px;border-radius:999px;background:var(--surface-glass-2);border:1px solid var(--border-hair)}
.sd-msg{display:flex;gap:10px;align-items:flex-end;max-width:86%;margin-top:10px;animation:sd-pop .3s var(--ease-out) both}
.sd-msg.grouped{margin-top:3px}
.sd-msg.grouped .sd-av{visibility:hidden}
.sd-msg.grouped .sd-bubble header{display:none}
.sd-msg.own{align-self:flex-start}
.sd-msg:not(.own){align-self:flex-end;flex-direction:row-reverse}
.sd-av{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-size:12px;font-weight:800;background:var(--ink-100);color:var(--text-2);overflow:hidden}
.sd-av.brand{background:var(--surface-solid);border:1px solid var(--border-soft)}
.sd-av img{width:22px;height:22px}
.sd-bubble{min-width:0;padding:11px 15px 12px;border-radius:18px;background:var(--surface-solid);border:1px solid var(--border-hair);box-shadow:var(--shadow-xs)}
.sd-msg.own .sd-bubble{border-end-start-radius:6px}
.sd-msg:not(.own) .sd-bubble{border-end-end-radius:6px}
.sd-msg.own:not(.internal) .sd-bubble{background:linear-gradient(135deg,var(--blue-50),var(--surface-solid));border-color:var(--blue-100)}
.sd-msg.internal .sd-bubble{background:var(--warning-50);border:1px dashed var(--warning-500)}
.sd-bubble header{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.sd-bubble header b{font-size:12.5px;font-weight:750}
.sd-bubble header time{margin-inline-start:auto;font-size:10.5px;color:var(--text-3)}
.sd-badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--blue-50);color:var(--brand)}
.sd-msg.internal .sd-badge{background:var(--warning-100);color:var(--warning-700)}
.sd-badge svg.i{width:11px;height:11px}
.sd-text{font-size:13.5px;line-height:1.95;white-space:pre-wrap;overflow-wrap:anywhere}
.sd-text a{color:var(--text-link);text-decoration:underline;text-underline-offset:3px}
.sd-text code{font:500 12px var(--font-mono);padding:1px 6px;border-radius:6px;background:var(--ink-100);direction:ltr;unicode-bidi:isolate}
.sd-closed{align-self:center;display:inline-flex;align-items:center;gap:7px;margin:18px 0 6px;padding:8px 14px;border-radius:999px;font-size:12px;color:var(--success-700);background:var(--success-50)}

/* details side */
.sd-info{min-height:0;overflow-y:auto;border-inline-start:1px solid var(--border-hair);padding:18px 16px;display:grid;align-content:start;gap:18px;background:var(--surface-glass-2)}
.sd-info h3{font-size:11.5px;font-weight:750;letter-spacing:.08em;color:var(--text-3);margin:0 0 10px}
.sd-info dl{margin:0;display:grid;gap:10px}
.sd-info dl>div{display:grid;gap:2px}
.sd-info dt{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-3)}
.sd-info dt svg.i{width:13px;height:13px}
.sd-info dd{margin:0;font-size:13px;font-weight:600;overflow-wrap:anywhere}
.sd-info dd small{display:block;font-weight:400;font-size:11.5px;color:var(--text-3);text-align:right}
.sd-controls{display:grid;gap:12px}
.sd-field{display:grid;gap:6px;font-size:12.5px;font-weight:650;color:var(--text-2)}
.sd-field input,.sd-field select,.sd-field textarea,.sd-after select{width:100%;height:40px;padding:0 12px;border-radius:12px;border:1px solid var(--border-input);background:var(--surface-solid);color:var(--text-1);font:400 13.5px var(--font-sans);transition:border-color var(--dur-2),box-shadow var(--dur-2)}
.sd-field textarea{height:auto;padding:10px 12px;line-height:1.85;resize:vertical}
.sd-field :is(input,select,textarea):focus,.sd-after select:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(38,103,255,.12)}

/* narrow conversation: details become a drawer toggled from the header */
.sd-info-btn{display:none}
@container sdconv (max-width:820px){
 .sd-conv-body{grid-template-columns:1fr}
 .sd-info-btn{display:grid}
 .sd-info{position:absolute;z-index:3;top:72px;inset-inline-end:12px;width:min(290px,calc(100% - 24px));max-height:calc(100% - 90px);border:1px solid var(--border-soft);border-radius:18px;box-shadow:var(--shadow-lg);background:var(--surface-solid);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transition:opacity var(--dur-2),transform var(--dur-3) var(--ease-out),visibility 0s linear var(--dur-2)}
 .sd-conv.show-info .sd-info{opacity:1;visibility:visible;transform:none;transition:opacity var(--dur-2),transform var(--dur-3) var(--ease-out)}
 .sd-conv.show-info .sd-info-btn{background:var(--blue-50);color:var(--brand)}
}
/* composer */
.sd-compose{position:relative;border-top:1px solid var(--border-hair);padding:12px 16px 14px;background:var(--surface-glass-2);display:grid;gap:10px;transition:background-color var(--dur-3)}
.sd-compose.note{background:var(--warning-50)}
.sd-compose textarea{width:100%;min-height:76px;max-height:260px;padding:12px 14px;border-radius:16px;border:1px solid var(--border-input);background:var(--surface-solid);color:var(--text-1);font:400 13.5px/1.85 var(--font-sans);resize:none;transition:border-color var(--dur-2),box-shadow var(--dur-2)}
.sd-compose textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(38,103,255,.12)}
.sd-compose.note textarea{border-style:dashed;border-color:var(--warning-500)}
.sd-compose.note textarea:focus{box-shadow:0 0 0 3px rgba(242,162,12,.18)}
.sd-compose-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sd-compose-actions{display:flex;align-items:center;gap:10px;margin-inline-start:auto}
.sd-quick{display:flex;gap:6px;flex-wrap:wrap}
.sd-hint{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-3)}
.sd-after{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--text-3)}
.sd-after select{width:auto;height:36px}
.sd-mode{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:var(--ink-100);width:max-content}
.sd-mode button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:var(--text-2);font:600 12px var(--font-sans);cursor:pointer;transition:all var(--dur-2)}
.sd-mode button svg.i{width:14px;height:14px}
.sd-mode button[aria-checked=true]{background:var(--surface-solid);color:var(--brand);box-shadow:var(--shadow-xs)}
.sd-compose.note .sd-mode button[aria-checked=true]{color:var(--warning-700)}
.sd-compose.locked{display:flex;align-items:center;gap:10px;color:var(--text-2);font-size:13px}
.sd-compose.locked .sd-btn{margin-inline-start:auto}

/* toast */
.sd-toast{position:fixed;z-index:1000;inset-inline-start:50%;bottom:28px;transform:translateX(50%);display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;background:var(--ink-900);color:#fff;font:600 13px var(--font-sans);box-shadow:var(--shadow-xl);animation:sd-toast .3s var(--ease-spring) both}
[dir=ltr] .sd-toast{transform:translateX(-50%)}
.sd-toast svg.i{width:17px;height:17px;color:var(--success-500)}
.sd-toast.bad svg.i{color:var(--berry-400)}

/* new-ticket modal */
.sd-modal-bg{position:fixed;inset:0;z-index:900;display:grid;place-items:center;padding:20px;background:var(--overlay);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity var(--dur-3)}
.sd-modal-bg.in{opacity:1}
.sd-modal{direction:rtl;width:min(760px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;border-radius:26px;border:1px solid var(--border-soft);background:var(--surface-solid);color:var(--text-1);font-family:var(--font-sans);box-shadow:var(--shadow-xl);transform:translateY(14px) scale(.98);transition:transform var(--dur-4) var(--ease-spring)}
.sd-modal-bg.in .sd-modal{transform:none}
.sd-modal>header{display:flex;align-items:center;gap:14px;padding:22px 24px 16px;border-bottom:1px solid var(--border-hair)}
.sd-modal>header h2{font-size:19px;font-weight:850;margin:0}
.sd-modal>header p{font-size:12.5px;color:var(--text-3);margin:2px 0 0}
.sd-modal>header .sd-icon-btn{margin-inline-start:auto}
.sd-modal-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:var(--brand-grad);color:#fff;box-shadow:var(--shadow-brand)}
.sd-modal-ico svg.i{width:22px;height:22px}
.sd-modal-body{overflow-y:auto;padding:18px 24px;display:grid;gap:16px}
.sd-modal fieldset{border:0;margin:0;padding:0;display:grid;gap:8px}
.sd-modal legend{font-size:12.5px;font-weight:650;color:var(--text-2);margin-bottom:8px;padding:0}
.sd-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.sd-products button,.sd-seg button{display:grid;gap:2px;justify-items:start;text-align:right;padding:10px 12px;border-radius:14px;border:1px solid var(--border-input);background:var(--surface-solid);color:var(--text-1);font:inherit;cursor:pointer;transition:border-color var(--dur-2),background-color var(--dur-2),box-shadow var(--dur-2),transform var(--dur-1)}
.sd-products button{grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
.sd-products button span{grid-row:1/3;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--ink-100);color:var(--text-2);transition:all var(--dur-2)}
.sd-products b,.sd-seg b{font-size:12.5px;font-weight:700}
.sd-products small,.sd-seg small{font-size:10.5px;color:var(--text-3);line-height:1.5}
.sd-products button:hover,.sd-seg button:hover{border-color:var(--border-strong)}
.sd-products button:active,.sd-seg button:active{transform:scale(.98)}
.sd-products button[aria-pressed=true],.sd-seg button[aria-pressed=true]{border-color:var(--brand);background:var(--blue-50);box-shadow:0 0 0 3px rgba(38,103,255,.12)}
.sd-products button[aria-pressed=true] span{background:var(--brand);color:#fff}
.sd-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sd-count{justify-self:end;font-size:11px;font-weight:400;color:var(--text-3)}
.sd-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--info-50);color:var(--info-700);font-size:12px;line-height:1.8}
.sd-note svg.i{margin-top:3px}
.sd-err{margin:0 24px;padding:10px 12px;border-radius:12px;background:var(--danger-50);color:var(--danger-700);font-size:12.5px}
.sd-modal>footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 24px 20px;border-top:1px solid var(--border-hair)}

/* motion */
@keyframes sd-in{from{opacity:0;transform:translateY(8px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes sd-pop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes sd-drift{50%{transform:translate(24px,18px)}}
@keyframes sd-bob{50%{transform:translateY(-5px)}}
@keyframes sd-spin{to{transform:rotate(360deg)}}
@keyframes sd-toast{from{opacity:0;transform:translateX(50%) translateY(12px) scale(.96)}}
.sd-list .sd-row:nth-child(2){animation-delay:30ms}.sd-list .sd-row:nth-child(3){animation-delay:60ms}.sd-list .sd-row:nth-child(4){animation-delay:90ms}.sd-list .sd-row:nth-child(5){animation-delay:120ms}

/* responsive */
@media(max-width:900px){
 .sd-desk{grid-template-columns:1fr;height:auto;max-height:none;min-height:0}
 .sd.has-active .sd-inbox{display:none}
 .sd:not(.has-active) .sd-pane.sd-welcome{display:none}
 .sd-conv{height:calc(100vh - 140px);min-height:560px}
 .sd-back{display:grid}
 .sd.has-active .sd-hero{display:none}
 .sd-inbox{height:auto;max-height:none}
 .sd-list{max-height:none}
}
@media(max-width:640px){
 .sd-hero{padding:20px;border-radius:22px}
 .sd-hero-side{width:100%}
 .sd-stats{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}
 .sd.staff .sd-stats{grid-template-columns:repeat(2,1fr)}
 .sd-stat{min-width:0}
 .sd-hero-side .sd-btn{width:100%}
 .sd-thread{padding:14px 12px}
 .sd-msg{max-width:94%}
 .sd-info{grid-template-columns:1fr}
 .sd-tips{grid-template-columns:1fr}
 .sd-seg{grid-template-columns:1fr}
 .sd-modal-body,.sd-modal>header,.sd-modal>footer{padding-inline:16px}
 .sd-compose-actions{width:100%}.sd-compose-actions .sd-btn{flex:1}
}
@media(prefers-reduced-motion:reduce){.sd *,.sd *::before,.sd *::after,.sd-modal,.sd-modal-bg{animation:none!important;transition-duration:.01ms!important}}