Spaces:
Sleeping
Sleeping
| /* ── HEADER & NAVIGATION ── */ | |
| header { | |
| height: 56px; | |
| min-height: 56px; | |
| background: var(--bg-secondary); | |
| border-bottom: 1px solid var(--bg-border); | |
| display: flex; | |
| align-items: center; | |
| padding: 0 24px; | |
| gap: 32px; | |
| z-index: 100; | |
| flex-shrink: 0; | |
| } | |
| .logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } | |
| .logo-icon { | |
| width: 32px; height: 32px; | |
| background: var(--accent); | |
| border-radius: var(--radius-md); | |
| display: flex; align-items: center; justify-content: center; | |
| font-weight: 800; color: #fff; font-size: 16px; | |
| box-shadow: var(--shadow-subtle); | |
| } | |
| .logo-text { font-size: 18px; font-weight: 700; letter-spacing: -0.5px; } | |
| .logo-sub { font-size: 10px; color: var(--accent); font-weight: 700; letter-spacing: 0.5px; opacity: 0.9; } | |
| .nav-tabs { | |
| display: flex; | |
| height: 36px; | |
| align-items: center; | |
| gap: 4px; | |
| background: rgba(0,0,0,0.15); | |
| padding: 4px; | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--bg-border); | |
| } | |
| .nav-tab { | |
| background: transparent; | |
| border: none; | |
| padding: 6px 16px; | |
| color: var(--text-secondary); | |
| font-weight: 600; | |
| font-size: 13px; | |
| cursor: pointer; | |
| border-radius: var(--radius-sm); | |
| transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); | |
| white-space: nowrap; | |
| } | |
| .nav-tab:hover { color: var(--text-primary); } | |
| .nav-tab.active { | |
| background: var(--bg-panel); | |
| color: var(--accent); | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.2); | |
| } | |
| .header-status { margin-left: auto; display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,0.2); padding: 6px 14px; border-radius: 20px; border: 1px solid var(--bg-border); } | |
| .status-dot { width: 8px; height: 8px; background: var(--accent2); border-radius: 50%; } | |
| .status-dot.offline { background: var(--accent-err); } | |
| #status-text { font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } | |
| /* ── KPI RIBBON (GridMind style) ── */ | |
| .kpi-ribbon { | |
| display: grid; | |
| grid-template-columns: repeat(6, 1fr); | |
| background: var(--bg-secondary); | |
| border-bottom: 1px solid var(--bg-border); | |
| padding: 10px 24px; | |
| gap: 1px; | |
| } | |
| .kpi-item { | |
| display: flex; | |
| flex-direction: column; | |
| padding: 0 16px; | |
| border-right: 1px solid var(--bg-border); | |
| } | |
| .kpi-item:last-child { border-right: none; } | |
| .kpi-label { | |
| font-size: 10px; | |
| font-weight: 700; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.8px; | |
| margin-bottom: 2px; | |
| } | |
| .kpi-value { | |
| font-size: 16px; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| font-family: var(--mono); | |
| } | |
| .kpi-value.accent-blue { color: var(--accent); } | |
| .kpi-value.accent-green { color: var(--accent2); } | |
| .kpi-value.accent-yellow { color: var(--accent3); } | |
| /* ── CARDS & PANELS ── */ | |
| .card { | |
| background: var(--bg-panel); | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--bg-border); | |
| padding: 24px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| box-shadow: var(--shadow-subtle); | |
| } | |
| .card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .card-title { | |
| font-size: 12px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| color: var(--text-muted); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .card-title::before { | |
| content: ''; | |
| width: 4px; | |
| height: 14px; | |
| background: var(--accent); | |
| border-radius: 2px; | |
| } | |
| /* ── BUTTONS ── */ | |
| .btn { | |
| padding: 12px 20px; | |
| border: 1px solid var(--bg-border); | |
| border-radius: var(--radius-md); | |
| font-weight: 700; | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| background: var(--bg-secondary); | |
| color: var(--text-primary); | |
| } | |
| .btn:hover { background: var(--bg-border); border-color: var(--text-muted); } | |
| .btn-primary { | |
| background: var(--accent); | |
| color: #fff; | |
| border: none; | |
| } | |
| .btn-primary:hover { background: #3367d6; } /* Darker Google Blue */ | |
| /* Toasts */ | |
| .toast { | |
| position: fixed; | |
| bottom: 40px; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(20px); | |
| background: var(--text-primary); | |
| color: var(--bg-primary); | |
| padding: 12px 24px; | |
| border-radius: var(--radius-md); | |
| font-weight: 700; | |
| font-size: 12px; | |
| box-shadow: 0 10px 40px rgba(0,0,0,0.5); | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| z-index: 2000; | |
| } | |
| .toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } | |