/* ========================================================= ServerGioShopee — Design System Tokens + Component Library - Light & Dark mode (toggle via [data-theme="dark"] on ) - Be Vietnam Pro font - Lucide icons (loaded separately) ========================================================= */ /* ---------- Tokens: Light (default) ---------- */ :root { /* Brand */ --brand-50: #FFF7ED; --brand-100: #FFEDD5; --brand-200: #FED7AA; --brand-300: #FDBA74; --brand-400: #FB923C; --brand-500: #F97316; --brand-600: #EA580C; --brand-700: #C2410C; --brand-800: #9A3412; --brand-900: #7C2D12; /* Neutral (slate scale) */ --neutral-0: #FFFFFF; --neutral-50: #F8FAFC; --neutral-100: #F1F5F9; --neutral-200: #E2E8F0; --neutral-300: #CBD5E1; --neutral-400: #94A3B8; --neutral-500: #64748B; --neutral-600: #475569; --neutral-700: #334155; --neutral-800: #1E293B; --neutral-900: #0F172A; --neutral-950: #020617; /* Semantic */ --success-50: #ECFDF5; --success-500: #10B981; --success-600: #059669; --success-700: #047857; --warning-50: #FFFBEB; --warning-500: #F59E0B; --warning-600: #D97706; --warning-700: #B45309; --danger-50: #FFF1F2; --danger-500: #F43F5E; --danger-600: #E11D48; --danger-700: #BE123C; --info-50: #F0F9FF; --info-500: #0EA5E9; --info-600: #0284C7; /* Surfaces (light) */ --bg-app: #F8FAFC; --bg-surface: #FFFFFF; --bg-surface-2: #F1F5F9; --bg-elevated: #FFFFFF; --bg-overlay: rgba(15, 23, 42, 0.45); /* Text (light) */ --text-primary: #0F172A; --text-secondary: #475569; --text-tertiary: #94A3B8; --text-inverse: #FFFFFF; --text-brand: var(--brand-600); /* Borders (light) */ --border-subtle: #F1F5F9; --border-default: #E2E8F0; --border-strong: #CBD5E1; --border-focus: #FDBA74; /* Radius */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 12px; --r-2xl: 16px; --r-full: 999px; /* Spacing */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; /* Shadow (light) */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04); --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.12); /* Type */ --font-sans: 'Be Vietnam Pro', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; --fs-display: 40px; /* Layout */ --container-max: 1320px; --sidebar-w: 260px; --topbar-h: 60px; /* Motion */ --easing: cubic-bezier(0.16, 1, 0.3, 1); --d-fast: 150ms; --d-base: 200ms; --d-slow: 300ms; color-scheme: light; } /* ---------- Tokens: Dark ---------- */ [data-theme="dark"] { --bg-app: #020617; --bg-surface: #0F172A; --bg-surface-2: #1E293B; --bg-elevated: #1E293B; --bg-overlay: rgba(0, 0, 0, 0.65); --text-primary: #F8FAFC; --text-secondary: #CBD5E1; --text-tertiary: #64748B; --text-inverse: #0F172A; --text-brand: #FB923C; --border-subtle: #1E293B; --border-default: #334155; --border-strong: #475569; --brand-50: #431407; --brand-100: #7C2D12; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.55); --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.6); color-scheme: dark; } /* ---------- Base reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.5; background-color: var(--bg-app); color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; transition: background-color var(--d-base) var(--easing), color var(--d-base) var(--easing); } ::selection { background-color: var(--brand-200); color: var(--neutral-900); } a { color: var(--text-brand); text-decoration: none; transition: color var(--d-fast) var(--easing); } a:hover { color: var(--brand-700); } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } img, svg { display: block; max-width: 100%; } /* ---------- Layout helpers ---------- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); background-color: var(--bg-surface); border-right: 1px solid var(--border-default); padding: var(--s-6) var(--s-4); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--s-2); flex-shrink: 0; transition: background-color var(--d-base) var(--easing), border-color var(--d-base) var(--easing); } .sidebar-brand { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); margin-bottom: var(--s-4); font-weight: 700; font-size: var(--fs-lg); color: var(--text-primary); } .sidebar-brand .brand-mark { width: 32px; height: 32px; background: linear-gradient(135deg, var(--brand-500), var(--brand-600)); border-radius: var(--r-md); display: grid; place-items: center; color: #fff; box-shadow: 0 4px 12px rgba(249, 115, 22, 0.35); } .sidebar-section-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--text-tertiary); padding: var(--s-3) var(--s-3) var(--s-1); } .sidebar-link { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); color: var(--text-secondary); font-weight: 500; font-size: var(--fs-base); transition: background-color var(--d-fast) var(--easing), color var(--d-fast) var(--easing); cursor: pointer; user-select: none; } .sidebar-link:hover { background-color: var(--bg-surface-2); color: var(--text-primary); } .sidebar-link.active { background-color: var(--brand-50); color: var(--brand-700); font-weight: 600; } [data-theme="dark"] .sidebar-link.active { background-color: rgba(249, 115, 22, 0.12); color: var(--brand-300); } .sidebar-link svg { width: 18px; height: 18px; flex-shrink: 0; } .sidebar-footer { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--border-default); } /* ---------- Sidebar layout: menu scrollable + account sticky bottom ---------- */ .sidebar { display: flex; flex-direction: column; } .sidebar-menu { flex: 1; display: flex; flex-direction: column; gap: var(--s-1); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; } .sidebar-account { flex-shrink: 0; margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--border-default); display: flex; flex-direction: column; gap: var(--s-1); } .sidebar-user { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); } .sidebar-user-info { flex: 1; min-width: 0; } .sidebar-user-name { display: block; font-weight: 600; font-size: var(--fs-sm); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .sidebar-link--logout { color: var(--text-secondary) !important; } .sidebar-link--logout:hover { background-color: var(--danger-50) !important; color: var(--danger-600) !important; } [data-theme="dark"] .sidebar-link--logout:hover { background-color: rgba(244, 63, 94, 0.12) !important; color: #FB7185 !important; } /* Admin section injected into client sidebar */ .sidebar-admin-section { display: flex; flex-direction: column; gap: var(--s-1); padding-top: var(--s-2); margin-top: var(--s-1); border-top: 1px solid var(--border-default); } .sidebar-admin-section .sidebar-section-label { color: var(--brand-600); } [data-theme="dark"] .sidebar-admin-section .sidebar-section-label { color: var(--brand-400); } .sidebar-admin-section .sidebar-link { color: var(--text-secondary); } /* Badge ADMIN in sidebar */ .badge-admin { display: inline-block; padding: 1px 6px; border-radius: 10px; background: var(--brand-100); color: var(--brand-700); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; vertical-align: middle; line-height: 1.6; margin-left: 4px; } [data-theme="dark"] .badge-admin { background: rgba(249, 115, 22, 0.16); color: var(--brand-300); } .sidebar-link .badge-admin { margin-left: 4px; } /* Avatar admin color */ /* Avatar base */ .avatar { width: 32px; height: 32px; background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); color: #fff; border-radius: var(--r-full); display: grid; place-items: center; font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; flex-shrink: 0; } .avatar.is-admin { background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); } .main-area { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { height: var(--topbar-h); background-color: var(--bg-surface); border-bottom: 1px solid var(--border-default); padding: 0 var(--s-6); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); position: sticky; top: 0; z-index: 30; backdrop-filter: blur(8px); } .topbar-title { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); } .topbar-search { flex: 1; max-width: 380px; position: relative; } .topbar-search input { width: 100%; height: 36px; padding: 0 var(--s-3) 0 36px; background-color: var(--bg-surface-2); border: 1px solid transparent; border-radius: var(--r-md); color: var(--text-primary); transition: all var(--d-fast) var(--easing); } .topbar-search input:focus { outline: none; border-color: var(--border-focus); background-color: var(--bg-surface); box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15); } .topbar-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-tertiary); } .topbar-actions { display: flex; align-items: center; gap: var(--s-2); } .user-chip { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3) var(--s-1) var(--s-1); background-color: var(--bg-surface-2); border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary); } .user-chip .avatar { width: 26px; height: 26px; background: linear-gradient(135deg, var(--brand-500), var(--brand-600)); color: #fff; border-radius: var(--r-full); display: grid; place-items: center; font-weight: 700; font-size: var(--fs-xs); } .user-chip-text { color: var(--text-primary); font-weight: 600; } .icon-btn { width: 36px; height: 36px; display: grid; place-items: center; background-color: transparent; border: 1px solid var(--border-default); color: var(--text-secondary); border-radius: var(--r-md); cursor: pointer; transition: all var(--d-fast) var(--easing); } .icon-btn:hover { background-color: var(--bg-surface-2); color: var(--text-primary); } .icon-btn svg { width: 18px; height: 18px; } .icon-btn-danger { color: var(--error-500); border-color: var(--error-200); } .icon-btn-danger:hover { background-color: var(--error-50); color: var(--error-600); border-color: var(--error-300); } .content-area { flex: 1; padding: var(--s-8) var(--s-6) var(--s-12); max-width: var(--container-max); width: 100%; margin: 0 auto; } @media (max-width: 900px) { .sidebar { display: none; } .content-area { padding: var(--s-6) var(--s-4) var(--s-12); } } /* ---------- Card ---------- */ .card { background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--r-xl); box-shadow: var(--shadow-xs); margin-bottom: var(--s-6); transition: background-color var(--d-base) var(--easing), border-color var(--d-base) var(--easing); } .card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--border-subtle); } .card-title { font-size: var(--fs-lg); font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: var(--s-2); } .card-title .title-icon { width: 32px; height: 32px; display: grid; place-items: center; background-color: var(--brand-50); color: var(--brand-600); border-radius: var(--r-md); } [data-theme="dark"] .card-title .title-icon { background-color: rgba(249, 115, 22, 0.12); color: var(--brand-300); } .card-title svg { width: 16px; height: 16px; } .card-body { padding: var(--s-6); } .card-footer { padding: var(--s-4) var(--s-6); border-top: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: var(--fs-sm); } /* ---------- Stats ---------- */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); margin-bottom: var(--s-6); } .stat-card { background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--r-xl); padding: var(--s-5); display: flex; align-items: center; gap: var(--s-4); transition: all var(--d-base) var(--easing); } .stat-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--border-strong); } .stat-card .stat-icon { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--r-md); } .stat-card .stat-icon svg { width: 20px; height: 20px; } .stat-card .stat-icon.brand { background-color: var(--brand-50); color: var(--brand-600); } .stat-card .stat-icon.success { background-color: var(--success-50); color: var(--success-600); } .stat-card .stat-icon.info { background-color: var(--info-50); color: var(--info-600); } .stat-card .stat-icon.danger { background-color: var(--danger-50); color: var(--danger-600); } .stat-card .stat-icon.warning { background-color: var(--warning-50); color: var(--warning-600); } [data-theme="dark"] .stat-card .stat-icon.brand { background-color: rgba(249, 115, 22, 0.12); color: var(--brand-300); } [data-theme="dark"] .stat-card .stat-icon.success { background-color: rgba(16, 185, 129, 0.12); color: #34D399; } [data-theme="dark"] .stat-card .stat-icon.info { background-color: rgba(14, 165, 233, 0.12); color: #38BDF8; } [data-theme="dark"] .stat-card .stat-icon.danger { background-color: rgba(239, 68, 68, 0.12); color: #F87171; } [data-theme="dark"] .stat-card .stat-icon.warning { background-color: rgba(245, 158, 11, 0.12); color: #FBBF24; } .stat-card .stat-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--text-tertiary); margin-bottom: 4px; } .stat-card .stat-value { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 40px; padding: 0 var(--s-4); border-radius: var(--r-md); font-size: var(--fs-base); font-weight: 600; line-height: 1; cursor: pointer; border: 1px solid transparent; transition: all var(--d-fast) var(--easing); white-space: nowrap; user-select: none; } .btn:focus-visible { outline: 3px solid rgba(249, 115, 22, 0.4); outline-offset: 2px; } .btn svg { width: 16px; height: 16px; } .btn-primary { background-color: var(--brand-600); color: #fff; box-shadow: var(--shadow-xs); } .btn-primary:hover { background-color: var(--brand-700); box-shadow: var(--shadow-sm); } .btn-primary:active { background-color: var(--brand-800); } .btn-primary:disabled { background-color: var(--neutral-300); color: var(--neutral-500); cursor: not-allowed; box-shadow: none; } [data-theme="dark"] .btn-primary:disabled { background-color: var(--neutral-700); color: var(--neutral-500); } .btn-secondary { background-color: var(--bg-surface); color: var(--text-primary); border-color: var(--border-default); } .btn-secondary:hover { background-color: var(--bg-surface-2); border-color: var(--border-strong); } .btn-ghost { background-color: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--bg-surface-2); color: var(--text-primary); } .btn-danger { background-color: var(--danger-600); color: #fff; } .btn-danger:hover { background-color: var(--danger-700); } .btn-success { background-color: var(--success-600); color: #fff; } .btn-success:hover { background-color: var(--success-700); } .btn-sm { height: 32px; padding: 0 var(--s-3); font-size: var(--fs-sm); } .btn-lg { height: 48px; padding: 0 var(--s-6); font-size: var(--fs-md); } .btn-block { width: 100%; } .btn-icon { width: 36px; padding: 0; } .btn-icon.btn-sm { width: 30px; height: 30px; } /* ---------- Form controls ---------- */ .input, .select, .textarea { width: 100%; height: 40px; padding: 0 var(--s-3); background-color: var(--bg-surface); border: 1px solid var(--border-default); color: var(--text-primary); border-radius: var(--r-md); font-size: var(--fs-base); transition: border-color var(--d-fast) var(--easing), box-shadow var(--d-fast) var(--easing); } .input::placeholder, .textarea::placeholder { color: var(--text-tertiary); } .input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15); } .textarea { height: auto; padding: var(--s-3); resize: vertical; min-height: 96px; font-family: var(--font-mono); font-size: var(--fs-sm); } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; } [data-theme="dark"] .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } .input-with-icon { position: relative; } .input-with-icon svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-tertiary); pointer-events: none; } .input-with-icon input { padding-left: 36px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); } @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } } .form-label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; } .form-label .req { color: var(--danger-600); margin-left: 2px; } .form-hint { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 6px; } .form-hint.warn { color: var(--warning-600); } .form-hint.info { color: var(--info-600); } .form-group { margin-bottom: var(--s-4); } .checkbox { width: 16px; height: 16px; accent-color: var(--brand-600); cursor: pointer; vertical-align: middle; } /* ---------- Table ---------- */ .table-wrap { overflow-x: auto; overflow-y: visible; border-radius: var(--r-lg); border: 1px solid var(--border-default); background-color: var(--bg-surface); } .table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); } .table thead th { text-align: left; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); background-color: var(--bg-surface-2); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border-default); white-space: nowrap; position: sticky; top: 0; } .table tbody td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr { transition: background-color var(--d-fast); } .table tbody tr:hover { background-color: var(--bg-surface-2); } .table tbody tr.is-running { background-color: rgba(16, 185, 129, 0.04); } [data-theme="dark"] .table tbody tr.is-running { background-color: rgba(16, 185, 129, 0.06); } .table tbody tr:hover .icon-btn:not(:hover) { opacity: 0.85; } .table tbody td:last-child { position: relative; } .cell-name { font-weight: 600; color: var(--text-primary); } .cell-meta { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; } .cell-link { font-weight: 600; color: var(--text-primary); text-decoration: none; transition: color var(--d-fast); } .cell-link:hover { color: var(--brand-600); text-decoration: underline; } .mono-chip { display: inline-block; padding: 2px 8px; background-color: var(--bg-surface-2); color: var(--text-secondary); border-radius: var(--r-sm); font-family: var(--font-mono); font-size: var(--fs-xs); } .row-actions { display: inline-flex; align-items: center; gap: var(--s-1); } .table-empty { padding: var(--s-16) var(--s-6); text-align: center; color: var(--text-tertiary); background-color: var(--bg-surface); } .table-empty .empty-icon { width: 56px; height: 56px; margin: 0 auto var(--s-4); display: grid; place-items: center; background-color: var(--bg-surface-2); color: var(--text-tertiary); border-radius: var(--r-xl); } .table-empty h3 { font-size: var(--fs-lg); font-weight: 600; color: var(--text-primary); margin-bottom: var(--s-1); } .table-empty p { font-size: var(--fs-sm); margin-bottom: var(--s-4); } /* ---------- Badge ---------- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; } .badge .dot { width: 6px; height: 6px; border-radius: var(--r-full); background-color: currentColor; } .badge.running { background-color: var(--success-50); color: var(--success-700); } .badge.stopped { background-color: var(--bg-surface-2); color: var(--text-secondary); } .badge.error { background-color: var(--danger-50); color: var(--danger-700); } .badge.info { background-color: var(--info-50); color: var(--info-600); } .badge.warn { background-color: var(--warning-50); color: var(--warning-700); } .badge.brand { background-color: var(--brand-50); color: var(--brand-700); } .badge.neutral { background-color: var(--bg-surface-2); color: var(--text-secondary); } [data-theme="dark"] .badge.running { background-color: rgba(16, 185, 129, 0.14); color: #34D399; } [data-theme="dark"] .badge.error { background-color: rgba(244, 63, 94, 0.14); color: #FB7185; } [data-theme="dark"] .badge.info { background-color: rgba(14, 165, 233, 0.14); color: #38BDF8; } [data-theme="dark"] .badge.warn { background-color: rgba(245, 158, 11, 0.14); color: #FBBF24; } [data-theme="dark"] .badge.brand { background-color: rgba(249, 115, 22, 0.14); color: #FB923C; } .badge .dot.pulse { animation: badgePulse 1.6s ease-in-out infinite; } @keyframes badgePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.7); } } /* ---------- Modal ---------- */ .modal-backdrop { position: fixed; inset: 0; background-color: var(--bg-overlay); backdrop-filter: blur(4px); z-index: 50; display: none; align-items: center; justify-content: center; padding: var(--s-4); animation: fadeIn var(--d-base) var(--easing); } .modal-backdrop.open { display: flex; } .modal { background-color: var(--bg-surface); border-radius: var(--r-xl); box-shadow: var(--shadow-xl); width: 100%; max-width: 560px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden; animation: modalIn var(--d-slow) var(--easing); } .modal.modal-lg { max-width: 720px; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--border-default); } .modal-header .modal-title { font-size: var(--fs-lg); font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: var(--s-2); } .modal-header .modal-title svg { width: 18px; height: 18px; color: var(--text-brand); } .modal-body { padding: var(--s-6); overflow-y: auto; } .modal-footer { padding: var(--s-4) var(--s-6); border-top: 1px solid var(--border-default); display: flex; justify-content: flex-end; gap: var(--s-2); background-color: var(--bg-surface-2); } .modal-close { width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: transparent; border-radius: var(--r-md); color: var(--text-tertiary); cursor: pointer; transition: background-color var(--d-fast) var(--easing), color var(--d-fast) var(--easing); } .modal-close:hover { background-color: var(--bg-surface-2); color: var(--text-primary); } .modal-close svg { width: 18px; height: 18px; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Action menu (3 chấm) */ .dropdown { position: relative; display: inline-block; } .dropdown-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; max-width: 280px; background-color: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 4px; z-index: 40; display: none; animation: fadeIn var(--d-fast) var(--easing); } .dropdown.open .dropdown-menu { display: block; } .dropdown-item { display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: 8px 10px; border: 0; background: transparent; border-radius: var(--r-sm); color: var(--text-primary); font-size: var(--fs-sm); text-align: left; cursor: pointer; transition: background-color var(--d-fast) var(--easing); } .dropdown-item:hover { background-color: var(--bg-surface-2); } .dropdown-item.danger { color: var(--danger-600); } .dropdown-item.danger:hover { background-color: var(--danger-50); } [data-theme="dark"] .dropdown-item.danger:hover { background-color: rgba(244, 63, 94, 0.12); } .dropdown-item svg { width: 14px; height: 14px; } .dropdown-divider { height: 1px; background-color: var(--border-default); margin: 4px 0; } .dropdown-header { padding: 8px 10px 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; } .dropdown-section-label { padding: 4px 10px; font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; } .dropdown-item[disabled], .dropdown-item[aria-disabled="true"] { color: var(--text-tertiary); cursor: not-allowed; opacity: 0.7; } /* ---------- Toast ---------- */ .toast-region { position: fixed; bottom: var(--s-6); right: var(--s-6); z-index: 100; display: flex; flex-direction: column-reverse; gap: var(--s-2); pointer-events: none; max-width: 380px; } .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--s-3); background-color: var(--bg-elevated); border: 1px solid var(--border-default); border-left: 3px solid var(--info-500); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); box-shadow: var(--shadow-lg); animation: toastIn var(--d-base) var(--easing); min-width: 280px; } .toast.success { border-left-color: var(--success-500); } .toast.error { border-left-color: var(--danger-500); } .toast.warn { border-left-color: var(--warning-500); } .toast .toast-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--info-500); } .toast.success .toast-icon { color: var(--success-600); } .toast.error .toast-icon { color: var(--danger-600); } .toast.warn .toast-icon { color: var(--warning-600); } .toast .toast-body { flex: 1; min-width: 0; } .toast .toast-title { font-weight: 600; color: var(--text-primary); font-size: var(--fs-sm); } .toast .toast-msg { color: var(--text-secondary); font-size: var(--fs-sm); margin-top: 2px; } .toast .toast-close { width: 24px; height: 24px; border: 0; background: transparent; color: var(--text-tertiary); cursor: pointer; border-radius: var(--r-sm); } .toast .toast-close:hover { color: var(--text-primary); background-color: var(--bg-surface-2); } .toast.is-leaving { animation: toastOut var(--d-base) var(--easing) forwards; } @keyframes toastIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } } @keyframes toastOut { to { opacity: 0; transform: translateX(8px); } } /* ---------- Alert / Inline ---------- */ .alert { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); font-size: var(--fs-sm); border-left: 3px solid var(--info-500); background-color: var(--info-50); color: var(--info-600); margin-bottom: var(--s-4); } .alert.error { border-left-color: var(--danger-500); background-color: var(--danger-50); color: var(--danger-700); } .alert.success { border-left-color: var(--success-500); background-color: var(--success-50); color: var(--success-700); } .alert.warn { border-left-color: var(--warning-500); background-color: var(--warning-50); color: var(--warning-700); } [data-theme="dark"] .alert { color: #38BDF8; } [data-theme="dark"] .alert.error { background-color: rgba(244, 63, 94, 0.10); color: #FB7185; } [data-theme="dark"] .alert.success { background-color: rgba(16, 185, 129, 0.10); color: #34D399; } [data-theme="dark"] .alert.warn { background-color: rgba(245, 158, 11, 0.10); color: #FBBF24; } /* ---------- Auth pages (split layout) ---------- */ .auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background-color: var(--bg-app); } @media (max-width: 900px) { .auth-shell { grid-template-columns: 1fr; } } .auth-side { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%); color: #fff; padding: var(--s-12); display: flex; flex-direction: column; justify-content: space-between; } @media (max-width: 900px) { .auth-side { display: none; } } .auth-side::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.18) 0, transparent 40%), radial-gradient(circle at 80% 70%, rgba(255,255,255,0.12) 0, transparent 40%); pointer-events: none; } .auth-side::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1.5px); background-size: 22px 22px; opacity: 0.25; mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent); } .auth-side .brand-line { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-lg); font-weight: 700; position: relative; z-index: 1; } .auth-side .brand-line .brand-mark { width: 36px; height: 36px; background-color: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.32); border-radius: var(--r-md); display: grid; place-items: center; } .auth-side h2 { font-size: var(--fs-3xl); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: var(--s-3); position: relative; z-index: 1; max-width: 360px; } .auth-side p { font-size: var(--fs-md); line-height: 1.6; opacity: 0.92; max-width: 380px; position: relative; z-index: 1; } .auth-side ul { list-style: none; margin-top: var(--s-6); position: relative; z-index: 1; } .auth-side ul li { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.92); } .auth-side ul li svg { width: 18px; height: 18px; opacity: 0.9; } .auth-form-side { display: flex; align-items: center; justify-content: center; padding: var(--s-12) var(--s-6); } .auth-card { width: 100%; max-width: 400px; } .auth-header { margin-bottom: var(--s-8); } .auth-header .eyebrow { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: var(--text-brand); margin-bottom: var(--s-2); } .auth-header h1 { font-size: var(--fs-2xl); font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; margin-bottom: var(--s-2); } .auth-header p { color: var(--text-secondary); font-size: var(--fs-base); } .auth-foot { margin-top: var(--s-6); font-size: var(--fs-sm); color: var(--text-secondary); text-align: center; } /* ---------- Countdown & live state ---------- */ .countdown { background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); color: #fff; border-radius: var(--r-xl); padding: var(--s-6); text-align: center; box-shadow: 0 10px 24px rgba(249, 115, 22, 0.25); } .countdown-label { text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: 0.08em; opacity: 0.85; font-weight: 600; } .countdown-time { font-family: var(--font-mono); font-size: var(--fs-display); font-weight: 700; letter-spacing: 0.04em; margin: var(--s-2) 0; font-variant-numeric: tabular-nums; } .countdown-info { font-size: var(--fs-sm); opacity: 0.9; } /* Log console */ .log-console { background-color: #0B1220; color: var(--neutral-200); font-family: var(--font-mono); font-size: var(--fs-sm); padding: var(--s-4); border-radius: var(--r-md); height: 380px; overflow-y: auto; line-height: 1.7; border: 1px solid #1E293B; } .log-line { display: grid; grid-template-columns: 70px 60px 1fr; gap: var(--s-3); align-items: baseline; } .log-time { color: #64748B; font-size: var(--fs-xs); } .log-level { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; padding: 1px 6px; border-radius: var(--r-xs); display: inline-block; text-align: center; } .log-level.info { background: rgba(14,165,233,0.15); color: #38BDF8; } .log-level.success { background: rgba(16,185,129,0.15); color: #34D399; } .log-level.warn { background: rgba(245,158,11,0.15); color: #FBBF24; } .log-level.error { background: rgba(244,63,94,0.15); color: #FB7185; } .log-msg { color: #E2E8F0; word-break: break-word; } .log-empty { color: #64748B; font-style: italic; } /* ---------- Misc ---------- */ .divider { height: 1px; background-color: var(--border-default); margin: var(--s-6) 0; } .muted { color: var(--text-tertiary); } .text-brand { color: var(--text-brand); } .text-success { color: var(--success-600); } .text-danger { color: var(--danger-600); } .flex-row { display: flex; align-items: center; gap: var(--s-2); } .flex-col { display: flex; flex-direction: column; gap: var(--s-2); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); } .between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } .center { display: flex; align-items: center; justify-content: center; } .hidden { display: none !important; } .skel { background: linear-gradient(90deg, var(--bg-surface-2) 0%, var(--neutral-200) 50%, var(--bg-surface-2) 100%); background-size: 200% 100%; animation: skelShimmer 1.4s ease-in-out infinite; border-radius: var(--r-sm); color: transparent; } [data-theme="dark"] .skel { background: linear-gradient(90deg, var(--neutral-800) 0%, var(--neutral-700) 50%, var(--neutral-800) 100%); background-size: 200% 100%; } @keyframes skelShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .scrollable { overflow-y: auto; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: var(--r-full); border: 2px solid var(--bg-app); } ::-webkit-scrollbar-thumb:hover { background: var(--neutral-400); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--neutral-700); border-color: var(--bg-app); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--neutral-600); } /* Settings row (used for cookie status card) */ .settings-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-5); background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--r-xl); margin-bottom: var(--s-6); } .settings-row .left { display: flex; align-items: center; gap: var(--s-3); min-width: 0; } .settings-row .left .icon-wrap { width: 40px; height: 40px; border-radius: var(--r-md); background-color: var(--brand-50); color: var(--brand-700); display: grid; place-items: center; flex-shrink: 0; } [data-theme="dark"] .settings-row .left .icon-wrap { background-color: rgba(249,115,22,0.14); color: var(--brand-300); } .settings-row .left .icon-wrap svg { width: 18px; height: 18px; } .settings-row .left .title { font-weight: 600; color: var(--text-primary); font-size: var(--fs-base); } .settings-row .left .meta { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; } .settings-row .right { flex-shrink: 0; } /* ===== Bulk action toolbar (d) ===== */ .bulk-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); padding: 10px 14px; margin-bottom: var(--s-3); background: linear-gradient(135deg, var(--brand-50, rgba(99,102,241,0.08)) 0%, var(--bg-surface-2) 100%); border: 1px solid var(--brand-200, rgba(99,102,241,0.25)); border-radius: 10px; animation: bulk-toolbar-in 180ms ease-out; } @keyframes bulk-toolbar-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .bulk-toolbar-info { display: inline-flex; align-items: center; gap: var(--s-3); font-size: 13px; } .bulk-toolbar-count { color: var(--text-primary); } .bulk-toolbar-count strong { color: var(--text-brand); font-weight: 700; } .bulk-toolbar-clear { background: transparent; border: 0; cursor: pointer; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 4px 8px; border-radius: 6px; } .bulk-toolbar-clear:hover { background-color: var(--bg-surface-2); color: var(--text-primary); } .bulk-toolbar-actions { display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; } .bulk-checkbox { width: 16px; height: 16px; cursor: pointer; accent-color: var(--text-brand, #6366f1); } .bulk-row-checkbox { width: 16px; height: 16px; cursor: pointer; accent-color: var(--text-brand, #6366f1); } /* Hide checkbox when row already selected (style) */ .table tbody tr td:first-child { padding-left: 14px; padding-right: 6px; }