:root { --ink:#152321; --muted:#687471; --paper:#f3f1e9; --card:#fffef9; --line:#d7d9d0; --accent:#e15f3f; --green:#1f6d58; --shadow:0 12px 35px rgba(25,38,34,.08); font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; color:var(--ink); background:var(--paper); }
:root { --bad:#a53225; --warn:#9a6206; --good-bg:#e7f0eb; --bad-bg:#fbe4e1; --bad-strong:#c0392b; --warn-bg:#fff1d9; --subtle:#f7f6f0; --good-bg-2:#eef5f1; --subtle-2:#f2f1ea; --info-bg:#e6eef8; --notice-bg:#fff3dc; --notice-line:#e9d19e; --warn-dot:#d69a1f; --info:#2b5c99; --notice-bg-2:#fffaf0; --bad-line:#f1c4bd; --warn-line:#f0d9ab; --purple-bg:#efe8f7; --line-soft:#ecece6; --neutral-bg:#eceae4; --notice-line-2:#e9c77e; --good-line:#cfe2d8; --purple:#6a3f9c; --neutral-bg-2:#f0efe9; --chat-bot:#eef0ea; --tabs-bg:#e9e7de; --glow:#e4ede5; --info-line:#bcd0ea; --dot-idle:#b9bfbb; --strike:#a0a6a2; --hover-line:#9aa39f; --btn-hover:#185a48; --card-glass:rgba(255,254,249,.78); --input:#ffffff; --btn:#1f6d58; --overlay:rgba(15,27,24,.5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme:dark; --ink:#e5ebe8; --muted:#9ba8a3; --paper:#111614; --card:#1a201e; --line:#2d3633; --accent:#f08566; --green:#5cc19f; --btn:#2c8a6c; --btn-hover:#349c7b; --shadow:0 12px 35px rgba(0,0,0,.35); --bad:#f29a8c; --warn:#e9bb67; --good-bg:#183129; --bad-bg:#3b201d; --bad-strong:#e5604d; --warn-bg:#352a14; --subtle:#1f2624; --good-bg-2:#1b2c26; --subtle-2:#242c29; --info-bg:#1a2739; --info:#94baea; --notice-bg:#32290f; --notice-line:#5b4a1f; --warn-dot:#e3a940; --notice-bg-2:#2a2415; --bad-line:#5c2d27; --warn-line:#5b4621; --purple-bg:#2a2237; --purple:#c7a9ef; --line-soft:#262e2b; --neutral-bg:#272e2c; --notice-line-2:#6c5523; --good-line:#2c4b3f; --neutral-bg-2:#252c2a; --chat-bot:#222a27; --tabs-bg:#1e2523; --glow:#18261f; --info-line:#2e4568; --dot-idle:#4b5551; --strike:#6c7773; --hover-line:#47524e; --card-glass:rgba(26,32,30,.88); --input:#141a18; --overlay:rgba(0,0,0,.6); } }
:root[data-theme="dark"] { color-scheme:dark; --ink:#e5ebe8; --muted:#9ba8a3; --paper:#111614; --card:#1a201e; --line:#2d3633; --accent:#f08566; --green:#5cc19f; --btn:#2c8a6c; --btn-hover:#349c7b; --shadow:0 12px 35px rgba(0,0,0,.35); --bad:#f29a8c; --warn:#e9bb67; --good-bg:#183129; --bad-bg:#3b201d; --bad-strong:#e5604d; --warn-bg:#352a14; --subtle:#1f2624; --good-bg-2:#1b2c26; --subtle-2:#242c29; --info-bg:#1a2739; --info:#94baea; --notice-bg:#32290f; --notice-line:#5b4a1f; --warn-dot:#e3a940; --notice-bg-2:#2a2415; --bad-line:#5c2d27; --warn-line:#5b4621; --purple-bg:#2a2237; --purple:#c7a9ef; --line-soft:#262e2b; --neutral-bg:#272e2c; --notice-line-2:#6c5523; --good-line:#2c4b3f; --neutral-bg-2:#252c2a; --chat-bot:#222a27; --tabs-bg:#1e2523; --glow:#18261f; --info-line:#2e4568; --dot-idle:#4b5551; --strike:#6c7773; --hover-line:#47524e; --card-glass:rgba(26,32,30,.88); --input:#141a18; --overlay:rgba(0,0,0,.6); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 80% 0,var(--glow) 0,transparent 32%),var(--paper); }
button,input,select,textarea { font:inherit; }
button { border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:9px; padding:.68rem .95rem; cursor:pointer; font-weight:650; }
button:hover { border-color:var(--hover-line); }
.primary { color:white; border-color:var(--green); background:var(--btn); }
.topbar { display:flex; justify-content:space-between; align-items:flex-end; padding:2rem clamp(1rem,4vw,4rem) 1.4rem; border-bottom:1px solid var(--line); }
h1,h2,p { margin:0; } h1 { font-family:Georgia,serif; font-size:clamp(2rem,4vw,3.6rem); font-weight:500; letter-spacing:-.04em; } h2 { font-size:1.05rem; }
.eyebrow { color:var(--accent); font-size:.68rem; font-weight:800; letter-spacing:.16em; margin-bottom:.45rem; }
.actions { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }.status { color:var(--muted); font-size:.82rem; }
.user-chip { background:var(--good-bg); color:var(--green); border-radius:999px; padding:.4rem .8rem; font-size:.8rem; font-weight:700; }
.logout { color:var(--muted); font-size:.8rem; text-decoration:none; font-weight:600; } .logout:hover { color:var(--ink); }
.hint { color:var(--muted); font-size:.82rem; margin:0 0 1rem; }
.user-add { display:grid; grid-template-columns:1fr auto auto; gap:.6rem; margin-bottom:1rem; }
.users-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; max-height:50vh; overflow:auto; }
.users-list li { display:flex; justify-content:space-between; align-items:center; gap:.8rem; padding:.6rem .8rem; border:1px solid var(--line); border-radius:9px; }
.users-list small { display:block; color:var(--muted); margin-top:.15rem; }
.users-list .user-actions { display:flex; gap:.4rem; flex-shrink:0; } .users-list .user-actions button { padding:.4rem .6rem; font-size:.78rem; }
.users-list li.blocked strong { color:var(--muted); text-decoration:line-through; }
.users-list .you { color:var(--muted); font-size:.75rem; font-weight:700; }
#usersDialog { border:0; border-radius:15px; width:min(520px,calc(100vw - 2rem)); padding:1.3rem; box-shadow:0 25px 90px rgba(12,24,21,.3); }
#usersDialog::backdrop { background:var(--overlay); backdrop-filter:blur(3px); }
main { padding:1.4rem clamp(1rem,4vw,4rem) 3rem; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:1.2rem; }
.metrics article { background:var(--card-glass); padding:1rem 1.25rem; }.metrics span { display:block; color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; }.metrics strong { display:block; font-size:1.55rem; margin-top:.25rem; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:1.2rem; align-items:start; }
.asset-panel,.bot-panel { background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.toolbar { display:grid; grid-template-columns:minmax(200px,1fr) repeat(4,minmax(120px,160px)) auto; gap:.75rem; padding:1rem; border-bottom:1px solid var(--line); align-items:end; }
label span { display:block; color:var(--muted); font-size:.73rem; font-weight:700; margin-bottom:.35rem; }
input,select,textarea { width:100%; border:1px solid var(--line); border-radius:8px; background:var(--input); padding:.68rem .75rem; color:var(--ink); outline:none; } input:focus,select:focus,textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(31,109,88,.1); }
.table-wrap { overflow:auto; max-height:66vh; } table { width:100%; border-collapse:collapse; min-width:850px; } th { position:sticky; top:0; background:var(--subtle); z-index:1; text-align:left; color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; padding:.75rem; border-bottom:1px solid var(--line); } td { padding:.78rem .75rem; border-bottom:1px solid var(--line-soft); font-size:.84rem; vertical-align:top; } td small { display:block; color:var(--muted); margin-top:.2rem; }.tag { font-family:ui-monospace,monospace; font-size:.75rem; }.pill { display:inline-block; border-radius:999px; padding:.25rem .5rem; background:var(--good-bg); color:var(--green); font-size:.7rem; font-weight:700; }.empty { text-align:center; color:var(--muted); padding:3rem; }.message { margin:1rem; background:var(--notice-bg); border:1px solid var(--notice-line); padding:.8rem; border-radius:8px; font-size:.82rem; }
.bot-panel { min-height:520px; display:flex; flex-direction:column; }.bot-heading { display:flex; gap:.75rem; padding:1rem; border-bottom:1px solid var(--line); }.bot-heading p { font-size:.76rem; color:var(--muted); margin-top:.2rem; }.bot-mark { display:grid; place-items:center; width:36px; height:36px; background:var(--ink); color:var(--paper); border-radius:50%; font-size:.68rem; font-weight:800; }.chat { flex:1; padding:1rem; display:flex; flex-direction:column; gap:.65rem; max-height:440px; overflow:auto; }.bubble { max-width:90%; padding:.72rem .8rem; border-radius:10px; font-size:.82rem; line-height:1.45; white-space:pre-wrap; }.bubble.bot { background:var(--chat-bot); }.bubble.user { background:var(--btn); color:white; align-self:flex-end; }#chatForm { padding:1rem; border-top:1px solid var(--line); }#chatForm button { width:100%; margin-top:.5rem; }
dialog { border:0; border-radius:15px; width:min(780px,calc(100vw - 2rem)); padding:0; box-shadow:0 25px 90px rgba(12,24,21,.3); }dialog::backdrop { background:var(--overlay); backdrop-filter:blur(3px); }#assetForm { padding:1.3rem; }.dialog-head,.dialog-actions { display:flex; justify-content:space-between; align-items:center; }.dialog-head { margin-bottom:1.2rem; }.icon { border:0; font-size:1.5rem; padding:.2rem .6rem; }.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }.wide { grid-column:1/-1; }.dialog-actions { justify-content:flex-end; gap:.7rem; margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line); }
@media (max-width:950px){.workspace{grid-template-columns:1fr}.bot-panel{min-height:440px}.toolbar{grid-template-columns:1fr 1fr}.toolbar button{grid-column:1/-1}.topbar{align-items:flex-start;gap:1rem;flex-direction:column}.actions{width:100%;justify-content:space-between}}
@media (max-width:580px){.metrics{grid-template-columns:1fr}.form-grid,.toolbar{grid-template-columns:1fr}.wide{grid-column:auto}.actions{align-items:flex-start;flex-direction:column}}

/* employee portal */
.portal-main { max-width:980px; margin:0 auto; display:flex; flex-direction:column; gap:1.6rem; }
.portal-help { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:1.2rem 1.4rem; }
.portal-help p { color:var(--muted); font-size:.88rem; margin-top:.3rem; }
.portal-help button:disabled { opacity:.6; cursor:not-allowed; }
.portal-heading { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.8rem; }
.device-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }
.device { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1.1rem; display:flex; flex-direction:column; gap:.4rem; align-items:flex-start; }
.device h3 { margin:.2rem 0 0; font-size:1.05rem; }
.device p { margin:0; font-size:.84rem; color:var(--ink); }
.device small { color:var(--muted); font-size:.78rem; }
.device-grid .empty { grid-column:1/-1; background:var(--card); border:1px dashed var(--line); border-radius:12px; }
/* Excel sync badge */
.sync-badge { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.8rem; color:var(--ink); }
.sync-badge .dot { width:9px; height:9px; border-radius:50%; background:var(--dot-idle); flex-shrink:0; }
.sync-badge .dot.ok { background:var(--btn); }
.sync-badge .dot.warn { background:var(--warn-dot); }
.sync-badge .dot.bad { background:var(--bad-strong); }
.sync-badge .dot.busy { background:var(--btn); animation:pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.25; } }
@media (prefers-reduced-motion: reduce) { .sync-badge .dot.busy { animation:none; } }
#syncDialog { width:min(640px,calc(100vw - 2rem)); padding:1.3rem; }
.sync-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem 1.2rem; margin:0 0 1rem; }
.sync-facts dt { color:var(--muted); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.sync-facts dd { margin:.2rem 0 0; font-size:.88rem; } .sync-facts small { color:var(--muted); }
.sync-warnings { margin:0 0 1rem; padding:.7rem .9rem .7rem 1.8rem; background:var(--notice-bg); border:1px solid var(--notice-line); border-radius:8px; font-size:.82rem; display:grid; gap:.3rem; }
.sync-files { min-width:0; } .sync-files td { font-size:.8rem; }
@media (max-width:580px){ .sync-facts { grid-template-columns:1fr; } }
/* lifecycle status pills */
.pill.status-assigned { background:var(--good-bg); color:var(--green); }
.pill.status-in_stock { background:var(--info-bg); color:var(--info); }
.pill.status-reserved { background:var(--purple-bg); color:var(--purple); }
.pill.status-in_repair { background:var(--warn-bg); color:var(--warn); }
.pill.status-damaged { background:var(--bad-bg); color:var(--bad); }
.pill.status-lost, .pill.status-retired, .pill.status-none { background:var(--neutral-bg); color:var(--muted); }
.flag { display:block; width:max-content; margin-top:.3rem; font-size:.68rem; font-weight:700; color:var(--warn); cursor:help; }
.flag.bad { color:var(--bad); }
.muted { color:var(--muted); }
@media (max-width:950px){ .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* email link review */
.link-banner { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; background:var(--info-bg); border-color:var(--info-line); }
.link-banner button { padding:.45rem .8rem; font-size:.8rem; }
#linkDialog { width:min(680px,calc(100vw - 2rem)); padding:1.3rem; }
.link-details { max-height:55vh; overflow:auto; }
.link-details h3 { font-size:.9rem; margin:1rem 0 .4rem; }
.link-details table { min-width:0; } .link-details td { font-size:.8rem; padding:.45rem .5rem; }
/* device panel */
#deviceDialog { width:min(760px,calc(100vw - 2rem)); padding:1.3rem; max-height:90vh; overflow:auto; }
.device-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem 1.2rem; margin-bottom:1rem; }
.device-summary > div > span { display:block; color:var(--muted); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.device-summary strong { display:block; font-weight:600; font-size:.88rem; margin-top:.25rem; } .device-summary small { display:block; color:var(--muted); font-weight:500; }
.device-summary .wide { grid-column:1/-1; }
.device-actions { display:flex; gap:.5rem; flex-wrap:wrap; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.device-actions button:disabled { opacity:.45; cursor:not-allowed; }
.action-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; padding:1rem; background:var(--subtle); border:1px solid var(--line); border-radius:12px; }
.action-form h3, .action-form .segmented, .action-form .hint, .action-form .dialog-actions, .action-form .wide { grid-column:1/-1; }
.action-form h3 { margin:0; font-size:1rem; } .action-form .hint { margin:0; }
.action-form .dialog-actions { margin-top:0; padding-top:.6rem; }
.segmented { display:flex; gap:.4rem; flex-wrap:wrap; }
.segmented label { display:flex; align-items:center; gap:.4rem; border:1px solid var(--line); background:var(--card); border-radius:999px; padding:.4rem .8rem; font-size:.84rem; cursor:pointer; }
.segmented input { width:auto; margin:0; }
.segmented label:has(input:checked) { border-color:var(--green); color:var(--green); font-weight:700; }
.timeline-heading { margin:1.2rem 0 .6rem; font-size:.95rem; }
.timeline { list-style:none; margin:0; padding:0; display:grid; gap:0; }
.timeline li { display:grid; grid-template-columns:150px 1fr; gap:1rem; padding:.7rem 0; border-top:1px solid var(--line-soft); font-size:.84rem; }
.timeline time { color:var(--muted); font-size:.76rem; font-variant-numeric:tabular-nums; }
.timeline small { display:block; color:var(--muted); margin-top:.2rem; }
.timeline ul { margin:.3rem 0 0; padding-left:1.1rem; color:var(--muted); } .timeline s { color:var(--strike); }
.timeline q { color:var(--muted); font-style:italic; }
#deviceMessage { margin:0 0 1rem; }
@media (max-width:580px){ .device-summary, .action-form { grid-template-columns:1fr; } .timeline li { grid-template-columns:1fr; gap:.2rem; } }
/* overview strip */
.overview { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; margin-bottom:1.2rem; }
.overview > div { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:.9rem 1rem; }
.overview h3 { margin:0 0 .6rem; color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; }
.chips { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.chip { padding:.35rem .7rem; border-radius:999px; font-size:.8rem; font-weight:600; background:var(--subtle-2); }
.chip strong { font-variant-numeric:tabular-nums; }
.chip:disabled { opacity:.45; cursor:default; }
.chip.warn { background:var(--warn-bg); color:var(--warn); border-color:var(--warn-line); } .chip.bad { background:var(--bad-bg); color:var(--bad); border-color:var(--bad-line); }
.chip.status-assigned { background:var(--good-bg); color:var(--green); } .chip.status-in_stock { background:var(--info-bg); color:var(--info); }
.chip.status-in_repair { background:var(--warn-bg); color:var(--warn); } .chip.status-damaged { background:var(--bad-bg); color:var(--bad); }
.chip.status-reserved { background:var(--purple-bg); color:var(--purple); }
.chip-note { color:var(--muted); font-size:.76rem; }
.warn-text { color:var(--warn); font-weight:700; } .bad-text { color:var(--bad); font-weight:700; }
@media (max-width:950px){ .overview { grid-template-columns:1fr; } }
/* conflicts */
.conflict-heading { margin:1rem 0 .5rem; font-size:.95rem; }
.conflict { display:grid; grid-template-columns:1fr auto; gap:1rem; padding:.9rem; border:1px solid var(--notice-line); background:var(--notice-bg-2); border-radius:10px; margin-bottom:.6rem; }
.conflict p { margin:.3rem 0; font-size:.84rem; } .conflict small { color:var(--muted); }
.conflict ul { margin:.4rem 0 0; padding-left:1.1rem; font-size:.8rem; color:var(--muted); }
.conflict-actions { display:flex; flex-direction:column; gap:.4rem; } .conflict-actions button { padding:.45rem .7rem; font-size:.8rem; }
#syncDialog { max-height:90vh; overflow:auto; }
@media (max-width:580px){ .conflict { grid-template-columns:1fr; } .conflict-actions { flex-direction:row; flex-wrap:wrap; } }
/* intune */
.intune-box { background:var(--subtle); border:1px solid var(--line); border-radius:10px; padding:.8rem; }
.intune-box dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem 1rem; margin:.5rem 0; }
.intune-box dt { color:var(--muted); font-size:.68rem; font-weight:700; } .intune-box dd { margin:.1rem 0 0; font-size:.82rem; }
.intune-box button { margin-top:.5rem; padding:.4rem .7rem; font-size:.78rem; }
.dot-inline { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:.4rem; background:var(--warn-dot); }
#intuneDialog { width:min(820px,calc(100vw - 2rem)); padding:1.3rem; }
@media (max-width:580px){ .intune-box dl { grid-template-columns:1fr 1fr; } }
.device-summary small.warn-text, .intune-box small.warn-text { color:var(--warn); font-weight:700; margin-top:.2rem; }
/* shared navigation */
.topbar { align-items:center; gap:1.2rem; flex-wrap:wrap; }
.app-nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex:1; flex-wrap:wrap; min-width:0; }
.nav-pages { display:flex; gap:.4rem; flex-wrap:wrap; background:var(--tabs-bg); padding:.3rem; border-radius:12px; }
.nav-user { display:flex; align-items:center; gap:.6rem; margin-left:auto; }
.nav-button { position:relative; display:inline-flex; align-items:center; gap:.45rem; padding:.55rem 1rem; border-radius:9px; font-weight:700; font-size:.88rem;
  color:var(--ink); text-decoration:none; border:1px solid transparent; background:transparent; }
.nav-button:hover { background:var(--card); border-color:var(--line); }
.nav-button:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.nav-button.active { background:var(--card); border-color:var(--line); box-shadow:0 2px 6px rgba(25,38,34,.08); color:var(--green); }
.nav-button.subtle { border-color:var(--line); background:var(--card); font-weight:600; }
.nav-badge { min-width:1.35rem; height:1.35rem; padding:0 .35rem; border-radius:999px; background:var(--bad-strong); color:white; font-size:.72rem; display:inline-grid; place-items:center; }
.toolbar-strip { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding:.8rem clamp(1rem,4vw,4rem); border-bottom:1px solid var(--line); }
.strip-actions { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.toast { position:fixed; right:1.2rem; bottom:1.2rem; background:var(--ink); color:var(--paper); padding:.9rem 1.1rem; border-radius:12px; font-weight:700; text-decoration:none;
  box-shadow:0 12px 35px rgba(0,0,0,.25); transform:translateY(20px); opacity:0; transition:.3s; z-index:50; }
.toast.show { transform:none; opacity:1; }
@media (prefers-reduced-motion: reduce) { .toast { transition:none; } }
/* tickets desk */
.desk { display:grid; grid-template-columns:minmax(300px,380px) 1fr; gap:1.2rem; align-items:start; }
.queue, .ticket-detail { background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }
.queue-filters { padding:1rem; border-bottom:1px solid var(--line); display:grid; gap:.7rem; }
.queue-row { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.queue-counts { margin:0; color:var(--muted); font-size:.76rem; }
.seg { padding:.4rem .75rem; font-size:.8rem; border-radius:999px; }
.seg.active { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.ticket-list { list-style:none; margin:0; padding:.4rem; max-height:70vh; overflow:auto; display:grid; gap:.3rem; }
.ticket-row { width:100%; text-align:left; display:grid; gap:.2rem; padding:.7rem .8rem; border-radius:10px; border:1px solid transparent; background:transparent; font-weight:500; }
.ticket-row:hover { background:var(--subtle); }
.ticket-row.selected { background:var(--good-bg-2); border-color:var(--good-line); }
.ticket-row.unread strong { font-weight:800; }
.ticket-row small { color:var(--muted); font-size:.76rem; }
.row-top { display:flex; gap:.5rem; align-items:center; }
.new-dot { width:9px; height:9px; border-radius:50%; background:var(--bad-strong); margin-left:auto; }
.prio { font-size:.68rem; font-weight:800; padding:.1rem .45rem; border-radius:999px; background:var(--neutral-bg); color:var(--muted); }
.prio-urgent { background:var(--bad-strong); color:white; } .prio-high { background:var(--bad-bg); color:var(--bad); } .prio-normal { background:var(--info-bg); color:var(--info); }
.ticket-detail { padding:1.3rem; min-height:420px; }
.detail-empty { padding:4rem 1rem; }
.detail-head h2 { font-size:1.35rem; margin:.2rem 0 .3rem; } .detail-head p { margin:.2rem 0; font-size:.84rem; }
.nav-button.small { padding:.35rem .7rem; font-size:.8rem; }
.detail-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; margin:1rem 0; }
.resolve-box { display:grid; gap:.6rem; padding:1rem; background:var(--good-bg-2); border:1px solid var(--good-line); border-radius:10px; margin-bottom:1rem; }
.resolve-box .dialog-actions { margin:0; padding:0; border:0; }
.resolution { background:var(--good-bg-2); border-radius:8px; padding:.6rem .8rem; font-size:.86rem; }
.files { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem; }
.file { display:grid; gap:.3rem; width:120px; font-size:.72rem; color:var(--ink); text-decoration:none; }
.file img { width:120px; height:84px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.thread { list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.7rem; }
.msg { padding:.8rem 1rem; border-radius:12px; max-width:85%; }
.msg p { margin:.35rem 0 0; white-space:pre-wrap; font-size:.9rem; line-height:1.5; }
.msg-head { font-size:.74rem; color:var(--muted); }
.msg.from-user { background:var(--subtle-2); }
.msg.from-it { background:var(--good-bg); justify-self:end; }
.msg.internal { background:var(--notice-bg); border:1px dashed var(--notice-line-2); justify-self:end; }
.reply { display:grid; gap:.5rem; border-top:1px solid var(--line); padding-top:1rem; }
.reply.is-internal textarea { background:var(--notice-bg-2); border-color:var(--notice-line-2); }
.reply-actions { display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; }
.reply-actions .primary { margin-left:auto; }
.check { display:flex; align-items:center; gap:.4rem; font-size:.82rem; } .check input { width:auto; }
.file-pick { cursor:pointer; font-size:.84rem; font-weight:700; padding:.5rem .7rem; border:1px solid var(--line); border-radius:9px; background:var(--card); }
@media (max-width:950px){ .desk { grid-template-columns:1fr; } .detail-controls { grid-template-columns:1fr; } .msg { max-width:100%; } }
button.danger { color:var(--bad); border-color:var(--bad-line); } button.danger:hover { background:var(--bad-bg); }
/* portal tickets */
.portal-main { padding-top:1.4rem; }
button.big { padding:.8rem 1.4rem; font-size:1rem; }
.my-tickets { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.my-ticket { width:100%; text-align:left; display:grid; grid-template-columns:auto 1fr auto auto; gap:.3rem .8rem; align-items:center; padding:.9rem 1rem; background:var(--card); border:1px solid var(--line); border-radius:12px; font-weight:500; }
.my-ticket small { grid-column:2/-1; color:var(--muted); font-size:.78rem; }
.my-ticket.unread { border-color:var(--bad-strong); box-shadow:0 0 0 3px rgba(192,57,43,.08); }
.new-reply { background:var(--bad-strong); color:white; font-size:.7rem; font-weight:800; padding:.15rem .5rem; border-radius:999px; }
.my-tickets .empty { background:var(--card); border:1px dashed var(--line); border-radius:12px; }
.device .report { margin-top:.4rem; padding:.4rem .7rem; font-size:.78rem; }
#raiseDialog, #ticketDialog { width:min(640px,calc(100vw - 2rem)); padding:1.3rem; max-height:92vh; overflow:auto; }
.raise-form { display:grid; gap:.8rem; }
.urgency { border:0; padding:0; margin:0; display:grid; gap:.4rem; }
.urgency legend { color:var(--muted); font-size:.73rem; font-weight:700; margin-bottom:.35rem; padding:0; }
.urgency label { display:grid; grid-template-columns:auto 1fr; gap:0 .6rem; align-items:center; padding:.6rem .8rem; border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.urgency label:has(input:checked) { border-color:var(--green); background:var(--good-bg-2); }
.urgency input { width:auto; margin:0; grid-row:span 2; } .urgency small { color:var(--muted); font-size:.76rem; }
.form-error { color:var(--bad); font-size:.84rem; margin:0; }
.msg.mine { justify-self:end; background:var(--good-bg); } .msg.theirs { justify-self:start; background:var(--subtle-2); }
.resolved-actions { display:flex; gap:.8rem; align-items:center; margin-top:.6rem; flex-wrap:wrap; }
@media (max-width:580px){ .my-ticket { grid-template-columns:1fr auto; } .my-ticket .tag { grid-column:1/-1; } }
/* laptop agent */
.chip.primary-chip { background:var(--btn); color:white; border-color:var(--green); }
.ok-text, .device-summary small.ok-text { color:var(--green); font-weight:700; }
#agentDialog { width:min(640px,calc(100vw - 2rem)); padding:1.3rem; }
.steps { margin:0 0 1rem; padding-left:1.2rem; display:grid; gap:.5rem; font-size:.88rem; }
.agent-code { display:grid; grid-template-columns:1fr 1fr auto; gap:.7rem; align-items:end; }
@media (max-width:580px){ .agent-code { grid-template-columns:1fr; } }
/* account dropdown */
.menu { position:relative; }
.menu-button { gap:.5rem; padding:.4rem .8rem .4rem .45rem; }
.menu-avatar { width:1.8rem; height:1.8rem; border-radius:50%; background:var(--btn); color:white; display:grid; place-items:center; font-size:.8rem; }
.caret { color:var(--muted); font-size:.7rem; }
.menu-dot { display:none; width:9px; height:9px; border-radius:50%; background:var(--warn-dot); position:absolute; top:5px; right:6px; }
.menu-button.attention .menu-dot { display:block; }
.menu-panel { position:absolute; right:0; top:calc(100% + .4rem); z-index:40; width:280px; background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 18px 45px rgba(25,38,34,.18); padding:.4rem; display:grid; gap:.15rem; }
.menu-who { padding:.6rem .7rem; border-bottom:1px solid var(--line); margin-bottom:.2rem; }
.menu-who small, .menu-item small { display:block; color:var(--muted); font-weight:500; font-size:.76rem; margin-top:.1rem; }
.menu-extras { display:grid; gap:.15rem; } .menu-extras:not(:empty) { border-bottom:1px solid var(--line); padding-bottom:.3rem; margin-bottom:.2rem; }
.menu-item { display:flex; align-items:center; gap:.6rem; width:100%; text-align:left; padding:.6rem .7rem; border-radius:8px; border:0; background:transparent;
  font-weight:600; font-size:.86rem; color:var(--ink); text-decoration:none; cursor:pointer; }
.menu-item:hover, .menu-item:focus-visible { background:var(--subtle-2); outline:none; }
.menu-item.sync-badge .dot { flex-shrink:0; }
.list-count { grid-column:1/-1; margin:0; color:var(--muted); font-size:.78rem; }

/* fit the screen: only lists scroll (desktop) */
@media (min-width:951px) and (min-height:640px) {
  body.fixed-page { height:100vh; display:flex; flex-direction:column; overflow:hidden; }
  body.fixed-page .topbar { padding-top:1rem; padding-bottom:.9rem; }
  body.fixed-page h1 { font-size:2.3rem; }
  body.fixed-page main { flex:1; min-height:0; display:flex; flex-direction:column; padding-top:1rem; padding-bottom:1rem; }
  body.fixed-page .overview { flex-shrink:0; margin-bottom:.9rem; gap:.8rem; }
  body.fixed-page .overview > div { padding:.65rem .8rem; }
  body.fixed-page .overview h3 { margin-bottom:.45rem; }
  body.fixed-page .chip { padding:.25rem .6rem; font-size:.76rem; }
  body.fixed-page .workspace { flex:1; min-height:0; }
  body.fixed-page .asset-panel { display:flex; flex-direction:column; height:100%; min-height:0; }
  body.fixed-page .table-wrap { flex:1; min-height:0; max-height:none; }
  body.fixed-page .bot-panel { height:100%; min-height:0; }
  body.fixed-page .chat { max-height:none; min-height:0; }
  body.fixed-page main.desk { display:grid; grid-template-rows:minmax(0,1fr); align-items:stretch; }
  body.fixed-page .queue { display:flex; flex-direction:column; height:100%; min-height:0; }
  body.fixed-page .ticket-list { flex:1; max-height:none; min-height:0; }
  body.fixed-page .ticket-detail { height:100%; overflow:auto; min-height:0; }
}
.ticket-list { align-content:start; }
/* laptop health page */
.health-main { display:flex; flex-direction:column; gap:1rem; }
.health-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.8rem; flex-shrink:0; }
.summary-card { display:grid; gap:.1rem; text-align:left; padding:.9rem 1rem; border-radius:12px; border:1px solid var(--line); background:var(--card); }
.summary-card strong { font-size:1.8rem; line-height:1.1; font-variant-numeric:tabular-nums; }
.summary-card span { font-weight:700; } .summary-card small { color:var(--muted); font-weight:500; }
.summary-card.good strong { color:var(--green); } .summary-card.warn strong { color:var(--warn); } .summary-card.bad strong { color:var(--bad); }
.summary-card.active { border-color:var(--ink); box-shadow:0 0 0 2px var(--ink) inset; }
.summary-note { display:grid; gap:.3rem; align-content:center; padding:.8rem 1rem; border-radius:12px; background:var(--good-bg-2); font-size:.8rem; color:var(--ink); }
.health-panel { background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); display:flex; flex-direction:column; min-height:0; flex:1; }
.health-toolbar { display:grid; grid-template-columns:minmax(220px,300px) minmax(200px,1fr) auto; gap:.8rem; align-items:end; padding:1rem; border-bottom:1px solid var(--line); }
.legend { margin:0; font-size:.76rem; color:var(--muted); display:flex; gap:.35rem; align-items:center; flex-wrap:wrap; }
.health-table table { min-width:1250px; }
.health-table tbody tr { cursor:pointer; } .health-table tbody tr:hover td { background:var(--subtle); }
.health-table tbody tr:focus-visible { outline:2px solid var(--green); outline-offset:-2px; }
.cell { display:inline-block; padding:.2rem .5rem; border-radius:6px; font-size:.78rem; font-weight:700; white-space:nowrap; }
.cell.good { background:var(--good-bg); color:var(--green); } .cell.warn { background:var(--warn-bg); color:var(--warn); }
.cell.bad { background:var(--bad-bg); color:var(--bad); } .cell.none { background:var(--neutral-bg-2); color:var(--muted); font-weight:600; }
@media (min-width:951px) and (min-height:640px) { body.fixed-page .health-panel { min-height:0; } body.fixed-page .health-table { flex:1; min-height:0; max-height:none; } }
@media (max-width:950px){ .health-summary { grid-template-columns:1fr 1fr; } .health-toolbar { grid-template-columns:1fr; } }
.agent-card { display:grid; gap:.25rem; }
.agent-stat { font-size:.82rem; color:var(--ink); text-decoration:none; padding:.15rem 0; } .agent-stat:hover { text-decoration:underline; }
.agent-stat strong { font-variant-numeric:tabular-nums; } .agent-stat.warn strong { color:var(--warn); } .agent-stat.bad strong { color:var(--bad); }
.agent-actions { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.3rem; } .agent-actions a.chip { text-decoration:none; }
.health-table td.problems { display:flex; flex-wrap:wrap; gap:.25rem; min-width:170px; }

.health-table td .nav-button.small { margin-top:.4rem; }
.signed-in { display:block; margin-top:.35rem; font-size:.76rem; }
.signed-in.mismatch { display:grid; gap:.25rem; padding:.45rem .55rem; border-radius:8px; background:var(--warn-bg); border:1px solid var(--warn-line); }
.signed-in.mismatch small { margin:0; color:var(--ink); }
.reassign { justify-self:start; padding:.3rem .6rem; font-size:.76rem; font-weight:700; background:var(--btn); color:white; border-color:var(--green); }
.reassign:disabled { opacity:.6; }

dialog { background:var(--card); color:var(--ink); }

/* ===== theme toggle ===== */
.theme-toggle { margin-left:auto; width:2.5rem; height:2.5rem; padding:0; border-radius:50%; display:grid; place-items:center; color:var(--ink);
  background:var(--card); border:1px solid var(--line); transition:transform .25s ease, background-color .2s, border-color .2s; }
.theme-toggle:hover { transform:rotate(-18deg); border-color:var(--hover-line); }
.theme-toggle:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.app-nav .menu { margin-left:.5rem; }
.theme-switching, .theme-switching * { transition:background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease !important; }

/* ===== app-wide polish ===== */
body { background:
  radial-gradient(900px 500px at 85% -10%, var(--glow), transparent 60%),
  radial-gradient(700px 420px at -10% 110%, var(--good-bg-2), transparent 60%),
  var(--paper); background-attachment:fixed; }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(var(--line) 1px, transparent 1.2px); background-size:22px 22px; opacity:.45;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%); mask-image:radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%); }
button, .nav-button, .chip, a.primary { transition:transform .12s ease, background-color .18s, border-color .18s, box-shadow .18s, color .18s; }
button:active:not(:disabled), .nav-button:active, .chip:active { transform:scale(.97); }
.primary:hover { background:var(--btn-hover); }
.overview > div, .device, .summary-card, .welcome .how-steps li, .portal-help, .my-ticket { transition:transform .22s ease, box-shadow .22s ease, border-color .22s; }
.overview > div:hover, .device:hover, .summary-card:hover, .my-ticket:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(15,30,25,.10); }
tbody tr td { transition:background-color .15s; }
dialog[open] { animation:pop .24s cubic-bezier(.2,.9,.3,1.15); }
dialog[open]::backdrop { animation:fade .24s ease; }
.menu-panel:not([hidden]) { animation:drop .18s ease; transform-origin:top right; }
.toast { transition:transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .35s; }
main > section, .health-panel, .desk > section, .portal-main > section { animation:rise .5s cubic-bezier(.2,.8,.2,1) both; }
main > section:nth-child(2), .portal-main > section:nth-child(2) { animation-delay:.06s; }
main > section:nth-child(3), .portal-main > section:nth-child(3) { animation-delay:.12s; }
.desk > section:nth-child(2) { animation-delay:.08s; }
.pill, .cell, .nav-badge { transition:background-color .2s, color .2s; }
.nav-badge:not([hidden]) { animation:badge .5s cubic-bezier(.2,.9,.3,1.4); }
@keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes pop { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
@keyframes drop { from { opacity:0; transform:translateY(-6px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes badge { from { transform:scale(.4); } to { transform:scale(1); } }

/* ===== landing page ===== */
body.welcome { min-height:100vh; overflow-x:hidden; }
.aurora { position:fixed; inset:-20vh -10vw auto -10vw; height:90vh; z-index:-1; pointer-events:none; filter:blur(70px); opacity:.75; }
.aurora span { position:absolute; border-radius:50%; mix-blend-mode:normal; animation:drift 22s ease-in-out infinite alternate; }
.aurora span:nth-child(1) { width:46vw; height:46vw; left:48%; top:-8%; background:radial-gradient(circle, color-mix(in srgb, var(--green) 38%, transparent), transparent 70%); }
.aurora span:nth-child(2) { width:36vw; height:36vw; left:8%; top:10%; background:radial-gradient(circle, color-mix(in srgb, var(--warn-dot) 26%, transparent), transparent 70%); animation-duration:28s; animation-delay:-6s; }
.aurora span:nth-child(3) { width:30vw; height:30vw; left:70%; top:30%; background:radial-gradient(circle, color-mix(in srgb, var(--info) 22%, transparent), transparent 70%); animation-duration:26s; animation-delay:-12s; }
@keyframes drift { 0% { transform:translate(0,0) scale(1); } 50% { transform:translate(-4vw,3vh) scale(1.08); } 100% { transform:translate(3vw,-2vh) scale(.96); } }

.welcome-top { position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center; padding:.9rem clamp(1rem,4vw,4rem);
  background:color-mix(in srgb, var(--paper) 70%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.welcome-brand { display:flex; align-items:center; gap:.65rem; color:var(--ink); text-decoration:none; font-size:1rem; }
.welcome-mark { width:2.2rem; height:2.2rem; border-radius:10px; background:var(--btn); color:white; display:grid; place-items:center; box-shadow:0 6px 16px color-mix(in srgb, var(--btn) 35%, transparent); }
.welcome-actions { display:flex; align-items:center; gap:.6rem; } .welcome-actions .theme-toggle { margin-left:0; }

.hero { width:min(1180px,100%); margin:0 auto; padding:clamp(2.5rem,7vw,6rem) clamp(1rem,4vw,2.5rem) clamp(2rem,5vw,4rem);
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.hero-copy { display:grid; gap:1.15rem; justify-items:start; }
.hero-pill { display:inline-flex; align-items:center; gap:.55rem; margin:0; padding:.38rem .8rem; border-radius:999px; font-size:.8rem; font-weight:700;
  color:var(--green); background:color-mix(in srgb, var(--card) 80%, transparent); border:1px solid var(--good-line); }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent); animation:ping 2.2s ease-out infinite; }
@keyframes ping { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); } 70%,100% { box-shadow:0 0 0 10px transparent; } }
.hero h1 { font-size:clamp(2.6rem,6.2vw,4.6rem); line-height:1.02; letter-spacing:-.035em; text-wrap:balance; margin:0; }
.hl { background:linear-gradient(100deg, var(--green), color-mix(in srgb, var(--green) 55%, var(--warn-dot))); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-lede { font-size:clamp(1.02rem,1.6vw,1.2rem); line-height:1.6; color:var(--muted); max-width:34rem; margin:0; }
.hero-ctas { display:flex; gap:.7rem; flex-wrap:wrap; margin-top:.4rem; }
.cta-ms { display:inline-flex; align-items:center; gap:.7rem; padding:.95rem 1.4rem; border-radius:12px; text-decoration:none; font-weight:800;
  color:white; background:var(--btn); box-shadow:0 10px 24px color-mix(in srgb, var(--btn) 35%, transparent); transition:transform .18s ease, box-shadow .18s ease, background-color .18s; }
.cta-ms:hover { transform:translateY(-2px); background:var(--btn-hover); box-shadow:0 16px 30px color-mix(in srgb, var(--btn) 40%, transparent); }
.cta-ms svg { background:white; padding:2px; border-radius:3px; }
.cta-ghost { display:inline-flex; align-items:center; padding:.95rem 1.2rem; border-radius:12px; text-decoration:none; font-weight:700; color:var(--ink);
  border:1px solid var(--line); background:color-mix(in srgb, var(--card) 70%, transparent); transition:transform .18s, border-color .18s; }
.cta-ghost:hover { transform:translateY(-2px); border-color:var(--hover-line); }
.cta-ms:focus-visible, .cta-ghost:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }
.hero-note { margin:0; font-size:.84rem; color:var(--muted); }

/* live-looking product preview */
.hero-visual { position:relative; min-height:430px; }
.mock { position:absolute; background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 30px 60px rgba(10,25,20,.14), 0 2px 6px rgba(10,25,20,.06); }
.mock-ticket { inset:0 9% auto 0; padding:1.25rem; animation:float 7s ease-in-out infinite; }
.mock-health { width:min(250px,62%); right:0; bottom:0; padding:1rem 1.1rem; animation:float 8s ease-in-out infinite reverse; }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
.mock-head { display:flex; justify-content:space-between; align-items:center; }
.mock-tag { font-family:ui-monospace,monospace; font-size:.78rem; color:var(--muted); }
.mock-status { position:relative; display:inline-grid; font-size:.74rem; font-weight:800; }
.mock-status i { grid-area:1/1; font-style:normal; padding:.22rem .6rem; border-radius:999px; opacity:0; animation:status 9s infinite; }
.mock-status i:nth-child(1) { background:var(--info-bg); color:var(--info); animation-delay:0s; }
.mock-status i:nth-child(2) { background:var(--warn-bg); color:var(--warn); animation-delay:3s; }
.mock-status i:nth-child(3) { background:var(--good-bg); color:var(--green); animation-delay:6s; }
@keyframes status { 0% { opacity:0; transform:translateY(4px); } 4%,30% { opacity:1; transform:none; } 34%,100% { opacity:0; transform:translateY(-4px); } }
.mock h3 { margin:.7rem 0 .15rem; font-size:1.15rem; } .mock-meta { margin:0 0 1rem; font-size:.8rem; color:var(--muted); }
.mock-thread { display:grid; gap:.5rem; }
.bub { max-width:82%; padding:.6rem .8rem; border-radius:14px; font-size:.86rem; line-height:1.4; opacity:0; animation:chat 9s infinite; }
.bub.me { justify-self:end; background:var(--good-bg); border-bottom-right-radius:4px; }
.bub.it { justify-self:start; background:var(--subtle-2); border-bottom-left-radius:4px; }
.bub.done { justify-self:center; background:transparent; border:1px dashed var(--good-line); color:var(--green); font-weight:700; font-size:.8rem; }
.bub:nth-child(1) { animation-delay:.3s; } .bub:nth-child(2) { animation-delay:2.4s; } .bub:nth-child(3) { animation-delay:4.2s; } .bub:nth-child(4) { animation-delay:6s; }
@keyframes chat { 0% { opacity:0; transform:translateY(8px) scale(.98); } 5%,88% { opacity:1; transform:none; } 96%,100% { opacity:0; } }
.mock-label { margin:0 0 .6rem; font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.health-row { display:flex; justify-content:space-between; padding:.38rem 0; font-size:.84rem; border-top:1px solid var(--line-soft); }
.health-row:first-of-type { border-top:0; } .health-row .ok { color:var(--green); }

/* how it works + for IT */
.how, .for-it { width:min(1180px,100%); margin:0 auto; padding:clamp(2rem,6vw,4.5rem) clamp(1rem,4vw,2.5rem); }
.how h2, .for-it h2 { font-size:clamp(1.7rem,3.6vw,2.6rem); letter-spacing:-.02em; margin:.3rem 0 1.6rem; text-wrap:balance; }
.how-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; counter-reset:step; }
.how-steps li { position:relative; background:color-mix(in srgb, var(--card) 85%, transparent); border:1px solid var(--line); border-radius:18px; padding:1.4rem; display:grid; gap:.5rem; align-content:start; }
.how-steps li:hover { transform:translateY(-3px); box-shadow:0 18px 36px rgba(10,25,20,.10); border-color:var(--good-line); }
.how-steps li::after { counter-increment:step; content:"0" counter(step); position:absolute; top:1.1rem; right:1.2rem; font-family:ui-monospace,monospace; font-size:.8rem; color:var(--muted); }
.how-icon { width:2.8rem; height:2.8rem; border-radius:12px; display:grid; place-items:center; color:var(--green); background:var(--good-bg); }
.how-steps h3 { margin:.3rem 0 0; font-size:1.08rem; } .how-steps p { margin:0; color:var(--muted); line-height:1.55; font-size:.92rem; }
.for-it { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:2rem; align-items:start; margin-bottom:2rem;
  border-radius:24px; background:linear-gradient(135deg, color-mix(in srgb, var(--btn) 92%, black), color-mix(in srgb, var(--btn) 70%, black)); color:white; }
.for-it .eyebrow { color:color-mix(in srgb, white 70%, var(--green)); } .for-it h2 { color:white; margin-bottom:0; }
.for-it ul { list-style:none; margin:0; padding:0; display:grid; gap:.8rem; }
.for-it li { display:grid; gap:.2rem; padding:1rem 1.1rem; border-radius:14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); }
.for-it li span { color:rgba(255,255,255,.78); font-size:.9rem; }
.welcome-foot { text-align:center; color:var(--muted); font-size:.82rem; padding:1.5rem 1rem 2rem; }

/* scroll reveal: only hidden when JavaScript is running, so content is never lost */
.js .reveal { opacity:0; transform:translateY(14px); transition:opacity .6s cubic-bezier(.2,.8,.2,1) var(--d,0ms), transform .6s cubic-bezier(.2,.8,.2,1) var(--d,0ms); }
.js .reveal.in { opacity:1; transform:none; }

@media (max-width:900px) {
  .hero { grid-template-columns:1fr; }
  .hero-visual { min-height:400px; max-width:560px; width:100%; justify-self:center; }
  .how-steps, .for-it { grid-template-columns:1fr; }
}
@media (max-width:480px) { .mock-health { display:none; } .hero-visual { min-height:330px; } .mock-ticket { inset:0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .js .reveal { opacity:1; transform:none; }
  .bub, .mock-status i:nth-child(3) { opacity:1; } .mock-status i:nth-child(1), .mock-status i:nth-child(2) { display:none; }
}