/* Live application layout: phone, tablet, desktop and installed web app. */
:root{font-size:16px;--muted:#646774;--shadow:0 6px 24px #27273008}
html{min-height:100%;-webkit-text-size-adjust:100%}body{font-size:14px;line-height:1.5;min-width:0;min-height:100vh;min-height:100dvh}body.dark{--muted:#b0b3c2}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,input,select,textarea{font-size:16px}button,a{touch-action:manipulation}button:disabled{opacity:.6;cursor:wait}input,select,textarea{max-width:100%;min-width:0;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:12px}textarea{resize:vertical}label{font-size:14px!important}h1,h2,p,pre,a{overflow-wrap:anywhere}h1{line-height:1.2}h2{font-size:18px;letter-spacing:-.3px}.button{font-size:14px;min-height:44px;padding:10px 16px;border-radius:10px}.primary:hover{filter:brightness(.96)}.muted{color:var(--muted)}.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.actions input{flex:1;min-width:160px;min-height:44px}.error{color:#b43145;white-space:pre-wrap}.dark .error{color:#ffa4b2}.error:empty{display:none}.form-hint{font-size:13px;color:var(--muted)}[hidden]{display:none!important}
.sidebar{width:242px;padding:24px 16px 20px;padding-top:max(24px,env(safe-area-inset-top));height:100vh;height:100dvh;z-index:30}.sidebar .brand{margin:0;justify-content:flex-start}.sidebar .brand>span:last-child{display:block}.drawer-heading{display:flex;align-items:center;justify-content:space-between}.nav-item{font-size:13px;min-height:44px}.nav-item>span{display:block}.nav-item svg{width:20px;height:20px}.sidebar nav{min-height:0;overscroll-behavior:contain}.side-bottom{padding-top:14px}.side-bottom p{font-size:11px;overflow-wrap:anywhere;color:#b2b3bd}.side-bottom .button{width:100%;background:#2f3039;color:white;border-color:#42434c}.workspace{margin:24px 3px 22px}.icon-control{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;font-size:22px}.sidebar .icon-control{background:#33343d;color:#fff;border-color:#444550}#menu-toggle,#menu-close,.nav-backdrop,.bottom-nav{display:none}
.app{margin-left:242px;min-width:0;min-height:100dvh}.topbar{height:auto;min-height:78px;padding:16px 32px;gap:14px;position:sticky;top:0;z-index:10;padding-top:max(16px,env(safe-area-inset-top));background:var(--surface)}.topbar-start{display:flex;align-items:center;gap:12px;min-width:0}.breadcrumb{font-size:13px}.header-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.badge-live{font-size:11px;color:var(--muted);white-space:nowrap}.header-right .button{font-size:12px}main{padding:28px 32px 48px;min-width:0;max-width:1600px}.page-title{font-size:30px;letter-spacing:-1px;margin:0 0 24px}.notice{color:#78591b;background:#fff7e8;padding:12px 16px;border:1px solid #f0dfb8;border-radius:12px;margin:0 0 26px;font-size:12px}.dark .notice{color:#f1d393;background:#332c1f;border-color:#51452e}.entry{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;margin:20px 0;min-width:0;box-shadow:var(--shadow)}.entry .entry{padding:16px;box-shadow:none}.entry pre{white-space:pre-wrap;font:inherit}.entry a{color:#3b60af}.dark .entry a{color:#b1c9ff}.entry>h2:first-child{margin-top:0}.entry select{min-height:44px}.layout-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.metric{padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--muted)}.metric strong{display:block;font-size:36px;line-height:1.2;margin-top:12px;color:var(--ink);font-variant-numeric:tabular-nums}.empty-state{padding:28px 0;text-align:center;max-width:480px;margin:auto}.empty-state h2{font-size:22px}.empty-state p{color:var(--muted);margin-bottom:20px}.empty{padding:30px 16px;color:var(--muted);white-space:normal}
.table-wrap{overflow-x:auto;max-width:100%;overscroll-behavior-x:contain}table{white-space:normal;font-size:14px;width:100%;table-layout:auto}th{font-size:11px;padding:12px 16px;color:var(--muted)}td{padding:16px;max-width:360px;overflow-wrap:anywhere;vertical-align:middle}td a{display:inline-block;padding:6px 0}td select{width:100%;min-width:150px}.form-row{display:flex;gap:16px;flex-wrap:wrap}.form-row>label{flex:1;min-width:160px}.form-row input{width:100%}.entry form label{display:block;margin:16px 0}.entry form select{width:100%}.entry form .button{margin-top:8px}
.auth{width:calc(100% - 32px);max-width:470px;margin:8vh auto;padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.auth .brand{margin:0 0 28px;justify-content:flex-start;padding:0}.auth .brand>span:last-child{display:block}.auth .brand-sub{color:var(--muted)}.auth h1{font-size:28px}.auth label{display:block;margin:20px 0}.auth input{width:100%;min-height:48px}.auth .button{width:100%;min-height:48px}.auth code{display:block;overflow-wrap:anywhere;word-break:break-all;background:var(--bg);color:var(--ink);padding:16px;border-radius:12px;font-size:15px}.auth p{font-size:14px}
dialog{width:min(600px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);padding:0;overflow:auto;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);overscroll-behavior:contain}dialog form{padding:28px}dialog h2{font-size:24px;margin:0 0 22px}dialog label{display:block;margin:18px 0}dialog input,dialog select,dialog textarea{width:100%;min-height:48px;margin-top:7px}dialog .actions{position:sticky;bottom:-28px;background:var(--surface);padding:16px 0 6px;margin-top:20px}dialog .actions .button{flex:1}dialog .error{padding:12px;background:#fff1f2;border-radius:9px}body.dark dialog .error{background:#442b34}.toast{position:fixed;bottom:24px;right:24px;max-width:min(460px,calc(100vw - 32px));padding:14px 18px;background:#25262e;color:#fff;border-radius:12px;font-size:14px;z-index:100;display:none;box-shadow:0 10px 30px #0003}.toast.show{display:block}
@media(min-width:1024px){.workspace,.nav-label{display:flex}.nav-label{display:block}.side-bottom p{display:block}}
@media(max-width:1023px){.sidebar{width:min(330px,calc(100vw - 44px));transform:translateX(-105%);transition:transform .18s ease;padding:24px 18px;padding-top:max(24px,env(safe-area-inset-top))}.sidebar .brand{margin:0}.sidebar .workspace,.sidebar .nav-label{display:block}.sidebar .workspace{display:flex}.side-bottom p{display:block}.sidebar .nav-item{justify-content:flex-start;padding:12px 14px;gap:14px}.sidebar .brand-mark{flex-shrink:0}.sidebar .brand>span:last-child{font-size:20px}.app{margin-left:0}.topbar{padding:12px 24px;padding-top:max(12px,env(safe-area-inset-top));min-height:72px}#menu-toggle,#menu-close{display:inline-flex}.menu-open .sidebar{transform:translateX(0)}.nav-backdrop{position:fixed;inset:0;width:100%;height:100%;z-index:25;border:0;background:#11131b88;display:block;backdrop-filter:blur(2px)}body.menu-open{overflow:hidden}main{padding:26px 24px 48px}.header-right .badge-live{display:none}}
@media(max-width:699px){body{font-size:15px}.topbar{gap:8px;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));min-height:66px}.breadcrumb{display:block;font-size:0}.breadcrumb strong{font-size:14px;font-weight:600}.header-right{flex-wrap:nowrap;gap:8px}.header-right #install{display:none}.header-right #theme{font-size:22px;width:44px;padding:0}.header-right #theme span{display:none}.topbar-start{gap:10px}.topbar{justify-content:space-between}.app{padding-bottom:calc(76px + env(safe-area-inset-bottom))}main{padding:22px 16px 24px}.notice{font-size:11px;padding:10px 12px;margin-bottom:22px}.page-title{font-size:28px;margin-bottom:20px}.layout-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.metric{padding:14px 10px;font-size:11px;border-radius:12px}.metric strong{font-size:28px;margin-top:10px}.entry{padding:18px 16px;margin:18px 0;border-radius:14px}.actions{gap:10px}.actions>#new-ticket{width:100%}.actions>#search{width:100%;min-width:0}.entry .entry{padding:14px}.empty-state{padding:16px 0}.empty-state .button{width:100%}table,tbody,tr,td{display:block;width:100%}thead{display:none}tr{padding:14px 0;border-bottom:1px solid var(--line)}tr:last-child{border:0}td{display:grid;grid-template-columns:85px minmax(0,1fr);gap:10px;align-items:start;border:0;padding:7px 0;max-width:none;text-align:left;font-size:14px}td::before{content:attr(data-label);font-size:12px;color:var(--muted);padding-top:2px}td[colspan]{display:block}td[colspan]::before{display:none}td a{padding:0}td select{min-width:0}td strong{display:inline-block;margin-right:5px}.table-wrap{overflow:visible}.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);padding:6px max(8px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));box-shadow:0 -4px 20px #00000005}.bottom-nav a,.bottom-nav button{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:54px;border:0;background:transparent;border-radius:10px;color:var(--muted);font:inherit;font-size:10px}.bottom-nav svg{width:22px;height:22px;stroke-width:1.8}.bottom-nav .active{color:var(--ink);background:var(--accent-soft)}.bottom-nav .active svg{color:#ce5c5c}.toast{left:16px;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));max-width:none}.auth{margin:max(24px,env(safe-area-inset-top)) auto;padding:26px 22px}.auth .brand{margin-bottom:26px}.auth h1{font-size:26px}.auth p{font-size:14px}dialog{width:100%;max-width:100%;margin:auto 0 0;max-height:calc(100dvh - max(16px,env(safe-area-inset-top)));border-radius:22px 22px 0 0;border-bottom:0}dialog form{padding:24px 20px calc(20px + env(safe-area-inset-bottom))}dialog .actions{bottom:calc(-20px - env(safe-area-inset-bottom));padding-bottom:calc(12px + env(safe-area-inset-bottom))}dialog h2{font-size:24px}.form-row{display:block}}
@media(max-width:359px){.layout-cards{grid-template-columns:1fr}.metric{display:flex;align-items:center;justify-content:space-between;padding:14px 16px}.metric strong{margin:0;font-size:26px}.breadcrumb strong{font-size:13px}main{padding-left:12px;padding-right:12px}}
@media(prefers-reduced-motion:reduce){.sidebar{transition:none}}
@media print{.bottom-nav,.nav-backdrop,#menu-toggle{display:none!important}.app{margin:0;padding:0}.entry{box-shadow:none}}

/* Theme tokens belong to the document, so inherited text and the canvas change together. */
:root{color-scheme:light;--bg:#f5f6f8;--surface:#ffffff;--surface-raised:#fafafb;--ink:#24242d;--muted:#646774;--line:#e0e2e8;--control:#ffffff;--control-line:#858b99;--link:#3159a7;--focus:#9e3e49;--accent:#fc7474;--accent-soft:#fff0ef;--button-ink:#302025;--hover:#f0f1f5;--shadow:0 6px 24px #27273008}
:root[data-theme="dark"],body.dark{color-scheme:dark;--bg:#101217;--surface:#1a1d25;--surface-raised:#222631;--ink:#f0f1f5;--muted:#b1b7c6;--line:#383e4b;--control:#14171e;--control-line:#677184;--link:#b3cdff;--focus:#ff9a9e;--accent:#ff969b;--accent-soft:#3b2932;--button-ink:#30181e;--hover:#292f3c;--shadow:0 8px 28px #00000024}
html,body{background:var(--bg);color:var(--ink)}.app,.auth{color:var(--ink)}.entry,.metric,dialog,.topbar,.bottom-nav{background:var(--surface);border-color:var(--line);color:var(--ink)}
input,select,textarea,form input,form select,form textarea,.auth input,dialog input,dialog select,dialog textarea{background:var(--control);color:var(--ink);border-color:var(--control-line);caret-color:var(--ink)}input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}select option{background:var(--control);color:var(--ink)}
.button,.icon-control{background:var(--surface-raised);color:var(--ink);border-color:var(--control-line)}.primary{background:var(--accent);border-color:var(--accent);color:var(--button-ink)}.secondary:hover,.icon-control:hover{background:var(--hover)}.primary:hover{filter:brightness(1.05)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.entry a,.dark .entry a{color:var(--link)}.entry a:hover{text-decoration:underline}.metric{color:var(--muted)}.metric strong,.breadcrumb strong{color:var(--ink)}.muted,.form-hint,.empty,.badge-live,td::before,th{color:var(--muted)}th,body.dark th{background:var(--surface-raised)}td,tr,th{border-color:var(--line)}.auth code{background:var(--control);color:var(--ink);border:1px solid var(--control-line)}
.auth-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:28px}.auth-heading .brand{margin-bottom:0}.auth-heading .icon-control{width:44px!important;min-width:44px}.auth .brand-mark,.sidebar .brand-mark{color:#24242d}.auth .brand-sub{color:var(--muted)}
.sidebar{background:#191c24;border-right:1px solid #343a48}.sidebar .workspace{border-color:#3a404e}.sidebar .nav-item{color:#c0c6d4}.sidebar .nav-item.active{background:var(--accent);color:var(--button-ink)}.sidebar .nav-item:hover:not(.active){background:#2a303d;color:#fff}.sidebar .side-bottom p,.sidebar .brand-sub{color:#adb5c6}.sidebar .nav-label{color:#a3adbf}.sidebar .workspace-logo{background:#343c4d;color:#f3f4f8}.sidebar .button,.sidebar .icon-control{background:#282e3b;color:#f0f1f5;border-color:#606b80}.sidebar .button:hover,.sidebar .icon-control:hover{background:#374153}.side-bottom .button+.button{margin-top:8px}.bottom-nav .active{background:var(--accent-soft);color:var(--ink)}.bottom-nav .active svg{color:#b84656}.dark .bottom-nav .active svg{color:var(--accent)}
.dark .notice{background:#30291d;color:#f2d59d;border-color:#78623a}.dark .error{color:#ffc0c9}.dark dialog .error{background:#3d2531;color:#ffc0c9;border:1px solid #9b5b6e}.dark .toast{background:#eef0f7;color:#20242e;border:1px solid #c5cbd7}.dark dialog::backdrop{background:#05080ecc}.dark .brand-mark{background:var(--accent)}.dark .entry .entry{background:var(--surface-raised)}.dark .empty-state p{color:var(--muted)}
@media(min-width:1024px){#install-mobile{display:none}}
@media(max-width:699px){.auth .auth-heading .brand{margin-bottom:0}}