* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --bg: #050505;
    --surface: #151515;
    --surface2: #1f1f1f;
    --surface3: #292929;
    --border: #2c2c2c;
    --text: #f6f6f6;
    --muted: #a4a4a4;
    --dim: #707070;
    --danger: #ef5350;
    --ok: #66bb6a;
    --blue: #6db7f5;
    --green: #7cc884;
    --amber: #f4aa35;
    --pink: #d78be8;
}
html {
    min-height: 100%;
    background:
        radial-gradient(54vmax 54vmax at 88% 8%, rgba(255,255,255,.055) 0%, transparent 58%),
        linear-gradient(145deg, #030303 0%, #111 54%, #050505 100%);
    overscroll-behavior-y: none;
}
body {
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    background:
        radial-gradient(54vmax 54vmax at 88% 8%, rgba(255,255,255,.055) 0%, transparent 58%),
        radial-gradient(48vmax 48vmax at 8% -10%, rgba(255,255,255,.085) 0%, transparent 55%),
        radial-gradient(42vmax 42vmax at 94% 28%, rgba(70,122,130,.10) 0%, transparent 60%),
        linear-gradient(145deg, #030303 0%, #111 54%, #050505 100%);
    background-attachment: fixed;
    color: var(--text);
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body::before,
body::after {
    content: "";
    position: fixed;
    border-radius: 50%;
    filter: blur(88px);
    pointer-events: none;
    z-index: 0;
}
body::before {
    width: 58vmax;
    height: 58vmax;
    top: -26vmax;
    left: -20vmax;
    background: radial-gradient(circle at 32% 32%, rgba(255,255,255,.11) 0%, rgba(255,255,255,0) 62%);
}
body::after {
    width: 54vmax;
    height: 54vmax;
    right: -20vmax;
    bottom: -24vmax;
    background: radial-gradient(circle at 58% 58%, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 62%);
}
body > * {
    position: relative;
    z-index: 1;
}
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.22) rgba(255,255,255,.035);
}
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-track {
    background: rgba(255,255,255,.035);
    border-radius: 999px;
}
*::-webkit-scrollbar-thumb {
    background:
        linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.16));
    border: 2px solid rgba(12,12,12,.92);
    border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.24));
}
*::-webkit-scrollbar-corner {
    background: transparent;
}
.grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
button, input, select { font: inherit; }
.muted { color: var(--muted); }
.eyebrow {
    display: block;
    color: var(--dim);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 3px;
}
.brand-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    box-shadow: 0 14px 42px rgba(0,0,0,.42);
}
.brand-logo.small { width: 38px; height: 38px; border-radius: 10px; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px; }
.login-card {
    width: min(980px, 100%);
    background: rgba(18,18,18,.96);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 24px 34px;
    box-shadow: 0 24px 90px rgba(0,0,0,.42);
}
.login-brand {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 0;
}
.login-brand .brand-logo {
    width: 72px;
    height: 72px;
    border-radius: 18px;
}
h1 {
    font-size: 30px;
    line-height: 1.08;
    margin-bottom: 0;
    font-weight: 600;
    letter-spacing: 0;
}
.login-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 42px;
    align-items: center;
    margin-top: 0;
}
.login-copy { grid-column: 1; }
.login-copy h2 {
    font-size: 27px;
    line-height: 1.28;
    margin-bottom: 24px;
    font-weight: 600;
    letter-spacing: 0;
}
.login-copy ol {
    display: grid;
    gap: 19px;
    margin: 0;
    padding-left: 22px;
    color: #d0d0d0;
    font-size: 15px;
    line-height: 1.65;
}
.login-copy li::marker {
    color: #f3f3f3;
    font-weight: 600;
}
.login-note {
    margin-top: 26px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.65;
}
.login-qr-panel {
    grid-column: 2;
    display: grid;
    justify-items: center;
    gap: 12px;
}
.qr-box {
    position: relative;
    margin: 0;
    width: min(306px, 100%);
    min-width: 306px;
    height: 306px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(145deg, #1b1b1b, #101010);
    border: 1px solid #303030;
    padding: 18px;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 18px 44px rgba(0,0,0,.28);
}
.qr-box.loading #qrCode,
.qr-box.expired #qrCode { display: none; }
.qr-box.loading .qr-loading,
.qr-box.expired .qr-loading { display: flex; }
#qrCode {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 10px;
    padding: 4px;
}
#qrCode img, #qrCode canvas {
    display: block;
    width: 262px;
    height: 262px;
    max-width: 100%;
    max-height: 100%;
    image-rendering: pixelated;
}
#qrCode .qr-center-logo {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    border-radius: 12px;
    padding: 6px;
    background: #fff;
    box-shadow: 0 0 0 4px #fff, 0 10px 22px rgba(0,0,0,.18);
    image-rendering: auto;
    z-index: 2;
}
.qr-fallback {
    color: #111;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    word-break: break-all;
}
.qr-loading {
    position: absolute;
    inset: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    color: #151515;
    background: #fff;
    border-radius: 10px;
    font-weight: 700;
    text-align: center;
    overflow: hidden;
}
.qr-loading::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, transparent 36%, rgba(0,0,0,.055) 48%, transparent 60%, transparent 100%);
    transform: translateX(-100%);
    animation: qrShimmer 1.35s ease-in-out infinite;
}
.qr-pulse {
    position: relative;
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
}
.qr-pulse::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,0,0,.16) 0%, rgba(0,0,0,.06) 44%, rgba(0,0,0,0) 70%);
    animation: qrPulse 1.15s ease-in-out infinite;
}
.qr-pulse::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 3px solid rgba(0,0,0,.10);
    border-top-color: rgba(0,0,0,.58);
    animation: qrSpin .85s linear infinite;
}
.qr-loading img {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    z-index: 1;
}
@keyframes qrPulse {
    0%, 100% { transform: scale(.9); opacity: .35; }
    50% { transform: scale(1.08); opacity: .9; }
}
@keyframes qrSpin {
    to { transform: rotate(360deg); }
}
@keyframes qrShimmer {
    0% { transform: translateX(-100%); }
    55%, 100% { transform: translateX(100%); }
}
.state-text { color: var(--muted); min-height: 22px; margin: 12px 0; text-align: center; }
.state-text:empty { display: none; }
.btn {
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    border-radius: 11px;
    padding: 10px 14px;
    cursor: pointer;
}
.btn:hover { background: var(--surface3); }
.btn.primary { background: #fff; color: #050505; border-color: #fff; font-weight: 600; width: 100%; }
.qr-refresh {
    display: none;
    width: 72px;
    height: 72px;
    min-width: 0;
    margin-top: 8px;
    border-radius: 999px;
    padding: 0;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.qr-box.expired .qr-refresh { display: inline-flex; justify-content: center; }
.qr-refresh img {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
}
.qr-box.expired .qr-pulse { display: none; }
.qr-box.expired .qr-loading { gap: 14px; }
.btn.ghost { background: transparent; color: var(--muted); }
.btn.small { padding: 7px 10px; font-size: 12px; }
.btn.result-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 44px;
    padding: 0 18px;
    margin: 0 0 14px;
    border-radius: 999px;
    font-weight: 650;
}
.btn.result-action-block {
    width: 100%;
    min-height: 44px;
    margin: 14px 0 18px;
    font-weight: 800;
}
.dashboard-shell { display: none; min-height: 100vh; }
.is-auth .login-shell { display: none; }
.is-auth .dashboard-shell { display: block; }
.login-success-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    background:
        radial-gradient(38vmax 38vmax at 50% 42%, rgba(255,255,255,.08), transparent 62%),
        rgba(3,3,3,.88);
    backdrop-filter: blur(16px);
}
.login-success-card {
    display: grid;
    justify-items: center;
    gap: 18px;
    min-width: 260px;
    padding: 34px 36px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 24px;
    background: rgba(18,18,18,.94);
    box-shadow: 0 26px 90px rgba(0,0,0,.46);
    animation: successCardIn .42s cubic-bezier(.2,.8,.2,1) both;
}
.login-success-card strong {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
}
.login-success-sub {
    display: none;
    max-width: 320px;
    margin: -8px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
}
.login-success-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
}
.login-success-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(102,187,106,.16);
    animation: successPulse 1.05s ease-out infinite;
}
.login-success-icon img {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    z-index: 1;
    box-shadow: 0 14px 42px rgba(0,0,0,.42);
}
.login-success-icon span {
    position: absolute;
    right: 2px;
    bottom: 4px;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #66bb6a;
    box-shadow: 0 0 0 5px rgba(18,18,18,.96);
}
.login-success-icon span::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 7px;
    width: 11px;
    height: 7px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg);
}
.login-success-overlay.logout .login-success-icon::before {
    background: rgba(255,183,77,.16);
}
.login-success-overlay.logout .login-success-icon span {
    background: #ffb74d;
}
.login-success-overlay.logout .login-success-icon span::after {
    left: 13px;
    top: 7px;
    width: 4px;
    height: 14px;
    border: 0;
    border-radius: 4px;
    background: #111;
    transform: none;
}
.login-success-overlay.logout .login-success-sub {
    display: block;
}
.pin-overlay {
    position: fixed;
    inset: 0;
    z-index: 180;
    display: grid;
    place-items: center;
    padding: 28px;
    background:
        radial-gradient(42vmax 42vmax at 50% 32%, rgba(255,255,255,.075), transparent 62%),
        rgba(3,3,3,.90);
    backdrop-filter: blur(18px);
}
.pin-card {
    width: min(390px, 100%);
    display: grid;
    justify-items: center;
    padding: 34px 30px 30px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 28px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.045), rgba(16,16,16,.97)),
        rgba(18,18,18,.95);
    box-shadow: 0 28px 100px rgba(0,0,0,.54);
    animation: successCardIn .32s cubic-bezier(.2,.8,.2,1) both;
}
.pin-logo {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    margin-bottom: 18px;
    box-shadow: 0 14px 42px rgba(0,0,0,.42);
}
.pin-card h2 {
    margin: 0 0 7px;
    font-size: 28px;
    font-weight: 750;
    letter-spacing: 0;
}
.pin-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
}
.pin-dots {
    display: flex;
    gap: 12px;
    margin: 26px 0 12px;
}
.pin-dots span {
    width: 13px;
    height: 13px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.34);
    background: rgba(255,255,255,.06);
    transition: background .14s ease, transform .14s ease, border-color .14s ease;
}
.pin-dots span.filled {
    background: #fff;
    border-color: #fff;
    transform: scale(1.08);
}
.pin-state {
    min-height: 22px;
    color: #ff8a80;
    font-size: 13px;
    text-align: center;
}
.pin-keypad {
    width: min(310px, 100%);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 12px;
}
.pin-keypad button {
    min-height: 58px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: rgba(255,255,255,.065);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.pin-keypad button:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.22);
}
.pin-keypad button:active {
    transform: scale(.96);
}
.pin-keypad button[data-pin-clear],
.pin-keypad button[data-pin-back] {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}
@keyframes successCardIn {
    from { opacity: 0; transform: translateY(18px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes successPulse {
    0% { transform: scale(.82); opacity: .75; }
    100% { transform: scale(1.18); opacity: 0; }
}
@keyframes softRise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes panelNudge {
    0% { transform: translateY(5px); border-color: rgba(255,255,255,.08); }
    100% { transform: translateY(0); border-color: var(--border); }
}
@keyframes formItemIn {
    from { opacity: 0; transform: translateY(9px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes historyRowIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 14px 24px;
    background: rgba(8,8,8,.88);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
}
.topbar strong { display: block; font-size: 15px; }
.topbar nav { display: flex; gap: 8px; flex-wrap: wrap; }
.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    border-radius: 10px;
    padding: 9px 12px;
    cursor: pointer;
    font-weight: 600;
}
.nav-btn img { width: 17px; height: 17px; opacity: .8; }
.nav-btn.active, .nav-btn:hover { color: var(--text); background: var(--surface2); }
.nav-btn.danger { color: #ff8a80; }
.nav-btn.icon-only {
    width: 42px;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}
.nav-btn.icon-only img { width: 18px; height: 18px; }
#lockBtn img {
    opacity: .9;
    filter: brightness(0) invert(1);
}
.device-strip {
    display: grid;
    gap: 16px;
    margin: 22px 24px 0;
    padding: 17px 20px 19px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(20,20,20,.82);
}
.device-strip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    min-width: 0;
}
.status-dot {
    color: var(--ok);
    background: rgba(102,187,106,.12);
    border: 1px solid rgba(102,187,106,.26);
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
}
.session-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.session-age {
    color: var(--muted);
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
}
.access-alert {
    display: flex;
    align-items: stretch;
    gap: 14px;
    margin: 16px 24px 0;
    padding: 15px 16px;
    border: 1px solid rgba(239,83,80,.30);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(239,83,80,.105), rgba(255,255,255,.025) 56%, rgba(20,20,20,.82)),
        rgba(20,20,20,.88);
}
.access-alert-stripe {
    width: 4px;
    border-radius: 999px;
    background: #ef5350;
    flex: 0 0 auto;
}
.access-alert-body {
    min-width: 0;
}
.access-alert-eyebrow {
    margin-bottom: 5px;
    color: #ef5350;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}
.access-alert strong {
    display: block;
    margin-bottom: 5px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.35;
}
.access-alert p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}
.web-alert-stack {
    display: grid;
    gap: 10px;
    margin: 12px 24px 0;
}
.web-alert-stack:empty { display: none; }
.web-alert {
    --alert-color: #6db4ff;
    display: flex;
    align-items: stretch;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--alert-color) 30%, transparent);
    border-radius: 15px;
    background:
        radial-gradient(360px 120px at 0% 0%, color-mix(in srgb, var(--alert-color) 13%, transparent), transparent 72%),
        rgba(20,20,20,.86);
    animation: alertSlideIn .36s cubic-bezier(.2,.8,.2,1) both;
}
.web-alert-stack.no-alert-anim .web-alert {
    animation: none;
}
.web-alert-stripe {
    width: 4px;
    border-radius: 999px;
    background: var(--alert-color);
    flex: 0 0 auto;
}
.web-alert-title {
    color: var(--alert-color);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}
