@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Share+Tech+Mono&display=swap'); :root { --bg-base: #020305; --panel-bg: rgba(12, 16, 22, 0.85); --panel-header: rgba(18, 22, 30, 0.95); --border-color: #1f2937; --accent: #ffab00; /* Tactical Amber */ --accent-dim: rgba(255, 171, 0, 0.1); --danger: #ff3333; --success: #00e676; --text-dim: #7a8a9e; --text-bright: #e2e8f0; /* Legacy calc/intel pages use --blue / --border / --red */ --blue: var(--accent); --blue-glow: var(--accent-dim); --red: var(--danger); --border: var(--border-color); /* Full-page mesh (body::before) — no color-mix() so layers never drop as invalid */ --mesh-line: rgba(255, 255, 255, 0.045); --mesh-dot: rgba(255, 255, 255, 0.055); --mesh-vignette: rgba(0, 0, 0, 0.38); /* Accent glows (updated per optics theme below) */ --accent-glow-top: rgba(255, 171, 0, 0.13); --accent-glow-bl: rgba(255, 171, 0, 0.07); --accent-glow-br: rgba(255, 171, 0, 0.055); } * { box-sizing: border-box; } html { height: 100%; /* Keep html flat so body::before (z-index 0) is visible above canvas */ background-color: var(--bg-base); } /* --- BACKGROUND: fixed full-viewport mesh (same on every page using this sheet) --- */ body { position: relative; background: transparent; color: var(--text-bright); font-family: 'Share Tech Mono', monospace; margin: 0; padding: 20px; min-height: 100%; height: 100vh; display: flex; flex-direction: column; overflow: hidden; } /* Legal armor disclaimer footer */ body.legal-has-footer { padding-bottom: 78px; } .legal-footer { position: fixed; left: 20px; right: 20px; bottom: 14px; z-index: 9000; max-width: 980px; margin: 0 auto; padding: 10px 12px; border: 1px solid rgba(255, 171, 0, 0.22); border-radius: 8px; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(8px); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.04); font-family: 'Orbitron', sans-serif; font-size: 0.68em; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; color: var(--text-bright); } .legal-footer strong { color: var(--danger); font-weight: 700; } /* z-index: -1 can paint behind bg and disappear; 0 + stacking fixes that */ body::before { content: ''; position: fixed; inset: 0; width: 100%; min-height: 100%; z-index: 0; pointer-events: none; background-color: var(--bg-base); background-image: radial-gradient(ellipse 130% 85% at 50% -30%, var(--accent-glow-top), transparent 55%), radial-gradient(ellipse 55% 45% at 0% 105%, var(--accent-glow-bl), transparent 52%), radial-gradient(ellipse 50% 40% at 100% 90%, var(--accent-glow-br), transparent 50%), linear-gradient(180deg, var(--mesh-vignette) 0%, transparent 40%, rgba(0, 0, 0, 0.32) 100%), linear-gradient(90deg, var(--mesh-line) 1px, transparent 1px), linear-gradient(180deg, var(--mesh-line) 1px, transparent 1px), radial-gradient(var(--mesh-dot) 1px, transparent 1.5px); background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 48px 48px, 48px 48px, 24px 24px; background-position: center top, center, center, center, -1px -1px, -1px -1px, 0 0; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat; } body > * { position: relative; z-index: 1; } /* --- NAVIGATION BAR REFINED (3-zone: brand | status rail | links) --- */ .top-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 18px; position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(0, 0, 0, 0) 45%), linear-gradient(165deg, rgba(255, 171, 0, 0.07) 0%, rgba(12, 16, 22, 0.94) 100%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.58), inset 0 0 0 1px rgba(255, 171, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.06); padding: 14px 22px 14px 20px; margin-bottom: 25px; flex-shrink: 0; backdrop-filter: blur(10px); } .top-nav::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(255, 171, 0, 0.15) 20%, var(--accent) 50%, rgba(255, 171, 0, 0.15) 80%, transparent 100%); opacity: 0.55; pointer-events: none; } @media (min-width: 901px) { .top-nav__brand { padding-right: 16px; margin-right: 2px; border-right: 1px solid rgba(255, 255, 255, 0.07); } .top-nav__end { padding-left: 16px; margin-left: 2px; border-left: 1px solid rgba(255, 255, 255, 0.07); } } .top-nav__brand { justify-self: start; min-width: 0; } .top-nav__center { justify-self: center; text-align: center; max-width: min(420px, 100%); padding: 0 8px; } .top-nav__rail { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 10px; padding: 10px 20px; font-family: 'Orbitron', sans-serif; font-size: 0.58em; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; border-radius: 8px; border: 1px solid rgba(255, 171, 0, 0.28); background: rgba(0, 0, 0, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 18px rgba(0, 0, 0, 0.35); } .top-nav__pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px rgba(0, 230, 118, 0.55); flex-shrink: 0; animation: vs-nav-pulse 2.4s ease-in-out infinite; } @keyframes vs-nav-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.92); } } @media (prefers-reduced-motion: reduce) { .top-nav__pulse { animation: none; } } .top-nav__module { color: var(--accent); font-weight: 700; letter-spacing: 0.18em; } .top-nav__sep { color: rgba(122, 138, 158, 0.55); font-weight: 400; letter-spacing: 0.12em; } .top-nav__tagline { color: var(--text-bright); font-weight: 600; letter-spacing: 0.16em; } .top-nav__end { justify-self: end; min-width: 0; } @media (max-width: 900px) { .top-nav { grid-template-columns: 1fr auto; grid-template-rows: auto auto; row-gap: 12px; } .top-nav__brand { grid-column: 1; grid-row: 1; } .top-nav__end { grid-column: 2; grid-row: 1; align-self: center; } .top-nav__center { grid-column: 1 / -1; grid-row: 2; max-width: none; padding: 8px 4px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); } .top-nav__rail { font-size: 0.52em; letter-spacing: 0.14em; } } /* SLEEK LOGO ALIGNMENT */ .logo { display: flex; align-items: center; gap: 14px; } .logo-icon { height: 40px; /* Forces the triangle to shrink */ width: auto; flex-shrink: 0; margin-top: 1px; } .logo-text { color: var(--text-bright); font-size: 1.4em; font-weight: 700; font-family: 'Orbitron', sans-serif; letter-spacing: 2px; line-height: 1.0; text-shadow: 0 0 10px var(--accent-dim); } .logo-location { color: var(--accent); font-size: 0.65em; letter-spacing: 2px; font-family: 'Share Tech Mono', monospace; text-transform: uppercase; margin-top: 2px; } /* STATUS & LINKS */ .status-cluster { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; row-gap: 8px; } .stat-box { border: 1px solid var(--border-color); border-radius: 6px; padding: 0 12px; height: 32px; display: inline-flex; align-items: center; gap: 8px; font-size: 0.74em; line-height: 1; background: rgba(0,0,0,0.5); color: var(--text-bright); white-space: nowrap; } .stat-box span { color: var(--accent); margin-right: 8px; font-weight: bold; } .nav-links { display: flex; gap: 30px; font-size: 0.85em; text-transform: uppercase; font-family: 'Orbitron', sans-serif; letter-spacing: 1px; align-items: center; } .nav-links a { text-decoration: none; color: var(--text-dim); transition: 0.3s; padding: 6px 0; position: relative; } .nav-links a:hover { color: var(--text-bright); } /* TACTICAL GLOW ACTIVE STATE (Replaces the clunky solid block) */ .nav-links a.active { color: var(--accent); font-weight: bold; text-shadow: 0 0 8px var(--accent-dim); } .nav-links a.active::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent); } /* Top bar: pill nav (scoped — legacy pages keep global .nav-links rules above) */ .top-nav .nav-links { gap: 6px; flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; } .top-nav .nav-links a { padding: 9px 14px; border-radius: 6px; font-size: 0.68em; letter-spacing: 0.12em; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.32); transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s; } .top-nav .nav-links a:hover { color: var(--text-bright); border-color: rgba(255, 171, 0, 0.4); background: rgba(255, 171, 0, 0.09); box-shadow: 0 0 0 1px rgba(255, 171, 0, 0.12); } .top-nav .nav-links a.active { color: var(--bg-base); font-weight: 700; text-shadow: none; border-color: var(--accent); background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, var(--accent) 100%); box-shadow: 0 4px 22px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22); } .top-nav .nav-links a.active::after { display: none; } .top-nav .nav-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* --- Context tooltips (data-vs-tip) — hover + keyboard focus; aria-description on controls --- */ .vs-tip[data-vs-tip] { position: relative; cursor: help; } /* Use ::before so nav .active::after underlines and other ::after decorations stay free */ .vs-tip[data-vs-tip]::before { content: attr(data-vs-tip); position: absolute; left: 0; top: calc(100% + 8px); z-index: 8000; width: max-content; max-width: min(320px, 86vw); padding: 9px 11px; font-family: 'Share Tech Mono', monospace; font-size: 0.68rem; line-height: 1.4; letter-spacing: 0.02em; color: var(--text-bright); text-transform: none; font-weight: 400; white-space: normal; text-align: left; pointer-events: none; visibility: hidden; opacity: 0; transition: opacity 0.18s ease, visibility 0.18s ease; background: rgba(8, 12, 18, 0.98); border: 1px solid rgba(255, 171, 0, 0.35); border-radius: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.04); } .vs-tip[data-vs-tip]:hover::before, .vs-tip[data-vs-tip]:focus-visible::before { visibility: visible; opacity: 1; } .vs-tip--end[data-vs-tip]::before { left: auto; right: 0; } .vs-tip--center[data-vs-tip]::before { left: 50%; transform: translateX(-50%); } /* Mission HUD: allow tooltips to paint outside the card body */ #missionHUD.card, #missionHUD .hud-card-body { overflow: visible; } /* Operator profile — compact strip, sits after optics in .status-cluster (see hud.js) */ .operator-panel { border: 1px solid rgba(255, 171, 0, 0.22); border-radius: 5px; padding: 4px 8px 5px; background: rgba(0, 0, 0, 0.45); width: auto; min-width: 0; max-width: 168px; flex: 0 1 auto; align-self: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } .operator-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; } .operator-panel__name { font-family: 'Orbitron', sans-serif; font-size: 0.58em; letter-spacing: 0.04em; color: var(--text-bright); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .operator-panel__email { font-size: 0.5em; color: var(--text-dim); margin-top: 2px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 152px; } .operator-panel__metrics { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 3px 4px; margin-top: 3px; font-size: 0.5em; font-family: 'Share Tech Mono', monospace; color: var(--text-dim); white-space: nowrap; } .operator-panel__label { letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.95em; } .operator-panel__ammo { color: var(--success); font-weight: 700; font-variant-numeric: tabular-nums; } .operator-panel__ammo.operator-panel__ammo--low { color: var(--danger); } .operator-panel__unit { color: var(--text-dim); opacity: 0.8; font-size: 0.9em; } .operator-panel__sep { opacity: 0.3; margin: 0 1px; } .operator-panel__role { color: var(--accent); letter-spacing: 0.04em; font-size: 1.05em; } .operator-panel__logout { flex-shrink: 0; font-size: 0.48em; letter-spacing: 0.1em; font-family: 'Orbitron', sans-serif; text-transform: uppercase; color: var(--danger); text-decoration: none; border: 1px solid rgba(255, 51, 51, 0.35); padding: 2px 6px; border-radius: 3px; line-height: 1.2; transition: 0.2s; } .operator-panel__logout:hover { background: rgba(255, 51, 51, 0.12); border-color: var(--danger); color: var(--text-bright); } /* Daily LLM token quota (UTC) — Mission HUD */ .operator-panel__token { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 171, 0, 0.15); } .operator-panel__token-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 10px; margin-bottom: 6px; } .operator-panel__token-label { font-family: 'Orbitron', sans-serif; font-size: 0.52em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); } .operator-panel__token-period { font-family: 'Share Tech Mono', monospace; font-size: 0.52em; color: var(--text-dim); opacity: 0.75; } .operator-panel__token-track { height: 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 171, 0, 0.2); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); } .operator-panel__token-fill { height: 100%; width: 0%; border-radius: 2px; background: linear-gradient(90deg, rgba(0, 220, 130, 0.85), var(--success)); box-shadow: 0 0 10px rgba(0, 220, 130, 0.25); transition: width 0.35s ease, background 0.25s ease, box-shadow 0.25s ease; } .operator-panel__token-fill.operator-panel__token-fill--warn { background: linear-gradient(90deg, rgba(255, 171, 0, 0.75), var(--accent)); box-shadow: 0 0 10px rgba(255, 171, 0, 0.2); } .operator-panel__token-fill.operator-panel__token-fill--critical { background: linear-gradient(90deg, rgba(255, 80, 80, 0.85), var(--danger)); box-shadow: 0 0 12px rgba(255, 51, 51, 0.35); } .operator-panel__token--exhausted .operator-panel__token-track { border-color: rgba(255, 51, 51, 0.45); } .operator-panel__token-nums { margin-top: 6px; font-family: 'Share Tech Mono', monospace; font-size: 0.58em; color: var(--text-bright); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } .operator-panel__token--exhausted .operator-panel__token-nums { color: var(--danger); } /* Mission HUD: operator profile lives inside #missionHUD (see hud.js renderHUD) */ #missionHUD.card { min-height: 0; } #missionHUD .hud-card-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 14px; } #missionHUD .operator-panel--hud { max-width: 100%; align-self: stretch; padding: 10px 12px 11px; border-radius: 8px; border-color: rgba(255, 171, 0, 0.34); background: linear-gradient(165deg, rgba(255, 171, 0, 0.06) 0%, rgba(0, 0, 0, 0.5) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 26px rgba(0, 0, 0, 0.35); } #missionHUD .operator-panel--hud .operator-panel__head { gap: 10px; } #missionHUD .operator-panel--hud .operator-panel__name { font-size: 0.74em; letter-spacing: 0.06em; } #missionHUD .operator-panel--hud .operator-panel__email { font-size: 0.62em; max-width: 100%; } #missionHUD .operator-panel--hud .operator-panel__metrics { margin-top: 8px; font-size: 0.62em; gap: 6px; } #missionHUD .operator-panel--hud .operator-panel__logout { font-size: 0.6em; padding: 4px 9px; border-radius: 4px; } #missionHUD .operator-panel--hud .operator-panel__token-label { font-size: 0.58em; } #missionHUD .operator-panel--hud .operator-panel__token-period { font-size: 0.55em; } #missionHUD .operator-panel--hud .operator-panel__token-track { height: 8px; border-radius: 4px; } #missionHUD .operator-panel--hud .operator-panel__token-nums { font-size: 0.64em; margin-top: 8px; } #missionHUD .hud-block--foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-color); } #missionHUD .hud-block--notes { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; } #missionHUD .hud-block--notes > label { margin-bottom: 0; margin-top: 4px; } #missionHUD .hud-block--notes > label:first-child { margin-top: 0; } #missionHUD .hud-pinned-input { width: 100%; font-size: 0.82em; padding: 8px 10px; font-family: 'Share Tech Mono', monospace; } #missionHUD .hud-scratch-textarea { flex: 1 1 auto; min-height: 100px; max-height: min(38vh, 340px); width: 100%; font-size: 0.78em; line-height: 1.45; padding: 10px 10px; font-family: 'Share Tech Mono', monospace; resize: vertical; } #missionHUD .hud-notes-hint { font-size: 0.52em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-top: 4px; flex-shrink: 0; } /* --- PANELS & EDGES --- */ .grid { display: grid; grid-template-columns: 310px 1fr 310px; gap: 25px; flex-grow: 1; min-height: 0; } .card { background: var(--panel-bg); border: 1px solid var(--border-color); display: flex; flex-direction: column; min-height: 0; position: relative; box-shadow: inset 0 0 30px rgba(0,0,0,0.5); transition: border-color 0.2s ease, box-shadow 0.25s ease; } .card::before, .card::after { content: ''; position: absolute; width: 20px; height: 20px; border: 2px solid var(--accent); z-index: 10; pointer-events: none; } .card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; } .card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; } .card-header { padding: 15px 20px; border-bottom: 1px solid var(--border-color); background: rgba(0,0,0,0.3); font-family: 'Orbitron', sans-serif; font-size: 0.85em; letter-spacing: 2px; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; color: var(--accent); } .card-body { padding: 25px; overflow-y: auto; flex-grow: 1; display: flex; flex-direction: column; gap: 15px; } /* --- FORMS & INPUTS --- */ label { font-size: 0.7em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 6px; display: block; letter-spacing: 1px; } select, textarea, input { width: 100%; background: rgba(0,0,0,0.6); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-bright); padding: 12px; font-family: inherit; font-size: 0.95em; outline: none; transition: 0.3s; } textarea { resize: none; flex-grow: 1; min-height: 120px; } select:focus, textarea:focus, input:focus { border-color: var(--accent); box-shadow: 0 0 10px var(--accent-dim); } .btn-primary { background: var(--accent-dim); border: 1px solid var(--accent); border-radius: 4px; color: var(--accent); padding: 15px; font-family: 'Orbitron', sans-serif; font-size: 0.9em; cursor: pointer; letter-spacing: 2px; text-transform: uppercase; transition: 0.3s; } .btn-primary:hover { background: var(--accent); color: var(--bg-base); font-weight: bold; } .btn-copy { font-family: 'Orbitron', sans-serif; font-size: 0.72em; letter-spacing: 0.12em; text-transform: uppercase; padding: 12px 16px; min-height: 44px; border-radius: 6px; cursor: pointer; border: 1px solid rgba(255, 171, 0, 0.35); background: rgba(0, 0, 0, 0.45); color: var(--accent); transition: border-color 0.2s, background 0.2s, color 0.2s; touch-action: manipulation; } .btn-copy:hover { background: rgba(255, 171, 0, 0.12); border-color: var(--accent); } .btn-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn-copy:disabled { opacity: 0.4; cursor: not-allowed; } .output-box { border: 1px dashed var(--accent); padding: 20px; background: rgba(255, 171, 0, 0.05); color: var(--text-bright); font-size: 0.9em; min-height: 80px; line-height: 1.6; border-radius: 4px; } /* --- HUD SPECIFICS --- */ .hud-val-clock { color: var(--text-bright); font-size: 2.4em; font-family: 'Orbitron', sans-serif; margin-top: 5px; text-shadow: 0 0 10px rgba(255,255,255,0.1); } .progress-bar { width: 100%; height: 6px; background: #000; border-radius: 3px; overflow: hidden; margin-top: 8px; } #shiftFill { height: 100%; background: var(--accent); transition: width 1s; } ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* --- OPTICS: MULTI-SPECTRUM THEMES --- */ body.theme-cyan { --accent: #00e5ff; --accent-dim: rgba(0, 229, 255, 0.1); --accent-glow-top: rgba(0, 229, 255, 0.14); --accent-glow-bl: rgba(0, 229, 255, 0.08); --accent-glow-br: rgba(0, 229, 255, 0.06); --blue: #00e5ff; --blue-glow: rgba(0, 229, 255, 0.45); } body.theme-green { --accent: #00ff66; --accent-dim: rgba(0, 255, 102, 0.1); --accent-glow-top: rgba(0, 255, 102, 0.12); --accent-glow-bl: rgba(0, 255, 102, 0.07); --accent-glow-br: rgba(0, 255, 102, 0.055); --blue: #00ff88; --blue-glow: rgba(0, 255, 136, 0.45); } body.theme-red { --accent: #ff3333; --accent-dim: rgba(255, 51, 51, 0.1); --accent-glow-top: rgba(255, 51, 51, 0.12); --accent-glow-bl: rgba(255, 51, 51, 0.07); --accent-glow-br: rgba(255, 51, 51, 0.055); --blue: #ff2a55; --blue-glow: rgba(255, 42, 85, 0.45); } /* Note: Amber is the default fallback if no class is applied */ /* --- Optics selector (nav / HUD) --- */ .optics-selector-wrap.stat-box { padding: 0 6px 0 8px; border: 1px solid var(--border-color); background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; gap: 6px; height: 32px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .optics-select, select.optics-select { width: auto !important; min-width: 9.5rem; max-width: 14rem; padding: 6px 28px 6px 10px; font-family: 'Orbitron', sans-serif; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: rgba(0, 0, 0, 0.75); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; cursor: pointer; outline: none; transition: border-color 0.2s, box-shadow 0.2s; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffab00' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } body.theme-cyan .optics-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2300e5ff' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); } body.theme-green .optics-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2300ff66' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); } body.theme-red .optics-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ff3333' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); } .optics-select:hover, .optics-select:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-dim), 0 4px 16px rgba(0, 0, 0, 0.45); } .optics-select--nav { min-height: 30px; } .optics-select--nav { height: 30px; } /* --- App shell: PT calc / intel feed (body > nav + .panel grid) --- */ body > nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; background: var(--panel-header); border: 1px solid var(--border-color); border-radius: 8px; padding: 12px 20px; margin-bottom: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75); backdrop-filter: blur(10px); } body > nav .brand { font-family: 'Orbitron', sans-serif; font-weight: 700; letter-spacing: 0.12em; color: var(--text-bright); font-size: 0.95em; } body > nav .nav-stats { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } body > nav .sys-tag { border: 1px solid var(--border-color); border-radius: 4px; padding: 5px 12px; font-size: 0.68em; font-family: 'Share Tech Mono', monospace; background: rgba(0, 0, 0, 0.45); color: var(--text-dim); } body > nav .sys-tag span { color: var(--text-bright); margin-left: 6px; } body > nav .nav-links { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; } body > nav .nav-item { font-family: 'Orbitron', sans-serif; font-size: 0.72em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); text-decoration: none; padding: 4px 0; position: relative; transition: color 0.2s; } body > nav .nav-item:hover { color: var(--text-bright); } body > nav .nav-item.active { color: var(--accent); font-weight: 700; text-shadow: 0 0 8px var(--accent-dim); } body > nav .nav-item.active::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent); } /* Tool layout: three flexible columns (not dashboard-forge card grid) */ body:not(.dashboard-forge) > .grid { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 1.4fr) minmax(220px, 1fr); gap: 18px; flex-grow: 1; min-height: 0; align-items: stretch; } @media (max-width: 1100px) { body:not(.dashboard-forge) > .grid { grid-template-columns: 1fr; } } body:not(.dashboard-forge) > .grid > .panel { background: var(--panel-bg); border: 1px solid var(--border-color); border-radius: 8px; display: flex; flex-direction: column; min-height: 0; box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.45); overflow: hidden; } body:not(.dashboard-forge) .panel-header { padding: 14px 18px; border-bottom: 1px solid var(--border-color); background: rgba(0, 0, 0, 0.35); font-family: 'Orbitron', sans-serif; font-size: 0.62rem; letter-spacing: 0.22em; color: var(--accent); flex-shrink: 0; } body:not(.dashboard-forge) .panel .hud-label { font-size: 0.65em; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; display: block; } body:not(.dashboard-forge) .panel .hud-val { font-family: 'Orbitron', sans-serif; font-size: 1.4rem; color: var(--text-bright); } body:not(.dashboard-forge) .big-input { width: 100%; padding: 10px 12px; background: rgba(0, 0, 0, 0.55); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-bright); font-family: 'Share Tech Mono', monospace; font-size: 0.9rem; } body:not(.dashboard-forge) .panel-scroller { padding: 16px 18px 24px; } /* --- SHARPEN PASS (dashboard + shared) --- */ html { text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-kerning: normal; scrollbar-color: rgba(255, 255, 255, 0.22) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.24); } .card { border-radius: 10px; border-color: rgba(255, 255, 255, 0.08); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.0) 24%), var(--panel-bg); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.02), inset 0 0 34px rgba(0,0,0,0.55); } .card:hover { border-color: rgba(255, 171, 0, 0.35); box-shadow: 0 22px 70px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.02), inset 0 0 40px rgba(0,0,0,0.6); } .card-header { padding: 14px 18px; border-bottom-color: rgba(255, 255, 255, 0.06); background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.22) 100%); } select:focus, textarea:focus, input:focus { box-shadow: 0 0 0 1px var(--accent-dim), 0 10px 30px rgba(0,0,0,0.45); } .btn-primary:hover { box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 171, 0, 0.25); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } /* --- MOBILE & NARROW VIEWPORTS --- */ @media (max-width: 1200px) { .grid { grid-template-columns: 1fr; gap: 18px; min-height: auto; } .card { min-height: auto; } .card-body { overflow-y: visible; } } @media (max-width: 900px) { body { height: auto; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; overflow-y: auto; padding: 12px; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling: touch; } body.legal-has-footer { padding-bottom: max(100px, calc(78px + env(safe-area-inset-bottom, 0px))); } .legal-footer { left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: max(10px, env(safe-area-inset-bottom, 0px)); font-size: 0.56em; letter-spacing: 0.1em; padding: 10px 8px; line-height: 1.35; } .top-nav { padding: 12px 14px; margin-bottom: 16px; column-gap: 10px; } .top-nav__rail { padding: 8px 12px; font-size: 0.54em; letter-spacing: 0.1em; white-space: normal; text-align: center; justify-content: center; max-width: 100%; } .logo { gap: 10px; align-items: center; } .logo-icon { height: 34px; } .logo-text { font-size: 1.12em; letter-spacing: 0.06em; line-height: 1.15; } .logo-location { font-size: 0.55em; letter-spacing: 0.08em; } .top-nav .nav-links a { padding: 10px 12px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; touch-action: manipulation; } .card-header { padding: 12px 14px; font-size: 0.72em; letter-spacing: 0.12em; flex-wrap: wrap; gap: 8px; } .card-body { padding: 16px 14px; gap: 12px; } label { font-size: 0.65em; } select, textarea, input { padding: 14px 12px; font-size: 1rem; } .btn-primary { padding: 16px 14px; min-height: 48px; width: 100%; touch-action: manipulation; } .hud-val-clock { font-size: 1.75em; } #missionHUD .hud-scratch-textarea { max-height: min(50vh, 280px); } #missionHUD .operator-panel--hud { padding: 10px; } #missionHUD.card { min-height: auto; } #missionHUD .hud-card-body { gap: 12px; overflow: visible; } } /* Stack top nav: brand → links → status rail (readable on phones) */ @media (max-width: 700px) { .top-nav { grid-template-columns: 1fr; grid-template-rows: auto auto auto; row-gap: 10px; } .top-nav__brand { grid-column: 1; grid-row: 1; justify-self: start; max-width: 100%; } .top-nav__end { grid-column: 1; grid-row: 2; justify-self: stretch; width: 100%; border-left: none !important; padding-left: 0 !important; margin-left: 0 !important; } .top-nav__center { grid-column: 1; grid-row: 3; max-width: none; padding: 12px 0 0; margin-top: 2px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .top-nav .nav-links { justify-content: center; gap: 8px; width: 100%; } .top-nav .nav-links a { flex: 1 1 calc(50% - 6px); min-width: 0; max-width: none; } }