@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400,0,0');

:root {
  color-scheme: light;
  --bg:#f4f6f8;--surface:#fff;--surface-raised:#fff;--surface-subtle:#f7f8fa;--surface-hover:#f0f3f6;
  --text:#17202a;--text-soft:#465363;--muted:#748091;--line:#e3e8ee;--line-strong:#d4dbe4;
  --brand:#173f5f;--brand-hover:#10344f;--brand-soft:#eaf1f6;--on-brand:#fff;--accent:#167d7f;--accent-soft:#e5f4f2;--on-accent:#fff;
  --success:#17735a;--success-soft:#e7f4ee;--on-success:#fff;--danger:#b33a4b;--danger-soft:#f9e9ec;--warning:#9b6218;--warning-soft:#fbf1df;
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);--shadow-sm:0 3px 12px rgba(26,39,55,.07);--shadow-lg:0 22px 70px rgba(16,24,40,.18);
  --radius:14px;--sidebar:264px;
}
[data-theme="dark"] {
  color-scheme:dark;--bg:#0e1319;--surface:#151c24;--surface-raised:#19222c;--surface-subtle:#1c2631;--surface-hover:#232f3b;
  --text:#f1f4f7;--text-soft:#c2cad4;--muted:#8f9baa;--line:#293542;--line-strong:#394754;
  --brand:#8fb9d4;--brand-hover:#acd0e5;--brand-soft:#1c3444;--on-brand:#0b1a24;--accent:#71c7c1;--accent-soft:#153a3a;--on-accent:#09201f;
  --success:#75c7a8;--success-soft:#15382d;--on-success:#0b211a;--danger:#f08a98;--danger-soft:#46252d;--warning:#e9bd72;--warning-soft:#3f321d;
  --shadow-xs:0 1px 2px rgba(0,0,0,.2);--shadow-sm:0 4px 16px rgba(0,0,0,.18);--shadow-lg:0 24px 80px rgba(0,0,0,.45);
}
[data-theme="dark"] .card .badge.open{background:#642b37;color:#fff!important;border-color:#9d4d5c}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font:15px/1.5 "DM Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button{cursor:pointer}.material-symbols-rounded{font-family:"Material Symbols Rounded";font-weight:normal;font-style:normal;font-size:21px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:"liga"}
.boot{min-height:100vh;display:grid;place-content:center;text-align:center;color:var(--muted)}.spinner{width:34px;height:34px;margin:auto;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}

/* Login */
/* Login and verification code: after Driver Hub's login. A navy hero with slow rings and the shield disc; the form sits on a sheet (a side panel on wide screens). */
.login-page{--login-night:#0a1830;--login-accent:#4a86ff;min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(380px,1fr) minmax(430px,.75fr);background:var(--login-night)}
.login-brand{position:relative;overflow:hidden;isolation:isolate;padding:clamp(40px,6vw,88px);background:var(--login-night);color:#fff;display:flex;flex-direction:column}
.login-brand:before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at 95% 8%,rgba(74,134,255,.16),transparent 30%)}
/* Rings spreading slowly from the top-right corner; --ring moves them out by one spacing per loop, so it repeats seamlessly. */
@property --ring{syntax:"<length>";inherits:false;initial-value:0px}
.login-brand:after{content:"";position:absolute;z-index:-1;right:-45vmax;top:-45vmax;width:90vmax;height:90vmax;border-radius:50%;background:repeating-radial-gradient(circle,rgba(74,134,255,.2) var(--ring),rgba(74,134,255,.2) calc(var(--ring) + 1px),transparent calc(var(--ring) + 1px),transparent calc(var(--ring) + 11vmax));-webkit-mask:radial-gradient(circle,#000 5%,transparent 70%);mask:radial-gradient(circle,#000 5%,transparent 70%);animation:login-rings 6s linear infinite}
@keyframes login-rings{to{--ring:11vmax}}
.brand-logo{display:block;object-fit:contain;background:#ececec;border-radius:11px;box-shadow:var(--shadow-sm)}.side-brand-logo{width:88px;height:39px;border-radius:8px}
.login-logo{width:150px;height:66px;border-radius:12px;background:#fff;animation:login-tile-in .5s .02s cubic-bezier(.16,1,.3,1) both}
.login-brand h1{max-width:12ch;margin:clamp(28px,5vh,56px) 0 14px;font-size:clamp(44px,5.4vw,76px);font-weight:650;line-height:1;letter-spacing:-.045em}
.login-brand p{max-width:440px;margin:0;color:rgba(255,255,255,.6);font-size:17px;line-height:1.55}
.login-brand .trust{margin-top:28px;display:flex;gap:24px;color:rgba(255,255,255,.55);font-size:13px}.login-brand .trust span{display:flex;gap:8px;align-items:center}
.login-disc{flex:1;min-height:180px;display:grid;place-items:center;--disc:clamp(96px,14vw,150px)}
.login-disc span{display:grid;place-items:center;width:var(--disc);height:var(--disc);border-radius:50%;background:var(--login-accent);color:#fff;font-size:calc(var(--disc) * .44);box-shadow:0 0 0 calc(var(--disc) * .2) rgba(74,134,255,.14),0 0 0 calc(var(--disc) * .44) rgba(74,134,255,.07);animation:login-breathe 4.8s ease-in-out infinite}
@keyframes login-breathe{50%{box-shadow:0 0 0 calc(var(--disc) * .26) rgba(74,134,255,.18),0 0 0 calc(var(--disc) * .56) rgba(74,134,255,.08)}}
.login-brand h1,.login-brand p,.login-brand .trust,.login-disc{animation:login-rise .5s cubic-bezier(.16,1,.3,1) both}
.login-brand h1{animation-delay:.07s}.login-brand p{animation-delay:.14s}.login-brand .trust,.login-disc{animation-delay:.2s}
.login-panel{padding:40px;display:grid;place-items:center;background:var(--surface)}
.login-card{width:min(400px,100%);animation:login-rise .45s .1s cubic-bezier(.16,1,.3,1) both}
.login-card .login-kicker{color:var(--muted);font-size:14px;font-weight:600}
.login-card h2{margin:4px 0 8px;font-size:30px;letter-spacing:-.025em}
.login-card>p{color:var(--muted);margin:0 0 28px}
.login-card .field>label{font-size:13px;font-weight:600;color:var(--muted);margin-left:4px}
.login-page .login-input{position:relative}
.login-page .login-input>.material-symbols-rounded{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--muted);pointer-events:none;transition:color .15s}
.login-page .login-input .input{height:58px;min-height:58px;padding-left:50px;border:1.5px solid transparent;border-radius:18px;background:var(--surface-subtle);font-size:16px;box-shadow:none}
.login-page .login-input .input:focus{border-color:var(--brand);background:var(--surface);outline:none}
.login-page .login-input:focus-within>.material-symbols-rounded{color:var(--brand)}
.login-page .login-input.secret-field .btn-icon{top:9px;right:8px}
.login-page .otp-code{height:58px;border-radius:18px;font-size:22px;letter-spacing:.5em;text-align:center}
.login-page .login-submit{height:60px;margin-top:22px;border-radius:999px;justify-content:space-between;padding:0 8px 0 26px;font-size:16px}
.login-page .login-submit:after{content:"arrow_forward";font-family:"Material Symbols Rounded";font-size:22px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.18)}
.login-page .login-submit:disabled{opacity:.55}
.login-page #otp-back{margin-top:10px;border-radius:999px}
@keyframes login-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes login-tile-in{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes login-sheet-in{from{opacity:0;transform:translateY(80px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.login-logo,.login-brand h1,.login-brand p,.login-brand .trust,.login-disc,.login-disc span,.login-card,.login-panel,.login-brand:after{animation:none;opacity:1;transform:none}}
.otp-code{text-align:center;font-size:30px;font-weight:700;letter-spacing:.35em;font-variant-numeric:tabular-nums;padding-left:calc(13px + .35em)}
.secret-field{position:relative}.secret-field .input{padding-right:52px}.secret-field .btn-icon{position:absolute;right:2px;top:2px;min-height:40px;width:40px;height:40px;box-shadow:none}

/* App shell */
.app-shell{min-height:100vh;display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100vh;padding:22px 16px;background:#102d44;color:#fff;display:flex;flex-direction:column;z-index:30}.side-brand{display:flex;align-items:center;gap:10px;padding:0 6px 27px;font-size:15px;font-weight:700;letter-spacing:-.01em}.side-brand small{display:block;color:#90aabd;font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-top:1px}
.nav-section-label{padding:0 12px 8px;color:#7693a7;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.nav-list{display:grid;gap:4px}.nav-item{position:relative;border:0;color:#b8c9d6;background:transparent;border-radius:10px;padding:10px 12px;text-align:left;display:flex;align-items:center;gap:12px;font-weight:600;transition:.15s ease}.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}.nav-item.active{background:#fff;color:#173f5f}.nav-item.active:before{content:"";position:absolute;left:-16px;width:3px;height:24px;border-radius:0 3px 3px 0;background:#65c7bd}.nav-icon{width:22px;display:grid;place-items:center}.nav-label{flex:1}.side-user{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding:17px 8px 2px;display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;align-items:center}.user-avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#dce8ef;color:#173f5f;font-weight:800;text-transform:uppercase}.side-user strong,.side-user small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.side-user strong{font-size:13px}.side-user small{color:#8da8ba;font-size:11px;margin-top:1px}
.main{min-width:0}.topbar{position:sticky;top:0;z-index:20;min-height:74px;display:flex;gap:18px;align-items:center;justify-content:space-between;padding:12px clamp(20px,3vw,42px);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(15px)}.topbar h1{margin:0;font-size:23px;letter-spacing:-.025em}.topbar p{margin:1px 0 0;color:var(--muted);font-size:12px}.top-actions{display:flex;gap:7px;align-items:center}.top-user{display:flex;align-items:center;gap:9px;padding-right:8px;border-right:1px solid var(--line);margin-right:3px}.top-user div{line-height:1.2}.top-user strong{font-size:12px}.top-user small{display:block;color:var(--muted);font-size:10px}.content{padding:26px clamp(18px,3vw,42px) 100px;max-width:1550px;margin:auto}.content:has(.chat-layout){height:calc(100dvh - 74px);max-width:none;padding-bottom:26px;overflow:hidden}.page-intro{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:22px}.page-intro h2{margin:0;font-size:20px;letter-spacing:-.02em}.page-intro p{margin:4px 0 0;color:var(--muted);max-width:650px}.eyebrow{color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.page-note{display:flex;align-items:center;gap:8px;margin:-5px 0 18px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--surface-subtle);color:var(--muted);font-size:12px}.page-note .material-symbols-rounded{color:var(--accent);font-size:18px}

/* Controls */
.field{display:grid;gap:7px;margin-bottom:15px}.field label{font-size:12px;font-weight:700;color:var(--text-soft)}.field-help{color:var(--muted);font-size:11px;margin-top:-2px}.input,select,textarea{width:100%;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);padding:11px 13px;border-radius:9px;outline:0;transition:.15s}select{appearance:auto}.input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}textarea{min-height:108px;resize:none}.btn{min-height:40px;border:1px solid var(--line);border-radius:9px;padding:9px 14px;background:var(--surface);color:var(--text-soft);font-weight:650;display:inline-flex;gap:7px;align-items:center;justify-content:center;transition:.15s ease;box-shadow:var(--shadow-xs)}.btn:hover{background:var(--surface-hover);border-color:var(--line-strong)}.btn:focus-visible,.nav-item:focus-visible,.compact-row:focus-visible,.notification-row:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:2px}.btn:disabled{opacity:.48;cursor:not-allowed;box-shadow:none}.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}.btn-primary:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:var(--on-brand)}.btn-accent{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.btn-danger{background:var(--danger-soft);border-color:transparent;color:var(--danger)}.btn-success{background:var(--success);border-color:var(--success);color:var(--on-success)}.btn-ghost{background:transparent;border-color:transparent;box-shadow:none}.btn-icon{width:40px;height:40px;min-height:40px;padding:0;border-radius:9px}.btn-block{width:100%}.toolbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:18px}.toolbar .search{flex:1 1 260px}.toolbar-group{display:flex;gap:8px;align-items:center}.segmented{display:inline-flex;background:var(--surface-subtle);border:1px solid var(--line);padding:3px;border-radius:10px;overflow-x:auto}.segmented button{white-space:nowrap;border:0;background:transparent;color:var(--muted);padding:7px 11px;border-radius:7px;font-size:12px;font-weight:650}.segmented button.active{background:var(--surface);color:var(--brand);box-shadow:var(--shadow-xs)}

.ticket-action:hover{background:var(--success);border-color:var(--success);color:var(--on-success);box-shadow:0 7px 18px color-mix(in srgb,var(--success) 24%,transparent)}

/* Dashboard & cards */
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;margin-bottom:20px}.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;justify-content:space-between;gap:14px;align-items:center;box-shadow:var(--shadow-xs)}.stat-card .stat-label{color:var(--muted);font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.05em}.stat-card .stat-value{margin-top:2px;font-size:25px;font-weight:700;letter-spacing:-.04em}.stat-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:13px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:17px;box-shadow:var(--shadow-xs)}.card.clickable{cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}.card.clickable:hover{border-color:color-mix(in srgb,var(--brand) 35%,var(--line));box-shadow:var(--shadow-sm);transform:translateY(-1px)}.card-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.card-kicker{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:6px}.card h3{margin:0 0 5px;font-size:16px;line-height:1.35;letter-spacing:-.015em}.card p{color:var(--text-soft);margin:6px 0;line-height:1.48}.card-summary{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.meta{display:flex;flex-wrap:wrap;gap:7px 14px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:11px}.meta span{display:inline-flex;align-items:center;gap:4px}.badge{display:inline-flex;align-items:center;white-space:nowrap;border-radius:999px;padding:4px 8px;background:var(--surface-subtle);color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.045em;border:1px solid var(--line)}.badge.open,.badge.high,.badge.backlog{background:var(--danger-soft);color:var(--danger);border-color:transparent}.badge.resolved,.badge.completed{background:var(--success-soft);color:var(--success);border-color:transparent}.badge.in_progress,.badge.assigned{background:var(--brand-soft);color:var(--brand);border-color:transparent}.badge.normal{background:var(--warning-soft);color:var(--warning);border-color:transparent}.priority-indicator{width:8px;height:8px;border-radius:50%;background:var(--muted)}.priority-indicator.high{background:var(--danger)}.priority-indicator.normal{background:var(--warning)}.priority-indicator.low{background:var(--success)}.empty{grid-column:1/-1;text-align:center;padding:72px 20px;color:var(--muted);background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--radius)}.empty .symbol{width:46px;height:46px;margin:0 auto 12px;display:grid;place-items:center;border-radius:12px;background:var(--surface-subtle);color:var(--muted);font-size:25px}.pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px}.pagination span{font-size:12px;color:var(--muted)}

/* Modals / details / forms */
.modal-backdrop{position:fixed;inset:0;z-index:90;background:rgba(8,15,22,.58);display:grid;place-items:center;padding:20px;backdrop-filter:blur(3px)}.modal{width:min(720px,100%);max-height:min(900px,92vh);overflow:auto;background:var(--surface-raised);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg)}.modal.wide{width:min(1060px,100%)}.modal-head{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 20px;background:var(--surface-raised);border-bottom:1px solid var(--line)}.modal-head h2{margin:0;font-size:19px;letter-spacing:-.02em}.modal-body{padding:21px}.modal-actions{position:sticky;bottom:0;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding:14px 20px;border-top:1px solid var(--line);background:var(--surface-raised)}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.detail{background:var(--surface-subtle);border:1px solid var(--line);border-radius:10px;padding:11px 12px}.detail label{display:block;color:var(--muted);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.detail div{margin-top:4px;white-space:pre-wrap;word-break:break-word;color:var(--text-soft)}.section-title{display:flex;align-items:center;gap:8px;margin:24px 0 10px;font-size:10px;color:var(--accent);letter-spacing:.1em;text-transform:uppercase}.section-title:after{content:"";height:1px;background:var(--line);flex:1}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.span-2{grid-column:1/-1}.choice-card{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}.choice-card:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}.question{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.choice{display:flex;gap:6px}.choice label{border:1px solid var(--line);border-radius:8px;padding:6px 9px;cursor:pointer;font-size:12px}.choice label:has(input[value="Yes"]:checked){border-color:var(--success);background:var(--success-soft);color:var(--success)}.choice label:has(input[value="No"]:checked){border-color:var(--danger);background:var(--danger-soft);color:var(--danger)}.signature{width:100%;height:165px;border:1px dashed var(--line-strong);border-radius:10px;background:#fff;touch-action:none}.attachment-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.attachment-tile{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface-subtle)}.attachment-tile img,.attachment-tile video{width:100%;height:125px;object-fit:cover;display:block}.attachment-tile a{display:block;padding:10px;color:var(--brand);text-decoration:none;font-size:12px;font-weight:650}.timeline{position:relative;padding-left:22px}.timeline:before{content:"";position:absolute;left:7px;top:7px;bottom:7px;width:1px;background:var(--line-strong)}.timeline-item{position:relative;padding:0 0 17px}.timeline-item:before{content:"";position:absolute;left:-19px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--surface);border:2px solid var(--accent)}.timeline-item strong{font-size:12px}.timeline-item p{margin:4px 0;color:var(--text-soft)}.timeline-item small{color:var(--muted)}

/* Chat */
.chat-layout{height:100%;min-height:0;display:grid;grid-template-columns:340px minmax(0,1fr);background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}.chat-directory{min-height:0;border-right:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain;background:var(--surface)}.chat-directory-head{position:sticky;top:0;z-index:2;background:var(--surface);padding:13px;border-bottom:1px solid var(--line)}.chat-row{padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer;display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:center}.chat-row:hover,.chat-row.active{background:var(--surface-hover)}.chat-avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-weight:700}.chat-row strong{display:block;font-size:13px}.chat-row small{color:var(--muted);display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px}.chat-time{text-align:right;color:var(--muted);font-size:9px}.chat-panel{height:100%;min-width:0;min-height:0;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto}.chat-head{min-height:63px;padding:10px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:11px;background:var(--surface)}.chat-head .chat-title{flex:1}.chat-head strong{display:block}.chat-head small{display:block;color:var(--muted);font-size:10px}.messages{min-height:0;padding:18px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;background:var(--surface-subtle)}.day-separator{width:max-content;margin:8px auto 14px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font-size:10px;font-weight:650}.message{max-width:min(72%,660px);margin-bottom:7px;padding:9px 11px;border:1px solid var(--line);border-radius:13px 13px 13px 4px;background:var(--surface);box-shadow:var(--shadow-xs);overflow-wrap:anywhere}.message.mine{margin-left:auto;background:var(--accent-soft);border-color:transparent;border-radius:13px 13px 4px 13px}.message .sender{font-size:10px;color:var(--accent);font-weight:700;margin-bottom:3px}.message small{display:block;color:var(--muted);margin-top:4px;text-align:right;font-size:9px}.message img,.message video{max-width:100%;max-height:360px;border-radius:8px;display:block}.message audio{max-width:100%}.message.forwarded:before{content:"Forwarded";display:block;color:var(--muted);font-size:9px;font-style:italic}.composer{position:relative;z-index:2;display:grid;grid-template-columns:auto auto auto minmax(0,1fr) auto;gap:7px;padding:10px;border-top:1px solid var(--line);background:var(--surface);box-shadow:0 -8px 24px color-mix(in srgb,var(--bg) 45%,transparent)}.recording-banner{grid-column:1/-1;display:flex;align-items:center;gap:10px;color:var(--danger);font-size:12px}.recording-dot{width:8px;height:8px;border-radius:50%;background:var(--danger);animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.35}}.gif-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;max-height:55vh;overflow:auto}.gif-grid img{width:100%;height:120px;object-fit:cover;border-radius:8px;cursor:pointer;background:var(--surface-subtle)}.expression-tabs{display:flex;gap:5px;border-bottom:1px solid var(--line);padding-bottom:8px}.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;max-height:340px;overflow:auto;padding:12px 0}.emoji-grid button{border:0;background:transparent;font-size:24px;padding:6px;border-radius:7px}.emoji-grid button:hover{background:var(--surface-hover)}

/* Assistant */
.assistant-fab{position:fixed;right:25px;bottom:108px;z-index:60;width:82px;height:54px;padding:4px;border:1px solid rgba(255,255,255,.3);border-radius:14px;background:#ececec;box-shadow:0 10px 28px rgba(15,49,73,.28);overflow:hidden}.assistant-fab img{width:100%;height:100%;object-fit:contain;border-radius:9px}.assistant-fab:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(15,49,73,.34)}.assistant-window{position:fixed;z-index:80;right:24px;bottom:175px;width:min(430px,calc(100vw - 32px));height:min(680px,calc(100vh - 205px));background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;overflow:hidden}.assistant-head{padding:14px 16px;color:#fff;background:#102d44;display:flex;justify-content:space-between;align-items:center}.assistant-prompts{display:flex;gap:6px;overflow-x:auto;padding:9px 10px;border-bottom:1px solid var(--line)}.assistant-prompts button{white-space:nowrap;border:1px solid var(--line);background:var(--surface);color:var(--text-soft);border-radius:999px;padding:5px 9px;font-size:10px}.assistant-messages{padding:14px;overflow:auto;background:var(--surface-subtle)}.assistant-message{margin-bottom:9px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--surface);white-space:pre-wrap;font-size:13px;line-height:1.55}.assistant-message.mine{margin-left:45px;color:#fff;background:var(--brand);border-color:var(--brand)}.assistant-rich{white-space:normal}.assistant-rich p{margin:0 0 11px}.assistant-rich p:last-child{margin-bottom:0}.assistant-rich h4{margin:3px 0 10px;font-size:14px;line-height:1.35;color:var(--text)}.assistant-rich ul,.assistant-rich ol{margin:4px 0 13px;padding-left:22px}.assistant-rich li{margin:0 0 8px;padding-left:2px}.assistant-rich li:last-child{margin-bottom:0}.assistant-rich strong{font-weight:750;color:var(--text)}
.assistant-window .composer{grid-template-columns:minmax(0,1fr) auto}
.assistant-confirmation{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-subtle)}.assistant-confirmation strong{display:block;margin-bottom:5px}.assistant-confirmation p{margin:0 0 8px;color:var(--text-soft)}.assistant-confirmation ul{margin:7px 0 10px;padding-left:19px}.assistant-confirm-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Attachment previews */
.media-preview{position:relative;display:grid;place-items:center;min-height:260px;padding:14px;border:1px solid var(--line);border-radius:13px;background:var(--surface-subtle);overflow:hidden}.media-preview img,.media-preview video{display:block;max-width:100%;max-height:58vh;border-radius:10px;object-fit:contain;box-shadow:var(--shadow-sm)}.media-preview.compact{min-height:150px;margin-bottom:12px}.media-preview.compact img,.media-preview.compact video{max-height:330px}.preview-caption{margin:16px 0 0}.file-preview-card{width:min(440px,100%);display:flex;align-items:center;gap:13px;padding:20px;border:1px solid var(--line);border-radius:11px;background:var(--surface)}.file-preview-card .material-symbols-rounded{font-size:34px;color:var(--brand)}.preview-remove{position:absolute;right:10px;top:10px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(10,20,30,.75);color:#fff;cursor:pointer}.ticket-update-composer{margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface-subtle)}.ticket-update-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.update-card{margin-bottom:9px}.update-card img,.update-card video{display:block;max-width:min(520px,100%);max-height:420px;border-radius:10px;object-fit:contain;background:#0d1117}.update-uploading{display:flex;align-items:center;gap:12px}.update-uploading>div{flex:1;min-width:0}.update-uploading small{color:var(--muted)}.upload-bar{height:6px;margin-top:8px;border-radius:999px;background:var(--line);overflow:hidden}.upload-bar>i{display:block;height:100%;background:var(--brand);transition:width .2s}.spinner-mini{width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.media-selection{position:relative;min-width:0}.media-selection .preview-remove{right:7px;top:7px;width:29px;height:29px;background:#c62828;font-weight:800;box-shadow:0 2px 8px rgba(0,0,0,.28)}.media-selection .file-preview-card{height:125px;border:0;border-radius:0;padding:12px}.attachment-play{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);color:#fff;font-size:38px;text-shadow:0 2px 9px #000}.modal-body{scroll-padding-bottom:150px}
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}.service-card{min-height:170px;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--text);display:flex;flex-direction:column;align-items:flex-start;gap:9px;text-align:left;box-shadow:var(--shadow-xs);transition:.16s ease}.service-card[hidden]{display:none}.service-card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow-sm)}.service-card strong{font-size:16px}.service-card small{color:var(--muted);line-height:1.45}.service-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--brand-soft);color:var(--brand);font-size:27px;margin-bottom:5px}.skeleton-stats .skeleton{min-height:106px;background:linear-gradient(90deg,var(--surface-subtle),var(--surface),var(--surface-subtle));background-size:200% 100%;animation:skeleton-shift 1.2s ease-in-out infinite}@keyframes skeleton-shift{to{background-position:-200% 0}}
.ticket-comments-scroll{max-height:360px;overflow-y:auto;overscroll-behavior:contain;padding-right:6px;scrollbar-gutter:stable}.ticket-comments-scroll .update-card:last-child{margin-bottom:0}
.subtask-builder{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-subtle)}.subtask-list{display:grid;gap:8px}.subtask-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-subtle)}.subtask-row.completed{opacity:.72}.subtask-row strong{display:block}.subtask-row small{display:block;margin-top:3px;color:var(--muted);font-size:11px}.subtask-row p{margin:7px 0 0;color:var(--text-soft)}

#toast-root{position:fixed;z-index:200;right:20px;bottom:20px;display:grid;gap:8px}.toast{background:#172633;color:#fff;border-radius:9px;padding:11px 14px;box-shadow:var(--shadow-lg);animation:toast-in .2s ease-out}.toast.error{background:#8e2c3a}@keyframes toast-in{from{transform:translateY(10px);opacity:0}}.loading-line{height:2px;overflow:hidden;background:var(--line)}.loading-line:after{content:"";display:block;width:35%;height:100%;background:var(--accent);animation:load 1.1s infinite}@keyframes load{from{transform:translateX(-100%)}to{transform:translateX(390%)}}

