/* ============================================================ PREDICT-A-TRADE · UI THEME SYSTEM "Precise Insight. Smarter Trades." ------------------------------------------------------------ Single-file design system: tokens, layout, components. Dark is the default theme; light theme via [data-theme="light"]. Theme is applied to before first paint (see the inline script in each page's ). ============================================================ */ /* ---------- 1. DESIGN TOKENS -------------------------------- */ :root{ /* brand */ --accent: #f5b83d; --accent-strong: #ffc95c; --accent-soft: rgba(245,184,61,.14); --accent-text: #1c1305; --up: #2ebd85; --up-soft: rgba(46,189,133,.13); --down: #f6465d; --down-soft: rgba(246,70,93,.13); --info: #4d9fff; --info-soft: rgba(77,159,255,.13); --warn: #f5b83d; --warn-soft: rgba(245,184,61,.13); --violet: #a78bfa; /* dark surfaces (default) */ --bg: #06080c; --bg-grad-a: rgba(245,184,61,.055); --bg-grad-b: rgba(77,159,255,.05); --surface: #0d1218; --surface-2: #121923; --surface-3: #1a2230; --surface-glass: rgba(13,18,24,.78); --hover: rgba(255,255,255,.045); --active: rgba(255,255,255,.08); --border: rgba(255,255,255,.07); --border-strong: rgba(255,255,255,.13); --input-bg: #0a0f15; --text: #eef2f6; --text-2: #97a3b0; --text-3: #5d6b7a; --shadow-sm: 0 1px 2px rgba(0,0,0,.35); --shadow-md: 0 10px 28px -12px rgba(0,0,0,.55); --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.65); --ring: 0 0 0 3px rgba(245,184,61,.22); --sidebar-bg: #0a0e14; --chart-grid: rgba(255,255,255,.055); --chart-cross: rgba(255,255,255,.25); --chart-bg: #080d13; --chart-axis-text: #8f9baa; --chart-crosshair: rgba(220,228,238,.45); --chart-candle-up: #2ebd85; --chart-candle-down: #f6465d; --chart-volume-up: rgba(46,189,133,.32); --chart-volume-down: rgba(246,70,93,.32); --chart-accent: #f5b83d; --chart-panel-bg: #0d1218; --chart-toolbar-bg: #101720; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas, Menlo, monospace; --sidebar-w: 256px; --topbar-h: 64px; --gutter: 22px; color-scheme: dark; } [data-theme="light"]{ --accent: #d99a17; --accent-strong: #c68b0c; --accent-soft: rgba(217,154,23,.14); --accent-text: #ffffff; --up: #0e9f6e; --up-soft: rgba(14,159,110,.12); --down: #e02424; --down-soft: rgba(224,36,36,.10); --info: #1a73e8; --info-soft: rgba(26,115,232,.10); --warn: #c27803; --warn-soft: rgba(194,120,3,.12); --bg: #eef1f5; --bg-grad-a: rgba(217,154,23,.08); --bg-grad-b: rgba(26,115,232,.06); --surface: #ffffff; --surface-2: #f7f9fc; --surface-3: #eef2f7; --surface-glass: rgba(255,255,255,.82); --hover: rgba(15,23,42,.045); --active: rgba(15,23,42,.08); --border: rgba(15,23,42,.09); --border-strong: rgba(15,23,42,.16); --input-bg: #ffffff; --text: #141c28; --text-2: #55647a; --text-3: #8b98ab; --shadow-sm: 0 1px 2px rgba(15,23,42,.06); --shadow-md: 0 12px 30px -14px rgba(15,23,42,.18); --shadow-lg: 0 24px 60px -22px rgba(15,23,42,.25); --ring: 0 0 0 3px rgba(217,154,23,.25); --sidebar-bg: #ffffff; --chart-grid: rgba(15,23,42,.07); --chart-cross: rgba(15,23,42,.35); --chart-bg: #ffffff; --chart-axis-text: #55647a; --chart-crosshair: rgba(15,23,42,.42); --chart-candle-up: #0e9f6e; --chart-candle-down: #e02424; --chart-volume-up: rgba(14,159,110,.25); --chart-volume-down: rgba(224,36,36,.2); --chart-accent: #c68b0c; --chart-panel-bg: #f7f9fc; --chart-toolbar-bg: #ffffff; color-scheme: light; } /* ---------- 2. RESET / BASE --------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; font-family:var(--font-sans); font-size:14px; line-height:1.5; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* ambient glow backdrop */ body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(900px 480px at 85% -10%, var(--bg-grad-a), transparent 60%), radial-gradient(800px 520px at -10% 30%, var(--bg-grad-b), transparent 55%); } h1,h2,h3,h4,h5,p{ margin:0; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } input,select,textarea{ font:inherit; color:inherit; } ::selection{ background:var(--accent); color:var(--accent-text); } /* scrollbars */ ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background:transparent; } ::-webkit-scrollbar-thumb{ background:var(--surface-3); border-radius:99px; border:2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover{ background:var(--text-3); } /* number styling helpers */ .num, .mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em; } .up{ color:var(--up)!important; } .down{ color:var(--down)!important; } .muted{ color:var(--text-2)!important; } .dim{ color:var(--text-3)!important; } .label{ font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); } .hide{ display:none!important; } /* ---------- 3. APP SHELL ------------------------------------ */ .app{ display:flex; min-height:100vh; } /* --- sidebar --- */ .sidebar{ position:fixed; inset:0 auto 0 0; z-index:60; width:var(--sidebar-w); display:flex; flex-direction:column; overflow:hidden; background:var(--sidebar-bg); border-right:1px solid var(--border); transition:transform .28s cubic-bezier(.4,0,.2,1); } .sidebar__brand{ display:flex; align-items:center; gap:12px; min-height:82px; padding:16px 18px 12px; } .sidebar__brand img{ width:100%; height:auto; max-height:54px; object-fit:contain; object-position:left center; } .sidebar__meta{ margin:0 20px 14px; padding:9px 12px; display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-2); } .sidebar__mode-label{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); } .sidebar__mode{ margin-left:auto; flex:none; } .sidebar__meta .sym{ font-weight:700; font-size:13px; letter-spacing:.04em; } .sidebar__meta .ver{ margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--text-3); } .nav{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:6px 12px; display:flex; flex-direction:column; gap:2px; scrollbar-width:none; -ms-overflow-style:none; } .nav::-webkit-scrollbar{ display:none; width:0; height:0; } .nav__section{ margin:14px 10px 6px; font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); } .nav__link{ position:relative; display:flex; align-items:center; gap:11px; padding:9.5px 12px; border-radius:var(--r-md); color:var(--text-2); font-weight:550; font-size:13.5px; transition:background .15s, color .15s; } .nav__link svg{ width:17px; height:17px; flex:none; opacity:.85; } .nav__link:hover{ background:var(--hover); color:var(--text); } .nav__link.active{ background:var(--accent-soft); color:var(--accent); } [data-theme="light"] .nav__link.active{ color:var(--accent-strong); } .nav__link.active::before{ content:""; position:absolute; left:-12px; top:20%; bottom:20%; width:3px; border-radius:0 3px 3px 0; background:var(--accent); } .nav__link .tag{ margin-left:auto; } .sidebar__foot{ flex:0 0 auto; position:relative; z-index:1; padding:14px 16px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:10px; background:var(--sidebar-bg); } .modechip{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:5px 11px; border-radius:99px; font-size:11px; font-weight:700; letter-spacing:.08em; background:var(--up-soft); color:var(--up); border:1px solid color-mix(in srgb, var(--up) 35%, transparent); } .modechip--warn{ background:var(--warn-soft); color:var(--warn); border-color:color-mix(in srgb, var(--warn) 35%, transparent); } .modechip--danger{ background:var(--down-soft); color:var(--down); border-color:color-mix(in srgb, var(--down) 35%, transparent); } .usercard{ display:flex; align-items:center; gap:10px; } .usercard .avatar{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; font-size:12px; font-weight:700; background:var(--accent-soft); color:var(--accent); border:1px solid var(--border-strong); } .usercard .who{ font-size:13px; font-weight:600; line-height:1.2; } .usercard .role{ font-size:11px; color:var(--text-3); } .usercard > .pat-btn{ margin-left:auto; } .sidebar__foot .usercard{ width:100%; padding:0; min-height:38px; } /* --- main column --- */ .main{ flex:1; min-width:0; margin-left:var(--sidebar-w); display:flex; flex-direction:column; } .topbar{ position:sticky; top:0; z-index:50; height:var(--topbar-h); display:flex; align-items:center; gap:16px; padding:0 var(--gutter); background:var(--surface-glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--border); } .topbar__title{ font-size:17px; font-weight:700; letter-spacing:-.01em; display:flex; align-items:center; gap:10px; } .topbar__crumb{ font-size:12px; color:var(--text-3); font-weight:500; } .topbar__spacer{ flex:1; } .topbar__clock{ text-align:right; line-height:1.25; display:none; } .topbar__clock .t{ font-family:var(--font-mono); font-size:13px; font-weight:600; } .topbar__clock .z{ font-size:10.5px; color:var(--text-3); letter-spacing:.06em; text-transform:uppercase; } @media (min-width:900px){ .topbar__clock{ display:block; } } .topbar .burger{ display:none; } .topbar__controls{ display:flex; align-items:center; gap:10px; min-height:38px; } .topbar__live{ display:inline-flex; align-items:center; justify-content:center; height:34px; padding:0 10px; } .topbar__mode-control{ height:38px; display:grid; grid-template-columns:auto 7px minmax(124px,auto); align-items:center; gap:7px; padding-left:10px; border:1px solid var(--border); border-radius:9px; background:var(--surface-2); white-space:nowrap; } .topbar__mode-control>span:first-child{ color:var(--text-3); font-size:9px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; } .topbar__mode-control>.dot{ width:7px; height:7px; } .topbar__mode{ height:36px; min-width:124px; padding:0 28px 0 2px; border:0; border-radius:0 8px 8px 0; background-color:transparent; color:var(--text); font-size:11px; font-weight:700; cursor:pointer; } .topbar__mode option{ background:#fff; color:#111827; font-weight:600; } .topbar__mode option:checked{ background:#d9dee7; color:#111827; } .topbar__mode option:disabled{ background:#f3f4f6; color:#6b7280; } .topbar__mode:focus{ outline:2px solid var(--accent); outline-offset:-2px; } .topbar__theme{ width:34px; height:34px; padding:8px; flex:none; } @media(max-width:1180px){ .topbar__mode-control>span:first-child{ display:none; }.topbar__mode-control{ grid-template-columns:7px minmax(124px,auto); padding-left:9px; } } @media(max-width:720px){ .topbar__crumb,.topbar__live{ display:none; }.topbar{ gap:8px; }.topbar__controls{ gap:6px; }.topbar__mode-control{ grid-template-columns:7px minmax(112px,auto); }.topbar__mode{ min-width:112px; } } .content{ padding:var(--gutter); max-width:1560px; width:100%; margin:0 auto; display:flex; flex-direction:column; gap:var(--gutter); } /* mobile: off-canvas sidebar */ .scrim{ position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .25s; } @media (max-width:1080px){ .sidebar{ transform:translateX(-102%); box-shadow:var(--shadow-lg); } body.sidebar-open .sidebar,.app.sidebar-open .sidebar{ transform:none; } body.sidebar-open .scrim,.app.sidebar-open .scrim{ opacity:1; pointer-events:auto; } .main{ margin-left:0; } .topbar .burger{ display:inline-flex; } } /* ---------- 4. GRID HELPERS --------------------------------- */ .grid{ display:grid; gap:var(--gutter); } .g-2{ grid-template-columns:repeat(2,1fr); } .g-3{ grid-template-columns:repeat(3,1fr); } .g-4{ grid-template-columns:repeat(4,1fr); } .g-5{ grid-template-columns:repeat(5,1fr); } .g-6{ grid-template-columns:repeat(6,1fr); } .g-12{ grid-template-columns:repeat(12,1fr); } .sp-2{ grid-column:span 2; } .sp-3{ grid-column:span 3; } .sp-4{ grid-column:span 4; } .sp-5{ grid-column:span 5; } .sp-6{ grid-column:span 6; } .sp-7{ grid-column:span 7; } .sp-8{ grid-column:span 8; } .sp-9{ grid-column:span 9; } .sp-12{ grid-column:span 12; } @media (max-width:1280px){ .g-5,.g-6{ grid-template-columns:repeat(3,1fr); } .g-4{ grid-template-columns:repeat(2,1fr); } .sp-5,.sp-6,.sp-7,.sp-8,.sp-9{ grid-column:span 12; } .sp-3,.sp-4{ grid-column:span 6; } } @media (max-width:820px){ .g-2,.g-3,.g-4,.g-5,.g-6{ grid-template-columns:1fr; } .sp-2,.sp-3,.sp-4{ grid-column:span 12; } } .row{ display:flex; align-items:center; gap:10px; } .row--wrap{ flex-wrap:wrap; } .row--between{ justify-content:space-between; } .grow{ flex:1; min-width:0; } /* ---------- INSTITUTIONAL CHART WORKSPACE ------------------ */ .chart-workspace{ position:relative; height:calc(100vh - var(--topbar-h) - 44px); min-height:620px; display:flex; flex-direction:column; overflow:hidden; background:var(--chart-bg); border:1px solid var(--border); border-radius:var(--r-md); } .chart-toolbar{ min-height:48px; display:flex; align-items:center; gap:8px; padding:6px 10px; background:var(--chart-toolbar-bg); border-bottom:1px solid var(--border); } .chart-toolbar button,.chart-toolbar select{ height:34px; padding:0 11px; border:1px solid var(--border); border-radius:7px; background:var(--surface-2); color:var(--text); font-size:12px; } .chart-toolbar button:hover,.chart-toolbar select:hover{ border-color:var(--border-strong); background:var(--hover); } .chart-symbol{ display:flex; flex-direction:column; min-width:150px; line-height:1.2; } .chart-symbol strong{ font-family:var(--font-mono); font-size:14px; }.chart-symbol span{ color:var(--text-3); font-size:10px; } .chart-toolbar__spacer{ flex:1; }.chart-source{ color:var(--text-3); font-size:11px; } .chart-status{ display:inline-flex; gap:7px; align-items:center; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; } .chart-status .dot{ width:7px; height:7px; border-radius:50%; background:var(--text-3); } .chart-status--live{ color:var(--up); }.chart-status--live .dot{ background:var(--up); box-shadow:0 0 0 4px var(--up-soft); } .chart-status--delayed,.chart-status--reconnecting{ color:var(--warn); }.chart-status--delayed .dot{ background:var(--warn); } .chart-status--stale,.chart-status--disconnected{ color:var(--down); }.chart-status--stale .dot,.chart-status--disconnected .dot{ background:var(--down); } .chart-terminal{ flex:1; min-height:0; display:grid; grid-template-columns:42px minmax(0,1fr) 260px; } .chart-tools{ background:var(--chart-toolbar-bg); border-right:1px solid var(--border); padding:6px 4px; display:flex; flex-direction:column; gap:4px; } .chart-tools button{ width:32px; height:32px; border-radius:6px; color:var(--text-2); font-size:17px; }.chart-tools button:first-child{ background:var(--accent-soft); color:var(--accent); }.chart-tools button:disabled{ opacity:.58; cursor:not-allowed; } .chart-stage{ min-width:0; min-height:0; position:relative; display:flex; flex-direction:column; } .chart-quote-strip{ height:34px; display:flex; align-items:center; gap:14px; padding:0 12px; font-size:11px; border-bottom:1px solid var(--border); background:var(--chart-bg); } .financial-chart{ flex:1; min-height:320px; position:relative; overflow:hidden; touch-action:none; }.financial-chart canvas{ width:100%; height:100%; display:block; outline:none; }.financial-chart canvas:focus-visible{ box-shadow:inset 0 0 0 2px var(--accent); } .financial-chart__empty,.chart-state{ position:absolute; inset:34px 0 0; display:grid; place-content:center; color:var(--text-2); text-align:center; gap:8px; }.chart-state--error strong{ color:var(--down); } .chart-feed-warning{ position:absolute; left:12px; bottom:32px; max-width:min(680px,calc(100% - 24px)); padding:7px 10px; background:color-mix(in srgb,var(--warn) 12%,var(--chart-bg)); border:1px solid color-mix(in srgb,var(--warn) 35%,transparent); color:var(--warn); border-radius:6px; font-size:11px; pointer-events:none; } .chart-inspector{ overflow:auto; border-left:1px solid var(--border); background:var(--chart-panel-bg); padding:0 12px 14px; }.chart-panel__head{ margin:0 -12px 10px; padding:10px 12px; border-bottom:1px solid var(--border); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }.chart-inspector dl{ margin:0 0 14px; display:grid; gap:8px; }.chart-inspector dl div{ display:flex; justify-content:space-between; gap:12px; font-size:11px; }.chart-inspector dt{ color:var(--text-3); }.chart-inspector dd{ margin:0; text-align:right; font-family:var(--font-mono); }.chart-blocked{ padding:9px; margin-bottom:12px; color:var(--down); background:var(--down-soft); border:1px solid color-mix(in srgb,var(--down) 30%,transparent); border-radius:7px; font-size:11px; } .chart-bottom{ min-height:42px; display:flex; align-items:center; gap:16px; padding:7px 12px; border-top:1px solid var(--border); background:var(--chart-toolbar-bg); font-size:11px; }.chart-bottom span{ color:var(--text-2); } .chart-action-message{ position:absolute; right:18px; bottom:56px; z-index:8; display:flex; align-items:center; gap:12px; max-width:420px; padding:9px 12px; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface); box-shadow:var(--shadow-md); color:var(--text-2); font-size:11px; }.chart-action-message button{ color:var(--text); font-size:18px; line-height:1; } @media(max-width:900px){ .chart-workspace{ height:calc(100vh - var(--topbar-h) - 24px); min-height:540px; }.chart-terminal{ grid-template-columns:36px minmax(0,1fr); }.chart-inspector{ display:none; }.chart-source,.chart-symbol span{ display:none; }.chart-symbol{ min-width:auto; }.chart-quote-strip{ overflow-x:auto; }.chart-toolbar{ overflow-x:auto; }.chart-feed-warning{ bottom:8px; } } @media(prefers-reduced-motion:reduce){ .chart-workspace *{ scroll-behavior:auto!important; transition:none!important; } } /* ---------- 5. CARDS / KPIs --------------------------------- */ .pat-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); min-width:0; position:relative; } .pat-card--pad{ padding:18px 20px; } .pat-card__head{ display:flex; align-items:center; gap:12px; padding:15px 20px; border-bottom:1px solid var(--border); } .pat-card__title{ font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-2); } .pat-card__title .len{ color:var(--text-3); font-family:var(--font-mono); letter-spacing:0; } .pat-card__actions{ margin-left:auto; display:flex; align-items:center; gap:8px; } .cosmic-card-head{ align-items:flex-start; } .cosmic-card-head .pat-card__actions{ flex:0 0 auto; align-self:flex-start; justify-content:flex-end; } @media(max-width:640px){ .cosmic-card-head{ flex-wrap:wrap; } .cosmic-card-head .pat-card__actions{ width:100%; margin-left:0; justify-content:flex-start; } } .pat-card__body{ padding:16px 20px; } .pat-card__foot{ padding:12px 20px; border-top:1px solid var(--border); } .pat-card--glow{ overflow:hidden; } .pat-card--glow::after{ content:""; position:absolute; inset:-40% auto auto -10%; width:60%; aspect-ratio:1; background:radial-gradient(closest-side, var(--accent-soft), transparent); pointer-events:none; } /* KPI stat */ .kpi{ padding:15px 18px; display:flex; flex-direction:column; gap:6px; } .kpi__label{ font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--text-3); display:flex; align-items:center; gap:7px;} .kpi__value{ display:block; min-width:0; max-width:100%; font-family:var(--font-mono); font-size:clamp(16px,1.4vw,23px); font-weight:700; letter-spacing:-.02em; line-height:1.18; white-space:normal; overflow-wrap:anywhere; word-break:normal; } .kpi__value--compact{ font-size:clamp(14px,1.15vw,18px); } .kpi__value .u{ font-size:12px; color:var(--text-3); font-weight:600; margin-left:4px; } .kpi__delta{ font-family:var(--font-mono); font-size:11.5px; font-weight:600; display:inline-flex; align-items:center; gap:5px; } .kpi__sub{ font-size:11.5px; color:var(--text-3); } /* status tile (overview top row) */ .tile{ padding:15px 18px; display:flex; flex-direction:column; gap:9px; } .tile__head{ display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--text-2); } .tile__head .dot{ margin-left:auto; } .kv{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:12.5px; } .kv dt{ color:var(--text-3); font-weight:500; } .kv dd{ margin:0; font-family:var(--font-mono); font-weight:600; font-size:12.5px; text-align:right; } /* ---------- 6. BADGES / CHIPS / DOTS ------------------------ */ .pat-badge{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; padding:3.5px 9px; border-radius:7px; font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:var(--surface-3); color:var(--text-2); border:1px solid var(--border); } .pat-badge--green { background:var(--up-soft); color:var(--up); border-color:color-mix(in srgb, var(--up) 30%, transparent); } .pat-badge--red { background:var(--down-soft); color:var(--down); border-color:color-mix(in srgb, var(--down) 30%, transparent); } .pat-badge--amber { background:var(--warn-soft); color:var(--warn); border-color:color-mix(in srgb, var(--warn) 32%, transparent); } .pat-badge--blue { background:var(--info-soft); color:var(--info); border-color:color-mix(in srgb, var(--info) 30%, transparent); } .pat-badge--gold { background:var(--accent-soft);color:var(--accent-strong); border-color:color-mix(in srgb, var(--accent) 35%, transparent); } .pat-badge--outline{ background:transparent; } .dot{ width:8px; height:8px; border-radius:50%; background:var(--text-3); flex:none; display:inline-block; } .dot--green{ background:var(--up); } .dot--red{ background:var(--down); } .dot--amber{ background:var(--warn); } .dot--blue{ background:var(--info); } .dot--live{ background:var(--up); position:relative; } .dot--live::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--up); animation:pulse 1.8s ease-out infinite; } @keyframes pulse{ 0%{ transform:scale(.5); opacity:.9;} 80%,100%{ transform:scale(1.25); opacity:0;} } /* ---------- 7. BUTTONS -------------------------------------- */ .pat-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 16px; border-radius:var(--r-md); font-size:13px; font-weight:650; letter-spacing:.01em; white-space:nowrap; border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text); transition:transform .08s, background .15s, border-color .15s, box-shadow .15s, filter .15s; user-select:none; } .pat-btn:hover{ background:var(--hover); border-color:var(--text-3); } .pat-btn:active{ transform:translateY(1px) scale(.99); } .pat-btn:focus-visible{ outline:none; box-shadow:var(--ring); } .pat-btn svg{ width:15px; height:15px; } .pat-btn--sm{ padding:6px 11px; font-size:12px; border-radius:9px; } .pat-btn--lg{ padding:12px 22px; font-size:14px; } .pat-btn--block{ width:100%; } .pat-btn--primary{ background:var(--accent); border-color:transparent; color:var(--accent-text); } .pat-btn--primary:hover{ background:var(--accent-strong); border-color:transparent; filter:brightness(1.02); } .pat-btn--danger{ background:var(--down); border-color:transparent; color:#fff; } .pat-btn--danger:hover{ background:color-mix(in srgb, var(--down) 88%, #fff); border-color:transparent; } .pat-btn--danger-soft{ background:var(--down-soft); border-color:color-mix(in srgb, var(--down) 35%, transparent); color:var(--down); } .pat-btn--green{ background:var(--up); border-color:transparent; color:#fff; } .pat-btn--ghost{ background:transparent; border-color:transparent; color:var(--text-2); } .pat-btn--ghost:hover{ background:var(--hover); color:var(--text); } .pat-btn--icon{ padding:9px; } .pat-btn[disabled]{ opacity:.5; pointer-events:none; } /* ---------- 8. TABS / SEGMENTS ------------------------------ */ .pat-tabs{ display:inline-flex; gap:4px; padding:4px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; } .pat-tabs__btn{ padding:7px 16px; border-radius:9px; font-size:12.5px; font-weight:650; color:var(--text-2); transition:.15s; } .pat-tabs__btn:hover{ color:var(--text); } .pat-tabs__btn.active{ background:var(--accent); color:var(--accent-text); box-shadow:var(--shadow-sm); } .pat-tabs__btn .cnt{ opacity:.7; font-family:var(--font-mono); font-size:11px; margin-left:5px; } .pat-seg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:3px; gap:2px; } .pat-seg__btn{ padding:5px 12px; border-radius:8px; font-family:var(--font-mono); font-size:11.5px; font-weight:600; color:var(--text-3); transition:.15s; } .pat-seg__btn:hover{ color:var(--text); } .pat-seg__btn.active{ background:var(--info-soft); color:var(--info); } /* ---------- 9. TABLES --------------------------------------- */ .table-wrap{ overflow-x:auto; border-radius:0 0 var(--r-lg) var(--r-lg); } .pat-table{ width:100%; border-collapse:collapse; font-size:12.8px; min-width:640px; } .pat-table-wrap{ overflow-x:auto; width:100%; border:1px solid var(--border); border-radius:8px; } .pat-table th{ text-align:left; padding:11px 16px; position:sticky; top:0; z-index:1; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); background:var(--surface); border-bottom:1px solid var(--border); white-space:nowrap; } .pat-table td{ padding:12px 16px; border-bottom:1px solid var(--border); vertical-align:middle; white-space:nowrap; } .pat-table tbody tr{ transition:background .12s; } .pat-table tbody tr:hover{ background:var(--hover); } .pat-table tbody tr:last-child td{ border-bottom:0; } .pat-table .num{ text-align:right; } .pat-table th.num{ text-align:right; } .pat-table .stack-2{ display:flex; flex-direction:column; gap:1px; line-height:1.35; } .pat-table .sub{ font-size:11px; color:var(--text-3); } .t-empty{ padding:44px 20px; text-align:center; color:var(--text-3); } /* ---------- 10. FORMS --------------------------------------- */ .pat-field{ display:flex; flex-direction:column; gap:7px; min-width:0; } .pat-label{ font-size:11.5px; font-weight:600; color:var(--text-2); letter-spacing:.02em; } .pat-label .req{ color:var(--down); margin-left:2px; } .pat-hint{ font-size:11px; color:var(--text-3); } .pat-input, .pat-select, .pat-textarea{ width:100%; padding:9.5px 13px; border-radius:var(--r-md); background:var(--input-bg); border:1px solid var(--border); color:var(--text); font-size:13.5px; font-family:var(--font-mono); transition:border-color .15s, box-shadow .15s; } .pat-input::placeholder{ color:var(--text-3); font-family:var(--font-sans); } .pat-input:hover, .pat-select:hover{ border-color:var(--border-strong); } .pat-input:focus, .pat-select:focus, .pat-textarea:focus{ outline:none; border-color:var(--accent); box-shadow:var(--ring); } .pat-select{ appearance:none; -webkit-appearance:none; padding-right:36px; cursor:pointer; background-image:linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position:calc(100% - 19px) 55%, calc(100% - 14px) 55%; background-size:5px 5px; background-repeat:no-repeat; } .input-affix{ position:relative; display:flex; align-items:center; } .input-affix .pat-input{ padding-left:36px; } .input-affix > svg{ position:absolute; left:12px; width:15px; height:15px; color:var(--text-3); pointer-events:none; } /* toggle switch */ .pat-switch{ position:relative; display:inline-flex; align-items:center; flex:none; width:42px; height:24px; cursor:pointer; } .pat-switch input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; } .pat-switch .track{ position:absolute; inset:0; border-radius:99px; background:var(--surface-3); border:1px solid var(--border-strong); transition:.2s; } .pat-switch .thumb{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--text-2); transition:.2s cubic-bezier(.4,0,.2,1); } .pat-switch input:checked ~ .track{ background:var(--up-soft); border-color:color-mix(in srgb, var(--up) 45%, transparent); } .pat-switch input:checked ~ .thumb{ left:21px; background:var(--up); } .pat-switch input:focus-visible ~ .track{ box-shadow:var(--ring); } .switch-row{ display:flex; align-items:center; gap:12px; } .switch-row .txt{ font-size:13px; font-weight:600; } .switch-row .txt small{ display:block; font-weight:400; color:var(--text-3); font-size:11.5px; } /* segmented ON/OFF select look (like legacy UI) */ .onoff{ display:inline-flex; min-width:78px; justify-content:space-between; align-items:center; padding:8px 12px; border-radius:var(--r-md); border:1px solid var(--border); background:var(--input-bg); font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--text-2); } /* radio cards */ .radio-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .radio-card{ position:relative; } .radio-card input{ position:absolute; opacity:0; } .radio-card label{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 10px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--input-bg); cursor:pointer; font-size:12.5px; font-weight:650; color:var(--text-2); transition:.15s; text-align:center; } .radio-card label svg{ width:18px; height:18px; } .radio-card input:checked + label{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); box-shadow:var(--ring); } /* ---------- 11. METERS / BIAS BARS -------------------------- */ .meter{ display:inline-flex; align-items:center; gap:6px; } .meter__track{ position:relative; width:58px; height:5px; border-radius:99px; background:var(--surface-3); overflow:hidden; } .meter__fill{ position:absolute; top:0; bottom:0; left:50%; width:50%; transform-origin:left center; border-radius:99px; background:var(--text-3); transform:scaleX(var(--v,0)); } .meter__fill.neg{ left:auto; right:50%; transform-origin:right center; } .meter__fill.pos{ background:linear-gradient(90deg, var(--up), color-mix(in srgb, var(--up) 55%, transparent)); } .meter__fill.neg{ background:linear-gradient(270deg, var(--down), color-mix(in srgb, var(--down) 55%, transparent)); } .meter__fill.mid{ background:linear-gradient(90deg, var(--warn), color-mix(in srgb, var(--warn) 55%, transparent)); } /* mini spark stat bar (signals score) */ .scorebar{ display:inline-flex; align-items:center; gap:8px; } .scorebar .meter__track{ width:44px; height:4px; } /* ---------- 12. CHARTS -------------------------------------- */ .chart-box{ position:relative; width:100%; } .chart-box canvas{ display:block; width:100%; } .indicator-toolbar{ margin-bottom:18px; } .indicator-toolbar__row{ display:flex; align-items:center; justify-content:space-between; gap:14px; min-width:0; } .indicator-toolbar__actions{ display:flex; align-items:center; gap:10px; flex:none; } .indicator-timeframes{ max-width:100%; overflow-x:auto; scrollbar-width:thin; white-space:nowrap; } .indicator-timeframes .pat-seg{ display:inline-flex; flex-wrap:nowrap; gap:1px; padding:2px; } .indicator-timeframes .pat-seg__btn{ flex:0 0 auto; min-width:32px; padding:4px 8px; font-size:11px; } .tf-list{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; } .indicator-search .pat-input{ width:220px; font-family:var(--font-sans); } .indicator-market-panel{ margin-bottom:24px; overflow:hidden; } .indicator-chart-body{ padding:12px; } .indicator-chart-frame{ height:clamp(390px,52vh,620px); min-height:390px; color:var(--text-2); background:var(--chart-bg); border:1px solid var(--border); border-radius:10px; overflow:auto; } .indicator-candle-chart{ display:block; width:100%; height:100%; min-width:720px; } .indicator-chart-frame .table-wrap{ height:100%; overflow:auto; border-radius:0; } @media(max-width:900px){ .indicator-toolbar__row{ align-items:stretch; flex-direction:column; }.indicator-toolbar__actions{ justify-content:space-between; }.indicator-search{ flex:1; }.indicator-search .pat-input{ width:100%; }.indicator-chart-frame{ height:440px; }.indicator-chart-body{ padding:8px; } } @media(max-width:560px){ .indicator-toolbar__actions{ align-items:stretch; flex-direction:column; }.indicator-chart-frame{ height:400px; min-height:400px; }.indicator-market-panel .pat-card__head{ align-items:flex-start; gap:8px; }.indicator-market-panel .pat-card__actions{ flex-wrap:wrap; } } .chart-legend{ display:flex; flex-wrap:wrap; gap:14px; font-size:11.5px; color:var(--text-2); font-weight:600; } .chart-legend .sw{ display:inline-flex; width:9px; height:9px; border-radius:3px; margin-right:6px; align-self:center; } .chart-tip{ position:absolute; pointer-events:none; z-index:5; min-width:130px; background:var(--surface-glass); backdrop-filter:blur(8px); border:1px solid var(--border-strong); border-radius:10px; padding:9px 12px; font-family:var(--font-mono); font-size:11.5px; line-height:1.6; box-shadow:var(--shadow-md); opacity:0; transition:opacity .12s; transform:translate(-50%,-8px); } .chart-tip b{ color:var(--accent); } .gauge-wrap{ display:flex; align-items:center; gap:18px; } .gauge-wrap canvas{ flex:none; } /* ---------- 13. TOASTS / MODAL ------------------------------ */ .toasts{ position:fixed; right:18px; bottom:18px; z-index:100; display:flex; flex-direction:column; gap:10px; max-width:min(92vw,380px); } .toast{ display:flex; align-items:flex-start; gap:11px; padding:13px 16px; background:var(--surface-glass); backdrop-filter:blur(12px); border:1px solid var(--border-strong); border-radius:14px; box-shadow:var(--shadow-lg); animation:toast-in .3s cubic-bezier(.2,.9,.3,1.2); } .toast.out{ animation:toast-out .25s forwards; } @keyframes toast-in{ from{ transform:translateX(30px); opacity:0; } } @keyframes toast-out{ to{ transform:translateX(30px); opacity:0; } } .toast .ic{ width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center; } .toast .ic svg{ width:15px; height:15px; } .toast--ok .ic{ background:var(--up-soft); color:var(--up); } .toast--err .ic{ background:var(--down-soft); color:var(--down); } .toast--info .ic{ background:var(--info-soft); color:var(--info); } .toast__t{ font-size:13px; font-weight:700; } .toast__m{ font-size:12px; color:var(--text-2); margin-top:1px; } .modal-scrim{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:20px; background:rgba(3,5,8,.6); backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .2s; } .modal-scrim.open{ opacity:1; pointer-events:auto; } .modal{ width:min(440px,100%); background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:22px; transform:translateY(10px) scale(.98); transition:transform .2s; } .modal-scrim.open .modal{ transform:none; } .modal h3{ font-size:15.5px; font-weight:700; display:flex; align-items:center; gap:10px; } .modal p{ margin-top:8px; font-size:13px; color:var(--text-2); } .modal .acts{ margin-top:20px; display:flex; justify-content:flex-end; gap:10px; } /* ---------- 14. MISC ---------------------------------------- */ .lic-key{ font-family:var(--font-mono); font-size:12.5px; font-weight:600; letter-spacing:.02em; display:inline-flex; align-items:center; gap:8px; } .copy-btn{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:7px; color:var(--text-3); transition:.15s; } .copy-btn:hover{ background:var(--hover); color:var(--text); } .copy-btn svg{ width:13px; height:13px; } .divider{ height:1px; background:var(--border); border:0; margin:0; } .spin{ animation:spin 1s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg);} } /* big trade direction glyphs */ .dir{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-weight:700; font-size:12px; letter-spacing:.05em; } .dir svg{ width:12px; height:12px; } .dir--buy{ color:var(--up); } .dir--sell{ color:var(--down); } /* page section headers inside content */ .page-note{ font-size:12.5px; color:var(--text-3); line-height:1.6; } .page-note code{ font-family:var(--font-mono); font-size:11px; background:var(--surface-3); padding:2px 6px; border-radius:6px; color:var(--text-2); } /* footer strip */ .app-footer{ padding:16px var(--gutter) 26px; color:var(--text-3); font-size:11.5px; display:flex; gap:8px; align-items:center; justify-content:space-between; flex-wrap:wrap; } .app-footer .mono{ font-size:11px; } /* focus outline for keyboard users */ a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; } /* theme transition (added briefly by JS when toggling) */ .theme-x, .theme-x *{ transition:background-color .25s ease, border-color .25s ease, color .25s ease, fill .25s ease, stroke .25s ease !important; } /* ---------- 15. AUTH (login / register) --------------------- */ .auth-wrap{ min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(430px,0.9fr); } .auth-side{ position:relative; overflow:hidden; padding:48px 54px; display:flex; flex-direction:column; gap:26px; background:#05070c; color:#eef2f6; border-right:1px solid var(--border); } .auth-side::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(760px 440px at 90% -10%, rgba(245,184,61,.14), transparent 60%), radial-gradient(620px 480px at -10% 85%, rgba(77,159,255,.10), transparent 58%); } .auth-side::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image:linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(75% 70% at 50% 40%, #000 30%, transparent 75%); mask-image:radial-gradient(75% 70% at 50% 40%, #000 30%, transparent 75%); } .auth-side > *{ position:relative; z-index:1; } .auth-logo{ height:clamp(60px,5vw,72px); width:auto; max-width:100%; align-self:flex-start; object-fit:contain; } .auth-hl{ font-size:clamp(30px,3.6vw,46px); font-weight:800; letter-spacing:-.03em; line-height:1.1; } .auth-hl em{ font-style:normal; color:#ffc95c; } .auth-lead{ color:#9aa7b4; font-size:14.5px; max-width:52ch; line-height:1.65; } .auth-feats{ display:flex; flex-direction:column; gap:15px; margin-top:6px; } .feat{ display:flex; gap:13px; align-items:flex-start; } .feat .ic{ width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center; background:rgba(245,184,61,.12); color:#ffc95c; border:1px solid rgba(245,184,61,.25); } .feat .ic svg{ width:16px; height:16px; } .feat b{ font-size:13.5px; display:block; } .feat span{ font-size:12.5px; color:#8b98ab; } .auth-access{ margin-top:auto; display:flex; align-items:center; gap:16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:14px 18px; backdrop-filter:blur(6px); } .auth-access__icon{ width:38px; height:38px; flex:none; display:grid; place-items:center; color:#ffc95c; background:rgba(245,184,61,.12); border:1px solid rgba(245,184,61,.25); border-radius:11px; } .auth-access__icon svg{ width:19px; height:19px; } .auth-access__content{ display:flex; flex-direction:column; gap:3px; min-width:0; } .auth-access__content b{ color:#eef2f6; font-size:13.5px; } .auth-access__content span{ color:#9aa7b4; font-size:11.5px; line-height:1.45; } .auth-access__content small{ color:#758397; font-size:10.5px; margin-top:2px; } .auth-copy{ font-size:11.5px; color:#718096; line-height:1.5; } .auth-mobile-meta{ display:none; } .auth-main{ position:relative; display:grid; place-items:center; padding:34px 22px; } .auth-cardwrap{ width:min(432px,100%); } .auth-cardlogo{ height:clamp(40px,4vw,52px); width:auto; max-width:82%; margin:0 auto 24px; display:block; object-fit:contain; } .auth-h{ font-size:21px; font-weight:800; letter-spacing:-.02em; text-align:center; } .auth-sub{ text-align:center; color:var(--text-2); font-size:13px; margin:6px 0 20px; } .auth-theme{ position:absolute; top:16px; right:18px; } .auth-divider{ display:flex; align-items:center; gap:12px; margin:18px 0 14px; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); } .auth-divider::before,.auth-divider::after{ content:""; flex:1; height:1px; background:var(--border); } .checkrow{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--text-2); cursor:pointer; } .checkrow input[type="checkbox"]{ width:15px; height:15px; accent-color:var(--accent); margin:0; } .pw-eye{ position:absolute; right:5px; top:50%; transform:translateY(-50%); width:30px; height:30px; display:grid; place-items:center; color:var(--text-3); border-radius:8px; } .pw-eye:hover{ background:var(--hover); color:var(--text); } .input-affix .pw-eye{ left:auto; pointer-events:auto; } .auth-quick{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .auth-foot{ margin-top:20px; text-align:center; font-size:11.5px; color:var(--text-3); line-height:1.7; } .auth-foot b{ color:var(--text-2); } @media (max-width:940px){ .auth-wrap{ grid-template-columns:1fr; } .auth-side{ display:none; } .auth-mobile-meta{ display:flex; flex-direction:column; gap:14px; margin-top:18px; } .auth-mobile-meta .auth-access{ margin-top:0; background:var(--surface); border-color:var(--border-strong); } .auth-mobile-meta .auth-access__content b{ color:var(--text); } .auth-mobile-meta .auth-access__content span{ color:var(--text-2); } .auth-mobile-meta .auth-access__content small{ color:var(--text-3); } .auth-mobile-meta .auth-copy{ color:var(--text-3); text-align:center; } } /* ---------- 16. PROFILE / USERS ----------------------------- */ .avatar--xl{ width:84px!important; height:84px!important; border-radius:22px!important; font-size:26px!important; } .avatar-ring{ position:relative; display:inline-block; flex:none; } .avatar-ring > .dot{ position:absolute; right:2px; bottom:2px; z-index:2; outline:3px solid var(--surface); } .profile-head{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; } .pw-meter{ height:6px; border-radius:99px; background:var(--surface-3); overflow:hidden; } .pw-meter__fill{ height:100%; width:0%; border-radius:99px; background:var(--down); transition:width .25s, background .25s; } .pw-meter__fill[data-s="1"]{ width:25%; background:var(--down); } .pw-meter__fill[data-s="2"]{ width:50%; background:var(--warn); } .pw-meter__fill[data-s="3"]{ width:75%; background:var(--info); } .pw-meter__fill[data-s="4"]{ width:100%; background:var(--up); } .req-list{ margin:9px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:5px 14px; } .req-list li{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-3); transition:color .2s; } .req-list li svg{ width:12px; height:12px; flex:none; } .req-list li.ok{ color:var(--up); } .u-cell{ display:flex; align-items:center; gap:11px; min-width:0; } .u-cell .avatar{ width:34px; height:34px; border-radius:10px; font-size:11px; } .u-cell .n{ font-weight:650; font-size:13px; line-height:1.25; } .u-cell .e{ font-size:11.5px; color:var(--text-3); font-family:var(--font-mono); } .avatar-preview{ width:56px; height:56px; flex:none; border-radius:16px; border:1px solid var(--border-strong); background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-weight:700; font-size:18px; background-size:cover; background-position:center; } @media (max-width:640px){ .req-list{ grid-template-columns:1fr; } } /* ── Dashboard utility classes (used by Next.js app) ── */ .dot{ width:7px; height:7px; border-radius:50%; display:inline-block; background:var(--text-3); flex-shrink:0; } .dot--live{ background:var(--up); box-shadow:0 0 0 2px var(--up-soft); } .dot--green{ background:var(--up); } .dot--red{ background:var(--down); } .dot--amber{ background:var(--warn); } .dot--dim{ background:var(--text-3); } .modechip{ display:inline-flex; align-items:center; gap:7px; padding:5px 10px; border-radius:var(--r-sm); background:var(--surface-2); border:1px solid var(--border); font-size:11px; font-weight:700; color:var(--text); } .tile{ display:flex; flex-direction:column; } .tile__head{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-2); } .content{ flex:1; min-width:0; padding:var(--gutter); display:flex; flex-direction:column; } .mono{ font-family:var(--font-mono); } .scrim{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:55; opacity:0; pointer-events:none; transition:opacity .2s; } .sidebar-open .scrim{ opacity:1; pointer-events:auto; } .hide{ display:none !important; } .usercard{ display:flex; align-items:center; gap:10px; padding:12px 14px; } .avatar{ width:30px; height:30px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-size:11px; font-weight:700; } .who{ display:block; font-weight:700; font-size:13px; color:var(--text); } .role{ font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:.4px; } .sym{ font-weight:700; } .ver{ font-size:10px; color:var(--text-3); } .t{ font-family:var(--font-mono); } .z{ font-size:10px; color:var(--text-3); } .burger{ display:none; } @media (max-width: 900px){ .burger{ display:inline-flex; } .sidebar{ transform:translateX(-100%); } .sidebar-open .sidebar{ transform:translateX(0); } .main{ margin-left:0; } } /* ── Grid utilities (Next.js dashboard pages) ── */ .grid{ display:grid; gap:var(--gutter); } .g-2{ grid-template-columns:repeat(2, minmax(0,1fr)); } .g-3{ grid-template-columns:repeat(3, minmax(0,1fr)); } .g-4{ grid-template-columns:repeat(4, minmax(0,1fr)); } .g-5{ grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr)); } @media (max-width:1200px){ .g-5{ grid-template-columns:repeat(3, minmax(0,1fr)); } .g-4{ grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width:900px){ .g-3,.g-4,.g-5{ grid-template-columns:1fr; } .g-2{ grid-template-columns:1fr; } } /* ── Card modifier ── */ .pat-card--pad{ padding:18px; } /* ── Key-value rows ── */ .kv{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:12.5px; } .kv dt{ color:var(--text-2); font-weight:500; } .kv dd{ color:var(--text); font-family:var(--font-mono); font-weight:600; text-align:right; } /* ── Label / dim helper ── */ .label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-2); } .dim{ color:var(--text-3); } /* ── Small layout helpers ── */ .grow{ flex:1; } .row{ display:flex; align-items:center; gap:12px; } .row--between{ justify-content:space-between; } .row--wrap{ flex-wrap:wrap; } .stack-2{ display:flex; flex-direction:column; gap:8px; } /* Astro/KP card tables */ .pat-card .pat-table{ min-width:unset; } .pat-card__body .pat-table thead th{ background:var(--surface-2); } .pat-card__body .pat-table td{ padding:10px 14px; } .pat-card__body .pat-table tbody tr:nth-child(odd){ background:rgba(128,128,128,.04); } .pat-card__body .pat-table tbody tr:hover{ background:var(--hover); } /* Astro/KP full-width data tables */ .astro-data-table-card{ width:100%; } .astro-table-wrap{ overflow-x:auto; width:100%; } .astro-data-table{ min-width:unset; width:100%; margin:0; } .astro-data-table th, .astro-data-table td{ white-space:nowrap; } .astro-data-table th:first-child, .astro-data-table td:first-child{ padding-left:18px; } .astro-data-table th:last-child, .astro-data-table td:last-child{ padding-right:18px; } .astro-data-table tbody tr:nth-child(odd){ background:rgba(128,128,128,.04); } .astro-data-table tbody tr:hover{ background:var(--hover); }