.web-alert-body {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}
@keyframes alertSlideIn {
    from { opacity: 0; transform: translateY(-8px) scale(.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.quota-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 14px;
}
.quota-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
        rgba(12,12,12,.72);
    border: 1px solid rgba(255,255,255,.095);
    border-radius: 13px;
    padding: 12px 13px;
    min-height: 76px;
    animation: softRise .28s cubic-bezier(.2,.8,.2,1) both;
}
.quota-grid.no-quota-anim .quota-card { animation: none; }
.quota-icon, .feature-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: #242424;
    border: 1px solid #333;
}
.quota-icon { width: 34px; height: 34px; border-radius: 10px; }
.quota-icon img { width: 19px; height: 19px; opacity: .92; }
.quota-body { min-width: 0; }
.quota-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}
.quota-card span {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1.25;
    font-weight: 700;
}
.quota-card strong {
    color: var(--text);
    font-size: 15px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
    word-spacing: 2px;
}
.quota-progress {
    position: relative;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.11);
}
.quota-progress > i {
    display: block;
    width: var(--quota-pct, 0%);
    min-width: 6px;
    max-width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--quota-color, #fff), color-mix(in srgb, var(--quota-color, #fff) 58%, #fff));
    box-shadow: 0 0 18px color-mix(in srgb, var(--quota-color, #fff) 30%, transparent);
}
.quota-card.is-unlimited .quota-progress > i {
    width: 100%;
    min-width: 100%;
    opacity: .88;
}
.tab-panel { display: none; padding: 32px; }
.tab-panel.active { display: grid; animation: tabFadeIn .24s ease both; }
.tab-panel.tab-enter { animation: tabFadeIn .24s ease both; }
#toolsTab {
    grid-template-columns: minmax(360px, 480px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
.feature-list, .tool-panel, .history-panel {
    background: rgba(20,20,20,.92);
    border: 1px solid var(--border);
    border-radius: 16px;
}
.feature-list {
    padding: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.feature-btn {
    display: grid;
    grid-template-rows: 54px auto;
    gap: 11px;
    align-items: center;
    justify-items: center;
    border: 0;
    background: #111;
    border: 1px solid rgba(255,255,255,.045);
    color: var(--muted);
    text-align: center;
    padding: 18px 10px 15px;
    border-radius: 16px;
    cursor: pointer;
    min-height: 120px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}
.feature-btn:hover, .feature-btn.active {
    background: #1d1d1d;
    border-color: rgba(255,255,255,.10);
    color: var(--text);
    transform: translateY(-1px);
}
.feature-btn.active {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.18);
}
.feature-btn:active { transform: translateY(0) scale(.985); }
.feature-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    color: var(--feature-color, #8ab4f8);
    background:
        radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--feature-color, #8ab4f8) 22%, transparent), transparent 60%),
        #222;
    transition: transform .2s ease, box-shadow .2s ease;
}
.feature-btn:hover .feature-icon,
.feature-btn.active .feature-icon {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--feature-color, #8ab4f8) 16%, transparent);
}
.feature-icon img { width: 24px; height: 24px; object-fit: contain; }
.feature-title {
    display: -webkit-box;
    font-weight: 600;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.25;
    font-size: 13px;
    max-width: 100%;
}
.feature-btn small { display: none; }
.tool-panel { padding: 34px 38px; min-height: 560px; transition: border-color .2s ease, transform .2s ease; }
.tool-panel.form-swap { animation: panelNudge .28s cubic-bezier(.2,.8,.2,1) both; }
.panel-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 34px; }
.panel-head h2 { font-size: 26px; font-weight: 600; line-height: 1.2; margin-bottom: 8px; }
.panel-head p { line-height: 1.55; }
.query-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 22px; }
.query-form.form-enter .field,
.query-form.form-enter .form-actions,
.query-form.form-enter .empty-state {
    animation: formItemIn .3s cubic-bezier(.2,.8,.2,1) both;
}
.query-form.form-enter .field:nth-child(2) { animation-delay: .025s; }
.query-form.form-enter .field:nth-child(3) { animation-delay: .05s; }
.query-form.form-enter .field:nth-child(4) { animation-delay: .075s; }
.query-form.form-enter .form-actions { animation-delay: .09s; }
.field { display: grid; gap: 12px; }
.field.full { grid-column: 1 / -1; }
.field label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; line-height: 1.35; }
.identity-mode-field { margin-bottom: 2px; }
.identity-mode-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.identity-mode-tabs label {
    position: relative;
    display: inline-flex;
    margin: 0;
}
.identity-mode-tabs input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}
.identity-mode-tabs span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    min-width: 92px;
    padding: 0 24px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.06);
    color: var(--muted);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .16s ease;
}
.identity-mode-tabs input:checked + span {
    background: #fff;
    border-color: #fff;
    color: #050505;
}
.identity-mode-tabs span:active { transform: scale(.985); }
.identity-panel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 22px;
}
.region-group { grid-column: 1 / -1; }
.region-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
input, select {
    width: 100%;
    border: 1px solid var(--border);
    background: #090909;
    color: var(--text);
    border-radius: 12px;
    padding: 17px 18px;
    outline: none;
    min-height: 58px;
    font-size: 16px;
    line-height: 1.25;
}
select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 46px;
    background-color: #090909;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 17px center;
    background-size: 14px 14px;
}
input:focus, select:focus { border-color: #777; }
input, select, .btn, .nav-btn { transition: border-color .18s ease, background .18s ease, transform .16s ease, color .18s ease; }
.btn:active, .nav-btn:active { transform: scale(.985); }
.query-form.single-field .field:not(.full) { grid-column: 1 / -1; }
.form-actions { grid-column: 1 / -1; display: flex; justify-content: stretch; gap: 10px; margin-top: 10px; }
.form-actions .btn.primary { width: 100%; min-width: 0; min-height: 56px; }
.fr-upload-card {
    display: grid;
    grid-template-columns: minmax(240px, .85fr) minmax(0, 1.15fr);
    gap: 16px;
    align-items: start;
}
.fr-file-drop {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    min-height: 220px;
    height: clamp(220px, 30vw, 300px);
    padding: 26px;
    border: 1px dashed rgba(255,255,255,.22);
    border-radius: 18px;
    background:
        radial-gradient(180px 150px at 50% 0%, rgba(103,167,232,.14), transparent 72%),
        linear-gradient(145deg, rgba(255,255,255,.045), rgba(10,10,10,.96));
    color: var(--text);
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .18s ease, background .18s ease, transform .16s ease;
}
.fr-file-drop:hover {
    border-color: rgba(255,255,255,.42);
    background:
        radial-gradient(190px 160px at 50% 0%, rgba(103,167,232,.20), transparent 74%),
        linear-gradient(145deg, rgba(255,255,255,.065), rgba(12,12,12,.98));
    transform: translateY(-1px);
}
.fr-file-drop input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.fr-file-icon {
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
    box-shadow: 0 16px 48px rgba(0,0,0,.30);
}
.fr-file-icon img {
    width: 34px;
    height: 34px;
    filter: brightness(0) invert(1);
}
.fr-file-drop strong {
    font-size: 18px;
    line-height: 1.2;
}
.fr-file-drop small {
    max-width: 260px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}
.fr-preview {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 260px;
    border: 1px solid #303030;
    border-radius: 16px;
    background: #101010;
    color: var(--muted);
    overflow: hidden;
}
.fr-preview img {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: contain;
    background: #070707;
}
.fr-preview b {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(0,0,0,.68);
    color: #fff;
    font-size: 11px;
    letter-spacing: .08em;
}
.fr-preview span {
    padding: 0 24px;
    text-align: center;
    line-height: 1.45;
}
.fr-preview.empty,
.fr-preview.loading {
    border-style: dashed;
}
.fr-preview.has-choices {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    min-height: 0;
    padding: 12px;
}
.fr-face-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px;
}
.fr-face-head strong {
    color: #fff;
    font-size: 13px;
    line-height: 1.2;
}
.fr-face-head span {
    padding: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.2;
    text-transform: uppercase;
}
.fr-selected-face {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 0;
    height: clamp(220px, 32vw, 340px);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    background: #070707;
    overflow: hidden;
}
.fr-selected-face img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
}
.fr-face-picker {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding: 1px 1px 3px;
    scrollbar-width: thin;
}
.fr-face-choice {
    display: grid;
    gap: 7px;
    flex: 0 0 104px;
    width: 104px;
    min-width: 104px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 13px;
    background: rgba(255,255,255,.045);
    color: var(--text);
    cursor: pointer;
    text-align: center;
    transition: border-color .18s ease, background .18s ease, transform .16s ease;
}
.fr-face-choice:hover {
    border-color: rgba(103,167,232,.72);
    background: rgba(103,167,232,.10);
    transform: translateY(-1px);
}
.fr-face-choice.selected {
    border-color: rgba(103,167,232,.95);
    background: linear-gradient(145deg, rgba(103,167,232,.20), rgba(255,255,255,.055));
    box-shadow: 0 10px 30px rgba(103,167,232,.12);
}
.fr-face-choice img {
    width: 100%;
    height: 82px;
    border-radius: 10px;
    object-fit: cover;
    background: #070707;
}
.fr-face-choice span {
    padding: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    line-height: 1.25;
}
.fr-face-choice.selected span {
    color: #fff;
}
.fr-crop-state {
    min-height: 20px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}
