/* ────────────────────────────────────────────────────────────────────── NOW OS — Design System v1 Apple-inspired light/vibrant aesthetic with brand-red accent discipline. Loaded on every standalone dashboard surface via inject_dashboard_chrome.py alongside the auth bootstrap. Provides: - Design tokens (colors, type, shadows, radii, spacing, motion) - Mesh + grain backdrop (added to automatically) - Floating glass-pill top nav - Card + button + input + badge + table primitives - Sidebar + answer + lane-badge patterns - Logo lockup (uses /logo.png verbatim, never SVG recreation) Override: Per-page overrides are allowed but rare. If you find yourself overriding more than 3 tokens, propose an addition to this file instead — drift is the enemy of a unified product feel. ──────────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ── Backgrounds ─────────────────────────────────────────────────── */ --nowos-bg-canvas: #FAFBFC; --nowos-bg-surface: #FFFFFF; --nowos-bg-subtle: #F5F7FA; --nowos-bg-elevated: #FFFFFF; --nowos-bg-tint-red: #FFF5F6; --nowos-bg-tint-silver: #F4F6F8; /* ── Brand ──────────────────────────────────────────────────────── */ --nowos-brand-red: #E63946; --nowos-brand-red-2: #D02838; --nowos-brand-red-3: #B91C2C; --nowos-brand-red-soft: #FFEDEF; --nowos-brand-red-glow: rgba(230,57,70,0.18); --nowos-brand-silver: #B0B7BE; --nowos-brand-silver-2: #8A929A; --nowos-brand-silver-3: #6B7380; /* ── Text ───────────────────────────────────────────────────────── */ --nowos-text-primary: #14181F; --nowos-text-secondary: #5A6478; --nowos-text-tertiary: #8B95A5; --nowos-text-muted: #A0A8B3; --nowos-text-on-brand: #FFFFFF; /* ── Borders ────────────────────────────────────────────────────── */ --nowos-border-subtle: #ECEFF3; --nowos-border-default: #DDE2E8; --nowos-border-strong: #B7BDC7; /* ── Semantic ───────────────────────────────────────────────────── */ --nowos-success: #16A34A; --nowos-success-soft: #ECFDF3; --nowos-warning: #F59E0B; --nowos-warning-soft: #FEF8E8; --nowos-danger: #E53935; --nowos-danger-soft: #FEEAEA; --nowos-info: #2563EB; --nowos-info-soft: #EEF4FF; --nowos-purple: #9333EA; --nowos-purple-soft: #F5EAFF; /* ── Lane colors (existing eight-lane palette tuned for light bg) ── */ --nowos-lane-rubric: #16A34A; --nowos-lane-rubric-soft: #ECFDF3; --nowos-lane-dynamic: #2563EB; --nowos-lane-dynamic-soft: #EEF4FF; --nowos-lane-rubric-web: #F59E0B; --nowos-lane-rubric-web-soft:#FEF8E8; --nowos-lane-dynamic-web: #F97316; --nowos-lane-dynamic-web-soft:#FFF1E6; --nowos-lane-web-only: #06B6D4; --nowos-lane-web-only-soft: #ECFEFF; --nowos-lane-research: #9333EA; --nowos-lane-research-soft: #F5EAFF; --nowos-lane-system-qa: #0EA5E9; --nowos-lane-system-qa-soft:#E0F2FE; --nowos-lane-refusal: #6B7380; --nowos-lane-refusal-soft: #F1F3F6; /* ── Shadows (multi-layer for proper depth) ─────────────────────── */ --nowos-shadow-xs: 0 1px 2px rgba(20,24,31,0.04), 0 1px 1px rgba(20,24,31,0.03); --nowos-shadow-sm: 0 1px 2px rgba(20,24,31,0.04), 0 4px 8px rgba(20,24,31,0.04), 0 8px 16px rgba(20,24,31,0.04); --nowos-shadow-md: 0 2px 4px rgba(20,24,31,0.04), 0 8px 16px rgba(20,24,31,0.06), 0 24px 40px rgba(20,24,31,0.08); --nowos-shadow-lg: 0 4px 8px rgba(20,24,31,0.04), 0 16px 32px rgba(20,24,31,0.08), 0 48px 80px rgba(20,24,31,0.12); --nowos-shadow-xl: 0 8px 16px rgba(20,24,31,0.04), 0 24px 48px rgba(20,24,31,0.10), 0 64px 128px rgba(20,24,31,0.16); --nowos-shadow-brand: 0 1px 3px rgba(230,57,70,0.20), 0 8px 16px rgba(230,57,70,0.20), 0 24px 40px rgba(230,57,70,0.16); --nowos-shadow-inset-light: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 0 0 1px rgba(255,255,255,0.5); /* ── Glass ──────────────────────────────────────────────────────── */ --nowos-glass-bg: rgba(255,255,255,0.65); --nowos-glass-blur: blur(24px) saturate(180%); /* ── Type ───────────────────────────────────────────────────────── */ --nowos-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif; --nowos-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif; --nowos-font-serif: 'Instrument Serif', Georgia, serif; --nowos-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; /* ── Motion ─────────────────────────────────────────────────────── */ --nowos-ease-out: cubic-bezier(0.4, 0, 0.2, 1); --nowos-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --nowos-duration-fast: 150ms; --nowos-duration-base: 200ms; --nowos-duration-slow: 300ms; /* ── Radii ──────────────────────────────────────────────────────── */ --nowos-radius-sm: 8px; --nowos-radius-md: 12px; --nowos-radius-lg: 16px; --nowos-radius-xl: 20px; --nowos-radius-2xl: 24px; --nowos-radius-pill: 999px; /* ── Backwards-compat aliases (legacy var names from old pages) ── */ --bg: var(--nowos-bg-canvas); --surface: var(--nowos-bg-surface); --surface-2: var(--nowos-bg-subtle); --border: var(--nowos-border-subtle); --primary: var(--nowos-brand-red); --accent: var(--nowos-brand-red); --muted: var(--nowos-text-tertiary); --text: var(--nowos-text-primary); --text-dim: var(--nowos-text-secondary); --good: var(--nowos-success); --warn: var(--nowos-warning); --bad: var(--nowos-danger); --tier-automate: var(--nowos-success); --tier-augment: var(--nowos-info); --tier-assist: var(--nowos-warning); --tier-real: var(--nowos-success); --tier-mock: var(--nowos-warning); } /* ────────────────────────────────────────────────────────────────────── Base ──────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; } body { background: var(--nowos-bg-canvas); color: var(--nowos-text-primary); font-family: var(--nowos-font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv02','cv03','cv04','cv11'; min-height: 100vh; } /* Mesh + grain backdrop. Auto-applied to body by the bootstrap. */ .nowos-bg-mesh { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 60% 40% at 12% 0%, rgba(230,57,70,0.08) 0%, transparent 55%), radial-gradient(ellipse 50% 40% at 92% 12%, rgba(176,183,190,0.14) 0%, transparent 60%), radial-gradient(ellipse 80% 40% at 50% 100%, rgba(176,183,190,0.07) 0%, transparent 60%); } .nowos-bg-grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.022; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ────────────────────────────────────────────────────────────────────── Top nav: floating glass pill ──────────────────────────────────────────────────────────────────── */ .nowos-topnav { position: sticky; top: 12px; z-index: 100; max-width: 1320px; margin: 12px auto 0; border-radius: var(--nowos-radius-pill); background: var(--nowos-glass-bg); backdrop-filter: var(--nowos-glass-blur); -webkit-backdrop-filter: var(--nowos-glass-blur); box-shadow: var(--nowos-shadow-md), var(--nowos-shadow-inset-light); border: 1px solid rgba(255,255,255,0.6); } .nowos-topnav-inner { height: 60px; padding: 0 12px 0 16px; display: flex; align-items: center; gap: 20px; } /* Logo lockup — uses /logo.png verbatim. Tagline ("Work Designed™") sits below the mark on the home/landing page only; on inner pages the compact mark-only lockup is used. */ .nowos-brand-mark { display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; padding: 4px 8px; transition: opacity var(--nowos-duration-base) var(--nowos-ease-out); } .nowos-brand-mark:hover { opacity: 0.85; } .nowos-brand-mark img.nowos-logo { height: 36px; width: auto; display: block; filter: drop-shadow(0 1px 1px rgba(20,24,31,0.10)) drop-shadow(0 4px 8px rgba(230,57,70,0.18)); transition: transform 350ms var(--nowos-ease-spring); } .nowos-brand-mark:hover img.nowos-logo { transform: rotate(-6deg) scale(1.04); } .nowos-nav-tabs { display: flex; gap: 2px; flex: 1; } .nowos-nav-tab { padding: 8px 14px; font-size: 14px; font-weight: 500; color: var(--nowos-text-secondary); border-radius: var(--nowos-radius-pill); cursor: pointer; text-decoration: none; transition: all var(--nowos-duration-base) var(--nowos-ease-out); white-space: nowrap; } .nowos-nav-tab:hover { color: var(--nowos-text-primary); background: rgba(20,24,31,0.04); } .nowos-nav-tab.active { color: var(--nowos-text-primary); background: var(--nowos-bg-surface); font-weight: 600; box-shadow: var(--nowos-shadow-xs), inset 0 0 0 1px var(--nowos-border-subtle); } .nowos-nav-actions { display: flex; gap: 6px; align-items: center; } .nowos-nav-icon-btn { width: 36px; height: 36px; border-radius: var(--nowos-radius-pill); background: transparent; border: none; color: var(--nowos-text-secondary); display: grid; place-items: center; cursor: pointer; transition: all var(--nowos-duration-base) var(--nowos-ease-out); } .nowos-nav-icon-btn:hover { background: rgba(20,24,31,0.06); color: var(--nowos-text-primary); } .nowos-session-pill { padding: 6px 12px 6px 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--nowos-text-secondary); background: var(--nowos-bg-subtle); border-radius: var(--nowos-radius-pill); } .nowos-session-pill .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--nowos-success); box-shadow: 0 0 0 0 rgba(22,163,74,0.5); animation: nowos-pulse 2s infinite; } @keyframes nowos-pulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,0.5); } 70% { box-shadow: 0 0 0 6px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } } /* ────────────────────────────────────────────────────────────────────── Cards ──────────────────────────────────────────────────────────────────── */ .nowos-card { background: var(--nowos-bg-surface); border-radius: var(--nowos-radius-xl); padding: 24px; box-shadow: var(--nowos-shadow-xs), inset 0 0 0 1px var(--nowos-border-subtle); transition: all var(--nowos-duration-slow) var(--nowos-ease-out); } .nowos-card.elevated { box-shadow: var(--nowos-shadow-md), inset 0 0 0 1px var(--nowos-border-subtle); } .nowos-card.interactive { cursor: pointer; } .nowos-card.interactive:hover { box-shadow: var(--nowos-shadow-md), inset 0 0 0 1px var(--nowos-border-default); transform: translateY(-2px); } /* Card with the brand-stripe top edge accent on hover. Use on feature cards / nav cards / anywhere we want a moment of brand. */ .nowos-card.brand-stripe { position: relative; overflow: hidden; } .nowos-card.brand-stripe::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--nowos-brand-red) 0%, #FF6B7A 30%, var(--nowos-brand-silver) 70%, var(--nowos-brand-silver-2) 100%); opacity: 0; transition: opacity var(--nowos-duration-slow) var(--nowos-ease-out); } .nowos-card.brand-stripe:hover::before { opacity: 1; } /* ────────────────────────────────────────────────────────────────────── Buttons ──────────────────────────────────────────────────────────────────── */ .nowos-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; font-family: var(--nowos-font-body); font-size: 15px; font-weight: 600; border-radius: var(--nowos-radius-md); cursor: pointer; border: none; text-decoration: none; transition: all var(--nowos-duration-base) var(--nowos-ease-out); position: relative; overflow: hidden; line-height: 1.2; } .nowos-btn-primary { background: linear-gradient(180deg, #EE4753 0%, var(--nowos-brand-red) 50%, var(--nowos-brand-red-2) 100%); color: var(--nowos-text-on-brand); box-shadow: var(--nowos-shadow-brand), inset 0 1px 0 rgba(255,255,255,0.25); } .nowos-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(230,57,70,0.20), 0 12px 28px rgba(230,57,70,0.28), 0 32px 64px rgba(230,57,70,0.18), inset 0 1px 0 rgba(255,255,255,0.30); } .nowos-btn-secondary { background: var(--nowos-bg-surface); color: var(--nowos-text-primary); box-shadow: var(--nowos-shadow-xs), inset 0 0 0 1px var(--nowos-border-default); } .nowos-btn-secondary:hover { transform: translateY(-1px); box-shadow: var(--nowos-shadow-sm), inset 0 0 0 1px var(--nowos-border-strong); } .nowos-btn-ghost { background: transparent; color: var(--nowos-text-secondary); } .nowos-btn-ghost:hover { background: var(--nowos-bg-subtle); color: var(--nowos-text-primary); } .nowos-btn-danger { background: var(--nowos-danger); color: white; box-shadow: 0 4px 8px rgba(229,57,53,0.18); } .nowos-btn-danger:hover { background: #C92A24; transform: translateY(-1px); } .nowos-btn-success { background: var(--nowos-success); color: white; box-shadow: 0 4px 8px rgba(22,163,74,0.18); } .nowos-btn-success:hover { background: #128A40; transform: translateY(-1px); } .nowos-btn.size-sm { padding: 7px 14px; font-size: 13px; } .nowos-btn.size-lg { padding: 14px 26px; font-size: 16px; border-radius: var(--nowos-radius-lg); } .nowos-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; } /* Icon-only round button for app surfaces */ .nowos-icon-btn { width: 36px; height: 36px; border-radius: var(--nowos-radius-md); background: var(--nowos-bg-subtle); border: 1px solid var(--nowos-border-subtle); color: var(--nowos-text-secondary); display: grid; place-items: center; cursor: pointer; transition: all var(--nowos-duration-fast) var(--nowos-ease-out); } .nowos-icon-btn:hover { background: var(--nowos-bg-surface); color: var(--nowos-brand-red); border-color: var(--nowos-brand-red); } /* ────────────────────────────────────────────────────────────────────── Inputs ──────────────────────────────────────────────────────────────────── */ .nowos-input, .nowos-select, .nowos-textarea { width: 100%; padding: 11px 14px; font-family: var(--nowos-font-body); font-size: 15px; color: var(--nowos-text-primary); background: var(--nowos-bg-subtle); border: 1px solid var(--nowos-border-subtle); border-radius: var(--nowos-radius-md); outline: none; transition: all var(--nowos-duration-base) var(--nowos-ease-out); } .nowos-textarea { min-height: 80px; resize: vertical; line-height: 1.55; } .nowos-input:focus, .nowos-select:focus, .nowos-textarea:focus { background: var(--nowos-bg-surface); border-color: var(--nowos-info); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); } .nowos-input::placeholder, .nowos-textarea::placeholder { color: var(--nowos-text-muted); } .nowos-label { display: block; font-size: 13px; font-weight: 500; color: var(--nowos-text-secondary); margin-bottom: 6px; } /* ────────────────────────────────────────────────────────────────────── Badges (pills) ──────────────────────────────────────────────────────────────────── */ .nowos-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--nowos-radius-pill); white-space: nowrap; } .nowos-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .nowos-badge.brand { background: var(--nowos-brand-red-soft); color: var(--nowos-brand-red); } .nowos-badge.success { background: var(--nowos-success-soft); color: var(--nowos-success); } .nowos-badge.warning { background: var(--nowos-warning-soft); color: var(--nowos-warning); } .nowos-badge.danger { background: var(--nowos-danger-soft); color: var(--nowos-danger); } .nowos-badge.info { background: var(--nowos-info-soft); color: var(--nowos-info); } .nowos-badge.purple { background: var(--nowos-purple-soft); color: var(--nowos-purple); } .nowos-badge.muted { background: var(--nowos-bg-subtle); color: var(--nowos-text-secondary); } /* Lane badges (semantic, named after the eight lanes) */ .nowos-lane { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--nowos-radius-pill); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .nowos-lane .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .nowos-lane.rubric { background: var(--nowos-lane-rubric-soft); color: var(--nowos-lane-rubric); } .nowos-lane.dynamic { background: var(--nowos-lane-dynamic-soft); color: var(--nowos-lane-dynamic); } .nowos-lane.rubric-web { background: var(--nowos-lane-rubric-web-soft); color: var(--nowos-lane-rubric-web); } .nowos-lane.dynamic-web { background: var(--nowos-lane-dynamic-web-soft); color: var(--nowos-lane-dynamic-web); } .nowos-lane.web-only { background: var(--nowos-lane-web-only-soft); color: var(--nowos-lane-web-only); } .nowos-lane.research { background: var(--nowos-lane-research-soft); color: var(--nowos-lane-research); } .nowos-lane.system-qa { background: var(--nowos-lane-system-qa-soft); color: var(--nowos-lane-system-qa); } .nowos-lane.refusal { background: var(--nowos-lane-refusal-soft); color: var(--nowos-lane-refusal); } /* AAA tier badges */ .nowos-tier { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--nowos-radius-pill); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } .nowos-tier.automate { background: var(--nowos-success-soft); color: var(--nowos-success); } .nowos-tier.augment { background: var(--nowos-info-soft); color: var(--nowos-info); } .nowos-tier.assist { background: var(--nowos-warning-soft); color: var(--nowos-warning); } /* ────────────────────────────────────────────────────────────────────── Type utilities ──────────────────────────────────────────────────────────────────── */ .nowos-h1 { font-family: var(--nowos-font-display); font-size: clamp(40px, 5vw, 60px); font-weight: 800; line-height: 1.05; letter-spacing: -0.04em; margin: 0 0 16px; color: var(--nowos-text-primary); } .nowos-h2 { font-family: var(--nowos-font-display); font-size: clamp(28px, 3.5vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 12px; color: var(--nowos-text-primary); } .nowos-h3 { font-family: var(--nowos-font-display); font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--nowos-text-primary); } .nowos-h4 { font-family: var(--nowos-font-display); font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; margin: 0 0 6px; color: var(--nowos-text-primary); } .nowos-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nowos-text-tertiary); } .nowos-eyebrow.brand { color: var(--nowos-brand-red); } .nowos-italic-serif { font-family: var(--nowos-font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; color: var(--nowos-brand-silver-3); } .nowos-text-primary { color: var(--nowos-text-primary); } .nowos-text-secondary { color: var(--nowos-text-secondary); } .nowos-text-tertiary { color: var(--nowos-text-tertiary); } .nowos-text-brand { color: var(--nowos-brand-red); } .nowos-mono { font-family: var(--nowos-font-mono); font-size: 12px; } .nowos-gradient-text { background: linear-gradient(135deg, var(--nowos-brand-red) 0%, #FF6B7A 50%, var(--nowos-brand-red-3) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ────────────────────────────────────────────────────────────────────── Sidebar (left/right column patterns) ──────────────────────────────────────────────────────────────────── */ .nowos-sidebar { position: sticky; top: 90px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; } .nowos-sidebar-section { margin-bottom: 24px; } .nowos-sidebar-head { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nowos-text-tertiary); padding: 0 12px 8px; } .nowos-list-item { display: block; padding: 10px 12px; border-radius: var(--nowos-radius-md); text-decoration: none; color: var(--nowos-text-secondary); font-size: 14px; cursor: pointer; transition: all var(--nowos-duration-fast) var(--nowos-ease-out); margin-bottom: 2px; } .nowos-list-item:hover { background: rgba(20,24,31,0.04); color: var(--nowos-text-primary); } .nowos-list-item.active { background: var(--nowos-bg-surface); color: var(--nowos-text-primary); font-weight: 500; box-shadow: var(--nowos-shadow-xs), inset 0 0 0 1px var(--nowos-border-subtle); } .nowos-list-item .preview { font-size: 12px; color: var(--nowos-text-tertiary); margin-top: 2px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ────────────────────────────────────────────────────────────────────── Brand stripe — diagonal split, page footer accent ──────────────────────────────────────────────────────────────────── */ .nowos-brand-stripe { height: 4px; background: linear-gradient(90deg, var(--nowos-brand-red) 0%, var(--nowos-brand-red) 49.6%, rgba(255,255,255,0) 49.6%, rgba(255,255,255,0) 50.4%, var(--nowos-brand-silver) 50.4%, var(--nowos-brand-silver) 100%); } /* ────────────────────────────────────────────────────────────────────── Tagline (used on landing/hero only) ──────────────────────────────────────────────────────────────────── */ .nowos-tagline { font-family: var(--nowos-font-display); font-weight: 700; color: var(--nowos-brand-red); letter-spacing: -0.01em; } .nowos-tagline-serif { font-family: var(--nowos-font-serif); font-style: italic; font-weight: 400; color: var(--nowos-brand-red); letter-spacing: -0.02em; } /* ────────────────────────────────────────────────────────────────────── Tables ──────────────────────────────────────────────────────────────────── */ .nowos-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--nowos-bg-surface); border-radius: var(--nowos-radius-lg); overflow: hidden; } .nowos-table th { background: var(--nowos-bg-subtle); padding: 12px 16px; text-align: left; font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nowos-text-tertiary); border-bottom: 1px solid var(--nowos-border-subtle); } .nowos-table td { padding: 14px 16px; border-bottom: 1px solid var(--nowos-border-subtle); color: var(--nowos-text-primary); } .nowos-table tr:last-child td { border-bottom: none; } .nowos-table tr:hover td { background: var(--nowos-bg-subtle); } /* ────────────────────────────────────────────────────────────────────── Legacy compat — these classes existed in pre-redesign HTML pages. We map them onto the new tokens so the old markup keeps working while we migrate progressively. ──────────────────────────────────────────────────────────────────── */ .err { padding: 12px 16px; background: var(--nowos-danger-soft); border: 1px solid var(--nowos-danger); color: var(--nowos-danger); border-radius: var(--nowos-radius-md); font-size: 13px; } .empty { padding: 60px 30px; text-align: center; color: var(--nowos-text-tertiary); font-size: 16px; line-height: 1.6; } .loading { padding: 24px; text-align: center; color: var(--nowos-text-tertiary); font-style: italic; } /* ────────────────────────────────────────────────────────────────────── Scrollbar styling (subtle, Apple-like) ──────────────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(20,24,31,0.12); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(20,24,31,0.20); background-clip: content-box; border: 2px solid transparent; } /* ────────────────────────────────────────────────────────────────────── Utility spacing (tight 8pt grid) ──────────────────────────────────────────────────────────────────── */ .mt-0 { margin-top: 0; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; } .gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; } .flex { display: flex; } .flex-col { flex-direction: column; } .flex-1 { flex: 1; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .grid { display: grid; }