/* ============================================================ Vietnam Media Studio · Design System Single source of truth for typography, color, spacing, components. ============================================================ */ :root { /* Color — neutral surface palette (warm gray, easier on eyes than pure black) */ --c-bg: #f7f7f9; --c-surface: #ffffff; --c-surface-2: #fbfbfd; --c-surface-3: #f1f1f4; --c-border: #e5e5ea; --c-border-strong: #d2d2d7; --c-divider: #f0f0f3; /* Color — text */ --c-text: #1d1d1f; --c-text-2: #4a4a52; --c-muted: #86868b; --c-muted-2: #a1a1a6; /* Color — brand + states */ --c-brand: #0071e3; --c-brand-hover: #0077ed; --c-brand-fade: #e5f1ff; --c-brand-strong: #0050a8; --c-success: #00733e; --c-success-bg: #e6f7ec; --c-warn: #cb6500; --c-warn-bg: #fff3e0; --c-danger: #c1272d; --c-danger-bg: #fff1f2; --c-amber: #8a4a00; --c-amber-bg: #fdf4e6; /* Persona color theming. - {p}: solid color used for accents / left borders / strong text on tinted bg. - {p}-fade: very-light tint for badge background. - {p}-strong: deep variant for text on -fade. - {p}-grad-from / {p}-grad-to: pair for hero-card gradients. */ --c-persona-boss-ip: #ea580c; --c-persona-boss-ip-fade: #fff7ed; --c-persona-boss-ip-strong: #9a3412; --c-persona-boss-ip-grad-from: #fff7ed; --c-persona-boss-ip-grad-to: #fed7aa; --c-persona-visa: #2563eb; --c-persona-visa-fade: #eff6ff; --c-persona-visa-strong: #1e40af; --c-persona-visa-grad-from: #eff6ff; --c-persona-visa-grad-to: #bfdbfe; --c-persona-enterprise: #059669; --c-persona-enterprise-fade: #ecfdf5; --c-persona-enterprise-strong: #065f46; --c-persona-enterprise-grad-from: #ecfdf5; --c-persona-enterprise-grad-to: #a7f3d0; --c-persona-inspection: #7c3aed; --c-persona-inspection-fade: #f5f3ff; --c-persona-inspection-strong: #5b21b6; --c-persona-inspection-grad-from: #f5f3ff; --c-persona-inspection-grad-to: #ddd6fe; /* Spacing scale (multiples of 4px) */ --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; /* Radius */ --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; /* Shadow */ --shadow-1: 0 1px 2px rgba(15, 17, 21, 0.04); --shadow-2: 0 1px 4px rgba(15, 17, 21, 0.06), 0 1px 2px rgba(15, 17, 21, 0.04); --shadow-3: 0 8px 24px rgba(15, 17, 21, 0.10), 0 2px 6px rgba(15, 17, 21, 0.06); /* Type */ --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* Sizes */ --t-xs: 11px; --t-sm: 12px; --t-md: 13px; --t-base: 14px; --t-lg: 16px; --t-xl: 18px; --t-2xl: 22px; /* Animation */ --ease: cubic-bezier(.4, 0, .2, 1); } /* Dark mode — opt-in via [data-theme="dark"] on . Auto via prefers-color-scheme. */ [data-theme="dark"] { --c-bg: #0e0e10; --c-surface: #1a1a1d; --c-surface-2: #232327; --c-surface-3: #2a2a2e; --c-border: #2e2e33; --c-border-strong: #3a3a40; --c-divider: #232327; --c-text: #f0f0f3; --c-text-2: #c5c5c8; --c-muted: #86868b; --c-muted-2: #6a6a6e; --c-brand: #5fa8ff; --c-brand-hover: #7dbaff; --c-brand-fade: #1a3052; --c-brand-strong: #b3d4ff; --c-success: #6cd97e; --c-success-bg: #1a3a25; --c-warn: #ffb547; --c-warn-bg: #3a2818; --c-danger: #ff5e7a; --c-danger-bg: #3a1a23; --c-amber: #ffb547; --c-amber-bg: #3a2818; /* Persona — dark mode (deepened tints, lifted strong) */ --c-persona-boss-ip: #fb923c; --c-persona-boss-ip-fade: #2a1809; --c-persona-boss-ip-strong: #fdba74; --c-persona-boss-ip-grad-from: #2a1809; --c-persona-boss-ip-grad-to: #431407; --c-persona-visa: #60a5fa; --c-persona-visa-fade: #0e1d3a; --c-persona-visa-strong: #93c5fd; --c-persona-visa-grad-from: #0e1d3a; --c-persona-visa-grad-to: #1e3a8a; --c-persona-enterprise: #34d399; --c-persona-enterprise-fade: #0a2920; --c-persona-enterprise-strong: #6ee7b7; --c-persona-enterprise-grad-from: #0a2920; --c-persona-enterprise-grad-to: #064e3b; --c-persona-inspection: #a78bfa; --c-persona-inspection-fade: #1f1535; --c-persona-inspection-strong: #c4b5fd; --c-persona-inspection-grad-from: #1f1535; --c-persona-inspection-grad-to: #3b0764; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-2: 0 1px 4px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.30); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-bg: #0e0e10; --c-surface: #1a1a1d; --c-surface-2: #232327; --c-surface-3: #2a2a2e; --c-border: #2e2e33; --c-border-strong: #3a3a40; --c-divider: #232327; --c-text: #f0f0f3; --c-text-2: #c5c5c8; --c-muted: #86868b; --c-muted-2: #6a6a6e; --c-brand: #5fa8ff; --c-brand-hover: #7dbaff; --c-brand-fade: #1a3052; --c-brand-strong: #b3d4ff; --c-success: #6cd97e; --c-success-bg: #1a3a25; --c-warn: #ffb547; --c-warn-bg: #3a2818; --c-danger: #ff5e7a; --c-danger-bg: #3a1a23; --c-amber: #ffb547; --c-amber-bg: #3a2818; --c-persona-boss-ip: #fb923c; --c-persona-boss-ip-fade: #2a1809; --c-persona-boss-ip-strong: #fdba74; --c-persona-boss-ip-grad-from: #2a1809; --c-persona-boss-ip-grad-to: #431407; --c-persona-visa: #60a5fa; --c-persona-visa-fade: #0e1d3a; --c-persona-visa-strong: #93c5fd; --c-persona-visa-grad-from: #0e1d3a; --c-persona-visa-grad-to: #1e3a8a; --c-persona-enterprise: #34d399; --c-persona-enterprise-fade: #0a2920; --c-persona-enterprise-strong: #6ee7b7; --c-persona-enterprise-grad-from: #0a2920; --c-persona-enterprise-grad-to: #064e3b; --c-persona-inspection: #a78bfa; --c-persona-inspection-fade: #1f1535; --c-persona-inspection-strong: #c4b5fd; --c-persona-inspection-grad-from: #1f1535; --c-persona-inspection-grad-to: #3b0764; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-2: 0 1px 4px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.30); } } /* Smooth theme transition */ html { color-scheme: light dark; } body, header, section, .card, button, input, select, textarea, table, .badge, .chip, .modal { transition: background-color .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease); } /* ============================================================ Reset + base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; font-family: var(--font-sans); font-size: var(--t-base); line-height: 1.6; background: var(--c-bg); color: var(--c-text); font-feature-settings: "tnum" 0; } a { color: var(--c-brand); text-decoration: none; } a:hover { color: var(--c-brand-hover); } ::selection { background: var(--c-brand-fade); color: var(--c-brand-strong); } /* ============================================================ Layout: app shell (header + main) ============================================================ */ .app-header { background: var(--c-surface); border-bottom: 1px solid var(--c-divider); padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; position: sticky; top: 0; z-index: 30; backdrop-filter: saturate(180%) blur(16px); background-color: rgba(255, 255, 255, .92); } .app-header .brand { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .app-header h1, .app-title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.005em; } .app-nav { display: flex; gap: 2px; flex-wrap: wrap; font-size: var(--t-md); } .app-nav a { color: var(--c-muted); padding: 5px 11px; border-radius: var(--r-md); transition: background .12s var(--ease), color .12s var(--ease); } .app-nav a:hover { background: var(--c-surface-3); color: var(--c-text); } .app-nav a.active { background: var(--c-brand); color: white; } .app-me { font-size: var(--t-md); color: var(--c-muted); } .app-me a { color: var(--c-brand); margin-left: 10px; cursor: pointer; } main { max-width: 1240px; margin: 0 auto; padding: 24px; } /* ============================================================ Headings ============================================================ */ h1, h2, h3, h4, h5 { letter-spacing: -.01em; color: var(--c-text); margin: 0; } h2 { font-size: var(--t-lg); font-weight: 600; line-height: 1.4; } h3 { font-size: var(--t-base); font-weight: 600; line-height: 1.4; } h4 { font-size: var(--t-md); font-weight: 600; } /* ============================================================ Sections / cards ============================================================ */ section.card, .card-section { background: var(--c-surface); border-radius: var(--r-xl); padding: 22px 24px; margin-bottom: 16px; box-shadow: var(--shadow-2); } section.card > h2:first-child, .card-section > h2:first-child { margin-bottom: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ============================================================ Buttons ============================================================ */ button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; font-size: var(--t-md); font-weight: 500; font-family: inherit; color: white; background: var(--c-brand); border: 1px solid transparent; border-radius: var(--r-md); cursor: pointer; line-height: 1.4; transition: background .12s var(--ease), border-color .12s var(--ease), transform .04s var(--ease), box-shadow .12s var(--ease); } button:hover, .btn:hover { background: var(--c-brand-hover); } button:active, .btn:active { transform: translateY(1px); } button:focus-visible, .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 113, 227, .30); } button:disabled, .btn:disabled { background: var(--c-muted-2); cursor: not-allowed; opacity: .7; } button.secondary, .btn-secondary { background: var(--c-surface); color: var(--c-brand); border-color: var(--c-border-strong); } button.secondary:hover, .btn-secondary:hover { background: var(--c-surface-3); color: var(--c-brand-strong); border-color: var(--c-border-strong); } button.secondary.active, .btn-secondary.active { background: var(--c-brand-fade); color: var(--c-brand-strong); border-color: var(--c-brand); } button.danger, .btn-danger { background: var(--c-surface); color: var(--c-danger); border-color: #f5c6c8; } button.danger:hover, .btn-danger:hover { background: var(--c-danger-bg); } button.tiny, .btn-tiny { padding: 4px 10px; font-size: var(--t-sm); font-weight: 500; } /* ============================================================ Form controls ============================================================ */ input, select, textarea { font-family: inherit; font-size: var(--t-md); padding: 8px 11px; border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface-2); color: var(--c-text); width: 100%; line-height: 1.5; transition: border-color .12s var(--ease), background .12s var(--ease), box-shadow .12s var(--ease); } input:hover, select:hover, textarea:hover { border-color: var(--c-muted-2); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-brand); background: var(--c-surface); box-shadow: 0 0 0 3px rgba(0, 113, 227, .15); } textarea { line-height: 1.6; resize: vertical; min-height: 64px; } input::placeholder, textarea::placeholder { color: var(--c-muted-2); } label { font-size: var(--t-sm); color: var(--c-muted); display: block; margin-bottom: 4px; } .field { margin-bottom: 14px; } .field-row { display: flex; gap: 8px; align-items: end; } /* ============================================================ Tables ============================================================ */ table { width: 100%; border-collapse: collapse; font-size: var(--t-md); background: var(--c-surface); border-radius: var(--r-lg); overflow: hidden; } table th, table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--c-divider); vertical-align: top; } table th { background: var(--c-surface-2); color: var(--c-muted); font-weight: 500; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .5px; } table tbody tr:last-child td { border-bottom: none; } table tbody tr:hover { background: var(--c-surface-2); } /* ============================================================ Badges & chips ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: var(--r-sm); font-size: var(--t-xs); font-weight: 500; background: var(--c-surface-3); color: var(--c-text-2); white-space: nowrap; line-height: 1.5; } .badge.brand { background: var(--c-brand-fade); color: var(--c-brand-strong); } .badge.success { background: var(--c-success-bg); color: var(--c-success); } .badge.warn { background: var(--c-warn-bg); color: var(--c-warn); } .badge.danger { background: var(--c-danger-bg); color: var(--c-danger); } .badge.amber { background: var(--c-amber-bg); color: var(--c-amber); } /* Generic persona badge — overridden by .persona-{key} below */ .badge.persona { background: var(--c-amber-bg); color: var(--c-amber); } /* ─── Persona color theming ────────────────────────────────── Set ONE of these classes on a container. It exposes 5 vars downstream code can use: --persona-c, --persona-fade, --persona-strong, --persona-grad-from, --persona-grad-to This keeps CSS DRY — components don't need to switch on persona. */ .p-boss-ip { --persona-c: var(--c-persona-boss-ip); --persona-fade: var(--c-persona-boss-ip-fade); --persona-strong: var(--c-persona-boss-ip-strong); --persona-grad-from: var(--c-persona-boss-ip-grad-from); --persona-grad-to: var(--c-persona-boss-ip-grad-to); } .p-visa { --persona-c: var(--c-persona-visa); --persona-fade: var(--c-persona-visa-fade); --persona-strong: var(--c-persona-visa-strong); --persona-grad-from: var(--c-persona-visa-grad-from); --persona-grad-to: var(--c-persona-visa-grad-to); } .p-enterprise { --persona-c: var(--c-persona-enterprise); --persona-fade: var(--c-persona-enterprise-fade); --persona-strong: var(--c-persona-enterprise-strong); --persona-grad-from: var(--c-persona-enterprise-grad-from); --persona-grad-to: var(--c-persona-enterprise-grad-to); } .p-inspection { --persona-c: var(--c-persona-inspection); --persona-fade: var(--c-persona-inspection-fade); --persona-strong: var(--c-persona-inspection-strong); --persona-grad-from: var(--c-persona-inspection-grad-from); --persona-grad-to: var(--c-persona-inspection-grad-to); } /* When the persona-themed container has .badge.persona, paint it. */ .p-boss-ip .badge.persona, .p-visa .badge.persona, .p-enterprise .badge.persona, .p-inspection .badge.persona { background: var(--persona-fade); color: var(--persona-strong); } /* Standalone persona badge (when no parent context). Apply both classes: `.badge.persona.p-boss-ip` etc. */ .badge.persona.p-boss-ip, .badge.persona.p-visa, .badge.persona.p-enterprise, .badge.persona.p-inspection { background: var(--persona-fade); color: var(--persona-strong); } /* Card with persona accent: 3px left border in persona color. */ .persona-card { border-left: 3px solid var(--persona-c, var(--c-border-strong)); } /* Hero card with persona gradient bg. */ .persona-hero { background: linear-gradient(135deg, var(--persona-grad-from), var(--persona-grad-to)); border: 1px solid var(--persona-fade); } .chip { padding: 5px 11px; border-radius: var(--r-md); border: 1px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-muted); cursor: pointer; font-size: var(--t-sm); display: inline-flex; align-items: center; gap: 6px; transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease); } .chip:hover { color: var(--c-text); border-color: var(--c-muted-2); } .chip.on { background: var(--c-brand); color: white; border-color: var(--c-brand); } /* ============================================================ Utilities ============================================================ */ .muted { color: var(--c-muted); } .text-sm { font-size: var(--t-sm); } .text-xs { font-size: var(--t-xs); } .empty { padding: 40px 20px; text-align: center; color: var(--c-muted); font-size: var(--t-md); background: var(--c-surface); border-radius: var(--r-lg); border: 1px dashed var(--c-border); } .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .row-end { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; } .spacer { flex: 1; } /* ============================================================ Modals ============================================================ */ .modal-bg { position: fixed; inset: 0; background: rgba(15, 17, 21, .5); display: none; align-items: center; justify-content: center; z-index: 50; padding: 20px; backdrop-filter: blur(2px); } .modal-bg.show { display: flex; } .modal { background: var(--c-surface); border-radius: var(--r-xl); padding: 22px 24px; width: 100%; max-width: 520px; max-height: 90vh; overflow: auto; box-shadow: var(--shadow-3); } .modal h2 { margin-bottom: 14px; } /* ============================================================ Alerts (inline status) ============================================================ */ .alert { padding: 10px 13px; font-size: var(--t-md); border-radius: var(--r-md); margin-top: 10px; display: none; line-height: 1.5; } .alert.show { display: block; } .alert.success { background: var(--c-success-bg); color: var(--c-success); } .alert.warn { background: var(--c-warn-bg); color: var(--c-warn); } .alert.error { background: var(--c-danger-bg); color: var(--c-danger); } .alert.info { background: var(--c-brand-fade); color: var(--c-brand-strong); } /* ============================================================ App shell — left sidebar layout ============================================================ */ /* Layout model: - Col 1: sidebar (spans all rows, sticky) - Col 2 row 1: bare
(back-link + page title + actions) - Col 2 row 2:
content Sidebar gets `grid-row: 1 / -1` so its height is governed by the grid (not by its own `height: 100vh` declaration); this prevents the sidebar from forcing row 1 to 100vh and pushing main below the fold (the original bug). */ body.app-shell { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: auto 1fr; min-height: 100vh; } body.app-shell > main { grid-column: 2; grid-row: 2; max-width: 1100px; margin: 0 auto; padding: 24px 28px; width: 100%; } body.app-shell > header { grid-column: 2; grid-row: 1; /* Bare in-page headers stay visible; legacy nav-headers get hidden below. */ max-width: 1100px; width: 100%; margin: 0 auto; padding: 18px 28px 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } body.app-shell > header h1, body.app-shell > header > h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.app-shell > header > a { color: var(--c-brand); text-decoration: none; font-size: var(--t-md); flex-shrink: 0; } body.app-shell > header > a:hover { color: var(--c-brand-hover); } body.app-shell > .layout { /* guide.html uses .layout grid — let it span column 2 */ grid-column: 2; grid-row: 1 / -1; } /* Hide LEGACY top-nav headers (the ones with