/* Shared design tokens ported from the Nuxt theme. preferences.js applies
   supported ek_theme cookie values before first paint. Interactive styles
   below use these tokens, including color-mix() for translucent accents. */

:root {
    /* Brand colors */
    --color-brand-primary: #3b82f6;
    --color-brand-primary-hover: #2563eb;
    --color-brand-secondary: #10b981;
    --color-brand-accent: #00aaff;

    /* Text Colors */
    --color-text-primary: #ffffff;
    --color-text-secondary: #9ca3af;
    --color-text-tertiary: #6b7280;
    --color-text-muted: #6b7280;
    --color-text-inverse: #111827;

    /* Background Colors */
    --color-bg-primary: #111827;
    --color-bg-secondary: rgba(26, 26, 26, 0.8);
    --color-bg-tertiary: #1f2937;
    --color-bg-hover: rgba(45, 45, 45, 0.6);

    /* Border Colors */
    --color-border-light: rgba(75, 85, 99, 0.2);
    --color-border-medium: #374151;
    --color-border-dark: #4b5563;
    --color-border-focus: #3b82f6;
    --color-border-focus-light: rgba(59, 130, 246, 0.1);
    --color-border: #2d3748;
    --color-border-alpha: rgba(75, 85, 99, 0.2);

    /* Surface Colors */
    --color-surface-alpha: rgba(26, 26, 26, 0.5);
    --color-surface-hover: #374151;
    --color-surface-dark-alpha-85: rgba(26, 32, 44, 0.85);

    /* Overlay Colors */
    --color-overlay-dark: rgba(26, 26, 26, 0.4);
    --color-overlay: rgba(0, 0, 0, 0.5);

    /* Gray Scale */
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;

    /* Status Colors */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-danger: #ef4444;
    --color-info: #3b82f6;

    /* EVE Security Status Colors */
    --color-highsec: #2f75fe;
    --color-lowsec: #f9a825;
    --color-nullsec: #d32f2f;

    /* Kill/Loss Colors */
    --color-loss-bg: rgba(80, 0, 0, 0.6);
    --color-loss-hover: rgba(90, 0, 0, 0.65);
    --color-loss-border: rgba(139, 46, 46, 0.8);

    /* Content-specific Colors — mapped to custom Tailwind utilities via @theme */
    --color-isk-value: #4ade80;         /* ISK amounts — text-isk */
    --color-npc-text: #fcd34d;          /* NPC names — text-npc */
    --color-selection-bg: #3b82f6;      /* ::selection background */
    --color-selection-text: #ffffff;    /* ::selection text */

    /* Spacing Scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Typography */
    --text-2xs: 0.65rem;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;

    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Border Radius */
    --radius-sm: 0.125rem;
    --radius-base: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
    --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);

    /* Z-Index Scale */
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-header: 30;
    --z-modal: 40;
    --z-popover: 50;
    --z-overlay: 70;
    --z-maximum: 9999;

    /* Layout */
    --max-width-content: 85rem;
    --max-width-inner: 84rem;

    /* Scrollbar */
    --scrollbar-width: 10px;
    --scrollbar-border-radius: 8px;
    --scrollbar-thumb-color: var(--color-brand-primary);
}

/* Body & HTML - Base structure and background */

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Exo 2', 'Exo 2 Fallback', 'Exo 2 Roboto Fallback', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1em;
    color: var(--color-text-primary);
}

html {
    background-color: black !important;
    /* Set via style.setProperty by the background picker / domain scripts */
    --site-bg: image-set(url('/assets/b52e5125bfb9ee2c/backgrounds/bg2.avif') type('image/avif'), url('/assets/b52e5125bfb9ee2c/backgrounds/bg2.webp') type('image/webp'));
    position: relative;
    min-height: 100%;
    overflow-y: auto;
}

/* Fixed-position background layer. Visually identical to
   background-attachment: fixed, but that property forces Chrome to repaint
   the full viewport image on every scroll frame (fixed-attachment backgrounds
   can't live on the GPU scroll layer), which flickers under rapid scrolling —
   a position:fixed layer is composited once instead. */
html::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: var(--site-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    pointer-events: none;
}


body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    z-index: 1;
    background-color: transparent;
    padding-right: 0 !important;
}


/* Fix for mobile - no horizontal scrolling */
@media (max-width: 767px) {
    html,
    body {
        max-width: 100vw;
    }
}

/* Layout System - Content container and structural patterns */

/*
 * --content-alpha-scale multiplies the opacity of both panel layers, letting a
 * custom killboard dial how much of its background image shows through. It is
 * a scale rather than a raw alpha so the unset default (1) reproduces the two
 * hand-tuned values below exactly; the layout sets it inline on .content and
 * .inner-content inherits it.
 */

/* Content Container */
.content {
    position: relative;
    z-index: 2;
    max-width: var(--max-width-content);
    background-color: rgba(15, 15, 15, calc(0.85 * var(--content-alpha-scale, 1))) !important;
    padding: 0 5px 0 5px;
    width: 100%;
    box-sizing: border-box;
    min-height: 100vh;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    margin: 0 auto;

    /* Edge fade effect */
    -webkit-mask: linear-gradient(
        to right,
        transparent 0px,
        black 40px,
        black calc(100% - 40px),
        transparent 100%
    );
    mask: linear-gradient(
        to right,
        transparent 0px,
        black 40px,
        black calc(100% - 40px),
        transparent 100%
    );
}

/* Transparent-banner mode: a killboard with no banner image that still wants
   a header block.

   Two layers paint the panel, and both have to give way or the bleed only half
   works — .inner-content carries its own near-opaque black and is what
   produced a hard horizontal line under the header.

   The geometry both ramps are pinned to: the header strip is 160px tall
   (pt-20 + a 4rem logo + pb-4) and .main-content adds 24px, so the first panel
   starts 184px down. The fade therefore has to be *finished* by ~180px — a few
   px clear of that panel — and run the same 40px the left and right edges fade
   over, so it opens at 140px.

   It takes both layers to draw that. .inner-content begins where the strip
   ends, 160px down, so it can only cover the last 20px; .content spans the
   whole page and covers the full 140–180px. Anything that finishes lower than
   the panel keeps fading behind it, which is what made earlier attempts look
   like a smudge rather than an edge. */
.content--bleed {
    background-color: transparent !important;
    background-image: linear-gradient(
        to bottom,
        transparent 0,
        transparent 8.75rem,
        rgba(15, 15, 15, calc(0.85 * var(--content-alpha-scale, 1))) 11.25rem
    );
}

.content--bleed .inner-content {
    background: linear-gradient(
        to bottom,
        transparent 0,
        rgba(0, 0, 0, calc(0.9 * var(--content-alpha-scale, 1))) 20px
    );
}

/* Persistent blur layer. Standalone fixed <div> (not a pseudo-element on a
   transitioning parent) so it paints continuously across navigations without
   requiring a named view-transition group — a named group would render on top
   of the root snapshot and blur the whole page during the crossfade. */
.content-blur {
    position: fixed;
    inset: 0;
    z-index: 1;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
    -webkit-mask: linear-gradient(
        to right,
        transparent 0px,
        black 60px,
        black calc(100% - 60px),
        transparent 100%
    );
    mask: linear-gradient(
        to right,
        transparent 0px,
        black 60px,
        black calc(100% - 60px),
        transparent 100%
    );
    max-width: var(--max-width-content);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

.inner-content {
    max-width: var(--max-width-inner);
    margin: 0 auto;
    height: auto;
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: visible;
    padding: 0 5px 0 5px;
    background: rgba(0, 0, 0, calc(0.9 * var(--content-alpha-scale, 1)));
    box-sizing: border-box;
    position: relative;

    /* Inner edge fade */
    -webkit-mask: linear-gradient(
        to right,
        transparent 0px,
        black 40px,
        black calc(100% - 40px),
        transparent 100%
    );
    mask: linear-gradient(
        to right,
        transparent 0px,
        black 40px,
        black calc(100% - 40px),
        transparent 100%
    );
}

.main-content {
    flex: 1;
    padding: 4.5rem 3rem 1.25rem 3rem;
    width: 100%;
    overflow: visible;
    box-sizing: border-box;
}

/* Shared hero atmosphere. Route headers have different content needs (plain
   page title, entity identity, killmail summary, account banner), but they all
   sit on the same subtle brand wash and contour motif. */
.hero-surface {
    position: relative;
    isolation: isolate;
}

.hero-surface::before,
.hero-surface::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.hero-surface::before {
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 0 0, color-mix(in srgb, var(--color-brand-primary) 10%, transparent), transparent 44%),
        radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--color-brand-secondary) 6%, transparent), transparent 40%);
}