@media(max-width:1100px){:root{--sidebar:84px}.side-brand span,.nav-section-label,.nav-label,.side-user .user-copy{display:none}.side-brand{justify-content:center;padding-inline:0}.side-brand-logo{width:52px;height:42px}.nav-item{justify-content:center;padding:12px}.nav-item.active:before{left:-9px}.side-user{display:flex;justify-content:center;padding-inline:0}.stats-grid{grid-template-columns:repeat(2,1fr)}.chat-layout{grid-template-columns:300px minmax(0,1fr)}}
@media(max-width:720px){.login-page{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto}.login-brand{padding:max(28px,env(safe-area-inset-top)) 28px 28px}.login-logo{width:118px;height:52px}.login-brand h1{font-size:44px;margin-top:28px}.login-brand p{font-size:16px}.login-brand .trust{display:none}.login-disc{min-height:150px;--disc:96px}.login-panel{margin-top:-28px;padding:12px 24px max(28px,env(safe-area-inset-bottom));border-radius:32px 32px 0 0;place-items:start center;animation:login-sheet-in .55s .05s cubic-bezier(.2,.9,.3,1) both}.login-panel:before{content:"";display:block;width:36px;height:4px;margin:0 auto 20px;border-radius:2px;background:var(--line)}.login-card{animation:none}.app-shell{display:block}.sidebar{position:fixed;inset:auto 0 0;z-index:50;width:auto;height:68px;padding:5px 6px;display:block}.side-brand,.side-user,.nav-section-label{display:none}.nav-list{height:100%;display:flex;justify-content:space-around;overflow-x:auto;gap:0}.nav-item{min-width:57px;height:58px;display:grid;place-items:center;gap:1px;padding:5px;font-size:9px}.nav-item.active:before{left:50%;top:-5px;width:23px;height:3px;transform:translateX(-50%);border-radius:0 0 3px 3px}.nav-label{display:block;font-size:8px}.topbar{min-height:64px;padding:9px 14px}.topbar h1{font-size:19px}.topbar p,.top-user{display:none}.content{padding:18px 13px 145px}.content:has(.chat-layout){height:calc(100dvh - 64px);padding:10px 8px 78px}.stats-grid{grid-template-columns:repeat(2,1fr);gap:8px}.stat-card{padding:12px}.stat-card .stat-value{font-size:20px}.stat-icon{display:none}.grid{grid-template-columns:1fr}.toolbar{align-items:stretch}.toolbar .search{flex-basis:100%}.segmented{width:100%}.segmented button{flex:1}.detail-grid,.form-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.modal-backdrop{padding:0;align-items:end}.modal,.modal.wide{width:100%;max-height:93vh;border-radius:16px 16px 0 0}.modal-actions{padding-bottom:max(14px,env(safe-area-inset-bottom))}.chat-layout{height:100%;grid-template-columns:1fr;border-radius:11px}.chat-panel{display:none}.chat-layout.open-chat .chat-directory{display:none}.chat-layout.open-chat .chat-panel{display:grid}.composer{padding-bottom:max(10px,env(safe-area-inset-bottom));grid-template-columns:auto auto auto minmax(0,1fr) auto}.assistant-fab{bottom:84px;right:16px;width:72px}.assistant-window{right:9px;bottom:145px;width:calc(100vw - 18px);height:calc(100vh - 165px)}.message{max-width:88%}.emoji-grid{grid-template-columns:repeat(6,1fr)}}
.grid>.pagination{grid-column:1/-1}
@media(max-width:720px){.assistant-fab{bottom:145px}.assistant-window{bottom:212px;height:calc(100dvh - 232px)}}
.dashboard-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:22px 0}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 10px}.section-heading h3{margin:0;font-size:16px}.section-heading p{margin:2px 0 0;color:var(--muted);font-size:11px}.stack-list{display:grid;gap:8px}.compact-row,.notification-row{width:100%;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--text);padding:12px 13px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;box-shadow:var(--shadow-xs)}.compact-row:hover,.notification-row:hover{background:var(--surface-hover);border-color:var(--line-strong)}.compact-row span:first-child{min-width:0;flex:1}.compact-row strong,.compact-row small,.notification-row strong,.notification-row small{display:block}.compact-row small,.notification-row small{margin-top:3px;color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis}.notification-row{position:relative;justify-content:flex-start;padding:13px 15px}.notification-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:var(--surface-subtle);color:var(--muted)}.notification-copy{min-width:0;flex:1}.notification-meta{display:flex;align-items:center;gap:8px;margin-bottom:5px}.notification-meta time{color:var(--muted);font-size:10px}.notification-row.unread{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));background:color-mix(in srgb,var(--accent-soft) 64%,var(--surface))}.notification-row.unread .notification-icon{color:var(--accent);background:var(--accent-soft)}.unread-dot{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:var(--accent)}.empty-inline{padding:24px;border:1px dashed var(--line-strong);border-radius:11px;color:var(--muted);text-align:center}.notification-empty{display:grid;place-items:center;gap:4px;padding:36px 20px}.notification-empty>.material-symbols-rounded{font-size:30px;margin-bottom:3px}.notification-empty strong{color:var(--text-soft)}.notification-empty small{font-size:11px}.subtask-card{border-left:4px solid var(--muted)}.subtask-card.priority-high{border-left-color:var(--danger)}.subtask-card.priority-normal{border-left-color:var(--warning)}.subtask-card.priority-low{border-left-color:var(--success)}.subtask-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.skeleton-stack{min-height:90px;background:linear-gradient(100deg,var(--surface-subtle) 30%,var(--surface-hover) 50%,var(--surface-subtle) 70%);background-size:300% 100%;animation:skeleton 1.4s infinite;border-radius:11px}@keyframes skeleton{to{background-position:-150% 0}}
@media(max-width:720px){.dashboard-columns{grid-template-columns:1fr}}
.upload-progress-toast{position:fixed;z-index:210;left:50%;bottom:24px;transform:translateX(-50%);min-width:260px;padding:12px 18px;border-radius:10px;background:#172633;color:#fff;text-align:center;box-shadow:var(--shadow-lg)}
.ticket-detail-tabs{position:sticky;top:58px;z-index:2;display:flex;gap:4px;overflow-x:auto;margin:-21px -21px 18px;padding:10px 20px;border-bottom:1px solid var(--line);background:var(--surface-raised)}.ticket-detail-tabs button{border:0;border-radius:8px;background:transparent;color:var(--muted);padding:8px 12px;font-weight:700;white-space:nowrap}.ticket-detail-tabs button.active{background:var(--brand-soft);color:var(--brand)}.ticket-panel{display:none}.ticket-panel.active{display:block}.modal.wide .modal-actions{gap:7px}.modal.wide .modal-actions .ticket-action{order:2}
.date-filter{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px;font-weight:700}.date-filter .input{width:150px}
.filter-panel{padding:13px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-xs)}
.search-shell{position:relative;display:flex;align-items:center;flex:1 1 310px;min-width:220px}.search-shell>.material-symbols-rounded{position:absolute;left:13px;z-index:1;color:var(--muted);font-size:20px;pointer-events:none}.search-shell .input{min-height:46px;padding-left:42px;border-radius:12px;background:var(--surface-subtle)}
.search-shell .input{padding-right:46px}.search-clear{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:38px;height:38px;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--muted)}.search-clear:hover,.search-clear:focus-visible{background:var(--surface-hover);color:var(--brand);outline:2px solid color-mix(in srgb,var(--accent) 32%,transparent);outline-offset:1px}.search-clear .material-symbols-rounded{font-size:18px}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.date-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#meeting-date-filters{margin:14px 0 16px}
.date-filter-chip{border-radius:999px;padding:7px 16px;font-size:12px;font-weight:650;border:1px solid var(--line);background:var(--surface);color:var(--text)}
.date-filter-chip.active{background:var(--brand);color:var(--on-brand,#fff);border-color:var(--brand)}
@media(max-width:720px){.filter-panel{padding:10px}.search-shell{flex-basis:100%;min-width:0;width:100%}.date-filters{display:grid;grid-template-columns:1fr 1fr;width:100%}.date-filter{display:grid;gap:5px}.date-filter .input{width:100%;min-width:0}.filter-panel>select,.filter-panel>.btn{width:100%!important}.segmented button{flex:0 0 auto}.segmented{scroll-snap-type:x proximity}.segmented button{scroll-snap-align:start}}
.ticket-card{border-left:4px solid var(--muted)}.ticket-card.priority-high{border-left-color:var(--danger)}.ticket-card.priority-normal{border-left-color:var(--warning)}.ticket-card.priority-low{border-left-color:var(--success)}.mini-avatar{width:22px;height:22px;border-radius:50%;display:inline-grid!important;place-items:center;background:var(--brand-soft);color:var(--brand);font-weight:800}

/* 2026 interface refinement */
:root{
  --bg:#f2f5f8;--surface:#ffffff;--surface-raised:#ffffff;--surface-subtle:#f7f9fb;--surface-hover:#eef3f7;
  --text:#14202b;--text-soft:#40505f;--muted:#6e7d8c;--line:#e2e8ee;--line-strong:#ccd6df;
  --brand:#123b59;--brand-hover:#0b304b;--brand-soft:#e8f0f6;--accent:#0f7d7c;--accent-soft:#e2f4f1;
  --shadow-xs:0 1px 2px rgba(15,35,50,.04),0 1px 5px rgba(15,35,50,.025);
  --shadow-sm:0 10px 28px rgba(19,43,59,.08),0 2px 8px rgba(19,43,59,.04);
  --shadow-lg:0 28px 90px rgba(8,24,36,.24),0 8px 24px rgba(8,24,36,.1);
  --radius:16px;--sidebar:276px;
}
[data-theme="dark"]{
  --bg:#0b1117;--surface:#131b23;--surface-raised:#18222c;--surface-subtle:#1a2530;--surface-hover:#22303c;
  --text:#f3f6f8;--text-soft:#c7d0d9;--muted:#92a0ae;--line:#263441;--line-strong:#3a4a58;
  --brand:#94c3df;--brand-hover:#b2d5e8;--brand-soft:#1b3749;--accent:#70cbc3;--accent-soft:#153c3b;
  --shadow-xs:0 1px 3px rgba(0,0,0,.25);--shadow-sm:0 12px 32px rgba(0,0,0,.25);--shadow-lg:0 32px 100px rgba(0,0,0,.58);
}
html{scroll-behavior:smooth}body{letter-spacing:-.006em;background:var(--bg)}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 82% -10%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 32%),radial-gradient(circle at 8% 104%,color-mix(in srgb,var(--brand) 6%,transparent),transparent 28%)}
::selection{background:color-mix(in srgb,var(--accent) 24%,transparent)}
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:999px;background:var(--line-strong);background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background-color:var(--muted)}
*::-webkit-scrollbar-thumb:active{background-color:var(--text-soft)}
@media(forced-colors:active){*{scrollbar-color:auto}}

.sidebar{padding:24px 17px 20px;background:linear-gradient(180deg,#102f47 0%,#0c283d 54%,#0a2234 100%);border-right:1px solid rgba(255,255,255,.06);box-shadow:8px 0 32px rgba(9,28,42,.08)}
.side-brand{padding:0 8px 25px;gap:12px;font-size:16px}.side-brand-logo{width:92px;height:42px;box-shadow:0 8px 24px rgba(0,0,0,.15)}
.nav-section-label{padding:4px 13px 10px;color:#87a7bc}.nav-list{gap:5px}.nav-item{min-height:45px;border-radius:11px;padding:10px 13px;color:#b8ccd9;font-size:13px;transition:background .18s ease,color .18s ease,transform .18s ease}.nav-item:hover{background:rgba(255,255,255,.075);transform:translateX(2px)}.nav-item.active{background:linear-gradient(135deg,#fff,#f2f7fa);color:#123b59;box-shadow:0 8px 22px rgba(2,17,28,.16)}.nav-item.active:before{height:26px;background:#58c4ba}.nav-icon{font-size:20px}.side-user{padding-top:19px}.user-avatar{box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.topbar{min-height:82px;padding:13px clamp(24px,3.2vw,52px);border-bottom-color:color-mix(in srgb,var(--line) 82%,transparent);box-shadow:0 1px 0 rgba(255,255,255,.45);background:color-mix(in srgb,var(--surface) 91%,transparent)}
.topbar h1{font-size:24px;font-weight:750}.topbar p{margin-top:2px;font-size:12px}.top-actions{gap:9px}.topbar .btn-icon{border-color:var(--line);background:var(--surface);box-shadow:var(--shadow-xs)}
.content{max-width:1640px;padding:34px clamp(24px,3.2vw,52px) 110px}.content:has(.chat-layout){height:calc(100dvh - 82px);padding-top:24px;padding-bottom:24px}

.page-intro{position:relative;overflow:hidden;margin-bottom:24px;padding:24px 26px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,var(--surface) 0%,color-mix(in srgb,var(--brand-soft) 40%,var(--surface)) 100%);box-shadow:var(--shadow-xs);align-items:center}.page-intro:after{content:"";position:absolute;width:180px;height:180px;right:-88px;top:-112px;border:30px solid color-mix(in srgb,var(--accent) 7%,transparent);border-radius:50%;pointer-events:none}.page-intro h2{font-size:23px;font-weight:750}.page-intro p{font-size:13px}.eyebrow{display:block;margin-bottom:5px}.page-note{margin:0 0 20px;padding:12px 15px;border-radius:12px;background:color-mix(in srgb,var(--accent-soft) 52%,var(--surface));border-color:color-mix(in srgb,var(--accent) 17%,var(--line));color:var(--text-soft)}

.btn{min-height:42px;border-color:var(--line-strong);border-radius:10px;padding:9px 15px;font-size:13px;font-weight:700;box-shadow:none;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease,color .16s ease}.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-xs)}.btn:active{transform:translateY(0);box-shadow:none}.btn-primary{box-shadow:0 7px 16px color-mix(in srgb,var(--brand) 18%,transparent)}.btn-primary:hover{box-shadow:0 10px 22px color-mix(in srgb,var(--brand) 24%,transparent)}.btn-success{box-shadow:0 7px 16px color-mix(in srgb,var(--success) 16%,transparent)}.btn-icon{width:42px;height:42px;min-height:42px;border-radius:10px}.btn-ghost:hover{box-shadow:none;background:var(--surface-hover)}
.field{gap:8px;margin-bottom:17px}.field label{font-size:11px;letter-spacing:.015em}.input,select,textarea{min-height:46px;padding:11px 14px;border-color:var(--line-strong);border-radius:11px;background:var(--surface);box-shadow:inset 0 1px 1px rgba(16,36,50,.02)}.input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--brand) 30%,var(--line-strong))}.input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 13%,transparent)}textarea{min-height:116px;line-height:1.55}
.filter-panel{gap:11px;margin-bottom:22px;padding:14px;border-radius:16px;box-shadow:var(--shadow-xs)}.search-shell .input{min-height:48px;padding-left:43px;border-radius:11px;background:var(--surface)}.segmented{min-height:44px;padding:4px;border-radius:11px;background:var(--surface-subtle)}.segmented button{padding:8px 13px;border-radius:8px}.segmented button.active{color:var(--brand);box-shadow:0 2px 6px rgba(15,35,50,.08)}

.stats-grid{gap:16px;margin-bottom:24px}.stat-card{position:relative;overflow:hidden;min-height:104px;padding:20px;border-radius:16px;box-shadow:var(--shadow-xs);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.stat-card:before{content:none}.stat-card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow-sm)}.stat-card .stat-label{font-size:10px;letter-spacing:.075em}.stat-card .stat-value{font-size:30px;font-weight:750}.stat-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(145deg,var(--brand-soft),color-mix(in srgb,var(--accent-soft) 54%,var(--brand-soft)))}
.grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}.card{padding:20px;border-radius:16px;box-shadow:var(--shadow-xs)}.card.clickable{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.card.clickable:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}.card-head{gap:18px}.card h3{font-size:16px;font-weight:750}.card p{line-height:1.58}.card-kicker{margin-bottom:8px;color:var(--accent);font-size:10px;letter-spacing:.085em}.meta{gap:8px 16px;margin-top:17px;padding-top:14px}.badge{padding:5px 9px;font-size:9px;letter-spacing:.06em}.ticket-card{border-left-width:3px}.ticket-card:after{content:"open details";position:absolute;right:18px;bottom:16px;color:var(--muted);font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;opacity:0;transition:opacity .18s}.ticket-card{position:relative}.ticket-card:hover:after{opacity:.72}.empty{padding:76px 24px;border-radius:16px;background:color-mix(in srgb,var(--surface) 76%,transparent)}.empty-inline{padding:28px;border-radius:13px}.pagination{grid-column:1/-1!important;margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}

.dashboard-columns{gap:22px;margin:25px 0}.dashboard-columns>section{min-width:0;padding:20px;border:1px solid var(--line);border-radius:17px;background:var(--surface);box-shadow:var(--shadow-xs)}.dashboard-columns .section-heading{margin:0 0 14px}.section-heading{margin:24px 0 12px}.section-heading h3{font-size:17px}.stack-list{gap:10px}.compact-row,.notification-row{min-height:64px;padding:14px 15px;border-radius:13px;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}.compact-row:hover,.notification-row:hover{transform:translateY(-1px);box-shadow:var(--shadow-xs)}.notification-row{padding:15px 17px}.notification-icon{width:42px;height:42px;border-radius:12px}.skeleton-stack{border-radius:13px}

.modal-backdrop{padding:24px;background:rgba(5,14,21,.66);backdrop-filter:blur(6px);animation:backdrop-in .16s ease-out}.modal{display:flex;flex-direction:column;width:min(760px,100%);max-height:calc(100dvh - 48px);overflow:hidden;border-radius:18px;box-shadow:var(--shadow-lg);animation:modal-in .2s cubic-bezier(.2,.75,.25,1)}.modal.wide{width:min(1160px,100%)}.modal-head{position:relative;flex:0 0 auto;padding:19px 24px}.modal-head h2{font-size:20px;font-weight:750}.modal-head .btn-icon{border:0;background:var(--surface-subtle);font-size:17px}.modal-body{flex:1;min-height:0;overflow:auto;padding:24px;scrollbar-gutter:stable}.modal-actions{position:relative;flex:0 0 auto;gap:9px;padding:15px 24px;background:color-mix(in srgb,var(--surface-raised) 96%,var(--surface-subtle));box-shadow:0 -8px 24px rgba(15,35,50,.035)}.detail-grid{gap:12px}.detail{padding:14px 15px;border-radius:12px;background:var(--surface-subtle)}.detail label{font-size:9px}.detail div{margin-top:5px;line-height:1.55}.section-title{margin:26px 0 12px}.form-grid{gap:15px 16px}.choice-card{padding:14px;border-radius:12px}.signature{height:180px;border-radius:12px}.attachment-grid{gap:13px}.attachment-tile{border-radius:12px;box-shadow:var(--shadow-xs)}
@keyframes modal-in{from{opacity:0;transform:translateY(10px) scale(.985)}}@keyframes backdrop-in{from{opacity:0}}

.ticket-detail-tabs{top:-24px;z-index:4;gap:6px;margin:-24px -24px 22px;padding:12px 24px;background:color-mix(in srgb,var(--surface-raised) 97%,transparent);backdrop-filter:blur(12px)}.ticket-detail-tabs button{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 13px;border-radius:10px}.ticket-detail-tabs button .material-symbols-rounded{font-size:18px}.ticket-detail-tabs button:hover{background:var(--surface-hover);color:var(--text-soft)}.ticket-detail-tabs button.active{background:var(--brand-soft);color:var(--brand);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 13%,transparent)}.ticket-panel{animation:panel-in .17s ease-out}.ticket-panel>.section-title:first-child{margin-top:3px}@keyframes panel-in{from{opacity:0;transform:translateY(4px)}}
.subtask-list{gap:11px}.subtask-row{align-items:center;padding:15px 16px;border-radius:13px;background:var(--surface);box-shadow:var(--shadow-xs)}.subtask-row>div:first-child{min-width:0;flex:1}.subtask-row>div:last-child{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.subtask-row.completed{background:var(--surface-subtle)}.subtask-builder{gap:12px;padding:17px;border-radius:14px}.ticket-update-composer{padding:18px;border-radius:14px}.update-card{padding:16px}.ticket-comments-scroll{max-height:none}.media-preview{border-radius:14px}

.chat-layout{grid-template-columns:minmax(300px,360px) minmax(0,1fr);border-radius:17px;box-shadow:var(--shadow-sm)}.chat-directory-head{padding:15px}.chat-row{min-height:70px;padding:13px 15px;transition:background .16s ease}.chat-row.active{position:relative;background:var(--brand-soft)}.chat-row.active:before{content:"";position:absolute;inset:8px auto 8px 0;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}.chat-avatar{width:44px;height:44px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 10%,transparent)}.chat-head{min-height:72px;padding:12px 18px}.messages{padding:22px;background:linear-gradient(180deg,var(--surface-subtle),color-mix(in srgb,var(--surface-subtle) 75%,var(--bg)))}.message{padding:11px 13px;border-radius:15px 15px 15px 5px}.message.mine{border-radius:15px 15px 5px 15px}.composer{gap:9px;padding:12px 14px}.composer .input{background:var(--surface-subtle)}

.assistant-fab{right:28px;bottom:32px;width:76px;height:52px;border-radius:13px;transition:transform .18s ease,box-shadow .18s ease}.assistant-window{right:28px;bottom:96px;border-radius:18px}.assistant-head{padding:16px 18px;background:linear-gradient(135deg,#102f47,#0d4351)}
#toast-root{right:24px;bottom:24px}.toast{min-width:260px;padding:13px 16px;border-radius:11px;animation:toast-in .22s ease-out}

@media(max-width:1100px){
  :root{--sidebar:88px}.content{padding-inline:28px}.topbar{padding-inline:28px}.sidebar{padding-inline:13px}.nav-item:hover{transform:none}.grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
}
@media(max-width:820px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-columns{grid-template-columns:1fr}.modal.wide{width:100%}.ticket-card:after{display:none}}
@media(max-width:720px){
  body:before{display:none}.sidebar{height:74px;padding:6px 8px;background:#102f47}.nav-list{justify-content:flex-start;scrollbar-width:none}.nav-item{flex:0 0 72px;min-width:72px;height:62px;border-radius:10px}.nav-item:hover{transform:none}.topbar{min-height:68px;padding:10px 15px}.content{padding:18px 13px 150px}.content:has(.chat-layout){height:calc(100dvh - 68px);padding:9px 8px 84px}.page-intro{padding:19px 18px;border-radius:15px;align-items:flex-start}.page-intro h2{font-size:21px}.page-intro>.btn{position:relative;z-index:1}.stats-grid{gap:9px}.stat-card{min-height:88px;padding:14px}.stat-card .stat-value{font-size:24px}.filter-panel{padding:11px}.grid{grid-template-columns:1fr;gap:12px}.card{padding:17px}.modal-backdrop{padding:0;align-items:end}.modal,.modal.wide{max-height:94dvh;border-radius:18px 18px 0 0}.modal-head{padding:16px 17px}.modal-body{padding:18px}.modal-actions{padding:13px 17px max(14px,env(safe-area-inset-bottom))}.ticket-detail-tabs{top:-18px;margin:-18px -18px 18px;padding:10px 18px}.ticket-detail-tabs button{flex:0 0 auto}.subtask-row{display:grid;gap:12px}.subtask-row>div:last-child{justify-content:flex-start}.date-filters{gap:8px}.dashboard-columns>section{padding:16px}.chat-layout{border-radius:13px}.assistant-fab{right:15px;bottom:92px}.assistant-window{right:9px;bottom:154px;height:calc(100dvh - 174px)}
}
@media(max-width:430px){.stats-grid{grid-template-columns:1fr 1fr}.stat-card{min-width:0}.stat-card .stat-label{font-size:9px}.page-intro{display:grid}.page-intro>.btn{width:100%}.modal-actions>.btn{flex:1 1 auto}.pagination{gap:8px;flex-wrap:wrap}.pagination span{order:-1;width:100%;text-align:center}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Resilient data cards and status hierarchy */
.card-head>div{min-width:0;flex:1}.card h3,.card p,.card .meta span{min-width:0;overflow-wrap:anywhere;word-break:break-word}.card-head>.badge{flex:0 0 auto;max-width:42%;overflow:hidden;text-overflow:ellipsis}.ticket-card,.issue-card{width:100%;font:inherit;color:inherit;text-align:left}.ticket-card:focus-visible,.issue-card:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:3px}.issue-card{display:flex;min-height:250px;flex-direction:column;border:2px solid var(--danger)}.issue-card.issue-resolved{border-color:var(--success)}.issue-card .card-summary{-webkit-line-clamp:4}.issue-card .meta{margin-top:auto}.card-open-action{margin-left:auto!important;padding:6px 9px;border-radius:8px;background:var(--surface-subtle);color:var(--brand)!important;font-weight:750;white-space:nowrap}.card-open-action>.material-symbols-rounded{font-size:16px}.card.ticket-card{border-width:2px}.card.ticket-card.ticket-state-open{border-color:#D92D20}.card.ticket-card.ticket-state-assigned{border-color:#175CD3}.card.ticket-card.ticket-state-in_progress{border-color:#F79009}.card.ticket-card.ticket-state-completed{border-color:#027A48}.record-card{border-left:4px solid var(--success)}.pending-record{border-left:4px solid var(--brand)}
.more-service-grid{display:flex;flex-wrap:wrap;gap:16px}.compact-service-card{width:140px;height:130px;min-height:130px;padding:16px;align-items:center;justify-content:center;gap:10px;text-align:center;border-radius:20px}.compact-service-card .service-icon{margin:0}.compact-service-card strong{font-size:15px}
.release-label{margin:18px 0 0;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.server-directory{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.server-row{display:flex;align-items:center;gap:13px;min-width:0;padding:16px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--text);text-decoration:none;box-shadow:var(--shadow-xs);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.server-row:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand) 35%,var(--line));box-shadow:var(--shadow-sm)}.server-row>span:nth-child(2){min-width:0;flex:1}.server-row strong,.server-row small{display:block}.server-row small{margin-top:4px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.server-row>.material-symbols-rounded:last-child{color:var(--muted);font-size:19px}
.caller-name-field{margin-top:12px}.portal-customer{margin:20px 0 10px;font-size:15px}.portal-customer:first-child{margin-top:0}.portal-empty{margin:0;color:var(--muted);font-size:14px}
@media(max-width:720px){.issue-card{min-height:0}.card-open-action{margin-left:0!important}.server-directory{grid-template-columns:1fr}}

/* Ticket media and mobile composer usability */
.image-attachment{cursor:zoom-in}.image-attachment img{transition:transform .18s ease}.image-attachment:hover img{transform:scale(1.025)}
.image-lightbox{position:fixed;inset:0;z-index:240;display:grid;place-items:center;padding:24px;background:rgba(3,10,16,.88);backdrop-filter:blur(8px);animation:backdrop-in .16s ease-out}
.image-lightbox-card{position:relative;display:grid;justify-items:center;max-width:min(1120px,100%);max-height:calc(100dvh - 48px)}.image-lightbox-card img{display:block;max-width:100%;max-height:calc(100dvh - 92px);object-fit:contain;border-radius:14px;box-shadow:0 28px 90px rgba(0,0,0,.5)}.image-lightbox-card p{margin:10px 0 0;color:#e7edf2;font-size:12px}.image-lightbox-close{position:absolute;right:10px;top:10px;z-index:2;width:42px;height:42px;border:1px solid rgba(255,255,255,.24);border-radius:50%;background:rgba(8,18,26,.76);color:#fff;font-size:18px;cursor:pointer}
.ticket-update-composer{scroll-margin-bottom:96px}.ticket-update-actions .btn{min-width:150px}.ticket-update-actions #post-comment{margin-left:auto}
@media(max-width:720px){.ticket-panel[data-ticket-panel="updates"]{padding-bottom:110px}.ticket-update-composer{scroll-margin-bottom:130px}.ticket-update-actions{display:grid;grid-template-columns:1fr 1fr}.ticket-update-actions .btn{min-width:0;width:100%;white-space:normal}.ticket-update-actions #post-comment{grid-column:1/-1;margin-left:0}.image-lightbox{padding:12px}.image-lightbox-card img{max-height:calc(100dvh - 70px);border-radius:10px}}

/* Cohesive production UI system: restrained surfaces, denser hierarchy and resilient controls. */
:root{
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;
  --content-max:1480px;
}
body:before{display:none}
.sidebar{background:#102f47;box-shadow:none}
.nav-item.active{background:#fff;color:#123b59;box-shadow:0 2px 8px rgba(2,17,28,.14)}
.topbar{min-height:76px;background:color-mix(in srgb,var(--surface) 97%,transparent);box-shadow:none}
.content{width:100%;max-width:var(--content-max);padding-top:28px}
.page-intro{overflow:visible;padding:20px 22px;border-radius:var(--radius-md);background:var(--surface);box-shadow:none}
.page-intro:after{display:none}.page-intro h2{font-size:22px}.page-intro p{max-width:720px}

.btn{min-height:44px;border-radius:var(--radius-sm)}
.btn-icon{width:44px;height:44px;min-height:44px}
.btn-primary,.btn-success{box-shadow:none}.btn-primary:hover,.btn-success:hover{box-shadow:var(--shadow-xs)}
.input,select,textarea{border-radius:var(--radius-sm)}
.search-shell .input{min-height:48px;border-radius:var(--radius-sm)}
.filter-panel{border-radius:var(--radius-md);box-shadow:none}
.segmented{border-radius:var(--radius-sm)}.segmented button{min-height:36px;border-radius:6px}

.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:14px}
.card,.stat-card{border-radius:var(--radius-md);box-shadow:none}
.card{padding:18px}.card.clickable:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.stat-card{min-height:96px;padding:18px;border:2px solid var(--accent)}
.stat-icon{border-radius:10px;background:var(--brand-soft)}
.ticket-card:after{display:none}
.dashboard-columns>section{border-radius:var(--radius-md);box-shadow:none}
.compact-row,.notification-row,.subtask-row{border-radius:10px;box-shadow:none}

.modal-backdrop{backdrop-filter:none;background:rgba(5,14,21,.70)}
.modal,.modal.wide{border-radius:var(--radius-lg)}
.modal-head,.modal-body,.modal-actions{padding-inline:22px}
.detail,.choice-card,.attachment-tile,.ticket-update-composer{border-radius:10px}
.ticket-detail-tabs{gap:4px}.ticket-detail-tabs button{border-radius:8px}
.signature{min-height:180px;border:1px solid var(--line-strong);border-radius:10px}

.chat-layout{border-radius:var(--radius-md);box-shadow:none}
.chat-row{width:100%;min-height:68px;border:0;border-bottom:1px solid var(--line);background:transparent;color:inherit;font:inherit;text-align:left}.chat-row:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:-3px}.chat-avatar{width:42px;height:42px}
.message{border-radius:12px 12px 12px 4px}.message.mine{border-radius:12px 12px 4px 12px}
.message-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:5px}.message-foot small{margin:0}.message-actions{display:flex;gap:2px;opacity:0;transition:opacity .15s ease}.message:hover .message-actions,.message:focus-within .message-actions{opacity:1}.message-actions button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:7px;background:transparent;color:var(--muted)}.message-actions button:hover,.message-actions button:focus-visible{background:var(--surface-hover);color:var(--brand);outline:2px solid color-mix(in srgb,var(--accent) 32%,transparent);outline-offset:1px}.message-actions .material-symbols-rounded{font-size:17px}
.composer{min-height:68px}.composer .btn-icon{flex:0 0 44px}
.empty{padding:64px 20px}.empty .symbol{border-radius:10px}

@media(max-width:1100px){
  .content{padding-inline:24px}.topbar{padding-inline:24px}
}
@media(max-width:720px){
  .topbar{min-height:64px;padding:8px 13px}.topbar h1{font-size:20px}.top-user{display:none}
  .content{padding:14px 12px calc(112px + env(safe-area-inset-bottom))}.content:has(.chat-layout){height:calc(100dvh - 64px);padding:8px 8px calc(82px + env(safe-area-inset-bottom))}
  .page-intro{padding:16px;margin-bottom:14px}.page-intro h2{font-size:20px}
  .toolbar,.filter-panel{gap:8px}.toolbar-group{width:100%;flex-wrap:wrap}.toolbar-group>.btn,.toolbar-group>select{flex:1 1 auto}
  .segmented{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
  .card{padding:16px}.card-head{gap:10px}.card-head>.badge{max-width:46%}
  .modal,.modal.wide{width:100%;max-height:calc(100dvh - env(safe-area-inset-top));border-radius:16px 16px 0 0}
  .modal-head,.modal-body,.modal-actions{padding-inline:16px}.modal-body{padding-block:18px}
  .form-grid,.detail-grid{grid-template-columns:1fr}.span-2{grid-column:auto}
  .composer{grid-template-columns:repeat(3,44px) minmax(0,1fr) 44px;padding:9px max(8px,env(safe-area-inset-right)) max(9px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
}
@media(max-width:420px){
  .top-actions{gap:4px}.top-actions .btn-icon{width:40px;height:40px;min-height:40px}
  .stats-grid{grid-template-columns:1fr}.stat-card{min-height:82px}
  .ticket-detail-tabs{scroll-padding-inline:16px}.ticket-detail-tabs button{min-height:42px}
  .composer{grid-template-columns:repeat(3,40px) minmax(0,1fr) 40px;gap:5px}.composer .btn-icon{width:40px;height:40px;min-height:40px}
}
@media(hover:none){.message-actions{opacity:1}}

/* Meetings and owner-managed ticket media */
.meeting-card{width:100%;border:1px solid var(--line);cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.meeting-card.upcoming{border-color:var(--accent)}.meeting-card.ended{border-color:var(--line-strong)}
.meeting-card:hover{box-shadow:0 10px 28px rgba(9,45,67,.10);transform:translateY(-1px)}
.meeting-card:focus-visible{outline:3px solid var(--focus-ring,var(--brand-soft));outline-offset:2px;border-color:var(--brand)}
.meeting-card .material-symbols-rounded,.meeting-card .meta i{font-size:17px}
.meeting-state{display:grid;justify-items:end;gap:5px}.meeting-state small{color:var(--muted);font-size:11px;white-space:nowrap}.badge.upcoming{background:var(--accent-soft);border-color:transparent;color:var(--accent)}.badge.ended{background:var(--surface-subtle);border-color:var(--line);color:var(--muted)}
.field-label-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.selection-count{font-size:12px;font-weight:700;color:var(--brand)}
.meeting-attendee-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:230px;overflow:auto;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface-subtle)}
.meeting-attendee-option{display:flex;align-items:center;gap:10px;min-width:0;padding:10px;border:1px solid transparent;border-radius:8px;cursor:pointer;transition:background .14s ease,border-color .14s ease}
.meeting-attendee-option:hover{background:var(--brand-soft)}.meeting-attendee-option:has(input:checked){background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 32%,transparent)}
.meeting-attendee-option input{position:absolute;opacity:0;pointer-events:none}.meeting-check{display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border:2px solid var(--line-strong);border-radius:5px;background:var(--surface)}.meeting-check .material-symbols-rounded{font-size:16px;opacity:0;color:white}.meeting-attendee-option input:checked+.meeting-check{border-color:var(--brand);background:var(--brand)}.meeting-attendee-option input:checked+.meeting-check .material-symbols-rounded{opacity:1}.meeting-attendee-option input:focus-visible+.meeting-check{outline:3px solid var(--brand-soft);outline-offset:2px}.meeting-attendee-option strong,.meeting-attendee-option small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.meeting-attendee-option small{margin-top:2px;color:var(--muted);font-weight:400}
.meeting-detail{display:grid;gap:22px}.meeting-detail-title h2{margin:5px 0 0;font-size:24px}.meeting-detail section{display:grid;gap:10px}.meeting-detail section h3{display:flex;align-items:center;gap:7px;margin:0;font-size:14px}.meeting-detail section h3 span{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-size:11px}.attendee-chip-list{display:flex;flex-wrap:wrap;gap:8px}.attendee-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;color:var(--text);background:var(--surface);text-decoration:none;font-size:13px}.attendee-chip .material-symbols-rounded{font-size:17px;color:var(--brand)}
.update-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.update-card-head .btn-icon{width:34px;height:34px;min-height:34px}
.attachment-tile{position:relative}.attachment-tile>a{display:block;color:var(--brand);text-decoration:none}.attachment-tile>a>.material-symbols-rounded{display:block;padding:24px 12px 8px;text-align:center;font-size:34px}.attachment-tile>a>span:last-child{display:block;padding:8px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
select[multiple]{min-height:132px;padding:6px;background-image:none}select[multiple] option{padding:9px 10px;border-radius:6px}select[multiple] option:checked{background:var(--brand-soft);color:var(--brand)}
@media(max-width:640px){.meeting-attendee-picker{grid-template-columns:1fr;max-height:260px}}
.api-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:0 0 auto}
.api-dot.good{background:var(--success)}
.api-dot.warn{background:var(--warning)}
.api-dot.bad{background:var(--danger)}
.badge.get{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.badge.post{background:var(--brand-soft);color:var(--brand);border-color:transparent}
.api-endpoint-text{flex:1;min-width:0}

/* Create ticket: customer email picker */
.email-picker{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface-subtle)}
.email-picker-tools{display:flex;gap:8px;align-items:center}.email-picker-tools .search-shell{min-width:0}.email-picker-tools .search-shell .input{min-height:40px}
.email-directory{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;max-height:264px;overflow:auto;padding:2px}
.email-option{position:relative;display:flex;align-items:center;gap:10px;min-width:0;padding:9px 11px;border:1px solid var(--line);border-radius:11px;background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.email-option:hover{border-color:var(--line-strong);box-shadow:var(--shadow-xs)}
.email-option input{position:absolute;opacity:0;pointer-events:none}
.email-option:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.email-option:has(input:focus-visible){outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:2px}
.email-avatar{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:750}
.email-text{flex:1;min-width:0}.email-text strong,.email-text small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.email-text strong{font-size:13px;color:var(--text)}.email-text small{font-size:11px;color:var(--muted)}
.email-check{font-size:19px;color:var(--accent);opacity:0;transform:scale(.7);transition:opacity .15s,transform .15s}.email-option:has(input:checked) .email-check{opacity:1;transform:none}
.email-empty{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:14px;color:var(--muted)}.email-empty>.material-symbols-rounded{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:var(--surface);font-size:21px}.email-empty strong{display:block;color:var(--text);font-size:13px}.email-empty small{font-size:11px}
.email-add{display:flex;align-items:center;gap:8px;padding:5px 5px 5px 12px;border:1px dashed var(--line-strong);border-radius:11px;background:var(--surface)}.email-add:focus-within{border-style:solid;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 13%,transparent)}
.email-add>.material-symbols-rounded{color:var(--muted);font-size:19px}.email-add input{flex:1;min-width:0;min-height:38px;border:0;outline:0;background:transparent;color:var(--text);font:inherit}.email-add .btn{min-height:36px}
.email-picker .field-help{margin:0}
@media(max-width:720px){.email-directory{grid-template-columns:1fr}}

/* ─────────────────────────────────────────────────────────────────────────────
   Motion layer. Presentation only - no component changes its behaviour here.
   Everything is disabled wholesale under prefers-reduced-motion at the bottom.
   ───────────────────────────────────────────────────────────────────────────── */

@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes pop-in{0%{opacity:0;transform:scale(.82)}60%{transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
@keyframes shimmer-sweep{0%{background-position:-160% 0}100%{background-position:260% 0}}
@keyframes ring-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* Page + card entrances. Cards stagger so a list assembles itself instead of snapping in. */
.page-intro{animation:rise .34s cubic-bezier(.22,1,.36,1) both}
.grid>.card,.stack-list>*,.service-grid>.service-card,.stats-grid>.stat-card{animation:rise .38s cubic-bezier(.22,1,.36,1) both}
.grid>.card:nth-child(1),.stack-list>*:nth-child(1),.stats-grid>.stat-card:nth-child(1),.service-grid>.service-card:nth-child(1){animation-delay:.02s}
.grid>.card:nth-child(2),.stack-list>*:nth-child(2),.stats-grid>.stat-card:nth-child(2),.service-grid>.service-card:nth-child(2){animation-delay:.06s}
.grid>.card:nth-child(3),.stack-list>*:nth-child(3),.stats-grid>.stat-card:nth-child(3),.service-grid>.service-card:nth-child(3){animation-delay:.10s}
.grid>.card:nth-child(4),.stack-list>*:nth-child(4),.stats-grid>.stat-card:nth-child(4),.service-grid>.service-card:nth-child(4){animation-delay:.14s}
.grid>.card:nth-child(5),.stack-list>*:nth-child(5),.stats-grid>.stat-card:nth-child(5){animation-delay:.18s}
.grid>.card:nth-child(6),.stack-list>*:nth-child(6){animation-delay:.22s}
.grid>.card:nth-child(n+7),.stack-list>*:nth-child(n+7){animation-delay:.26s}

/* Cards lift and pick up a brand-tinted edge on hover rather than just changing colour. */
.card,.service-card,.compact-row,.notification-row,.stat-card{transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s ease,border-color .2s ease}
.card.clickable:hover,.ticket-card:hover,.issue-card:hover,.meeting-card:hover,.service-card:hover,.compact-row:hover,.notification-row:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm),0 0 0 1px color-mix(in srgb,var(--accent) 26%,transparent)}
.card.clickable:active,.ticket-card:active,.issue-card:active,.meeting-card:active,.service-card:active{transform:translateY(-1px) scale(.995)}

/* Stat tiles read as a scoreboard: value pops in, icon lifts, accent bar grows on hover. */
.stat-card .stat-value{animation:pop-in .5s cubic-bezier(.22,1,.36,1) both;animation-delay:.12s;font-variant-numeric:tabular-nums}
.stat-card .stat-icon{transition:transform .25s cubic-bezier(.22,1,.36,1),background .25s ease}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.stat-card:hover .stat-icon{transform:translateY(-2px) rotate(-6deg) scale(1.06)}
/* Accent rail thickens on hover via scaleX rather than width, so it composites instead of
   forcing layout on every frame. */

/* Buttons acknowledge the press instead of only the hover. */
.btn{transition:transform .14s cubic-bezier(.22,1,.36,1),background .18s ease,border-color .18s ease,box-shadow .18s ease}
.btn:active{transform:scale(.965)}
.btn-primary:hover{box-shadow:0 4px 14px color-mix(in srgb,var(--brand) 32%,transparent)}
.nav-item{transition:transform .18s cubic-bezier(.22,1,.36,1),background .18s ease,color .18s ease}
.nav-item:active{transform:scale(.97)}

/* Loading copy shimmers like the skeletons instead of sitting there as flat grey text. */
.empty{animation:fade-in .3s ease both}
.grid>.empty,.stack-list>.empty{background-image:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--accent) 9%,transparent) 45%,transparent 70%);background-size:220% 100%;animation:fade-in .3s ease both,shimmer-sweep 2.4s linear infinite}

/* Anything live gets a slow halo: unread notifications, upcoming meetings, healthy endpoints. */
.unread-dot,.api-dot.good{animation:ring-pulse 2.4s ease-out infinite}
.badge.upcoming{position:relative}

/* Row-level polish for the API map so 600+ endpoints still feel handled, not dumped. */
/* Nudge on hover with transform, not padding - this row repeats 600+ times in the Operations
   App card, so a layout-triggering hover would be felt. */

/* Sidebar nav gets a moving accent rail so the active section is felt, not just read. */
.nav-item.active{position:relative}
.nav-item.active:before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(var(--accent),var(--brand));animation:rise .28s cubic-bezier(.22,1,.36,1) both}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .card.clickable:hover,.ticket-card:hover,.issue-card:hover,.meeting-card:hover,.service-card:hover,.stat-card:hover,.compact-row:hover,.notification-row:hover{transform:none}
}