#historyTab { display: none; }
#historyTab.active { display: block; animation: tabFadeIn .24s ease both; }
#historyTab.tab-enter { animation: tabFadeIn .24s ease both; }
.history-panel { padding: 16px; }
.history-filter { display: grid; grid-template-columns: minmax(0, 1fr) 220px auto; gap: 10px; margin-bottom: 14px; }
.history-list { display: grid; gap: 10px; }
#historyMoreBtn {
    margin: 24px auto 0;
    padding: 12px 24px;
    min-width: 150px;
}
.history-date-divider {
    margin: 16px 2px 2px;
    color: var(--dim);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.history-row {
    --history-kind-color: #9a9a9a;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.10);
    border-left: 3px solid var(--history-kind-color);
    border-radius: 15px;
    background:
        radial-gradient(180px 110px at 0% 0%, color-mix(in srgb, var(--history-kind-color) 18%, transparent), transparent 70%),
        linear-gradient(145deg, rgba(255,255,255,.045), rgba(17,17,17,.95));
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
    animation: historyRowIn .28s cubic-bezier(.2,.8,.2,1) both;
}
.history-row:hover {
    border-color: color-mix(in srgb, var(--history-kind-color) 38%, rgba(255,255,255,.10));
    background:
        radial-gradient(190px 120px at 0% 0%, color-mix(in srgb, var(--history-kind-color) 22%, transparent), transparent 72%),
        linear-gradient(145deg, rgba(255,255,255,.06), rgba(19,19,19,.98));
    transform: translateY(-1px);
}
.history-row.disabled {
    cursor: default;
    opacity: .58;
    filter: grayscale(.22);
}
.history-row.disabled:hover {
    border-color: rgba(255,255,255,.10);
    background:
        radial-gradient(180px 110px at 0% 0%, color-mix(in srgb, var(--history-kind-color) 13%, transparent), transparent 70%),
        linear-gradient(145deg, rgba(255,255,255,.035), rgba(17,17,17,.95));
}
.history-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--history-kind-color) 22%, transparent), transparent 70%),
        #242424;
    border: 1px solid rgba(255,255,255,.12);
}
.history-icon img { width: 28px; height: 28px; object-fit: contain; }
.history-icon.photo { overflow: hidden; background: #111; }
.history-icon.photo img { width: 100%; height: 100%; object-fit: cover; }
.history-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}
.history-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.history-line { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 7px 0 4px; }
.history-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.history-main small { display: block; color: var(--dim); font-size: 11px; }
.history-by {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    width: fit-content;
    margin-top: 5px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(255,213,79,.10);
    border: 1px solid rgba(255,213,79,.20);
    color: #FFD54F;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
}
.history-main strong { font-size: 15px; line-height: 1.25; }
.history-main span { font-size: 13px; }
.history-score {
    color: var(--ok);
    font-size: 13px;
    font-weight: 800;
    flex: 0 0 auto;
}
.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 8px;
    background: #222;
    color: #ddd;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}