.hero-surface::after {
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(circle at calc(100% - 9rem) 2rem,
        transparent 0, transparent calc(8rem - 1px),
        rgba(255, 255, 255, 0.035) 8rem, transparent calc(8rem + 1px),
        transparent calc(10.75rem - 1px), rgba(255, 255, 255, 0.025) 10.75rem,
        transparent calc(10.75rem + 1px), transparent calc(13.5rem - 1px),
        rgba(255, 255, 255, 0.018) 13.5rem, transparent calc(13.5rem + 1px));
}

/* Responsive */
@media (min-width: 768px) {
    .inner-content {
        padding-right: 25px;
        padding-left: 25px;
    }
}

@media (max-width: 767px) {
    .content,
    .inner-content {
        -webkit-mask: none;
        mask: none;
    }

    .content {
        padding: 0;
    }

    /* Disable the fixed backdrop-filter overlay on mobile —
       iOS Safari bug: backdrop-filter + pointer-events:none still
       intercepts touch events on <button> elements */
    .content-blur {
        display: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /* Kill ALL fixed/absolute backdrop-filter on mobile —
       iOS Safari compositing bug intercepts touch events even
       through pointer-events:none and sometimes display:none */
    *,
    *::before,
    *::after {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .inner-content {
        padding: 0;
    }

    .main-content {
        padding: 3.25rem 0.5rem 1.25rem 0.5rem;
    }
}

/* Footer positioning — bottom padding clears the fixed news ticker */
.site-footer {
    margin-bottom: 0;
    padding-bottom: 2rem;
    width: 100%;
    box-sizing: border-box;
    margin-top: auto !important;
}

/* Exo 2 — geometric/tech font similar to EVE's Shentox */
@font-face {
    font-family: 'Exo 2';
    src: url('/assets/b52e5125bfb9ee2c/fonts/Exo2-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Latin (including combining marks), punctuation and symbols cover the interface and most pilot names.
   Other scripts still use the complete original font above. */
@font-face {
    font-family: 'Exo 2';
    src: url('/assets/b52e5125bfb9ee2c/fonts/Exo2-Latin-v1.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-036F, U+2000-23FF;
}

/* Match Arial's average Latin width to Exo 2 at weight 400 (97.0577%).
   Exo 2's 999/201/0 vertical metrics are divided by that adjustment.
   This keeps wrapped metadata and normal line boxes closer during the swap. */
@font-face {
    font-family: 'Exo 2 Fallback';
    src: local('Arial');
    size-adjust: 97.0577%;
    ascent-override: 102.9285%;
    descent-override: 20.7093%;
    line-gap-override: 0%;
}

/* Android normally provides Roboto rather than Arial. */
@font-face {
    font-family: 'Exo 2 Roboto Fallback';
    src: local('Roboto');
    size-adjust: 99.3148%;
    ascent-override: 100.5893%;
    descent-override: 20.2387%;
    line-gap-override: 0%;
}

/* Go shell. Measurements follow Navbar.vue, Footer.vue and PageHeader.vue. */
* { box-sizing:border-box; scrollbar-width:thin; scrollbar-color:var(--scrollbar-thumb-color) transparent; }
::-webkit-scrollbar { width:var(--scrollbar-width); }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background-color:var(--scrollbar-thumb-color); border-radius:var(--scrollbar-border-radius); }
html { color-scheme:dark; scrollbar-gutter:stable; scrollbar-width:thin; scroll-behavior:smooth; }
body { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.5; }
/* The body is a flex column. A fixed 100% height lets its masked children
   shrink to one viewport, clipping long killlists during page scroll. */
body { height:auto; }
.content,.inner-content { flex-shrink:0; }
:where(h1,h2,h3,p) { margin:0; }
a { color:inherit; text-decoration:none; }
button,input,select,summary { font:inherit; }
button { color:inherit; border:0; background:none; cursor:pointer; }
button,a,summary { touch-action:manipulation; }
summary { cursor:pointer; list-style:none; }
summary::-webkit-details-marker { display:none; }
input,select { color:inherit; accent-color:var(--color-brand-primary); }
:focus-visible { outline:2px solid var(--color-brand-primary); outline-offset:3px; }
::selection { background:color-mix(in srgb,var(--color-selection-bg) 40%,transparent); color:var(--color-selection-text); }
.icon { width:18px; height:18px; flex:none; vertical-align:middle; }
.glass-panel { border-radius:8px; border:1px solid #ffffff14; background:#ffffff0a; }
.navbar { position:fixed; inset:0 0 auto; height:64px; z-index:50; display:flex; justify-content:center; }
.nav-backdrop { position:absolute; inset:0; width:100%; max-width:var(--max-width-content); margin:auto; background:linear-gradient(#0009,#0005,transparent); backdrop-filter:blur(2px); mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent); }
.navbar.scrolled .nav-backdrop { background:#000b; backdrop-filter:blur(24px); }
.nav-inner { position:relative; width:100%; max-width:80rem; margin:auto; padding:0 16px; display:flex; align-items:center; justify-content:space-between; height:100%; }
.nav-left { display:flex; flex:none; align-items:center; gap:4px; }
.nav-search { display:flex; flex:1; min-width:0; justify-content:center; margin:0 8px; }
.desktop-links,.desktop-actions { display:flex; align-items:center; flex-shrink:0; gap:4px; }
.desktop-actions { gap:2px; }
.nav-button { display:flex; height:40px; align-items:center; gap:8px; border-radius:8px; padding:0 12px; font-size:16px; font-weight:500; color:#fffc; white-space:nowrap; }
.nav-button .icon:last-child:not(:first-child) { width:14px; height:14px; opacity:.6; }
.nav-button:hover,.icon-button:hover,details[open]>summary { background:color-mix(in srgb,var(--color-brand-primary) 10%,transparent); color:color-mix(in srgb,var(--color-brand-primary) 55%,white); }
.nav-dropdown.info-dropdown[open]>summary { background:transparent; color:#fff9; }
.nav-dropdown.info-dropdown[open]>summary:hover { background:color-mix(in srgb,var(--color-brand-primary) 10%,transparent); color:color-mix(in srgb,var(--color-brand-primary) 55%,white); }
.icon-button { display:flex; align-items:center; justify-content:center; width:36px; height:40px; border-radius:8px; color:#fff9; }
.search-trigger { display:flex; align-items:center; justify-content:center; gap:12px; height:40px; width:40px; flex-shrink:0; border:1px solid #ffffff14; background:#ffffff0a; border-radius:8px; color:#6b7280; font-size:16px; }
.search-trigger:hover { color:var(--color-brand-primary); border-color:#ffffff26; background:color-mix(in srgb,var(--color-brand-primary) 8%,transparent); }
.search-trigger span { flex:1; text-align:left; }
.search-trigger span,.search-trigger kbd,.home-link span,.secondary-link { display:none; }
kbd { font-family:inherit; font-size:12px; font-weight:500; padding:0 4px; min-width:20px; height:20px; border:1px solid #ffffff1a; border-radius:2px; background:#ffffff0f; }
.nav-dropdown { position:relative; }
.dropdown-panel { position:absolute; top:calc(100% + 8px); left:0; padding:8px; min-width:220px; max-height:calc(100dvh - 88px); overflow:auto; border:1px solid #ffffff14; border-radius:12px; background-color:rgba(20,20,20,.9); background-image:radial-gradient(circle at 12% 0%,color-mix(in srgb,var(--color-brand-primary) 9%,transparent),transparent 34%),radial-gradient(circle at 88% 100%,rgba(99,102,241,.07),transparent 38%); backdrop-filter:blur(24px); box-shadow:0 20px 60px #0009; }
.dropdown-panel.align-right { left:auto; right:0; }
.mega-menu { position:fixed; top:64px; left:50%; transform:translateX(-50%); width:min(calc(var(--max-width-inner) - 5rem),calc(100vw - 3rem)); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding:20px; }
.explore-menu { width:480px; }
.explore-menu .menu-group { display:grid; grid-template-columns:1fr 1fr; }
.explore-menu h3 { display:none; }
.explore-menu .menu-link { padding:10px 12px; font-size:16px; }
.mega-menu .menu-group { padding:0 8px; }
.mega-menu .menu-group h3 { border-bottom:1px solid #ffffff14; padding:0 4px 8px; margin-bottom:4px; color:color-mix(in srgb,var(--color-brand-primary) 80%,transparent); letter-spacing:.15em; }
.mega-menu .menu-link { padding:2px 8px; line-height:20px; }
.menu-group h3,.background-picker h3 { padding:8px 12px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:#6b7280; }
.menu-link { display:flex; align-items:center; gap:10px; width:100%; padding:8px 12px; border-radius:8px; font-size:14px; color:#9ca3af; text-align:left; }
.menu-link .icon { width:16px; height:16px; color:color-mix(in srgb,var(--color-brand-primary) 70%,transparent); }
.menu-link:hover { background:color-mix(in srgb,var(--color-brand-primary) 8%,transparent); color:color-mix(in srgb,var(--color-brand-primary) 55%,white); }
.background-picker,.login-panel { width:288px; padding:16px; }
.dropdown-panel h2,.login-panel h2 { font-size:16px; font-weight:500; color:#d1d5db; }
.dropdown-panel p { font-size:12px; color:#6b7280; }
.background-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.background-grid button { padding:0; overflow:hidden; border:2px solid transparent; border-radius:8px; aspect-ratio:16/9; }
.background-grid button:hover { border-color:#ffffff33; }
.background-grid button[aria-pressed=true] { border-color:var(--color-brand-primary); }
.background-grid img { width:100%; height:100%; object-fit:cover; }
.login-form { display:grid; gap:12px; margin-top:16px; }
.login-form label { display:flex; align-items:center; gap:8px; color:#d1d5db; font-size:14px; }
.login-form input { width:16px; height:16px; }
.login-form select { margin-left:auto; background:#171717; border:1px solid #ffffff1a; border-radius:4px; }
.sso-button { padding:0; }
.sso-button img { display:block; width:100%; height:auto; }
.login-form .login-error { color:var(--color-error); }
.mobile-navigation { display:none; }
.mobile-navigation:not([open]) .mobile-panel { display:none; }
.page-header { display:flex; gap:12px; padding:20px; position:relative; overflow:hidden; }
.page-header>div { position:relative; z-index:1; }
.page-header-icon { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:8px; border:1px solid color-mix(in srgb,var(--color-brand-primary) 15%,transparent); background:color-mix(in srgb,var(--color-brand-primary) 10%,transparent); color:var(--color-brand-primary); }
.page-header h1 { font-size:20px; font-weight:700; }
.page-header p { margin-top:6px; font-size:16px; color:#6b7280; }
.page-header .eyebrow { margin:0; font-size:12px; letter-spacing:.16em; color:color-mix(in srgb,var(--color-brand-primary) 70%,transparent); }
.return-link { display:inline-block; margin-top:16px; color:color-mix(in srgb,var(--color-brand-primary) 55%,white); }
.info-page { width:100%; }
.info-page>.page-header { margin-bottom:16px; }
.info-page .page-header p { font-size:14px; line-height:1.625; }
.info-panel { padding:24px; }
.info-sections { display:grid; gap:32px; }
.info-sections h2 { margin-bottom:12px; color:#fff; font-size:24px; line-height:1.33; font-weight:700; }
.info-sections p { color:#d1d5db; line-height:1.625; }
.info-sections p a { color:var(--color-brand-accent); font-weight:500; }
.info-sections p a:hover { text-decoration:underline; opacity:.9; }
.info-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; padding-top:16px; }
.info-action { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 24px; border-radius:8px; font-size:14px; font-weight:500; color:#fff; }
.info-action .icon { width:20px; height:20px; }
.info-action-discord { background:#5865f2; }
.info-action-discord:hover { background:#4752c4; }
.info-action-github { background:#374151; }
.info-action-github:hover { background:#4b5563; }
.donate-page { color:#9ca3af; }
.donate-intro,.donate-thanks { text-align:center; line-height:1.625; }
.donate-intro { margin-bottom:16px; }
.donate-note { margin-bottom:38px; padding:8px 16px; border-left:4px solid var(--color-brand-primary); border-radius:4px; background:#ffffff0a; }
.donate-note p { font-size:14px; line-height:1.625; color:#d1d5db; }
.donate-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-bottom:32px; }
.donate-option { display:flex; flex-direction:column; align-items:center; min-height:278px; padding:24px; border:1px solid #374151; border-radius:8px; background:#ffffff0a; }
.donate-option:hover { border-color:color-mix(in srgb,var(--color-brand-primary) 50%,transparent); }
.donate-option>.icon { width:16px; height:16px; margin-bottom:16px; color:color-mix(in srgb,var(--color-brand-primary) 75%,white); }
.donate-option h2 { margin-bottom:8px; color:#fff; font-size:20px; font-weight:600; }
.donate-option p { flex:1; margin-bottom:16px; text-align:center; color:#9ca3af; font-size:14px; line-height:1.625; }
.donate-option a { display:block; width:100%; padding:12px 16px; border-radius:8px; background:var(--color-brand-primary-hover); text-align:center; color:#fff; font-size:14px; font-weight:500; }
.donate-option a:hover { background:var(--color-brand-primary); }
.donate-option a.donate-kofi { background:#db2777; }
.donate-option a.donate-kofi:hover { background:#ec4899; }
.faq-panel { padding:8px; }
.faq-item + .faq-item { border-top:1px solid #37415180; }
.faq-item summary { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; padding:20px 12px; text-align:left; }
.faq-item summary:hover { background:#ffffff05; }
.faq-question { display:flex; align-items:center; gap:12px; min-width:0; color:#fff; font-size:18px; font-weight:500; }
.faq-question>.icon { width:20px; height:20px; color:color-mix(in srgb,var(--color-brand-primary) 75%,white); }
.faq-item summary>.icon { width:20px; height:20px; color:#6b7280; transition:transform .2s; }
.faq-item[open] summary>.icon { transform:rotate(180deg); }
.faq-answer { padding:0 12px 20px 44px; color:#d1d5db; line-height:1.625; }
.faq-answer p + p { margin-top:12px; }
.faq-answer a { color:var(--color-brand-primary); font-weight:500; }
.faq-answer a:hover { text-decoration:underline; opacity:.9; }
.categories-page { width:100%; }
.categories-header { margin-bottom:24px; background:linear-gradient(90deg,#080a0ff0 0%,#080a0fe6 52%,#080a0fd5 100%),url('/assets/b52e5125bfb9ee2c/category-header.webp') center/cover; }
.categories-header .eyebrow { margin:0; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.16em; }
.categories-header h1 { margin-top:2px; }
.categories-header>div { min-width:0; flex:1; }
.categories-header>div>p:not(.eyebrow) { max-width:48rem; font-size:14px; line-height:1.625; }
.categories-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; padding-top:12px; border-top:1px solid #ffffff0f; font-size:12px; color:#6b7280; }
.categories-meta span { padding:6px 10px; border:1px solid #ffffff14; border-radius:4px; background:#0003; }
.categories-meta strong { color:#d1d5db; }
.category-search { position:relative; max-width:36rem; margin-bottom:30px; }
.category-search>.icon { position:absolute; top:50%; left:12px; transform:translateY(-50%); width:14px; height:14px; color:#4b5563; }
.category-search input { width:100%; padding:10px 12px 10px 36px; border:1px solid #ffffff14; border-radius:8px; outline:none; background:#ffffff08; color:#e5e7eb; font-size:14px; }
.category-search input::placeholder { color:#4b5563; }
.category-search input:focus { border-color:color-mix(in srgb,var(--color-brand-primary) 40%,transparent); }
.category-groups { display:grid; gap:28px; }
.category-group-heading { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.category-group-heading img { width:40px; height:40px; object-fit:cover; border-radius:8px; background:#111827; box-shadow:0 0 0 1px #ffffff1a; }
.category-group-title { display:flex; align-items:center; gap:8px; }
.category-group-title .icon { width:14px; height:14px; color:var(--color-brand-primary); }
.category-group-title h2 { color:#d1d5db; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; }
.category-group-count { color:#4b5563; font-size:11px; }
.category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.category-card { display:flex; flex-direction:column; gap:12px; padding:16px; border:1px solid #ffffff14; border-radius:8px; background:#ffffff05; }
.category-card:hover { border-color:color-mix(in srgb,var(--color-brand-primary) 20%,transparent); background:color-mix(in srgb,var(--color-brand-primary) 3%,transparent); }
.category-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.category-card h3 { color:#fff; font-size:14px; font-weight:600; }
.category-card:hover h3 { color:color-mix(in srgb,var(--color-brand-primary) 45%,white); }
.category-card code { color:color-mix(in srgb,var(--color-brand-primary) 70%,transparent); font-size:11px; }
.category-card-head>span { flex:none; color:#9ca3af; font-size:12px; font-variant-numeric:tabular-nums; }
.category-card>p { flex:1; color:#6b7280; font-size:12px; line-height:1.625; }
.category-actions { display:flex; flex-wrap:wrap; gap:8px; }
.category-actions a { padding:6px 10px; border:1px solid #ffffff14; border-radius:4px; background:#ffffff08; color:#d1d5db; font-size:12px; }
.category-actions a:hover { border-color:color-mix(in srgb,var(--color-brand-primary) 30%,transparent); color:#fff; }
.category-actions a.category-advanced { border-color:color-mix(in srgb,var(--color-brand-primary) 20%,transparent); background:color-mix(in srgb,var(--color-brand-primary) 8%,transparent); color:color-mix(in srgb,var(--color-brand-primary) 40%,white); }
.category-actions a.category-advanced:hover { background:color-mix(in srgb,var(--color-brand-primary) 14%,transparent); }
.category-empty { padding:32px; text-align:center; color:#6b7280; font-size:14px; }
.categories-page [hidden] { display:none!important; }
.tools-page { width:100%; }
.tools-header { margin-bottom:24px; }
.tools-header .eyebrow { margin:0; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.16em; }
.tools-header h1 { margin-top:2px; }
.tools-header>div>p:not(.eyebrow) { font-size:14px; line-height:1.625; }
.tools-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.tool-card { display:flex; flex-direction:column; gap:8px; padding:16px; border:1px solid #ffffff14; border-radius:8px; background:#ffffff05; }
.tool-card:hover { border-color:color-mix(in srgb,var(--color-brand-primary) 30%,transparent); background:color-mix(in srgb,var(--color-brand-primary) 4%,transparent); }
.tool-card>div { display:flex; align-items:center; gap:8px; }
.tool-card .icon { width:20px; height:20px; color:color-mix(in srgb,var(--color-brand-primary) 70%,transparent); }
.tool-card:hover .icon { color:var(--color-brand-primary); }
.tool-card h2 { color:#fff; font-size:16px; font-weight:600; }
.tool-card p { color:#9ca3af; font-size:16px; }
.tool-card:hover p { color:#d1d5db; }
.scan-header { margin-bottom:16px; }
.scan-header .eyebrow { margin:0; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.16em; }
.scan-header h1 { margin-top:2px; }
.scan-header>div>p:not(.eyebrow) { max-width:48rem; font-size:14px; line-height:1.625; }
.docs-page { width:100%; }
.docs-page [hidden] { display:none!important; }
.docs-header { display:flex; gap:12px; margin-bottom:24px; }
.docs-header .eyebrow { margin:0; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.16em; }
.docs-header h1 { margin-top:2px; }
.docs-header-main { min-width:0; flex:1; }
.docs-header-main>p:not(.eyebrow) { max-width:48rem; font-size:14px; line-height:1.625; }
.docs-try-label { display:inline-flex; padding:2px 6px; border:1px solid color-mix(in srgb,var(--color-brand-primary) 20%,transparent); border-radius:4px; background:color-mix(in srgb,var(--color-brand-primary) 10%,transparent); color:var(--color-brand-primary); font-size:10px; font-weight:500; }
.docs-header-meta { flex:none; align-self:flex-start; display:flex; flex-direction:column; align-items:flex-end; margin-left:auto; color:#6b7280; font-size:12px; text-align:right; }
.docs-header-meta a { color:color-mix(in srgb,var(--color-brand-primary) 80%,transparent); font-family:monospace; }
.docs-header-meta a:hover { color:var(--color-brand-primary); }
.docs-loading { padding:32px; text-align:center; color:#6b7280; font-size:14px; }
.docs-error { display:grid; gap:8px; padding:24px; border:1px solid color-mix(in srgb,var(--color-error) 20.000%,transparent); border-radius:8px; background:color-mix(in srgb,var(--color-error) 5.098%,transparent); color:#fca5a5; font-size:14px; }
.docs-error span { font-size:12px; }
.docs-error button { justify-self:start; padding:6px 12px; border:1px solid color-mix(in srgb,var(--color-error) 30.196%,transparent); border-radius:4px; background:color-mix(in srgb,var(--color-error) 20.000%,transparent); color:#fecaca; font-size:12px; }
.docs-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:24px; }
.docs-sidebar { position:sticky; top:16px; align-self:start; max-height:calc(100vh - 32px); overflow:auto; }
.docs-search { position:relative; display:block; }
.docs-search .icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); width:12px; height:12px; color:#6b7280; pointer-events:none; }
.docs-search input { width:100%; padding:7px 10px 7px 28px; border:1px solid #ffffff1a; border-radius:6px; outline:none; background:#ffffff0a; color:#fff; font-size:12px; }
.docs-search input::placeholder { color:#4b5563; }
.docs-search input:focus,.docs-input:focus,.docs-body-input:focus { border-color:color-mix(in srgb,var(--color-brand-primary) 40%,transparent); }
.docs-count { padding:16px 8px 4px; color:#4b5563; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.docs-nav-group { margin-bottom:2px; }
.docs-nav-group>summary { display:flex; align-items:center; gap:6px; padding:7px 8px; border-radius:4px; color:#d1d5db; font-size:12px; font-weight:500; }
.docs-nav-group>summary:before { content:'›'; color:#6b7280; font-size:14px; line-height:1; }
.docs-nav-group[open]>summary:before { transform:rotate(90deg); }
.docs-nav-group[open]>summary { background:transparent; }
.docs-nav-group>summary:hover { background:#ffffff0a; color:#fff; }
.docs-nav-group>summary span { margin-left:auto; color:#4b5563; font-family:monospace; font-size:10px; }
.docs-nav-tags { margin:2px 0 4px 12px; padding-left:8px; border-left:1px solid #ffffff0f; }
.docs-nav-tags button { display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%; padding:4px 8px; border-radius:4px; color:#9ca3af; font-size:12px; text-align:left; }
.docs-nav-tags button:hover,.docs-nav-tags button.active { background:color-mix(in srgb,var(--color-brand-primary) 8%,transparent); color:color-mix(in srgb,var(--color-brand-primary) 45%,white); }
.docs-nav-tags button span { margin-left:auto; color:#4b5563; font-family:monospace; font-size:10px; }
.docs-content { min-width:0; }
.docs-group { margin-bottom:40px; }
.docs-group>h2 { margin-bottom:32px; padding-bottom:8px; border-bottom:1px solid #ffffff14; color:#fff; font-size:24px; font-weight:700; }
.docs-tag { margin-bottom:32px; scroll-margin-top:16px; }
.docs-tag>h3 { color:#fff; font-size:18px; font-weight:600; text-transform:capitalize; }
.docs-tag-description { margin:4px 0 12px; color:#6b7280; font-size:12px; }
.docs-endpoint-list { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
.docs-endpoint { border:1px solid #ffffff14; border-radius:8px; background:#ffffff05; }
.docs-endpoint:hover { background:#ffffff08; }
.docs-endpoint[open]>summary { background:transparent; }
.docs-endpoint-summary { display:flex; align-items:flex-start; gap:12px; padding:16px; text-align:left; }
.docs-method { flex:none; margin-top:2px; padding:2px 8px; border:1px solid; border-radius:4px; font-family:monospace; font-size:10px; font-weight:600; }
.method-get { border-color:color-mix(in srgb,var(--color-brand-secondary) 20.000%,transparent); background:color-mix(in srgb,var(--color-brand-secondary) 10.196%,transparent); color:var(--color-brand-secondary); }
.method-post { border-color:color-mix(in srgb,var(--color-brand-primary) 20.000%,transparent); background:color-mix(in srgb,var(--color-brand-primary) 10.196%,transparent); color:var(--color-brand-primary); }
.method-put { border-color:#f59e0b33; background:#f59e0b1a; color:#fbbf24; }
.method-patch { border-color:#8b5cf633; background:#8b5cf61a; color:#a78bfa; }
.method-delete { border-color:color-mix(in srgb,var(--color-error) 20.000%,transparent); background:color-mix(in srgb,var(--color-error) 10.196%,transparent); color:var(--color-error); }
.docs-endpoint-title { flex:1; min-width:0; }
.docs-endpoint-path { display:block; overflow:hidden; color:#fff; font-family:monospace; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.docs-path-param { color:var(--color-brand-primary); }
.docs-endpoint-summary-text { display:block; margin-top:2px; color:#9ca3af; font-size:12px; }
.docs-chevron { color:#6b7280; font-size:18px; line-height:1; }
.docs-endpoint[open] .docs-chevron { transform:rotate(180deg); }
.docs-endpoint-body { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; padding:16px; border-top:1px solid #ffffff0f; }
.docs-description { color:#d1d5db; font-size:14px; line-height:1.625; white-space:pre-wrap; }
.docs-returns { display:flex; align-items:center; gap:8px; font-size:12px; }
.docs-returns>span,.docs-endpoint-body h4 { color:#6b7280; font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.08em; }
.docs-returns code { padding:2px 6px; border:1px solid color-mix(in srgb,var(--color-brand-secondary) 14.902%,transparent); border-radius:4px; background:color-mix(in srgb,var(--color-brand-secondary) 5.882%,transparent); color:#6ee7b7; }
.docs-params,.docs-body-section,.docs-request { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
.docs-param-row { display:grid; grid-template-columns:160px minmax(0,1fr); align-items:start; gap:12px; }
.docs-param-label { color:#d1d5db; font-size:12px; }
.docs-param-label code { color:var(--color-brand-primary); }
.docs-param-label small { display:block; margin-top:2px; color:#4b5563; font-size:10px; }
.docs-required { margin-left:3px; color:var(--color-error); }
.docs-param-field { position:relative; }
.docs-input,.docs-body-input { width:100%; padding:6px 10px; border:1px solid #ffffff1a; border-radius:6px; outline:none; background:#ffffff0a; color:#fff; font-size:12px; }
.docs-input::placeholder { color:#4b5563; }
.docs-param-description { margin-top:4px; color:#6b7280; font-size:10px; }
.docs-entity-results { position:absolute; z-index:20; top:100%; left:0; right:0; padding:4px; border:1px solid #ffffff1a; border-radius:6px; background:#171717; box-shadow:0 12px 30px #0009; }
.docs-entity-results button { display:block; width:100%; padding:6px 8px; color:#d1d5db; font-size:12px; text-align:left; }
.docs-entity-results button:hover { background:#ffffff0a; color:#fff; }
.docs-body-field { display:flex; flex-wrap:wrap; gap:6px; align-items:baseline; color:#6b7280; font-size:10px; }
.docs-body-field code { color:#d1d5db; }
.docs-body-input { min-height:150px; padding:8px 12px; background:#0006; font-family:monospace; resize:vertical; }
.docs-request-url { display:block; padding:8px 12px; overflow-wrap:anywhere; border:1px solid #ffffff1a; border-radius:6px; background:#0006; color:#d1d5db; font-family:monospace; font-size:11px; }
.docs-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.docs-actions button { padding:6px 12px; border:1px solid #ffffff1a; border-radius:6px; background:#ffffff0a; color:#d1d5db; font-size:12px; font-weight:500; }
.docs-actions button:hover { background:#ffffff14; }
.docs-actions .docs-run { border-color:color-mix(in srgb,var(--color-brand-primary) 30%,transparent); background:color-mix(in srgb,var(--color-brand-primary) 20%,transparent); color:color-mix(in srgb,var(--color-brand-primary) 40%,white); }
.docs-actions .docs-run:hover { background:color-mix(in srgb,var(--color-brand-primary) 30%,transparent); }
.docs-actions button:disabled { opacity:.5; cursor:wait; }
.docs-request-error { padding:8px 12px; border:1px solid color-mix(in srgb,var(--color-error) 20.000%,transparent); border-radius:6px; background:color-mix(in srgb,var(--color-error) 7.843%,transparent); color:#fca5a5; font-size:12px; }
.docs-response-heading { display:flex; align-items:center; gap:12px; margin-bottom:8px; color:#6b7280; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.docs-response-heading strong { padding:2px 6px; border-radius:4px; font-family:monospace; }
.docs-response-heading strong.success { background:color-mix(in srgb,var(--color-brand-secondary) 10.196%,transparent); color:var(--color-brand-secondary); }
.docs-response-heading strong.failure { background:color-mix(in srgb,var(--color-error) 10.196%,transparent); color:var(--color-error); }
.docs-response-text { max-height:24rem; margin:0; padding:8px 12px; overflow:auto; overflow-wrap:anywhere; border:1px solid #ffffff1a; border-radius:6px; background:#0006; color:#e5e7eb; font-family:monospace; font-size:11px; white-space:pre-wrap; }
.docs-empty { padding:24px; color:#4b5563; text-align:center; font-size:12px; }
@media(max-width:1023px) { .docs-layout { grid-template-columns:minmax(0,1fr); } .docs-sidebar { position:static; max-height:none; } }
@media(max-width:639px) { .docs-header-meta { display:none!important; } .docs-param-row { grid-template-columns:1fr; gap:4px; } }
@media(max-width:1023px) { .category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:1023px) { .tools-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:639px) { .tools-grid { grid-template-columns:1fr; } }
@media(max-width:767px) { .category-grid { grid-template-columns:1fr; } }
@media(max-width:767px) { .info-panel { padding:20px; } .donate-options { grid-template-columns:1fr; } }
.site-footer { padding:32px 8px 12px; font-size:16px; }
.footer-project { display:grid; align-items:center; gap:12px; padding:16px; border:1px solid #ffffff14; border-radius:8px 8px 0 0; background:#ffffff0a; }
.footer-project>a { display:flex; justify-content:center; align-items:center; gap:12px; color:#d1d5db; }
.footer-project strong { font-weight:500; }
.footer-project>a>span { border-left:1px solid #ffffff1f; padding-left:12px; font-size:14px; color:#6b7280; }
.footer-project p { text-align:center; color:#6b7280; font-size:14px; }
.footer-project p a { color:#d1d5db; }
.site-footer a:hover { color:color-mix(in srgb,var(--color-brand-primary) 55%,white); }
.community-links { display:flex; flex-wrap:wrap; justify-content:center; border:1px solid #ffffff14; border-top:0; border-radius:0 0 8px 8px; background:#ffffff0a; padding:16px 8px; }
.community-links a { display:flex; align-items:center; justify-content:center; gap:8px; padding:8px 12px; font-size:14px; color:#9ca3af; width:50%; min-width:0; }
.community-links span { white-space:nowrap; }
.community-links img { width:18px; height:18px; object-fit:contain; filter:grayscale(1); opacity:.7; }
.community-links a:hover img { filter:none; opacity:1; }
.background-controls { position:fixed; bottom:16px; left:16px; display:flex; gap:8px; z-index:9999; }
.floating-button { width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:#0008; color:#9ca3af; border-radius:8px; }
.floating-button .icon { width:16px; height:16px; }
.floating-button:hover { color:var(--color-brand-primary); background:#000b; }
.floating-button[aria-pressed=true] { color:var(--color-brand-primary); background:color-mix(in srgb,var(--color-brand-primary) 30%,transparent); }
.powered-badge { position:fixed; bottom:16px; right:16px; z-index:9999; display:flex; align-items:center; height:36px; border-radius:8px; background:#0008; color:#9ca3af; overflow:hidden; }
.powered-badge-icon { display:flex; align-items:center; justify-content:center; width:36px; height:36px; font-size:13px; font-weight:800; }
.powered-badge-text { max-width:0; opacity:0; white-space:nowrap; font-size:12px; transition:max-width .25s,opacity .25s,padding .25s; }
.powered-badge:hover .powered-badge-text,.powered-badge:focus-visible .powered-badge-text { max-width:180px; opacity:1; padding-right:12px; }
.content,.content-blur,.navbar { transition:opacity .6s; }
.background-view .content,.background-view .content-blur,.background-view .navbar { opacity:0; pointer-events:none; }
.skip-link { position:fixed; left:16px; top:-100px; z-index:10000; padding:8px 16px; background:#111827; }
.skip-link:focus { top:8px; }
dialog { color:white; background:#101010; border:1px solid #ffffff1f; border-radius:12px; padding:0; width:min(680px,calc(100vw - 24px)); max-height:80dvh; box-shadow:0 30px 90px #000b; }
dialog::backdrop { background:#0009; backdrop-filter:blur(8px); }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #ffffff14; }
.dialog-heading h2 { font-size:16px; font-weight:500; color:#d1d5db; }
.search-field { display:flex; gap:12px; align-items:center; padding:16px; color:#6b7280; }
.search-field input { width:100%; font-size:16px; background:transparent; border:0; outline:none; color:white; }
#search-results { padding:8px 16px 20px; max-height:50dvh; overflow:auto; }
#search-results p { color:#6b7280; font-size:14px; }
.search-result { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:8px; font-size:14px; }
.search-result:hover { background:color-mix(in srgb,var(--color-brand-primary) 10%,transparent); color:color-mix(in srgb,var(--color-brand-primary) 55%,white); }
.search-result span:last-child { color:#6b7280; font-size:12px; }
.dialog-footer { display:flex; gap:8px; align-items:center; padding:12px 16px; border-top:1px solid #ffffff14; color:#6b7280; font-size:12px; }
.dialog-footer span { flex:1; }

/* Shared killboard widgets. Their markup is also used by HTML fragments. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.navigation-progress { position:fixed; inset:0 0 auto; z-index:10010; height:3px; overflow:hidden; pointer-events:none; background:color-mix(in srgb,var(--color-brand-primary) 12%,transparent); }
.navigation-progress[hidden] { display:none!important; }
.navigation-progress>span { display:block; width:35%; height:100%; background:var(--color-brand-primary); box-shadow:0 0 8px var(--color-brand-primary); animation:navigation-progress-slide 1.2s ease-in-out infinite; }
.navigation-pending { outline:1px solid var(--color-brand-primary); outline-offset:2px; animation:navigation-source-pulse 1s ease-in-out infinite alternate; }
@keyframes navigation-progress-slide { from { transform:translateX(-35%); } to { transform:translateX(300%); } }
@keyframes navigation-source-pulse { from { outline-color:color-mix(in srgb,var(--color-brand-primary) 35%,transparent); } to { outline-color:var(--color-brand-primary); } }
@media(prefers-reduced-motion:reduce) { .navigation-progress>span { width:100%; } }
.homepage { display:grid; gap:0; }
.home-grid { display:grid; grid-template-columns:250px minmax(0,1fr); gap:16px; align-items:start; }
.home-kills { grid-column:2; grid-row:1; min-width:0; }
.home-top-list { grid-column:1; grid-row:1; min-width:0; }
.kills-page>h1 { margin:0 0 16px; color:var(--color-text-primary); font-size:20px; line-height:28px; font-weight:700; }
.kills-grid { display:grid; grid-template-columns:250px minmax(0,1fr); gap:16px; align-items:start; }
.kills-top-panel { grid-column:1; grid-row:1; min-width:0; }
.kills-list-panel { grid-column:2; grid-row:1; min-width:0; }
.kills-valuable { margin-bottom:24px; padding:12px; }
.kills-mobile-tabs { display:none; }
.valuable { margin-bottom:24px; padding:12px; }
.valuable-tabs { display:flex; gap:4px; margin-bottom:12px; }
.valuable-tab { border-radius:6px; padding:6px 12px; color:#9ca3af; font-size:14px; font-weight:500; line-height:20px; transition:color .15s,background .15s; }
.valuable-tab:hover { color:color-mix(in srgb,var(--color-brand-primary) 55%,white); background:color-mix(in srgb,var(--color-brand-primary) 4%,transparent); }
.valuable-tab.active { color:var(--color-brand-primary); background:color-mix(in srgb,var(--color-brand-primary) 10%,transparent); }
.valuable-tab .tab-short { display:none; }
.valuable-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:8px; }
.valuable-grid.compact { grid-template-columns:repeat(4,minmax(0,1fr)); }
.valuable-card { position:relative; display:block; min-width:0; aspect-ratio:1; overflow:hidden; border:1px solid #ffffff0a; border-radius:8px; background:#0006; }
.valuable-card:hover { border-color:color-mix(in srgb,var(--color-brand-primary) 30%,transparent); }
.valuable-ship { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:8px; transition:transform .3s; }
.valuable-card:hover .valuable-ship { transform:scale(1.1); }
.valuable-shade { position:absolute; inset:auto 0 0; height:66%; background:linear-gradient(transparent,#0008,#000e); pointer-events:none; }
.valuable-isk { position:absolute; top:6px; right:6px; border-radius:4px; padding:2px 6px; background:#0009; color:var(--color-isk-value); font-size:12px; font-weight:600; }
.valuable-labels { position:absolute; inset:auto 10px 10px; display:grid; gap:2px; min-width:0; }
.valuable-labels>* { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; line-height:1.2; }
.valuable-labels strong { font-size:14px; font-weight:600; }
.valuable-labels span { font-size:12px; color:#d1d5dbdd; }
.valuable-labels span:last-child { color:#9ca3afcc; }
.valuable-empty { padding:32px 0; text-align:center; color:#4b5563; font-size:14px; }
.top-box { margin-bottom:16px; padding:8px; }
.top-box h3 { margin:0 4px 4px; padding-bottom:8px; border-bottom:1px solid #ffffff14; color:color-mix(in srgb,var(--color-brand-primary) 55%,white); font-size:12px; line-height:16px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.top-box-entries { display:grid; gap:1px; }
.top-box-entry { position:relative; display:flex; align-items:center; gap:8px; min-width:0; min-height:32px; overflow:hidden; border-radius:6px; padding:4px 8px; color:#9ca3af; transition:color .15s,background .15s; }
.top-accent { position:absolute; inset:0 auto 0 0; width:3px; height:100%; }
.top-box-entry:hover { color:var(--color-brand-primary); background:color-mix(in srgb,var(--color-brand-primary) 6%,transparent); }
.top-rank { width:16px; flex:none; text-align:right; font-size:12px; line-height:16px; }
.top-image { width:24px; height:24px; flex:none; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:4px; background:#ffffff0a; }
.top-image img { width:100%; height:100%; object-fit:cover; }
.top-image .icon { width:13px; height:13px; }
.top-name { flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#d1d5db; font-size:14px; line-height:20px; }
.top-count { flex:none; font-size:12px; line-height:16px; font-variant-numeric:tabular-nums; }
.top-footer { padding:6px 8px 0; color:#9ca3af; font-size:12px; line-height:16px; }
.top-box-loading .top-image,.top-skeleton-line,.top-skeleton-count { border-radius:4px; background:#ffffff12; animation:top-box-pulse 1.5s ease-in-out infinite alternate; }
.top-skeleton-line,.top-skeleton-count { height:12px; }
.top-skeleton-count { width:36px; }
.top-box-retry { display:block; width:100%; padding:18px 8px; color:var(--color-brand-primary); font-size:12px; text-align:center; }
.top-box-retry:hover { background:color-mix(in srgb,var(--color-brand-primary) 6%,transparent); }
@keyframes top-box-pulse { to { opacity:.4; } }
.kill-list { min-width:0; padding:8px; border:1px solid #ffffff14; border-radius:8px; background:#ffffff0a; }
.kill-toolbar { display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:8px; margin-bottom:8px; }
.kill-toolbar-left { display:flex; align-items:center; gap:8px; min-width:0; }
.kill-live-dot { width:8px; height:8px; flex:none; border-radius:50%; background:var(--color-error); }
.kill-live-dot.connected { background:var(--color-success); }
.new-kills { flex:none; border-radius:999px; padding:2px 8px; background:color-mix(in srgb,var(--color-brand-primary) 20%,transparent); color:var(--color-brand-primary); font-size:12px; font-weight:600; }
.kill-limits { display:flex; align-items:center; gap:2px; }
.kill-limit,.kill-filter-trigger { border-radius:4px; padding:4px 8px; color:#9ca3af; font-size:14px; font-weight:500; }
.kill-limit:hover,.kill-filter-trigger:hover { color:color-mix(in srgb,var(--color-brand-primary) 55%,white); background:color-mix(in srgb,var(--color-brand-primary) 4%,transparent); }
.kill-limit.active,.kill-filter-trigger[aria-expanded=true] { color:var(--color-brand-primary); background:color-mix(in srgb,var(--color-brand-primary) 10%,transparent); }
.kill-filter-trigger { display:flex; align-items:center; padding:4px 6px; }
.kill-filter-trigger .icon { width:14px; height:14px; }
.kill-day-heading { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:center; color:#d1d5db; font-size:14px; font-weight:500; }
.kill-pager { display:flex; align-items:center; justify-content:flex-end; gap:3px; color:#d1d5db; font-size:14px; }
.kill-pager button { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:4px; color:#9ca3af; font-size:20px; }
.kill-pager button:hover:not(:disabled) { background:color-mix(in srgb,var(--color-brand-primary) 6%,transparent); color:var(--color-brand-primary); }
.kill-pager button:disabled { opacity:.3; cursor:default; }
.kill-pager span { padding:0 8px; white-space:nowrap; }
.kill-pager .kill-page-number { width:auto; min-width:28px; padding:0 7px; font-size:14px; font-weight:500; }
.kill-pager .kill-page-number.active { color:var(--color-brand-primary); background:color-mix(in srgb,var(--color-brand-primary) 15%,transparent); }
.kill-pager .kill-page-ellipsis { color:#4b5563; padding:0 2px; }
.kill-bottom-pager { display:flex; justify-content:flex-end; margin-top:8px; }
.kill-empty { padding:48px 0; text-align:center; color:#4b5563; font-size:14px; }
.kill-filter-panel { margin-bottom:8px; padding:12px; border:1px solid #ffffff14; border-radius:8px; color:#9ca3af; font-size:12px; }
.kill-filter-panel[hidden] { display:none; }
.kill-filter-searches { display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; }
.kill-filter-search { position:relative; flex:1; min-width:160px; }
.kill-filter-search label { display:block; margin-bottom:4px; color:#6b7280; font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.kill-filter-input-wrap { display:flex; align-items:center; border:1px solid #ffffff14; border-radius:4px; background:#ffffff0a; }
.kill-filter-input-wrap:focus-within { border-color:color-mix(in srgb,var(--color-brand-primary) 40%,transparent); }
.kill-filter-input-wrap input { width:100%; min-width:0; padding:6px 8px; border:0; outline:0; background:transparent; color:#e5e7eb; font-size:12px; }
.kill-filter-input-wrap input::placeholder { color:#4b5563; }
.kill-filter-input-wrap button { padding:2px 8px; color:#6b7280; font-size:16px; }
.kill-filter-input-wrap button:hover { color:var(--color-error); }
.kill-filter-suggestions { position:absolute; z-index:30; top:100%; left:0; right:0; max-height:224px; overflow:auto; margin-top:4px; border:1px solid #ffffff1f; border-radius:6px; background:#0f1115; box-shadow:0 12px 30px #0009; }
.kill-filter-suggestions[hidden] { display:none; }
.kill-filter-suggestions button { display:block; width:100%; overflow:hidden; padding:7px 10px; text-align:left; color:#d1d5db; font-size:12px; white-space:nowrap; text-overflow:ellipsis; }
.kill-filter-suggestions button:hover { background:color-mix(in srgb,var(--color-brand-primary) 15%,transparent); }
.kill-filter-options { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:12px; }
.kill-filter-options button { border:1px solid #ffffff14; border-radius:4px; padding:4px 8px; color:#6b7280; font-size:12px; font-weight:500; }
.kill-filter-options button:hover { color:var(--color-brand-primary); background:color-mix(in srgb,var(--color-brand-primary) 4%,transparent); }
.kill-filter-options button[aria-pressed=true] { color:var(--color-brand-primary); background:color-mix(in srgb,var(--color-brand-primary) 15%,transparent); border-color:color-mix(in srgb,var(--color-brand-primary) 30%,transparent); }
.kill-filter-options .kill-filter-clear-all { margin-left:auto; border:0; font-size:10px; }
.kill-filter-options .kill-filter-clear-all:hover { color:var(--color-error); }
.kill-head,.kill-row { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,2.5fr) minmax(0,2.5fr) minmax(0,1.2fr) minmax(0,1fr); gap:12px; }
.kill-head { padding:6px 8px; border-bottom:1px solid #ffffff14; color:#9ca3af; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.kill-head span:last-child { text-align:right; }
.kill-row { position:relative; align-items:center; min-width:0; padding:6px 8px; border-bottom:1px solid #ffffff08; transition:background .15s; }
.kill-row.alternate { background:#ffffff05; }
.kill-row:hover { background:color-mix(in srgb,var(--color-brand-primary) 6%,transparent); }
.kill-row-overlay { position:absolute; inset:0; z-index:0; }
.kill-row>div { position:relative; z-index:1; min-width:0; pointer-events:none; }
.kill-row a:not(.kill-row-overlay) { pointer-events:auto; }
.kill-row:hover .kill-ship-copy>a,
.kill-row a:not(.kill-row-overlay):is(:hover,:focus-visible) { color:var(--color-brand-primary); }
.kill-ship,.kill-identity,.kill-location { display:flex; align-items:center; gap:10px; min-width:0; }
.kill-portrait { width:40px; height:40px; flex:none; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:4px; background:#ffffff0a; }
.kill-portrait img { width:100%; height:100%; object-fit:cover; }
.kill-image-empty { color:#6b7280; }
.kill-image-empty .icon { width:16px; height:16px; }
.kill-ship-copy,.kill-identity-copy,.kill-location>div { display:grid; min-width:0; line-height:1.25; }
.kill-ship-copy>* ,.kill-identity-copy>* ,.kill-location>div>* { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.kill-ship-copy>a,.kill-ship-copy>span:first-child,.identity-primary { color:#d1d5db; font-size:14px; line-height:20px; }
.kill-ship-group,.kill-identity-copy>a:not(.identity-primary),.kill-region { color:#9ca3af; font-size:12px; line-height:16px; }
.kill-ship-isk { color:color-mix(in srgb,var(--color-isk-value) 70%,transparent); font-size:12px; line-height:16px; font-variant-numeric:tabular-nums; }
.kill-mobile-summary,.kill-mobile-location,.kill-mobile-isk { display:none; }
.kill-identity-badges { display:grid; gap:2px; flex:none; }
.kill-identity-badges a,.kill-identity-badges img { display:block; width:19px; height:19px; border-radius:2px; }
.kill-identity-badges a { background:#ffffff0a; }
.identity-primary.npc { color:color-mix(in srgb,var(--color-npc-text) 80%,transparent); }
.kill-location-icon { width:24px; height:24px; flex:none; }
.kill-location-icon img { width:100%; height:100%; border-radius:4px; }
.image-fallback { display:flex; width:100%; height:100%; align-items:center; justify-content:center; color:#6b7280; font-size:16px; line-height:1; }
.kill-location>div>span { font-size:12px; line-height:16px; }
.kill-location>div>span>a { color:#d1d5db; }
.kill-location em,.kill-mobile-location em { font-style:normal; font-weight:500; font-variant-numeric:tabular-nums; }
.security-high { color:var(--color-highsec); }.security-low { color:var(--color-lowsec); }.security-null { color:var(--color-nullsec); }.security-unknown { color:#9ca3af; }
.kill-details { display:grid; gap:3px; justify-items:end; font-size:14px; color:#d1d5db; font-variant-numeric:tabular-nums; }
.kill-attacker-count { display:flex; align-items:center; gap:4px; color:#9ca3af; font-size:12px; }
.kill-attacker-count .icon { width:12px; height:12px; }
.kill-day-divider { display:flex; align-items:center; gap:12px; padding:8px; color:#9ca3af; font-size:12px; text-transform:uppercase; letter-spacing:.07em; }
.kill-day-divider span { flex:1; height:1px; background:#ffffff14; }
.kill-day-divider strong { font-weight:500; }
@media(max-width:1023px) { .valuable-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:767px) {
  .home-grid { grid-template-columns:minmax(0,1fr); }
  .home-kills,.home-top-list { grid-column:1; grid-row:auto; }
  .kills-grid { display:block; }
  .kills-mobile-tabs { display:flex; margin-bottom:16px; border-bottom:1px solid #ffffff14; }
  .kills-mobile-tabs button { display:flex; flex:1; align-items:center; justify-content:center; gap:8px; padding:12px 4px; border-bottom:2px solid transparent; color:#6b7280; font-size:14px; font-weight:500; }
  .kills-mobile-tabs button:hover { color:var(--color-brand-primary); }
  .kills-mobile-tabs button[aria-selected=true] { color:var(--color-text-primary); border-color:var(--color-brand-primary); }
  .kills-mobile-tabs .icon { width:16px; height:16px; }
  .kills-page :is(.kills-valuable-panel,.kills-top-panel,.kills-list-panel) { display:none; }
  .kills-page[data-tab=kills] .kills-list-panel,.kills-page[data-tab=top] .kills-top-panel,.kills-page[data-tab=valuable] .kills-valuable-panel { display:block; }
  .valuable-grid.kills-valuable-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .valuable-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .valuable-card-secondary { display:none; }
  .valuable-tab .tab-long { display:none; }.valuable-tab .tab-short { display:inline; }
  .kill-toolbar { grid-template-columns:auto minmax(0,1fr); }
  .kill-day-heading { min-width:0; justify-self:stretch; }.kill-toolbar>.kill-pager { grid-column:1/-1; justify-content:center; }
  .kill-head,.kill-identity,.kill-location { display:none; }
  .kill-row { grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:8px; }
  .kill-ship-group,.kill-ship-isk,.kill-attacker-count { display:none; }
  .kill-mobile-summary,.kill-mobile-location,.kill-mobile-isk { display:block; font-size:10px; color:#9ca3af; }
  .kill-mobile-isk { color:color-mix(in srgb,var(--color-isk-value) 80%,transparent); margin-bottom:12px; }
}
@media(max-width:639px) { .valuable-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.valuable-grid.kills-valuable-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.valuable-labels { inset:auto 6px 6px; } }
@media(min-width:640px) { .community-links a { width:33.333%; } }
@media(min-width:768px) { .site-footer { padding-left:40px; padding-right:40px; } .footer-project { grid-template-columns:1fr 1fr; gap:24px; } .footer-project>a { justify-content:flex-start; } .footer-project p { text-align:right; } .community-links a { width:25%; } .community-links span { font-size:12px; } }
@media(min-width:1024px) { .home-link span { display:inline; } .nav-search { margin:0 16px; } .search-trigger { width:100%; max-width:448px; justify-content:flex-start; padding:0 16px; } .search-trigger span { display:block; } .community-links a { width:20%; } }
@media(min-width:1280px) { .search-trigger kbd { display:block; } .search-trigger kbd+kbd { margin-left:-10px; } .community-links { flex-wrap:nowrap; padding-left:12px; padding-right:12px; } .community-links a { width:auto; flex:1; gap:6px; padding-left:4px; padding-right:4px; } }
@media(min-width:1536px) { .secondary-link { display:flex; } .nav-search { margin:0 24px; } }
@media(max-width:1023px) { .mega-menu { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:767px) {
 .navbar { height:48px; }
 .nav-inner { padding:0 12px; gap:8px; }
 .nav-left { flex:none; }
 .nav-search { flex:1; margin:0; }
 .nav-backdrop { mask:none; background:linear-gradient(#000b,#0006,transparent); }
 .home-link { width:32px; height:32px; padding:0; justify-content:center; }
 .desktop-links,.desktop-actions { display:none; }
 .search-trigger { height:32px; width:100%; padding:0 12px; justify-content:flex-start; border-radius:6px; font-size:14px; gap:8px; }
 .search-trigger span { display:block; }
 .search-trigger .icon { width:16px; height:16px; }
 .mobile-navigation { display:block; }
 .mobile-panel { position:fixed; inset:0; z-index:60; overflow:auto; background:rgba(5,5,5,.98); padding:12px 16px 64px; }
 .mobile-title { display:flex; justify-content:space-between; align-items:center; padding-bottom:16px; font-weight:700; }
 .mobile-section { border-top:1px solid #ffffff14; }
 .mobile-section>summary { display:flex; justify-content:space-between; align-items:center; padding:14px 12px; font-size:16px; }
 .mobile-section .menu-group { padding-left:8px; }
 .mobile-section .login-form { padding:0 12px 16px; }
 .mobile-section h2,.mobile-section>p { padding:8px 12px; }
 .mobile-section .sso-button { max-width:270px; }
 .site-footer { padding-bottom:64px; }
 .dialog-footer span { display:none; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }

@media(min-width:1280px) { .mega-menu { grid-template-columns:repeat(6,minmax(0,1fr)); } }

.mobile-menu-open { overflow:hidden; }
.mobile-menu-open .background-controls,.mobile-menu-open .powered-badge { visibility:hidden; }
.kill-submit-toasts{position:fixed;z-index:10000;bottom:16px;left:50%;display:flex;flex-direction:column;gap:8px;max-width:calc(100vw - 32px);transform:translateX(-50%);pointer-events:none}.kill-submit-toast{padding:10px 16px;border:1px solid color-mix(in srgb,var(--color-brand-primary) 30.196%,transparent);border-radius:8px;background:color-mix(in srgb,var(--color-brand-primary) 10.196%,transparent);backdrop-filter:blur(12px);box-shadow:0 12px 24px #0006;color:#93c5fd;font:inherit;font-size:14px;white-space:nowrap;cursor:pointer;pointer-events:auto}.kill-submit-toast.success{border-color:color-mix(in srgb,var(--color-success) 30.196%,transparent);background:color-mix(in srgb,var(--color-success) 10.196%,transparent);color:#86efac}.kill-submit-toast.error{border-color:color-mix(in srgb,var(--color-error) 30.196%,transparent);background:color-mix(in srgb,var(--color-error) 10.196%,transparent);color:#fca5a5}
.kill-ready-toasts{position:fixed;top:64px;right:16px;z-index:10000;display:flex;flex-direction:column;gap:8px;width:288px;max-width:calc(100vw - 32px);pointer-events:none}.kill-ready-toast{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:1px solid color-mix(in srgb,var(--color-brand-primary) 30.196%,transparent);border-radius:12px;background:#000d;backdrop-filter:blur(12px);box-shadow:0 12px 28px #0009;text-align:left;font:inherit;cursor:pointer;pointer-events:auto}.kill-ready-toast:hover{background:color-mix(in srgb,var(--color-brand-primary) 10.196%,transparent)}.kill-ready-toast>img{width:48px;height:48px;flex:none;overflow:hidden;border-radius:6px;background:#0006}.kill-ready-toast>span{flex:1;min-width:0}.kill-ready-toast b,.kill-ready-toast strong,.kill-ready-toast small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kill-ready-toast b{margin-bottom:2px;color:var(--color-brand-primary);font-size:11px;letter-spacing:.08em;text-transform:uppercase}.kill-ready-toast strong{color:#fff;font-size:14px;font-weight:400}.kill-ready-toast small{color:#9ca3af;font-size:11px}.kill-ready-toast small em{color:var(--color-success);font-style:normal}.kill-ready-toast>i{color:#6b7280;font-style:normal}