/* Optional call source for ticket creation. The second overlay preserves every field in the
   underlying general-ticket form while calls are being chosen. */
.linked-call-selection{display:grid;gap:7px;padding:14px;border:1px dashed var(--line-strong);border-radius:12px;background:var(--surface-subtle)}
.linked-call-selection>p{margin:0;color:var(--muted);font-size:11px}.link-call-button{justify-self:start;color:var(--brand)}
.linked-call-card{display:grid;gap:8px}.linked-call-main{display:flex;align-items:center;gap:11px}.linked-call-main>.material-symbols-rounded{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:var(--brand-soft);color:var(--brand)}
.linked-call-main strong,.linked-call-main small{display:block}.linked-call-main small,.linked-call-card>p{color:var(--muted);font-size:11px}.linked-call-card>p{margin:0}.linked-call-actions{display:flex;gap:8px;margin-top:3px}
.call-picker-backdrop{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:24px;background:rgba(5,14,21,.72);backdrop-filter:blur(7px)}
.call-picker{display:flex;flex-direction:column;width:min(680px,100%);max-height:min(780px,calc(100dvh - 48px));overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--surface-raised);box-shadow:var(--shadow-lg);animation:modal-in .2s cubic-bezier(.2,.75,.25,1)}
.call-picker-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;border-bottom:1px solid var(--line)}.call-picker-head h2{margin:2px 0 0;font-size:20px}.call-picker-head .eyebrow{margin:0;color:var(--accent);font-size:9px;font-weight:750;letter-spacing:.1em;text-transform:uppercase}
.call-picker-body{display:grid;grid-template-columns:auto minmax(240px,1fr);gap:14px;min-height:0;padding:20px 22px}.call-scope{align-self:start}.call-search-shell{min-width:0}.call-picker-status{grid-column:1/-1;color:var(--muted);font-size:11px;font-weight:650}.call-picker-list{grid-column:1/-1;display:grid;gap:8px;min-height:160px;overflow:auto;overscroll-behavior:contain}
.call-result{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);font:inherit;text-align:left;box-shadow:var(--shadow-xs);cursor:pointer}.call-result:hover{border-color:color-mix(in srgb,var(--brand) 35%,var(--line));background:var(--surface-hover)}.call-result strong,.call-result small{display:block}.call-result small{margin-top:3px;color:var(--muted);font-size:11px}.call-result-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:var(--brand-soft);color:var(--brand)}
.call-picker-loading,.call-picker-error{min-height:180px;display:grid;place-items:center;align-content:center;gap:10px;color:var(--muted);text-align:center}.call-picker-error>.material-symbols-rounded{font-size:34px}.call-picker-error p{margin:0}
@media(max-width:720px){.call-picker-backdrop{padding:0;align-items:end}.call-picker{width:100%;max-height:94dvh;border-radius:18px 18px 0 0}.call-picker-body{grid-template-columns:1fr;padding:17px}.call-picker-list,.call-picker-status{grid-column:auto}.call-picker-head{padding:16px 17px}.call-scope{width:100%}.linked-call-actions .btn{flex:1}}

/* ── Chat + tickets refresh (mirrors Android/iOS: brand blue, grey fields, avatars, pills) ── */
:root{--tk-blue:#2e6bf6;--tk-blue-fill:#2e6bf6;--tk-blue-soft:#e9f0ff;--tk-field:#f1f3f7;--tk-hairline:#eceef2;--tk-grad:linear-gradient(135deg,#4a86ff,#1b4fd8);
  --chat-out:#151b26;--chat-in:#f0f2f6;--tk-high:#7a2ed6;--tk-high-bg:#f3e8ff;--tk-normal:#c2570c;--tk-normal-bg:#fff1e6;--tk-low:#4b5b70;--tk-low-bg:#eef2f6;
  --tk-open:#b42318;--tk-open-bg:#fef3f2;--tk-assigned:#175cd3;--tk-assigned-bg:#eff8ff;--tk-progress:#b54708;--tk-progress-bg:#fffaeb;--tk-done:#027a48;--tk-done-bg:#ecfdf3}
[data-theme="dark"]{--tk-blue:#6b97ff;--tk-blue-fill:#3a6af0;--tk-blue-soft:#1c2a4a;--tk-field:#1a212b;--tk-hairline:#1f2731;--tk-grad:linear-gradient(135deg,#2f5fe0,#16358f);
  --chat-out:#3a6af0;--chat-in:#1e252f;--tk-high:#c9a4ff;--tk-high-bg:#2e1d4a;--tk-normal:#fdba74;--tk-normal-bg:#3a2614;--tk-low:#a9b7c6;--tk-low-bg:#1f2833;
  --tk-open:#ff8a80;--tk-open-bg:#3a1a18;--tk-assigned:#8fb6ff;--tk-assigned-bg:#16284a;--tk-progress:#fbbf5a;--tk-progress-bg:#3a2a10;--tk-done:#5fd69a;--tk-done-bg:#12301f}

/* Chat */
.chat-layout{background:var(--surface);border:1px solid var(--tk-hairline);box-shadow:none}
.chat-directory{background:var(--surface);border-right:1px solid var(--tk-hairline)}
.chat-directory-head{padding:18px 16px 12px;border-bottom:0;background:var(--surface)}
.chat-directory-head:before{content:"Chats";display:block;margin:0 0 12px;font-size:26px;font-weight:700;letter-spacing:-.02em}
.chat-directory .search-shell .input{background:var(--tk-field);border-color:transparent;border-radius:12px}
.chat-directory .search-shell .input:focus{border-color:var(--tk-blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--tk-blue) 20%,transparent)}
#create-group{color:var(--tk-blue);border-radius:12px}
.chat-row{min-height:72px;gap:14px;padding:10px 16px;border-bottom:1px solid var(--tk-hairline);border-radius:0}
.chat-row:hover{background:var(--tk-field)}.chat-row.active{background:var(--tk-blue-soft);box-shadow:inset 3px 0 0 var(--tk-blue)}
.chat-row strong{font-weight:600;font-size:15px}.chat-row small{color:var(--muted);font-size:13.5px}
.chat-row .chat-time{color:var(--muted);font-size:12px}
.chat-row .badge.open,[data-theme="dark"] .chat-row .badge.open{background:var(--tk-blue-fill)!important;color:#fff!important;border-color:transparent;border-radius:999px;min-width:20px;justify-content:center;font-weight:700}
.tone-avatar{width:48px;height:48px;flex:0 0 48px;border-radius:50%;display:grid;place-items:center;color:#fff!important;font-weight:700;font-size:18px}
.chat-head{background:var(--surface);border-bottom:1px solid var(--tk-hairline);box-shadow:none}
.chat-head .tone-avatar{width:40px;height:40px;flex-basis:40px;font-size:16px}
.chat-head #chat-back{color:var(--tk-blue)}
.messages{background:var(--surface)}
.day-separator{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--muted);font-size:12px;font-weight:600}
.message{background:var(--chat-in);color:var(--text);border:0;border-radius:20px 20px 20px 6px;box-shadow:none;padding:9px 14px}
.message .sender{color:var(--tk-blue);font-weight:700;font-size:12px}
.message.mine{background:var(--chat-out);color:#fff;border-radius:20px 20px 6px 20px}
.message.mine .sender{display:none}
.message.mine .message-foot small,.message.mine .message-actions button{color:rgba(255,255,255,.72)}
.message.mine a{color:#fff}
.composer{background:var(--surface);border-top:1px solid var(--tk-hairline);gap:8px}
.composer .input,.composer textarea{background:var(--tk-field);border-color:transparent;border-radius:22px}
.composer .btn-primary{background:var(--tk-blue-fill);border-color:transparent;color:#fff;border-radius:50%}

/* Tickets list */
.ticket-page .segmented{background:transparent;border:0;padding:0;gap:8px;flex-wrap:wrap;box-shadow:none}
.ticket-page .segmented button{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:8px 16px;font-weight:600}
.ticket-page .segmented button.active{background:var(--tk-blue-fill);border-color:transparent;color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--tk-blue-fill) 30%,transparent)}
.ticket-page .search-shell .input,.ticket-page #ticket-company{background:var(--tk-field);border-color:transparent;border-radius:12px}
.ticket-page #create-ticket{background:var(--tk-grad);border:0;color:#fff;border-radius:999px;padding-inline:20px;box-shadow:0 10px 24px color-mix(in srgb,var(--tk-blue-fill) 35%,transparent)}
.ticket-page .stat-card{border-radius:18px;border:1px solid var(--tk-hairline);box-shadow:none}
.ticket-page .stat-icon{background:var(--tk-blue-soft);color:var(--tk-blue);border-radius:12px}
.ticket-card{border:1px solid var(--line)!important;border-left-width:1px!important;border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:none;text-align:left}
.ticket-card.ticket-state-open{border-color:color-mix(in srgb,var(--tk-open) 45%,transparent)!important}
.ticket-card.ticket-state-assigned{border-color:color-mix(in srgb,var(--tk-assigned) 45%,transparent)!important}
.ticket-card.ticket-state-in_progress{border-color:color-mix(in srgb,var(--tk-progress) 45%,transparent)!important}
.ticket-card.ticket-state-completed{border-color:color-mix(in srgb,var(--tk-done) 45%,transparent)!important}
.tk-top{display:flex;align-items:center;gap:6px}.tk-number{margin-left:auto;color:var(--muted);font-size:12px;font-weight:600}
.tk-pill{display:inline-flex;align-items:center;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;white-space:nowrap}
.tk-status-open{color:var(--tk-open);background:var(--tk-open-bg)}.tk-status-assigned{color:var(--tk-assigned);background:var(--tk-assigned-bg)}
.tk-status-in_progress{color:var(--tk-progress);background:var(--tk-progress-bg)}.tk-status-completed{color:var(--tk-done);background:var(--tk-done-bg)}
.tk-priority-high,.tk-priority-urgent{color:var(--tk-high);background:var(--tk-high-bg)}.tk-priority-normal{color:var(--tk-normal);background:var(--tk-normal-bg)}.tk-priority-low{color:var(--tk-low);background:var(--tk-low-bg)}
.tk-main{display:flex;align-items:center;gap:12px;min-width:0}.tk-main .tone-avatar{width:42px;height:42px;flex-basis:42px;font-size:16px}
.tk-main h3{margin:0;font-size:16px;line-height:1.3}.tk-main .card-summary{margin:2px 0 0;color:var(--muted);font-size:13px}
.ticket-card .meta{margin:0;color:var(--muted);font-size:12px}
.tk-assignee{display:flex;align-items:center;gap:8px;background:var(--tk-field);border-radius:12px;padding:9px 12px;font-size:13px;font-weight:600;color:var(--text)}
.tk-assignee i{font-size:18px;color:var(--muted)}

/* Ticket modals (create, details, complete) */
.ticket-modal{border-radius:22px;overflow:hidden}
.ticket-modal .modal-head{border-bottom:0}
.tk-hero{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding:18px;border-radius:20px;background:var(--tk-grad);color:#fff}
.tk-hero>.material-symbols-rounded{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.22)}
.tk-hero strong{display:block;font-size:19px;line-height:1.25}.tk-hero small{display:block;opacity:.85;margin-top:3px}
.tk-hero-number{display:inline-block;margin-bottom:8px;padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);font-size:12px;font-weight:600}
.tk-hero-detail strong{font-size:22px}
.ticket-modal .field label{font-size:14px;font-weight:700;color:var(--text)}
.ticket-modal .input,.ticket-modal select,.ticket-modal textarea{background:var(--tk-field);border-color:transparent;border-radius:12px}
.ticket-modal .input:focus,.ticket-modal select:focus,.ticket-modal textarea:focus{border-color:var(--tk-blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--tk-blue) 18%,transparent)}
.ticket-modal .ticket-update-actions{justify-content:center;padding:18px;border:1.5px dashed var(--line-strong);border-radius:14px;background:var(--tk-field)}
.ticket-modal .ticket-update-actions .btn{background:var(--surface);border-color:transparent}
.ticket-modal .ticket-detail-tabs{background:var(--tk-field);border:0;border-radius:14px;padding:4px;gap:4px}
.ticket-modal .ticket-detail-tabs button{border:0;border-radius:11px;background:transparent;color:var(--muted);font-weight:600}
.ticket-modal .ticket-detail-tabs button.active{background:var(--surface);color:var(--tk-blue);box-shadow:var(--shadow-xs)}
[data-theme="dark"] .ticket-modal .ticket-detail-tabs button.active{background:#2a3441}
.ticket-modal .detail{background:var(--surface);border:1px solid var(--tk-hairline);border-radius:16px}
.ticket-modal .detail>label{text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--muted)}
.ticket-modal .modal-actions{border-top:1px solid var(--tk-hairline);gap:8px;flex-wrap:wrap}
.ticket-modal .modal-actions .btn{border-radius:999px}
.ticket-modal .modal-actions .btn-primary,.ticket-modal .modal-actions #start-ticket{background:var(--tk-grad);border:0;color:#fff}
.ticket-modal .modal-actions .ticket-action{background:var(--tk-field);border-color:transparent;color:var(--text)}
.ticket-modal .modal-actions #start-ticket{color:#fff}

/* ── Dashboard, issues, visits & checklists refresh (quiet cards, pills, avatars) ── */
.ws-greeting{align-items:center}
.ws-hello{display:flex;align-items:center;gap:14px}.ws-hello .tone-avatar{width:52px;height:52px;flex-basis:52px;font-size:18px}
.ws-hello p{margin:0;color:var(--muted);font-size:14px}.ws-hello h2{margin:0;font-size:26px;letter-spacing:-.02em}
.ws-stats{background:var(--surface);border:1px solid var(--tk-hairline);border-radius:18px;margin-bottom:22px;overflow:hidden}
.ws-stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ws-stat{padding:16px 18px}.ws-stat+.ws-stat{border-left:1px solid var(--tk-hairline)}
.ws-stat .stat-value{font-size:30px;font-weight:700;line-height:1.1}.ws-stat .stat-label{color:var(--muted);font-size:13px;margin-top:4px}
.ws-done{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--tk-hairline);color:var(--muted);font-size:13px}
.ws-done b{color:var(--text)}.ws-done .material-symbols-rounded{color:var(--tk-done);font-size:18px}
.section-heading h3{font-size:17px}
.compact-row{border:1px solid var(--tk-hairline);border-radius:16px;background:var(--surface);padding:12px 14px;gap:10px;box-shadow:none}
.compact-row:hover{background:var(--tk-field)}.compact-row .row-chevron{color:var(--muted);font-size:20px}
.notification-row{border:1px solid var(--tk-hairline)!important;border-radius:16px;background:var(--surface)!important;padding:14px;gap:12px;box-shadow:none;text-align:left}
.notification-row .notification-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--tk-blue-soft);color:var(--tk-blue);font-size:20px}
.notification-row .notification-meta{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.notification-row .notification-meta strong{font-weight:500}.notification-row.unread .notification-meta strong{font-weight:700}
.notification-row time{color:var(--muted);font-size:12px;white-space:nowrap}.notification-row small{color:var(--muted)}
.notification-category{display:block;margin-top:4px;color:var(--muted);font-size:12px}
.notification-row .unread-dot{background:var(--tk-blue-fill)}

/* Quiet stat strips on issues/visits/checklists */
.issue-page .stat-card,.record-page .stat-card{border-radius:18px;border:1px solid var(--tk-hairline);box-shadow:none}
.issue-page .stat-icon,.record-page .stat-icon{background:var(--tk-field);color:var(--muted);border-radius:12px}
.issue-page .segmented{background:var(--tk-field);border:0;border-radius:14px;padding:4px;gap:4px;box-shadow:none}
.issue-page .segmented button{border:0;border-radius:11px;background:transparent;color:var(--muted);font-weight:600}
.issue-page .segmented button.active{background:var(--surface);color:var(--tk-blue);box-shadow:var(--shadow-xs)}
[data-theme="dark"] .issue-page .segmented button.active{background:#2a3441}
.issue-page select,.record-page .date-filter .input{border-radius:999px;border-color:var(--line)}
.issue-page .search-shell .input,.record-page .search-shell .input{background:var(--surface);border-color:var(--tk-hairline);border-radius:12px}
#batch-resolve-issues{background:transparent;border:0;color:var(--tk-blue);font-weight:600}
.page-note{color:var(--muted)}

/* Issue + record cards */
.issue-card,.record-card,.pending-record{border:1px solid var(--tk-hairline)!important;border-left-width:1px!important;border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:none;text-align:left}
.issue-card.selected{background:var(--tk-blue-soft)!important;border-color:var(--tk-blue)!important}
.issue-card .tk-main,.record-card .tk-main,.pending-record .tk-main{align-items:center}
.issue-card .tk-main>div,.record-card .tk-main>div,.pending-record .tk-main>div{flex:1;min-width:0}
.issue-card .tk-pill,.record-card .tk-pill,.pending-record .tk-pill{margin-left:auto}
.issue-check{color:var(--tk-blue);font-size:22px}
.issue-problem{display:flex;gap:10px;align-items:flex-start;background:var(--tk-field);border-radius:12px;padding:10px 12px}
.issue-problem>.material-symbols-rounded{font-size:19px;color:var(--tk-open)}.issue-resolved .issue-problem>.material-symbols-rounded{color:var(--tk-done)}
.issue-problem strong{display:block;font-size:14px}.issue-problem small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.issue-card .meta{margin:0;color:var(--muted);font-size:12px}
.issue-card .card-open-action{color:var(--tk-blue);font-weight:600}
.record-foot{display:flex;justify-content:space-between;gap:10px;background:var(--tk-field);border-radius:12px;padding:8px 12px;font-size:12px}
.record-foot span{color:var(--muted);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill-soft{background:var(--tk-blue-soft)!important;color:var(--tk-blue)!important;border-color:transparent!important;border-radius:999px!important}

/* Incident detail */
/* Incident detail */
.issue-detail-wrap{display:flex;flex-direction:column;gap:16px}
.issue-head{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.issue-head .tone-avatar{width:48px;height:48px;flex:0 0 48px;font-size:19px;font-weight:700}
.issue-head>div{flex:1;min-width:0;display:grid;gap:2px}
.issue-head strong{font-size:20px;font-weight:750;color:var(--text);line-height:1.2}
.issue-head small{color:var(--muted);font-size:13px}
.issue-error{border-radius:16px;padding:18px 20px;background:var(--tk-open-bg);border:1px solid color-mix(in srgb,var(--tk-open) 25%,transparent);display:flex;flex-direction:column;gap:10px}
.issue-error.is-resolved{background:var(--tk-done-bg);border-color:color-mix(in srgb,var(--tk-done) 25%,transparent)}
.issue-error-head{display:flex;align-items:center;gap:10px}
.issue-error-head .material-symbols-rounded{font-size:22px;color:var(--tk-open)}
.issue-error.is-resolved .issue-error-head .material-symbols-rounded{color:var(--tk-done)}
.issue-error strong{color:var(--tk-open);font-size:16px;font-weight:750}
.issue-error.is-resolved strong{color:var(--tk-done)}
.issue-error p{margin:0;color:var(--text);line-height:1.55;font-size:14px;user-select:text}
.issue-facts-strip{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px}
.issue-fact-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:8px;background:color-mix(in srgb,var(--surface) 80%,transparent);color:var(--text-soft);font-size:12px;font-weight:550}
.issue-fact-chip .material-symbols-rounded{font-size:15px;color:var(--muted)}
.issue-diagnosis-card{padding:16px 18px;border-radius:14px;background:var(--surface-subtle);border:1px solid var(--line);border-left:4px solid var(--accent);display:flex;flex-direction:column;gap:8px}
.issue-diagnosis-header{display:flex;align-items:center;gap:8px;color:var(--accent);font-size:13.5px;font-weight:750}
.issue-diagnosis-header .material-symbols-rounded{font-size:18px}
.issue-diagnosis-card p{margin:0;font-size:13.5px;line-height:1.55;color:var(--text);white-space:pre-line}
.issue-fix{white-space:pre-line}
.issue-rows{margin-top:14px;display:grid;gap:10px}
.issue-kv{display:grid;gap:1px}.issue-kv span{color:var(--muted);font-size:12.5px}.issue-kv strong{font-weight:600}
.issue-tech-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);margin-top:10px}
.issue-tech-summary{padding:14px 18px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--text-soft);user-select:none;transition:background .15s}
.issue-tech-summary:hover{background:var(--surface-hover)}
.issue-tech-summary .material-symbols-rounded{font-size:18px;color:var(--muted)}
.issue-tech{margin:0;padding:16px;background:#0d1626;color:#d6e2f5;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow-y:auto;border-top:1px solid var(--line)}
.issue-tech-toggle{margin-top:14px}
.issue-tech-toggle summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}
@media(max-width:560px){.ws-stat{padding:14px}.ws-stat .stat-value{font-size:24px}}

