:root{color-scheme:light;--font-display: "Space Grotesk", sans-serif;--font-body: "Source Sans 3", sans-serif;--bg: #f5f7fb;--bg-2: #eef2f7;--ink: #111827;--muted: #4b5563;--accent: #1d4ed8;--accent-2: #3b82f6;--accent-3: #e5e7eb;--surface: #ffffff;--surface-2: #f3f4f6;--stroke: #d1d5db;--success: #1d4ed8;--warning: #64748b;--danger: #b91c1c;--tone-idle: #f3f4f6;--tone-warn: #e5e7eb;--tone-ok: #dbeafe;--shadow: 0 12px 30px rgba(17, 24, 39, .12);--radius: 14px;--radius-sm: 10px;--transition: .18s ease}*{box-sizing:border-box}body{margin:0;font-family:var(--font-body);color:var(--ink);background:linear-gradient(180deg,var(--bg),var(--bg-2));min-height:100vh}#root{min-height:100vh}.app-shell{display:flex;flex-direction:column;min-height:100vh}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 28px;background:var(--surface);border-bottom:1px solid var(--stroke);box-shadow:0 8px 24px #11182714;position:sticky;top:0;z-index:10}.brand{display:flex;flex-direction:column;gap:4px}.brand h1{font-family:var(--font-display);font-size:24px;letter-spacing:1.6px;margin:0;text-transform:uppercase}.brand span{font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--muted)}.topbar-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.user-chip{padding:8px 14px;border-radius:999px;background:var(--surface-2);color:var(--accent);font-weight:600;border:1px solid var(--stroke)}main{flex:1;padding:28px;width:100%;max-width:1200px;margin:0 auto}.section{background:var(--surface);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);border:1px solid var(--stroke);animation:rise .36s ease both}.section-title{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.section-title h2{margin:0;font-size:22px;letter-spacing:.4px;font-family:var(--font-display)}.section-title h2 span{font-family:var(--font-display);font-size:20px;margin-right:8px;color:var(--accent)}.grid{display:grid;gap:16px}.grid-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.grid-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.tile{background:var(--surface);border-radius:var(--radius-sm);padding:18px;border:1px solid var(--stroke);border-left:4px solid var(--accent-3);display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;min-height:130px;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);animation:floatIn .36s ease both}.tile:hover{transform:translateY(-4px);border-left-color:var(--accent);box-shadow:0 16px 30px #1118271f}.tile h3{margin:0;font-size:18px}.tile p{margin:0;color:var(--muted);font-size:14px}.tile--disabled{opacity:.5;pointer-events:none;filter:grayscale(.2)}.card{background:var(--surface-2);border-radius:var(--radius-sm);padding:16px;border:1px solid var(--stroke)}.status{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600}.status--ok{background:#1d4ed824;color:var(--accent)}.status--warn{background:#64748b33;color:#334155}.status--idle{background:#94a3b833;color:var(--muted)}.tag{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}.btn{border:1px solid transparent;cursor:pointer;padding:10px 16px;border-radius:999px;font-weight:600;letter-spacing:.4px;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);background:transparent;color:inherit}.btn:active{transform:scale(.98)}.btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 20px #1d4ed833}.btn-secondary{background:#334155;color:#fff;box-shadow:0 10px 20px #33415533}.btn-outline{background:transparent;color:var(--ink);border-color:var(--stroke)}.btn-danger{background:var(--danger);color:#fff}.btn-light{background:var(--surface);color:var(--ink);border-color:var(--stroke)}.input{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--stroke);background:var(--surface);font-family:inherit;color:inherit}.input:focus{outline:2px solid rgba(29,78,216,.18);border-color:var(--accent-2)}.input-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.list{display:flex;flex-direction:column;gap:12px}.list-item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--stroke);border-left:3px solid var(--accent-3);transition:border-color var(--transition),transform var(--transition);animation:rise .32s ease both}.list-item:hover{border-left-color:var(--accent);transform:translateY(-2px)}.list-item strong{font-size:16px}.list-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--muted)}.table{width:100%;border-collapse:collapse;font-size:14px}.table th,.table td{padding:10px 8px;border-bottom:1px solid var(--stroke);text-align:left}.table th{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a8c;display:flex;align-items:center;justify-content:center;padding:24px;z-index:100}.modal-card{background:var(--surface);border-radius:var(--radius);padding:24px;width:min(520px,100%);box-shadow:var(--shadow);border:1px solid var(--stroke)}.modal-card h3{margin-top:0;font-family:var(--font-display)}.helper{color:var(--muted);font-size:13px}.progress-bar{height:8px;border-radius:999px;background:var(--stroke);overflow:hidden}.progress-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2))}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes floatIn{0%{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 720px){.topbar{flex-direction:column;align-items:flex-start;gap:12px;padding:16px}.topbar-actions{width:100%;display:grid;grid-template-columns:1fr;gap:10px}.topbar-actions .btn,.topbar-actions .user-chip{width:100%;text-align:center}main{padding:12px}.section{padding:16px}.section-title{flex-direction:column;align-items:flex-start;gap:10px}.section-title>div:last-child{width:100%}.section-title>div:last-child .btn,.section-title>div:last-child button{width:100%}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.card{padding:14px}.list-item{flex-direction:column;align-items:flex-start}.list-item>div:last-child{width:100%}.list-item .btn,.list-item button{width:100%}.input-row{grid-template-columns:1fr}.table{display:block;width:100%;overflow-x:auto}.modal-card{padding:18px}}