/* ===================================================================== SVTechSense — Design tokens Palette: deep slate background, signal-blue primary, mono ledger type for all numeric/code data (network codes, revenue, %) — a deliberate "technical instrument panel" feel suited to an ad-ops monitoring tool. ===================================================================== */ :root { --bg: #0B0E14; --surface: #131822; --surface-2: #1A2030; --border: #232938; --text: #E7EAF0; --text-muted: #8993A4; --accent: #4F7CFF; --accent-soft: rgba(79, 124, 255, 0.14); --success: #2DD4A7; --success-soft: rgba(45, 212, 167, 0.14); --warning: #F5A623; --warning-soft: rgba(245, 166, 35, 0.14); --danger: #F0506E; --danger-soft: rgba(240, 80, 110, 0.14); --info: #7C9CFF; --info-soft: rgba(124, 156, 255, 0.14); --radius: 10px; --radius-sm: 6px; --shadow: 0 8px 24px rgba(0,0,0,0.35); } /* ----- Light theme override (toggled via ) -------- */ [data-theme="light"] { --bg: #F4F5F7; --surface: #FFFFFF; --surface-2: #F0F1F4; --border: #E1E4EA; --text: #1B1F27; --text-muted: #6B7280; --accent: #3D63E0; --accent-soft: rgba(61, 99, 224, 0.10); --success: #128A6B; --success-soft: rgba(18, 138, 107, 0.10); --warning: #B5740C; --warning-soft: rgba(181, 116, 12, 0.10); --danger: #C73450; --danger-soft: rgba(199, 52, 80, 0.10); --info: #3D63E0; --info-soft: rgba(61, 99, 224, 0.10); --shadow: 0 8px 24px rgba(20,24,34,0.08); } [data-theme="light"] .sidebar { background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%); border-right: 1px solid var(--border); } [data-theme="light"] .topbar { background: rgba(255,255,255,0.7); } [data-theme="light"] input[type=text], [data-theme="light"] input[type=email], [data-theme="light"] input[type=password], [data-theme="light"] input[type=number], [data-theme="light"] input[type=date], [data-theme="light"] input[type=file], [data-theme="light"] select, [data-theme="light"] textarea { background: #F7F8FA; } /* ----- Thin, unobtrusive scrollbars -------------------------------------- */ .sidebar-scroll { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .sidebar-scroll::-webkit-scrollbar { width: 6px; } .sidebar-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } .sidebar-scroll::-webkit-scrollbar-track { background: transparent; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .brand-name { font-family: 'Sora', 'Inter', sans-serif; font-weight: 600; letter-spacing: -0.01em; } .mono, .ledger, td.num, .badge, .network-code { font-family: 'JetBrains Mono', monospace; font-feature-settings: "tnum"; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ----- Layout shell -------------------------------------------------- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 240px; flex-shrink: 0; background: linear-gradient(180deg, #11151F 0%, #0D1019 100%); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .brand { display: flex; align-items: center; gap: 10px; padding: 20px 18px; border-bottom: 1px solid var(--border); } .brand-mark { width: 30px; height: 30px; flex-shrink: 0; } .brand-name { font-size: 16px; color: var(--text); line-height: 1.1; } .brand-sub { font-size: 10.5px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; } .nav-section { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; padding: 16px 18px 6px; } .sidebar-scroll { flex: 1; overflow-y: auto; min-height: 0; } .nav-list { list-style: none; margin: 0; padding: 0 10px; } .nav-list a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 13.5px; font-weight: 500; } .nav-list a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .nav-list a.active { background: var(--accent-soft); color: var(--accent); } .nav-list svg { width: 16px; height: 16px; flex-shrink: 0; } .sidebar-foot { border-top: 1px solid var(--border); padding: 10px; } .sidebar-foot a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 13.5px; font-weight: 500; } .sidebar-foot a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } /* ----- Main content --------------------------------------------------- */ .main { flex: 1; min-width: 0; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; border-bottom: 1px solid var(--border); background: rgba(19,24,34,0.6); } .breadcrumb { color: var(--text-muted); font-size: 13px; } .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; } .page { padding: 26px 28px 60px; max-width: 1500px; } .page-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; } .page-head h1 { font-size: 24px; margin: 0 0 4px; } .page-head p { margin: 0; color: var(--text-muted); font-size: 13.5px; } /* ----- Cards ------------------------------------------------------------ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; } .card-grid { display: grid; gap: 16px; margin-bottom: 20px; } .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1000px) { .card-grid.cols-3, .card-grid.cols-4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .card-grid.cols-3, .card-grid.cols-4 { grid-template-columns: 1fr; } } .stat-card { display: flex; align-items: flex-start; justify-content: space-between; } .stat-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; } .stat-value { font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 600; } .stat-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ----- Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; font-family: 'Inter', sans-serif; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; transition: transform .05s ease; } .btn:hover { border-color: #34405c; text-decoration: none; } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-primary:hover { background: #3E6BFF; } .btn-ghost { background: transparent; } .btn-sm { padding: 6px 12px; font-size: 12.5px; } .btn-danger { color: var(--danger); border-color: rgba(240,80,110,0.3); } /* ----- Forms ------------------------------------------------------------ */ label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--text); } .help-text { font-size: 12px; color: var(--text-muted); margin-top: 5px; } input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=file], select, textarea { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 10px 12px; font-size: 13.5px; font-family: 'Inter', sans-serif; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .field { margin-bottom: 16px; } /* ----- Tables ------------------------------------------------------------ */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 13px; } thead th { text-align: left; padding: 11px 14px; color: var(--text-muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); white-space: nowrap; } tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; } tbody tr:hover { background: rgba(255,255,255,0.015); } tbody td.num { text-align: right; } /* ----- Badges ------------------------------------------------------------ */ .badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 5px; font-size: 11px; font-weight: 600; } .badge-success { background: var(--success-soft); color: var(--success); } .badge-warning { background: var(--warning-soft); color: var(--warning); } .badge-danger { background: var(--danger-soft); color: var(--danger); } .badge-info { background: var(--info-soft); color: var(--info); } .badge-muted { background: rgba(255,255,255,0.06); color: var(--text-muted); } /* ----- Tabs ------------------------------------------------------------ */ .tabs { display: flex; gap: 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; width: fit-content; flex-wrap: wrap; } .tabs a { padding: 6px 13px; border-radius: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); } .tabs a:hover { text-decoration: none; } .tabs a.active { background: var(--accent); color: #fff; } /* ----- Misc ------------------------------------------------------------ */ .flash { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: 13.5px; } .flash-error { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(240,80,110,0.3); } .flash-success { background: var(--success-soft); color: var(--success); border: 1px solid rgba(45,212,167,0.3); } .flash-info { background: var(--info-soft); color: var(--info); border: 1px solid rgba(124,156,255,0.3); } .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none; align-items: center; justify-content: center; z-index: 50; padding: 24px; } .modal-backdrop.open { display: flex; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow); } .modal h3 { margin: 0 0 6px; } .modal .modal-sub { color: var(--text-muted); font-size: 13px; margin-bottom: 18px; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; } .empty-state { text-align: center; padding: 50px 20px; color: var(--text-muted); }