.history-kind {
    color: var(--history-kind-color);
    border: 1px solid color-mix(in srgb, var(--history-kind-color) 24%, transparent);
    background: color-mix(in srgb, var(--history-kind-color) 12%, rgba(255,255,255,.06));
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .04em;
}
.history-status,
.history-server,
.history-source {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 9px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 850;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.07);
}
.history-status.ok { color: var(--ok); }
.history-status.warn { color: var(--amber); }
.history-status.fail { color: var(--danger); }
.history-source.app { color: #bdbdbd; background: rgba(255,255,255,.075); border-color: rgba(255,255,255,.13); }
.history-source.web { color: #80cbc4; background: rgba(128,203,196,.10); border-color: rgba(128,203,196,.24); }
.history-server.s1 { color: #6DB4FF; background: rgba(109,180,255,.10); border-color: rgba(109,180,255,.22); }
.history-server.s2 { color: #CE93D8; background: rgba(206,147,216,.10); border-color: rgba(206,147,216,.22); }
.history-server.imei { color: #FFB74D; background: rgba(255,183,77,.10); border-color: rgba(255,183,77,.22); }
.history-main { min-width: 0; }
.history-main strong, .history-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-main .history-badges span {
    display: inline-flex;
}
.history-main .history-badges span,
.history-main .history-by,
.history-main .history-score { overflow: visible; text-overflow: clip; white-space: nowrap; }
.history-line .badge { display: inline-block; flex: 0 0 auto; }
.empty-state { padding: 38px; text-align: center; color: var(--muted); }
.modal {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.72);
    padding: 24px;
}
.modal-card {
    width: min(920px, 100%);
    max-height: 88vh;
    overflow: auto;
    scrollbar-gutter: stable;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px;
}
.image-modal-card {
    width: min(760px, 100%);
    z-index: 102;
}
.image-modal-body { display: grid; place-items: center; }
.image-modal-body img {
    max-width: 100%;
    max-height: 78vh;
    border-radius: 12px;
    border: 1px solid #303030;
    background: #111;
}
.image-download-btn {
    min-height: 38px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.modal-actions { display: flex; gap: 8px; align-items: center; }
.close { border: 0; background: transparent; color: var(--muted); font-size: 26px; cursor: pointer; }
.copy-icon-btn,
.row-copy {
    display: inline-grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    border-radius: 999px;
}
.copy-icon-btn {
    width: 44px;
    height: 44px;
}
.copy-icon-btn:hover,
.row-copy:hover { background: rgba(255,255,255,.08); }
.cp-map-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(128,203,196,.12);
    border: 1px solid rgba(128,203,196,.28);
    color: #c8fff8;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
.cp-map-link:hover { background: rgba(128,203,196,.18); }
.copy-icon-btn img {
    width: 24px;
    height: 24px;
    opacity: .96;
}
.result-card { background: #202020; border: 1px solid #303030; border-radius: 14px; padding: 18px; margin-bottom: 14px; }
.result-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 10px; }
.result-name { font-size: 22px; font-weight: 700; margin: 8px 0 14px; }
.person-head { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: center; margin-bottom: 16px; }
.person-title .result-name { margin: 0 0 10px; }
.person-photo {
    width: 92px;
    height: 112px;
    border: 1px solid #343434;
    border-radius: 13px;
    background: #141414;
    color: var(--dim);
    display: grid;
    place-items: center;
    overflow: hidden;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    padding: 0;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.person-photo:hover {
    border-color: rgba(109,183,245,.85);
    box-shadow: 0 0 0 2px rgba(109,183,245,.24);
    transform: translateY(-1px);
}
.person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person-photo.nrp-photo {
    width: 96px;
    height: 96px;
    border-radius: 12px;
}
.person-photo.empty { cursor: default; }
.person-photo.empty:hover {
    border-color: #343434;
    box-shadow: none;
    transform: none;
}
.result-rows { display: grid; gap: 10px; }
.result-row {
    display: grid;
    grid-template-columns: 190px minmax(0,1fr) 34px;
    gap: 14px;
    align-items: center;
    padding: 5px 0;
}
.rl { color: var(--muted); font-weight: 600; text-transform: uppercase; }
.rv { word-break: break-word; }
.row-copy {
    width: 34px;
    height: 34px;
    justify-self: end;
    opacity: .86;
}
.row-copy img {
    width: 22px;
    height: 22px;
    display: block;
}
.sim-record-card {
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
    border: 1px solid #303030;
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 14px;
}
.sim-record-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.sim-record-kicker {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
}
.sim-record-name {
    color: var(--text);
    font-size: 22px;
    font-weight: 800;
    margin-top: 7px;
    line-height: 1.18;
}
.sim-record-nik {
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    margin-top: 6px;
}
.sim-record-badges {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 180px;
}
.sim-status-chip,
.sim-date-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.sim-status-chip {
    background: rgba(91, 210, 111, .14);
    border: 1px solid rgba(91, 210, 111, .28);
    color: #84df8e;
}
.sim-date-chip {
    background: rgba(255,255,255,.065);
    border: 1px solid rgba(255,255,255,.12);
    color: #d7d7d7;
}
.sim-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.sim-field {
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 12px;
    padding: 12px 14px;
    min-width: 0;
}
.sim-field span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-bottom: 7px;
}
.sim-field strong {
    display: block;
    color: var(--text);
    font-size: 16px;
    font-weight: 650;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.copy-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 120;
    transform: translate(-50%, 12px);
    opacity: 0;
    pointer-events: none;
    background: #f5f5f5;
    color: #050505;
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 700;
    box-shadow: 0 18px 48px rgba(0,0,0,.36);
    transition: opacity .18s ease, transform .18s ease;
}
.copy-toast.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
.swal-loading {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,.58);
    backdrop-filter: blur(8px);
}
.swal-loading-card {
    width: min(320px, calc(100vw - 48px));
    display: grid;
    place-items: center;
    gap: 14px;
    padding: 26px 24px;
    border-radius: 18px;
    background: rgba(22,22,22,.96);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 24px 70px rgba(0,0,0,.42);
    color: #f4f4f4;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}
.swal-loading-card strong {
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1.35;
}
.swal-spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.18);
    border-top-color: #fff;
    animation: qrSpin .78s linear infinite;
}
.confirm-alert {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: none;
    place-items: center;
    padding: 24px;
    background: rgba(0,0,0,.62);
    backdrop-filter: blur(10px);
}
.confirm-card {
    width: min(380px, calc(100vw - 48px));
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 26px 24px 22px;
    border-radius: 20px;
    background: rgba(20,20,20,.98);
    border: 1px solid rgba(255,255,255,.13);
    box-shadow: 0 24px 80px rgba(0,0,0,.46);
    text-align: center;
}
.confirm-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
}
.confirm-icon img {
    width: 38px;
    height: 38px;
    border-radius: 10px;
}
.confirm-card h3 {
    margin: 4px 0 0;
    font-size: 22px;
    line-height: 1.2;
}
.confirm-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}
.confirm-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 8px;
}
.confirm-actions .btn {
    width: 100%;
    justify-content: center;
}
.btn.primary.danger {
    background: #ff8a80;
    color: #070707;
}
.btn.is-loading {
    pointer-events: none;
    opacity: .65;
}
.score-badge, .nik-code { background: #303030; border-radius: 8px; padding: 5px 8px; }
.name-page-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
    padding: 14px 0 2px;
    background: linear-gradient(180deg, rgba(18,18,18,0), rgba(18,18,18,.96) 28%, rgba(18,18,18,.98));
    color: #b8b8b8;
    font-size: 13px;
    font-weight: 700;
}
.name-page-footer .btn {
    min-width: 96px;
    padding: 11px 16px;
}
.name-page-footer .btn:disabled {
    opacity: .42;
    cursor: not-allowed;
}
.cp-sector-image-wrap {
    position: relative;
    border: 1px solid #303030;
    border-radius: 14px;
    overflow: hidden;
    margin: 16px 0 12px;
    background: #101010;
}
.cp-sector-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(62vh, 560px);
    object-fit: contain;
    background: #080808;
}
.cp-sector-caption {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 10px 12px;
    border-radius: 11px;
    background: rgba(10,10,10,.78);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(10px);
}
pre { white-space: pre-wrap; word-break: break-word; }
@media (max-width: 960px) {
    .topbar { align-items: flex-start; flex-direction: column; }
    .device-strip { margin: 14px 14px 0; }
    .quota-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tab-panel { padding: 14px; }
    #toolsTab { grid-template-columns: 1fr; }
    .query-form { grid-template-columns: 1fr; }
    .fr-upload-card { grid-template-columns: 1fr; }
    .fr-file-drop { height: auto; }
    .history-filter { grid-template-columns: 1fr; }
    .history-row { grid-template-columns: 1fr; }
    .history-icon { display: none; }
    .region-grid { grid-template-columns: 1fr; }
    .person-head { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
    .person-photo { width: 72px; height: 92px; }
    .person-photo.nrp-photo { width: 72px; height: 72px; }
    .result-row { grid-template-columns: minmax(0,1fr) 34px; gap: 2px 10px; }
    .result-row .rl { grid-column: 1 / -1; }
    .result-row .rv { grid-column: 1; }
    .result-row .row-copy { grid-column: 2; grid-row: 2; }
    .login-card { width: min(720px, 100%); padding: 26px; }
    .login-content { grid-template-columns: 1fr; gap: 26px; }
    .login-copy, .login-qr-panel { grid-column: auto; }
    .login-copy h2 { font-size: 24px; }
    .qr-box { min-width: 0; width: min(306px, 100%); height: auto; }
}
@media (max-width: 520px) {
    .login-card { padding: 20px; border-radius: 18px; }
    .brand-logo { width: 48px; height: 48px; }
    h1 { font-size: 24px; }
    .quota-grid { grid-template-columns: 1fr; }
    .topbar nav { width: 100%; }
    .nav-btn { flex: 1; justify-content: center; }
}