:root { --ink:#0d1b27; --nav:#102938; --nav-deep:#0b202d; --paper:#f4f7f7; --card:#fff; --muted:#66757e; --line:#dbe4e3; --mint:#46bc99; --mint-dark:#158466; --sun:#f0b64b; --danger:#c95b5b; --shadow:0 15px 40px rgba(15,38,48,.08); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:248px minmax(0,1fr); }
.sidebar { background:linear-gradient(160deg,var(--nav),var(--nav-deep)); color:#d9e6e7; padding:26px 18px; display:flex; flex-direction:column; gap:42px; }
.brand { color:white; text-decoration:none; display:flex; align-items:center; gap:11px; letter-spacing:.02em; }
.brand strong { display:block; font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase; }.brand small { display:block; color:#9eb5bb; font-size:.71rem; margin-top:1px; }
.brand-mark { display:grid; place-items:center; background:var(--mint); color:#09202b; width:34px; height:34px; border-radius:11px; font-weight:900; font-size:1.22rem; }
.sidebar nav { display:grid; gap:6px; }.sidebar nav a { padding:11px 12px; color:#bbced3; text-decoration:none; border-radius:8px; font-size:.94rem; }.sidebar nav a:hover,.sidebar nav a[aria-current="page"] { color:white; background:rgba(140,224,198,.14); }.sidebar nav a[aria-current="page"] { box-shadow:inset 3px 0 var(--mint); }
.sidebar-note { margin-top:auto; padding:15px; border:1px solid rgba(193,226,221,.16); border-radius:10px; font-size:.8rem; color:#b7c9cc; }.sidebar-note small { display:block; margin:5px 0 0 17px; color:#7f9ca3; }.lock { color:var(--mint); font-size:.8rem; margin-right:6px; }
.main-content { min-width:0; padding:0 42px 56px; }.topbar { height:78px; display:flex; align-items:center; justify-content:flex-end; border-bottom:1px solid var(--line); }.topbar-actions { display:flex; align-items:center; gap:18px; font-size:.88rem; }.account-name { font-weight:650; }.quiet-link { color:#49616c; text-decoration:none; }.quiet-link:hover,.text-link:hover { color:var(--mint-dark); text-decoration:underline; }.logout-form { display:inline; margin:0; }.logout-form button { border:0; background:transparent; padding:0; font:inherit; cursor:pointer; }.mobile-brand { display:none; }
.demo-banner { margin:24px 0 32px; display:flex; gap:13px; align-items:flex-start; padding:13px 16px; border-radius:10px; background:#e1f4ed; color:#175442; border:1px solid #bce7d8; font-size:.84rem; }.demo-banner > span { color:#0a906b; padding-top:1px; }.demo-banner strong { font-size:.88rem; }.demo-banner div span { color:#427667; }
.page-heading { display:flex; justify-content:space-between; gap:25px; align-items:flex-start; margin:34px 0 24px; }.eyebrow { display:block; color:var(--mint-dark); font-size:.72rem; letter-spacing:.13em; font-weight:800; }.page-heading h1,.app-detail-hero h1 { margin:3px 0 5px; font-size:clamp(1.8rem,3vw,2.6rem); letter-spacing:-.045em; line-height:1.1; }.page-heading p { margin:0; color:var(--muted); max-width:680px; }.read-only,.demo-pill { border:1px solid #c7d6d5; color:#547076; border-radius:999px; padding:7px 10px; white-space:nowrap; font-size:.77rem; }.read-only span { color:var(--sun); margin-right:5px; }
.storage-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.storage-card,.app-card,.panel,.history-preview,.lane-list,.history-table,.coverage-note { background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }.storage-card { padding:19px; }.card-topline { display:flex; justify-content:space-between; font-weight:700; font-size:.87rem; }.quality { color:var(--muted); text-transform:uppercase; font-size:.65rem; letter-spacing:.07em; }.storage-number { font-size:1.65rem; font-weight:750; letter-spacing:-.045em; margin:17px 0 11px; }.storage-number small { color:var(--muted); font-size:.9rem; font-weight:500; letter-spacing:0; }.meter { height:7px; overflow:hidden; background:#e6edeb; border-radius:20px; }.meter span { display:block; height:100%; border-radius:inherit; background:var(--mint); }.unknown-meter span { width:42%; background:repeating-linear-gradient(135deg,#b5c7c6 0 5px,#e1e9e8 5px 10px); }.storage-card p { color:#52656e; min-height:42px; margin:11px 0 4px; font-size:.78rem; }.storage-card small { color:#809096; font-size:.72rem; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin:42px 0 15px; }.section-heading h2 { margin:2px 0 0; font-size:1.24rem; letter-spacing:-.025em; }.count { color:var(--muted); font-size:.82rem; }.applications-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.app-card { padding:19px; position:relative; overflow:hidden; }.app-card:before { content:""; position:absolute; left:0; top:0; width:4px; height:100%; background:#aebdbc; }.app-card.tone-good:before { background:var(--mint); }.app-card.tone-running:before { background:var(--sun); }.app-card.tone-attention:before { background:#df9352; }.app-card.tone-muted:before { background:#abb4b6; }.app-card-head { display:flex; align-items:center; justify-content:space-between; color:#50636b; font-size:.78rem; }.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#8d9da1; margin:0 7px 1px 0; }.tone-good .status-dot { background:var(--mint); }.tone-running .status-dot { background:var(--sun); }.tone-attention .status-dot { background:#df9352; }.demo-pill { padding:3px 6px; font-size:.58rem; letter-spacing:.08em; }.app-card h3 { margin:22px 0 6px; font-size:1.18rem; letter-spacing:-.02em; }.app-card p { color:var(--muted); font-size:.84rem; min-height:52px; margin:0; }.app-meta { border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:17px 0; padding-top:13px; }.app-meta dt,.panel-label { color:#718187; font-size:.67rem; text-transform:uppercase; letter-spacing:.09em; }.app-meta dd { margin:3px 0 0; font-size:.8rem; font-weight:650; }.card-link { color:var(--mint-dark); font-size:.82rem; font-weight:750; text-decoration:none; }.card-link span { padding-left:4px; }
.history-preview { margin-top:16px; padding:0 22px 8px; }.history-preview .section-heading { margin:0; padding:21px 0 15px; }.text-link { color:var(--mint-dark); font-size:.82rem; font-weight:750; text-decoration:none; }.timeline-row { display:grid; grid-template-columns:12px minmax(0,1fr) auto; gap:11px; padding:14px 0; border-top:1px solid var(--line); }.timeline-mark { width:8px; height:8px; border:2px solid var(--mint); border-radius:50%; margin:6px 0 0; }.timeline-row strong { font-size:.87rem; }.timeline-row p { margin:2px 0 0; color:var(--muted); font-size:.8rem; }.timeline-row time { color:#7b8b90; font-size:.75rem; white-space:nowrap; }.empty { color:var(--muted); padding:20px 0; }
.breadcrumb { margin:32px 0 15px; color:#708087; font-size:.82rem; }.breadcrumb a { color:var(--mint-dark); }.breadcrumb span { padding:0 8px; }.app-detail-hero { background:var(--nav); color:white; border-radius:16px; padding:28px 30px; display:flex; justify-content:space-between; gap:25px; box-shadow:var(--shadow); }.app-detail-hero .eyebrow { color:var(--mint); }.app-detail-hero p { color:#c1d1d2; margin:7px 0 0; max-width:610px; }.hero-status { align-self:flex-start; padding:10px 13px; border:1px solid rgba(255,255,255,.18); border-radius:9px; font-size:.85rem; white-space:nowrap; }.hero-status small { color:#b4c5c7; display:block; margin:5px 0 0 15px; font-size:.72rem; }.detail-grid,.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }.panel { padding:21px; }.panel h2 { font-size:1.05rem; margin:8px 0 4px; letter-spacing:-.015em; }.panel p { color:var(--muted); margin:0; font-size:.85rem; }.lane-list { overflow:hidden; }.lane-row { display:flex; justify-content:space-between; gap:22px; align-items:center; padding:17px 20px; border-top:1px solid var(--line); }.lane-row:first-child { border-top:0; }.lane-row strong { font-size:.9rem; }.lane-symbol { color:var(--mint-dark); margin-right:10px; }.lane-row > div:last-child { text-align:right; display:grid; gap:2px; }.lane-state { font-size:.82rem; font-weight:700; }.lane-row small { font-size:.75rem; color:var(--muted); }.notice-panel { display:flex; gap:14px; margin:18px 0; padding:16px 18px; background:#fff7e7; border:1px solid #f2ddaf; border-radius:12px; color:#5d4a22; }.notice-panel > span { display:grid; place-items:center; flex:none; background:#e7ae45; color:white; height:22px; width:22px; border-radius:50%; font-weight:800; }.notice-panel p { margin:3px 0 0; font-size:.85rem; }
.filter-nav { display:flex; gap:7px; flex-wrap:wrap; margin:0 0 16px; }.filter-nav a { padding:8px 11px; color:#587077; font-size:.8rem; border:1px solid var(--line); border-radius:999px; text-decoration:none; }.filter-nav a[aria-current="page"] { border-color:var(--mint-dark); background:#dff4eb; color:#125840; font-weight:750; }.history-table { overflow:hidden; }.history-head,.history-entry { display:grid; grid-template-columns:150px 150px minmax(0,1fr) 110px; gap:18px; align-items:start; padding:14px 20px; }.history-head { color:#718187; background:#f8faf9; font-size:.67rem; text-transform:uppercase; letter-spacing:.08em; }.history-entry { border-top:1px solid var(--line); font-size:.84rem; }.history-entry time { color:#64767b; }.history-entry strong { font-size:.84rem; }.history-entry p { color:var(--muted); margin:2px 0 0; font-size:.79rem; }.result-tag { justify-self:start; padding:3px 7px; border-radius:999px; color:#216850; background:#e0f3ec; font-size:.72rem; }.coverage-note { padding:18px 20px; margin-top:16px; color:#53676d; font-size:.85rem; }.coverage-note p { margin:3px 0 0; }.settings-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.settings-list { margin:13px 0 0; }.settings-list div { display:flex; justify-content:space-between; padding:8px 0; border-top:1px solid var(--line); font-size:.84rem; }.settings-list dt { color:var(--muted); }.settings-list dd { margin:0; font-weight:650; }.settings-list a { color:var(--mint-dark); }
.auth-body { min-height:100vh; display:grid; place-items:center; padding:22px; background:radial-gradient(circle at 20% 0%,#274f58 0,transparent 36%),var(--nav-deep); }.auth-card { width:min(100%,460px); padding:32px; border-radius:18px; background:white; box-shadow:0 28px 70px rgba(0,0,0,.26); }.auth-brand { color:var(--ink); }.auth-copy { margin:28px 0 20px; }.auth-copy p { color:var(--muted); margin:5px 0 0; }.auth-card h1 { font-size:1.5rem; margin:0 0 7px; }.auth-card p { color:var(--muted); }.auth-card form p { display:grid; gap:5px; }.auth-card input { min-height:42px; width:100%; padding:8px 10px; border:1px solid #bccdcc; border-radius:8px; font:inherit; }.auth-card button,.auth-card input[type="submit"] { min-height:42px; border:0; border-radius:8px; background:var(--mint-dark); color:white; padding:9px 14px; font:inherit; font-weight:750; cursor:pointer; }.auth-card .btn-secondary { background:#e6efed; color:#25444b; }.auth-footnote { border-top:1px solid var(--line); margin:24px 0 0 !important; padding-top:15px; font-size:.75rem; }.errorlist { color:#a83d3d; padding-left:18px; font-size:.85rem; }
@media (max-width:900px) { .app-shell { grid-template-columns:1fr; }.sidebar { display:none; }.main-content { padding:0 24px 40px; }.topbar { justify-content:space-between; }.mobile-brand { display:block; color:var(--nav); font-weight:900; letter-spacing:.09em; font-size:.76rem; }.mobile-brand span { color:var(--mint-dark); }.storage-grid,.applications-grid { grid-template-columns:1fr; }.storage-card p { min-height:0; }.app-card p { min-height:0; }.detail-grid,.settings-grid { grid-template-columns:1fr; }.history-head { display:none; }.history-entry { grid-template-columns:1fr; gap:5px; }.result-tag { margin-top:4px; }.page-heading { margin-top:26px; } }
@media (max-width:560px) { .main-content { padding:0 16px 30px; }.topbar { height:62px; }.topbar-actions { gap:10px; }.account-name { display:none; }.demo-banner { margin:16px 0 23px; }.page-heading { display:block; margin-bottom:20px; }.read-only { display:inline-block; margin-top:13px; }.app-detail-hero { display:block; padding:23px; }.hero-status { display:inline-block; margin-top:18px; }.timeline-row { grid-template-columns:10px minmax(0,1fr); }.timeline-row time { grid-column:2; }.lane-row { align-items:flex-start; }.lane-row > div:last-child { max-width:45%; }.auth-card { padding:25px 22px; } }