/* Page loading: a spinner near the top of the content instead of a progress line */
.page-spinner{width:34px;height:34px;margin:28px auto 0;border:3px solid var(--line);border-top-color:var(--tk-blue);border-radius:50%;animation:spin .8s linear infinite}
@media(prefers-reduced-motion:reduce){.page-spinner{animation-duration:2.4s}}

/* Settings: account card, segmented theme, grouped rows */
.settings-page{width:100%}.settings-page .settings-theme{max-width:520px}
.settings-card{background:var(--surface);border:1px solid var(--tk-hairline);border-radius:18px}
.settings-account{display:flex;align-items:center;gap:14px;padding:16px}.settings-account>div{flex:1;min-width:0}
.settings-account .tone-avatar{width:52px;height:52px;flex-basis:52px}
.settings-account strong{display:block;font-size:17px}.settings-account small{color:var(--muted)}
.settings-label{margin:22px 0 8px 4px;color:var(--muted);font-size:13px}
.settings-hint{margin:6px 0 0 4px;color:var(--muted);font-size:12px}
.settings-theme{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;background:var(--tk-field);border-radius:14px}
.settings-theme button{display:grid;justify-items:center;gap:2px;border:0;background:transparent;border-radius:11px;padding:10px;color:var(--muted);font-weight:600}
.settings-theme button.active{background:var(--surface);color:var(--tk-blue);box-shadow:var(--shadow-xs)}
[data-theme="dark"] .settings-theme button.active{background:#2a3441}
.settings-list{overflow:hidden}
.settings-row{width:100%;display:flex;align-items:center;gap:14px;padding:14px 16px;border:0;background:transparent;color:var(--text);text-align:left}
.settings-row+.settings-row{border-top:1px solid var(--tk-hairline)}
button.settings-row:hover{background:var(--tk-field)}
.settings-row>.material-symbols-rounded:first-child{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--tk-blue-soft);color:var(--tk-blue)}
.settings-row>div{flex:1;min-width:0}.settings-row strong{display:block;font-weight:600}.settings-row small{color:var(--muted)}
.settings-row .row-chevron{color:var(--muted)}
.settings-row.danger strong{color:var(--danger)}.settings-row.danger>.material-symbols-rounded:first-child{background:var(--danger-soft);color:var(--danger)}

/* Splash-screen blue as the single accent in both themes (web sidebar/top bar unchanged by design) */
:root{--brand:#2e6bf6;--brand-hover:#1b4fd8;--brand-soft:#e9f0ff;--on-brand:#fff}
[data-theme="dark"]{--brand:#4a86ff;--brand-hover:#6b97ff;--brand-soft:#1c2a4a;--on-brand:#fff;
  --tk-blue:#4a86ff;--tk-blue-fill:#2e6bf6;--chat-out:#2e6bf6;--tk-grad:linear-gradient(135deg,#4a86ff,#1b4fd8)}

/* Ticket detail tabs + panels: one-line icon tabs, soft cards, pills */
.ticket-modal .ticket-detail-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.ticket-modal .ticket-detail-tabs button{display:grid;justify-items:center;gap:2px;padding:8px 4px;min-width:0;white-space:nowrap;font-size:clamp(11px,2.8vw,13px)}
.ticket-modal .ticket-detail-tabs button .material-symbols-rounded{font-size:19px}
.ticket-modal .subtask-row{background:var(--surface);border:1px solid var(--tk-hairline);border-radius:16px;padding:14px 16px;gap:12px}
.ticket-modal .subtask-row strong{font-size:15px}.ticket-modal .subtask-row small{color:var(--muted)}
.ticket-modal .subtask-row .btn{border-radius:999px;background:var(--tk-blue-soft);color:var(--tk-blue);border-color:transparent}
.ticket-modal .subtask-row .btn-success{background:var(--tk-blue-fill);color:#fff}
.ticket-modal .subtask-row .badge.completed{background:var(--tk-done-bg);color:var(--tk-done);border-color:transparent;border-radius:999px}
.ticket-modal .update-card{border:1px solid var(--tk-hairline);border-radius:16px;box-shadow:none;padding:14px 16px}
.ticket-modal .update-card-head{display:flex;align-items:center;gap:10px}
.ticket-modal .update-card-head .tone-avatar{width:34px;height:34px;flex-basis:34px;font-size:14px}
.update-author{flex:1;min-width:0}.update-author strong{display:block}.update-author small{color:var(--muted);font-size:12px}
.ticket-modal .update-card-head .btn-danger{border-radius:50%;background:var(--tk-open-bg);color:var(--tk-open);border:0}
.ticket-modal .attachment-tile{border-radius:14px;border:1px solid var(--tk-hairline);background:var(--tk-field)}
.ticket-modal .ticket-update-composer textarea{background:var(--tk-field);border-color:transparent;border-radius:12px}
.ticket-modal .ticket-update-composer .ticket-update-actions{border:0;background:transparent;padding:8px 0 0;justify-content:flex-start}
.ticket-modal .ticket-update-composer .btn{border-radius:999px}

/* Ticket created confirmation */
.tc-overlay{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:rgba(0,0,0,.55);animation:tc-fade .18s ease-out both}
.tc-overlay.leaving{animation:tc-fade-out .22s ease-in both}
.tc-card{width:min(300px,calc(100vw - 32px));padding:28px 24px 24px;border-radius:24px;background:var(--surface);color:var(--text);text-align:center;box-shadow:var(--shadow-lg);animation:tc-card .32s cubic-bezier(.34,1.56,.64,1) both}
.tc-overlay.leaving .tc-card{transform:scale(.94)}
.tc-stage{position:relative;width:200px;height:130px;margin:0 auto}
.tc-ticket{position:absolute;left:25px;top:19px;width:150px;height:92px;border-radius:16px;background:linear-gradient(135deg,#4a86ff,#1b4fd8);color:#fff;display:flex;flex-direction:column;justify-content:center;gap:6px;padding-left:18px;box-shadow:0 10px 20px rgba(46,107,246,.35);animation:tc-print .52s .12s cubic-bezier(.34,1.3,.64,1) both}
.tc-ticket strong{font-size:15px}
.tc-ticket:before,.tc-ticket:after{content:"";position:absolute;top:37px;width:18px;height:18px;border-radius:50%;background:var(--surface)}
.tc-ticket:before{left:-9px}.tc-ticket:after{right:-9px}

/* Customer portal: distinct blue header (main app's brand blue), stat tones */
.customer-shell{background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 6%,var(--bg)) 0,var(--bg) 260px)}
.customer-topbar{background:var(--brand)!important;border-bottom:0;box-shadow:0 2px 16px color-mix(in srgb,var(--brand) 35%,transparent)}
.customer-topbar .brand-logo{background:#fff}
.customer-topbar .btn-primary{background:var(--on-brand);border-color:var(--on-brand);color:var(--brand)}
.customer-topbar .btn-primary:hover{background:color-mix(in srgb,var(--on-brand) 88%,var(--brand))}
.customer-topbar .btn-icon{background:color-mix(in srgb,var(--on-brand) 16%,transparent);border-color:transparent;color:var(--on-brand)}
.customer-topbar .btn-icon:hover{background:color-mix(in srgb,var(--on-brand) 28%,transparent)}
.stat-icon-warning{background:var(--warning-soft);color:var(--warning)}
.stat-icon-accent{background:var(--accent-soft);color:var(--accent)}
.stat-icon-success{background:var(--success-soft);color:var(--success)}
.tc-check{position:absolute;right:14px;top:6px;width:46px;height:46px;border-radius:50%;background:#16a34a;color:#fff;display:grid;place-items:center;box-shadow:0 6px 14px rgba(0,0,0,.2);animation:tc-stamp .36s .56s cubic-bezier(.34,2,.64,1) both}
.tc-check .material-symbols-rounded{font-size:26px;font-weight:700}
.tc-burst{position:absolute;inset:0}
.tc-burst i{position:absolute;left:19px;top:19px;width:7px;height:7px;border-radius:50%;animation:tc-dot .62s .56s ease-out both}
.tc-burst i:nth-child(1){background:#4f7bf7}.tc-burst i:nth-child(2){background:#8b5cf6}.tc-burst i:nth-child(3){background:#ec4899}.tc-burst i:nth-child(4){background:#f59e0b}
.tc-burst i:nth-child(5){background:#10b981}.tc-burst i:nth-child(6){background:#06b6d4}.tc-burst i:nth-child(7){background:#ef6c4d}.tc-burst i:nth-child(8){background:#2e6bf6}
.tc-card h3{margin:14px 0 4px;font-size:20px;animation:tc-rise .32s .64s ease-out both}
.tc-card p{margin:0;color:var(--muted);font-size:14px;animation:tc-rise .32s .72s ease-out both}
@keyframes tc-fade{from{opacity:0}to{opacity:1}}
@keyframes tc-fade-out{to{opacity:0}}
@keyframes tc-card{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
@keyframes tc-print{from{opacity:0;transform:translateY(40px) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes tc-stamp{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes tc-dot{from{transform:rotate(var(--a)) translateX(0);opacity:1}to{transform:rotate(var(--a)) translateX(var(--d));opacity:0}}
@keyframes tc-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.tc-overlay *,.tc-overlay{animation-duration:.01s!important;animation-delay:0s!important}}
/* Completed variant: ticket turns green as the check stamps on */
.tc-completed .tc-ticket{animation:tc-print .52s .12s cubic-bezier(.34,1.3,.64,1) both,tc-go-green .3s .56s ease-out forwards}
/* Hue shift keeps white text/notches intact while the blue gradient becomes green */
@keyframes tc-go-green{to{filter:hue-rotate(-68deg) saturate(.9)}}

/* First-paint boot splash: same brand moment as the Android/iOS launch animation
   (blue gradient, spring-in tile, pulsing rings, rising title) so opening the web
   app feels like the same product. Pure CSS so it plays before any JS runs; a tiny
   script call fades it out once the real screen underneath is ready. */
.boot-splash{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(315deg,#4a86ff,#1b4fd8);color:#fff;text-align:center;transition:opacity .32s ease,transform .32s ease}
.boot-splash.leaving{opacity:0;transform:scale(1.06);pointer-events:none}
.boot-rings{position:absolute;width:120px;height:120px}
.boot-rings span{position:absolute;inset:0;border:2px solid rgba(255,255,255,.5);border-radius:50%;opacity:0;animation:boot-pulse 1.8s ease-out infinite}
.boot-rings span:nth-child(2){animation-delay:.7s}
.boot-tile{width:112px;height:112px;border-radius:30px;background:#fff;display:grid;place-items:center;box-shadow:0 12px 32px rgba(9,28,42,.28);opacity:0;transform:scale(.5);animation:boot-tile-in .55s .05s cubic-bezier(.34,1.56,.64,1) forwards}
.boot-tile img{width:66px;height:66px;object-fit:contain}
.boot-title{margin:22px 0 0;font-size:23px;font-weight:800;letter-spacing:-.01em;opacity:0;transform:translateY(16px);animation:boot-rise .42s ease-out .5s forwards}
.boot-subtitle{margin:5px 0 0;font-size:13px;color:rgba(255,255,255,.85);opacity:0;transform:translateY(16px);animation:boot-rise .42s ease-out .62s forwards}
@keyframes boot-tile-in{to{opacity:1;transform:scale(1)}}
@keyframes boot-rise{to{opacity:1;transform:translateY(0)}}
@keyframes boot-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}
@media(prefers-reduced-motion:reduce){.boot-tile,.boot-title,.boot-subtitle{animation:none;opacity:1;transform:none}.boot-rings{display:none}.boot-splash{transition:opacity .12s linear}.boot-splash.leaving{transform:none}}
.section-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
/* Kanban */
.kb-s-idea,.kb-s-todo{--kb:#4f7bf7}.kb-s-backlog{--kb:#94a3b8}.kb-s-in_progress{--kb:#f59e0b}.kb-s-paused{--kb:#ec4899}.kb-s-review{--kb:#8b5cf6}.kb-s-done{--kb:#10b981}.kb-s-cancelled{--kb:#ef4444}
.kb-p-low{--kp:#10b981}.kb-p-medium{--kp:#f59e0b}.kb-p-high{--kp:#f97316}.kb-p-critical{--kp:#ef4444}
.kb-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}.kb-head h2{margin:0;font-size:24px;letter-spacing:-.02em}.kb-head p{margin:4px 0 0;color:var(--muted);font-size:13px}
.kanban-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(272px,1fr);gap:14px;overflow-x:auto;padding:2px 2px 14px;align-items:start;scroll-behavior:smooth}
.kanban-column{display:flex;flex-direction:column;max-height:calc(100dvh - 230px);border-radius:16px;background:var(--surface-subtle);border:1px solid var(--line);transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}
.kanban-column header{display:flex;align-items:center;gap:8px;padding:14px 14px 10px;font-size:13px}.kanban-column header strong{font-weight:650}
.kb-dot{width:8px;height:8px;border-radius:50%;background:var(--kb,var(--kp));flex:none}.kanban-column header .kb-dot{box-shadow:0 0 0 4px color-mix(in srgb,var(--kb) 18%,transparent)}
.kb-count{margin-left:auto;min-width:24px;padding:2px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.kanban-cards{display:grid;gap:10px;padding:2px 10px 12px;overflow-y:auto;min-height:90px;align-content:start}
.kanban-column.drop-target{background:color-mix(in srgb,var(--kb) 9%,var(--surface-subtle));border-color:color-mix(in srgb,var(--kb) 55%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--kb) 35%,transparent)}
.kanban-card{position:relative;display:grid;gap:8px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 1px 2px rgba(15,35,50,.05);cursor:grab;text-align:left;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.kanban-card:before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--kb);opacity:.85}
.kanban-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(15,35,50,.35);border-color:var(--line-strong)}
.kanban-card:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 40%,transparent);outline-offset:2px}
.kanban-card.dragging{opacity:.5;transform:rotate(1.5deg) scale(.98);cursor:grabbing}
.kanban-card h3{margin:0;font-size:14px;font-weight:650;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kanban-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kb-card-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kb-card-cover{display:block;width:100%;height:120px;object-fit:cover;border-radius:8px;background:var(--surface-subtle)}
.kb-attach-count{display:inline-flex;align-items:center;gap:2px}.kb-attach-count .material-symbols-rounded{font-size:14px}
.kb-attach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}.kb-attach-grid:empty{display:none}
.kb-attach-tile{position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:10px;background:var(--surface-subtle);overflow:hidden}
.kb-attach-tile>a{display:grid;place-items:center;align-content:center;gap:4px;width:100%;height:100%;padding:8px;color:var(--text-soft);text-decoration:none;text-align:center}
.kb-attach-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kb-attach-name{font-size:11px;font-weight:600;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kb-attach-remove{position:absolute;top:4px;right:4px;width:24px;height:24px;border:0;border-radius:50%;background:rgba(10,20,30,.72);color:#fff;font-size:12px;cursor:pointer}
.kb-attach-add{justify-self:start;margin-top:8px}
.kb-combo{position:relative}.kb-combo-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;cursor:pointer}
.kb-combo-pop{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow-lg)}
.kb-combo-list{display:grid;max-height:240px;overflow-y:auto;margin-top:6px}
.kb-combo-option{padding:9px 10px;border:0;border-radius:8px;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.kb-combo-option:hover,.kb-combo-option:focus-visible{background:var(--surface-subtle);outline:none}.kb-combo-option[aria-selected="true"]{color:var(--brand);font-weight:650}
.kb-combo-empty{padding:12px 10px;color:var(--muted);font-size:13px}
.kb-priority{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 8px;border-radius:999px;background:color-mix(in srgb,var(--kp) 12%,transparent);color:color-mix(in srgb,var(--kp) 80%,var(--text));font-size:11px;font-weight:650}
.kb-priority .kb-dot{width:6px;height:6px;background:var(--kp)}
.kb-tag{padding:3px 8px;border-radius:6px;background:var(--surface-subtle);border:1px solid var(--line);color:var(--text-soft);font-size:11px;font-weight:600}
.kb-status{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--kb) 14%,transparent);color:color-mix(in srgb,var(--kb) 80%,var(--text));font-size:11px;font-weight:700}
.kb-progress-row{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}.kb-muted{font-weight:500}
.kb-bar{flex:1;height:6px;border-radius:999px;background:color-mix(in srgb,var(--line) 80%,transparent);overflow:hidden}.kb-bar i{display:block;height:100%;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,#34d399,#10b981)}
.kanban-card footer{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px}.kanban-card footer small{margin-left:auto}
.kb-avatar{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font-size:10px;font-weight:700;letter-spacing:.02em;flex:none;box-shadow:0 0 0 2px var(--surface)}

.kb-empty{display:grid;justify-items:center;gap:2px;padding:18px 10px 16px;border:1.5px dashed var(--line);border-radius:12px;color:var(--muted);text-align:center}
.kb-empty svg{width:78px;height:52px;margin-bottom:6px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.55}.kb-empty .kb-empty-front{fill:var(--surface)}
.kb-empty span{font-size:12px;font-weight:650;color:var(--text-soft)}.kb-empty small{font-size:11px}
.kanban-column.drop-target .kb-empty-arrow{animation:kb-nudge .8s ease-in-out infinite}
.kb-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;padding:6px 10px 6px 6px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-weight:600;font-size:13px;cursor:pointer;transition:color .15s,background .15s}.kb-back:hover{color:var(--text);background:var(--surface-subtle)}.kb-back .material-symbols-rounded{font-size:18px;transition:transform .15s}.kb-back:hover .material-symbols-rounded{transform:translateX(-3px)}
.kb-project-head{align-items:stretch;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-xs)}
.kb-project-title{flex:1 1 360px;display:grid;gap:8px;align-content:start}.kb-project-title h2{font-size:26px}.kb-project-title p{max-width:70ch;margin:0;line-height:1.5}
.kb-tags{display:flex;gap:6px;flex-wrap:wrap}
.kb-project-meta{display:flex;align-items:center;gap:8px;color:var(--text-soft);font-size:13px;font-weight:600}.kb-sep{width:4px;height:4px;border-radius:50%;background:var(--line-strong)}
.kb-project-side{display:grid;gap:14px;align-content:space-between;min-width:260px}
.kb-summary{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:4px 10px}.kb-summary strong{font-size:28px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.kb-summary span{color:var(--muted);font-size:12px}.kb-summary .kb-bar{grid-column:1/-1}.kb-bar-lg{height:8px}
.kanban-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* Settings > Directory: filter buttons, a second row for sub-lists, search + Add, then the rows. */
.settings-directory-head{display:grid;gap:8px}.settings-directory .segmented{width:100%}.settings-directory .segmented[hidden]{display:none}
.settings-directory-tools{display:flex;gap:8px;align-items:center;margin:12px 0}.settings-directory-tools .search-shell{flex:1;min-width:0}
/* Dashboard "Needs attention": same card as the My tickets / My subtasks columns. */
.attention-section{margin:25px 0 0;padding:20px;border:1px solid var(--line);border-radius:17px;background:var(--surface);box-shadow:var(--shadow-xs)}.attention-section .section-heading{margin:0 0 14px}
/* More > Templates: the rendered PDF preview inside a wide modal. */
.template-preview{display:block;width:100%;height:min(72vh,820px);border:1px solid var(--line);border-radius:10px;background:var(--surface-subtle)}
/* Generate report: the dropdown and date box sit level at the same height. */
.report-form .field{margin-bottom:0}.report-form select,.report-form .input{height:48px;min-height:48px}
.kb-filter{width:auto;min-width:170px}.kb-search{flex:1 1 240px;min-width:200px}.kb-search .input{min-height:40px}.kb-avatars{display:flex}.kb-avatars .kb-avatar+.kb-avatar{margin-left:-6px}
/* Motion: cards rise in with a short stagger when a view opens; bars fill; moved cards land with a small pop. */
.kb-enter .kanban-card{animation:kb-rise .42s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 35ms)}
.kb-enter .kanban-column{animation:kb-fade .35s ease both}
.kb-enter .kb-bar i{animation:kb-fill .9s cubic-bezier(.2,.8,.2,1) .15s both}
.kb-enter .kb-project-head{animation:kb-rise .4s cubic-bezier(.2,.8,.2,1) both}
.kanban-card.kb-landed{animation:kb-land .45s cubic-bezier(.3,1.4,.5,1)}
@keyframes kb-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes kb-fade{from{opacity:0}to{opacity:1}}
@keyframes kb-fill{from{width:0}to{width:var(--w)}}
@keyframes kb-land{0%{transform:scale(.94);box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 40%,transparent)}60%{transform:scale(1.02)}100%{transform:none;box-shadow:0 0 0 8px transparent}}
@keyframes kb-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media(prefers-reduced-motion:reduce){.kb-enter .kanban-card,.kb-enter .kanban-column,.kb-enter .kb-bar i,.kb-enter .kb-project-head,.kanban-card.kb-landed,.kanban-column.drop-target .kb-empty-arrow{animation:none}.kanban-card,.kanban-card:hover{transition:none;transform:none}}
@media(max-width:720px){.kanban-board{grid-auto-columns:86%;scroll-snap-type:x mandatory}.kanban-column{scroll-snap-align:start;max-height:none}.kb-project-side{min-width:0;width:100%}.kanban-actions{justify-content:stretch}.kanban-actions .btn{flex:1}}
/* Collapsible sidebar (desktop): icons only, remembered per browser */
.nav-collapse{margin-top:12px;width:100%;opacity:.8}.nav-collapse:hover{opacity:1}
@media(min-width:721px){
.app-shell.nav-collapsed{grid-template-columns:84px minmax(0,1fr)}
.app-shell.nav-collapsed .sidebar{padding-inline:12px}
.app-shell.nav-collapsed .side-brand span,.app-shell.nav-collapsed .nav-section-label,.app-shell.nav-collapsed .nav-label,.app-shell.nav-collapsed .side-user .user-copy{display:none}
.app-shell.nav-collapsed .side-brand{justify-content:center;padding-inline:0}.app-shell.nav-collapsed .side-brand-logo{width:52px;height:42px}
.app-shell.nav-collapsed .nav-item{justify-content:center;padding:12px}.app-shell.nav-collapsed .nav-item:hover{transform:none}.app-shell.nav-collapsed .nav-item.active:before{left:-12px}
.app-shell.nav-collapsed .side-user{display:flex;justify-content:center;padding-inline:0}
}
@media(max-width:1100px){.nav-collapse{display:none}}
/* Kanban fills the viewport: full width, board stretches to the bottom, columns scroll internally. */
.main:has(#kanban-root){height:100dvh;display:flex;flex-direction:column}
.main:has(#kanban-root) .content{flex:1;min-height:0;height:auto;width:100%;max-width:none;padding-bottom:18px;overflow:hidden;display:flex;flex-direction:column}
#kanban-root{flex:1;min-height:0;display:flex;flex-direction:column}
#kanban-root .kb-head{margin-bottom:14px}#kanban-root .kb-project-head{margin-bottom:14px;flex:none}
#kanban-root .kanban-board{flex:1;min-height:0;align-items:stretch;padding-bottom:8px}
#kanban-root .kanban-column{max-height:none;min-height:0}
#kanban-root .kanban-cards{flex:1;min-height:0}
@media(max-width:720px){.main:has(#kanban-root) .content{padding-bottom:calc(78px + env(safe-area-inset-bottom))}#kanban-root .kb-project-head{max-height:40dvh;overflow:auto}}
/* Calls (top-bar phone button + Calls page; Call Log App parity) */
.calls-button{position:relative}.calls-badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#ef4444;color:#fff;font-size:10px;font-weight:800;display:none;place-items:center;box-shadow:0 0 0 2px var(--surface);font-variant-numeric:tabular-nums;animation:calls-pop .35s cubic-bezier(.3,1.5,.5,1)}
@keyframes calls-pop{from{transform:scale(.4)}to{transform:none}}
.calls-head h2{margin:0;font-size:24px;letter-spacing:-.02em}.calls-head p{margin:4px 0 16px;color:var(--muted);font-size:13px}.calls-head strong{color:#d97706}
.calls-layout{display:grid;grid-template-columns:minmax(320px,440px) minmax(0,1fr);gap:22px;align-items:start}
.calls-card{position:sticky;top:96px;padding:20px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--shadow-xs)}
.calls-card-top{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}.calls-card .segmented{min-height:0}
.calls-day{margin:18px 0 0;color:var(--muted);font-size:13px;font-weight:600}
.calls-total{display:flex;align-items:baseline;gap:8px}.calls-total strong{font-size:52px;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.calls-total span{color:var(--muted)}
.calls-delta{margin-left:auto;padding:4px 10px;border-radius:999px;font-style:normal;font-size:11px;font-weight:700;color:var(--muted);background:var(--surface-subtle)}.calls-delta.up{color:#10b981;background:color-mix(in srgb,#10b981 12%,transparent)}.calls-delta.down{color:#ef4444;background:color-mix(in srgb,#ef4444 12%,transparent)}
.calls-chart{margin-top:14px}.calls-plot{position:relative;height:130px;margin-top:28px}.calls-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.calls-highlight{position:absolute;top:-26px;bottom:-4px;border-radius:12px;background:var(--surface-subtle);transition:left .3s cubic-bezier(.3,1.2,.5,1)}
.calls-bar{transform-box:fill-box;transform-origin:bottom;animation:calls-grow .65s cubic-bezier(.2,.8,.2,1) both;opacity:.32;transition:opacity .2s}.calls-bar.on{opacity:1}.calls-bar.answered{fill:#10b981}.calls-bar.missed{fill:#ef4444}.calls-bar-empty{fill:var(--line)}
@keyframes calls-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.calls-bubble{position:absolute;transform:translate(-50%,-8px);min-width:22px;padding:2px 7px;border-radius:999px;background:var(--text);color:var(--surface);font-size:11px;font-weight:700;text-align:center;transition:left .3s cubic-bezier(.3,1.2,.5,1),bottom .3s ease}
.calls-hits{position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);margin-top:-130px;height:152px}
.calls-hit{display:flex;align-items:flex-end;justify-content:center;border:0;background:transparent;color:var(--muted);font-size:11px;cursor:pointer;padding:0}.calls-hit.on{color:var(--text);font-weight:700}.calls-hit:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:8px}
.calls-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}.calls-stats strong{display:block;font-size:20px;font-variant-numeric:tabular-nums}.calls-stats span{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:12px}
.calls-dot{width:6px;height:6px;border-radius:50%}.calls-dot.answered{background:#10b981}.calls-dot.missed{background:#ef4444}
.calls-history-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}.calls-history-top h3{margin:0;font-size:22px}
.calls-group{margin:22px 4px 8px;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.call-detail-number{margin:-4px 0 6px;color:var(--muted)}
.calls-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}.calls-pager span{color:var(--muted);font-size:13px}.calls-pager .btn:disabled{opacity:.4;cursor:default}
.calls-group-card{border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden}
.calls-row{width:100%;display:flex;align-items:center;gap:12px;padding:12px 16px;border:0;border-top:1px solid var(--line);background:transparent;color:var(--text);text-align:left;cursor:pointer;transition:background .15s}.calls-row:first-child{border-top:0}.calls-row:hover{background:var(--surface-hover)}
.calls-row-main{flex:1;min-width:0}.calls-row-main strong,.calls-row-main small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.calls-row-main small{color:var(--muted);font-size:12px;margin-top:2px}.calls-row-main small.missed{color:#ef4444}
.calls-row-side{display:grid;justify-items:end;gap:4px}.calls-row-side small{color:var(--muted);font-size:12px}
.calls-avatar{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--surface-subtle);font-weight:700;font-size:13px}.calls-avatar.answered{color:#10b981;background:color-mix(in srgb,#10b981 12%,transparent)}.calls-avatar.missed{color:#ef4444;background:color-mix(in srgb,#ef4444 12%,transparent)}.calls-avatar.lg{width:76px;height:76px;font-size:24px;box-shadow:0 0 0 14px color-mix(in srgb,currentColor 8%,transparent)}
.calls-pill{padding:2px 8px;border-radius:999px;font-size:10px;font-weight:800}.calls-pill.linked{color:#10b981;background:color-mix(in srgb,#10b981 13%,transparent)}.calls-pill.open{color:#d97706;background:color-mix(in srgb,#f59e0b 15%,transparent)}.calls-pill.personal{color:var(--muted);background:var(--surface-subtle)}
.call-detail{display:grid;justify-items:center;gap:10px;text-align:center}.call-detail h2{margin:12px 0 0;font-size:26px}.call-detail .detail-grid{width:100%;text-align:left;margin-top:6px}
.calls-outcome{padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700}.calls-outcome.answered{color:#10b981;background:color-mix(in srgb,#10b981 13%,transparent)}.calls-outcome.missed{color:#ef4444;background:color-mix(in srgb,#ef4444 13%,transparent)}
.call-heroes{width:100%;display:grid;grid-template-columns:repeat(3,1fr);padding:14px 0;border-radius:16px;background:var(--surface-subtle)}.call-heroes strong{display:block;font-size:17px}.call-heroes span{color:var(--muted);font-size:12px}
@media(max-width:980px){.calls-layout{grid-template-columns:1fr}.calls-card{position:static}}
@media(prefers-reduced-motion:reduce){.calls-bar,.calls-badge{animation:none}.calls-highlight,.calls-bubble{transition:none}}
.devices-summary{margin:0 0 14px;color:var(--muted)}.devices-list{display:grid;gap:8px}.device-row{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-subtle)}.device-dot{flex:0 0 10px;height:10px;border-radius:50%;background:var(--muted)}.device-dot.is-online{background:var(--success)}.device-main,.device-state{display:grid;gap:2px}.device-main{flex:1;min-width:0}.device-main small,.device-state small{color:var(--muted);font-size:12px}.device-state{text-align:right}.device-state strong{font-size:13px;color:var(--muted)}.device-state strong.is-online{color:var(--success)}.device-details summary{cursor:pointer;list-style:none}.device-details summary::-webkit-details-marker{display:none}.device-details[open] summary{border-bottom-left-radius:0;border-bottom-right-radius:0}.device-details dl{display:grid;grid-template-columns:minmax(110px,auto) 1fr;gap:4px 12px;margin:0;padding:10px 14px;border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;font-size:12px}.device-details dt{color:var(--muted)}.device-details dd{margin:0;overflow-wrap:anywhere}
.issue-facts{display:block;margin-top:8px;color:var(--muted);font-size:12px}
.issue-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px;margin-top:16px}
.issue-section{padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-xs);display:flex;flex-direction:column;gap:10px}
.issue-section.span-all{grid-column:1/-1}
.issue-section h3{margin:0 0 4px;font-size:14px;font-weight:750;color:var(--text);display:flex;align-items:center;gap:8px}
.issue-section p{margin:0;line-height:1.55;font-size:13.5px;color:var(--text)}
.issue-dl{display:grid;grid-template-columns:120px 1fr;gap:8px 14px;margin:0;align-items:baseline}
.issue-dl dt{color:var(--muted);font-size:12.5px;font-weight:500;text-align:left}
.issue-dl dd{margin:0;text-align:left;color:var(--text);font-size:13px;font-weight:600;overflow-wrap:anywhere;user-select:text}
.issue-map{margin-top:10px;width:100%;justify-content:center;min-height:38px}
.issue-card .issue-problem small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.issue-meta{flex-wrap:wrap;row-gap:4px}.issue-meta>span:not(.card-open-action){display:inline-flex;align-items:center;gap:4px;min-width:0}.issue-meta .material-symbols-rounded{font-size:15px}
/* More > API (ApiHealthScreen): 3D hero, endpoint sidebar, Swagger-style console */
.api-hero{margin-bottom:18px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.api-hero-panel{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"env servers run" "base base tally";gap:12px 16px;align-items:center}
.api-env{grid-area:env}.api-servers{grid-area:servers}.api-run-all{grid-area:run}.api-base{grid-area:base}.api-tally{grid-area:tally;justify-content:flex-end}
.api-servers{display:flex;flex-wrap:wrap;gap:8px}
.api-chip{min-height:36px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);font-weight:650;cursor:pointer;transition:transform .16s cubic-bezier(.22,1,.36,1),background .18s,color .18s}
.api-chip:hover{border-color:var(--brand)}.api-chip:active{transform:scale(.94)}.api-chip.active{background:var(--brand);border-color:var(--brand);color:var(--on-brand,#fff)}
.api-base{display:block;padding:8px 10px;border-radius:10px;background:var(--surface-subtle);color:var(--muted);font-size:12px;overflow-wrap:anywhere}.api-base.missing{color:var(--warning)}
.api-run-all{justify-content:center;min-height:44px}
.api-tally{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--muted)}.api-tally .good{color:var(--success);font-weight:700}.api-tally .bad{color:var(--danger);font-weight:700}
.api-workbench{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:16px;align-items:start}
.api-sidebar{position:sticky;top:90px;display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--surface);max-height:calc(100dvh - 120px)}
.api-app-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.api-app-tabs button{flex:0 0 auto;display:flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--muted);font-weight:650;cursor:pointer}
.api-app-tabs button small{padding:1px 6px;border-radius:999px;background:var(--surface-subtle);font-size:10px}
.api-app-tabs button.active{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.api-endpoints{display:flex;flex-direction:column;gap:2px;overflow:auto;min-height:0}
.api-endpoint{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:var(--text);text-align:left;cursor:pointer;transition:background .15s,transform .15s}
.api-endpoint:hover{background:var(--surface-hover);transform:translateX(3px)}.api-endpoint.active{background:var(--brand-soft)}
.api-endpoint-text{flex:1;min-width:0;display:grid}.api-endpoint-text strong{font:600 12.5px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}.api-endpoint-text small{color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.api-dot.busy{background:var(--brand);animation:ring-pulse 1s ease-out infinite}
.api-method{flex:0 0 auto;min-width:54px;padding:3px 0;border-radius:6px;font:700 10.5px/1.2 ui-monospace,Menlo,monospace;text-align:center;letter-spacing:.04em}
.m-get{background:color-mix(in srgb,var(--success) 15%,transparent);color:var(--success)}.m-post{background:color-mix(in srgb,var(--brand) 15%,transparent);color:var(--brand)}
.m-put,.m-patch{background:color-mix(in srgb,var(--warning) 18%,transparent);color:var(--warning)}.m-delete{background:color-mix(in srgb,var(--danger) 15%,transparent);color:var(--danger)}
.api-empty{padding:20px;color:var(--muted);text-align:center}
.api-console{display:flex;flex-direction:column;gap:14px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface);min-width:0;animation:rise .3s cubic-bezier(.22,1,.36,1) both}
.api-request-line{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--surface-subtle)}.api-request-line code{font-size:13.5px;overflow-wrap:anywhere}
.api-request-label{margin:-6px 0 0;color:var(--muted);font-size:13px}
.api-locked{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:12px;background:var(--warning-soft);color:var(--text)}.api-locked .material-symbols-rounded{color:var(--warning)}
.api-locked .link{border:0;background:none;padding:0;color:var(--brand);font-weight:700;cursor:pointer;text-decoration:underline}
.api-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.api-fields label{display:grid;gap:5px;font-size:12px;font-weight:650;color:var(--text-soft)}.api-fields label small{font-weight:500;color:var(--muted)}
.api-body-field{grid-column:1/-1}.api-body-field textarea{font:12.5px/1.5 ui-monospace,Menlo,monospace;resize:vertical}
.api-send-row{display:flex;align-items:center;gap:12px}.api-send-row small{color:var(--muted)}
.api-response{min-height:120px}
.api-placeholder,.api-waiting{display:flex;align-items:center;justify-content:center;gap:10px;min-height:120px;border:1px dashed var(--line);border-radius:12px;color:var(--muted)}
.api-spinner{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.api-response-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:10px;font-size:12px;color:var(--muted)}
.api-status{padding:4px 10px;border-radius:999px;font-weight:700;font-size:12px}.api-status.ok{background:var(--success-soft);color:var(--success)}.api-status.fail{background:var(--danger-soft);color:var(--danger)}
.api-response-tabs{margin-left:auto}.api-copy{min-height:34px}
.api-json{margin:0;max-height:520px;overflow:auto;padding:14px;border-radius:12px;background:#0d1626;color:#d6e2f5;font:12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.j-key{color:#8ab4ff}.j-str{color:#9be7b4}.j-num{color:#ffc27a}.j-lit{color:#f59ad1}.j-muted{color:#8a94a6}
.api-headers{display:grid;grid-template-columns:minmax(140px,30%) 1fr;gap:6px 14px;margin:0;font-size:12.5px}.api-headers dt{color:var(--muted);font-family:ui-monospace,Menlo,monospace}.api-headers dd{margin:0;overflow-wrap:anywhere}
@media(max-width:980px){.api-hero-panel{grid-template-columns:1fr;grid-template-areas:"env" "servers" "base" "tally" "run"}.api-env button{flex:1}.api-tally{justify-content:flex-start}.api-workbench{grid-template-columns:1fr}.api-sidebar{position:static;max-height:none}.api-endpoints{max-height:420px}}
@media(prefers-reduced-motion:reduce){.api-endpoint:hover{transform:none}.api-console{animation:none}}
/* More > Portals: tilting cards */
.portal-intro{margin:0 0 6px;color:var(--muted)}
.portal-group{margin-top:18px}.portal-customer{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:15px}.portal-customer small{padding:1px 8px;border-radius:999px;background:var(--surface-subtle);color:var(--muted);font-size:11px}
.portal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;perspective:900px}
.portal-card{position:relative;display:flex;align-items:center;gap:12px;min-height:72px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--brand) 14%,transparent),transparent 70%),var(--surface);color:var(--text);text-decoration:none;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .18s ease-out,border-color .2s,box-shadow .2s;animation:rise .45s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0) * 45ms)}
.portal-card:hover{border-color:color-mix(in srgb,var(--brand) 55%,var(--line));box-shadow:0 14px 34px -18px color-mix(in srgb,var(--brand) 70%,transparent)}
.portal-card:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 45%,transparent);outline-offset:2px}
.portal-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--brand-soft);color:var(--brand);transform:translateZ(24px)}
.portal-text{flex:1;min-width:0;display:grid;transform:translateZ(14px)}.portal-text small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.portal-open{color:var(--muted);transition:transform .2s,color .2s}.portal-card:hover .portal-open{color:var(--brand);transform:translate(3px,-3px)}
@media(prefers-reduced-motion:reduce){.portal-card{animation:none;transform:none}}
/* Notifications inbox: filter chips, day groups, kind colours, per-row mark read */
.notif-filters{display:flex;gap:8px;overflow-x:auto;padding:2px 0 14px;scrollbar-width:none}
.notif-chip{flex:0 0 auto;display:flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text-soft);font-weight:650;cursor:pointer;transition:background .18s,color .18s,transform .15s}
.notif-chip small{padding:0 6px;border-radius:999px;background:var(--surface-subtle);color:var(--muted);font-size:11px}
.notif-chip:active{transform:scale(.95)}.notif-chip.active{background:var(--brand);border-color:var(--brand);color:var(--on-brand,#fff)}.notif-chip.active small{background:rgba(255,255,255,.22);color:inherit}
.notif-group{margin-bottom:18px}.notif-group h3{position:sticky;top:74px;z-index:2;display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:6px 2px;background:var(--bg);color:var(--muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.notif-group h3 small{padding:0 6px;border-radius:999px;background:var(--surface-subtle);font-size:11px;letter-spacing:0}
.notif-list .notification-row,.notif-group .notification-row{display:flex;align-items:flex-start;width:100%;margin-bottom:8px;cursor:pointer;text-align:left;animation:rise .35s cubic-bezier(.22,1,.36,1) both;animation-delay:min(calc(var(--i,0) * 30ms),360ms);transition:transform .18s,box-shadow .18s,opacity .3s}
.notification-row:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}.notification-row:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 45%,transparent);outline-offset:2px}
.notification-row .notification-copy{flex:1;min-width:0;display:grid;gap:2px}
.notification-row small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notification-row.unread{border-color:color-mix(in srgb,var(--brand) 35%,var(--line))!important;background:color-mix(in srgb,var(--brand) 4%,var(--surface))!important}
.notification-row.marking{opacity:.45}
.kind-ticket .notification-icon{background:var(--tk-blue-soft);color:var(--tk-blue)}
.kind-incident .notification-icon{background:var(--danger-soft);color:var(--danger)}
.kind-chat .notification-icon{background:color-mix(in srgb,#8b5cf6 16%,transparent);color:#8b5cf6}
.kind-heating .notification-icon{background:var(--warning-soft);color:var(--warning)}
.kind-system .notification-icon{background:var(--surface-subtle);color:var(--muted)}
.notif-mark{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--muted);cursor:pointer;opacity:0;transition:opacity .15s,color .15s,border-color .15s}
.notification-row:hover .notif-mark,.notification-row:focus-within .notif-mark{opacity:1}.notif-mark:hover{color:var(--success);border-color:var(--success)}
@media(hover:none){.notif-mark{opacity:1}}
.notif-empty{display:grid;justify-items:center;gap:6px;padding:48px 16px;border:1px dashed var(--line);border-radius:16px;color:var(--muted);text-align:center}.notif-empty .material-symbols-rounded{font-size:40px;opacity:.6}.notif-empty strong{color:var(--text)}
@media(prefers-reduced-motion:reduce){.notif-list .notification-row,.notif-group .notification-row{animation:none}}

/* ─────────────────────────────────────────────────────────────────────────────
   Access Codes & Infrastructure Screen Refinement
   ───────────────────────────────────────────────────────────────────────────── */

/* Small button utilities and legacy endpoint row alignment */
.btn-sm{min-height:34px;padding:6px 12px;font-size:12px;border-radius:8px;font-weight:650;gap:6px}
.btn-sm.btn-icon{width:34px;height:34px;min-height:34px;padding:0;border-radius:8px}
.api-endpoint-list{display:flex;flex-direction:column;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.api-endpoint-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);transition:background .15s ease}
.api-endpoint-row:last-child{border-bottom:0}
.api-endpoint-row:hover{background:var(--surface-subtle)}
.api-path{font-size:14px;font-weight:650;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.api-status{font-size:12px;color:var(--muted);margin-top:3px}

/* Page Intro Actions */
.access-codes-intro{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.access-codes-intro .page-intro-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Stats summary strip */
.access-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:20px}
.access-stat-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-xs);transition:border-color .18s,transform .18s,box-shadow .18s}
.access-stat-card:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line));transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.access-stat-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--brand-soft);color:var(--brand);flex:0 0 auto}
.access-stat-icon .material-symbols-rounded{font-size:22px}
.access-stat-icon.success{background:var(--success-soft);color:var(--success)}
.access-stat-icon.warning{background:var(--warning-soft);color:var(--warning)}
.access-stat-icon.accent{background:var(--accent-soft);color:var(--accent)}
.access-stat-meta{display:grid;gap:2px;min-width:0}
.access-stat-meta strong{font-size:22px;font-weight:750;color:var(--text);line-height:1.2;letter-spacing:-.01em}
.access-stat-meta small{font-size:12px;color:var(--muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Toolbar: Search, Filters, View Modes */
.access-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-xs)}
.access-search-shell{flex:1 1 280px;min-width:220px}
.access-filters{display:flex;overflow-x:auto;scrollbar-width:none}
.access-toolbar-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.access-view-toggle .btn-icon-tab{width:38px;height:36px;padding:0;display:grid;place-items:center;border-radius:8px}
.access-view-toggle .btn-icon-tab .material-symbols-rounded{font-size:19px}

