/* ===== BSMR Download · v3 — neon futurist ===== */
:root {
--bg-0: #04060b;
--bg-1: #0b0f17;
--bg-2: #131826;
--bg-3: #1c2233;
--line: #2e3854;
--line-strong: #475270;
--text-0: #ffffff;
--text-1: #eef2fa;
--text-2: #b9c1d4;
--text-3: #7d8499;
--signal: #00f0ff;
--signal-2: #5b8cff;
--signal-soft: rgba(0, 240, 255, 0.22);
--signal-glow: rgba(0, 240, 255, 0.7);
--magenta: #ff4dd2;
--magenta-soft: rgba(255, 77, 210, 0.18);
--warn: #ffc266;
--danger: #ff4d6d;
--ok: #4dffa3;
--shadow-card: 0 24px 60px -20px rgba(0, 240, 255, 0.14);
--radius: 18px;
--radius-sm: 12px;
--radius-lg: 26px;
--radius-pill: 999px;
--font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--font-sans: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
background: var(--bg-0);
color: var(--text-0);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.55;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
html { scroll-behavior: smooth; }
/* Sticky topbar would otherwise hide the top of anchor targets — push the
"land here" point below the topbar so #instruction-banner et al. are
visible after scroll. */
[id] { scroll-margin-top: 84px; }
@media (max-width: 880px) {
[id] { scroll-margin-top: 72px; }
}
/* ===== custom scrollbar (page + scrollable containers) ===== */
* {
scrollbar-width: thin;
scrollbar-color: var(--line-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--line-strong), var(--line));
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, var(--signal), var(--signal-2));
background-clip: padding-box;
border: 2px solid transparent;
}
*::-webkit-scrollbar-corner { background: transparent; }
/* hide native number spinners — we never want those tiny arrows */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
/* whole admin firmware-card is clickable — opens /firmware/:slug */
.fw-admin-card[data-card-link] { cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease; }
.fw-admin-card[data-card-link]:hover { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal-soft), 0 12px 40px -12px rgba(0,240,255,0.25); }
.fw-admin-card[data-card-link]:hover .fw-admin-title { color: var(--signal); transition: color .2s ease; }
.fw-admin-card[data-card-link]:hover .fw-admin-hero img { filter: saturate(1.08) contrast(1.05) brightness(1.05); }
/* row-actions inside the card stay neutral on parent hover */
.fw-admin-card [data-no-card-click] { cursor: default; }
/* === Drag handle on firmware cards (YouTube-style two-bar grip) === */
/* Handle is hidden by default — only appears in reorder mode, on the LEFT. */
.fw-admin-card { position: relative; }
.fw-drag-handle {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
z-index: 3;
width: 32px;
height: 32px;
display: none;
align-items: center;
justify-content: center;
padding: 0;
background: transparent;
color: var(--text-2);
border: 0;
border-radius: var(--radius-sm, 6px);
cursor: grab;
/* Handle is decorative in reorder mode — let drag events pass through to the
card itself (otherwise the button absorbs the mousedown and the native
HTML5 drag never starts when the user grabs the icon). */
pointer-events: none;
transition: color .15s ease;
}
.fw-drag-handle svg { width: 22px; height: 22px; display: block; }
.fw-admin-card.is-dragging { opacity: 0.4; }
.fw-admin-card.is-drop-target {
box-shadow: 0 0 0 2px var(--signal), 0 0 24px -6px var(--signal-soft, rgba(0,240,255,0.4));
}
/* Visual hint: thick signal line on top/bottom edge depending on drop side. */
.fw-admin-card.is-drop-target.drop-before { box-shadow: 0 -3px 0 0 var(--signal), 0 0 24px -6px var(--signal-soft); }
.fw-admin-card.is-drop-target.drop-after { box-shadow: 0 3px 0 0 var(--signal), 0 0 24px -6px var(--signal-soft); }
/* ===== REORDER MODE ===== */
/* When the section has .fw-reorder-mode, cards collapse to a single compact
row: handle + thumb + name. Editing controls, versions, hover-glow disabled. */
.fw-reorder-mode .fw-admin-card {
grid-template-columns: 84px 1fr !important;
margin-bottom: 8px;
min-height: 0;
cursor: grab;
/* Block text selection so mousedown-drag isn't hijacked by a text caret. */
user-select: none;
-webkit-user-select: none;
}
.fw-reorder-mode .fw-admin-card:active { cursor: grabbing; }
.fw-reorder-mode .fw-admin-card[data-card-link]:hover {
border-color: var(--line);
box-shadow: none;
transform: none;
}
.fw-reorder-mode .fw-admin-card[data-card-link]:hover .fw-admin-title { color: var(--text-0); }
.fw-reorder-mode .fw-drag-handle { display: inline-flex; color: var(--text-1); }
/* Padding-left on the hero pushes the thumbnail past the handle column. */
.fw-reorder-mode .fw-admin-hero {
min-height: 56px;
aspect-ratio: 3 / 2;
border-right: 1px solid var(--line);
margin-left: 44px; /* room for the handle */
pointer-events: none; /* image shouldn't capture drag */
}
.fw-reorder-mode .fw-admin-hero img { position: absolute; inset: 0; }
.fw-reorder-mode .fw-admin-body { padding: 10px 16px; display: flex; align-items: center; }
.fw-reorder-mode .fw-admin-body > div:first-child { margin-bottom: 0 !important; }
/* Hide everything beyond the title row in compact mode. */
.fw-reorder-mode .fw-admin-body > div:first-child .row-actions,
.fw-reorder-mode .fw-admin-body > div:first-child > div:last-child,
.fw-reorder-mode .fw-admin-body table.data,
.fw-reorder-mode .fw-admin-body .empty { display: none !important; }
.fw-reorder-mode .fw-admin-title {
font-size: 18px !important;
background: none !important;
-webkit-text-fill-color: var(--text-0);
color: var(--text-0);
letter-spacing: 0;
}
.fw-reorder-mode .eyebrow { font-size: 10px !important; }
@media (max-width: 880px) {
.fw-reorder-mode .fw-admin-card { grid-template-columns: 64px 1fr !important; }
.fw-reorder-mode .fw-admin-hero { aspect-ratio: 1 / 1; border-right: 1px solid var(--line); border-bottom: none; margin-left: 36px; }
}
/* === Install-step rows (in the model edit form) ===
Each step is a small card. Drag handle is always visible — the row reorders
via HTML5 drag&drop. Same visual cues (signal-coloured drop edge, faded
source row) as the firmware-card reorder mode, but without a toggle button. */
.step-row {
position: relative;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 12px;
margin-bottom: 10px;
background: var(--bg-1);
}
.step-row.is-dragging { opacity: 0.4; }
.step-row.is-drop-target.drop-before {
box-shadow: 0 -3px 0 0 var(--signal), 0 0 24px -6px var(--signal-soft, rgba(0,240,255,0.4));
}
.step-row.is-drop-target.drop-after {
box-shadow: 0 3px 0 0 var(--signal), 0 0 24px -6px var(--signal-soft, rgba(0,240,255,0.4));
}
.step-drag-handle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
background: transparent;
color: var(--text-2);
border: 0;
border-radius: var(--radius-sm, 6px);
cursor: grab;
flex: 0 0 auto;
transition: color .15s ease, background .15s ease;
}
.step-drag-handle:hover { color: var(--text-0); background: var(--bg-2); }
.step-drag-handle:active { cursor: grabbing; }
.step-drag-handle svg { width: 18px; height: 18px; display: block; }
/* === Full-page firmware edit form === */
.fw-edit-card { padding: 32px; margin-top: 14px; position: relative; }
.fw-edit-form .field { margin-bottom: 16px; }
/* Toolbar at the TOP of the form — gives an immediate Save button when the
form opens. Not sticky, so it doesn't cover the image editor while scrolling
(the bottom action bar IS sticky and handles always-on-screen save). */
.fw-edit-form .fw-form-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin: -32px -32px 24px;
padding: 14px 32px;
background: var(--bg-1);
border-bottom: 1px solid var(--line);
}
.fw-edit-form .fw-form-topbar-title {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--text-3);
text-transform: uppercase;
}
.fw-edit-form .fw-form-actions {
position: sticky;
bottom: 0;
z-index: 4;
display: flex;
gap: 10px;
margin: 40px -32px -32px !important;
padding: 22px 32px;
background: rgba(11, 15, 23, 0.88);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-top: 1px solid var(--line);
}
/* SVG icon inside buttons — sits flush with text */
.btn .btn-icon {
width: 14px; height: 14px;
display: inline-block;
vertical-align: -2px;
margin-right: 6px;
}
/* === Admin bar on /firmware/:slug (when admin previews) === */
.admin-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
padding: 14px 18px;
margin-bottom: 22px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
}
.admin-bar-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.admin-pill {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--signal);
background: var(--signal-soft);
border: 1px solid rgba(0,240,255,0.4);
padding: 5px 10px;
border-radius: 999px;
font-weight: 700;
}
/* === Image cropper modal (3:2) === */
.cropper-stage {
position: relative;
width: 100%;
aspect-ratio: 3 / 2;
background:
linear-gradient(45deg, #0a0d14 25%, transparent 25%) 0 0/16px 16px,
linear-gradient(-45deg, #0a0d14 25%, transparent 25%) 0 8px/16px 16px,
linear-gradient(45deg, transparent 75%, #0a0d14 75%) 8px -8px/16px 16px,
linear-gradient(-45deg, transparent 75%, #0a0d14 75%) 8px 0/16px 16px,
var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
overflow: hidden;
user-select: none;
touch-action: none;
}
.cropper-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.cropper-stage canvas:active { cursor: grabbing; }
.cropper-controls {
display: flex; align-items: center; gap: 14px;
margin-top: 14px; padding: 12px 14px;
background: var(--bg-1); border: 1px solid var(--line);
border-radius: var(--radius-sm);
}
.cropper-controls .zoom-label {
font-family: var(--font-mono); font-size: 11px;
color: var(--text-3); letter-spacing: 0.18em;
text-transform: uppercase; flex-shrink: 0;
}
.cropper-controls input[type=range] {
flex: 1; -webkit-appearance: none; appearance: none;
height: 4px; background: var(--bg-3); border-radius: 999px; outline: none;
}
.cropper-controls input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; width: 16px; height: 16px;
background: var(--signal); border-radius: 50%;
cursor: pointer; box-shadow: 0 0 10px var(--signal);
}
.cropper-controls input[type=range]::-moz-range-thumb {
width: 16px; height: 16px; background: var(--signal);
border: none; border-radius: 50%;
cursor: pointer; box-shadow: 0 0 10px var(--signal);
}
.cropper-hint {
font-family: var(--font-mono); font-size: 11px;
color: var(--text-3); margin-top: 8px; letter-spacing: 0.04em;
}
.hero-uploader {
display: flex; gap: 16px; align-items: flex-start;
flex-wrap: wrap; margin-bottom: 10px;
}
.hero-uploader .hero-meta {
flex: 1; min-width: 220px;
display: flex; flex-direction: column; gap: 8px;
}
.fw-top-row {
display: grid;
grid-template-columns: 260px 1fr;
gap: 18px;
align-items: start;
margin-bottom: 14px;
}
.fw-top-left { display: flex; flex-direction: column; }
.fw-top-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fw-top-label {
display: block;
font-family: var(--font-mono); font-size: 11px;
color: var(--text-2); letter-spacing: 0.12em;
text-transform: uppercase; margin-bottom: 8px;
}
.fw-top-left .hero-preview { width: 100%; }
@media (max-width: 640px) {
.fw-top-row { grid-template-columns: 1fr; }
}
.hero-preview {
position: relative; width: 240px; aspect-ratio: 3 / 2;
background: var(--bg-3); border: 1px solid var(--line);
border-radius: var(--radius-sm); overflow: hidden; display: block;
transition: border-color .15s ease, box-shadow .15s ease;
}
.hero-preview:hover { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal-soft); }
.hero-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-preview img[hidden] { display: none; }
.hero-empty {
display: flex; align-items: center; justify-content: center;
height: 100%; color: var(--text-3);
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
}
.hero-actions {
position: absolute; inset: 0;
background: rgba(4, 6, 11, 0.6);
display: flex; align-items: center; justify-content: center; gap: 10px;
opacity: 0; transition: opacity .15s ease;
}
.hero-preview:hover .hero-actions,
.hero-preview:focus-within .hero-actions { opacity: 1; }
.hero-preview.is-empty .hero-act-crop,
.hero-preview.is-empty .hero-act-delete { display: none; }
.hero-act {
width: 40px; height: 40px; border-radius: 10px; border: none;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; color: #fff; padding: 0;
transition: transform .12s ease, filter .12s ease;
}
.hero-act:hover { transform: translateY(-1px); filter: brightness(1.15); }
.hero-act:active { transform: translateY(0); }
.hero-act svg { width: 18px; height: 18px; }
.hero-act-upload { background: #6e64d8; box-shadow: 0 6px 18px -6px rgba(110, 100, 216, 0.7); }
.hero-act-crop { background: #2a78d8; box-shadow: 0 6px 18px -6px rgba(42, 120, 216, 0.7); }
.hero-act-delete { background: #e2454a; box-shadow: 0 6px 18px -6px rgba(226, 69, 74, 0.65); }
/* === Placeholder for missing hero images === */
.img-placeholder[hidden] { display: none; }
.img-placeholder {
position: absolute; inset: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 10px;
background:
repeating-linear-gradient(45deg,
transparent 0 14px,
rgba(0, 240, 255, 0.025) 14px 15px);
color: var(--text-3);
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.2em; text-transform: uppercase;
pointer-events: none;
}
.img-placeholder svg { width: 64px; height: 64px; opacity: 0.45; stroke: var(--signal); }
.img-placeholder span { opacity: 0.7; }
/* When placeholder lives inside the hero-preview we use display:block + flex */
.hero-preview .img-placeholder { background: transparent; }
/* ===== ambient layers ===== */
/* default: minimalistic dot pattern (used on internal pages) */
.bg-grid {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(rgba(0,240,255,0.10) 1px, transparent 1.4px);
background-size: 32px 32px;
background-position: 0 0;
mask-image: radial-gradient(ellipse 95% 90% at 50% 35%, #000 35%, rgba(0,0,0,0.3) 80%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 95% 90% at 50% 35%, #000 35%, rgba(0,0,0,0.3) 80%, transparent 100%);
opacity: 0.7;
}
/* login uses the same minimal dot pattern; ambient layers (radar, rings, planes) handle atmosphere */
/* radar/rings — only when body has .login-page (or any element with .show-radar) */
.bg-radar, .bg-rings { display: none; }
.login-page .bg-radar,
.login-page .bg-rings { display: block; }
.bg-radar {
position: fixed;
top: 50%;
left: 50%;
width: 1400px;
height: 1400px;
transform: translate(-50%, -50%);
z-index: 0;
pointer-events: none;
opacity: 0.22;
background: conic-gradient(from 0deg,
transparent 0deg, transparent 300deg,
rgba(0,240,255,0.04) 320deg,
rgba(0,240,255,0.16) 350deg,
rgba(0,240,255,0.32) 359deg,
transparent 360deg);
border-radius: 50%;
animation: radarSweep 9s linear infinite;
mix-blend-mode: screen;
filter: blur(2px);
}
@keyframes radarSweep {
from { transform: translate(-50%, -50%) rotate(0); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
.bg-rings {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 0;
pointer-events: none;
width: 1400px;
height: 1400px;
border-radius: 50%;
background:
radial-gradient(circle, transparent 99.5px, rgba(0,240,255,0.08) 100px, rgba(0,240,255,0.08) 101px, transparent 102px),
radial-gradient(circle, transparent 199.5px, rgba(0,240,255,0.06) 200px, rgba(0,240,255,0.06) 201px, transparent 202px),
radial-gradient(circle, transparent 339.5px, rgba(0,240,255,0.05) 340px, rgba(0,240,255,0.05) 341px, transparent 342px),
radial-gradient(circle, transparent 519.5px, rgba(0,240,255,0.04) 520px, rgba(0,240,255,0.04) 521px, transparent 522px);
}
/* paper planes (JS-driven) — shown on any page that includes the #planes div */
.planes {
display: block;
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.plane {
position: absolute;
top: 0;
left: 0;
filter: drop-shadow(0 0 8px rgba(0,240,255,0.5));
will-change: transform, filter;
transition: filter .6s ease;
}
.plane svg { width: 100%; height: 100%; display: block; }
/* Hunting follower — vivid blazing red with strong neon glow. */
.plane.alert {
filter:
drop-shadow(0 0 32px rgba(255, 0, 30, 1))
drop-shadow(0 0 18px rgba(255, 30, 50, 1))
drop-shadow(0 0 8px #ff1030)
sepia(1)
saturate(80)
hue-rotate(-30deg)
brightness(1.45)
contrast(1.4);
transition: filter .22s ease;
}
.plane.rocket {
filter: drop-shadow(0 0 4px rgba(255, 119, 51, 0.45));
}
/* central crosshair on login */
.bg-crosshair { display: none; }
.login-page .bg-crosshair {
display: block;
position: fixed;
top: 50%;
left: 50%;
width: 200px; height: 200px;
transform: translate(-50%, -50%);
z-index: 0;
pointer-events: none;
border: 1px solid rgba(0, 240, 255, 0.25);
border-radius: 50%;
animation: crossPulse 3.6s ease-in-out infinite;
}
.login-page .bg-crosshair::before,
.login-page .bg-crosshair::after {
content: '';
position: absolute;
background: rgba(0, 240, 255, 0.45);
box-shadow: 0 0 12px rgba(0, 240, 255, 0.6);
}
.login-page .bg-crosshair::before { top: 50%; left: -16px; right: -16px; height: 1px; }
.login-page .bg-crosshair::after { left: 50%; top: -16px; bottom: -16px; width: 1px; }
@keyframes crossPulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
background:
radial-gradient(ellipse 70% 90% at 50% -10%, rgba(0,240,255,0.12), transparent 60%),
radial-gradient(ellipse 60% 50% at 100% 100%, rgba(91,140,255,0.10), transparent 60%),
radial-gradient(ellipse 100% 60% at 50% 100%, rgba(0,0,0,0.7), transparent 60%);
}
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 2;
background-image: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255,255,255,0.018) 2px, rgba(255,255,255,0.018) 3px);
}
main, .layout, header, footer { position: relative; z-index: 3; }
/* ===== topbar ===== */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 32px;
border-bottom: 1px solid var(--line);
background: rgba(0,0,0,0.7);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
position: sticky;
top: 0;
z-index: 50;
}
.topbar::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(0,240,255,0.5) 30%, rgba(0,240,255,0.7) 50%, rgba(0,240,255,0.5) 70%, transparent 100%);
pointer-events: none;
filter: blur(0.4px);
}
.topbar .brand {
font-family: var(--font-sans);
font-size: 21px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 14px;
color: var(--text-0);
text-shadow: 0 0 18px rgba(0, 240, 255, 0.25);
}
.topbar .brand .accent {
color: var(--signal);
text-shadow: 0 0 14px var(--signal-glow);
}
.topbar .brand .dot {
width: 10px; height: 10px;
border-radius: 50%;
background: var(--signal);
box-shadow: 0 0 12px var(--signal), 0 0 24px var(--signal-glow);
}
.login-page .topbar .brand .dot {
animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.7); }
}
.topbar .meta {
display: flex;
gap: 22px;
align-items: center;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.14em;
color: var(--text-2);
}
.topbar .meta a { color: var(--text-2); text-decoration: none; transition: color .2s; }
.topbar .meta a:hover { color: var(--signal); }
.topbar .user-tag {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.12em;
color: var(--text-0);
padding: 6px 12px;
border: 1px solid var(--line-strong);
background: var(--bg-1);
border-radius: var(--radius-pill);
position: relative;
}
.topbar .user-tag::before {
content: '●';
color: var(--ok);
margin-right: 8px;
font-size: 10px;
text-shadow: 0 0 6px var(--ok);
}
/* ===== layout ===== */
.layout {
max-width: 1280px;
margin: 0 auto;
padding: 56px 32px 100px;
}
/* ===== headings ===== */
h1, h2, h3 { font-weight: 700; letter-spacing: -0.015em; color: var(--text-0); }
.eyebrow {
font-family: var(--font-mono);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--signal);
margin-bottom: 32px;
display: inline-flex;
align-items: center;
gap: 18px;
text-shadow: 0 0 18px var(--signal-glow);
}
.eyebrow::before {
content: '';
width: 56px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--signal));
box-shadow: 0 0 12px var(--signal);
border-radius: 2px;
}
.login-page .eyebrow::before {
animation: eyebrowPulse 2.4s ease-in-out infinite;
}
@keyframes eyebrowPulse {
0%, 100% { width: 32px; opacity: .9; }
50% { width: 48px; opacity: 1; }
}
.page-title {
font-size: clamp(40px, 5vw, 60px);
line-height: 1.05;
margin-bottom: 16px;
font-weight: 700;
letter-spacing: -0.02em;
background: linear-gradient(180deg, #fff 0%, #cfe9ff 70%, var(--signal) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 60px rgba(0, 240, 255, 0.18);
}
.page-subtitle {
font-size: 18px;
color: var(--text-1);
max-width: 720px;
margin-bottom: 48px;
}
/* glitch hover removed entirely — too distracting, replaced with subtle cyan glow on hover */
.glitch { position: relative; display: inline-block; }
.glitch:hover::before, .glitch:hover::after { content: none !important; }
.glitch:hover { transition: filter .25s ease; filter: drop-shadow(0 0 14px rgba(0,240,255,0.35)); }
@keyframes glitch1 { 0%,100%{transform:translate(0)} 25%{transform:translate(-2px,1px)} 75%{transform:translate(2px,-1px)} }
@keyframes glitch2 { 0%,100%{transform:translate(0)} 25%{transform:translate(2px,1px)} 75%{transform:translate(-2px,-1px)} }
/* ===== cards ===== */
.card {
background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
border: 1px solid var(--line);
border-radius: var(--radius);
position: relative;
overflow: hidden;
transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.card::after {
content: '';
position: absolute;
top: 0; left: 12%; right: 12%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,240,255,0.45), transparent);
pointer-events: none;
opacity: 0.7;
transition: opacity .3s ease;
}
.card:hover::after { opacity: 1; }
/* corner brackets removed everywhere — replaced by proper rounded corners */
.corner { display: none !important; }
.card:hover {
border-color: var(--signal);
box-shadow: 0 0 0 1px var(--signal-soft), 0 24px 60px -20px rgba(0,240,255,0.16);
}
/* ===== firmware grid ===== */
.fw-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px;
}
.fw-card {
display: flex;
flex-direction: column;
position: relative;
text-decoration: none;
color: inherit;
cursor: pointer;
min-height: 420px;
}
.fw-card .hero {
position: relative;
aspect-ratio: 3 / 2;
background: var(--bg-3);
border-bottom: 1px solid var(--line);
overflow: hidden;
}
.fw-card .hero::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(0,240,255,0.18) 1px, transparent 1.4px);
background-size: 22px 22px;
opacity: 0.18;
pointer-events: none;
z-index: 1;
transition: opacity .3s ease;
}
.fw-card:hover .hero::before { opacity: 0.45; }
.fw-card .hero img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(1) contrast(1) brightness(1);
transition: filter .5s ease, transform .8s ease;
}
.fw-card:hover .hero img { filter: saturate(1.05) contrast(1.05) brightness(1.03); transform: scale(1.04); }
.fw-card .hero::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.45) 100%);
pointer-events: none;
}
.fw-card .hero { container-type: size; }
/* HUD ticks on hero edges */
.fw-card .hero .ticks {
position: absolute;
inset: 12px;
pointer-events: none;
border: 1px solid rgba(255,255,255,0.06);
}
.fw-card .hero .ticks::before,
.fw-card .hero .ticks::after {
content: '';
position: absolute;
background: rgba(255,255,255,0.4);
}
.fw-card .hero .ticks::before { top: -1px; left: 30%; right: 30%; height: 1px; }
.fw-card .hero .ticks::after { bottom: -1px; left: 30%; right: 30%; height: 1px; }
.fw-card .body {
padding: 24px 26px 26px;
display: flex;
flex-direction: column;
gap: 14px;
flex: 1;
}
.fw-card .label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--signal);
}
.fw-card h2 {
font-size: 24px;
letter-spacing: -0.015em;
font-weight: 700;
}
.fw-card .latest-tag {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-2);
letter-spacing: 0.08em;
margin-top: auto;
padding-top: 12px;
border-top: 1px dashed var(--line);
display: flex;
justify-content: space-between;
align-items: center;
}
.fw-card .latest-tag .v { color: var(--text-0); font-weight: 600; }
.fw-card .open-arrow {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.18em;
color: var(--signal);
margin-top: 6px;
transition: gap .25s ease;
}
.fw-card:hover .open-arrow { gap: 16px; }
/* ===== buttons ===== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 14px 24px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
background: transparent;
color: var(--text-0);
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
cursor: pointer;
text-decoration: none;
transition: all .25s ease;
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 0%, var(--signal-soft) 50%, transparent 100%);
transform: translateX(-100%);
transition: transform .6s ease;
}
.btn:hover::before { transform: translateX(100%); }
.btn:hover {
border-color: var(--signal);
color: var(--signal);
box-shadow: 0 0 0 1px var(--signal-soft), 0 0 28px var(--signal-soft);
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.full { width: 100%; }
.btn.primary {
border-color: var(--signal);
color: var(--signal);
background: linear-gradient(180deg, rgba(0,240,255,0.16), rgba(0,240,255,0.04));
text-shadow: 0 0 12px var(--signal-glow);
box-shadow: 0 0 0 1px var(--signal-soft), 0 0 24px rgba(0,240,255,0.18);
}
.login-page .btn.primary {
animation: btnPulse 2.6s ease-in-out infinite;
}
.btn.primary:hover {
background: linear-gradient(180deg, rgba(0,240,255,0.30), rgba(0,240,255,0.10));
color: #fff;
box-shadow: 0 0 0 1px var(--signal), 0 0 44px var(--signal-glow);
}
@keyframes btnPulse {
0%, 100% { box-shadow: 0 0 0 1px var(--signal-soft), 0 0 18px rgba(0,240,255,0.12); }
50% { box-shadow: 0 0 0 1px var(--signal-soft), 0 0 32px rgba(0,240,255,0.30); }
}
.btn.danger { border-color: rgba(255,91,107,0.4); color: var(--danger); }
.btn.danger:hover { background: rgba(255,91,107,0.12); color: #fff; box-shadow: 0 0 24px rgba(255,91,107,0.4); }
.btn.sm { padding: 9px 14px; font-size: 11px; letter-spacing: 0.16em; gap: 6px; }
.btn.lg {
padding: 20px 40px;
font-size: 17px;
letter-spacing: 0.06em;
gap: 18px;
font-weight: 700;
}
.btn.lg .arrow { font-size: 22px; }
.btn.sm { padding: 9px 14px; font-size: 12px; letter-spacing: 0.05em; }
.btn .arrow { transition: transform .25s ease; }
.btn:hover .arrow { transform: translateX(5px); }
/* ===== forms ===== */
.field {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 22px;
}
.field label {
font-family: var(--font-sans);
font-size: 14px;
letter-spacing: 0.01em;
text-transform: none;
color: var(--text-0);
font-weight: 600;
}
.input, .select, textarea.input {
background: var(--bg-1);
border: 1px solid var(--line);
color: var(--text-0);
padding: 14px 16px;
font-family: var(--font-sans);
font-size: 16px;
font-weight: 500;
line-height: 1.4;
border-radius: var(--radius-sm);
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
width: 100%;
}
textarea.input { resize: vertical; min-height: 110px; line-height: 1.55; }
.input.mono, textarea.input.mono { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.02em; }
/* phone input with sticky +38 prefix */
.phone-input {
display: flex;
align-items: stretch;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
overflow: hidden;
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.phone-input:focus-within {
border-color: var(--signal);
box-shadow: 0 0 0 3px var(--signal-soft), 0 0 24px rgba(0,240,255,0.18);
background: linear-gradient(180deg, rgba(0,240,255,0.04), var(--bg-1));
}
.phone-prefix {
padding: 14px 14px 14px 18px;
color: var(--signal);
font-family: var(--font-mono);
font-size: 16px;
font-weight: 700;
border-right: 1px solid var(--line);
display: flex;
align-items: center;
letter-spacing: 0.04em;
user-select: none;
background: rgba(0,0,0,0.25);
}
.phone-input input {
flex: 1;
background: transparent;
border: none;
outline: none;
padding: 14px 16px;
color: var(--text-0);
font-family: var(--font-mono);
font-size: 16px;
font-weight: 500;
letter-spacing: 0.06em;
width: 100%;
}
.phone-input input::placeholder { color: var(--text-3); letter-spacing: 0.04em; }
.input:focus, .select:focus {
border-color: var(--signal);
box-shadow: 0 0 0 3px var(--signal-soft), 0 0 24px rgba(0,240,255,0.18);
background: linear-gradient(180deg, rgba(0,240,255,0.04), var(--bg-1));
}
.input::placeholder { color: var(--text-3); }
.field .hint { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); letter-spacing: 0.04em; }
.field.err,
.field .err,
.err-msg {
color: rgba(200, 110, 125, 0.85);
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
min-height: 14px;
letter-spacing: 0.01em;
line-height: 1.45;
}
.field.err a,
.field .err a,
.err-msg a { color: rgba(200, 110, 125, 0.95); }
/* ===== Invalid field highlight (muted red) ===== */
.input.invalid,
select.input.invalid,
textarea.input.invalid {
border-color: rgba(200, 90, 110, 0.7) !important;
box-shadow: 0 0 0 2px rgba(200, 90, 110, 0.10), 0 0 10px rgba(200, 90, 110, 0.12) !important;
background: linear-gradient(180deg, rgba(200, 90, 110, 0.03), var(--bg-1)) !important;
animation: invalidShake 0.32s cubic-bezier(.36,.07,.19,.97) both;
}
.input.invalid:focus,
select.input.invalid:focus,
textarea.input.invalid:focus {
border-color: rgba(210, 100, 120, 0.85) !important;
box-shadow: 0 0 0 2px rgba(200, 90, 110, 0.18), 0 0 14px rgba(200, 90, 110, 0.20) !important;
}
.phone-input.invalid {
border-color: rgba(200, 90, 110, 0.7) !important;
box-shadow: 0 0 0 2px rgba(200, 90, 110, 0.10), 0 0 10px rgba(200, 90, 110, 0.12) !important;
background: linear-gradient(180deg, rgba(200, 90, 110, 0.03), var(--bg-1)) !important;
animation: invalidShake 0.32s cubic-bezier(.36,.07,.19,.97) both;
}
.phone-input.invalid .phone-prefix {
border-right-color: rgba(200, 90, 110, 0.30);
color: rgba(210, 110, 125, 0.85);
}
.field.invalid label {
color: rgba(210, 110, 125, 0.90);
}
@keyframes invalidShake {
10%, 90% { transform: translate3d(-1px, 0, 0); }
20%, 80% { transform: translate3d(2px, 0, 0); }
30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
40%, 60% { transform: translate3d(3px, 0, 0); }
}
/* invert native pickers on dark theme + custom bright icon */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { color-scheme: dark; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
background-color: transparent;
width: 22px;
height: 22px;
cursor: pointer;
opacity: 0.95;
filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.65));
transition: filter .2s, transform .2s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.95));
transform: scale(1.1);
}
input[type="file"] { color: var(--text-1); }
input[type="file"]::-webkit-file-upload-button {
background: var(--bg-3);
color: var(--signal);
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
padding: 8px 12px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
margin-right: 12px;
transition: all .2s;
}
input[type="file"]::-webkit-file-upload-button:hover {
border-color: var(--signal);
background: rgba(0,240,255,0.08);
}
/* ===== custom date picker ===== */
.dp-wrap { position: relative; width: 100%; }
.dp-native {
position: absolute !important;
width: 1px; height: 1px;
opacity: 0; pointer-events: none;
clip: rect(0 0 0 0); clip-path: inset(50%);
overflow: hidden;
}
.dp-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 10px 14px;
color: var(--text-1);
font-family: var(--font-mono);
font-size: 14px;
letter-spacing: 0.04em;
cursor: pointer;
text-align: left;
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.dp-trigger:hover { border-color: var(--line-strong); }
.dp-trigger:focus,
.dp-trigger.open {
border-color: var(--signal);
box-shadow: 0 0 0 3px var(--signal-soft);
outline: none;
}
.dp-trigger-val { flex: 1; min-width: 0; }
.dp-trigger-val.placeholder { color: var(--text-3); opacity: 0.45; }
.dp-icon {
width: 18px; height: 18px;
color: var(--signal);
filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.45));
flex-shrink: 0;
margin-left: 12px;
transition: transform .2s ease, filter .2s ease;
}
.dp-trigger:hover .dp-icon { filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.85)); }
.dp-trigger.open .dp-icon { transform: rotate(8deg); }
.dp-popover {
z-index: 10001;
background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
border: 1px solid var(--line-strong);
border-radius: var(--radius);
padding: 12px;
width: 288px;
font-family: var(--font-sans);
box-shadow:
0 0 0 1px rgba(0, 240, 255, 0.06),
0 24px 60px -16px rgba(0, 0, 0, 0.7),
0 0 40px -8px rgba(0, 240, 255, 0.25);
animation: dp-in 140ms ease-out;
}
@keyframes dp-in {
from { opacity: 0; transform: translateY(-4px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.dp-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px;
}
.dp-title {
display: flex; align-items: center; gap: 8px;
background: transparent;
border: 1px solid transparent;
padding: 6px 10px;
border-radius: 8px;
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-1);
cursor: pointer;
transition: all .15s ease;
}
.dp-title:hover { border-color: var(--line); background: var(--bg-3); }
.dp-title .dp-mon { color: var(--signal); }
.dp-title .dp-yr { color: var(--text-2); }
.dp-caret { width: 10px; height: 10px; color: var(--text-3); }
.dp-nav {
background: var(--bg-3);
border: 1px solid var(--line);
color: var(--text-1);
width: 32px; height: 32px;
border-radius: 9px;
font-size: 20px; line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all .15s ease;
}
.dp-nav:hover {
border-color: var(--signal);
color: var(--signal);
box-shadow: 0 0 14px -2px var(--signal-soft);
}
.dp-weekdays {
display: grid; grid-template-columns: repeat(7, 1fr);
margin-bottom: 4px;
}
.dp-weekdays span {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--text-3);
text-align: center;
padding: 6px 0;
}
.dp-grid {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.dp-day {
background: transparent;
border: 1px solid transparent;
color: var(--text-1);
font-family: var(--font-mono);
font-size: 12px;
height: 30px;
border-radius: 7px;
cursor: pointer;
padding: 0;
transition: all .12s ease;
}
.dp-day:hover {
background: var(--bg-3);
border-color: var(--line);
color: var(--signal);
}
.dp-day.muted { color: var(--text-3); opacity: 0.4; }
.dp-day.muted:hover { color: var(--text-2); opacity: 0.85; }
.dp-day.today {
border-color: var(--line-strong);
color: var(--signal);
}
.dp-day.selected,
.dp-day.selected:hover {
background: linear-gradient(180deg, rgba(0, 240, 255, 0.24), rgba(91, 140, 255, 0.18));
border-color: var(--signal);
color: var(--text-0);
box-shadow: 0 0 14px -2px var(--signal-soft), 0 0 0 1px rgba(0, 240, 255, 0.4) inset;
}
.dp-years {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
padding: 4px 0;
}
.dp-year {
background: transparent;
border: 1px solid var(--line);
color: var(--text-1);
font-family: var(--font-mono);
font-size: 13px;
padding: 14px 0;
border-radius: 9px;
cursor: pointer;
transition: all .15s ease;
}
.dp-year:hover { border-color: var(--signal); color: var(--signal); }
.dp-year.selected {
background: linear-gradient(180deg, rgba(0, 240, 255, 0.22), rgba(91, 140, 255, 0.16));
border-color: var(--signal);
color: var(--text-0);
}
.dp-foot {
display: flex; justify-content: space-between;
margin-top: 10px; padding-top: 10px;
border-top: 1px solid var(--line);
}
.dp-foot-btn {
background: transparent; border: none;
color: var(--text-2);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
padding: 6px 10px;
border-radius: 6px;
transition: all .15s ease;
}
.dp-foot-btn:hover { color: var(--signal); background: var(--bg-3); }
.dp-foot-btn.primary { color: var(--signal); }
.dp-foot-btn.primary:hover { box-shadow: 0 0 14px -2px var(--signal-soft); }
/* ===== custom single-select ===== */
.ss-wrap { position: relative; width: 100%; }
.ss-native {
position: absolute !important;
width: 1px; height: 1px;
opacity: 0; pointer-events: none;
clip: rect(0 0 0 0); clip-path: inset(50%);
overflow: hidden;
}
.ss-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background: var(--bg-1);
border: 1px solid var(--line);
color: var(--text-0);
padding: 13px 16px;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 500;
line-height: 1.4;
border-radius: var(--radius-sm);
cursor: pointer;
text-align: left;
gap: 12px;
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ss-trigger:hover { border-color: var(--line-strong); }
.ss-trigger:focus,
.ss-trigger.open {
border-color: var(--signal);
box-shadow: 0 0 0 3px var(--signal-soft);
background: linear-gradient(180deg, rgba(0,240,255,0.04), var(--bg-1));
outline: none;
}
.ss-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
.ss-trigger-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-trigger-val.placeholder { color: var(--text-3); }
.ss-caret {
color: var(--text-2);
flex-shrink: 0;
transition: transform .25s ease, color .15s ease;
}
.ss-trigger.open .ss-caret { transform: rotate(180deg); color: var(--signal); }
.ss-popover {
z-index: 10001;
background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
border: 1px solid var(--line-strong);
border-radius: var(--radius);
padding: 6px;
overflow-y: auto;
box-shadow:
0 0 0 1px rgba(0, 240, 255, 0.05),
0 18px 50px -14px rgba(0, 0, 0, 0.7),
0 0 32px -10px rgba(0, 240, 255, 0.22);
animation: ss-in 140ms ease-out;
}
@keyframes ss-in {
from { opacity: 0; transform: translateY(-4px) scale(0.99); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.ss-option {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
background: transparent;
border: 1px solid transparent;
color: var(--text-1);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
padding: 9px 12px;
border-radius: var(--radius-sm);
cursor: pointer;
text-align: left;
transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.ss-option + .ss-option { margin-top: 2px; }
.ss-option:hover,
.ss-option.focus {
background: var(--bg-3);
color: var(--signal);
}
.ss-option.placeholder { color: var(--text-3); font-style: italic; }
.ss-option.disabled { opacity: 0.4; cursor: not-allowed; }
.ss-option.disabled:hover { background: transparent; color: var(--text-3); }
.ss-option.selected {
background: linear-gradient(180deg, rgba(0, 240, 255, 0.12), rgba(91, 140, 255, 0.08));
border-color: var(--signal-soft);
color: var(--text-0);
}
.ss-opt-check {
color: var(--signal);
opacity: 0;
flex-shrink: 0;
width: 14px;
height: 14px;
filter: drop-shadow(0 0 4px var(--signal-soft));
transition: opacity .15s ease;
}
.ss-option.selected .ss-opt-check { opacity: 1; }
.ss-opt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ===== custom checkbox + radio ===== */
/* Multi-select uses .dd-item with its own hidden-input pattern — skip those. */
input[type="checkbox"]:not(.dd-item input),
input[type="radio"]:not(.dd-item input) {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 18px;
height: 18px;
margin: 0;
border: 1.5px solid var(--line-strong);
background: var(--bg-1);
cursor: pointer;
position: relative;
flex-shrink: 0;
vertical-align: middle;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
input[type="checkbox"]:not(.dd-item input) { border-radius: 5px; }
input[type="radio"]:not(.dd-item input) { border-radius: 50%; }
input[type="checkbox"]:not(.dd-item input):hover,
input[type="radio"]:not(.dd-item input):hover {
border-color: var(--text-2);
background: var(--bg-2);
}
input[type="checkbox"]:not(.dd-item input):focus-visible,
input[type="radio"]:not(.dd-item input):focus-visible {
outline: none;
border-color: var(--signal);
box-shadow: 0 0 0 3px var(--signal-soft);
}
input[type="checkbox"]:not(.dd-item input):checked,
input[type="radio"]:not(.dd-item input):checked {
background-color: var(--signal);
border-color: var(--signal);
box-shadow: 0 0 12px var(--signal-soft);
}
/* Checkmark tick — SVG for crisp, even rendering */
input[type="checkbox"]:not(.dd-item input):checked {
background-image: url("data:image/svg+xml;utf8,");
background-size: 14px 14px;
background-position: center;
background-repeat: no-repeat;
}
/* Radio dot */
input[type="radio"]:not(.dd-item input):checked::after {
content: '';
position: absolute;
inset: 3px;
border-radius: 50%;
background: #001218;
}
input[type="checkbox"]:not(.dd-item input):disabled,
input[type="radio"]:not(.dd-item input):disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* ===== auth screen ===== */
.auth-shell {
min-height: calc(100vh - 80px);
display: flex;
align-items: center;
justify-content: center;
padding: 60px 20px;
}
.auth-card {
width: 100%;
max-width: 460px;
padding: 48px 40px;
background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
border: 1px solid var(--line);
border-radius: var(--radius-lg);
position: relative;
box-shadow: 0 30px 80px -30px rgba(0, 240, 255, 0.18), 0 1px 0 rgba(255,255,255,0.04) inset;
}
/* Technological auth title — HUD style with prefix, mono caps, underline trace */
.auth-title {
font-family: var(--font-mono);
font-size: 30px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-0);
position: relative;
display: inline-block;
padding: 0 0 14px 0;
margin: 0 0 8px 0;
line-height: 1.05;
white-space: nowrap;
}
.auth-title::before {
content: '> ';
color: var(--signal);
text-shadow: 0 0 12px var(--signal-glow);
margin-right: 6px;
animation: caretBlink 1.4s steps(2) infinite;
}
.auth-title::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, var(--signal) 0%, var(--signal) 35%, transparent 100%);
box-shadow: 0 0 10px var(--signal-glow);
border-radius: 1px;
}
@keyframes caretBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
/* ===== detail page ===== */
.back-link {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 600;
color: var(--text-1);
text-decoration: none;
letter-spacing: 0.18em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 14px;
padding: 10px 18px 10px 14px;
margin-bottom: 32px;
margin-left: -14px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
transition: color .2s, background .2s, border-color .2s, gap .2s;
}
.back-link .back-arrow {
font-size: 22px;
font-weight: 400;
line-height: 1;
display: inline-block;
color: var(--signal);
transition: transform .2s ease;
text-shadow: 0 0 10px var(--signal-glow);
}
.back-link:hover {
color: var(--signal);
gap: 18px;
background: rgba(0,240,255,0.07);
border-color: rgba(0,240,255,0.25);
}
.back-link:hover .back-arrow { transform: translateX(-5px); }
.fw-detail-hero {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 36px;
margin-bottom: 56px;
align-items: start;
}
.fw-detail-hero .img-wrap {
position: relative;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius);
aspect-ratio: 3 / 2;
overflow: hidden;
}
.fw-detail-hero .img-wrap img {
width: 100%; height: 100%; object-fit: cover;
filter: saturate(1) contrast(1);
}
.fw-detail-hero .img-wrap::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.30) 100%);
}
.fw-detail-hero .img-wrap .ticks {
position: absolute;
inset: 14px;
pointer-events: none;
border: 1px solid rgba(255,255,255,0.07);
}
.fw-detail-hero .img-wrap .ticks::before,
.fw-detail-hero .img-wrap .ticks::after {
content: ''; position: absolute; background: rgba(255,255,255,0.4);
}
.fw-detail-hero .img-wrap .ticks::before { top: -1px; left: 25%; right: 25%; height: 1px; }
.fw-detail-hero .img-wrap .ticks::after { bottom: -1px; left: 25%; right: 25%; height: 1px; }
.download-block {
background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 32px;
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
}
.download-block .corner { display: none; }
.download-block .ver-line {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 14px;
}
.download-block .ver-line .key {
font-family: var(--font-sans);
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-2);
font-weight: 600;
}
.download-block .ver-line .val {
font-family: var(--font-sans);
font-size: 22px;
color: var(--text-0);
font-weight: 700;
letter-spacing: 0.01em;
}
.download-block .ver-line .val.big {
font-family: 'Orbitron', var(--font-sans);
font-size: 44px;
color: var(--signal);
text-shadow: 0 0 22px var(--signal-glow), 0 0 4px rgba(0,240,255,0.5);
font-weight: 800;
letter-spacing: 0.02em;
line-height: 1;
}
/* install steps */
.steps {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.step {
display: grid;
grid-template-columns: 76px 1fr;
gap: 18px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 22px 24px;
position: relative;
transition: border-color .25s ease, transform .25s ease;
}
.step:hover { border-color: var(--signal); transform: translateX(4px); }
.step .num {
font-family: var(--font-mono);
font-size: 38px;
font-weight: 700;
color: var(--signal);
letter-spacing: 0.02em;
line-height: 1;
text-align: center;
text-shadow: 0 0 14px var(--signal-glow);
}
.step .num::after {
content: '';
display: block;
width: 40px;
height: 2px;
background: var(--signal);
margin: 12px auto 0;
box-shadow: 0 0 8px var(--signal);
border-radius: 1px;
}
.step .text h3 {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 700;
letter-spacing: -0.005em;
margin-bottom: 12px;
color: var(--text-0);
position: relative;
display: inline-flex;
align-items: center;
gap: 12px;
transition: color .25s ease, text-shadow .25s ease;
}
.step .text h3::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--signal);
box-shadow: 0 0 10px var(--signal);
flex: 0 0 auto;
transition: transform .25s ease, box-shadow .25s ease;
}
.step:hover .text h3 {
color: var(--signal);
text-shadow: 0 0 14px var(--signal-glow);
}
.step:hover .text h3::before {
transform: scale(1.4);
box-shadow: 0 0 16px var(--signal-glow);
}
.step .text p {
color: var(--text-1);
font-size: 15px;
line-height: 1.65;
}
.step .text code {
background: var(--bg-3);
color: var(--signal);
padding: 1px 6px;
font-size: 12px;
font-family: var(--font-mono);
border-radius: 4px;
}
/* version table */
.version-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.version-row {
display: grid;
grid-template-columns: 110px 140px 110px 1fr 140px;
align-items: center;
gap: 18px;
padding: 16px 22px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 13px;
transition: border-color .2s ease, background .2s ease;
}
.version-row:hover { border-color: var(--line-strong); background: var(--bg-2); }
.version-row.latest { border-color: var(--signal); background: linear-gradient(90deg, rgba(77,208,255,0.08), var(--bg-1) 60%); }
.version-row .v { font-size: 15px; color: var(--text-0); font-weight: 700; display: flex; align-items: center; gap: 10px; }
.version-row .latest-tag {
font-size: 10px; background: var(--signal); color: #000;
padding: 2px 7px; letter-spacing: 0.16em; font-weight: 700;
border-radius: var(--radius-pill);
}
.version-row .changelog { color: var(--text-2); font-size: 12px; line-height: 1.5; }
.version-row .date, .version-row .size { color: var(--text-1); }
@media (max-width: 880px) {
.fw-detail-hero { grid-template-columns: 1fr; }
/* aspect-ratio handles height on small screens too */
.version-row { grid-template-columns: 1fr 1fr; }
.version-row .changelog { grid-column: 1 / -1; order: 5; }
}
/* ===== admin panel ===== */
.tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--line);
margin-bottom: 32px;
flex-wrap: wrap;
}
.tab {
padding: 16px 26px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
background: transparent;
border: none;
color: var(--text-2);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all .15s ease;
font-weight: 600;
}
.tab:hover { color: var(--text-0); }
.tab.active {
color: var(--signal);
border-color: var(--signal);
text-shadow: 0 0 14px var(--signal-glow);
}
.pending-badge {
display: none;
margin-left: 8px;
background: var(--warn);
color: #000;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
padding: 2px 7px;
border-radius: var(--radius-pill);
letter-spacing: 0.06em;
line-height: 1.4;
vertical-align: middle;
}
.pending-badge.visible { display: inline-block; }
.req-card {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 22px 26px;
margin-bottom: 14px;
}
.req-card.status-pending { border-color: rgba(255,194,102,0.45); }
.req-card.status-approved { border-color: rgba(95,255,160,0.4); }
.req-card.status-rejected { opacity: .6; }
.req-card .head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.req-card .meta-row {
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px 28px; margin: 14px 0 18px;
}
.req-card .meta-row .k {
color: var(--text-2);
font-family: var(--font-sans);
text-transform: none;
letter-spacing: 0.01em;
font-size: 13px;
font-weight: 500;
margin-bottom: 4px;
}
.req-card .meta-row .v {
color: var(--text-0);
font-family: var(--font-sans);
font-size: 16px;
font-weight: 600;
word-break: break-word;
line-height: 1.35;
}
.req-card .meta-row .v.mono { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.02em; }
.req-card .photos { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.req-card .photos img {
width: 96px; height: 96px; object-fit: cover;
border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
transition: transform .2s ease, border-color .2s;
}
.req-card .photos img:hover { transform: scale(1.04); border-color: var(--signal); }
.req-card .comment { color: var(--text-1); font-size: 14px; line-height: 1.55; padding: 12px 14px; background: var(--bg-1); border-radius: var(--radius-sm); border: 1px solid var(--line); white-space: pre-line; }
.req-card .creds {
margin-top: 12px; padding: 12px 16px;
background: rgba(95,255,160,0.06); border: 1px solid rgba(95,255,160,0.4);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
}
.req-card .creds code { font-size: 16px; color: var(--ok); font-weight: 700; letter-spacing: 0.05em; }
.lightbox {
position: fixed; inset: 0; background: rgba(0,0,0,0.92);
z-index: 1000; display: none; align-items: center; justify-content: center;
padding: 32px; cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); border: 1px solid var(--line-strong); }
/* Global tooltip (custom, instant) */
.js-tip {
position: fixed;
background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
color: var(--text-0);
padding: 10px 14px;
border-radius: var(--radius-sm);
border: 1px solid var(--line-strong);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1.45;
z-index: 9999;
pointer-events: none;
max-width: 280px;
text-align: center;
box-shadow: 0 12px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,240,255,0.05);
opacity: 0;
transform: translateY(4px);
transition: opacity .14s ease, transform .14s ease;
}
.js-tip.visible { opacity: 1; transform: translateY(0); }
.js-tip::after {
content: '';
position: absolute;
left: 50%;
bottom: -5px;
width: 8px; height: 8px;
background: var(--bg-2);
border-right: 1px solid var(--line-strong);
border-bottom: 1px solid var(--line-strong);
transform: translateX(-50%) rotate(45deg);
}
.js-tip.below::after { top: -5px; bottom: auto; border: none; border-left: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong); background: var(--bg-3); }
/* Password input with custom animated SVG eye toggle */
.pwd-input-wrap { position: relative; }
.pwd-input-wrap .input { padding-right: 56px; }
.pwd-toggle {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: 1px solid transparent;
width: 42px;
height: 42px;
border-radius: var(--radius-sm);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background .15s ease, border-color .15s ease;
}
.pwd-toggle:hover { border-color: rgba(0,240,255,0.30); background: rgba(0,240,255,0.06); }
.pwd-toggle:hover .eye-icon { filter: drop-shadow(0 0 8px rgba(0,240,255,0.55)); }
/* === Eye icon (Feather-style: eye / eye-off) === */
.eye-icon {
width: 22px;
height: 22px;
color: var(--signal);
filter: drop-shadow(0 0 4px rgba(0,240,255,0.20));
transition: filter .2s ease;
}
.eye-icon .eye-on { display: none; }
.eye-icon .eye-off { display: block; }
.is-visible .eye-icon .eye-on { display: block; }
.is-visible .eye-icon .eye-off { display: none; }
.is-visible .eye-icon { filter: drop-shadow(0 0 6px var(--signal-glow)); }
.is-visible.icon-btn { border-color: var(--signal); background: rgba(0,240,255,0.06); }
/* === Copy icon with check transition === */
.copy-icon {
width: 18px;
height: 18px;
overflow: visible;
}
.copy-icon .copy-back, .copy-icon .copy-front {
fill: none;
stroke: var(--text-2);
stroke-width: 1.6;
stroke-linejoin: round;
transition: opacity .25s ease, transform .3s cubic-bezier(.4, 0, .2, 1), stroke .2s ease;
transform-origin: center;
transform-box: fill-box;
}
.icon-btn:hover .copy-icon .copy-back,
.icon-btn:hover .copy-icon .copy-front { stroke: var(--signal); }
.copy-icon .copy-check {
fill: none;
stroke: var(--ok);
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 26;
stroke-dashoffset: 26;
filter: drop-shadow(0 0 8px var(--ok));
transition: stroke-dashoffset .42s cubic-bezier(.5, 0, .2, 1);
}
.icon-btn.copied .copy-icon .copy-back,
.icon-btn.copied .copy-icon .copy-front {
opacity: 0;
transform: scale(0.4);
}
.icon-btn.copied .copy-icon .copy-check { stroke-dashoffset: 0; }
.icon-btn.copied {
border-color: rgba(77,255,163,0.45) !important;
background: rgba(77,255,163,0.08) !important;
}
/* ============ Page loader ============ */
.page-loader {
position: fixed;
inset: 0;
z-index: 99999;
background: radial-gradient(ellipse at 50% 40%, #0b0f17 0%, #04060b 70%, #000 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 28px;
transition: opacity .35s ease, visibility .35s ease;
}
.page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.page-loader .spinner {
width: 70px;
height: 70px;
border-radius: 50%;
border: 2px solid rgba(0,240,255,0.12);
border-top-color: var(--signal);
border-right-color: var(--signal);
animation: pl-spin 0.9s linear infinite;
box-shadow: 0 0 28px rgba(0,240,255,0.25), inset 0 0 12px rgba(0,240,255,0.05);
position: relative;
}
.page-loader .spinner::after {
content: '';
position: absolute;
inset: 12px;
border-radius: 50%;
border: 1px dashed rgba(0,240,255,0.35);
animation: pl-spin 4s linear infinite reverse;
}
@keyframes pl-spin { to { transform: rotate(360deg); } }
.page-loader .label {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--signal);
text-shadow: 0 0 12px var(--signal-glow);
display: flex;
gap: 6px;
align-items: center;
}
.page-loader .label::before {
content: '';
width: 8px; height: 8px;
border-radius: 50%;
background: var(--signal);
box-shadow: 0 0 10px var(--signal);
animation: pl-pulse 1s ease-in-out infinite;
}
@keyframes pl-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.page-loader .progress {
width: 220px;
height: 2px;
background: rgba(0,240,255,0.08);
border-radius: 2px;
overflow: hidden;
position: relative;
}
.page-loader .progress::before {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 40%;
background: linear-gradient(90deg, transparent, var(--signal), transparent);
animation: pl-bar 1.4s ease-in-out infinite;
box-shadow: 0 0 12px var(--signal);
}
@keyframes pl-bar { 0% { left: -40%; } 100% { left: 100%; } }
/* password cell with mask + eye + copy */
.pwd-cell { display: inline-flex; align-items: center; gap: 8px; }
.pwd-mask {
font-family: var(--font-mono);
font-size: 14px;
color: var(--signal);
letter-spacing: 0.08em;
min-width: 90px;
user-select: text;
}
/* universal small icon button */
.icon-btn {
background: transparent;
border: 1px solid var(--line);
color: var(--text-2);
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.icon-btn:hover { border-color: var(--signal); color: var(--signal); background: rgba(0,240,255,0.06); }
.icon-btn .eye-icon { width: 18px; height: 18px; }
/* status dot — colorful active indicator */
.status-dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
border-radius: 50%;
font-size: 16px;
font-weight: 700;
font-family: var(--font-mono);
}
.status-dot.ok {
background: rgba(95,255,160,0.18);
color: var(--ok);
box-shadow: 0 0 0 1px rgba(95,255,160,0.5), 0 0 12px rgba(95,255,160,0.3);
}
.status-dot.off {
background: rgba(255,77,109,0.14);
color: var(--danger);
box-shadow: 0 0 0 1px rgba(255,77,109,0.4);
}
.admin-section { display: none; }
.admin-section.active { display: block; animation: sectionIn .3s ease; }
@keyframes sectionIn { from {opacity:0; transform:translateY(8px)} to {opacity:1; transform:translateY(0)} }
table.data {
width: 100%;
border-collapse: collapse;
font-family: var(--font-mono);
font-size: 13px;
}
table.data th {
text-align: left;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
color: var(--text-2);
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.18em;
font-size: 11px;
}
table.data td {
padding: 12px 14px;
border-bottom: 1px solid var(--line);
color: var(--text-1);
vertical-align: middle;
height: 56px; /* every row gets the same height */
}
table.data tr:hover td { background: var(--bg-2); }
table.data .ev {
display: inline-flex;
align-items: center;
padding: 6px 12px;
font-size: 11px;
letter-spacing: 0.06em;
font-weight: 700;
border-radius: var(--radius-pill);
min-height: 30px;
}
.ev-login_ok, .ev-admin_login_ok { background: rgba(95,255,160,0.14); color: var(--ok); }
.ev-login_fail, .ev-admin_login_fail { background: rgba(255,91,107,0.14); color: var(--danger); }
.ev-download_fw, .ev-download_instr { background: rgba(77,208,255,0.14); color: var(--signal); }
.ev-admin_action { background: rgba(255,184,107,0.14); color: var(--warn); }
.ev-logout { background: rgba(170,177,191,0.08); color: var(--text-2); }
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 16px;
margin-bottom: 28px;
}
.stat-tile {
padding: 22px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius);
position: relative;
overflow: hidden;
}
.stat-tile::before {
content: '';
position: absolute;
inset: 0 auto auto 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, var(--signal), transparent 70%);
opacity: 0.4;
}
.stat-tile .k {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--text-2);
font-weight: 600;
}
.stat-tile .v {
font-family: var(--font-mono);
font-size: 34px;
font-weight: 700;
color: var(--text-0);
margin-top: 8px;
}
.bar-chart { display: flex; flex-direction: column; gap: 8px; }
.bar-row {
display: grid;
grid-template-columns: 220px 1fr 60px;
align-items: center;
gap: 14px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-1);
}
.bar {
background: var(--bg-2);
height: 22px;
border: 1px solid var(--line);
border-radius: var(--radius-pill);
position: relative;
overflow: hidden;
}
.bar .fill {
position: absolute;
inset: 0 auto 0 0;
background: linear-gradient(90deg, var(--signal-soft), var(--signal));
transition: width .5s ease;
box-shadow: 0 0 12px var(--signal-soft);
}
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* In data tables — keep action buttons on a single line so row heights stay equal */
table.data td.row-actions,
table.data .row-actions {
flex-wrap: nowrap;
justify-content: flex-end;
white-space: nowrap;
}
.toolbar { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; margin-bottom: 22px; }
/* Logs toolbar / event chips */
.logs-toolbar {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 18px 20px;
margin-bottom: 4px;
}
.logs-toolbar-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-2);
font-weight: 600;
margin-bottom: 10px;
}
.logs-toolbar-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; }
/* ============ Multi-select dropdown ============ */
.dd-multi { position: relative; }
.dd-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background: var(--bg-1);
border: 1px solid var(--line);
color: var(--text-0);
padding: 13px 16px;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 500;
border-radius: var(--radius-sm);
cursor: pointer;
text-align: left;
gap: 12px;
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.dd-trigger:hover { border-color: var(--line-strong); }
.dd-multi.open .dd-trigger,
.dd-multi.has-selection .dd-trigger {
border-color: var(--signal);
box-shadow: 0 0 0 1px var(--signal-soft);
background: linear-gradient(180deg, rgba(0,240,255,0.04), var(--bg-1));
}
.dd-trigger .dd-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-trigger .dd-arrow {
display: inline-flex;
color: var(--text-2);
transition: transform .25s ease, color .15s ease;
}
.dd-multi.open .dd-trigger .dd-arrow { transform: rotate(180deg); color: var(--signal); }
.dd-panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 80;
background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
border: 1px solid var(--line-strong);
border-radius: var(--radius);
box-shadow: 0 18px 40px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,240,255,0.05);
padding: 8px;
display: none;
max-height: 360px;
overflow: auto;
animation: ddIn .18s ease;
}
@keyframes ddIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.dd-multi.open .dd-panel { display: block; }
.dd-panel-head {
display: flex;
gap: 6px;
padding: 6px 6px 8px;
border-bottom: 1px solid var(--line);
margin-bottom: 6px;
}
.dd-mini {
flex: 1;
background: transparent;
border: 1px solid var(--line);
color: var(--text-2);
padding: 6px 10px;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
border-radius: var(--radius-sm);
cursor: pointer;
transition: all .15s ease;
}
.dd-mini:hover { border-color: var(--signal); color: var(--signal); background: rgba(0,240,255,0.05); }
.dd-list { display: flex; flex-direction: column; gap: 2px; }
.dd-item {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 10px;
border-radius: var(--radius-sm);
cursor: pointer;
user-select: none;
transition: background .12s ease;
}
.dd-item:hover { background: var(--bg-3); }
.dd-item input { position: absolute; opacity: 0; pointer-events: none; }
.dd-item .dd-check {
width: 18px;
height: 18px;
border: 1.5px solid var(--line-strong);
border-radius: 5px;
flex: 0 0 auto;
position: relative;
transition: border-color .15s ease, background .15s ease;
}
.dd-item:hover .dd-check { border-color: var(--text-2); }
.dd-item.checked .dd-check {
background: var(--signal);
border-color: var(--signal);
box-shadow: 0 0 8px var(--signal-soft);
}
.dd-item.checked .dd-check::after {
content: '';
position: absolute;
left: 4px; top: 1px;
width: 6px; height: 11px;
border-right: 2px solid #001218;
border-bottom: 2px solid #001218;
transform: rotate(45deg);
}
.dd-item .ev {
display: inline-block;
padding: 4px 10px;
border-radius: var(--radius-pill);
font-family: var(--font-sans);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
}
dialog.modal {
background: var(--bg-1);
border: 1px solid var(--line-strong);
color: var(--text-0);
padding: 36px;
border-radius: var(--radius);
width: min(560px, 96vw);
max-height: 92vh;
overflow: auto;
/* Center using inset:0 + margin:auto — works reliably across browsers for