:root {
      --bg:#0A0B0D; --surface:rgba(255,255,255,.05); --surface-strong:rgba(255,255,255,.09);
      --border:rgba(255,255,255,.10); --text:#F5F5F7; --muted:#8A8F98; --shadow:0 8px 32px rgba(0,0,0,.30);
      --green:#34C759; --orange:#FF9500; --red:#FF3B30; --gray:#8E8E93; --scale:1;
    }
    [data-theme="light"] {
      --bg:#F5F5F7; --surface:rgba(0,0,0,.035); --surface-strong:rgba(0,0,0,.07);
      --border:rgba(0,0,0,.09); --text:#1D1D1F; --muted:#6E6E73; --shadow:0 8px 32px rgba(20,20,30,.12);
    }
    * { box-sizing:border-box; }
    html { font-size:calc(16px * var(--scale)); overflow-y:scroll; scrollbar-gutter:stable; }
    body { margin:0; background:var(--bg); color:var(--text); font-family:Inter, ui-sans-serif, system-ui, sans-serif; min-height:100%; transition:background .35s,color .35s; }
    button,input,select,textarea { font:inherit; }
    button { cursor:pointer; }
    button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--text); outline-offset:3px; }
    .app-bg { width:100%; min-height:calc(100 * min(var(--vh, 1vh), 1vh)); background:var(--bg); }
    [data-theme="light"] .app-bg { background:var(--bg); }
    .glass { background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); }
    .glass-soft { background:var(--surface); border:1px solid var(--border); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
    .skip { position:absolute; left:1rem; top:-4rem; z-index:100; padding:.6rem 1rem; border-radius:1rem; background:var(--text); color:var(--bg); transition:top .2s; }
    .skip:focus { top:1rem; }
    .brand { display:flex; align-items:center; gap:.55rem; font-weight:800; letter-spacing:-.055em; }
    .brand-mark { width:30px;height:30px;display:grid;place-items:center;background:transparent;box-shadow:none;color:currentColor; }
    .brand-mark svg { width:17px;height:17px; }
    .auth-view { min-height:calc(100 * min(var(--vh, 1vh), 1vh)); display:grid; place-items:center; padding:1.5rem; }
    .auth-card { width:min(100%,420px); padding:2rem; border-radius:28px; animation:rise .7s cubic-bezier(.2,.8,.2,1); }
    .auth-card.leaving { animation:leave .45s forwards ease-in; }
    .auth-card .brand { justify-content:center; }
    .auth-heading { font-size:1.75rem;font-weight:800;letter-spacing:-.06em;margin:1.7rem 0 .35rem; }
    .muted { color:var(--muted); }
    .field { width:100%; border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:15px; padding:.85rem 1rem; }
    .field::placeholder { color:var(--muted); }
    .icon-button { border:0;background:transparent;color:var(--muted); padding:.5rem;border-radius:50%;display:grid;place-items:center; }
    .icon-button:hover { background:var(--surface-strong); color:var(--text); }
    .primary { border:0;border-radius:999px;background:#F5F5F7;color:#111;padding:.85rem 1.1rem;font-weight:750;transition:transform .2s,box-shadow .2s; }
    .primary:hover { transform:translateY(-1px); box-shadow:0 8px 22px rgba(255,255,255,.15); }
    .ghost { border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);padding:.75rem 1rem;font-weight:650; }
    .divider { display:flex;align-items:center;gap:.7rem;color:var(--muted);font-size:.75rem;margin:1.15rem 0; }
    .divider:before,.divider:after { content:"";height:1px;flex:1;background:var(--border); }
    .validation { min-height:1.2rem;color:#ff796f;font-size:.76rem;margin-top:.5rem; }
    .dashboard { display:none; width:100%; padding-bottom:7.5rem; }
    .dashboard.visible { display:block; animation:dashboardIn .55s ease both; }
    .shell { width:100%; max-width:1180px; margin:0 auto; padding:0 1rem; }
    .topbar { padding:.8rem 0; }
    .topbar-inner { min-height:58px;border-radius:22px;padding:.7rem .8rem;display:flex;align-items:center;gap:.8rem; }
    .search { flex:1;display:flex;align-items:center;gap:.45rem;background:var(--surface);border:1px solid var(--border);padding:.55rem .75rem;border-radius:999px;min-width:0; }
    .search input { width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:.86rem; }
    .avatar { flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,#dadde4,#5c6169);color:#101114;font-size:.74rem;font-weight:800; }
    .profile-wrap { position:relative; }
    .profile-menu,.more-menu { position:absolute;right:0;top:calc(100% + .55rem);width:165px;padding:.45rem;border-radius:16px;z-index:40;display:none;background:var(--bg);border:1px solid var(--border);box-shadow:0 12px 36px rgba(0,0,0,.45); }
    .profile-menu.open,.more-menu.open { display:block;animation:pop .16s ease; }
    .menu-row { width:100%;background:transparent;border:0;text-align:left;border-radius:10px;padding:.6rem .7rem;color:var(--text);font-size:.82rem; }
    .menu-row:hover { background:var(--surface-strong); }
    .connected { color:var(--green);font-weight:700;display:flex;gap:.35rem;align-items:center; }
    .counter-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;margin-bottom:1rem; }
    .counter { text-align:left;padding:.85rem;border-radius:20px;transition:.2s; }
    .counter:hover,.counter.active { transform:translateY(-2px);background:#161719;border-color:rgba(255,255,255,.28); }
    .counter strong { display:block;font-size:1.25rem;letter-spacing:-.05em; }
    .counter span { color:var(--muted);font-size:.72rem; }
    .section-title { font-size:1.1rem;font-weight:750;letter-spacing:-.03em; }
    .client-list { display:grid;gap:.7rem;margin-top:.75rem; }
    .client-card { position:relative;overflow:hidden;width:100%;text-align:left;border-radius:24px;padding:1.15rem;transition:transform .2s,border-color .2s,background .2s; }
    .client-card:hover { transform:translateY(-2px);background:var(--surface-strong);border-color:rgba(255,255,255,.25); }
    .client-card::before { content:"";position:absolute;left:0;top:22%;bottom:22%;width:3px;border-radius:0 3px 3px 0;background:var(--green);box-shadow:0 0 12px rgba(52,199,89,.45); }
    .client-card[data-auto-route="false"]::before { background:rgba(142,142,147,.5);box-shadow:none; }
    .client-card:not([data-auto-route])::before,.client-card[data-auto-route="undefined"]::before { display:none; }
    .client-head { display:flex;gap:.9rem;align-items:start; }
    .client-main { min-width:0; flex:1; }
    .name-row { display:flex;align-items:center;gap:.35rem; }
    .name { font-size:.93rem;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .timestamp,.mono { color:var(--muted);font-family:"SFMono-Regular",Consolas,monospace;font-size:.67rem;white-space:nowrap; }
    .badge { border-radius:12px;padding:.2rem .45rem;font-size:.62rem;font-weight:800;display:inline-flex;align-items:center;gap:.2rem; }
    .badge.new { background:rgba(255,149,0,.16);color:var(--orange); }.badge.responded { background:rgba(52,199,89,.16);color:var(--green); }.badge.booked { background:rgba(245,245,247,.15);color:var(--text); }.badge.closed { background:rgba(142,142,147,.18);color:#b9bac0; }
    .preview { font-size:.78rem;color:var(--muted);line-height:1.45;margin:.5rem 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
    .meta { display:flex;gap:.65rem;align-items:center;color:var(--muted);font-size:.68rem; }
    .quick { display:flex;gap:.5rem;flex-wrap:wrap;margin-left:45px;margin-top:.75rem; }
    .quick button { background:transparent;color:var(--muted);border:1px solid var(--border);padding:.35rem .55rem;border-radius:999px;font-size:.67rem; }
    .quick button:hover { color:var(--text); background:var(--surface-strong); }
    .bottom-nav { padding:.38rem;border-radius:999px;display:flex;gap:.25rem; }
    .nav-item { min-width:48px;height:44px;border:0;border-radius:999px;color:var(--muted);background:transparent;display:flex;align-items:center;justify-content:center;gap:.35rem;padding:0 .72rem;transition:.25s;position:relative; }
    .nav-item.active { color:var(--text);background:#161719;box-shadow:none; }
    .nav-count { position:absolute;right:3px;top:1px;background:var(--orange);color:#1d1300;border-radius:99px;min-width:16px;height:16px;font-size:.6rem;font-weight:800;display:grid;place-items:center; }
    .view { display:none; }.view.active { display:block;animation:fade .25s ease; }
    .empty { border-radius:24px;padding:2.5rem 1.3rem;text-align:center;margin-top:.8rem; }.empty svg { color:var(--muted);margin:auto; }.empty p { color:var(--muted);font-size:.86rem; }
    .skeleton { height:134px;border-radius:22px;background:linear-gradient(90deg,var(--surface) 25%,var(--surface-strong) 50%,var(--surface) 75%);background-size:200% 100%;animation:shimmer 1.25s infinite; }
    .settings-group { border-radius:22px;overflow:hidden;margin:.8rem 0 1.2rem; }.setting-row { display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1rem;border-bottom:1px solid var(--border);font-size:.86rem; }.setting-row:last-child { border:0; }.setting-row small { display:block;color:var(--muted);margin-top:.1rem; }
    .toggle { width:42px;height:25px;border-radius:99px;border:0;background:rgba(142,142,147,.45);padding:3px;transition:.2s; }.toggle span { width:19px;height:19px;border-radius:50%;background:#fff;display:block;transition:.2s; }.toggle.on { background:var(--green); }.toggle.on span { transform:translateX(17px); }
    .segment { display:flex;padding:3px;border-radius:12px;background:var(--surface-strong); }.segment button { border:0;border-radius:9px;background:transparent;color:var(--muted);padding:.34rem .55rem;font-size:.68rem; }.segment button.active { background:var(--text);color:var(--bg);font-weight:750; }
    .overlay { position:fixed;inset:0;background:rgba(0,0,0,.48);z-index:60;display:none;align-items:flex-end;justify-content:center;padding:1rem; }.overlay.open { display:flex;animation:fade .2s; }
    .modal { width:min(100%,440px);border-radius:26px;padding:1.25rem;animation:pop .22s ease;background:var(--bg);border:1px solid var(--border);box-shadow:0 16px 48px rgba(0,0,0,.5); }
    .modal h2 { font-size:1.15rem;font-weight:800;letter-spacing:-.04em;margin:0; }.modal p { color:var(--muted);font-size:.84rem; }.modal-actions { display:flex;gap:.6rem;justify-content:flex-end;margin-top:1rem; }
    .detail { position:fixed;z-index:50;inset:0 0 0 auto;width:min(100%,570px);background:var(--bg);transform:translateX(105%);transition:transform .35s cubic-bezier(.2,.8,.2,1);box-shadow:-20px 0 50px rgba(0,0,0,.25);display:flex;flex-direction:column;padding:0;overflow:hidden; }.detail.open { transform:translateX(0); }.detail-top { display:flex;align-items:center;justify-content:space-between;padding:1rem 1rem 0;margin-bottom:.85rem; }.detail-card { border-radius:24px;padding:1rem; }.detail-client { display:flex;gap:.85rem;align-items:center; }.avatar.large { width:64px;height:64px;font-size:1.05rem; }.thread { margin:1rem 0;display:grid;gap:.75rem; }.thread-time { text-align:center;color:var(--muted);font-size:.65rem;font-family:monospace;margin:.75rem 0; }.bubble { max-width:78%;padding:.75rem .95rem;border-radius:17px;font-size:.86rem;line-height:1.5; }.incoming { justify-self:start;background:var(--surface);border:1px solid var(--border);border-radius:17px 17px 17px 5px; }.outgoing { justify-self:end;background:var(--text);color:var(--bg);border-radius:17px 17px 5px 17px; }.attachment { width:min(100%,300px);border-radius:15px;padding:.8rem;display:flex;gap:.55rem;align-items:center; }.attachment button { margin-left:auto;border:0;background:transparent;color:var(--text);opacity:.8; }.attachment button:hover { opacity:1; }
    .file-history summary { cursor:pointer;font-weight:700;font-size:.86rem; }.file-row { display:flex;align-items:center;gap:.6rem;padding:.65rem 0;border-bottom:1px solid var(--border);font-size:.78rem; }.file-row button { margin-left:auto;border:0;background:transparent;color:var(--text);font-size:.72rem; }
    #detail-content { display:flex;flex-direction:column;flex:1;min-height:0; }.detail-scroll { flex:1;overflow-y:auto;padding:1rem 1rem 0;min-height:0; }
    .menu-sep { height:1px;background:var(--border);margin:.3rem .4rem; }
    .menu-row.menu-danger { color:color-mix(in srgb,var(--red) 70%,var(--text)); }
    .menu-row.menu-reopen { color:color-mix(in srgb,var(--green) 70%,var(--text)); }
    .reply-bar { padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(16px);border-top:1px solid var(--border);display:flex;flex-direction:column;gap:.5rem; }
    .reply-actions { display:flex;gap:.4rem; }
    .reply-actions button { background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.35rem .6rem;color:var(--text);display:flex;align-items:center;justify-content:center;min-width:34px;height:34px; }
    .reply-input { display:flex;align-items:flex-end;gap:.4rem;background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:.35rem .4rem .35rem 1rem; }
    .reply-input textarea { flex:1;border:0;background:transparent;color:var(--text);resize:none;outline:none;max-height:120px;min-height:22px;padding:.35rem 0;font:inherit;font-size:.88rem;line-height:1.4; }
    .reply-input textarea::placeholder { color:var(--muted); }
    .reply-input button { background:transparent;border:0;color:var(--muted);padding:.35rem;border-radius:50%;display:grid;place-items:center;min-width:32px;height:32px; }
    .reply-input .reply-send { background:var(--text);color:var(--bg); }
    .reply-input .reply-send:hover { opacity:.85; }
    .toast-stack { position:fixed;z-index:100;right:1rem;bottom:5.7rem;display:grid;gap:.5rem;width:min(330px,calc(100% - 2rem)); }.toast { border-radius:16px;padding:.75rem .85rem;color:var(--text);font-size:.78rem;display:flex;gap:.5rem;align-items:center;animation:toast .3s ease; }.toast button { margin-left:auto;border:0;background:transparent;color:var(--text);font-size:.7rem;text-decoration:underline; }
    @keyframes rise { from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none} } @keyframes leave { to{opacity:0;transform:translateY(-42px)} } @keyframes dashboardIn { from{opacity:0}to{opacity:1} } @keyframes fade { from{opacity:0}to{opacity:1} } @keyframes pop { from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)} } @keyframes toast { from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none} } @keyframes shimmer { to{background-position:-200% 0} }
    .rail-wrap { position:fixed;left:50%;transform:translateX(-50%);bottom:1rem;width:fit-content;z-index:30; }
    .nav-page-label { position:absolute; top:-1.4rem; left:50%; transform:translateX(-50%); white-space:nowrap; pointer-events:none; display:none; color:var(--muted); font-size:.7rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; text-align:center; }
@media (min-width:720px) { .shell { padding:0 1.5rem; }.dashboard { padding-bottom:2rem; }.rail-wrap { top:50%;bottom:auto;left:max(1.2rem,calc(50% - 590px - 53px));transform:translateY(-50%); }.nav-page-label { display:block; }.bottom-nav { flex-direction:column;border-radius:24px; }.nav-item { height:48px; }.nav-count { right:-2px;top:-1px; }.toast-stack { bottom:1.2rem; }.counter-grid { max-width:500px; }.detail { padding-top:1.5rem; }.overlay { align-items:center; } main.shell { padding-left:calc(72px + 2rem); } .topbar .shell { padding-left:calc(72px + 2rem); } }
    /* Contrast overrides: dark surfaces keep light text/icons in light mode */
    .nav-item.active { color:#F5F5F7; }
    .counter.active,.counter:hover { color:#F5F5F7; }
    .counter.active span,.counter:hover span { color:rgba(245,245,247,.7); }
    .pagination { display:flex; justify-content:center; align-items:center; gap:.35rem; margin:1rem 0 .5rem; flex-wrap:wrap; }
    .pagination button { min-width:36px; height:36px; padding:0 .6rem; border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:10px; font-size:.78rem; font-weight:650; cursor:pointer; transition:background .15s; }
    .pagination button:hover { background:var(--surface-strong); }
    .pagination button.active { background:var(--text); color:var(--bg); border-color:var(--text); }
    .pagination .ellipsis { color:var(--muted); padding:0 .25rem; user-select:none; font-size:.78rem; }