/* Grid layout & cards */
.access-codes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:18px}
.access-code-card{display:flex;flex-direction:column;justify-content:space-between;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-xs);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;position:relative}
.access-code-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand) 45%,var(--line));box-shadow:var(--shadow-sm)}
.access-code-card.is-inactive{opacity:.78;background:color-mix(in srgb,var(--surface) 90%,var(--surface-subtle))}
.access-code-card.is-inactive:hover{opacity:1}

/* Card Header */
.ac-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.ac-code-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid color-mix(in srgb,var(--brand) 30%,var(--line));border-radius:11px;background:color-mix(in srgb,var(--brand-soft) 60%,var(--surface));cursor:pointer;user-select:none;transition:background .15s,border-color .15s,box-shadow .15s}
.ac-code-pill:hover{background:var(--brand-soft);border-color:var(--brand);box-shadow:0 2px 10px color-mix(in srgb,var(--brand) 18%,transparent)}
.ac-code-pill .ac-key-icon{font-size:16px;color:var(--brand)}
.ac-code-pill .ac-code-num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;font-weight:750;letter-spacing:.08em;color:var(--brand)}
.ac-code-pill .ac-copy-btn{display:grid;place-items:center;width:24px;height:24px;margin-left:2px;border:0;background:transparent;color:var(--muted);border-radius:6px;transition:color .15s,background .15s}
.ac-code-pill:hover .ac-copy-btn{color:var(--brand);background:color-mix(in srgb,var(--brand) 14%,transparent)}
.ac-code-pill .ac-copy-btn .material-symbols-rounded{font-size:15px}

.ac-badges{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ac-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:650;letter-spacing:.02em}
.ac-badge-dot{width:6px;height:6px;border-radius:50%}
.ac-badge-active{background:var(--success-soft);color:var(--success)}
.ac-badge-active .ac-badge-dot{background:var(--success)}
.ac-badge-inactive{background:var(--surface-subtle);border:1px solid var(--line);color:var(--muted)}
.ac-badge-inactive .ac-badge-dot{background:var(--muted)}
.ac-badge-env{background:var(--brand-soft);color:var(--brand)}

/* Card Body */
.ac-card-body{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
.ac-company-row{display:flex;align-items:center;gap:12px}
.ac-company-row .tone-avatar{width:42px;height:42px;flex:0 0 42px;font-size:17px;font-weight:700}
.ac-company-text{flex:1;min-width:0;display:grid;gap:3px}
.ac-company-name{margin:0;font-size:16px;font-weight:750;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-dataserver{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:12px;font-weight:500}
.ac-dataserver .material-symbols-rounded{font-size:15px;color:var(--accent)}

.ac-server-box{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface-subtle);cursor:pointer;transition:border-color .15s,background .15s}
.ac-server-box:hover{border-color:var(--line-strong);background:color-mix(in srgb,var(--surface-hover) 70%,var(--surface))}
.ac-server-box .ac-server-icon{font-size:17px;color:var(--muted);flex:0 0 auto}
.ac-server-box .ac-server-url{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--text-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-server-box .ac-copy-url-btn{display:grid;place-items:center;width:24px;height:24px;border:0;background:transparent;color:var(--muted);border-radius:6px;transition:color .15s,background .15s}
.ac-server-box:hover .ac-copy-url-btn{color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,transparent)}
.ac-server-box .ac-copy-url-btn .material-symbols-rounded{font-size:15px}

/* Card Footer */
.ac-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.ac-status-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:9px;background:var(--surface-subtle);font-size:11.5px;font-weight:600;color:var(--muted);max-width:100%}
.ac-status-badge.online{background:var(--success-soft);color:var(--success)}
.ac-status-badge.offline{background:var(--danger-soft);color:var(--danger)}
.ac-status-badge.checking{background:var(--brand-soft);color:var(--brand)}
.ac-status-badge .ac-status-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-status-badge .api-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:currentColor}
.ac-status-badge.checking .api-dot{animation:pulse-dot 1.1s infinite ease-in-out}
@keyframes pulse-dot{0%,100%{transform:scale(.8);opacity:.5}50%{transform:scale(1.35);opacity:1}}

.ac-card-actions{display:flex;align-items:center;gap:7px;margin-left:auto;flex:0 0 auto}.ac-card-foot .ac-status-badge{min-width:0}
.ac-test-btn{display:inline-flex;align-items:center;gap:5px}
.ac-test-btn .material-symbols-rounded{font-size:16px}

/* Table View */
.access-code-table-wrap{border:1px solid var(--line);border-radius:18px;overflow:auto;background:var(--surface);box-shadow:var(--shadow-xs)}
.access-code-table{width:100%;min-width:760px;border-collapse:collapse;text-align:left;font-size:13px}
.access-code-table th{padding:12px 14px;white-space:nowrap;background:var(--surface-subtle);color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line)}
.access-code-table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--text)}
.access-code-table tr:last-child td{border-bottom:0}
.access-code-table .ac-badge{white-space:nowrap}.ac-status-stack{display:grid;justify-items:start;gap:6px}
.access-code-table tr:hover td{background:var(--surface-subtle)}

/* Modal Live Preview Card */
.ac-modal-preview{margin-bottom:20px;padding:16px;border:1px dashed var(--line-strong);border-radius:14px;background:var(--surface-subtle)}
.ac-modal-preview-title{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.ac-input-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important;font-size:18px!important;font-weight:750!important;letter-spacing:.12em!important;color:var(--brand)!important}

@media(max-width:768px){
  .access-codes-grid{grid-template-columns:1fr}
  .access-toolbar{flex-direction:column;align-items:stretch}
  .access-search-shell{width:100%}
  .access-toolbar-actions{margin-left:0;justify-content:space-between}
  .ac-card-foot{flex-direction:column;align-items:stretch;gap:10px}
  .ac-status-badge{max-width:100%}
  .ac-card-actions{justify-content:flex-end}
}

/* Dark mode: give every text field a visible edge so you can see where it starts and ends. */
[data-theme="dark"] :is(.input,select,textarea,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color])){border:1px solid #5b6d7e!important;background-color:#0f1821}
[data-theme="dark"] :is(.input,select,textarea,input):focus{border-color:var(--brand)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 30%,transparent)!important;outline:none}
/* Access codes: one plain table */
.access-summary{margin-left:auto;color:var(--text-soft);font-size:13px;font-weight:600;white-space:nowrap}
.access-code-table{min-width:680px;font-size:14px}
.access-code-table td strong{display:block;color:var(--text)}
.ac-sub{display:block;margin-top:2px;color:var(--text-soft);font-size:12.5px}
.ac-code{padding:4px 8px;border:0;border-radius:8px;background:var(--brand-soft);color:var(--brand);font:700 15px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
.ac-url{max-width:280px;padding:0;border:0;background:none;color:var(--text-soft);font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-url:hover,.ac-code:hover{text-decoration:underline}
.access-code-table .ac-status-badge{padding:0;background:none!important;color:var(--text-soft);font-size:12.5px}
.access-code-table .ac-status-badge.online{color:var(--success)}.access-code-table .ac-status-badge.offline{color:var(--danger)}
.ac-actions{text-align:right;white-space:nowrap}.ac-actions .btn{margin-left:6px}
@media(max-width:768px){.access-summary{margin-left:0}}
/* API: keep the app tabs and search at their natural height inside the sidebar column */
.api-sidebar>.api-app-tabs,.api-sidebar>.search-shell{flex:0 0 auto}
.api-app-tabs{flex-wrap:wrap;overflow:visible}
.api-app-tabs button{color:var(--text-soft)}
.api-endpoint-text small{color:var(--text-soft)}
/* Incident severity 1 (normal) to 5 (most severe) */
.sev-pill{margin-left:auto;margin-right:6px;font-variant-numeric:tabular-nums}
.sev-1{background:var(--surface-subtle);color:var(--text-soft)}
.sev-2{background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand)}
.sev-3{background:color-mix(in srgb,var(--warning) 18%,transparent);color:var(--warning)}
.sev-4{background:color-mix(in srgb,#f97316 20%,transparent);color:#f97316}
.sev-5{background:color-mix(in srgb,var(--danger) 22%,transparent);color:var(--danger)}
/* Kanban: Projects / Tasks switch, and the project a task belongs to on the Tasks view */
.kb-mode{margin-bottom:14px}
.kb-task-project{display:flex;align-items:center;gap:6px;margin-top:10px;padding-top:9px;border-top:1px solid var(--line);color:var(--text-soft);font-size:12px;font-weight:600;min-width:0}.kb-task-project span{font-size:16px;color:var(--muted)}
.kb-timer{display:inline-flex;align-items:center;gap:4px;margin-left:auto;padding:2px 8px;border-radius:999px;background:var(--line);color:var(--text-soft);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}.kb-timer .material-symbols-rounded{font-size:14px}
.kb-timer-live{background:rgba(245,158,11,.14);color:#d97706}.kb-timer-live .material-symbols-rounded{animation:kb-timer-pulse 2s ease-in-out infinite}
@keyframes kb-timer-pulse{50%{opacity:.4}}@media (prefers-reduced-motion:reduce){.kb-timer-live .material-symbols-rounded{animation:none}}
.kb-task-project-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.kb-task-for{flex:none;color:var(--muted);font-weight:500}
/* Issues filters: chips that open a searchable picker popup. */
.filter-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filter-chip{display:inline-flex;align-items:center;gap:7px;min-height:44px;max-width:240px;padding:0 10px 0 13px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text-soft);font-weight:650;font-size:13px;transition:background .15s,border-color .15s,color .15s}
.filter-chip .material-symbols-rounded{font-size:18px;color:var(--muted)}.filter-chip .filter-chip-caret{font-size:20px;margin-left:-2px}
.filter-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filter-chip:hover{background:var(--surface-hover);border-color:var(--line-strong)}
.filter-chip:focus-visible,.filter-option:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:2px}
.filter-chip.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}.filter-chip.on .material-symbols-rounded{color:var(--brand)}
.filter-clear{min-height:44px;color:var(--brand)}
.filter-modal{max-width:440px}.filter-modal .modal-body{display:grid;gap:12px;max-height:min(62vh,560px);overflow:auto;overscroll-behavior:contain}
.filter-search{flex:none;min-width:0;position:sticky;top:0;z-index:2;background:var(--surface)}
.filter-options{display:grid;gap:4px}
.filter-option{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:8px 10px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--text);text-align:left;font-weight:600;transition:background .12s,border-color .12s}
.filter-option:hover{background:var(--surface-hover)}
.filter-option .chat-avatar,.filter-option-icon{flex:none;width:32px;height:32px;min-width:32px;border-radius:10px;font-size:13px;display:grid;place-items:center}
.filter-option-icon{background:var(--surface-subtle);color:var(--muted)}.filter-option-icon .material-symbols-rounded{font-size:18px}
.filter-option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filter-option-count{min-width:28px;padding:2px 8px;border-radius:999px;background:var(--surface-subtle);color:var(--text-soft);font-size:12px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}.filter-option-count.zero{color:var(--muted);opacity:.7}
.filter-option-check{font-size:20px;color:var(--brand);visibility:hidden}
.filter-option.selected{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 35%,transparent);color:var(--brand)}.filter-option.selected .filter-option-check{visibility:visible}
.filter-none{margin:6px 0;color:var(--muted);font-size:13px;text-align:center}
@media(max-width:720px){.filter-chips{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.filter-chip{flex:none}.filter-modal{max-width:none}}
.filter-note{margin:2px 4px 0;color:var(--muted);font-size:12px}
/* Create ticket: icon-led selects, priority pills and resolution path cards. */
.select-shell{position:relative}.select-shell>.material-symbols-rounded{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--accent);pointer-events:none}.select-shell select{min-height:46px;padding-left:42px;border-radius:11px;font-weight:600}
.priority-pills{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:4px;border:1px solid var(--line-strong);border-radius:11px;background:var(--surface-subtle)}.priority-pill{display:flex;align-items:center;justify-content:center;gap:7px;min-height:36px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:650;color:var(--text-soft)!important;transition:.15s}.priority-pill input{position:absolute;opacity:0;pointer-events:none}.priority-dot{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.5}.p-high .priority-dot{background:var(--danger);opacity:1}.p-normal .priority-dot{background:var(--accent);opacity:1}.p-low .priority-dot{background:var(--muted);opacity:1}.priority-pill:has(input:checked){background:var(--surface);color:var(--text)!important;box-shadow:var(--shadow-xs)}.priority-pill:has(input:focus-visible){outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.path-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.path-card{position:relative;display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);cursor:pointer;transition:.15s}.path-card:hover{border-color:var(--accent)}.path-card input{position:absolute;opacity:0;pointer-events:none}.path-icon{flex:0 0 40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:21px}.path-text{display:grid;gap:2px;min-width:0;flex:1}.path-text strong{font-size:14px;color:var(--text)}.path-text small{font-size:12px;color:var(--muted);font-weight:500}.path-check{color:var(--accent);opacity:0;transition:.15s}.path-card:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}.path-card:has(input:checked) .path-check{opacity:1}.path-card:has(input:focus-visible){outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:2px}
@media(max-width:720px){.path-cards{grid-template-columns:1fr}}
.issue-fact-chip.issue-time{align-items:flex-start;line-height:1.45}
.issue-meta .issue-time{align-items:flex-start;line-height:1.45}

