:root,[data-theme=light]{--bg:#f5f5f5;--surface:#fff;--surface-2:#f0f0f0;--hover:#f0f0ff;--active:#e8ebfa;--text:#242424;--muted:#616161;--border:#e0e0e0;--brand:#5b5fc7;--brand-text:#fff;--brand-soft:#e8ebfa;--danger:#c4314b;--warn-bg:#fff4ce;--star:#e3a400;--shadow:0 2px 8px #00000014}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#1f1f1f;--surface:#292929;--surface-2:#333;--hover:#34344a;--active:#3d3e66;--text:#fff;--muted:#adadad;--border:#3d3d3d;--brand:#7f85f5;--brand-text:#1f1f1f;--brand-soft:#3d3e66;--warn-bg:#463100;--shadow:0 2px 8px #0006}}[data-theme=dark]{--bg:#1f1f1f;--surface:#292929;--surface-2:#333;--hover:#34344a;--active:#3d3e66;--text:#fff;--muted:#adadad;--border:#3d3d3d;--brand:#7f85f5;--brand-text:#1f1f1f;--brand-soft:#3d3e66;--warn-bg:#463100;--shadow:0 2px 8px #0006}[data-theme=contrast]{--bg:#000;--surface:#000;--surface-2:#000;--hover:#1aebff;--active:#ffff01;--text:#fff;--muted:#fff;--border:#fff;--brand:#ffff01;--brand-text:#000;--brand-soft:#000;--warn-bg:#000;--shadow:none}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:14px/1.45 Segoe UI,Segoe UI Web,Tahoma,Noto Sans Arabic,system-ui,sans-serif}button,input,select,textarea{font:inherit;color:inherit}.app{flex-direction:column;height:100%;display:flex}.top{background:var(--surface);border-bottom:1px solid var(--border);flex-direction:column;gap:8px;padding:12px 16px 8px;display:flex}.searchbox{background:var(--surface-2);border:1px solid var(--border);border-bottom:2px solid var(--brand);color:var(--muted);border-radius:6px;align-items:center;gap:8px;padding:0 10px;display:flex}.searchbox input{min-width:0;color:var(--text);background:0 0;border:0;outline:0;flex:1;padding:10px 0;font-size:16px}.toolbar{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.toolbar select{background:var(--surface);border:1px solid var(--border);border-radius:4px;max-width:180px;padding:4px 6px}.spacer{flex:1}.status{color:var(--muted);align-items:center;gap:4px;font-size:12px;display:inline-flex}.btn,.chip-btn{border:1px solid var(--border);background:var(--surface);cursor:pointer;white-space:nowrap;border-radius:4px;align-items:center;gap:6px;padding:5px 10px;display:inline-flex}.btn:hover,.chip-btn:hover{background:var(--hover)}.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-text)}.btn.on,.chip-btn.on{background:var(--brand-soft);border-color:var(--brand)}.chip-btn{border-radius:999px;padding:3px 10px;font-size:12px}.icon-btn{width:30px;height:30px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:4px;place-items:center;display:inline-grid}.icon-btn:hover{background:var(--hover);color:var(--brand)}.icon-btn.small{width:24px;height:24px}.icon-btn.star.on{color:var(--star)}.icon-btn:disabled{opacity:.4;cursor:default}.icon-btn.spin svg{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.link{color:var(--brand);cursor:pointer;background:0 0;border:0;padding:2px 4px}.link.danger{color:var(--danger)}.banner{background:var(--brand-soft);flex-wrap:wrap;align-items:center;gap:12px;padding:8px 16px;font-size:13px;display:flex}.banner.warn{background:var(--warn-bg)}.banner code{text-overflow:ellipsis;white-space:nowrap;max-width:60ch;font-size:11px;overflow:hidden}main{flex:1;grid-template-columns:1fr;min-height:0;display:grid}main.with-panel{grid-template-columns:minmax(0,1fr) minmax(320px,400px)}.list{padding:8px 12px 24px;overflow-y:auto}.count{color:var(--muted);padding:4px 8px;font-size:12px}.empty{text-align:center;color:var(--muted);padding:48px 16px}.empty strong{color:var(--text);margin-bottom:4px;font-size:16px;display:block}.hint{color:var(--muted);text-align:center;padding:16px 8px 0;font-size:11px}.muted{color:var(--muted)}.small{font-size:12px}.pad{padding:8px}.row{cursor:pointer;background:var(--surface);border:1px solid #0000;border-radius:6px;align-items:center;gap:10px;margin-bottom:2px;padding:6px 8px;display:flex}.row:hover{background:var(--hover)}.row.active{background:var(--active);border-color:var(--brand)}.row.selected{background:var(--brand-soft)}.check{border:1.5px solid var(--muted);cursor:pointer;opacity:.35;background:0 0;border-radius:4px;flex:none;place-items:center;width:18px;height:18px;padding:0;display:grid}.row:hover .check,.check.on{opacity:1}.check.on{background:var(--brand);border-color:var(--brand);color:var(--brand-text)}.who{flex:1;min-width:0}.name{white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:6px;font-weight:600;display:flex;overflow:hidden}.sub{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.nick{background:var(--brand-soft);color:var(--brand);border-radius:999px;padding:0 8px;font-size:11px;font-weight:400}.badge{border:1px solid var(--border);color:var(--muted);border-radius:4px;padding:0 4px;font-size:10px;font-weight:400}.quick{gap:2px;display:flex}.quick .icon-btn:not(.star.on){display:none}.row:hover .quick .icon-btn,.row.active .quick .icon-btn{display:inline-grid}.avatar{flex:none;display:inline-block;position:relative}.avatar img,.avatar .initials{object-fit:cover;border-radius:50%;width:100%;height:100%}.avatar .initials{color:#fff;place-items:center;font-weight:600;display:grid}.presence{inset-inline-end:-1px;border:2px solid var(--surface);background:#8a8886;border-radius:50%;width:30%;min-width:10px;height:30%;min-height:10px;position:absolute;bottom:-1px}.presence.available{background:#6bb700}.presence.busy,.presence.dnd{background:#c50f1f}.presence.away{background:#fa4}.home h3,.panel h3{color:var(--muted);align-items:center;gap:6px;margin:16px 8px 6px;font-size:13px;display:flex}.groups{flex-direction:column;gap:6px;display:flex}.group{background:var(--surface);border-inline-start:4px solid var(--brand);border-radius:6px}.group-head{cursor:pointer;align-items:center;gap:8px;padding:6px 10px;display:flex}.group-tools{align-items:center;display:flex}.group-body{padding:0 10px 10px}.member{align-items:center;gap:8px;padding:2px 0;display:flex}.new-group,.pop-new{gap:6px;display:flex}.new-group input,.pop-new input,.note-form input,.note-form textarea,.group-head input{border:1px solid var(--border);background:var(--surface);border-radius:4px;flex:1;min-width:0;padding:5px 8px}.panel{background:var(--surface);border-inline-start:1px solid var(--border);padding:16px;position:relative;overflow-y:auto}.panel-close{top:8px;position:absolute;inset-inline-end:8px}.panel-head{text-align:center;flex-direction:column;align-items:center;gap:2px;display:flex}.panel-head h2{margin:8px 0 0;font-size:18px}.actions{flex-wrap:wrap;justify-content:center;gap:6px;margin:14px 0 4px;display:flex}.kv{align-items:center;gap:8px;padding:3px 8px;display:flex}.kv .k{color:var(--muted);flex:none;width:80px;font-size:12px}.kv .v{overflow-wrap:anywhere;flex:1;min-width:0}.chips{flex-wrap:wrap;align-items:center;gap:6px;padding:0 8px;display:flex}.chip{border:1px solid var(--border);border-radius:999px;align-items:center;gap:6px;padding:2px 4px 2px 10px;font-size:12px;display:inline-flex}.chip-x{cursor:pointer;color:var(--muted);background:0 0;border:0}.dot{border-radius:50%;width:8px;height:8px;display:inline-block}.link-row{cursor:pointer;text-align:start;background:0 0;border:0;border-radius:4px;align-items:center;gap:8px;width:100%;padding:4px 8px;display:flex}.link-row:hover{background:var(--hover)}.note-form{flex-direction:column;gap:6px;padding:0 8px;display:flex}.note-form .btn{align-self:flex-start}.picker{position:relative}.popover{bottom:calc(100% + 4px);z-index:10;background:var(--surface);border:1px solid var(--border);min-width:220px;box-shadow:var(--shadow);border-radius:6px;flex-direction:column;gap:2px;padding:6px;display:flex;position:absolute;inset-inline-start:0}.panel .popover{top:calc(100% + 4px);bottom:auto}.pop-item{cursor:pointer;text-align:start;background:0 0;border:0;border-radius:4px;align-items:center;gap:6px;padding:6px 8px;display:flex}.pop-item:hover{background:var(--hover)}.selbar{background:var(--surface);border-top:2px solid var(--brand);box-shadow:var(--shadow);flex-wrap:wrap;align-items:center;gap:6px;padding:8px 16px;display:flex}@media (width<=760px){main.with-panel{grid-template-columns:1fr}.panel{z-index:20;border:0;position:fixed;inset:0}.hint{display:none}}.app.dialog .toolbar,.app.dialog .hint,.app.dialog .banner:not(.warn){display:none}.app.dialog .top{border-bottom:0;padding-bottom:12px}.app.dialog .searchbox input{padding:12px 0;font-size:18px}.shortcut-setup{margin-top:4px}