/* ============================================================ MASTER STYLESHEET — All Apps ============================================================ Usage: Light mode (default): or Dark mode: Toggle with JS: document.documentElement.dataset.theme = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'; Fonts loaded: - Encode Sans Condensed (UI) - JetBrains Mono (code/snippets) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Condensed:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap'); /* ============================================================ DESIGN TOKENS — LIGHT MODE (default) ============================================================ */ :root, [data-theme="light"] { /* --- Page --- */ --color-page: #c8c8c8; --color-page-texture: repeating-linear-gradient(0deg, rgba(0,0,0,0.035), rgba(0,0,0,0.035) 2px, rgba(255,255,255,0.02) 2px, rgba(255,255,255,0.02) 4px), repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.06) 2px, rgba(255,255,255,0.06) 4px), linear-gradient(180deg, #d8d8d8 0%, #bebebe 100%); /* --- Surfaces --- */ --color-surface: #e8e8e8; --color-surface-top: #f0f0f0; --color-surface-bot: #d4d4d4; --color-surface-inset: #c4c4c4; /* --- Text --- */ --color-text: #1e1e1e; --color-text-muted: #3e3e3e; --color-text-subtle: #888888; /* --- Borders --- */ --color-border-hi: #f4f4f4; --color-border-mid: #b4b4b4; --color-border-lo: #909090; --color-border-deep: #666666; /* --- Primary (blue) --- */ --color-primary: #2f6bc6; --color-primary-top: #5b96ef; --color-primary-bot: #2f6bc6; --color-primary-text: #ffffff; --color-primary-border:#4d74a9; /* --- Danger (red) --- */ --color-danger: #ba4747; --color-danger-top: #e57e7e; --color-danger-bot: #ba4747; --color-danger-text: #ffffff; --color-danger-border: #8a4a4a; /* --- Success (green) --- */ --color-success: #228822; --color-success-top: #44bb44; --color-success-bot: #228822; --color-success-text: #ffffff; --color-success-border:#33aa33; /* --- Warning (amber) --- */ --color-warning: #cc8800; --color-warning-top: #f0b030; --color-warning-bot: #cc8800; --color-warning-text: #ffffff; /* --- Inputs --- */ --color-input-bg: #f6f6f6; --color-input-top: #f8f8f8; --color-input-bot: #e0e0e0; --color-input-border: #999999; --color-input-focus: #4b75b3; --color-input-text: #1e1e1e; --color-input-placeholder: #aaaaaa; /* --- Shadows --- */ --shadow-raised: 0 6px 14px rgba(0,0,0,0.22), inset 1px 1px 0 rgba(255,255,255,0.75); --shadow-soft: 0 3px 8px rgba(0,0,0,0.16), inset 1px 1px 0 rgba(255,255,255,0.65); --shadow-pressed: inset 0 2px 5px rgba(0,0,0,0.20); --shadow-input: inset 2px 2px 5px rgba(0,0,0,0.12), inset -1px -1px 0 rgba(255,255,255,0.85); --shadow-card: 0 4px 10px rgba(0,0,0,0.18), inset 1px 1px 0 rgba(255,255,255,0.70); /* --- Status dots --- */ --color-status-up: #22aa22; --color-status-down: #cc3333; /* --- Code blocks --- */ --color-code-bg: #2a2a2a; --color-code-text: #e8e8e8; } /* ============================================================ DESIGN TOKENS — DARK MODE ============================================================ */ [data-theme="dark"] { /* --- Page --- */ --color-page: #1e1e1e; --color-page-texture: repeating-linear-gradient(0deg, rgba(255,255,255,0.015), rgba(255,255,255,0.015) 2px, transparent 2px, transparent 4px), linear-gradient(180deg, #242424 0%, #1a1a1a 100%); /* --- Surfaces --- */ --color-surface: #2c2c2c; --color-surface-top: #333333; --color-surface-bot: #262626; --color-surface-inset: #1a1a1a; /* --- Text --- */ --color-text: #e8e8e8; --color-text-muted: #a0a0a0; --color-text-subtle: #666666; /* --- Borders --- */ --color-border-hi: #444444; --color-border-mid: #383838; --color-border-lo: #282828; --color-border-deep: #1a1a1a; /* --- Primary --- */ --color-primary: #4a80d4; --color-primary-top: #6a9aea; --color-primary-bot: #3a6ab8; --color-primary-text: #ffffff; --color-primary-border:#3a6ab8; /* --- Danger --- */ --color-danger: #c05050; --color-danger-top: #d87070; --color-danger-bot: #a03030; --color-danger-text: #ffffff; --color-danger-border: #883838; /* --- Success --- */ --color-success: #2a9a2a; --color-success-top: #40b840; --color-success-bot: #1e7e1e; --color-success-text: #ffffff; --color-success-border:#2a7a2a; /* --- Warning --- */ --color-warning: #c88800; --color-warning-top: #e0a828; --color-warning-bot: #a87000; --color-warning-text: #ffffff; /* --- Inputs --- */ --color-input-bg: #242424; --color-input-top: #2a2a2a; --color-input-bot: #1e1e1e; --color-input-border: #484848; --color-input-focus: #5588cc; --color-input-text: #e8e8e8; --color-input-placeholder: #606060; /* --- Shadows --- */ --shadow-raised: 0 6px 14px rgba(0,0,0,0.50), inset 1px 1px 0 rgba(255,255,255,0.06); --shadow-soft: 0 3px 8px rgba(0,0,0,0.40), inset 1px 1px 0 rgba(255,255,255,0.04); --shadow-pressed: inset 0 2px 5px rgba(0,0,0,0.45); --shadow-input: inset 2px 2px 5px rgba(0,0,0,0.40), inset -1px -1px 0 rgba(255,255,255,0.04); --shadow-card: 0 4px 10px rgba(0,0,0,0.45), inset 1px 1px 0 rgba(255,255,255,0.04); /* --- Status dots --- */ --color-status-up: #33cc33; --color-status-down: #dd4444; /* --- Code blocks --- */ --color-code-bg: #141414; --color-code-text: #d4d4d4; } /* ============================================================ GLOBAL TOKENS (not theme-specific) ============================================================ */ :root { --font-ui: "Encode Sans Condensed", "Segoe UI", Tahoma, sans-serif; --font-mono: "JetBrains Mono", "Fira Code", "Courier New", monospace; --font-size-base: 1.12rem; --font-size-sm: 0.88rem; --font-size-xs: 0.75rem; --font-size-lg: 1.2rem; --font-size-xl: 1.5rem; --font-size-2xl: 2rem; --font-weight-normal: 400; --font-weight-medium: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --line-height: 1.55; --radius-sm: 4px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill:999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --transition: 0.12s ease; --shell-width: 1200px; } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-ui); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height); color: var(--color-text); background: var(--color-page-texture), var(--color-page); min-height: 100vh; } /* ============================================================ LAYOUT ============================================================ */ .shell { max-width: var(--shell-width); margin: 0 auto; padding: var(--space-5) var(--space-4); } .row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; } .col { display: flex; flex-direction: column; gap: var(--space-2); } .grid { display: grid; gap: var(--space-3); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .divider { border: none; border-top: 2px solid var(--color-border-mid); box-shadow: 0 1px 0 var(--color-border-hi); margin: var(--space-4) 0; } /* ============================================================ TYPOGRAPHY ============================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-ui); font-weight: var(--font-weight-extrabold); line-height: 1.2; color: var(--color-text); letter-spacing: 0.01em; } h1 { font-size: var(--font-size-2xl); } h2 { font-size: var(--font-size-xl); } h3 { font-size: var(--font-size-lg); } h4 { font-size: var(--font-size-base); } p { margin-bottom: var(--space-3); } a { color: var(--color-primary); text-decoration: none; font-weight: var(--font-weight-medium); } a:hover { text-decoration: underline; } strong { font-weight: var(--font-weight-bold); } small, .text-sm { font-size: var(--font-size-sm); } .text-xs { font-size: var(--font-size-xs); } .text-muted { color: var(--color-text-muted); } .text-subtle{ color: var(--color-text-subtle); } /* ============================================================ SURFACE / CARD ============================================================ */ .surface, .card { background: linear-gradient(180deg, var(--color-surface-top) 0%, var(--color-surface-bot) 100%); border: 1px solid; border-color: var(--color-border-hi) var(--color-border-lo) var(--color-border-deep) var(--color-border-mid); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-4); } .card-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-extrabold); letter-spacing: 0.02em; margin-bottom: var(--space-3); color: var(--color-text); } .card-body { color: var(--color-text-muted); font-size: var(--font-size-base); line-height: var(--line-height); } .inset { background: var(--color-surface-inset); border: 1px solid var(--color-border-lo); border-radius: var(--radius-sm); box-shadow: var(--shadow-pressed); padding: var(--space-3); } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 38px; padding: 0 var(--space-4); font-family: var(--font-ui); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); letter-spacing: 0.04em; color: var(--color-text); background: linear-gradient(180deg, var(--color-surface-top) 0%, var(--color-surface-bot) 100%); border: 1px solid; border-color: var(--color-border-hi) var(--color-border-lo) var(--color-border-deep) var(--color-border-mid); border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--transition), transform var(--transition), box-shadow var(--transition); -webkit-appearance: none; appearance: none; } .btn:hover { background: linear-gradient(180deg, var(--color-surface-top) 0%, #bdbdbd 100%); } .btn:active { transform: translateY(1px); box-shadow: var(--shadow-pressed); } /* Primary */ .btn-primary { color: var(--color-primary-text); border-color: var(--color-primary-border); background: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.06) 48%, rgba(0,0,0,0.08) 100%), linear-gradient(180deg, var(--color-primary-top) 0%, var(--color-primary-bot) 100%); text-shadow: 0 -1px 0 rgba(0,0,0,0.30); } .btn-primary:hover { background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.18) 100%), linear-gradient(180deg, var(--color-primary-top) 0%, var(--color-primary-bot) 100%); } /* Danger */ .btn-danger { color: var(--color-danger-text); border-color: var(--color-danger-border); background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.06) 48%, rgba(0,0,0,0.08) 100%), linear-gradient(180deg, var(--color-danger-top) 0%, var(--color-danger-bot) 100%); text-shadow: 0 -1px 0 rgba(0,0,0,0.30); } .btn-danger:hover { background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.18) 100%), linear-gradient(180deg, var(--color-danger-top) 0%, var(--color-danger-bot) 100%); } /* Success */ .btn-success { color: var(--color-success-text); border-color: var(--color-success-border); background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.06) 48%, rgba(0,0,0,0.08) 100%), linear-gradient(180deg, var(--color-success-top) 0%, var(--color-success-bot) 100%); text-shadow: 0 -1px 0 rgba(0,0,0,0.30); } .btn-success:hover { background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.18) 100%), linear-gradient(180deg, var(--color-success-top) 0%, var(--color-success-bot) 100%); } /* Sizes */ .btn-sm { min-height: 30px; padding: 0 var(--space-3); font-size: var(--font-size-xs); } .btn-lg { min-height: 46px; padding: 0 var(--space-6); font-size: var(--font-size-base); border-radius: var(--radius-md); } .btn-block { width: 100%; display: flex; } /* Icon only */ .btn-icon { min-height: 36px; width: 36px; padding: 0; border-radius: var(--radius-sm); } /* Button group */ .btn-group { display: inline-flex; background: var(--color-surface-inset); border: 1px solid var(--color-border-lo); border-radius: var(--radius-sm); box-shadow: var(--shadow-pressed); padding: 3px; gap: 3px; } .btn-group .btn { border-radius: calc(var(--radius-sm) - 2px); } .btn-group .btn.active { background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.06) 48%, rgba(0,0,0,0.08) 100%), linear-gradient(180deg, var(--color-primary-top) 0%, var(--color-primary-bot) 100%); color: var(--color-primary-text); border-color: var(--color-primary-border); box-shadow: var(--shadow-pressed); } /* ============================================================ INPUTS, SELECTS, TEXTAREAS ============================================================ */ .input, .select, .textarea, input[type="text"], input[type="search"], input[type="url"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], textarea, select { display: block; width: 100%; min-height: 38px; padding: 7px 12px; font-family: var(--font-ui); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-input-text); background: linear-gradient(180deg, var(--color-input-top) 0%, var(--color-input-bot) 100%); border: 1px solid var(--color-input-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-input); transition: border-color var(--transition), box-shadow var(--transition); -webkit-appearance: none; appearance: none; } .input:focus, .select:focus, .textarea:focus, input[type="text"]:focus, input[type="search"]:focus, input[type="url"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="datetime-local"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-input-focus); box-shadow: var(--shadow-input), 0 0 0 3px rgba(75, 117, 179, 0.20); } input::placeholder, textarea::placeholder { color: var(--color-input-placeholder); font-weight: var(--font-weight-normal); } textarea, .textarea { min-height: 100px; resize: vertical; } select, .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer; } /* Fix browser-native option colours in dark mode */ [data-theme="dark"] select option { background-color: #2a2a2a; color: #e8e8e8; } /* Input group (label + field) */ .field { display: flex; flex-direction: column; gap: var(--space-1); } .field-label, label { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-text-muted); letter-spacing: 0.03em; } .field-hint { font-size: var(--font-size-xs); color: var(--color-text-subtle); } /* Search input */ .search-wrap { position: relative; } .search-wrap .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--color-text-subtle); pointer-events: none; } .search-wrap input { padding-left: 38px; border-radius: var(--radius-pill); } /* ============================================================ CHECKBOX & RADIO ============================================================ */ .checkbox-wrap, .radio-wrap { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-text); } input[type="checkbox"], input[type="radio"] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; min-width: 22px; background: linear-gradient(180deg, var(--color-input-top) 0%, var(--color-input-bot) 100%); border: 2px solid var(--color-border-lo); box-shadow: var(--shadow-input); cursor: pointer; position: relative; transition: background var(--transition), border-color var(--transition); display: inline-block; } input[type="checkbox"] { border-radius: 5px; } input[type="radio"] { border-radius: 50%; } input[type="checkbox"]:checked { background: linear-gradient(180deg, var(--color-success-top) 0%, var(--color-success-bot) 100%); border-color: var(--color-success-border); } input[type="checkbox"]:checked::after { content: ''; position: absolute; top: 3px; left: 7px; width: 5px; height: 10px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); } input[type="radio"]:checked::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background: linear-gradient(180deg, var(--color-success-top) 0%, var(--color-success-bot) 100%); border-radius: 50%; } /* ============================================================ TOGGLE SWITCH — div-based (.toggle-track + .toggle-thumb) Usage:
Label
Add class "on" to toggle-wrap for the active/on state. ============================================================ */ .toggle-wrap { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; user-select: none; } .toggle-track { width: 52px; height: 28px; flex-shrink: 0; background: linear-gradient(180deg, #484848 0%, #303030 100%); border: 2px solid var(--color-border-deep); border-radius: 6px; position: relative; cursor: pointer; box-shadow: inset 0 2px 6px rgba(0,0,0,0.40); transition: background 0.2s ease, border-color 0.2s ease; } .toggle-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: linear-gradient(180deg, #d0d0d0 0%, #909090 100%); border: 1px solid #666; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.50); transition: left 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .toggle-wrap.on .toggle-track { background: linear-gradient(180deg, #2a5a2a 0%, #1a3a1a 100%); } .toggle-wrap.on .toggle-thumb { left: calc(100% - 24px); background: linear-gradient(180deg, var(--color-success-top) 0%, var(--color-success-bot) 100%); border-color: var(--color-success-border); box-shadow: 0 2px 4px rgba(0,0,0,0.30); } .toggle-label { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-text-muted); cursor: pointer; } /* ============================================================ TABS ============================================================ */ .tabs { display: flex; gap: var(--space-1); border-bottom: 2px solid var(--color-border-lo); padding-bottom: 1px; } .tab { border: 1px solid var(--color-border-mid); border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: var(--space-3) var(--space-5); background: linear-gradient(180deg, var(--color-surface-inset) 0%, var(--color-surface-bot) 100%); color: var(--color-text-muted); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); letter-spacing: 0.03em; cursor: pointer; transition: background var(--transition), color var(--transition); } .tab:hover { color: var(--color-text); background: linear-gradient(180deg, var(--color-surface-top) 0%, var(--color-surface-bot) 100%); } .tab.active { background: linear-gradient(180deg, var(--color-surface-top) 0%, var(--color-surface-bot) 100%); color: var(--color-text); box-shadow: inset 1px 1px 0 var(--color-border-hi), 0 -1px 0 var(--color-surface-top); } /* ============================================================ ACCORDION ============================================================ */ .accordion { border: 1px solid var(--color-border-mid); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-soft); } .accordion-item + .accordion-item { border-top: 1px solid var(--color-border-mid); } .accordion-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); background: linear-gradient(180deg, var(--color-surface-top) 0%, var(--color-surface-bot) 100%); cursor: pointer; font-weight: var(--font-weight-bold); font-size: var(--font-size-base); color: var(--color-text); user-select: none; transition: background var(--transition); border: none; width: 100%; text-align: left; } .accordion-header:hover { background: linear-gradient(180deg, #fff 0%, var(--color-surface-top) 100%); } [data-theme="dark"] .accordion-header:hover { background: linear-gradient(180deg, var(--color-surface-top) 0%, var(--color-surface-inset) 100%); } .accordion-arrow { font-size: var(--font-size-xs); transition: transform 0.2s ease; color: var(--color-text-muted); } .accordion-item.open .accordion-arrow { transform: rotate(180deg); } .accordion-body { display: none; padding: var(--space-4); background: var(--color-surface-inset); color: var(--color-text-muted); font-size: var(--font-size-base); border-top: 1px solid var(--color-border-mid); box-shadow: var(--shadow-pressed); } .accordion-item.open .accordion-body { display: block; } /* ============================================================ DROPDOWN MENU ============================================================ */ .dropdown { position: relative; display: inline-block; } .dropdown-menu { display: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 180px; background: linear-gradient(180deg, var(--color-surface-top) 0%, var(--color-surface-bot) 100%); border: 1px solid; border-color: var(--color-border-hi) var(--color-border-lo) var(--color-border-deep) var(--color-border-mid); border-radius: var(--radius-md); box-shadow: var(--shadow-raised); z-index: 200; overflow: hidden; } .dropdown.open .dropdown-menu, .dropdown-menu.open { display: block; } .dropdown-item { display: block; padding: var(--space-2) var(--space-4); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); cursor: pointer; border: none; background: none; width: 100%; text-align: left; text-decoration: none; transition: background var(--transition); } .dropdown-item:hover { background: var(--color-surface-inset); } .dropdown-item.danger { color: var(--color-danger); } .dropdown-divider { border: none; border-top: 1px solid var(--color-border-mid); margin: var(--space-1) 0; } /* ============================================================ MODAL ============================================================ */ .modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); z-index: 400; align-items: center; justify-content: center; } .modal-backdrop.open { display: flex; } .modal { background: linear-gradient(180deg, var(--color-surface-top) 0%, var(--color-surface-bot) 100%); border: 1px solid; border-color: var(--color-border-hi) var(--color-border-lo) var(--color-border-deep) var(--color-border-mid); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); padding: var(--space-5); width: 100%; max-width: 480px; margin: var(--space-4); } .modal-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-extrabold); color: var(--color-text); margin-bottom: var(--space-3); } .modal-body { color: var(--color-text-muted); margin-bottom: var(--space-4); } .modal-footer { display: flex; gap: var(--space-2); justify-content: flex-end; } /* ============================================================ PILLS / BADGES / TAGS ============================================================ */ .pill, .badge, .tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px var(--space-3); border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: 0.04em; border: 1px solid; border-color: var(--color-border-mid) var(--color-border-lo) var(--color-border-deep) var(--color-border-hi); background: linear-gradient(180deg, var(--color-surface-top) 0%, var(--color-surface-bot) 100%); box-shadow: var(--shadow-soft); color: var(--color-text-muted); } .pill.active, .tag.active { color: #173a6d; border-color: #5f85bd #3f629a #36558a #5b81b7; background: linear-gradient(180deg, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0.08) 52%, rgba(0,0,0,0.08) 100%), linear-gradient(180deg, #88afe8 0%, #5e88c7 100%); } [data-theme="dark"] .pill.active, [data-theme="dark"] .tag.active { color: #cce0ff; border-color: #3a6ab8; background: linear-gradient(180deg, var(--color-primary-top) 0%, var(--color-primary-bot) 100%); } .badge-danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger-border); } .badge-success { background: var(--color-success); color: #fff; border-color: var(--color-success-border); } .badge-warning { background: var(--color-warning); color: #fff; } /* ============================================================ STATUS DOT ============================================================ */ .status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.20); flex-shrink: 0; } .status-dot.up { background: var(--color-status-up); box-shadow: 0 0 5px var(--color-status-up); } .status-dot.down { background: var(--color-status-down); box-shadow: 0 0 5px var(--color-status-down); } /* ============================================================ LISTS ============================================================ */ ul, ol { padding-left: var(--space-5); } ul li, ol li { margin-bottom: var(--space-1); font-weight: var(--font-weight-medium); line-height: var(--line-height); } ul { list-style: none; padding-left: 0; } ul li::before { content: "▶"; display: inline-block; width: var(--space-4); font-size: 0.6em; color: var(--color-primary); vertical-align: middle; margin-right: var(--space-1); } /* Unstyled list (for nav menus etc) */ ul.list-none { list-style: none; padding: 0; } ul.list-none li::before { display: none; } /* ============================================================ CODE & PRE ============================================================ */ code, kbd { font-family: var(--font-mono); font-size: 0.9em; background: var(--color-code-bg); color: var(--color-code-text); padding: 2px 6px; border-radius: 4px; font-weight: 600; } pre { font-family: var(--font-mono); font-size: var(--font-size-sm); background: var(--color-code-bg); color: var(--color-code-text); padding: var(--space-4); border-radius: var(--radius-md); overflow-x: auto; line-height: 1.6; border: 1px solid var(--color-border-deep); box-shadow: var(--shadow-pressed); } pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; } /* ============================================================ PROGRESS BAR ============================================================ */ .progress { height: 14px; background: var(--color-surface-inset); border: 1px solid var(--color-border-lo); border-radius: var(--radius-pill); overflow: hidden; box-shadow: var(--shadow-pressed); } .progress-bar { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--color-primary-top) 0%, var(--color-primary-bot) 100%); transition: width 0.4s ease; } .progress-bar.success { background: linear-gradient(90deg, var(--color-success-top), var(--color-success-bot)); } .progress-bar.danger { background: linear-gradient(90deg, var(--color-danger-top), var(--color-danger-bot)); } .progress-bar.warning { background: linear-gradient(90deg, var(--color-warning-top), var(--color-warning-bot)); } /* ============================================================ ALERT / NOTICE ============================================================ */ .alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border-left: 4px solid; font-weight: var(--font-weight-medium); font-size: var(--font-size-base); background: var(--color-surface-inset); color: var(--color-text); } .alert-info { border-color: var(--color-primary); } .alert-success { border-color: var(--color-success); } .alert-danger { border-color: var(--color-danger); } .alert-warning { border-color: var(--color-warning); } /* ============================================================ NAVBAR / HEADER ============================================================ */ .navbar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-5); background: linear-gradient(180deg, var(--color-surface-top) 0%, var(--color-surface-bot) 100%); border-bottom: 2px solid var(--color-border-lo); box-shadow: var(--shadow-soft); } .navbar-brand { font-size: var(--font-size-lg); font-weight: var(--font-weight-extrabold); color: var(--color-text); letter-spacing: 0.04em; text-decoration: none; } .navbar-nav { display: flex; align-items: center; gap: var(--space-2); list-style: none; padding: 0; } .navbar-nav li::before { display: none; } .nav-link { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-text-muted); text-decoration: none; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); transition: color var(--transition), background var(--transition); } .nav-link:hover, .nav-link.active { color: var(--color-text); background: var(--color-surface-inset); text-decoration: none; } /* ============================================================ THEME TOGGLE BUTTON ============================================================ */ .theme-toggle { background: linear-gradient(180deg, var(--color-surface-top) 0%, var(--color-surface-bot) 100%); border: 1px solid; border-color: var(--color-border-hi) var(--color-border-lo) var(--color-border-deep) var(--color-border-mid); border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); cursor: pointer; font-size: var(--font-size-base); min-height: 34px; padding: 0 var(--space-3); color: var(--color-text-muted); transition: all var(--transition); } .theme-toggle:hover { color: var(--color-text); } .theme-toggle:active { transform: translateY(1px); box-shadow: var(--shadow-pressed); } /* ============================================================ UTILITY CLASSES ============================================================ */ .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .p-1 { padding: var(--space-1); } .p-2 { padding: var(--space-2); } .p-3 { padding: var(--space-3); } .p-4 { padding: var(--space-4); } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .w-full { width: 100%; } .d-flex { display: flex; } .d-grid { display: grid; } .d-block { display: block; } .d-none { display: none; } .align-center { align-items: center; } .justify-end { justify-content: flex-end; } .justify-between { justify-content: space-between; } .flex-wrap { flex-wrap: wrap; } .rounded { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-pill { border-radius: var(--radius-pill); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 768px) { .shell { padding: var(--space-3) var(--space-3); } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .btn-block-mobile { width: 100%; display: flex; } .navbar { flex-wrap: wrap; gap: var(--space-2); } .tabs { flex-wrap: wrap; } .modal { margin: var(--space-3); } } @media (max-width: 480px) { :root { --font-size-base: 1rem; } .grid-2 { grid-template-columns: 1fr; } }