/* ============================================================================ VECTRAS · Intelligence / Search Unit Design system: "Dithered" — deep navy ground, mint-teal signal, dot-pattern shading, crisp 1px edges. Dark-first; a light variant is available through (the toggle in the header remembers the choice). Type display Space Grotesk — titles, brand, big numbers body Instrument Sans — everything you read mono JetBrains Mono — labels, data, inputs, tables Every colour on the page comes from a token below. Legacy names used by the PHP templates (--amber, --panel, --line2, …) are aliased at the bottom of the token block so nothing in the pages had to change. ========================================================================== */ :root { /* ground */ --bg: #0A1220; --bg-2: #0C1626; --bg-glass: rgba(10, 18, 32, .82); --surface: #0F1A2B; --surface-2: #142338; --surface-3: #1A2D47; --line: #1C2D46; --line-2: #2A4265; /* ink */ --text: #E6EFF4; --text-2: #C3D2DE; --muted: #8AA0B5; --faint: #5F7590; /* signal */ --accent: #5EEAD4; --accent-2: #2DD4BF; --accent-3: #14B8A6; --accent-ink: #04201C; --accent-text: #7DF0DD; --accent-dim: #3FB3A3; --accent-soft: rgba(94, 234, 212, .10); --accent-line: rgba(94, 234, 212, .34); --accent-glow: rgba(94, 234, 212, .22); /* semantic (separate from the accent on purpose) */ --ok: #4ADE80; --ok-soft: rgba(74, 222, 128, .10); --ok-line: rgba(74, 222, 128, .34); --ok-ink: #052E16; --warn: #FBBF24; --warn-soft: rgba(251, 191, 36, .12); --warn-line: rgba(251, 191, 36, .34); --danger: #FB7185; --danger-soft: rgba(251, 113, 133, .10); --danger-line: rgba(251, 113, 133, .36); --info: #7DD3FC; --info-line: rgba(125, 211, 252, .34); --violet: #C4B5FD; --violet-line: rgba(196, 181, 253, .34); --rose: #FDA4AF; --rose-line: rgba(253, 164, 175, .34); /* dither dots */ --dot: rgba(94, 234, 212, .30); --dot-strong: rgba(94, 234, 212, .55); --dot-dim: rgba(138, 160, 181, .22); --dot-ink: rgba(4, 32, 28, .28); /* type */ --display: 'Space Grotesk', 'Instrument Sans', system-ui, sans-serif; --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* shape + motion */ --r-sm: 5px; --r: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; --ease: cubic-bezier(.4, 0, .2, 1); --shadow-sm: 0 1px 0 rgba(0, 0, 0, .28); --shadow: 0 14px 34px -14px rgba(0, 0, 0, .65); --shadow-lg: 0 32px 80px -24px rgba(0, 0, 0, .75); --grain-opacity: .055; /* legacy aliases used inside the PHP templates */ --panel: var(--surface); --panel2: var(--surface-2); --line2: var(--line-2); --amber: var(--accent-text); --amber2: var(--accent); --dim: var(--accent-dim); --ghost: var(--accent-soft); --radius: var(--r); color-scheme: dark; } :root[data-theme="light"] { --bg: #F2F5F8; --bg-2: #E9EEF3; --bg-glass: rgba(242, 245, 248, .84); --surface: #FFFFFF; --surface-2: #F4F7FA; --surface-3: #E9EEF3; --line: #D8E1EA; --line-2: #BFCCDA; --text: #0B1726; --text-2: #2A3B4E; --muted: #5B6F84; --faint: #8194A8; --accent: #0F766E; --accent-2: #0D9488; --accent-3: #14B8A6; --accent-ink: #FFFFFF; --accent-text: #0F766E; --accent-dim: #2A8F85; --accent-soft: rgba(15, 118, 110, .08); --accent-line: rgba(15, 118, 110, .34); --accent-glow: rgba(15, 118, 110, .18); --ok: #15803D; --ok-soft: rgba(21, 128, 61, .09); --ok-line: rgba(21, 128, 61, .34); --ok-ink: #FFFFFF; --warn: #B45309; --warn-soft: rgba(180, 83, 9, .10); --warn-line: rgba(180, 83, 9, .34); --danger: #BE123C; --danger-soft: rgba(190, 18, 60, .08); --danger-line: rgba(190, 18, 60, .34); --info: #0369A1; --info-line: rgba(3, 105, 161, .34); --violet: #6D28D9; --violet-line: rgba(109, 40, 217, .34); --rose: #BE185D; --rose-line: rgba(190, 24, 93, .34); --dot: rgba(15, 118, 110, .26); --dot-strong: rgba(15, 118, 110, .45); --dot-dim: rgba(91, 111, 132, .22); --dot-ink: rgba(255, 255, 255, .28); --shadow-sm: 0 1px 0 rgba(11, 23, 38, .04); --shadow: 0 14px 34px -16px rgba(11, 23, 38, .22); --shadow-lg: 0 32px 80px -30px rgba(11, 23, 38, .30); --grain-opacity: .035; color-scheme: light; } /* ---------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } html, body { margin: 0; } body { background: var(--bg); color: var(--text); font: 400 15px/1.6 var(--sans); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; animation: pagein .32s var(--ease) both; } @keyframes pagein { from { opacity: 0; } to { opacity: 1; } } /* film grain — one rasterised tile, fixed, never intercepts the pointer */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--grain-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* atmosphere — teal glow + two dot layers that thin out toward the page */ .atmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(1100px 520px at 88% -14%, var(--accent-glow) 0%, transparent 62%); } .atmos::before, .atmos::after { content: ""; position: absolute; inset: 0; background-repeat: repeat; opacity: .8; } .atmos::before { background-image: radial-gradient(var(--dot) .8px, transparent 1px); background-size: 4px 4px; -webkit-mask-image: radial-gradient(760px 340px at 92% -8%, #000 0%, transparent 70%); mask-image: radial-gradient(760px 340px at 92% -8%, #000 0%, transparent 70%); } .atmos::after { background-image: radial-gradient(var(--dot) .8px, transparent 1px); background-size: 8px 8px; background-position: 2px 2px; -webkit-mask-image: radial-gradient(1200px 560px at 90% -10%, #000 20%, transparent 74%); mask-image: radial-gradient(1200px 560px at 90% -10%, #000 20%, transparent 74%); } [hidden] { display: none !important; } a { color: inherit; text-decoration: none; } b, strong { font-weight: 600; } code { font-family: var(--mono); font-size: .92em; color: var(--accent-text); } mark { background: var(--accent-soft); color: var(--accent-text); font-weight: 500; border-radius: 3px; padding: 0 3px; box-shadow: inset 0 -1px 0 var(--accent-line); } ::selection { background: var(--accent); color: var(--accent-ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } * { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 3px solid var(--bg); } *::-webkit-scrollbar-track { background: transparent; } /* ---------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 28px; height: 62px; padding: 0 24px; background: var(--bg-glass); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--line); transition: box-shadow .25s var(--ease), border-color .25s var(--ease); } .top.scrolled { box-shadow: 0 1px 0 var(--line-2), 0 16px 40px -20px rgba(0, 0, 0, .55); } .brand { display: inline-flex; align-items: center; font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .18em; color: var(--text); flex: none; } .brand b { color: var(--accent-text); font-weight: 700; } /* the mark: a teal tile that dithers into the corner */ .mark { position: relative; width: 26px; height: 26px; border-radius: 6px; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%); box-shadow: 0 0 0 1px var(--accent-line), 0 0 22px var(--accent-glow); flex: none; } .brand .mark { margin-right: 12px; } .mark::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: radial-gradient(var(--dot-ink) .9px, transparent 1.05px); background-size: 4px 4px; -webkit-mask-image: linear-gradient(135deg, transparent 28%, #000 100%); mask-image: linear-gradient(135deg, transparent 28%, #000 100%); } .mark::after { content: ""; position: absolute; left: 7px; top: 7px; width: 6px; height: 6px; border-radius: 1.5px; background: var(--accent-ink); opacity: .9; } .mark.lg { width: 46px; height: 46px; border-radius: 11px; } .mark.lg::after { left: 12px; top: 12px; width: 10px; height: 10px; border-radius: 2.5px; } .top nav { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; } .top nav a { position: relative; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; white-space: nowrap; transition: color .2s var(--ease); } .top nav a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px; background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: left center; transition: transform .28s var(--ease); } .top nav a:hover { color: var(--text); } .top nav a:hover::after, .top nav a.on::after { transform: scaleX(1); } .top nav a.on { color: var(--accent-text); } .actions { display: flex; align-items: center; gap: 14px; flex: none; margin-left: auto; } .who { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; color: var(--muted); padding: 6px 12px 6px 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); } .dotpulse { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 var(--ok-line); animation: pulse 2.4s var(--ease) infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--ok-line); } 70% { box-shadow: 0 0 0 7px rgba(0, 0, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } } .out { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); transition: color .2s; } .out:hover { color: var(--danger); } .tbtn, .navtoggle { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--muted); cursor: pointer; padding: 0; transition: color .2s, border-color .2s, background .2s, transform .12s; } .tbtn:hover, .navtoggle:hover { color: var(--accent-text); border-color: var(--accent-line); } .tbtn:active, .navtoggle:active { transform: scale(.96); } .tbtn svg { width: 17px; height: 17px; } .tbtn .ico-moon { display: none; } :root[data-theme="light"] .tbtn .ico-sun { display: none; } :root[data-theme="light"] .tbtn .ico-moon { display: block; } .navtoggle { display: none; position: relative; } .navtoggle span { position: absolute; left: 9px; right: 9px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s var(--ease), opacity .2s, top .25s var(--ease); } .navtoggle span:nth-child(1) { top: 11px; } .navtoggle span:nth-child(2) { top: 17px; } .navtoggle span:nth-child(3) { top: 23px; } .top.open .navtoggle span:nth-child(1) { top: 17px; transform: rotate(45deg); } .top.open .navtoggle span:nth-child(2) { opacity: 0; } .top.open .navtoggle span:nth-child(3) { top: 17px; transform: rotate(-45deg); } /* ---------------------------------------------------------------------------- Page frame -------------------------------------------------------------------------- */ .wrap { position: relative; z-index: 1; max-width: 1140px; margin: 0 auto; padding: 40px 24px 64px; } .foot { position: relative; z-index: 1; max-width: 1140px; margin: 0 auto; padding: 26px 24px 52px; display: flex; align-items: center; gap: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); white-space: nowrap; } .foot::after { content: ""; flex: 1; height: 7px; background-image: radial-gradient(var(--dot-dim) 1px, transparent 1.2px); background-size: 5px 5px; -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, transparent 100%); } .kick { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--accent-dim); } .kick::before { content: ""; width: 22px; height: 7px; background-image: radial-gradient(var(--accent) 1px, transparent 1.2px); background-size: 4px 4px; } .page-h { margin: 8px 0 6px; font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; } .page-s { margin: 0 0 28px; color: var(--muted); font-size: 15.5px; line-height: 1.6; } .page-s b { color: var(--accent-text); font-weight: 500; } /* ---------------------------------------------------------------------------- Stat tiles -------------------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; } .stat { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px 18px; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); } .stat:hover { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: var(--shadow); } /* dithered shade in the corner: dense grid fades first, sparse grid carries further */ .stat::before, .stat::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(var(--dot) .85px, transparent 1.05px); } .stat::before { background-size: 4px 4px; -webkit-mask-image: radial-gradient(150px 110px at 100% 0%, #000 0%, transparent 62%); mask-image: radial-gradient(150px 110px at 100% 0%, #000 0%, transparent 62%); } .stat::after { background-size: 8px 8px; background-position: 2px 2px; -webkit-mask-image: radial-gradient(260px 190px at 100% 0%, #000 10%, transparent 72%); mask-image: radial-gradient(260px 190px at 100% 0%, #000 10%, transparent 72%); } .stat .n { position: relative; z-index: 1; font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.1; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; } .stat .l { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; margin-top: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .stat .l::before { content: ""; width: 6px; height: 6px; border-radius: 1.5px; background: var(--accent); flex: none; } /* ---------------------------------------------------------------------------- Cards + layout helpers -------------------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow-sm); } .card h3 { margin: 0 0 18px; display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 15.5px; letter-spacing: .005em; } .card h3::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); flex: none; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .row > .inp { flex: 1; min-width: 0; } .spread { justify-content: space-between; } /* ---------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; } label b { color: var(--accent-text); font-weight: 500; } .inp, select, textarea { width: 100%; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r); color: var(--text); padding: 11px 13px; font-family: var(--mono); font-size: 13.5px; line-height: 1.5; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); } .inp::placeholder, textarea::placeholder { color: var(--faint); } .inp:hover, select:hover, textarea:hover { border-color: var(--accent-line); } .inp:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--bg); } .inp[readonly] { color: var(--text-2); } textarea.inp { resize: vertical; line-height: 1.55; } select { -webkit-appearance: none; appearance: none; padding-right: 34px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } select[multiple] { padding: 6px; height: auto; background-image: none; } select[multiple] option { padding: 6px 8px; border-radius: 4px; } select[multiple] option:checked { background: var(--accent-soft); color: var(--accent-text); } .inp.big { font-size: 17px; padding: 15px 16px; letter-spacing: .06em; } .opts { display: flex; flex-wrap: wrap; gap: 18px 20px; align-items: flex-end; margin-bottom: 6px; } .opt { flex: 0 0 auto; } .seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: var(--bg-2); } .seg label { margin: 0; cursor: pointer; } .seg input { position: absolute; opacity: 0; pointer-events: none; } .seg span { display: block; padding: 10px 15px; font-family: var(--mono); font-size: 12px; color: var(--muted); border-right: 1px solid var(--line); transition: background .2s, color .2s, box-shadow .2s; } .seg label:last-child span { border-right: none; } .seg label:hover span { color: var(--text); } .seg input:checked + span { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 -2px 0 var(--accent); } .seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; } .check { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; color: var(--muted); cursor: pointer; text-transform: none; letter-spacing: .02em; padding: 9px 0; } .check:hover { color: var(--text); } .check input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; } /* ---------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: var(--accent-ink); border: 1px solid transparent; border-radius: var(--r); padding: 10px 18px; font-family: var(--sans); font-weight: 600; font-size: 13.5px; letter-spacing: .01em; line-height: 1.3; cursor: pointer; white-space: nowrap; text-decoration: none; overflow: hidden; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), transform .12s var(--ease); } .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(var(--dot-ink) .7px, transparent .85px); background-size: 3px 3px; -webkit-mask-image: linear-gradient(90deg, transparent 45%, #000 100%); mask-image: linear-gradient(90deg, transparent 45%, #000 100%); opacity: .9; } .btn:hover { background: var(--accent-2); box-shadow: 0 8px 22px -10px var(--accent-glow); } .btn:active { transform: scale(.98); } .btn.ghost { background: transparent; color: var(--accent-text); border-color: var(--line-2); } .btn.ghost::before { display: none; } .btn.ghost:hover { background: var(--accent-soft); border-color: var(--accent-line); box-shadow: none; } .btn.danger { background: transparent; color: var(--danger); border-color: var(--danger-line); padding: 6px 12px; font-size: 12px; border-radius: var(--r-sm); } .btn.danger::before { display: none; } .btn.danger:hover { background: var(--danger-soft); border-color: var(--danger); box-shadow: none; } .btn.sm { padding: 6px 12px; font-size: 12px; border-radius: var(--r-sm); } .btn.copied { background: var(--ok); border-color: var(--ok); color: var(--ok-ink); } .btn[disabled] { opacity: .5; cursor: default; transform: none; } .copybtns { display: flex; gap: 8px; } /* ---------------------------------------------------------------------------- Tables -------------------------------------------------------------------------- */ table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; } th { text-align: left; color: var(--muted); font-weight: 400; letter-spacing: .14em; font-size: 10px; text-transform: uppercase; padding: 10px 14px; border-bottom: 1px solid var(--line-2); } td { padding: 12px 14px; border-bottom: 1px dotted var(--line-2); vertical-align: middle; transition: background .15s; } tbody tr:last-child td, tr:last-child td { border-bottom: none; } tr:hover td { background: var(--surface-2); } td.f { color: var(--muted); word-break: break-word; } td.ln { color: var(--muted); white-space: nowrap; } td.match { word-break: break-all; color: var(--text-2); } td .btn + .btn, td .btn + form, td form + .btn { margin-left: 6px; } .tag { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-dim); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 2px 7px; line-height: 1.6; } .meta { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 16px; line-height: 1.7; } .meta b { color: var(--accent-text); font-weight: 500; } .empty { text-align: center; padding: 46px 20px; color: var(--muted); font-family: var(--sans); font-size: 14px; } .empty::before { content: ""; display: block; width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 50%; border: 1px dashed var(--line-2); background-image: radial-gradient(var(--dot-dim) 1px, transparent 1.2px); background-size: 4px 4px; } .empty .big { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--text); margin-bottom: 6px; } .empty b { color: var(--text); } .notice { position: relative; border-radius: var(--r); padding: 12px 16px 12px 18px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; margin-bottom: 20px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text-2); } .notice::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; border-radius: var(--r) 0 0 var(--r); background: var(--line-2); } .notice b { color: var(--text); } .notice.ok { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); } .notice.ok::before { background: var(--ok); } .notice.err { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); } .notice.err::before { background: var(--danger); } /* ---------------------------------------------------------------------------- Upload drop zone -------------------------------------------------------------------------- */ .drop { display: block; position: relative; border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); padding: 38px 20px; text-align: center; cursor: pointer; background: var(--bg-2); transition: border-color .2s var(--ease), background .2s var(--ease); overflow: hidden; } .drop::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(var(--dot) .85px, transparent 1.05px); background-size: 5px 5px; opacity: 0; -webkit-mask-image: radial-gradient(60% 90% at 50% 100%, #000 0%, transparent 100%); mask-image: radial-gradient(60% 90% at 50% 100%, #000 0%, transparent 100%); transition: opacity .25s var(--ease); } .drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); } .drop:hover::before, .drop.over::before { opacity: 1; } .drop .di { position: relative; font-family: var(--display); font-weight: 600; font-size: 15.5px; color: var(--text); } .drop .ds { position: relative; font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 7px; letter-spacing: .08em; text-transform: uppercase; } .drop input { display: none; } .chosen { position: relative; font-family: var(--mono); font-size: 12px; color: var(--accent-text); margin-top: 12px; } .chosen:empty { display: none; } /* ---------------------------------------------------------------------------- Dashboard quick actions -------------------------------------------------------------------------- */ .quick { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .qa { display: flex; align-items: center; gap: 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); } .qa:hover { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: var(--shadow); } .qa .qi { width: 42px; height: 42px; flex: none; border-radius: 10px; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--mono); font-size: 18px; box-shadow: 0 10px 22px -12px var(--accent-glow); } .qa .qi svg { width: 19px; height: 19px; } .qa .qt { font-family: var(--display); font-weight: 600; font-size: 14.5px; } .qa .qd { font-family: var(--sans); font-size: 12.5px; color: var(--muted); } /* ---------------------------------------------------------------------------- Sign-in -------------------------------------------------------------------------- */ .login-wrap { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: 24px; isolation: isolate; } .login-wrap::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(720px 420px at 50% 32%, var(--accent-glow) 0%, transparent 62%); } .login-wrap::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(var(--dot) .9px, transparent 1.1px); background-size: 6px 6px; -webkit-mask-image: radial-gradient(560px 380px at 50% 34%, #000 0%, transparent 72%); mask-image: radial-gradient(560px 380px at 50% 34%, #000 0%, transparent 72%); } .login-card { position: relative; width: 100%; max-width: 384px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-xl); padding: 40px 34px 30px; text-align: center; box-shadow: var(--shadow-lg); overflow: hidden; } .login-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-3)); } .login-card .mark { margin: 0 auto 18px; } .login-card .lb { font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: .2em; color: var(--text); line-height: 1; } .login-card .lb b { color: var(--accent-text); font-weight: 700; } .login-card .lt { font-family: var(--mono); font-size: 10px; letter-spacing: .26em; color: var(--muted); text-transform: uppercase; margin: 12px 0 30px; } .login-card label { text-align: left; } .login-card .inp { margin-bottom: 16px; } .login-card .btn { width: 100%; margin-top: 4px; padding: 12px 18px; font-size: 14px; } .login-card .lf { font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: .14em; text-transform: uppercase; margin-top: 24px; } .login-card .notice { text-align: left; } /* ---------------------------------------------------------------------------- Tools grid -------------------------------------------------------------------------- */ .toolcard { display: block; position: relative; color: inherit; text-decoration: none; overflow: hidden; transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); } .toolcard::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(var(--dot) .85px, transparent 1.05px); background-size: 5px 5px; opacity: 0; -webkit-mask-image: radial-gradient(260px 200px at 100% 100%, #000 0%, transparent 70%); mask-image: radial-gradient(260px 200px at 100% 100%, #000 0%, transparent 70%); transition: opacity .3s var(--ease); } .toolcard:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: var(--shadow); } .toolcard:hover::after { opacity: 1; } .toolcard h3::before { display: none; } .toolcard h3 { font-size: 17px; } .ticon { width: 46px; height: 46px; border-radius: 11px; background: var(--accent-soft); border: 1px solid var(--accent-line); display: grid; place-items: center; color: var(--accent-text); font-size: 20px; margin-bottom: 16px; } .ticon svg { width: 22px; height: 22px; } .tdesc { color: var(--muted); font-size: 14px; margin: 10px 0 14px; line-height: 1.6; } .tdesc b { color: var(--text); } /* ---------------------------------------------------------------------------- BIN tools -------------------------------------------------------------------------- */ .subnav { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-bottom: 26px; padding: 4px; max-width: 100%; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; } .subnav a { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--muted); padding: 7px 13px; border-radius: 7px; transition: color .2s, background .2s, box-shadow .2s; } .subnav a:hover { color: var(--text); } .subnav a.on { color: var(--accent-text); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 0 rgba(0, 0, 0, .2); } .binsearch { border-color: var(--line-2); } .privacy { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 12px; display: flex; align-items: center; gap: 8px; } .privacy .lock { filter: grayscale(1) brightness(1.3); font-size: 12px; } .samples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px dotted var(--line-2); } .slabel { font-family: var(--mono); font-size: 10.5px; color: var(--faint); letter-spacing: .12em; text-transform: uppercase; } .scode { font-family: var(--mono); font-size: 12px; color: var(--accent-text); border: 1px solid var(--line-2); background: var(--bg-2); border-radius: var(--r-sm); padding: 5px 11px; letter-spacing: .1em; transition: background .15s, border-color .15s, transform .12s; } .scode:hover { background: var(--accent-soft); border-color: var(--accent-line); } .scode:active { transform: scale(.97); } .binhit { position: relative; overflow: hidden; border-color: var(--accent-line); } .binhit::before, .binhit::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(var(--dot) .85px, transparent 1.05px); } .binhit::before { background-size: 4px 4px; -webkit-mask-image: radial-gradient(220px 160px at 100% 0%, #000 0%, transparent 62%); mask-image: radial-gradient(220px 160px at 100% 0%, #000 0%, transparent 62%); } .binhit::after { background-size: 8px 8px; background-position: 2px 2px; -webkit-mask-image: radial-gradient(420px 260px at 100% 0%, #000 10%, transparent 72%); mask-image: radial-gradient(420px 260px at 100% 0%, #000 10%, transparent 72%); } .binhit > * { position: relative; z-index: 1; } .binhit-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px dotted var(--line-2); margin-bottom: 18px; } .binlabel { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; margin-bottom: 5px; } .binissuer { font-family: var(--display); font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; } .binbin { font-family: var(--mono); font-size: 14px; color: var(--accent-dim); letter-spacing: .22em; margin-top: 6px; } .country { font-family: var(--mono); font-size: 14px; color: var(--accent-text); border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: var(--r); padding: 8px 14px; letter-spacing: .12em; white-space: nowrap; display: inline-block; } .binmeta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 20px; } .binmeta > div { padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); } .binmeta b { display: block; font-family: var(--mono); font-size: 13px; color: var(--text); margin-top: 2px; word-break: break-word; } .luhn { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; border-radius: var(--r-sm); padding: 4px 9px; margin-top: 8px; } .luhn.ok { color: var(--ok); border: 1px solid var(--ok-line); background: var(--ok-soft); } .luhn.bad { color: var(--danger); border: 1px solid var(--danger-line); background: var(--danger-soft); } .binfilterwrap { display: grid; grid-template-columns: 250px 1fr; gap: 20px; align-items: start; margin-bottom: 20px; } .binfilters { align-self: start; } .binfilters h3 { margin-bottom: 14px; } .binfilters label { margin-top: 14px; } .binfilters label:first-of-type { margin-top: 0; } .binfilters .inp, .binfilters select { margin-bottom: 0; } .binfilters .fcount { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 18px; padding-top: 14px; border-top: 1px dotted var(--line-2); } .binfilters .fcount b { color: var(--accent-text); } .binranges { margin-bottom: 0; } /* grabbed-records panel */ .grabwrap { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: start; } .grabcats { display: flex; flex-direction: column; gap: 8px; } .grabcat { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 13px; font-family: var(--mono); font-size: 12px; color: var(--muted); cursor: pointer; text-align: left; letter-spacing: .04em; transition: border-color .2s, color .2s, background .2s; } .grabcat:hover { border-color: var(--line-2); color: var(--text); } .grabcat.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); } .grabcat span { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 1px 8px; font-size: 11px; color: var(--muted); min-width: 24px; text-align: center; } .grabcat.on span { color: var(--accent-text); border-color: var(--accent-line); } .gtag { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; border-radius: var(--r-sm); padding: 2px 8px; border: 1px solid var(--line-2); color: var(--muted); } .gtag-cards { color: var(--accent-text); border-color: var(--accent-line); } .gtag-emails { color: var(--info); border-color: var(--info-line); } .gtag-domains { color: var(--violet); border-color: var(--violet-line); } .gtag-ips { color: var(--ok); border-color: var(--ok-line); } .gtag-phones { color: var(--rose); border-color: var(--rose-line); } .gtag-secure { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-soft); } .gtag-other { color: var(--muted); } /* context menu + provider popup */ .ctxmenu { position: fixed; z-index: 200; min-width: 224px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; padding: 6px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 2px; } .ctxmenu[hidden] { display: none; } .ctxmenu button { background: none; border: none; text-align: left; color: var(--text); font-family: var(--mono); font-size: 12px; padding: 8px 11px; border-radius: 6px; cursor: pointer; letter-spacing: .02em; } .ctxmenu button:hover { background: var(--accent-soft); color: var(--accent-text); } .ctxmenu .sep { height: 1px; background: var(--line); margin: 4px 6px; } .provload-bar { height: 4px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; } .provload-fill { height: 100%; background: linear-gradient(90deg, var(--accent-3), var(--accent)); width: 0%; transition: width .25s ease; } .provpop { position: fixed; inset: 0; z-index: 120; background: rgba(3, 8, 16, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; } .provpop[hidden] { display: none; } .provpop-box { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-xl); padding: 24px; width: min(560px, 100%); box-shadow: var(--shadow-lg); } .provpop-box > .row > b { font-family: var(--display); font-size: 15.5px; } /* stats bars */ .barrow { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; } .barlabel { width: 132px; flex: none; font-family: var(--mono); font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bartrack { flex: 1; height: 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; } .barfill { position: relative; height: 100%; background: linear-gradient(90deg, var(--accent-3), var(--accent)); border-radius: 2px 0 0 2px; } .barfill::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--dot-ink) .8px, transparent .95px); background-size: 3px 3px; -webkit-mask-image: linear-gradient(90deg, transparent 25%, #000 100%); mask-image: linear-gradient(90deg, transparent 25%, #000 100%); } .barval { width: 66px; flex: none; text-align: right; font-family: var(--mono); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } /* generator output */ #genout { color: var(--accent-text); letter-spacing: .06em; } .disc { background: var(--accent-soft); border: 1px solid var(--accent-line); border-left: 3px solid var(--accent); border-radius: var(--r-lg); padding: 16px 20px; margin-bottom: 20px; } .disc h4 { margin: 0 0 11px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); } .disc ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; } .disc li { font-family: var(--sans); font-size: 13px; color: var(--muted); line-height: 1.55; } .disc li b { color: var(--text); font-weight: 500; } /* ---------------------------------------------------------------------------- Toast -------------------------------------------------------------------------- */ .toast { position: fixed; top: 76px; right: 22px; z-index: 60; display: flex; align-items: flex-start; gap: 12px; max-width: 380px; background: var(--surface); border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: var(--r-lg); padding: 14px 15px; box-shadow: var(--shadow-lg); animation: toastin .3s var(--ease); } .toast.hide { opacity: 0; transform: translateX(14px); transition: .4s var(--ease); } .toast-ico { color: var(--accent-text); font-size: 16px; line-height: 1.3; flex: none; } .toast-body { display: flex; flex-direction: column; gap: 3px; } .toast-body b { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); } .toast-body span { font-family: var(--sans); font-size: 13px; color: var(--text-2); line-height: 1.5; } .toast-x { background: none; border: none; color: var(--faint); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; flex: none; } .toast-x:hover { color: var(--text); } @keyframes toastin { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } /* ---------------------------------------------------------------------------- Chat + private lines -------------------------------------------------------------------------- */ .chatcard { padding: 0; overflow: hidden; } .chatlog { height: 56vh; min-height: 340px; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; } .chatempty { color: var(--muted); font-family: var(--mono); font-size: 12px; text-align: center; margin: auto; } .msg { max-width: 76%; align-self: flex-start; } .msg.mine { align-self: flex-end; text-align: right; } .msgmeta { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .08em; margin-bottom: 4px; } .msgbody { display: inline-block; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px 12px 12px 3px; padding: 9px 13px; font-size: 14px; line-height: 1.5; word-break: break-word; text-align: left; } .msg.mine .msgbody { background: var(--accent-soft); border-color: var(--accent-line); border-radius: 12px 12px 3px 12px; } .chatform { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--line); background: var(--bg-2); } .chatform .inp { flex: 1; min-width: 0; } .sndbtn { flex: none; padding: 10px 13px; } .sndbtn.off { opacity: .42; text-decoration: line-through; } .pmwrap { display: grid; grid-template-columns: 264px 1fr; gap: 18px; align-items: start; } .pmlist { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; max-height: 64vh; overflow-y: auto; } .pmpeer { display: block; padding: 13px 15px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; transition: background .15s, border-color .15s; } .pmpeer:last-child { border-bottom: none; } .pmpeer:hover { background: var(--surface-2); } .pmpeer.on { background: var(--accent-soft); border-left-color: var(--accent); } .pmpeer-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .pmpeer-top b { font-family: var(--display); font-size: 14px; font-weight: 600; color: var(--text); } .pmpeer-top span { font-family: var(--mono); font-size: 10px; color: var(--faint); flex: none; } .pmpeer-sub { font-family: var(--sans); font-size: 12.5px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pmpane { margin: 0; } .pmhead { padding: 14px 18px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--muted); background: var(--bg-2); } .pmhead b { color: var(--accent-text); } .pmhead .chan-note { color: var(--faint); font-size: 11px; margin-left: 8px; } .chan { cursor: pointer; } /* ---------------------------------------------------------------------------- Notes widget -------------------------------------------------------------------------- */ .notesw { position: fixed; right: 20px; bottom: 20px; z-index: 70; font-family: var(--sans); } .notesw-launch { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-ink); border: none; border-radius: var(--r-pill); padding: 11px 18px; font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .65), 0 0 0 1px var(--accent-line); transition: background .2s, transform .12s, color .2s, box-shadow .2s; } .notesw-launch:hover { background: var(--accent-2); } .notesw-launch:active { transform: scale(.97); } .notesw-launch.on { background: var(--surface-2); color: var(--accent-text); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .65), 0 0 0 1px var(--line-2); } .notesw-panel { position: absolute; right: 0; bottom: 54px; width: 350px; max-height: 70vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; animation: notesin .22s var(--ease); } @keyframes notesin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .notesw-panel[hidden] { display: none; } .notesw-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; border-bottom: 1px solid var(--line); background: var(--bg-2); } .notesw-head b { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); } .notesw-x { background: none; border: none; color: var(--faint); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; } .notesw-x:hover { color: var(--text); } .notesw-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 70px; } .notesw-empty { color: var(--muted); font-family: var(--mono); font-size: 12px; text-align: center; padding: 18px 8px; } .notesw-note { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; } .notesw-note-top { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--muted); margin-bottom: 5px; } .notesw-note-top b { color: var(--accent-text); font-weight: 500; } .notesw-note-h { font-family: var(--display); font-weight: 600; font-size: 13px; margin-bottom: 3px; } .notesw-note-b { font-size: 13.5px; line-height: 1.55; color: var(--text); word-break: break-word; } .notesw-note-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; } .notesw-share-line { font-family: var(--mono); font-size: 10px; color: var(--faint); } .notesw-del { background: none; border: none; color: var(--danger); font-family: var(--mono); font-size: 10px; cursor: pointer; text-transform: uppercase; letter-spacing: .08em; } .notesw-del:hover { text-decoration: underline; } .notesw-form { border-top: 1px solid var(--line); padding: 12px; background: var(--bg-2); display: flex; flex-direction: column; gap: 9px; } .notesw-form textarea { resize: vertical; min-height: 44px; } .notesw-share { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .notesw-hint { font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: .04em; } .notesw-chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 11px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 8px; cursor: pointer; margin: 0; text-transform: none; letter-spacing: 0; } .notesw-chip input { accent-color: var(--accent); width: 13px; height: 13px; } .notesw-chip:hover { border-color: var(--line-2); color: var(--text); } .notesw-actions { display: flex; justify-content: flex-end; } /* ---------------------------------------------------------------------------- Reveal on scroll (only applied by JS to elements below the fold) -------------------------------------------------------------------------- */ .rv { opacity: 0; transform: translateY(14px); } .rv.in { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .55s var(--ease); } /* ---------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .wrap { padding: 32px 20px 56px; } .foot { padding-left: 20px; padding-right: 20px; } } @media (max-width: 820px) { .top { gap: 14px; padding: 0 16px; } .navtoggle { display: inline-grid; } .top nav { position: absolute; left: 0; right: 0; top: 62px; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 12px 14px; background: var(--surface); border-bottom: 1px solid var(--line-2); box-shadow: var(--shadow); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .22s var(--ease), transform .22s var(--ease); } .top.open nav { opacity: 1; transform: none; pointer-events: auto; } .top nav a { padding: 12px 12px; font-size: 12px; border-radius: var(--r); } .top nav a::after { display: none; } .top nav a.on { background: var(--accent-soft); } .top nav a:hover { background: var(--surface-2); } .stats { grid-template-columns: repeat(2, 1fr); } .grid2, .quick, .binfilterwrap, .grabwrap, .pmwrap { grid-template-columns: 1fr; } .grabcats { flex-direction: row; flex-wrap: wrap; } .grabcats .inp { flex: 1 1 100%; } .pmlist { max-height: none; } .binmeta { grid-template-columns: repeat(2, 1fr); } .page-h { font-size: 29px; } } @media (max-width: 640px) { .wrap { padding: 26px 16px 48px; } .card { padding: 18px; } .who .uname { display: none; } .who { padding: 6px 9px; } .actions { gap: 10px; } .toast { top: auto; bottom: 78px; right: 12px; left: 12px; max-width: none; } .notesw { right: 14px; bottom: 14px; } .notesw-panel { width: calc(100vw - 28px); } .card > table { display: block; overflow-x: auto; white-space: nowrap; } .card > table td.f, .card > table td.match { white-space: normal; min-width: 160px; } .binhit-top { flex-direction: column; } .binhit-top > div:last-child { text-align: left !important; } .foot { flex-direction: column; align-items: flex-start; white-space: normal; } .foot::after { width: 100%; flex: none; } } @media (max-width: 480px) { .stats { grid-template-columns: 1fr; } .page-h { font-size: 26px; } .out { display: none; } .binmeta { grid-template-columns: 1fr; } .opts .opt { flex: 1 1 100%; } .opts .opt[style*="width"] { width: auto !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .rv { opacity: 1; transform: none; } .dotpulse { animation: none; } } /* ---------------------------------------------------------------------------- AI assistant (agent.php) -------------------------------------------------------------------------- */ .agent-settings { padding: 0; overflow: hidden; margin-bottom: 20px; } .agent-settings > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; cursor: pointer; list-style: none; font-family: var(--display); font-weight: 600; font-size: 15px; } .agent-settings > summary::-webkit-details-marker { display: none; } .agent-settings > summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s var(--ease); flex: none; } .agent-settings[open] > summary::after { transform: rotate(-135deg); } .agent-settings-title { display: flex; align-items: center; gap: 10px; } .agent-settings-title::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); } .agent-status { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--muted); } .agent-status.on { color: var(--ok); border-color: var(--ok-line); background: var(--ok-soft); } .agent-status.off { color: var(--warn); border-color: var(--warn-line); background: var(--warn-soft); } .agent-status.unset { color: var(--muted); } .agent-settings-body { padding: 4px 22px 22px; border-top: 1px solid var(--line); } .agent-settings-body .meta code, .agent-settings-body code { color: var(--accent-text); } .agent-chat { display: flex; flex-direction: column; } .agent-log { height: 52vh; min-height: 320px; } .msg.agent-msg { max-width: 82%; } .agent-msg .msgbody { background: var(--surface-2); border-color: var(--line); } .agent-msg .msgbody p { margin: 0 0 10px; } .agent-msg .msgbody p:last-child { margin-bottom: 0; } .agent-msg .msgbody { font-size: 14px; line-height: 1.62; } .agent-cite { font-family: var(--mono); font-size: 11.5px; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-sm); padding: 0 5px; white-space: nowrap; } .agent-pre { font-family: var(--mono); font-size: 12.5px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r); padding: 10px 12px; margin: 8px 0; overflow-x: auto; white-space: pre; } .agent-err { color: var(--danger); margin: 0; } .agent-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dotted var(--line-2); } .agent-tool { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--muted); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 10px; } .agent-tool::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; } .agent-suggest { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line); background: var(--bg-2); } .agent-suggest .scode { cursor: pointer; letter-spacing: .02em; } .agent-typing { display: inline-flex; align-items: center; gap: 4px; padding: 3px 2px; } .agent-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-dim); animation: agentblink 1.2s var(--ease) infinite both; } .agent-typing span:nth-child(2) { animation-delay: .18s; } .agent-typing span:nth-child(3) { animation-delay: .36s; } @keyframes agentblink { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } @media (prefers-reduced-motion: reduce) { .agent-typing span { animation: none; } } @media (max-width: 640px) { .msg.agent-msg { max-width: 92%; } .agent-log { height: 56vh; } } /* ---------------------------------------------------------------------------- ARIA floating widget (present on every page, bottom-left) Reuses .msg / .msgbody / .agent-* for the conversation bubbles. -------------------------------------------------------------------------- */ .ariaw { position: fixed; left: 20px; bottom: 20px; z-index: 70; font-family: var(--sans); } .ariaw-launch { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%); color: var(--accent-ink); border: none; border-radius: var(--r-pill); padding: 11px 18px 11px 14px; font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .65), 0 0 0 1px var(--accent-line), 0 0 26px -6px var(--accent-glow); transition: transform .12s var(--ease), box-shadow .2s, filter .2s; } .ariaw-launch svg { width: 17px; height: 17px; } .ariaw-launch:hover { filter: brightness(1.05); } .ariaw-launch:active { transform: scale(.97); } .ariaw-launch.on { background: var(--surface-2); color: var(--accent-text); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .65), 0 0 0 1px var(--line-2); } .ariaw-panel { position: absolute; left: 0; bottom: 54px; width: 390px; height: 560px; max-height: calc(100vh - 96px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; animation: notesin .22s var(--ease); } .ariaw-panel[hidden] { display: none; } .ariaw-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; border-bottom: 1px solid var(--line); background: var(--bg-2); } .ariaw-head-title { display: flex; align-items: center; gap: 8px; } .ariaw-head-title b { font-family: var(--display); font-size: 14px; letter-spacing: .06em; color: var(--text); } .ariaw-sub { font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: .06em; } .ariaw-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); flex: none; } .ariaw-log { flex: 1; overflow-y: auto; padding: 16px 15px; display: flex; flex-direction: column; gap: 12px; } .ariaw-log .msg { max-width: 90%; } .ariaw-log .msg.mine { max-width: 82%; } .ariaw-log .msgbody { font-size: 13.5px; } .ariaw-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--bg-2); } .ariaw-suggest .scode { cursor: pointer; font-size: 11px; padding: 4px 9px; letter-spacing: .01em; } .ariaw-form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); background: var(--surface); } .ariaw-form .inp { flex: 1; min-width: 0; } .ariaw-form .sndbtn { flex: none; padding: 10px 15px; font-size: 15px; } @media (max-width: 640px) { .ariaw { left: 14px; right: 14px; bottom: 14px; } .ariaw-panel { left: 0; width: calc(100vw - 28px); height: calc(100vh - 92px); } } /* ARIA confirmation card (proposed sensitive action) */ .aria-confirm { border: 1px solid var(--warn-line); background: var(--warn-soft); } .aria-confirm-h { font-family: var(--display); font-weight: 600; font-size: 12.5px; color: var(--warn); letter-spacing: .02em; margin-bottom: 4px; } .aria-confirm-h.ok { color: var(--ok); } .aria-confirm-h.err { color: var(--danger); } .aria-confirm-b { font-size: 13px; color: var(--text); margin-bottom: 10px; } .aria-confirm-act { display: flex; gap: 8px; }