/* ── Customer portal: tickets shown like consignments on a route (Received → Assigned → In progress → Completed) ── */
.cp-page{max-width:1040px;margin:0 auto;width:100%}
.cp-hello{padding:10px 0 22px}
.cp-hello>p:first-child{margin:0;color:var(--muted);font-size:14px}
.cp-hello h1{margin:2px 0 6px;font-size:clamp(28px,4.4vw,40px);line-height:1.08;letter-spacing:-.03em;font-weight:750}
.cp-who{margin:0;color:var(--text-soft);font-size:14px;overflow-wrap:anywhere}
.cp-stop-open{--stage:var(--tk-open)}.cp-stop-assigned{--stage:var(--tk-assigned)}.cp-stop-in_progress{--stage:var(--tk-progress)}.cp-stop-completed{--stage:var(--tk-done)}
.cp-route{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:22px 8px 18px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-xs)}
.cp-route::before{content:"";position:absolute;left:16.667%;right:16.667%;top:37px;height:3px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--line-strong) 0 10px,transparent 10px 16px)}
.cp-stop{position:relative;display:grid;justify-items:center;gap:2px;padding:6px 4px 8px;border:0;border-radius:12px;background:none;color:var(--text);text-align:center}
.cp-stop:hover{background:var(--surface-subtle)}
.cp-stop:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 40%,transparent);outline-offset:2px}
.cp-dot{width:20px;height:20px;margin-bottom:8px;border-radius:50%;border:3px solid var(--line-strong);background:var(--surface);transition:transform .2s ease}
.cp-stop.has-tickets .cp-dot{border-color:var(--stage);background:var(--stage);box-shadow:0 0 0 5px color-mix(in srgb,var(--stage) 18%,transparent)}
.cp-stop strong{font-size:clamp(24px,3.6vw,32px);line-height:1;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cp-stop:not(.has-tickets) strong{color:var(--muted)}
.cp-stop>span:last-child{color:var(--text-soft);font-size:13px;font-weight:600}
.cp-stop[aria-pressed="true"]{background:color-mix(in srgb,var(--stage) 12%,transparent)}
.cp-stop[aria-pressed="true"] .cp-dot{transform:scale(1.15)}
.cp-list-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:30px 0 12px}
.cp-list-head h2{margin:0;font-size:19px;letter-spacing:-.015em}
.cp-search{flex:0 1 320px;width:auto;min-width:0}
.cp-brand{display:flex;align-items:center;gap:12px;min-width:0;color:var(--on-brand)}.cp-brand strong{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){.cp-brand strong{display:none}}
.cp-list{display:grid;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.cp-row{display:grid;grid-template-columns:86px minmax(0,1fr) 170px 96px 22px;align-items:center;gap:16px;padding:15px 18px;border:0;border-top:1px solid var(--line);background:none;color:var(--text);text-align:left;font:inherit}
.cp-row:first-child{border-top:0}
.cp-row:hover{background:var(--surface-subtle)}
.cp-row:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 40%,transparent);outline-offset:-3px}
.cp-num{font-weight:700;font-size:13px;color:var(--text-soft);font-variant-numeric:tabular-nums}
.cp-title{display:grid;min-width:0}
.cp-title strong{font-size:15px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-title small{color:var(--muted);font-size:13px}
.cp-row-open{--stage:var(--tk-open)}.cp-row-assigned{--stage:var(--tk-assigned)}.cp-row-in_progress{--stage:var(--tk-progress)}.cp-row-completed{--stage:var(--tk-done)}
.cp-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;align-items:center}
.cp-mini i{height:5px;border-radius:5px;background:var(--line)}
.cp-mini i.on{background:var(--stage)}
.cp-mini em{grid-column:1/-1;font-style:normal;font-size:12px;font-weight:650;color:var(--stage)}
.cp-when{color:var(--muted);font-size:12.5px;text-align:right}
.cp-chevron{color:var(--muted)}
.cp-empty{display:grid;justify-items:center;gap:8px;padding:48px 20px;text-align:center;color:var(--text-soft)}
.cp-empty h3{margin:0;color:var(--text);font-size:18px}
.cp-empty p{margin:0 0 6px;max-width:44ch}
@media (max-width:720px){
  .cp-route{padding:16px 2px 12px}.cp-route::before{top:31px}
  .cp-stop>span:last-child{font-size:11.5px}
  .cp-search{flex:1 1 100%}
  .cp-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"num when" "title title" "mini mini";gap:6px 12px;padding:14px 16px}
  .cp-num{grid-area:num}.cp-when{grid-area:when}.cp-title{grid-area:title}.cp-mini{grid-area:mini;margin-top:4px}.cp-chevron{display:none}
}
@media (prefers-reduced-motion:reduce){.cp-dot{transition:none}}
/* Tickets board view: the Kanban board's columns and cards, coloured by ticket stage. */
.ticket-view-switch[hidden]{display:none}.ticket-view-switch button{display:inline-flex;align-items:center;gap:6px}.ticket-view-switch .material-symbols-rounded{font-size:18px}
#ticket-grid.ticket-board-host{display:block}
.tkb-open{--kb:var(--tk-open)}.tkb-assigned{--kb:var(--tk-assigned)}.tkb-in_progress{--kb:var(--tk-progress)}.tkb-completed{--kb:var(--tk-done)}
.tkb-card .kb-card-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.tkb-card .tk-number{font-weight:700;font-size:12px;color:var(--text-soft)}
.tkb-card .kb-tag .material-symbols-rounded{font-size:14px}
.tkb-card[draggable="false"]{cursor:pointer}
.tkb-who{display:flex;align-items:center;gap:6px;min-width:0}.kanban-card footer .tkb-who small{margin-left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkb-waiting{color:var(--tk-open)}
.tkb-more{margin:2px 4px 0;color:var(--muted);font-size:11px;text-align:center}
.apps-tabs{margin-bottom:12px}.device-state strong.app-version{color:var(--text)}.device-state strong.app-version.is-outdated{color:var(--danger)}
.log-row{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}.log-row:hover{border-color:var(--brand)}.log-row small.log-error{color:var(--danger)}.device-state strong.app-version.is-online{color:var(--success)}.log-details{white-space:pre-wrap;word-break:break-word;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;margin:0;max-height:70vh;overflow:auto}
.log-row small.log-offline{color:var(--brand);font-weight:600}.device-state strong.app-version.is-offline-done{color:var(--brand)}
.attachment-grid>*,.detail{min-width:0}

/* More sub-screens: back to More as a pill (2026-10). */
.kb-back{gap:4px;padding:7px 14px 7px 9px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text-soft);box-shadow:var(--shadow-xs)}.kb-back:hover{border-color:var(--line-strong);background:var(--surface-hover);color:var(--text)}
/* Driver app logs (2026-10): filters, a summary card with three counts, then record-style log cards. */
.dl-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}.dl-filters .apps-tabs{margin:0;max-width:100%}
.dl-stats{margin-bottom:18px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-xs)}.dl-stats p{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.dl-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.dl-count{display:grid;gap:2px}.dl-count strong{font-size:24px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.dl-count span{color:var(--muted);font-size:12px}.dl-completed strong{color:var(--success)}.dl-failed strong{color:var(--danger)}
/* More > Locations: the shared map page (GpsLocations.PAGE) fills the rest of the screen. */
.locations-frame{display:block;width:100%;height:max(480px,calc(100vh - 230px));height:max(480px,calc(100dvh - 230px));border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.dl-usage-open{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px}.dl-usage-intro{margin:0 0 10px;color:var(--muted);font-size:12px}.dl-usage-intro{margin:0 0 12px}.dl-usage-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}.dl-usage-filters label{flex:1 1 160px}.dl-usage-filters .input{width:100%}.dl-usage-span{margin:0 0 10px;font-size:15px}#logs-usage{display:grid;gap:12px}
.dl-usage-card{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.dl-usage-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.dl-usage-card header div{display:grid;gap:2px;min-width:0}
.dl-usage-card header strong{font-size:15px;overflow-wrap:anywhere}.dl-usage-card header small{color:var(--muted);font-size:12px}
.dl-usage-card header b{font-size:20px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.dl-usage-bar{display:flex;height:8px;margin:12px 0;border-radius:99px;overflow:hidden;background:var(--line)}.dl-usage-bar span{display:block;height:100%}
.dl-usage-card .part-0{background:var(--brand)}.dl-usage-card .part-1{background:var(--success)}.dl-usage-card .part-2{background:var(--muted)}
.dl-usage-card ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}.dl-usage-card li{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:10px;font-size:13px}
.dl-usage-card li i{width:10px;height:10px;border-radius:3px}.dl-usage-card li span{display:grid;gap:1px;min-width:0}.dl-usage-card li small{color:var(--muted);font-size:12px}
.dl-usage-card li b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.dl-usage-android{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}.dl-usage-android b{color:var(--text)}
.dl-list{display:grid;gap:10px}.dl-empty{text-align:center;color:var(--muted);padding:32px 0}
.dl-row{--tone:var(--muted);--tone-soft:var(--surface-subtle);display:grid;gap:10px;width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}.dl-row:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.dl-row.tone-success{--tone:var(--success);--tone-soft:var(--success-soft)}.dl-row.tone-offline{--tone:var(--brand);--tone-soft:var(--brand-soft)}.dl-row.tone-failed{--tone:var(--danger);--tone-soft:var(--danger-soft)}.dl-row.tone-pending{--tone:var(--warning);--tone-soft:var(--warning-soft)}
.dl-head{display:flex;align-items:center;gap:12px;min-width:0}.dl-icon{flex:0 0 38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--tone-soft);color:var(--tone);font-size:20px}
.dl-main{flex:1;min-width:0;display:grid;gap:2px}.dl-main strong{font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dl-main small{color:var(--muted);font-size:12px}
.dl-pill{flex:none;padding:4px 10px;border-radius:999px;background:var(--tone-soft);color:var(--tone);font-size:12px;font-weight:700;white-space:nowrap}
.dl-note{display:block;padding:8px 10px;border-radius:10px;font-size:12px}.dl-note-offline{background:var(--brand-soft);color:var(--brand)}.dl-note-error{background:var(--danger-soft);color:var(--danger)}
/* More > Apps: device popup (3D model + details), same layout as Android and iOS */
.device-open{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s;animation:dp-rise .35s both;animation-delay:calc(min(var(--i,0),12) * 30ms)}.device-open:hover{border-color:var(--brand);transform:translateY(-1px);box-shadow:0 6px 18px rgba(15,30,50,.08)}.device-open:active{transform:scale(.99)}.device-open.is-inactive .device-main strong{color:var(--muted)}
.device-number{display:inline-block;margin-right:8px;padding:1px 7px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-size:11px;font-weight:700;letter-spacing:.02em;vertical-align:1px}
@keyframes dp-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dp{display:grid;gap:14px}.dp-sub{margin:-6px 0 0;color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.01em}
.dp-hero{position:relative}
.device-stage{height:320px;display:grid;place-items:center;perspective:1000px;border-radius:18px;background:radial-gradient(120% 90% at 50% 20%,var(--surface) 0,var(--surface-subtle) 65%,color-mix(in srgb,var(--surface-subtle) 80%,var(--line)) 100%);border:1px solid var(--line);cursor:grab;touch-action:none;user-select:none;overflow:hidden}.device-stage:active{cursor:grabbing}
.dp-chip{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:700}.dp-chip i{width:8px;height:8px;border-radius:50%;background:var(--muted)}.dp-chip.is-on{color:var(--success)}.dp-chip.is-on i{background:var(--success);box-shadow:0 0 0 0 color-mix(in srgb,var(--success) 60%,transparent);animation:dp-pulse 2s infinite}
@keyframes dp-pulse{70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.dp-hint{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:11px}.dp-hint .material-symbols-rounded{font-size:15px}
.device-box{position:relative;width:var(--w);height:var(--h);transform-style:preserve-3d}
.device-box .face{position:absolute;backface-visibility:hidden}
.device-box .front,.device-box .back{inset:0;border-radius:var(--r)}
.device-box .front{transform:translateZ(calc(var(--d) / 2));padding:var(--bezel);background:#07090c;box-shadow:inset 0 0 0 1.5px var(--frame)}
.device-box .screen{display:grid;place-content:center;height:100%;border-radius:calc(var(--r) - var(--bezel) * .6);background:radial-gradient(120% 80% at 30% 10%,#3d6fc4 0,#1b3b78 45%,#0b1220 100%);color:#fff;text-align:center;font-size:12px;letter-spacing:.02em}
.device-box .front-cam{position:absolute;left:50%;transform:translateX(-50%);border-radius:50%;background:#000;box-shadow:0 0 0 1px #1a1d22}.device-box .front-cam.tablet{width:3px;height:3px}
.device-box .back{transform:rotateY(180deg) translateZ(calc(var(--d) / 2));background:linear-gradient(155deg,color-mix(in srgb,var(--body) 78%,#fff) 0,var(--body) 45%,color-mix(in srgb,var(--body) 85%,#000) 100%);box-shadow:inset 0 0 0 1.5px var(--frame)}
.device-box .island{position:absolute;box-shadow:0 1px 2px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12)}
.device-box .lens{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 35%,#3a4a63 0,#0c1018 45%,#000 70%);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--frame) 70%,#fff),0 1px 2px rgba(0,0,0,.5)}
.device-box .brand{position:absolute;bottom:7%;width:100%;text-align:center;color:rgba(255,255,255,.5);font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.device-box .side{width:var(--d);height:calc(var(--h) - var(--r) * 2);top:var(--r);left:calc((var(--w) - var(--d)) / 2);background:linear-gradient(90deg,color-mix(in srgb,var(--frame) 80%,#000),var(--frame),color-mix(in srgb,var(--frame) 80%,#000))}
.device-box .left{transform:rotateY(-90deg) translateZ(calc(var(--w) / 2))}.device-box .right{transform:rotateY(90deg) translateZ(calc(var(--w) / 2))}
.device-box .button{position:absolute;left:20%;width:60%;border-radius:2px;background:color-mix(in srgb,var(--frame) 70%,#fff)}
.device-box .end{height:var(--d);width:calc(var(--w) - var(--r) * 2);left:var(--r);top:calc((var(--h) - var(--d)) / 2);background:linear-gradient(180deg,color-mix(in srgb,var(--frame) 80%,#000),var(--frame),color-mix(in srgb,var(--frame) 80%,#000))}
.device-box .top{transform:rotateX(90deg) translateZ(calc(var(--h) / 2))}.device-box .bottom{transform:rotateX(-90deg) translateZ(calc(var(--h) / 2))}
.dp-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.dp-tile{display:grid;gap:4px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-subtle);animation:dp-rise .35s both;animation-delay:calc(var(--i) * 50ms + 80ms)}.dp-tile span{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.dp-tile strong{font-size:15px;overflow-wrap:anywhere}.dp-tile.is-flag strong{color:var(--danger)}
.dp-card{padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.dp-card h3{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.dp-rows{display:grid;margin:0}.dp-rows>div{display:grid;grid-template-columns:minmax(120px,32%) 1fr;gap:12px;padding:9px 0;border-top:1px solid var(--line)}.dp-rows>div:first-child{border-top:0}.dp-rows dt{color:var(--muted);font-size:13px}.dp-rows dd{margin:0;font-size:14px;font-weight:600;overflow-wrap:anywhere}.dp-rows.mono dd{font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:400}
.dp-timeline{list-style:none;margin:0;padding:0;display:grid}.dp-timeline li{position:relative;display:flex;justify-content:space-between;gap:12px;padding:8px 0 8px 20px;animation:dp-rise .3s both;animation-delay:calc(min(var(--i),10) * 40ms + 150ms)}.dp-timeline li::before{content:"";position:absolute;left:4px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--brand)}.dp-timeline li::after{content:"";position:absolute;left:7.5px;top:24px;bottom:-6px;width:1px;background:var(--line)}.dp-timeline li:last-child::after{display:none}.dp-timeline strong{font-size:14px;font-weight:600}.dp-timeline time{color:var(--muted);font-size:12px;white-space:nowrap}
.dp-empty{margin:0;color:var(--muted);font-size:13px}
.dp-raw summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}.dp-raw summary::-webkit-details-marker{display:none}.dp-raw summary h3{margin:0;flex:1}.dp-raw summary span{color:var(--muted);font-size:12px}.dp-raw summary .material-symbols-rounded{transition:transform .2s}.dp-raw[open] summary .material-symbols-rounded{transform:rotate(180deg)}.dp-raw[open] .dp-rows{margin-top:10px}
@media (max-width:640px){.dp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.device-stage{height:280px}.dp-timeline li{flex-direction:column;gap:2px}}

/* ── Dashboard (2026-10): greeting strip with figures, then attention + my work beside the notification rail. Flat rows inside one panel each. ── */
.ws{display:grid;gap:20px}
.ws-head{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:4px 2px 0}
.ws .ws-hello{flex:1 1 260px;min-width:0}.ws .ws-hello h2{font-size:24px;line-height:1.15}
.ws .ws-done{display:flex;align-items:center;gap:5px;margin-top:6px;padding:0;border:0;color:var(--muted);font-size:12.5px}.ws .ws-done .material-symbols-rounded{font-size:16px;color:var(--tk-done)}.ws .ws-done b{color:var(--text);font-variant-numeric:tabular-nums}
.ws-figures{display:flex;gap:6px}
.ws-figure{display:grid;gap:2px;min-width:104px;padding:10px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--muted);font:inherit;font-size:12.5px;text-align:left;cursor:pointer;transition:border-color .16s ease,background .16s ease}
.ws-figure .stat-value{color:var(--text);font-size:24px;font-weight:700;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ws-figure:hover{border-color:var(--line-strong);background:var(--surface-hover)}
.ws-icon-btn{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--muted);cursor:pointer;transition:color .16s ease,border-color .16s ease}.ws-icon-btn:hover{color:var(--text);border-color:var(--line-strong)}
.ws-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);grid-template-areas:"attention inbox" "mine inbox";gap:20px;align-items:start}
.ws-attention{grid-area:attention}.ws-mine{grid-area:mine}.ws-inbox{grid-area:inbox;position:sticky;top:16px}
.ws-panel{min-width:0;padding:18px 10px 10px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.ws-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 10px 10px}
.ws-panel-head h3{display:flex;align-items:center;gap:8px;margin:0;font-size:16px;letter-spacing:-.01em}
.ws-count{min-width:22px;padding:1px 8px;border-radius:999px;background:var(--tk-open-bg);color:var(--tk-open);font-size:12px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}.ws-count:empty{display:none}
.ws-actions{display:flex;gap:2px}
.ws-link{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--tk-blue);font:inherit;font-size:13px;font-weight:600;cursor:pointer}.ws-link .material-symbols-rounded{font-size:17px}.ws-link:hover{background:var(--tk-blue-soft)}
.ws-sub{margin:14px 10px 4px;color:var(--muted);font-size:12px;font-weight:600}.ws-panel-head+.ws-sub{margin-top:2px}
.ws-list{display:grid;grid-template-columns:minmax(0,1fr)}
.ws-list.ws-loading{min-height:120px;margin:0 10px 6px;border-radius:10px;background:linear-gradient(100deg,var(--surface-subtle) 30%,var(--surface-hover) 50%,var(--surface-subtle) 70%);background-size:300% 100%;animation:skeleton 1.4s infinite}
.ws-item{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px;border:0;border-radius:10px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background .14s ease}
.ws-item+.ws-item::before{content:"";position:absolute;left:10px;right:10px;top:0;border-top:1px solid var(--tk-hairline)}
.ws-item:hover,.ws-item:focus-visible{background:var(--surface-hover)}.ws-item:hover::before,.ws-item:hover+.ws-item::before,.ws-item:focus-visible::before,.ws-item:focus-visible+.ws-item::before{opacity:0}
.ws-item:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:-2px}
.ws-copy{flex:1;min-width:0}.ws-copy strong,.ws-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-copy strong{font-size:14px;font-weight:600}.ws-copy small{margin-top:3px;color:var(--muted);font-size:12.5px}
.ws-num{margin-right:8px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.ws .ws-item .tk-pill{margin-left:0;flex:0 0 auto}
.ws-chev{color:var(--muted);font-size:20px;opacity:.45;transition:opacity .14s ease,transform .14s ease}.ws-item:hover .ws-chev{opacity:1;transform:translateX(2px)}
.ws-glyph{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:50%;background:var(--surface-subtle);color:var(--muted);font-size:18px}
.ws-notice{align-items:flex-start}.ws-notice time{flex:0 0 auto;padding-top:1px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.ws-notice .ws-copy strong{font-weight:500}.ws-notice.unread .ws-copy strong{font-weight:700}
.ws-notice.unread .ws-glyph{background:var(--tk-blue-soft);color:var(--tk-blue)}
.ws-notice.unread time{color:var(--tk-blue);font-weight:600}
.ws .empty-inline{margin:4px 10px 8px;padding:18px;border:0;border-radius:10px;background:var(--surface-subtle);color:var(--muted);font-size:13px;text-align:left}
.ws-more{width:calc(100% - 20px);margin:4px 10px 0;padding:10px;border:0;border-top:1px solid var(--tk-hairline);background:transparent;color:var(--tk-blue);font:inherit;font-size:13px;font-weight:600;text-align:left;cursor:pointer}.ws-more:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:1100px){.ws-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"attention" "mine" "inbox"}.ws-inbox{position:static}}
@media (max-width:640px){.ws-head{gap:14px}.ws-figures{width:100%}.ws-figure{flex:1;min-width:0;padding:9px 12px}.ws-figure .stat-value{font-size:21px}.ws-icon-btn{position:absolute;right:16px;top:12px}.ws-head{position:relative}.ws .ws-hello{padding-right:52px}.ws-panel{padding:14px 4px 6px;border-radius:14px}.ws-item .tk-pill{display:none}}
@media (prefers-reduced-motion:reduce){.ws-item,.ws-chev,.ws-figure{transition:none}.ws-list.ws-loading{animation:none}}

/* ── Empty lists (2026-10): one look everywhere, matching Android and iOS. ── */
.empty-state{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:64px 24px 72px;border:1px solid var(--line);border-radius:18px;background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--tk-blue) 7%,var(--surface)) 0%,var(--surface) 60%);text-align:center;animation:empty-in .4s cubic-bezier(.22,1,.36,1) both}
.empty-state-icon{display:grid;place-items:center;width:76px;height:76px;margin-bottom:12px;border-radius:50%;background:var(--tk-blue-soft);color:var(--tk-blue);font-size:34px;font-variation-settings:'FILL' 1;box-shadow:0 0 0 10px color-mix(in srgb,var(--tk-blue-soft) 45%,transparent)}
.empty-state strong{font-size:19px;letter-spacing:-.015em;color:var(--text)}
.empty-state p{max-width:42ch;margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.empty-state .btn{margin-top:14px}
@keyframes empty-in{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.empty-state{animation:none}}

/* ── Issues (2026-10): severity-led cards and a calmer detail view. --sev drives the dot, the error tint and the severity tile. ── */
[data-sev="1"]{--sev:#64748b}[data-sev="2"]{--sev:var(--tk-blue)}[data-sev="3"]{--sev:#d97706}[data-sev="4"]{--sev:#ea580c}[data-sev="5"]{--sev:#dc2626}
.ic-card{position:relative;display:flex;flex-direction:column;gap:14px;width:100%;min-width:0;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .16s ease,box-shadow .2s ease,transform .2s cubic-bezier(.22,1,.36,1)}
.ic-card:hover{border-color:color-mix(in srgb,var(--sev) 40%,var(--line));box-shadow:0 10px 28px -14px color-mix(in srgb,var(--sev) 55%,transparent);transform:translateY(-2px)}
.ic-card:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 40%,transparent);outline-offset:2px}
.ic-card.selected{border-color:var(--tk-blue);box-shadow:0 0 0 2px color-mix(in srgb,var(--tk-blue) 35%,transparent)}
.ic-top{display:flex;align-items:flex-start;gap:10px;min-width:0}
.ic-check{color:var(--tk-blue);font-size:22px;margin-top:9px}
.ic-app{display:flex;align-items:center;gap:11px;flex:1;min-width:0}.ic-app .tone-avatar{width:40px;height:40px;flex:0 0 40px;font-size:15px}
.ic-app>span{min-width:0}.ic-app strong,.ic-app small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ic-app strong{font-size:15.5px;font-weight:700;letter-spacing:-.01em}.ic-app small{margin-top:2px;color:var(--muted);font-size:12.5px}
.ic-sev{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:4px 10px 4px 8px;border-radius:999px;background:color-mix(in srgb,var(--sev) 13%,transparent);color:var(--sev);font-size:12px;font-weight:700}
.ic-sev i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,var(--sev) 22%,transparent)}
.ic-error{display:grid;gap:4px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--sev) 7%,var(--surface-subtle))}
.ic-error strong{font-size:14px}
.ic-error>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--text-soft,var(--muted));font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.ic-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;color:var(--muted);font-size:12.5px}
.ic-who{display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ic-who .material-symbols-rounded{font-size:16px}
.ic-when{flex:0 0 auto;font-variant-numeric:tabular-nums}
.ic-card.is-resolved{--sev:var(--tk-done)}.ic-card.is-resolved .ic-error{background:var(--surface-subtle)}
@media (prefers-reduced-motion:reduce){.ic-card{transition:none}.ic-card:hover{transform:none}}

.id-wrap{display:grid;gap:16px}
.id-head{display:flex;align-items:center;gap:14px}.id-head .tone-avatar{width:52px;height:52px;flex:0 0 52px;font-size:19px}
.id-head>div{flex:1;min-width:0}.id-head h2{margin:0;font-size:22px;letter-spacing:-.02em}
.id-head p{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:4px 0 0;color:var(--muted);font-size:13.5px}
.id-head code{padding:2px 8px;border-radius:6px;background:var(--surface-subtle);color:var(--text-soft,var(--muted));font-size:12px;overflow-wrap:anywhere}
.id-error{display:flex;gap:14px;padding:18px;border:1px solid color-mix(in srgb,var(--sev) 30%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--sev) 8%,var(--surface))}
.id-error-icon{display:grid;place-items:center;flex:0 0 40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--sev) 16%,transparent);color:var(--sev);font-size:22px;font-variation-settings:'FILL' 1}
.id-error strong{display:block;font-size:16px}.id-error p{margin:5px 0 0;color:var(--text);font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.id-error.is-resolved{--sev:var(--tk-done)}
.id-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.id-fact{display:flex;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.id-fact .material-symbols-rounded{color:var(--muted);font-size:19px;margin-top:1px}.id-fact[data-sev] .material-symbols-rounded{color:var(--sev)}
.id-fact>div{min-width:0}.id-fact small{display:block;color:var(--muted);font-size:11.5px;font-weight:600}.id-fact strong{display:block;margin-top:3px;font-size:13px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.id-fix{display:flex;gap:12px;padding:16px;border-radius:14px;background:color-mix(in srgb,#f59e0b 10%,var(--surface));border:1px solid color-mix(in srgb,#f59e0b 28%,var(--line))}
.id-fix>.material-symbols-rounded{color:#d97706;font-variation-settings:'FILL' 1}.id-fix strong{font-size:14px}.id-fix p{margin:4px 0 0;font-size:13.5px;line-height:1.5}
.id-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.id-section{min-width:0;padding:16px 16px 8px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.id-section.is-wide{grid-column:1/-1}
.id-section h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:14px}.id-section h3>.material-symbols-rounded{color:var(--tk-blue);font-size:19px}
.id-map{display:inline-flex;align-items:center;gap:5px;margin-left:auto;padding:5px 11px;border-radius:999px;background:var(--tk-blue-soft);color:var(--tk-blue);font-size:12.5px;font-weight:600;text-decoration:none}.id-map .material-symbols-rounded{font-size:16px}.id-map:hover{background:color-mix(in srgb,var(--tk-blue) 20%,transparent)}
.id-section dl{display:grid;margin:0}.id-section.is-wide dl{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.id-section dl>div{display:grid;grid-template-columns:minmax(120px,44%) 1fr;gap:12px;padding:9px 0;border-top:1px solid var(--tk-hairline)}
.id-section dt{color:var(--muted);font-size:12.5px}.id-section dd{margin:0;font-size:13px;font-weight:500;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.id-tech{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.id-tech summary{display:flex;align-items:center;gap:8px;padding:14px 16px;font-size:14px;font-weight:600;cursor:pointer;list-style:none}.id-tech summary::-webkit-details-marker{display:none}
.id-tech-chev{margin-left:auto;transition:transform .2s ease}.id-tech[open] .id-tech-chev{transform:rotate(180deg)}
.id-tech pre{margin:0;padding:14px 16px;max-height:340px;overflow:auto;border-top:1px solid var(--line);background:var(--surface-subtle);font-size:12px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
@media (max-width:760px){.id-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.id-sections,.id-section.is-wide dl{grid-template-columns:minmax(0,1fr)}.id-section dl>div{grid-template-columns:minmax(0,1fr);gap:2px}}

/* ── App shell (2026-10): deep-blue lit sidebar with grouped pages and a blue active pill; header with page icon, bigger title, one action capsule. ── */
.app-shell .sidebar{background:radial-gradient(140% 40% at 100% 0%,rgba(74,134,255,.28) 0%,transparent 60%),radial-gradient(120% 30% at 0% 100%,rgba(74,134,255,.14) 0%,transparent 70%),linear-gradient(180deg,#0f2747 0%,#0b1d36 55%,#081628 100%);border-right:1px solid rgba(255,255,255,.06);box-shadow:none}
.app-shell .nav-list{gap:3px;overflow-y:auto;scrollbar-width:none}
.app-shell .nav-section-label{padding:16px 13px 7px;color:rgba(214,228,255,.5);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.app-shell .nav-section-label:first-child{padding-top:2px}
.app-shell .nav-item{min-height:44px;color:rgba(226,236,255,.7);font-size:13.5px;font-weight:600;border-radius:12px;transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.app-shell .nav-item .nav-icon{font-size:21px;transition:font-variation-settings .18s ease}
.app-shell .nav-item:hover{background:rgba(255,255,255,.08);color:#fff;transform:none}
.app-shell .nav-item.active{background:linear-gradient(135deg,#4a86ff 0%,#1b4fd8 100%);color:#fff;box-shadow:0 10px 22px -10px rgba(46,107,246,.85),inset 0 1px 0 rgba(255,255,255,.18)}
.app-shell .nav-item.active .nav-icon{font-variation-settings:'FILL' 1}
.app-shell .nav-item.active:before{display:none}
.app-shell .nav-item:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:2px}
.app-shell .nav-collapse{margin-top:10px;color:rgba(226,236,255,.55)}
.app-shell .side-user{border-top-color:rgba(255,255,255,.1)}
.app-shell .side-user .user-avatar{background:linear-gradient(135deg,#4a86ff,#1b4fd8);color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.14)}
/* Collapsed (by choice, or automatically under 1100px): section gaps instead of labels, and a label tooltip on hover. */
@media (min-width:721px){
  .app-shell.nav-collapsed .nav-section-label{display:block;height:12px;padding:0;margin:0 18px;font-size:0;border-top:1px solid rgba(255,255,255,.08);margin-top:6px}
  .app-shell.nav-collapsed .nav-section-label:first-child{display:none}
  .app-shell.nav-collapsed .nav-item:hover::after{content:attr(data-label);position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);padding:6px 11px;border-radius:8px;background:#0b1d36;color:#fff;font-size:12.5px;font-weight:600;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.28);pointer-events:none;z-index:60}
}
@media (min-width:721px) and (max-width:1100px){
  .app-shell .nav-section-label{display:block;height:12px;padding:0;margin:6px 18px 0;font-size:0;border-top:1px solid rgba(255,255,255,.08)}
  .app-shell .nav-section-label:first-child{display:none}
  .app-shell .nav-item:hover::after{content:attr(data-label);position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);padding:6px 11px;border-radius:8px;background:#0b1d36;color:#fff;font-size:12.5px;font-weight:600;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.28);pointer-events:none;z-index:60}
  .app-shell .sidebar{overflow:visible}
}
.app-shell .topbar{min-height:84px;gap:20px;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);box-shadow:none}
.page-head{display:flex;align-items:center;gap:14px;min-width:0}
.page-icon{display:grid;place-items:center;flex:0 0 46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#4a86ff 0%,#1b4fd8 100%);color:#fff;font-size:24px;font-variation-settings:'FILL' 1;box-shadow:0 10px 20px -10px rgba(46,107,246,.8),inset 0 1px 0 rgba(255,255,255,.22)}
.page-icon:empty{display:none}
.page-head>div{min-width:0}
.app-shell .topbar h1{font-size:28px;font-weight:800;line-height:1.1;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-shell .topbar p{margin-top:4px;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-shell .top-actions{gap:12px}
.top-cluster{display:flex;align-items:center;gap:2px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface);box-shadow:0 1px 2px rgba(16,36,50,.04)}
.app-shell .top-cluster .btn-icon{width:38px;height:38px;min-height:38px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;color:var(--text-soft,var(--muted))}
.app-shell .top-cluster .btn-icon:hover{background:var(--surface-hover);color:var(--text);transform:none}
.app-shell .top-cluster .top-logout:hover{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger)}
.app-shell .top-user{display:flex;align-items:center;gap:10px;padding:0;margin:0;border:0}
.top-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#4a86ff,#1b4fd8);color:#fff;font-size:13px;font-weight:700}
.app-shell .top-user strong{font-size:13px}.app-shell .top-user small{font-size:11.5px}
@media (max-width:1100px){.app-shell .top-user>div{display:none}}
@media (max-width:720px){
  .app-shell .sidebar{background:linear-gradient(180deg,#0f2747,#0b1d36)}
  .app-shell .nav-item.active{box-shadow:none}
  .page-icon{flex-basis:36px;height:36px;border-radius:11px;font-size:20px}
  .app-shell .topbar{min-height:64px}.app-shell .topbar h1{font-size:21px}
  .top-cluster{padding:2px;gap:0}.app-shell .top-cluster .btn-icon{width:34px;height:34px;min-height:34px}
  .app-shell .top-user{display:none}
  /* Dashboard and Refresh are one tap away in the bottom bar; keeping them would push the page sideways. */
  .app-shell #workspace,.app-shell #refresh{display:none}
  .app-shell .main,.app-shell .topbar,.page-head{min-width:0}
  .app-shell .topbar{gap:10px}
}

/* ── Settings (2026-10): profile banner, theme cards with previews, account panel; directory beside them on wide screens. ── */
.st{display:grid;gap:20px}
.st-hero{position:relative;display:flex;align-items:center;gap:18px;padding:26px 28px;border-radius:22px;color:#fff;overflow:hidden;background:radial-gradient(90% 140% at 100% 0%,rgba(255,255,255,.22) 0%,transparent 55%),linear-gradient(135deg,#4a86ff 0%,#1b4fd8 100%);box-shadow:0 18px 40px -22px rgba(27,79,216,.8)}
.st-avatar{display:grid;place-items:center;flex:0 0 72px;height:72px;border-radius:50%;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 2px rgba(255,255,255,.4);font-size:26px;font-weight:800;letter-spacing:-.02em}
.st-who{flex:1;min-width:0}.st-who h2{margin:0;font-size:26px;font-weight:800;letter-spacing:-.025em;color:#fff}.st-who p{margin:4px 0 0;color:rgba(255,255,255,.82);font-size:14px;overflow-wrap:anywhere}
.st-role{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.16);font-size:13px;font-weight:700}.st-role .material-symbols-rounded{font-size:18px;font-variation-settings:'FILL' 1}
.st-grid{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:20px;align-items:start}
.st-col{display:grid;gap:20px}
.st-panel{min-width:0;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.st-panel>header{margin-bottom:14px}.st-panel>header h3{margin:0;font-size:16px;letter-spacing:-.01em}.st-panel>header p{margin:3px 0 0;color:var(--muted);font-size:12.5px}
.st-themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.st-theme{display:grid;gap:8px;padding:8px 8px 10px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text-soft,var(--muted));font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease}
.st-theme:hover{border-color:var(--line-strong)}
.st-theme.active{border-color:var(--tk-blue);color:var(--tk-blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--tk-blue) 18%,transparent)}
.st-theme:focus-visible{outline:3px solid color-mix(in srgb,var(--tk-blue) 40%,transparent);outline-offset:2px}
.st-theme-label{display:flex;align-items:center;justify-content:center;gap:5px}.st-theme-label .material-symbols-rounded{font-size:17px}
.st-preview{position:relative;display:block;height:58px;border-radius:9px;overflow:hidden;background:#f4f6f8;border:1px solid rgba(0,0,0,.06)}
.st-preview i{position:absolute;left:0;top:0;bottom:0;width:22%;background:#0f2747}
.st-preview b{position:absolute;left:30%;right:10%;height:9px;border-radius:4px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08)}.st-preview b:first-of-type{top:12px;background:linear-gradient(90deg,#4a86ff,#1b4fd8);right:40%}.st-preview b:last-of-type{top:30px}
.st-preview-dark{background:#111823;border-color:rgba(255,255,255,.08)}.st-preview-dark b:last-of-type{background:#1d2633}
.st-preview-system{background:linear-gradient(90deg,#f4f6f8 0 58%,#111823 58% 100%)}
.st-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 4px;border:0;border-top:1px solid var(--tk-hairline);background:transparent;color:var(--text);font:inherit;text-align:left}
.st-panel>header+.st-row{border-top:0;padding-top:4px}
.st-row>div{flex:1;min-width:0}.st-row strong,.st-row small{display:block}.st-row strong{font-size:14px}.st-row small{margin-top:2px;color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.st-row-icon{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:11px;background:var(--tk-blue-soft);color:var(--tk-blue);font-size:20px}
button.st-row{cursor:pointer;border-radius:12px;margin-top:4px}button.st-row:hover{background:var(--surface-hover)}
.st-danger strong{color:var(--danger)}.st-danger .st-row-icon{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger)}
.st-chev{color:var(--muted)}
.st-directory .settings-directory{display:grid;gap:12px}
@media (max-width:1100px){.st-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.st-hero{flex-wrap:wrap;padding:20px;gap:14px}.st-avatar{flex-basis:56px;height:56px;font-size:20px}.st-who h2{font-size:21px}.st-themes{gap:6px}.st-preview{height:44px}}

/* ── Device model (2026-10): PDA borders, rugged corner guards, scanner window, accent keys. ── */
.device-box .front{padding:var(--bezel-top,var(--bezel)) var(--bezel) var(--bezel-bottom,var(--bezel))}
.device-box .guard{position:absolute;width:var(--guard);height:var(--guard);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 88%,#fff),var(--accent) 55%,color-mix(in srgb,var(--accent) 75%,#000));box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.device-box .guard.tl{left:-2px;top:-2px;border-radius:var(--r) 3px 50% 3px}.device-box .guard.tr{right:-2px;top:-2px;border-radius:3px var(--r) 3px 50%}
.device-box .guard.bl{left:-2px;bottom:-2px;border-radius:3px 50% 3px var(--r)}.device-box .guard.br{right:-2px;bottom:-2px;border-radius:50% 3px var(--r) 3px}
.device-box .button.key{background:var(--accent);width:70%;left:15%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.device-box .scanner{position:absolute;left:50%;top:22%;height:56%;transform:translateX(-50%);border-radius:2px;background:linear-gradient(180deg,#6b1414,#2a0505);box-shadow:0 0 0 2px var(--accent)}

/* Calls insights (2026-10): the week or month at a glance above the day chart + history. Shared maths: CallLogPolicy.insights. */
.ci{margin:0 0 22px}.ci-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}.ci-head h3{margin:0;font-size:20px;letter-spacing:-.02em}.ci-head p{margin:0;color:var(--muted);font-size:13px}
.ci-trend{font-weight:700}.ci-trend.up{color:var(--success)}.ci-trend.down{color:var(--danger)}
.ci-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.ci-card{min-width:0;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-xs)}
.ci-card h4{margin:0;font-size:15px}.ci-card>p{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.ci-rate{grid-column:span 2;grid-row:span 2;display:flex;align-items:center;gap:18px}.ci-rate svg{width:116px;height:116px;flex:0 0 116px;transform:rotate(-90deg)}
.ci-rate circle{fill:none;stroke-width:9}.ci-rate .track{stroke:var(--line)}.ci-rate .arc{stroke:var(--success);stroke-linecap:round;stroke-dasharray:var(--c);stroke-dashoffset:var(--off)}
.ci-rate small{color:var(--muted);font-size:13px}.ci-rate strong{display:block;font-size:36px;line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.ci-rate p{margin:4px 0 0;font-size:13px}.ci-rate p.muted{color:var(--muted);font-size:12px}
.ci-tile{grid-column:span 2;display:grid;gap:2px;align-content:start}.ci-tile .material-symbols-rounded{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;font-size:19px;margin-bottom:8px;color:var(--brand);background:var(--brand-soft)}
.ci-tile.good .material-symbols-rounded{color:var(--success);background:var(--success-soft)}.ci-tile.warn .material-symbols-rounded{color:var(--warning);background:var(--warning-soft)}
.ci-tile strong{font-size:28px;line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.ci-tile small{color:var(--muted);font-size:12.5px}
.ci-talk{grid-column:span 6;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.ci-talk div{display:grid}.ci-talk strong{font-size:20px;font-variant-numeric:tabular-nums}.ci-talk small{color:var(--muted);font-size:12px}
.ci-hours{grid-column:span 3}.ci-coverage{grid-column:span 3}
.ci-hour-bars{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;align-items:end;height:92px;margin-top:14px}
.ci-hour-bars i{display:block;height:var(--h);border-radius:99px;background:color-mix(in srgb,var(--accent) calc(var(--o)*100%),transparent);transform-origin:bottom}.ci-hour-bars i.zero{background:var(--surface-subtle)}.ci-hour-bars i.peak{background:var(--accent)}
.ci-hour-labels{display:grid;grid-template-columns:repeat(24,1fr);margin-top:6px;color:var(--muted);font-size:10.5px}
.ci-stack{display:flex;height:12px;margin-top:16px;border-radius:99px;overflow:hidden;background:var(--surface-subtle);gap:2px}.ci-stack i{display:block;transform-origin:left}
.ci-stack .linked,.ci-legend .linked{background:var(--success)}.ci-stack .personal,.ci-legend .personal{background:var(--muted)}.ci-stack .open,.ci-legend .open{background:#f59e0b}
.ci-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:12.5px;color:var(--text-soft)}.ci-legend span{display:inline-flex;align-items:center;gap:6px}.ci-legend i{width:8px;height:8px;border-radius:50%}
.ci-rank{grid-column:span 3}.ci-rank ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:12px}.ci-rank li{display:flex;align-items:center;gap:10px}
.ci-avatar{width:28px!important;height:28px!important;flex:0 0 28px!important;font-size:12px!important}.ci-rank-main{flex:1;min-width:0;display:grid;gap:6px}
.ci-rank-top{display:flex;justify-content:space-between;gap:8px}.ci-rank-top strong{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ci-rank-top small{color:var(--muted);font-size:12px;white-space:nowrap}
.ci-meter{height:6px;border-radius:99px;background:var(--surface-subtle);overflow:hidden}.ci-meter i{display:block;height:100%;width:var(--w);border-radius:99px;background:var(--brand);transform-origin:left}.ci-meter i.all{background:var(--success)}
.ci-empty{margin:10px 0 0;color:var(--muted);font-size:13px}
/* Entrance: cards rise in turn, bars grow, the ring sweeps. Only when .ci-animate is set (open, range or scope change). */
.ci-animate .ci-card{animation:ci-rise .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*55ms)}
.ci-animate .ci-hour-bars i{animation:ci-grow-y .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(200ms + var(--d))}
.ci-animate .ci-stack i,.ci-animate .ci-meter i{animation:ci-grow-x .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(250ms + var(--d,0ms))}
.ci-animate .ci-rate .arc{animation:ci-sweep 1s cubic-bezier(.2,.8,.2,1) both .15s}
@keyframes ci-rise{from{opacity:0;transform:translateY(14px)}}@keyframes ci-grow-y{from{transform:scaleY(0)}}@keyframes ci-grow-x{from{transform:scaleX(0)}}@keyframes ci-sweep{from{stroke-dashoffset:var(--c)}}
@media(max-width:1100px){.ci-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.ci-rate{grid-row:auto}.ci-talk{grid-column:span 4}.ci-hours,.ci-coverage,.ci-rank{grid-column:span 2}.ci-tile{grid-column:span 1}}
@media(max-width:720px){.ci-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ci-rate{grid-column:span 2}.ci-rate svg{width:96px;height:96px;flex-basis:96px}.ci-tile{grid-column:span 1}.ci-talk,.ci-hours,.ci-coverage,.ci-rank{grid-column:span 2}.ci-card{padding:14px;border-radius:16px}}
@media(prefers-reduced-motion:reduce){.ci-animate .ci-card,.ci-animate .ci-hour-bars i,.ci-animate .ci-stack i,.ci-animate .ci-meter i,.ci-animate .ci-rate .arc{animation:none}}

/* More > Templates (2026-10): summary strip, product sections, report cards with folding release notes. */
.tpl-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:8px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-xs)}
.tpl-summary div{display:grid;justify-items:center;padding:14px 8px}.tpl-summary div+div{border-left:1px solid var(--line)}.tpl-summary strong{font-size:24px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.tpl-summary small{color:var(--muted);font-size:12px}
.tpl-family{display:flex;align-items:center;gap:8px;margin:22px 4px 10px;font-size:14px;color:var(--text-soft)}.tpl-family small{padding:1px 8px;border-radius:99px;background:var(--surface-subtle);color:var(--muted);font-size:11px}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:14px}
.tpl-card{--tone:var(--brand);--tone-soft:var(--brand-soft);display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-xs);overflow:hidden;animation:ci-rise .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*50ms);transition:box-shadow .18s,transform .18s}
.tpl-card:hover{box-shadow:0 10px 28px rgba(9,45,67,.10)}.tpl-card.sample{--tone:var(--warning);--tone-soft:var(--warning-soft)}
.tpl-card{align-self:start}.tpl-card summary{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;cursor:pointer;list-style:none}.tpl-card summary::-webkit-details-marker{display:none}
.tpl-card summary>div{flex:1;min-width:0}.tpl-card h4{margin:0;font-size:16px;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tpl-card summary small{color:var(--muted);font-size:12.5px}
.tpl-icon{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border-radius:12px;background:var(--tone-soft);color:var(--tone)}
.tpl-version{padding:3px 10px;border-radius:99px;background:var(--tone-soft);color:var(--tone);font-size:12px;font-weight:700}
.tpl-chevron{color:var(--muted);transition:transform .18s}.tpl-card[open] .tpl-chevron{transform:rotate(180deg)}
.tpl-card[open] summary{border-bottom:1px solid var(--line)}
.tpl-id{display:block;margin:12px 16px 0;color:var(--muted);font-size:12px}
.tpl-card>p{margin:8px 16px 0;font-size:14px;line-height:1.5;color:var(--text-soft)}
.tpl-chips{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px 0}.tpl-chips:empty{display:none}.tpl-chips span{padding:3px 10px;border-radius:99px;background:var(--surface-subtle);color:var(--text-soft);font-size:12px;font-weight:600}
.tpl-notes{margin:14px 16px 0;padding:10px 12px;border-radius:12px;background:var(--surface-subtle);font-size:13px}.tpl-notes p{margin:4px 0 0;color:var(--muted);line-height:1.5}
.tpl-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.tpl-card footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding:10px 12px 10px 16px;border-top:1px solid var(--line)}.tpl-card footer small{color:var(--muted);font-size:12.5px}
.tpl-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px}.tpl-toolbar .search-shell{flex:1;min-width:0}
.tpl-filter{display:flex;align-items:center;gap:6px;padding:0 6px 0 12px;height:46px;flex:0 0 auto;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text-soft)}
.tpl-filter select{border:0;background:transparent;color:var(--text);font:inherit;font-size:14px;padding:0 4px;height:100%;cursor:pointer;max-width:44vw}

/* More > API Health overview (2026-10): every app's results at a glance. */
.api-overview{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.api-ov-head{display:flex;justify-content:space-between;gap:10px;font-size:14px}.api-ov-head span{color:var(--muted);font-size:12.5px}
.api-ov-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.api-ov-tile{display:grid;padding:10px 12px;border-radius:12px;background:var(--surface-subtle)}.api-ov-tile strong{font-size:22px;font-variant-numeric:tabular-nums;color:var(--text-soft)}.api-ov-tile small{color:var(--muted);font-size:12px}
.api-ov-tile.good{background:var(--success-soft)}.api-ov-tile.good strong{color:var(--success)}.api-ov-tile.warn{background:var(--warning-soft)}.api-ov-tile.warn strong{color:var(--warning)}.api-ov-tile.bad{background:var(--danger-soft)}.api-ov-tile.bad strong{color:var(--danger)}
.api-ov-progress{height:6px;margin-top:12px;border-radius:99px;background:var(--surface-subtle);overflow:hidden}.api-ov-progress i{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .3s ease}.api-ov-note{display:block;margin-top:6px;color:var(--muted);font-size:12px}
.api-app-tabs button .api-dot{width:7px;height:7px}
@media(max-width:520px){.api-ov-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.tpl-card{animation:none}}
.dl-search{margin-bottom:14px;max-width:none}
.dl-more{display:grid;justify-items:center;gap:6px;margin-top:14px}.dl-more small{color:var(--muted);font-size:12px}


/* Insights views (Tickets, Issues; Infographic.kt): stacked columns + a full-width card. */
.ci-wide{grid-column:span 6}.ci-wide>p,.ci-hours>p{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.ci-cols{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:6px;align-items:end;height:150px;margin-top:14px}
.ci-col{display:grid;grid-template-rows:1fr auto;height:100%;min-width:0;text-align:center}.ci-col span{margin-top:6px;color:var(--muted);font-size:10.5px;overflow:hidden;white-space:nowrap}
.ci-col-bar{align-self:end;display:flex;flex-direction:column-reverse;gap:2px;height:max(var(--h),3px);border-radius:8px;overflow:hidden;background:var(--surface-subtle);transform-origin:bottom}
.ci-col-bar i{display:block;min-height:2px}
.ci-animate .ci-col-bar{animation:ci-grow-y .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(200ms + var(--d))}
@media(max-width:1100px){.ci-wide{grid-column:span 4}}@media(max-width:720px){.ci-wide{grid-column:span 2}.ci-cols{gap:3px}}
@media(prefers-reduced-motion:reduce){.ci-animate .ci-col-bar{animation:none}}

/* Tickets toolbar (2026-10): one card — status tabs with counts + view/actions on top, search + company below. */
.tk-toolbar{display:grid;gap:12px;margin-bottom:18px;padding:12px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-xs)}
.tk-toolbar-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.tk-toolbar-row .tk-status-tabs{flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.tk-status-tabs button{white-space:nowrap}.tk-status-tabs .tk-count{margin-left:6px;padding:1px 7px;border-radius:99px;background:var(--surface-subtle);color:var(--muted);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.tk-status-tabs button.active .tk-count{background:color-mix(in srgb,currentColor 14%,transparent);color:inherit}
.tk-toolbar-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.tk-toolbar-row .search-shell{flex:1 1 320px;min-width:0}
.tk-insights-toggle[aria-pressed="true"]{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}
.tk-toolbar #my-ticket-filters{padding-top:2px}
@media(max-width:720px){.tk-toolbar-actions{margin-left:0;width:100%}.tk-toolbar-actions #create-ticket{margin-left:auto}}
.tk-toolbar-actions{flex-wrap:wrap}.tk-toolbar-actions .btn{white-space:nowrap}
@media(max-width:560px){.tk-toolbar-actions #create-ticket{flex:1 1 100%;justify-content:center}.ci-col:nth-child(even) span{visibility:hidden}}

/* Insights restyle (2026-10): a plain reporting look for Calls, Tickets and Issues - no icon chips, avatars or
   pastel tints. Labels sit above tabular figures, cards are flat with hairline borders, bars are square on a gridline. */
.ci-head{align-items:flex-end;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line)}.ci-head h3{font-size:18px;font-weight:700}.ci-head p{font-size:12.5px}
.ci-grid{gap:10px}
.ci-card{padding:16px 18px;border-radius:12px;box-shadow:none;border-color:var(--line)}
.ci-card h4{font-size:13px;font-weight:600;color:var(--text-soft);letter-spacing:.01em}.ci-card>p,.ci-wide>p,.ci-hours>p{font-size:12px}
.ci-tile{gap:6px;align-content:space-between;min-height:92px;border-top:3px solid var(--line)}
.ci-tile small{order:-1;color:var(--muted);font-size:12px;font-weight:600}
.ci-tile strong{font-size:30px;font-weight:650;letter-spacing:-.02em;color:var(--text)}
.ci-tile .material-symbols-rounded{display:none}
.ci-tile.brand{border-top-color:var(--brand)}.ci-tile.good{border-top-color:var(--success)}.ci-tile.warn{border-top-color:#d97706}
.ci-rate{gap:20px}.ci-rate svg{width:104px;height:104px;flex-basis:104px}.ci-rate circle{stroke-width:7}.ci-rate .arc{stroke-linecap:butt}
.ci-rate small{font-size:12px;font-weight:600}.ci-rate strong{font-size:34px;font-weight:650}
.ci-talk{padding:14px 18px}.ci-talk div+div{padding-left:16px;border-left:1px solid var(--line)}.ci-talk strong{font-size:19px;font-weight:650}
.ci-cols{gap:4px;padding-bottom:1px;background:repeating-linear-gradient(to top,var(--line) 0 1px,transparent 1px 25%);background-size:100% calc(100% - 17px);background-repeat:no-repeat}
.ci-col-bar{border-radius:3px 3px 0 0;background:transparent;gap:1px}
.ci-hour-bars{gap:2px;border-bottom:1px solid var(--line)}.ci-hour-bars i{border-radius:2px 2px 0 0}
.ci-stack{height:10px;border-radius:3px;gap:1px}.ci-stack i{border-radius:0}
.ci-legend{gap:6px 16px;font-size:12px}.ci-legend i{width:10px;height:10px;border-radius:2px}
.ci-rank ul{gap:10px}.ci-rank li{gap:12px}
.ci-pos{width:18px;flex:0 0 18px;color:var(--muted);font-size:12px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.ci-rank-top strong{font-weight:600}.ci-meter{height:4px;border-radius:2px}.ci-meter i{border-radius:2px;background:var(--brand)}.ci-meter i.all{background:var(--brand)}
.ci-animate .ci-card{animation:ci-fade .35s ease-out both;animation-delay:calc(var(--i)*30ms)}
@keyframes ci-fade{from{opacity:0;transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){.ci-animate .ci-card{animation:none}}

/* Insights v2 (2026-10, Infographic.kt): a reporting layout for Calls, Tickets and Issues - figures strip, SVG charts
   with gridlines and axis labels, doughnuts and ranked tables; every mark has a hover tooltip (#ins-tip). */
.ins{margin:0 0 22px}.ins-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ins-head h3{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em}.ins-head p{margin:0;color:var(--muted);font-size:13px}.ins-head strong{color:var(--text)}
.ins-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ins-card{min-width:0;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.ins-span-2{grid-column:span 2}.ins-span-3,.ins-figures{grid-column:1/-1}
.ins-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.ins-card-head h4{margin:0;font-size:14px;font-weight:650}.ins-card-head p{margin:3px 0 0;color:var(--muted);font-size:12.5px}
.ins-legend{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--text-soft);font-size:12px}.ins-legend span{display:inline-flex;align-items:center;gap:6px}.ins-legend i{width:10px;height:3px;border-radius:2px}
.ins-figures{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));padding:0}
.ins-figure{display:grid;gap:4px;align-content:start;padding:18px 20px}.ins-figure+.ins-figure{border-left:1px solid var(--line)}
.ins-label{color:var(--muted);font-size:12.5px;font-weight:500}.ins-figure strong{font-size:28px;font-weight:650;letter-spacing:-.025em;font-variant-numeric:tabular-nums;line-height:1.15}
.ins-delta{font-size:12px;color:var(--muted)}.ins-delta.up{color:var(--success)}.ins-delta.down{color:var(--danger)}
.ins-chart{display:block;width:100%;height:auto;overflow:visible}
.ins-grid-line{stroke:var(--line);stroke-width:1;shape-rendering:crispEdges}.ins-axis{fill:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.ins-line{fill:none;stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round}.ins-area{opacity:.08}
.ins-dot{fill:var(--surface);stroke-width:2;opacity:0;transition:opacity .12s}.ins-dot.ins-col-on{opacity:1}
.ins-hit{fill:transparent;cursor:crosshair}.ins-hit:hover{fill:color-mix(in srgb,var(--text) 4%,transparent)}
.ins-bar{transform-box:fill-box;transform-origin:bottom}
.ins-donut{display:grid;grid-template-columns:140px 1fr;gap:18px;align-items:center}.ins-donut svg{width:140px;height:140px;transform:rotate(-90deg)}
.ins-donut text{transform:rotate(90deg);transform-origin:70px 70px}.ins-donut-total{font-size:22px;font-weight:650;fill:var(--text)}
.ins-track{fill:none;stroke:var(--surface-subtle);stroke-width:16}.ins-slice{fill:none;stroke-width:16;cursor:pointer;transition:stroke-width .12s}.ins-slice:hover{stroke-width:19}
.ins-donut ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}.ins-donut li{display:grid;grid-template-columns:10px 1fr auto 40px;align-items:center;gap:8px;font-size:13px}
.ins-donut li i{width:10px;height:10px;border-radius:2px}.ins-donut li strong{font-variant-numeric:tabular-nums}.ins-donut li small{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.ins-table{width:100%;border-collapse:collapse;font-size:13px}.ins-table tr+tr td{border-top:1px solid var(--line)}.ins-table td{padding:9px 0}.ins-table tr:hover td{background:color-mix(in srgb,var(--text) 3%,transparent)}
.ins-pos{width:26px;color:var(--muted);font-variant-numeric:tabular-nums}.ins-name span:first-child{display:block;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ins-name{min-width:0;padding-right:12px!important}.ins-meter{display:block;height:3px;margin-top:6px;border-radius:2px;background:var(--surface-subtle)}.ins-meter i{display:block;height:100%;border-radius:2px;background:var(--brand)}
.ins-num{width:54px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}.ins-share{width:48px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.ins-empty{margin:0;color:var(--muted);font-size:13px}
.ins-tip{position:fixed;z-index:200;display:grid;gap:2px;min-width:120px;padding:8px 10px;border-radius:8px;background:#0f172a;color:#f8fafc;font-size:12px;line-height:1.35;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .1s,transform .1s;box-shadow:0 8px 24px rgba(15,23,42,.25)}
.ins-tip.on{opacity:1;transform:none}.ins-tip strong{font-weight:650}.ins-tip span{color:#cbd5e1;font-variant-numeric:tabular-nums}
.ins-animate .ins-card{animation:ins-in .4s ease-out both}.ins-animate .ins-card:nth-child(2){animation-delay:40ms}.ins-animate .ins-card:nth-child(3){animation-delay:80ms}.ins-animate .ins-card:nth-child(n+4){animation-delay:120ms}
.ins-animate .ins-line{stroke-dasharray:1;stroke-dashoffset:1;animation:ins-draw 1s .15s ease-out forwards}
.ins-animate .ins-bar{animation:ins-rise .55s ease-out both;animation-delay:calc(120ms + var(--d,0ms))}
.ins-animate .ins-slice{animation:ins-fade .6s .2s ease-out both}.ins-animate .ins-meter i{animation:ins-grow .7s .2s ease-out both;transform-origin:left}
@keyframes ins-in{from{opacity:0;transform:translateY(6px)}}@keyframes ins-draw{to{stroke-dashoffset:0}}@keyframes ins-rise{from{transform:scaleY(0)}}@keyframes ins-fade{from{opacity:0}}@keyframes ins-grow{from{transform:scaleX(0)}}
@media(max-width:1100px){.ins-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ins-span-2{grid-column:1/-1}.ins-figures{grid-template-columns:repeat(min(var(--n),3),minmax(0,1fr))}.ins-figure:nth-child(4){border-left:0}.ins-figure:nth-child(n+4){border-top:1px solid var(--line)}}
@media(max-width:720px){.ins-grid{grid-template-columns:1fr}.ins-figures{grid-template-columns:repeat(2,minmax(0,1fr))}.ins-figure{padding:14px 16px}.ins-figure:nth-child(odd){border-left:0}.ins-figure:nth-child(even){border-left:1px solid var(--line)}.ins-figure:nth-child(n+3){border-top:1px solid var(--line)}.ins-figure strong{font-size:24px}.ins-donut{grid-template-columns:110px 1fr}.ins-donut svg{width:110px;height:110px}}
@media(prefers-reduced-motion:reduce){.ins-animate .ins-card,.ins-animate .ins-line,.ins-animate .ins-bar,.ins-animate .ins-slice,.ins-animate .ins-meter i{animation:none;stroke-dashoffset:0}}
.calls-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.ins-controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin:-4px 0 12px}
.ins-controls .ins-export{margin-right:auto}

/* Ticket details popup (2026-10): clean header with pills, underline tabs, a description block and one label/value list. */
.ticket-modal .modal-body{overflow-x:hidden}
.td-head{display:grid;gap:8px;padding:2px 0 16px}
.td-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.td-number{padding:3px 9px;border-radius:6px;background:var(--surface-subtle);color:var(--text-soft);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.td-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:650;background:var(--surface-subtle);color:var(--text-soft)}
.td-pill:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.td-status-open{background:var(--danger-soft);color:var(--danger)}.td-status-in_progress{background:var(--brand-soft);color:var(--brand)}.td-status-completed{background:var(--success-soft);color:var(--success)}
.td-priority-high{background:var(--danger-soft);color:var(--danger)}.td-priority-normal{background:var(--warning-soft);color:var(--warning)}.td-priority-low{background:var(--success-soft);color:var(--success)}
.td-title{margin:2px 0 0;font-size:22px;line-height:1.25;letter-spacing:-.02em;overflow-wrap:anywhere}
.td-meta{margin:0;color:var(--muted);font-size:13.5px}
.td-tabs{display:flex;gap:4px;margin:0 0 18px;padding:0;border-bottom:1px solid var(--line);background:none;border-radius:0;overflow-x:auto;scrollbar-width:none}
.td-tabs::-webkit-scrollbar{display:none}
.td-tabs button{flex:0 0 auto;min-height:40px;padding:8px 12px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--muted);font-size:14px;font-weight:600;box-shadow:none}
.td-tabs button.active{color:var(--text);border-bottom-color:var(--brand);background:none;box-shadow:none}
.td-tabs button:hover{color:var(--text)}
.td-block{padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.td-block+.td-block{margin-top:12px}
.td-block-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.td-block-head h4{margin:0;font-size:13px;font-weight:650;color:var(--text-soft)}
.td-description{margin:0;font-size:14.5px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.td-resolution{border-color:color-mix(in srgb,var(--success) 35%,var(--line));background:color-mix(in srgb,var(--success-soft) 45%,var(--surface))}
.td-muted{color:var(--muted);font-size:12.5px}
.td-link{padding:0;border:0;background:none;color:var(--brand);font:inherit;font-size:13px;font-weight:650;cursor:pointer}.td-link:hover{text-decoration:underline}
.td-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;margin:0}
.td-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-top:1px solid var(--line);min-width:0}
.td-list .td-row:nth-child(-n+2){border-top:0}
.td-row dt{color:var(--muted);font-size:13px;white-space:nowrap}
.td-row dd{margin:0;text-align:right;font-size:14px;font-weight:550;overflow-wrap:anywhere;min-width:0}
.td-row dd .td-link{margin-left:10px}
.ticket-modal .modal-actions{display:block}
.td-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;width:100%}
.td-actions-main,.td-actions-resolve{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.td-actions-resolve>span{color:var(--muted);font-size:12.5px;margin-right:2px}
.td-problem{display:flex;align-items:center;gap:10px;min-width:0;max-width:100%;grid-column:1/-1;padding:7px 12px 7px 10px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.td-problem:hover:not(:disabled){border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
.td-problem:disabled{opacity:.55;cursor:not-allowed}
.td-problem>.material-symbols-rounded:first-child{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--brand-soft);color:var(--brand);font-size:19px;flex:0 0 32px}
.td-problem.empty>.material-symbols-rounded:first-child{background:color-mix(in srgb,var(--warning) 16%,transparent);color:var(--warning)}
.td-problem>span:nth-child(2){display:grid;min-width:0;flex:1}.td-problem small{color:var(--muted);font-size:11.5px}.td-problem strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-problem>.material-symbols-rounded:last-child{color:var(--muted);font-size:20px}
.problem-modal{max-width:640px}.problem-search{margin-bottom:12px}
.problem-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;max-height:min(60vh,520px);overflow:auto;padding:2px}
.problem-tile{display:flex;align-items:center;gap:10px;min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);text-align:left;cursor:pointer;animation:ci-rise .3s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*15ms);transition:border-color .15s,background .15s,transform .15s}
.problem-tile .material-symbols-rounded{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;border-radius:10px;background:var(--surface-subtle);color:var(--brand);font-size:19px}
.problem-tile strong{font-size:13.5px;font-weight:600;line-height:1.25}
.problem-tile:hover{border-color:var(--brand);transform:translateY(-1px)}
.problem-tile.selected{border-color:var(--brand);background:var(--brand-soft)}.problem-tile.selected .material-symbols-rounded{background:var(--brand);color:#fff}
@media(max-width:720px){.problem-grid{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.problem-tile{animation:none}}
.td-actions .btn .material-symbols-rounded{font-size:18px}
@media(max-width:720px){
  .td-title{font-size:19px}.td-list{grid-template-columns:1fr}.td-list .td-row:nth-child(2){border-top:1px solid var(--line)}
  .td-block{padding:14px}
  .td-actions,.td-actions-main,.td-actions-resolve{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .td-actions{grid-template-columns:1fr}.td-actions-resolve>span{grid-column:1/-1}.td-actions .btn{width:100%;justify-content:center}
}
@media(max-width:720px){.td-actions-resolve{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}.td-actions-resolve .btn{padding-inline:8px;font-size:12.5px}}

/* Create ticket: optional location search; ticket detail: route map */
.location-search{display:flex;gap:8px}.location-search .input{flex:1}
.location-results{display:grid;gap:6px;margin-top:8px}
.location-result{display:flex;align-items:flex-start;gap:8px;text-align:left;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font:inherit;color:inherit;cursor:pointer}
.location-result:hover{border-color:var(--brand)}
.location-picked{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--success);border-radius:10px;background:color-mix(in srgb,var(--success) 8%,transparent)}
.location-picked span:nth-child(2){flex:1}
.ticket-route{height:min(640px,80vh);margin-top:8px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ticket-route iframe{width:100%;height:100%;border:0;display:block}
/* In-app call popup (CallScreen) */
.call-modal .modal-body{padding:0}
.call-frame{display:block;width:100%;height:min(560px,75vh);border:0;border-radius:0 0 16px 16px}

/* Apps tab: when each install was last opened, coloured by AppInstalls.freshness */
.opened-age{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.opened-age i{width:7px;height:7px;border-radius:50%;flex:none}
.access-code-table tr.is-live{cursor:pointer}
.ac-details-url{margin:0 0 12px;color:var(--muted);font-size:13px;word-break:break-all}
.ac-details dl{display:grid;grid-template-columns:max-content 1fr;gap:10px 16px;margin:0;font-size:14px}
.ac-details dt{color:var(--muted);font-weight:600}
.ac-details dd{margin:0;word-break:break-word}
.ac-details dd.good{color:var(--success)}.ac-details dd.warn{color:var(--warning)}.ac-details dd.bad{color:var(--danger);font-weight:600}
.subtask-delete{color:var(--muted)}.subtask-delete:hover,.subtask-delete.armed{color:var(--danger)}.subtask-delete.armed{font-size:12.5px;font-weight:700}
.td-delete{margin-left:auto}
/* Leaderboard (More > Leaderboard) */
.lb-team{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr);gap:18px;align-items:center;padding:22px 24px;border-radius:22px;color:#fff;background:linear-gradient(135deg,#102d44 0%,#1d4f70 55%,#2563eb 120%);box-shadow:0 18px 40px rgba(16,45,68,.25);position:relative;overflow:hidden;animation:ci-rise .5s cubic-bezier(.2,.8,.2,1) both}
.lb-team::after{content:"";position:absolute;inset:-40% -10% auto auto;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(255,207,74,.35),transparent 70%);animation:lb-glow 6s ease-in-out infinite alternate}
@keyframes lb-glow{to{transform:translate(-40px,30px) scale(1.15)}}
.lb-team-main small{display:block;opacity:.8;font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:11.5px}
.lb-team-main strong{font-size:52px;line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.lb-team-main>span{margin-left:6px;opacity:.85}
.lb-team-main em{display:flex;align-items:center;gap:4px;margin-top:6px;font-style:normal;font-size:13px;font-weight:600}.lb-team-main em.up{color:#86efac}.lb-team-main em.down{color:#fca5a5}
.lb-team-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;position:relative;z-index:1}
.lb-team-stats div{display:grid;justify-items:start;gap:2px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.1);backdrop-filter:blur(6px)}
.lb-team-stats b{font-size:24px;font-variant-numeric:tabular-nums}.lb-team-stats small{opacity:.8;font-size:12px}.lb-team-stats .material-symbols-rounded{opacity:.85;font-size:20px}
.lb-categories{margin:18px 0 6px}
.lb-podium{height:340px;margin:0 -8px}.lb-podium iframe{width:100%;height:100%;border:0;background:transparent}
.lb-you{display:flex;align-items:center;gap:8px;margin:4px 0 12px;padding:10px 14px;border-radius:14px;background:var(--brand-soft);color:var(--brand);font-size:14px}
.lb-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lb-list li{display:grid;grid-template-columns:34px 42px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-xs);animation:ci-rise .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*60ms);transition:transform .18s,box-shadow .18s}
.lb-list li:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(9,45,67,.1)}
.lb-list li.empty{display:block;text-align:center;color:var(--muted)}
.lb-list li.me{border-color:var(--brand);background:color-mix(in srgb,var(--brand-soft) 60%,var(--surface))}
.lb-rank{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--surface-subtle);color:var(--muted);font-weight:800;font-size:13px}
.top-1 .lb-rank{background:linear-gradient(135deg,#ffd76a,#e0a21a);color:#5b3b00;box-shadow:0 0 0 4px rgba(245,184,46,.2)}
.top-2 .lb-rank{background:linear-gradient(135deg,#e5e9ee,#9aa3ae);color:#2b3440}
.top-3 .lb-rank{background:linear-gradient(135deg,#f0b88a,#b8692f);color:#4a2408}
.lb-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#1d4f70,#2563eb);color:#fff;font-weight:800;font-size:14px}
.lb-name{display:grid;gap:3px;min-width:0}.lb-name strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-name strong small{margin-left:4px;padding:1px 7px;border-radius:99px;background:var(--brand);color:#fff;font-size:10.5px;vertical-align:2px}
.lb-name>small{color:var(--muted);font-size:12px}
.lb-bar{display:block;height:6px;border-radius:99px;background:var(--surface-subtle);overflow:hidden}
.lb-bar b{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#2563eb,#0d9488);transition:width .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*60ms + .2s)}
.top-1 .lb-bar b{background:linear-gradient(90deg,#f5b82e,#f97316)}
.lb-list.ready .lb-bar b{width:var(--w)}
.lb-score{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;text-align:right}.lb-score small{margin-left:3px;color:var(--muted);font-size:11px;font-weight:600}
@media(max-width:720px){.lb-team{grid-template-columns:1fr;padding:18px}.lb-team-main strong{font-size:42px}.lb-podium{height:280px}.lb-list li{grid-template-columns:28px 36px minmax(0,1fr) auto;gap:10px;padding:10px 12px}.lb-avatar{width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){.lb-team,.lb-list li{animation:none}.lb-team::after{animation:none}.lb-bar b{transition:none}}

/* Customer portal popups: ticket details and new ticket. */
.cp-modal{width:min(780px,100%)}
.cp-modal .modal-head{border-bottom:0}
.cp-modal .modal-head h2{font-size:14px;font-weight:700;color:var(--muted);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.cp-modal .modal-body{padding-top:4px}
.cp-modal .modal-actions{border-top:1px solid var(--line)}
.cp-modal .modal-actions .btn{border-radius:999px;padding-inline:20px;gap:7px}
.cp-modal .modal-actions .btn .material-symbols-rounded{font-size:18px}
.cp-hero{position:relative;padding:20px 22px 22px;border-radius:18px;background:linear-gradient(140deg,color-mix(in srgb,var(--stage) 13%,var(--surface)),var(--surface) 70%);border:1px solid color-mix(in srgb,var(--stage) 22%,var(--line));overflow:hidden}
.cp-hero-pills{display:flex;flex-wrap:wrap;gap:6px}
.cp-hero h3{margin:12px 0 20px;font-size:clamp(20px,3vw,26px);line-height:1.2;letter-spacing:-.02em;font-weight:750;overflow-wrap:anywhere}
.cp-tracker{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.cp-tracker li{position:relative;display:grid;justify-items:center;gap:7px;text-align:center;color:var(--muted);font-size:12.5px;font-weight:600}
.cp-tracker li+li::before{content:"";position:absolute;top:14px;right:calc(50% + 18px);left:calc(-50% + 18px);height:3px;border-radius:3px;background:var(--line-strong)}
.cp-tracker li.done+li::before{background:var(--stage)}
.cp-tracker i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--line-strong);background:var(--surface);font-style:normal;font-weight:750;font-size:13px}
.cp-tracker i .material-symbols-rounded{font-size:18px}
.cp-tracker li.done,.cp-tracker li.now{color:var(--text)}
.cp-tracker li.done i{border-color:var(--stage);background:var(--stage);color:#fff}
.cp-tracker li.now i{border-color:var(--stage);color:var(--stage);box-shadow:0 0 0 5px color-mix(in srgb,var(--stage) 18%,transparent);animation:cp-pulse 2s ease-in-out infinite}
@keyframes cp-pulse{50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--stage) 6%,transparent)}}
.cp-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.cp-facts>div{display:flex;align-items:center;gap:12px;min-width:0;padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.cp-facts .material-symbols-rounded{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--brand-soft);color:var(--brand);font-size:20px}
.cp-facts>div>div{min-width:0}
.cp-facts label,.cp-block>label,.cp-resolution label,.cp-composer>label{display:block;color:var(--muted);font-size:12px;font-weight:600}
.cp-facts strong{display:block;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-block{margin-top:14px;padding:15px 17px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.cp-block p{margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;color:var(--text-soft)}
.cp-block p.muted{color:var(--muted);font-style:italic}
.cp-block .attachment-grid{margin-top:9px}
.cp-resolution{display:flex;gap:13px;margin-top:14px;padding:15px 17px;border-radius:14px;background:var(--tk-done-bg);border:1px solid color-mix(in srgb,var(--tk-done) 28%,transparent)}
.cp-resolution>.material-symbols-rounded{color:var(--tk-done);font-size:24px}
.cp-resolution label{color:var(--tk-done)}
.cp-resolution p{margin:4px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}
.cp-updates{position:relative;padding-left:22px}
.cp-updates::before{content:"";position:absolute;left:8px;top:16px;bottom:16px;width:2px;border-radius:2px;background:var(--line)}
.cp-updates .update-card{position:relative;border:1px solid var(--line);border-radius:14px;box-shadow:none;padding:13px 15px;background:var(--surface)}
.cp-updates .update-card::before{content:"";position:absolute;left:-19px;top:20px;width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px var(--surface-raised)}
.cp-updates .update-card-head{justify-content:flex-start;gap:10px}
.cp-updates .update-card-head .tone-avatar{width:32px;height:32px;flex:0 0 32px;font-size:13px}
.cp-updates .update-author{display:grid}.cp-updates .update-author small{color:var(--muted);font-size:12px}
.cp-updates .update-card p{margin:9px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55}
.cp-updates .update-card img,.cp-updates .update-card video{margin-top:10px}
.cp-updates>.empty{padding:16px!important;margin:0;border:1px dashed var(--line-strong);border-radius:14px;text-align:center;color:var(--muted)}
.cp-composer{margin-top:16px;padding:15px;border:1px solid var(--line);border-radius:16px;background:var(--surface-subtle)}
.cp-composer textarea{margin-top:7px;resize:vertical;background:var(--surface)}
.cp-composer-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:9px}
.cp-attach{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text-soft);font-size:13px;font-weight:600;cursor:pointer}
.cp-attach:hover{border-color:var(--brand);color:var(--brand)}
.cp-attach .material-symbols-rounded{font-size:18px}
.cp-composer-foot .field-help{margin:0;overflow-wrap:anywhere}
.cp-closed-note{display:flex;align-items:center;gap:9px;margin:16px 0 0;padding:12px 15px;border-radius:12px;background:var(--surface-subtle);color:var(--muted);font-size:13.5px}
.cp-closed-note .material-symbols-rounded{font-size:18px}
.cp-new{width:min(600px,100%)}
.cp-new .modal-head h2{font-size:20px;color:var(--text);letter-spacing:-.02em}
.cp-new-intro{display:flex;gap:13px;align-items:flex-start;margin-bottom:18px;padding:15px 16px;border-radius:16px;background:linear-gradient(140deg,var(--brand-soft),transparent 85%)}
.cp-new-intro>.material-symbols-rounded{display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:var(--brand);color:#fff;font-size:22px}
.cp-new-intro strong{font-size:15px}
.cp-new-intro p{margin:3px 0 0;color:var(--text-soft);font-size:13.5px;line-height:1.5}
.cp-new .field>label:first-child{font-weight:650}
.cp-new .field>label small{color:var(--muted);font-weight:500}
.cp-new .input{border-radius:12px}
.cp-drop{display:grid;justify-items:center;gap:3px;padding:20px 16px;border:2px dashed var(--line-strong);border-radius:14px;background:var(--surface-subtle);text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.cp-drop:hover{border-color:var(--brand);background:var(--brand-soft)}
.cp-drop .material-symbols-rounded{font-size:30px;color:var(--brand)}
.cp-drop strong{font-size:14px}.cp-drop small{color:var(--muted);font-size:12.5px}
.cp-file-name:not(:empty){display:flex;width:fit-content;max-width:100%;align-items:center;gap:6px;margin-top:8px;padding:6px 11px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-weight:600;overflow-wrap:anywhere}
.cp-file-name:not(:empty)::before{content:"attach_file";font-family:"Material Symbols Rounded";font-size:16px}
@media (max-width:560px){.cp-facts{grid-template-columns:1fr}.cp-hero{padding:17px 16px 19px}.cp-tracker li{font-size:11px}.cp-modal .modal-actions .btn{flex:1}}
@media (prefers-reduced-motion:reduce){.cp-tracker li.now i{animation:none}}
/* Driver app logs: driver and date filters under the search. */
.dl-search{margin-bottom:10px}
.dl-filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.dl-driver{position:relative;display:flex;align-items:center;flex:0 1 240px;min-width:0}
.dl-driver>.material-symbols-rounded{position:absolute;left:11px;font-size:19px;color:var(--muted);pointer-events:none}
.dl-driver select{padding-left:36px;border-radius:999px;font-weight:600;min-height:40px}
.dl-driver.on select{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.dl-driver.on>.material-symbols-rounded{color:var(--brand)}
.dl-range{margin:0;width:auto;max-width:100%;overflow-x:auto;scrollbar-width:none}
.dl-range button{white-space:nowrap}
.dl-custom{display:flex;flex-wrap:wrap;gap:8px}
.dl-custom[hidden]{display:none}
.dl-custom label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
.dl-custom .input{min-height:40px;width:auto;border-radius:10px}
@media (max-width:640px){.dl-driver{flex:1 1 100%}.dl-range{width:100%}.dl-range button{flex:1}.dl-custom{width:100%}.dl-custom label{flex:1}.dl-custom .input{flex:1;min-width:0}}
/* More > Device management */
.dm-list{display:grid;gap:12px}
.dm-phone{border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-xs);overflow:hidden}
.dm-phone header{display:flex;align-items:center;gap:12px;padding:14px 16px}
.dm-phone-icon{display:grid;place-items:center;flex:0 0 40px;height:40px;border-radius:11px;background:var(--brand-soft);color:var(--brand);font-size:22px}
.dm-phone-main{display:grid;gap:4px;flex:1;min-width:0}.dm-phone-main strong{font-size:15px;overflow-wrap:anywhere}
.dm-phone-main small{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--muted);font-size:12px}
.dm-imei{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;background:var(--success-soft);color:var(--success);font-weight:650;font-variant-numeric:tabular-nums}
.dm-imei .material-symbols-rounded{font-size:14px}.dm-imei.is-missing{background:var(--warning-soft);color:var(--warning)}
.dm-records{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.dm-records li{display:grid;grid-template-columns:minmax(130px,1.2fr) minmax(90px,1fr) 80px 90px minmax(120px,1fr);align-items:center;gap:10px;padding:9px 16px;font-size:13px}
.dm-records li+li{border-top:1px solid var(--line)}
.dm-records-head{background:var(--surface-subtle);color:var(--muted);font-size:11px!important;font-weight:650;text-transform:uppercase;letter-spacing:.04em;padding-top:7px!important;padding-bottom:7px!important}
.dm-app{display:inline-flex;align-items:center;gap:7px;font-weight:650}.dm-app .material-symbols-rounded{font-size:18px;color:var(--muted)}
.dm-user{overflow-wrap:anywhere}.dm-records code{font-size:12px;color:var(--text-soft)}.dm-version{color:var(--text-soft);font-variant-numeric:tabular-nums}
.dm-opened{display:inline-flex;align-items:center;gap:6px;color:var(--text-soft)}.dm-opened i{width:8px;height:8px;border-radius:50%;background:var(--fresh)}
.dm-name-field{margin-top:12px}.dm-modal-label{margin:14px 0 6px;font-size:12px;font-weight:700;color:var(--text-soft)}
.dm-modal-records{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.dm-modal-records li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.dm-modal-records span{display:grid;gap:2px;min-width:0}.dm-modal-records small{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.dm-error{margin:12px 0 0;color:var(--danger);font-size:13px}
@media(max-width:720px){
  .dm-records-head{display:none!important}
  .dm-records li{grid-template-columns:1fr auto;gap:3px 10px}
  .dm-records .dm-app{grid-area:1/1}.dm-records .dm-opened{grid-area:1/2;justify-self:end}
  .dm-records .dm-user{grid-area:2/1;color:var(--text-soft)}.dm-records code{grid-area:2/2;justify-self:end}
  .dm-records .dm-version{grid-area:3/1;font-size:12px}
}
/* Driver app logs > Insights: categorical slots validated for both themes (dataviz validate_palette.js); slot 7 = Other */
.dl-insights{--s0:#2a78d6;--s1:#eb6834;--s2:#1baf7a;--s3:#eda100;--s4:#e87ba4;--s5:#008300;--s6:#6250d6;--s7:#9aa3ad}
[data-theme="dark"] .dl-insights{--s0:#3987e5;--s1:#d95926;--s2:#199e70;--s3:#c98500;--s4:#d55181;--s5:#008300;--s6:#9085e9;--s7:#5d6a78}
.dl-insights .s-0{background:var(--s0)}.dl-insights .s-1{background:var(--s1)}.dl-insights .s-2{background:var(--s2)}.dl-insights .s-3{background:var(--s3)}
.dl-insights .s-4{background:var(--s4)}.dl-insights .s-5{background:var(--s5)}.dl-insights .s-6{background:var(--s6)}.dl-insights .s-7{background:var(--s7)}
.u-range{display:flex;align-items:center;gap:6px;flex:1 1 150px}.u-range span{font-size:12px;color:var(--muted)}
.dl-ins-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.dl-ins-tile{display:grid;gap:4px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-xs)}
.dl-ins-tile span{color:var(--muted);font-size:12px}.dl-ins-tile strong{font-size:24px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.dl-ins-card{padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-xs)}
.dl-ins-card h4{margin:0;font-size:15px}.dl-ins-card header p{margin:3px 0 0;color:var(--muted);font-size:12px}
.dl-ins-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:12px 0 4px;padding:0;list-style:none;font-size:12px;color:var(--text-soft)}
.dl-ins-legend li{display:inline-flex;align-items:center;gap:6px}.dl-ins-legend i{width:10px;height:10px;border-radius:3px}
.dl-ins-chart{display:grid;gap:4px;margin-top:8px}
.ins-row{display:grid;grid-template-columns:minmax(110px,180px) 1fr;align-items:center;gap:12px;padding:6px 0}
.ins-label{display:grid;gap:1px;min-width:0}.ins-label strong{font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ins-label small{color:var(--muted);font-size:11px}
.ins-track{display:flex;align-items:center;gap:8px;min-width:0}
.ins-bar{display:flex;gap:2px;height:18px;min-width:6px}
.ins-bar span{min-width:3px;flex-basis:0;transition:opacity .15s}.ins-bar span:first-child{border-radius:4px 0 0 4px}.ins-bar span:last-child{border-radius:0 4px 4px 0}.ins-bar span:only-child{border-radius:4px}
.ins-bar:hover span{opacity:.45}.ins-bar span:hover{opacity:1}
.ins-track b{flex:0 0 auto;font-size:12px;font-weight:650;color:var(--text-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.dl-ins-table{margin-top:12px}.dl-ins-table summary{cursor:pointer;color:var(--text-soft);font-size:13px;font-weight:650}
.dl-ins-table table{width:100%;margin-top:8px;border-collapse:collapse;font-size:13px}
.dl-ins-table th{text-align:left;color:var(--muted);font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.04em;padding:6px 8px;border-bottom:1px solid var(--line)}
.dl-ins-table td{padding:6px 8px;border-bottom:1px solid var(--line)}.dl-ins-table td:last-child,.dl-ins-table th:last-child{text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:720px){.ins-row{grid-template-columns:1fr;gap:4px}.dl-ins-tile strong{font-size:19px}}
/* Device management: the phone page */
button.dm-phone-main{border:0;background:none;padding:0;text-align:left;color:inherit;cursor:pointer;font:inherit}
button.dm-phone-main strong{display:inline-flex;align-items:center;gap:2px}button.dm-phone-main strong .material-symbols-rounded{font-size:20px;color:var(--muted);transition:transform .15s}
button.dm-phone-main:hover strong .material-symbols-rounded{transform:translateX(2px);color:var(--text)}
.dm-phone-page h3{margin:4px 0 10px;font-size:13px;font-weight:700;color:var(--text-soft);text-transform:uppercase;letter-spacing:.04em}
.dm-phone-page h3+.dm-facts{margin-bottom:20px}
.dm-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
/* Cell lines drawn outside each cell; the list clips the ones on its outer edge. */
.dm-facts div{display:grid;gap:2px;padding:10px 12px;box-shadow:1px 0 0 var(--line),0 1px 0 var(--line)}.dm-facts dt{color:var(--muted);font-size:11px;font-weight:650}.dm-facts dd{margin:0;font-size:13px;overflow-wrap:anywhere}
.dm-app-section{margin-bottom:14px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-subtle)}
.dm-app-section header{display:flex;align-items:center;gap:10px;margin-bottom:10px}.dm-app-section header div{display:grid;gap:2px}
.dm-app-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--brand-soft);color:var(--brand);font-size:19px}
.dm-app-section header small{display:inline-flex;align-items:center;gap:6px;color:var(--text-soft);font-size:12px}.dm-app-section header small i{width:8px;height:8px;border-radius:50%;background:var(--fresh)}
.dm-fields{margin-top:10px}.dm-fields summary{cursor:pointer;color:var(--text-soft);font-size:12px;font-weight:650}
.dm-fields dl{display:grid;grid-template-columns:minmax(110px,auto) 1fr;gap:4px 12px;margin:8px 0 0;font-size:12px}.dm-fields dt{color:var(--muted)}.dm-fields dd{margin:0;overflow-wrap:anywhere}
/* More > Devices: By phone / By app, and Online / Offline on Support App records */
.dm-views{margin-bottom:12px}
.dm-presence{margin-left:6px;padding:1px 7px;border-radius:99px;background:var(--surface-subtle);color:var(--muted);font-size:11px;font-weight:650}
.dm-presence.is-online{background:var(--success-soft);color:var(--success)}
.dm-open-install{margin-top:10px}