/* HYDRA Guild Website - Design System (matches torreybot.com) */

:root {

    /* ===== Design tokens (Item A, 2026-08-27) =====
       13 canonical palette colors + 6 derived tint helpers.
       These are the only raw UI-chrome colors in the system; everything
       else is expressed as one of them or as a color-mix() of them. */

    /* canonical palette */
    --bg: #1a1a1a;
    --bg-elevated: #2a2a2a;
    --surface: #3a3a3a;
    --border: #4a4a4a;
    --text: #e0e0e0;
    --text-muted: #9ca3af;
    --gold: #d4af37;
    --gold-dim: #c9a959;
    --red: #ef4444;
    --red-dim: #f87171;
    --green: #4ade80;
    --blue: #5dade2;
    --purple: #b877d9;

    /* tint helpers - derived, kept only where used 5+ times.
       One-off tints are written inline as color-mix() at the call site. */
    --green-bg: color-mix(in srgb, var(--green) 16%, var(--bg));
    --green-deep: color-mix(in srgb, var(--green) 42%, var(--bg));
    --gold-soft: color-mix(in srgb, var(--gold) 45%, var(--text));
    --blue-bg: color-mix(in srgb, var(--blue) 16%, var(--bg));
    --blue-deep: color-mix(in srgb, var(--blue) 42%, var(--bg));
    --blue-soft: color-mix(in srgb, var(--blue) 45%, var(--text));

    /* compat aliases - the last three, referenced only by routes/roster-intel.tsx,
       which is held out of this cleanup. Do not use in new code. The other eight
       (background-primary/secondary/tertiary, border-light, apple-blue/green/red/
       orange) existed only for islands/EPGPTabs.tsx and went with its tokenization. */
    --text-primary: var(--text);
    --text-secondary: var(--text-muted);
    --text-tertiary: var(--text-muted);

    /* layout heights. ONE source of truth for how tall the fixed header is, so
       body padding-top, the sticky sub-tab bar and the decoration apron can
       never drift apart again. Before this, body padding-top and .subtabs top
       were both a hand-typed 90px while the header actually ends at 95px: the
       decoration overlapped the sub-tab bar by 5px, and the 29px band between
       the nav bar and the sub-tabs had NO backdrop at all -- .nav-decoration is
       a transparent PNG, so page content scrolled visibly through it.
       --nav-h is the nav bar itself (60px row + 1px border); --header-h is the
       whole block including the 34px decoration apron hanging below the bar.
       NOTE: usable in offsets and heights, but NEVER inside a media feature -
       custom properties are not allowed in media feature values. */
    --nav-h: 61px;
    --header-h: 95px;
    /* Height of the sticky sub-navigation bar (.subtabs), which pins at
       top: var(--header-h) with z-index 900. Anything else that wants to be
       sticky on a hub page has to sit BELOW it, not behind it. Measured 49.8px
       at 1400, 1024, 700, 400 and 360 wide (the bar scrolls horizontally and
       never wraps), so a constant is correct - islands/ProfessionsDirectory
       still re-measures it with a ResizeObserver and overrides this locally,
       so the offset tracks if the bar ever changes height. */
    --subtabs-h: 50px;

    /* layout widths.
       NOTE: usable in width/max-width, but NEVER inside a media feature -
       custom properties are not allowed in media feature values. */
    --container: 1280px;
    --w-medium: 900px;
    --w-narrow: 700px;
    --w-tight: 400px;

    /* type scale - 6 sizes; hierarchy beyond this uses weight and color */
    --fs-xs: 11px;
    --fs-sm: 13px;
    --fs-base: 14px;
    --fs-lg: 17px;
    --fs-xl: 22px;
    --fs-2xl: 36px;

    /* WoW class colors */
    --class-warrior: #c79c6e;
    --class-paladin: #f58cba;
    --class-hunter: #abd473;
    --class-rogue: #fff569;
    --class-priest: #ffffff;
    --class-shaman: #0070de;
    --class-mage: #69ccf0;
    --class-warlock: #9482c9;
    --class-druid: #ff7d0a;

    /* ===== inline-token sweep additions (item A, second half, 2026-08-27) =====
       Three new literal values, added because 78 inline occurrences had no
       token within delta-E 12 and folding them into an existing token would
       have been a visible, wrong-looking change. */

    /* UI accent. The palette had no step between --gold (#d4af37) and --red
       (#ef4444), and ~40 inline literals across warning / pending / tentative
       states sat in that gap as ten near-identical ambers. One token now. */
    --orange: #ff9500;

    /* Brand colour, exact like the class colours: every occurrence in the tree
       is a Discord call to action, so it must not drift toward --blue. */
    --discord: #5865f2;
    /* The Discord brand hover shade. Was four hand-typed var(--discord-hover) literals;
       81% of the brand colour reproduces it to within a rounding step, so the
       two can never drift apart when the brand colour changes. */
    --discord-hover: color-mix(in srgb, var(--discord) 81%, black);

    /* Raid-zone identity colours. The same categorical eight-colour map is
       repeated verbatim in AttendanceTabs, BossKillsChart, RaidBreakdownChart,
       RaidTimelineItem and turtlelogs. Aliases of existing tokens except
       Blackwing Lair cardinal red, which has no equivalent in the palette.
       AQ and ZG move a little (delta-E 5.5 and 7.3) to avoid two more literals. */
    --raid-mc:      var(--class-druid);       /* #ff7d0a, unchanged */
    --raid-bwl:     #c41e3a;                  /* unchanged */
    --raid-aq:      var(--quality-epic);      /* was #a330c9, dE 5.5 */
    --raid-zg:      var(--green);             /* was #00ff96, dE 7.3 */
    --raid-naxx:    var(--class-shaman);      /* #0070de, unchanged */
    --raid-ony:     var(--class-warrior);     /* #c79c6e, unchanged */
    --raid-emerald: var(--quality-uncommon);  /* #1eff00, unchanged */

    /* item quality colors */
    --quality-poor: #9d9d9d;
    --quality-common: #ffffff;
    --quality-uncommon: #1eff00;
    --quality-rare: #0070dd;
    --quality-epic: #a335ee;
    --quality-legendary: #ff8000;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    padding-top: var(--header-h); /* fixed nav bar + its decoration apron */
    /* Sticky footer. .footer has carried `margin-top:auto` for the whole life
       of this stylesheet, but auto margins only absorb free space inside a flex
       container, so on every page shorter than the viewport it did nothing and
       the footer floated with dead background beneath it. One column here makes
       that existing rule live on every page at once. .nav is position:fixed so
       it is not a flex item; .subtabs, the page body and .footer are. */
    display: flex;
    flex-direction: column;
}

/* Navigation. Solid var(--bg-elevated) -- the same token .nav::after, the
   decoration fill and .subtabs already use -- so the bar, the decorative
   apron and the sub-tab row read as one flush opaque block. This used to be
   a translucent rgba(...,0.6) with a backdrop blur; with no opaque backing
   the page content (H1s, gold accents) blended through at 60% alpha and
   showed as a visible seam at the top of the header block. There is nothing
   left behind an opaque bar to blur, so the blur is dropped too rather than
   kept as dead weight. */
.nav {
    background: var(--bg-elevated);
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    overflow: visible;
    margin-bottom: 30px;
}

/* The decoration apron. .nav-decoration is a TRANSPARENT png hung 35px below
   the bar, so by itself it painted nothing behind its own artwork and the page
   scrolled visibly through the band between the nav bar and the sticky sub-tab
   bar. This fills that band with the same opaque colour the sub-tab bar uses,
   so nav bar + apron + sub-tabs read as one solid block. It sits BELOW
   .nav-decoration (z-index 100) so the artwork still paints on top of it, and
   below the mobile drawer (z-index 999) so that still covers it when open. */
.nav::after {
    content: "";
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    height: calc(var(--header-h) - var(--nav-h));
    background: var(--bg-elevated);
    z-index: 99;
    pointer-events: none;
}

.nav-container {
    max-width: none;
    gap: 16px;
    padding-left: 20px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 60px;
    overflow: visible;
}

.nav-brand {
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    font-size: var(--fs-lg);
}

.nav-brand img {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    object-fit: contain;
    flex-shrink: 0;
    /* filter removed for animated icon */
    position: relative;
    top: -2px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    flex-wrap: nowrap;
}

.nav-link {
    color: var(--text-muted);
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: var(--fs-sm);
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.nav-link:hover {
    color: var(--text);
    background: var(--surface);
}

.nav-link.active {
    color: var(--blue);
    background: rgba(87, 148, 242, 0.1);
}

.nav-external {
    color: var(--gold);
}

.nav-external:hover {
    color: var(--gold);
    background: rgba(255, 152, 48, 0.1);
}

/* Dropdown Menu */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-dropdown-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: var(--fs-sm);
    font-weight: 500;
    font-family: inherit;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.nav-dropdown-toggle:hover {
    color: var(--text);
    background: var(--surface);
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    min-width: fit-content;
    margin-top: 8px;
    padding: 8px 0;
    z-index: 1000;
}

.nav-dropdown-menu.show {
    display: block !important;
}

.show-dropdown {
    display: block !important;
}

.nav-dropdown-toggle {
    cursor: pointer;
    user-select: none;
    color: var(--gold) !important;
}

.nav-dropdown-toggle:hover {
    color: var(--gold) !important;
    background: rgba(255, 152, 48, 0.1);
}

.nav-dropdown-item {
    display: block;
    padding: 10px 16px;
    color: var(--text);
    text-decoration: none;
    font-size: var(--fs-sm);
    transition: background-color 0.2s;
    white-space: nowrap;
}

.nav-dropdown-item:hover {
    background: var(--surface);
    color: var(--text);
}

/* External Resources dropdown items use orange */
.nav-dropdown-item-external {
    display: block;
    padding: 10px 16px;
    color: var(--gold) !important;
    text-decoration: none;
    font-size: var(--fs-sm);
    transition: background-color 0.2s;
    white-space: nowrap;
}

.nav-dropdown-item-external:hover {
    background: var(--surface);
    color: var(--gold) !important;
}

/* Mobile Nav */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text);
    font-size: var(--fs-xl);
    cursor: pointer;
}

@media (max-width: 768px) {
    .nav-container {
        justify-content: space-between;
        padding: 0 16px;
    }

    .nav-toggle {
        display: block;
    }

    .nav-links {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background: var(--bg-elevated);
        flex-direction: column;
        padding: 50px 16px 16px 16px;
        border-bottom: 1px solid var(--border);
        z-index: 999;
        /* 2026-08-31 mobile menu fix: the open hamburger panel is taller than
           the fixed 60px .nav bar, and with no max-height or overflow-y it
           painted past the viewport bottom where body scrolling could never
           reach it. Cap the panel at the remaining viewport height and scroll
           INSIDE it. 100vh fallback for browsers without dvh; safe-area
           padding so the last item clears the iOS home bar, and scroll
           padding so the last row never sits half-clipped at the edge. */
        max-height: calc(100vh - 60px);
        max-height: calc(100dvh - 60px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        scroll-padding-bottom: 24px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    .nav-links.open {
        display: flex;
    }

    .nav-link {
        width: 100%;
        text-align: center;
    }

    .nav-dropdown-menu {
        display: none;
        position: static;
        box-shadow: none;
        border: none;
        margin-top: 0;
        padding-left: 20px;
        background: var(--surface);
    }

    .nav-dropdown-menu.show {
        display: block !important;
    }

    .nav-dropdown-toggle {
        width: 100%;
        text-align: center;
    }
}

/* Main Container */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 24px 20px;
}

/* Page Header */
.page-header {
    margin-bottom: 32px;
}

.page-title {
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.page-subtitle {
    color: var(--text-muted);
    font-size: var(--fs-lg);
}

/* Cards */
.card {
    background: linear-gradient(135deg, rgba(42, 42, 46, 0.75) 0%, rgba(31, 31, 35, 0.75) 100%);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-top-color: rgba(255, 215, 0, 0.4);
    border-bottom-color: rgba(139, 69, 19, 0.5);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 20px rgba(0, 0, 0, 0.3);
    position: relative;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 6px;
    background-image: url('/images/Maraudon_Redrawn_Loading_Screen.png');
    background-size: cover;
    background-position: center;
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
}

.card > * {
    position: relative;
    z-index: 1;
}

/* Card background variants for different page themes */
.card-bg-scholomance::before {
    background-image: url('/images/naxx-real.jpg') !important;
    opacity: 0.15 !important;
}

.card-bg-naxxramas::before {
    background-image: url('/images/naxx-real.jpg') !important;
    opacity: 0.15 !important;
}

.card-bg-blackrock::before {
    background-image: url('/images/bwl-real.jpg') !important;
    opacity: 0.15 !important;
}

.card-bg-stratholme::before {
    background-image: url('/images/mc-real.jpg') !important;
    opacity: 0.15 !important;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.card-title {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text);
}

.card-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: var(--fs-sm);
    font-weight: 500;
}

.badge-blue { background: rgba(87, 148, 242, 0.2); color: var(--blue); }
.badge-green { background: rgba(115, 191, 105, 0.2); color: var(--green); }
.badge-orange { background: rgba(255, 152, 48, 0.2); color: var(--gold); }
.badge-red { background: rgba(242, 73, 92, 0.2); color: var(--red); }
.badge-purple { background: rgba(184, 119, 217, 0.2); color: var(--purple); }
.badge-gray { background: rgba(142, 142, 147, 0.2); color: var(--text-muted); }

/* Buttons - WoW Style */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: var(--fs-sm);
    position: relative;
    overflow: hidden;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, rgba(87, 148, 242, 1) 0%, rgba(78, 138, 230, 0.9) 100%);
    color: white;
    border: 2px solid rgba(135, 178, 255, 0.5);
    border-top-color: rgba(178, 202, 255, 0.8);
    border-bottom-color: rgba(45, 98, 182, 0.8);
    box-shadow:
        0 2px 8px rgba(87, 148, 242, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.btn-primary:hover {
    background: linear-gradient(135deg, rgba(78, 138, 230, 1) 0%, rgba(87, 148, 242, 0.9) 100%);
    border-top-color: rgba(200, 220, 255, 0.9);
    box-shadow:
        0 4px 12px rgba(87, 148, 242, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.btn-primary:hover {
    background: var(--blue);
}

.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--border);
}

.btn-success {
    background: var(--green);
    color: white;
}

.btn-danger {
    background: var(--red);
    color: white;
}

/* Tables */
.table-container {
    overflow-x: auto;
}

/* Wide reference tables on narrow viewports (EP/GP rules tables).
   Modifier on the existing .table-container utility: the table scrolls inside
   its own box instead of dragging documentElement.scrollWidth past the
   viewport, and the scrollbar is styled so it is always painted rather than
   being an invisible overlay - the swipe affordance has to be visible. */
.table-container.table-swipe {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--gold-dim) var(--surface);
}

.table-container.table-swipe::-webkit-scrollbar {
    height: 8px;
}

.table-container.table-swipe::-webkit-scrollbar-track {
    background: var(--surface);
    border-radius: 4px;
}

.table-container.table-swipe::-webkit-scrollbar-thumb {
    background: var(--gold-dim);
    border-radius: 4px;
}

/* Card restack. A table whose cells carry prose cannot be squeezed into a
   phone-width scroll box - the prose column collapses to one word per line.
   Under 768px such a table becomes one card per row, each value printed under
   its column name. Opt-in per table via .stack-rows; the inline styles the
   island sets per cell have to be overridden, hence !important. */
@media (max-width: 768px) {
    table.stack-rows,
    table.stack-rows tbody,
    table.stack-rows tr,
    table.stack-rows td {
        display: block;
        width: 100%;
    }

    table.stack-rows thead {
        display: none;
    }

    table.stack-rows tr {
        background: var(--bg-elevated) !important;
        border: 1px solid var(--border) !important;
        border-radius: 8px;
        padding: 10px 12px;
        margin-bottom: 10px;
    }

    table.stack-rows td {
        border-bottom: none !important;
        padding: 3px 0 !important;
        text-align: left !important;
        /* a stacked cell is a block, so breaking an over-long identifier here
           costs nothing in layout and stops the text spilling out of the card */
        overflow-wrap: break-word;
    }

    table.stack-rows td:empty {
        display: none;
    }

    table.stack-rows td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-muted);
    }
}

/* Text affordance, shown only at the widths where the table has to scroll. */
.table-swipe-hint {
    display: none;
}

@media (max-width: 768px) {
    .table-swipe-hint {
        display: block;
        font-size: var(--fs-xs);
        color: var(--text-muted);
        margin-bottom: 6px;
    }
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

th {
    color: var(--text-muted);
    font-weight: 500;
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

td {
    color: var(--text);
}

tr:hover {
    background: var(--surface);
}

/* Raid Cards */
.raid-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--surface);
    border-radius: 8px;
    margin-bottom: 12px;
}

.raid-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xl);
}

.raid-info {
    flex: 1;
}

.raid-name {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.raid-time {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.raid-signups {
    display: flex;
    align-items: center;
    gap: 8px;
}

.signup-count {
    font-weight: 600;
    color: var(--green);
}

/* Clickable Raid Cards */
.raid-card-link {
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.raid-card-link:hover {
    background: var(--border);
    transform: translateX(4px);
}

.raid-arrow {
    color: var(--text-muted);
    font-size: var(--fs-xl);
    transition: transform 0.2s ease;
}

.raid-card-link:hover .raid-arrow {
    color: var(--blue);
    transform: translateX(4px);
}

/* Loot Item */
.loot-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--surface);
    border-radius: 8px;
    margin-bottom: 8px;
}

.loot-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 2px solid var(--quality-epic);
}

.loot-item-name {
    flex: 1;
}

.loot-item-name a {
    color: var(--quality-epic);
    text-decoration: none;
}

.loot-item-name a:hover {
    text-decoration: underline;
}

.loot-winner {
    font-weight: 500;
}

/* Class Colors */
.class-warrior { color: var(--class-warrior); }
.class-paladin { color: var(--class-paladin); }
.class-hunter { color: var(--class-hunter); }
.class-rogue { color: var(--class-rogue); }
.class-priest { color: var(--class-priest); }
.class-shaman { color: var(--class-shaman); }
.class-mage { color: var(--class-mage); }
.class-warlock { color: var(--class-warlock); }
.class-druid { color: var(--class-druid); }

/* Upload Area */
.upload-area {
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 48px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.upload-area:hover {
    border-color: var(--blue);
    background: rgba(87, 148, 242, 0.05);
}

.upload-area.dragover {
    border-color: var(--green);
    background: rgba(115, 191, 105, 0.1);
}

.upload-icon {
    font-size: var(--fs-2xl);
    margin-bottom: 16px;
}

.upload-text {
    color: var(--text-muted);
    margin-bottom: 8px;
}

.upload-hint {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

/* Forms */
input, textarea, select {
    width: 100%;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: var(--fs-sm);
    transition: border-color 0.2s ease;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--blue);
}

/* Date picker icon fix for dark theme */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

input[type="date"]::-webkit-datetime-edit {
    color: var(--text);
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

label {
    display: block;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    margin-bottom: 8px;
}

/* Grid */
.grid {
    display: grid;
    gap: 20px;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Stats */
.stat-card {
    text-align: center;
    padding: 24px;
}

.stat-value {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--blue);
    margin-bottom: 4px;
}

.stat-label {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

/* Footer */
.footer {
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    padding: 24px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    margin-top: auto;
}

.footer a {
    color: var(--blue);
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

/* 2026-08-28 (item A, footer/main gap). The footer BAND stays full-bleed -- its
   background and border-top are meant to run edge to edge -- but its CONTENT is
   bounded to the same --container track as main.container, with auto margins, so
   the footer lines up with the page. There is no literal 1400 anywhere: .footer
   carried no max-width, so at a 1440 viewport its children inherited the footer
   content box of 1440 minus 2x20px padding = 1400px, overhanging main.container
   (1280px wide, left 80) by 60px per side on every page. */
.footer > * {
    max-width: var(--container);
    margin-left: auto;
    margin-right: auto;
}

/* Footer Attribution Banner */
.attribution-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 8px 15px;
    margin-top: 10px;
    background: rgba(42, 42, 46, 0.6);
    border-radius: 8px;
    border: 1px solid rgba(148, 130, 201, 0.4);
    font-size: var(--fs-lg);
    color: var(--text);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    flex-wrap: wrap;
}
.attribution-banner .creator {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--class-warlock);
    font-weight: bold;
}
.attribution-banner .class-icon {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    vertical-align: middle;
}
.attribution-banner .server {
    color: var(--gold);
}
.attribution-banner .guild-link {
    color: var(--green);
    text-decoration: none;
    font-weight: bold;
}
.attribution-banner .guild-link:hover {
    text-decoration: underline;
    color: var(--green);
}
.attribution-separator {
    color: var(--border);
}

/* Utility Classes */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }

/* Loading Spinner */
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Alerts */
.alert {
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.alert-success {
    background: rgba(115, 191, 105, 0.1);
    border: 1px solid var(--green);
    color: var(--green);
}

.alert-error {
    background: rgba(242, 73, 92, 0.1);
    border: 1px solid var(--red);
    color: var(--red);
}

.alert-info {
    background: rgba(87, 148, 242, 0.1);
    border: 1px solid var(--blue);
    color: var(--blue);
}

/* ========================================
   Raid Cards  (item C, 2026-08-27)
   Replaced the 42-cell month calendar, its 9-colour legend, the Week/Month
   toggle and the Next Raid hero. Three type sizes only (--fs-xs / --fs-base /
   --fs-xl); every other step is weight and colour.
   ======================================== */

.raid-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    align-items: stretch;
}

/* body is a column flex box and .container's auto margins opt it out of
   cross-axis stretch, so a raids page whose cards have no wide featured tile
   shrink-wraps to one card width and the grid collapses to a single column.
   Pin the raids containers to the full content width so auto-fill can lay
   out multiple columns. */
.raids-page {
    width: 100%;
}

/* A lone card should not sit in a two-of-three-columns stub. The span reset is
   load-bearing: a featured card asking for two columns inside a one-column grid
   would otherwise create an implicit second track and push the page sideways. */
.raid-card-grid:has(> .raid-card-tile:only-child) {
    grid-template-columns: minmax(0, 1fr);
}

.raid-card-grid:has(> .raid-card-tile:only-child) > .raid-card-featured {
    grid-column: span 1;
}

.raid-card-tile {
    display: flex;
    flex-direction: column;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.raid-card-tile:hover {
    border-color: var(--gold-dim);
    transform: translateY(-2px);
}

.raid-card-featured {
    grid-column: span 2;
}

.raid-card-art {
    position: relative;
    height: 140px;
    background: var(--surface);
    overflow: hidden;
}

.raid-card-featured .raid-card-art {
    height: 190px;
}

.raid-card-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
}

.raid-card-day,
.raid-card-countdown {
    position: absolute;
    top: 12px;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg);
}

.raid-card-day {
    left: 12px;
    color: var(--gold);
    border: 1px solid var(--gold-dim);
}

.raid-card-countdown {
    right: 12px;
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.raid-card-countdown.is-live {
    color: var(--red-dim);
    border-color: var(--red);
}

.raid-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px 18px;
}

.raid-card-title {
    margin: 0;
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
}

.raid-card-when {
    margin: 0;
    font-size: var(--fs-base);
    color: var(--text-muted);
}

.raid-card-roster {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding-top: 4px;
}

.raid-card-signups {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.raid-card-signup-count {
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1;
    color: var(--gold);
}

.raid-card-signup-label,
.raid-card-roles,
.raid-card-extras {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.raid-card-roles,
.raid-card-extras {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.raid-card-roles b {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--text);
    margin-right: 4px;
}

.raid-card-extras li::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--border);
    vertical-align: middle;
}

.raid-card-unavailable {
    margin: 0;
    padding-top: 4px;
    font-size: var(--fs-base);
    color: var(--text-muted);
    font-style: italic;
}

.raid-card-cta {
    margin-top: auto;
    align-self: flex-start;
    padding: 9px 18px;
    border: 1px solid var(--gold);
    border-radius: 8px;
    background: var(--gold);
    color: var(--bg);
    font-size: var(--fs-base);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.raid-card-cta:hover {
    background: var(--gold-dim);
    border-color: var(--gold-dim);
    color: var(--bg);
}

.raid-cards-message {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 44px 24px;
    text-align: center;
    font-size: var(--fs-base);
    color: var(--text-muted);
}

.raid-cards-message p {
    margin: 0 0 16px;
}

.raid-cards-message p:last-child {
    margin-bottom: 0;
}

.raid-cards-more {
    margin: 24px 0 0;
    font-size: var(--fs-base);
}

.raid-cards-more a {
    color: var(--blue);
    font-weight: 600;
    text-decoration: none;
}

.raid-cards-more a:hover {
    text-decoration: underline;
}

/* ---- Officer boards on the card, read-only, every viewer (item F member half)
   Two type sizes only: --fs-base for the two headings, --fs-xs for the rows
   and chips. Every other step is weight and colour, per the 3-size cap. ---- */

.raid-card-progress {
    margin: 4px 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--green);
    border-radius: 8px;
    background: var(--green-bg);
}

.raid-card-progress-head {
    margin: 0;
    font-size: var(--fs-base);
    color: var(--text);
}

.raid-card-boss-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.raid-boss-chip {
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.raid-boss-chip.is-killed {
    border-color: var(--green);
    color: var(--green);
    font-weight: 700;
}

.raid-boss-chip.is-wiped {
    border-color: var(--red);
    color: var(--red-dim);
}

.raid-boss-chip.is-skipped {
    border-style: dashed;
}

.raid-card-assign {
    margin: 0 0 12px;
    border: 1px solid var(--gold-dim);
    border-radius: 8px;
    background: color-mix(in srgb, var(--gold) 10%, var(--bg-elevated));
}

.raid-card-assign-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--gold);
    cursor: pointer;
    list-style: none;
}

/* Safari draws its own disclosure triangle through ::-webkit-details-marker. */
.raid-card-assign-head::-webkit-details-marker { display: none; }

.raid-card-assign-head::before {
    content: '\25B8';
    color: var(--gold-dim);
    transition: transform 0.15s ease;
}

.raid-card-assign[open] > .raid-card-assign-head::before {
    transform: rotate(90deg);
}

.raid-card-assign-count {
    margin-left: auto;
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--text-muted);
}

.raid-assign-list {
    margin: 0;
    padding: 0 12px 10px;
    list-style: none;
}

.raid-assign-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 6px 0;
    border-top: 1px solid var(--border);
    font-size: var(--fs-xs);
    color: var(--text);
}

.raid-assign-boss {
    flex: 0 0 100%;
    color: var(--text);
}

.raid-assign-jobs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.raid-assign-label {
    color: var(--text-muted);
}

/* ---- Audio-ping toggle. Off by default; the state lives in localStorage. ---- */

.raid-cards-tools {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 12px;
}

.raid-ping-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    cursor: pointer;
}

/* A site-wide `input { width: 100% }` rule applies here too and stretched the
   box to 88px, squeezing the label into three lines. Pin the checkbox to its
   own size and stop the label wrapping. */
.raid-ping-toggle input[type="checkbox"] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    min-width: 0;
    margin: 0;
    padding: 0;
    accent-color: var(--gold);
    cursor: pointer;
}

.raid-ping-toggle span {
    white-space: nowrap;
}

.raid-ping-toggle:hover {
    color: var(--text);
}

/* Loading skeletons */
.raid-card-skeleton {
    pointer-events: none;
}

.raid-card-shim {
    position: relative;
    overflow: hidden;
    background: var(--surface);
}

.raid-card-shim::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--text) 14%, transparent),
        transparent
    );
    animation: raid-card-shimmer 1.4s ease-in-out infinite;
}

@keyframes raid-card-shimmer {
    to { transform: translateX(100%); }
}

.raid-card-shim-line {
    height: 14px;
    border-radius: 6px;
}

.raid-card-shim-title { height: 22px; width: 55%; }
.raid-card-shim-when { width: 78%; }
.raid-card-shim-roster { width: 45%; }

@media (prefers-reduced-motion: reduce) {
    .raid-card-shim::after { animation: none; }
    .raid-card-tile:hover { transform: none; }
}

/* Literal px: custom properties are not allowed in media features. */
@media (max-width: 767px) {
    .raid-card-grid { grid-template-columns: minmax(0, 1fr); }
    .raid-card-featured { grid-column: span 1; }
    .raid-card-featured .raid-card-art { height: 140px; }
}

/* The featured card is twice as wide, so on desktop it reads better as art
   beside the detail than as a wide letterbox with a mostly empty body. */
@media (min-width: 768px) {
    .raid-card-featured {
        flex-direction: row;
    }

    .raid-card-featured .raid-card-art {
        flex: 0 0 44%;
        height: auto;
        min-height: 250px;
    }

    .raid-card-featured .raid-card-body {
        justify-content: center;
        gap: 12px;
        padding: 28px 32px;
    }

    .raid-card-featured .raid-card-cta {
        margin-top: 8px;
    }

    /* The art panel is now only part of the card width, so pin the countdown
       to the art rather than leaving it floating beside the title. */
    .raid-card-featured .raid-card-countdown {
        top: auto;
        bottom: 12px;
    }
}

/* Survivors of the calendar block: .view-btn is still used by
   islands/ConsumesQueue.tsx and .legend-item by islands/AuctionHouse.tsx and
   islands/ConsumesAnalytics.tsx, so their rules stay. */

.view-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 500;
    transition: all 0.2s ease;
}

.view-btn:hover {
    background: var(--bg-elevated);
}

.view-btn.active {
    background: var(--blue);
    color: white;
    border-color: var(--blue);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* Still rendered by routes/index.tsx. */
.upcoming-title {
    flex: 1;
    font-weight: 600;
    color: var(--text);
}


/* Hide scrollbar on nav-links */
.nav-links::-webkit-scrollbar {
    display: none;
}

/* Shared Login Banner Component Styles */
.login-banner {
  background: linear-gradient(135deg, var(--blue-deep), var(--blue-deep));
  border: 2px solid var(--blue);
  border-radius: 12px;
  padding: 20px 30px;
  margin: 15px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
}
.login-banner-text { color: var(--blue-soft); }
.login-banner-title { color: var(--blue); font-weight: bold; margin-bottom: 5px; }
.login-banner-subtitle { font-size: var(--fs-base); }
.discord-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--discord);
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.2s;
}
.discord-login-btn:hover { background: var(--discord-hover); }
.user-welcome { color: var(--green); font-size: var(--fs-base); margin: 10px 0; }

/* ====================================
   CONSUMES ANALYTICS PAGE STYLES
   ==================================== */

.analytics-page {
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px;
}

.analytics-page .page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 1rem;
}

.analytics-page .page-header-content {
  text-align: left;
}

.analytics-page .page-header h1 {
  color: var(--blue);
  font-size: var(--fs-2xl);
  margin-bottom: 8px;
}

.analytics-page .page-subtitle {
  color: var(--blue-soft);
  font-size: var(--fs-lg);
}

.analytics-page .page-header-actions {
  display: flex;
  gap: 0.75rem;
}

.header-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(93, 173, 226, 0.2);
  border: 1px solid rgba(93, 173, 226, 0.4);
  border-radius: 6px;
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s;
}

.header-action-btn:hover {
  background: rgba(93, 173, 226, 0.3);
  border-color: rgba(93, 173, 226, 0.6);
}

.analytics-dashboard {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 2026-04-04: Redesigned analytics controls with preset buttons + custom date range.
   WHY: Replace the dropdown with quick-access preset buttons (7d through 1yr)
   and a custom date range picker so officers can analyze any window.
   2026-04-08: Made sticky so officers can change the time window from anywhere
   on the page without scrolling back to the top.
   2026-04-09: Fixed sticky top offset. The site nav (.nav) is position:fixed
   at top:0 with height:60px, so sticking the controls at top:0 put the top
   60px of the 3-row control block (presets + date inputs) BEHIND the nav,
   leaving only the refresh button visible below it. Sticking at top:80px
   puts the entire controls panel directly below the nav with 20px of
   breathing room so the nav's bottom edge does not visually bleed into
   the panel's top edge. */
/* 2026-04-09: Controls is the sole sticky container. The quick-nav lives
   as the bottom row INSIDE this block (after the refresh button) so the
   two touch with no gap. */
.analytics-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 15px;
  background: rgba(20, 28, 45, 0.95);
  border-radius: 8px;
  position: sticky;
  top: 80px;
  z-index: 50;
  margin-bottom: 16px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.date-range-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.date-range-label {
  color: var(--blue-soft);
  font-size: var(--fs-base);
  white-space: nowrap;
}

.date-preset-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.date-preset-btn {
  background: var(--blue-bg);
  color: var(--blue-soft);
  border: 1px solid var(--blue-deep);
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--fs-base);
  transition: all 0.15s;
}

.date-preset-btn:hover {
  background: var(--blue-deep);
  color: var(--blue-soft);
  border-color: var(--blue);
}

.date-preset-btn.active {
  background: var(--blue);
  color: var(--blue-bg);
  border-color: var(--blue);
  font-weight: 600;
}

.date-custom-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.date-input {
  width: 140px;
  max-width: 140px;
  background: var(--blue-bg);
  color: var(--blue-soft);
  border: 1px solid var(--blue-deep);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: var(--fs-base);
  cursor: pointer;
}

.date-input:focus {
  border-color: var(--blue);
  outline: none;
}

.date-range-separator {
  color: var(--blue);
  font-size: var(--fs-base);
}

.date-apply-btn {
  background: var(--blue-deep);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 6px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--fs-base);
  transition: all 0.15s;
}

.date-apply-btn:hover:not(:disabled) {
  background: var(--blue);
  color: var(--blue-bg);
}

.date-apply-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.date-apply-btn.active {
  background: var(--blue);
  color: var(--blue-bg);
  font-weight: 600;
}

.date-clear-btn {
  background: transparent;
  color: var(--blue);
  border: 1px solid var(--blue-deep);
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--fs-base);
  transition: all 0.15s;
}

.date-clear-btn:hover {
  color: var(--red);
  border-color: var(--red);
}

.refresh-btn {
  background: var(--blue-deep);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  align-self: flex-start;
}

.refresh-btn:hover {
  background: var(--blue);
  color: var(--blue-bg);
}

.analytics-section {
  background: rgba(30, 40, 60, 0.5);
  border: 1px solid var(--blue-deep);
  border-radius: 12px;
  padding: 20px;
}

.analytics-section h2 {
  color: var(--blue);
  font-size: var(--fs-xl);
  margin-bottom: 15px;
  border-bottom: 1px solid var(--blue-deep);
  padding-bottom: 10px;
}

.section-subtitle {
  color: var(--blue);
  font-size: var(--fs-base);
  margin-bottom: 15px;
}

/* Stats Cards */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.stats-cards.secondary {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.stat-card {
  background: rgba(20, 30, 50, 0.7);
  border: 1px solid var(--blue-deep);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.stat-card.small {
  padding: 12px;
}

.stat-card.highlight {
  border-color: var(--blue);
  background: rgba(93, 173, 226, 0.1);
}

.stat-card.gold {
  border-color: var(--gold);
  background: rgba(241, 196, 15, 0.1);
}

.stat-card.pending {
  border-color: var(--gold);
}

.stat-card.processing {
  border-color: var(--blue);
}

.stat-card.completed {
  border-color: var(--green);
}

.stat-value {
  font-size: var(--fs-xl);
  font-weight: bold;
  color: var(--blue-soft);
}

.stat-card.small .stat-value {
  font-size: var(--fs-xl);
}

.stat-label {
  color: var(--blue);
  font-size: var(--fs-base);
  margin-top: 5px;
}

/* Herbs Grid */
.herbs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.herb-card {
  background: rgba(46, 125, 50, 0.15);
  border: 1px solid var(--green);
  border-radius: 8px;
  padding: 12px;
}

.herb-quantity {
  font-size: var(--fs-xl);
  font-weight: bold;
  color: var(--green);
}

.herb-name {
  color: color-mix(in srgb, var(--green) 45%, var(--text));
  font-weight: 500;
  margin: 5px 0;
}

.herb-sources {
  font-size: var(--fs-sm);
  color: var(--blue);
}

.herb-source {
  display: block;
  margin-top: 3px;
}

/* Analytics Table */
.analytics-table {
  width: 100%;
  border-collapse: collapse;
}

.analytics-table th,
.analytics-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--blue-deep);
}

.analytics-table th {
  color: var(--blue);
  font-weight: 600;
  background: rgba(20, 30, 50, 0.5);
}

.analytics-table td {
  color: var(--blue-soft);
}

.analytics-table tr:hover {
  background: rgba(93, 173, 226, 0.05);
}

.rank {
  color: var(--gold);
  font-weight: bold;
  margin-right: 8px;
}

.gold-text {
  color: var(--gold);
}

/* Fill Rate Card */
.stat-card.fill-rate {
  border-color: var(--green);
  background: rgba(46, 204, 113, 0.1);
}

.stat-bar {
  width: 100%;
  height: 6px;
  background: var(--blue-deep);
  border-radius: 3px;
  margin-top: 10px;
  overflow: hidden;
}

.stat-bar-fill {
  height: 100%;
  background: linear-gradient(to right, var(--green), var(--green));
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Demand Bars - Most Demanded Consumables */
.demand-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.demand-bar-row {
  display: grid;
  grid-template-columns: 40px 180px 1fr 100px;
  gap: 12px;
  align-items: center;
}

.demand-bar-rank {
  color: var(--gold);
  font-weight: bold;
  text-align: center;
}

.demand-bar-name {
  color: var(--blue-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demand-bar-container {
  height: 28px;
  background: var(--blue-bg);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.demand-bar-fill {
  height: 100%;
  background: linear-gradient(to right, var(--gold), var(--gold));
  border-radius: 4px;
  transition: width 0.3s ease;
}

.demand-bar-value {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text);
  font-weight: bold;
  font-size: var(--fs-base);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.demand-bar-revenue {
  text-align: right;
  font-weight: 500;
}

/* Herb Demand Analysis */
.herb-demand-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.herb-demand-row {
  background: rgba(20, 30, 50, 0.5);
  border-radius: 8px;
  padding: 12px;
  border-left: 4px solid var(--green);
}

.herb-demand-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.herb-demand-name {
  color: color-mix(in srgb, var(--green) 45%, var(--text));
  font-weight: 600;
  font-size: var(--fs-lg);
}

.herb-demand-level {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: var(--fs-sm);
  font-weight: bold;
  text-transform: uppercase;
}

.herb-demand-level.high {
  background: rgba(231, 76, 60, 0.25);
  color: var(--red);
  border: 1px solid var(--red);
}

.herb-demand-level.med {
  background: rgba(241, 196, 15, 0.25);
  color: var(--gold);
  border: 1px solid var(--gold);
}

.herb-demand-level.low {
  background: rgba(46, 204, 113, 0.25);
  color: var(--green);
  border: 1px solid var(--green);
}

.herb-demand-bar-container {
  height: 24px;
  background: var(--blue-bg);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  margin-bottom: 8px;
}

.herb-demand-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.herb-demand-bar-fill.high {
  background: linear-gradient(to right, var(--red), var(--red));
}

.herb-demand-bar-fill.med {
  background: linear-gradient(to right, var(--gold), var(--gold));
}

.herb-demand-bar-fill.low {
  background: linear-gradient(to right, var(--green), var(--green));
}

.herb-demand-qty {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text);
  font-weight: bold;
  font-size: var(--fs-base);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.herb-demand-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.herb-demand-source {
  font-size: var(--fs-sm);
  color: var(--blue);
  background: rgba(30, 40, 60, 0.5);
  padding: 3px 8px;
  border-radius: 4px;
}

.herb-demand-more {
  font-size: var(--fs-sm);
  color: var(--blue);
  font-style: italic;
}

/* Reagent Demand Analysis */
.reagent-type-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.reagent-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: var(--fs-sm);
  font-weight: 500;
}

.reagent-type-badge.herb {
  background: rgba(34, 197, 94, 0.2);
  color: var(--green);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.reagent-type-badge.vendor {
  background: rgba(59, 130, 246, 0.2);
  color: var(--blue);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.reagent-type-badge.drop {
  background: rgba(168, 85, 247, 0.2);
  color: var(--purple);
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.reagent-type-badge.crafted {
  background: rgba(245, 158, 11, 0.2);
  color: var(--gold);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.reagent-type-badge.other {
  background: rgba(107, 114, 128, 0.2);
  color: var(--text-muted);
  border: 1px solid rgba(107, 114, 128, 0.3);
}

.reagent-type-badge.has-tooltip {
  position: relative;
  cursor: help;
}

.badge-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue-bg);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.4;
  width: 240px;
  text-align: center;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.badge-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.15);
}

.reagent-type-badge.has-tooltip:hover .badge-tooltip {
  display: block;
}

.reagent-demand-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.reagent-demand-row {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

.reagent-demand-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.reagent-type-icon {
  font-size: var(--fs-lg);
  flex-shrink: 0;
}

.reagent-item-icon {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.reagent-demand-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  text-decoration: none;
}

.reagent-demand-name:hover {
  color: var(--blue);
  text-decoration: underline;
}

.reagent-demand-level {
  font-size: var(--fs-xs);
  font-weight: bold;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  flex-shrink: 0;
}

.reagent-demand-level.high {
  background: rgba(239, 68, 68, 0.3);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.5);
}

.reagent-demand-level.med {
  background: rgba(245, 158, 11, 0.3);
  color: var(--gold);
  border: 1px solid rgba(245, 158, 11, 0.5);
}

.reagent-demand-level.low {
  background: rgba(34, 197, 94, 0.3);
  color: var(--green);
  border: 1px solid rgba(34, 197, 94, 0.5);
}

.reagent-demand-bar-container {
  position: relative;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.reagent-demand-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.reagent-demand-bar-fill.high {
  background: linear-gradient(90deg, var(--red), var(--red));
}

.reagent-demand-bar-fill.med {
  background: linear-gradient(90deg, var(--gold), var(--gold));
}

.reagent-demand-bar-fill.low {
  background: linear-gradient(90deg, var(--green-deep), var(--green));
}

.reagent-demand-qty {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-base);
  font-weight: bold;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.reagent-demand-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: var(--fs-sm);
}

.reagent-demand-source {
  background: rgba(255, 255, 255, 0.1);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  color: var(--text-muted);
}

.reagent-demand-more {
  font-size: var(--fs-sm);
  color: var(--blue);
  font-style: italic;
}

.herbalist-cta {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 6px;
  color: var(--text-muted);
}

.herbalist-cta a {
  color: var(--green);
}

.herbalist-cta a:hover {
  text-decoration: underline;
}

/* Responsive Demand Bars */
@media (max-width: 768px) {
  .demand-bar-row {
    grid-template-columns: 30px 1fr 80px;
  }

  .demand-bar-name {
    grid-column: 2 / 3;
    grid-row: 1;
  }

  .demand-bar-container {
    grid-column: 1 / 4;
    grid-row: 2;
  }

  .demand-bar-revenue {
    display: none;
  }
}

/* Trends */
.trends-summary {
  display: flex;
  gap: 30px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.trend-stat {
  color: var(--blue-soft);
}

.trend-label {
  color: var(--blue);
  margin-right: 8px;
}

.trend-value {
  color: var(--blue-soft);
  font-weight: 500;
}

/* Bar Chart */
.trends-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 150px;
  padding: 10px 0;
}

.chart-bar-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; /* Bars start at bottom and grow up */
  height: 100%;
}

.chart-bar {
  width: 100%;
  max-width: 40px;
  background: linear-gradient(to top, var(--blue), var(--blue));
  border-radius: 4px 4px 0 0;
  position: relative;
  min-height: 2px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.bar-value {
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: bold;
  padding-top: 4px;
}

.bar-label {
  color: var(--blue);
  font-size: var(--fs-xs);
  margin-top: 5px;
}

/* Customers */
.customers-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.customer-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px;
  background: rgba(20, 30, 50, 0.5);
  border-radius: 6px;
}

.customer-rank {
  color: var(--gold);
  font-weight: bold;
  width: 30px;
}

.customer-name {
  color: var(--blue-soft);
  flex: 1;
}

.customer-spent {
  font-weight: bold;
}

/* Footer */
.analytics-footer {
  text-align: center;
  color: var(--blue);
  font-size: var(--fs-sm);
  padding-top: 10px;
  border-top: 1px solid var(--blue-deep);
}

/* Loading & Error States */
.analytics-loading,
.analytics-error {
  text-align: center;
  padding: 60px 20px;
  color: var(--blue-soft);
}

.analytics-loading .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--blue-deep);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 15px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.analytics-error button {
  margin-top: 15px;
  padding: 10px 20px;
  background: var(--red);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.no-data {
  color: var(--blue);
  font-style: italic;
  text-align: center;
  padding: 20px;
}

/* Responsive */
@media (max-width: 768px) {
  .analytics-page {
    padding: 10px;
  }

  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .herbs-grid {
    grid-template-columns: 1fr 1fr;
  }

  .analytics-table {
    font-size: var(--fs-base);
  }

  .analytics-table th,
  .analytics-table td {
    padding: 8px;
  }

  .trends-chart {
    height: 100px;
  }
}

/* ====================================
   CONSUMES QUEUE PAGE STYLES
   ==================================== */

.queue-page {
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px;
}

.queue-page .page-header {
  text-align: center;
  margin-bottom: 20px;
}

.queue-page .page-header h1 {
  color: var(--blue);
  font-size: var(--fs-2xl);
  margin-bottom: 8px;
}

.queue-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Crafter Input */
.crafter-input {
  background: rgba(30, 40, 60, 0.6);
  padding: 15px;
  border-radius: 8px;
  border: 1px solid var(--blue-deep);
}

.crafter-input label {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--blue-soft);
}

.crafter-input input {
  flex: 1;
  max-width: var(--w-tight);
  background: var(--blue-bg);
  color: var(--blue-soft);
  border: 1px solid var(--blue-deep);
  padding: 10px 15px;
  border-radius: 4px;
  font-size: var(--fs-lg);
}

.crafter-input input:focus {
  outline: none;
  border-color: var(--blue);
}

/* Queue Tabs */
.queue-tabs {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  background: rgba(20, 30, 50, 0.5);
  padding: 10px;
  border-radius: 8px;
}

.queue-tab {
  background: rgba(30, 40, 60, 0.8);
  color: var(--blue-soft);
  border: 1px solid var(--blue-deep);
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--fs-base);
  transition: all 0.2s;
}

.queue-tab:hover {
  background: rgba(93, 173, 226, 0.2);
  border-color: var(--blue);
}

.queue-tab.active {
  background: var(--blue);
  color: var(--blue-bg);
  border-color: var(--blue);
  font-weight: bold;
}

/* Queue Controls */
.queue-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}

.queue-count {
  color: var(--blue);
  font-size: var(--fs-base);
}

/* Orders List */
.orders-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.order-card {
  background: rgba(30, 40, 60, 0.6);
  border: 1px solid var(--blue-deep);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s;
}

.order-card:hover {
  border-color: var(--blue);
}

.order-card.expanded {
  border-color: var(--blue);
}

/* Status-based left border */
.order-card.status-pending {
  border-left: 4px solid var(--gold);
}

.order-card.status-claimed {
  border-left: 4px solid var(--blue);
}

.order-card.status-fulfilled {
  border-left: 4px solid var(--purple);
}

.order-card.status-completed {
  border-left: 4px solid var(--green);
}

.order-card.status-cancelled {
  border-left: 4px solid var(--red);
  opacity: 0.7;
}

/* Order Header */
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  cursor: pointer;
  flex-wrap: wrap;
  gap: 10px;
}

.order-main {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.order-status {
  font-weight: bold;
  font-size: var(--fs-sm);
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--blue-soft);
}

.order-customer {
  color: var(--blue);
  font-weight: 500;
}

.order-summary {
  color: var(--blue-soft);
  font-size: var(--fs-base);
}

.order-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--blue);
  font-size: var(--fs-base);
}

.order-total {
  color: var(--gold);
  font-weight: bold;
}

.expand-icon {
  color: var(--blue);
  font-size: var(--fs-sm);
}

/* Order Details */
.order-details {
  padding: 15px;
  border-top: 1px solid var(--blue-deep);
  background: rgba(20, 30, 50, 0.5);
}

.order-items {
  margin-bottom: 15px;
}

.order-items h4 {
  color: var(--blue);
  margin-bottom: 10px;
  font-size: var(--fs-base);
}

.order-items ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.order-items li {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--blue-deep);
  color: var(--blue-soft);
}

.item-qty {
  color: var(--blue);
  font-weight: bold;
  min-width: 40px;
}

.item-name {
  flex: 1;
}

.item-price {
  color: var(--gold);
  font-size: var(--fs-base);
}

.order-notes {
  background: rgba(241, 196, 15, 0.1);
  border: 1px solid rgba(241, 196, 15, 0.3);
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 15px;
  color: var(--gold);
  font-size: var(--fs-base);
}

.order-workflow {
  margin-bottom: 15px;
  font-size: var(--fs-base);
  color: var(--blue-soft);
}

.order-workflow p {
  margin: 5px 0;
}

/* Action Buttons */
.order-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.action-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  font-size: var(--fs-base);
  transition: all 0.2s;
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.action-btn.claim {
  background: var(--blue);
  color: white;
}

.action-btn.claim:hover:not(:disabled) {
  background: var(--blue);
}

.action-btn.fulfill {
  background: var(--purple);
  color: white;
}

.action-btn.fulfill:hover:not(:disabled) {
  background: var(--purple);
}

.action-btn.complete {
  background: var(--green);
  color: white;
}

.action-btn.complete:hover:not(:disabled) {
  background: var(--green);
}

.action-btn.unclaim {
  background: transparent;
  color: var(--blue-soft);
  border: 1px solid var(--blue);
}

.action-btn.unclaim:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
}

.action-btn.cancel {
  background: transparent;
  color: var(--red);
  border: 1px solid var(--red);
}

.action-btn.cancel:hover:not(:disabled) {
  background: rgba(231, 76, 60, 0.2);
}

.order-id {
  font-size: var(--fs-sm);
  color: var(--blue);
  font-family: monospace;
}

/* Loading & Error */
.queue-loading,
.queue-error {
  text-align: center;
  padding: 60px 20px;
  color: var(--blue-soft);
}

.queue-loading .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--blue-deep);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 15px;
}

.queue-error button {
  margin-top: 15px;
  padding: 10px 20px;
  background: var(--red);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.no-orders {
  text-align: center;
  padding: 40px;
  color: var(--blue);
  background: rgba(30, 40, 60, 0.3);
  border-radius: 8px;
}

/* Responsive */
@media (max-width: 768px) {
  .queue-page {
    padding: 10px;
  }

  .queue-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .queue-tab {
    white-space: nowrap;
    font-size: var(--fs-sm);
    padding: 8px 12px;
  }

  .order-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .order-meta {
    width: 100%;
    justify-content: space-between;
  }

  .order-actions {
    flex-direction: column;
  }

  .action-btn {
    width: 100%;
    text-align: center;
  }

  .crafter-input label {
    flex-direction: column;
    align-items: flex-start;
  }

  .crafter-input input {
    max-width: 100%;
    width: 100%;
  }
}

/* ============================================
   P&L Section Styles
   ============================================ */

.pnl-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.pnl-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px 16px;
  text-align: center;
}

.pnl-card.revenue { border-left: 3px solid var(--gold); }
.pnl-card.costs { border-left: 3px solid var(--red); }
.pnl-card.profit.positive { border-left: 3px solid var(--green); }
.pnl-card.profit.negative { border-left: 3px solid var(--red); }

.pnl-card-icon { font-size: var(--fs-lg); display: inline; margin-right: 6px; vertical-align: middle; }

.pnl-card-value {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.2;
  display: inline;
  vertical-align: middle;
}

.pnl-card-label {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

.pnl-card-detail {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.35);
  margin-top: 4px;
}

.herb-cost-text { color: var(--red); }
.profit-text { color: var(--green); }
.loss-text { color: var(--red); }

/* P&L Cumulative Area Chart */
.pnl-chart {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 24px;
}

.pnl-chart-legend {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.pnl-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.7);
}

.pnl-chart-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.pnl-chart-svg {
  width: 100%;
  height: 220px;
}

.pnl-chart-svg svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* P&L Side-by-side Breakdowns */
.pnl-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.pnl-breakdown-col {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 16px;
}

.pnl-breakdown-col h3 {
  font-size: var(--fs-base);
  margin: 0 0 12px 0;
  color: rgba(255, 255, 255, 0.8);
}

.pnl-status-list { margin-bottom: 12px; }

.pnl-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.7);
}

.pnl-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pnl-status-dot.pending { background: var(--gold); }
.pnl-status-dot.processing { background: var(--blue); }
.pnl-status-dot.completed { background: var(--green); }
.pnl-status-dot.cancelled { background: var(--text-muted); }

.pnl-status-count {
  margin-left: auto;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.pnl-stat-extra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.5);
  padding: 4px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.pnl-stat-extra:first-of-type { margin-top: 4px; }

.pnl-stat-extra strong { color: rgba(255, 255, 255, 0.9); }

.pnl-stat-extra.pending-warning {
  color: var(--gold);
}

/* P&L Leaderboards */
.pnl-leaderboard { display: flex; flex-direction: column; gap: 6px; }

.pnl-leader-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  font-size: var(--fs-sm);
}

.pnl-leader-rank {
  color: rgba(255, 255, 255, 0.4);
  font-size: var(--fs-sm);
  width: 24px;
  flex-shrink: 0;
}

.pnl-leader-name {
  flex: 1;
  color: rgba(255, 255, 255, 0.85);
}

.pnl-leader-value {
  font-weight: 600;
  flex-shrink: 0;
}

.see-more-btn {
  background: none;
  border: none;
  color: var(--blue, var(--blue));
  cursor: pointer;
  font-size: var(--fs-sm);
  padding: 6px 0 2px;
  text-align: left;
  opacity: 0.85;
}
.see-more-btn:hover { opacity: 1; text-decoration: underline; }

/* P&L Responsive */
@media (max-width: 768px) {
  .pnl-cards {
    grid-template-columns: 1fr;
  }

  .pnl-breakdown {
    grid-template-columns: 1fr;
  }

  .pnl-chart-svg { height: 180px; }
  .pnl-chart-legend { gap: 10px; }
}

/* ================================
   CONSUMES QUEUE PAGE STYLES
   Extracted from islands/ConsumesQueue.tsx
   ================================ */

.queue-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* 2026-08-28: shown when the crafter-queue reads come back 401/403 because
   the session is anonymous or lacks the officer role. Same tokens as the
   surrounding cards so it reads as part of the page, not an error dump. */
.queue-container .queue-locked-notice {
  background: var(--bg-elevated);
  border: 1px solid var(--gold-dim);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 20px;
  color: var(--text-muted);
  font-size: var(--fs-base);
}

.queue-container .queue-locked-notice strong {
  color: var(--gold);
}

.queue-container .queue-locked-notice a {
  color: var(--gold);
  text-decoration: underline;
}

/* ================================
   HEADER SECTION
   ================================ */
.header-section {
  background: linear-gradient(135deg, rgba(30, 30, 40, 0.98), rgba(20, 20, 30, 0.98));
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-size: var(--fs-base);
}

.user-info .username {
  font-weight: bold;
}

.login-prompt {
  color: var(--red);
  font-size: var(--fs-base);
}

.login-prompt a {
  color: var(--gold);
  text-decoration: underline;
}

.view-toggle {
  display: flex;
  gap: 8px;
}

.queue-container .view-btn {
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  background: rgba(0,0,0,0.3);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-sm);
  transition: all 0.2s;
}

.queue-container .view-btn:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text);
}

.queue-container .view-btn.active {
  background: rgba(212, 175, 55, 0.2);
  border-color: rgba(212, 175, 55, 0.5);
  color: var(--gold);
}

/* ================================
   TABS
   ================================ */
.tabs-wrapper {
  display: flex;
  gap: 4px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--surface);
  padding-bottom: 0;
  position: sticky;
  top: 60px;
  z-index: 100;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 90%, transparent 100%);
  padding-top: 8px;
}

.tab-btn {
  padding: 12px 24px;
  border: 1px solid var(--surface);
  border-bottom: 3px solid transparent;
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-base);
  font-weight: 500;
  transition: all 0.2s;
  margin-bottom: -1px;
  border-radius: 8px 8px 0 0;
}

.tab-btn:hover {
  color: var(--text);
  background: var(--surface);
}

.tab-btn.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  background: var(--surface);
}

.tab-btn.orders-tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  background: var(--blue-deep);
}

.tab-btn.herbs-tab.active {
  color: var(--green);
  border-bottom-color: var(--green);
  background: var(--green-bg);
}

.tab-count {
  display: inline-block;
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: var(--fs-sm);
  margin-left: 6px;
}

/* ================================
   FILTER TABS
   ================================ */
.filter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
  position: sticky;
  top: 110px;
  z-index: 99;
  background: var(--bg);
  padding: 12px 0;
  margin-top: 0;
}

.filter-tabs {
  display: flex;
  gap: 4px;
}

.filter-tab {
  padding: 8px 14px;
  border: 1px solid var(--surface);
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-sm);
  transition: all 0.2s;
}

.filter-tab:hover {
  background: var(--surface);
  color: var(--text-muted);
  border-color: var(--surface);
}

.filter-tab.active {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

/* Money Flow */
.money-flow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  padding: 6px 12px;
  border-radius: 20px;
}

.money-flow.customer-pays {
  background: rgba(52, 152, 219, 0.15);
  color: var(--blue);
}

.money-flow.guild-pays {
  background: rgba(46, 204, 113, 0.15);
  color: var(--green);
}

/* ================================
   RESTOCK NEEDED PANEL
   ================================ */
.restock-panel {
  margin: 0 0 12px 0;
  border: 1px solid rgba(240, 160, 48, 0.4);
  border-radius: 8px;
  background: rgba(240, 160, 48, 0.06);
  overflow: visible;
}

.restock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  background: rgba(240, 160, 48, 0.12);
  user-select: none;
  border-radius: 7px 7px 0 0;
}

.restock-header:hover {
  background: rgba(240, 160, 48, 0.18);
}

.restock-title {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--gold);
  letter-spacing: 0.3px;
}

.restock-chevron {
  font-size: var(--fs-xs);
  color: var(--gold);
  transition: transform 0.2s ease;
  transform: rotate(-90deg);
}

.restock-chevron.expanded {
  transform: rotate(0deg);
}

.restock-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(240, 160, 48, 0.1);
}

.restock-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(20, 20, 30, 0.7);
}

.restock-item-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.restock-item-info {
  flex: 1;
  min-width: 0;
}

.restock-item-name {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.restock-item-name a {
  color: var(--gold);
  text-decoration: none;
}

.restock-item-name a:hover {
  color: var(--gold);
  text-decoration: underline;
}

.restock-item-details {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.restock-short {
  color: var(--red);
  font-weight: 600;
}

.restock-in-bank {
  color: var(--text-muted);
  font-size: var(--fs-base);
}

.restock-orders {
  color: var(--text-muted);
}

.restock-date {
  color: var(--text-muted);
}

.restock-btn {
  flex-shrink: 0;
  padding: 4px 12px;
  font-size: var(--fs-sm);
  font-weight: 500;
  border: 1px solid rgba(46, 204, 113, 0.4);
  border-radius: 4px;
  background: rgba(46, 204, 113, 0.1);
  color: var(--green);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.restock-btn:hover:not(:disabled) {
  background: rgba(46, 204, 113, 0.25);
  border-color: rgba(46, 204, 113, 0.6);
}

.restock-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.restock-recipe {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 400;
}

.restock-admin-badge {
  display: inline-block;
  font-size: var(--fs-xs);
  color: var(--purple);
  font-weight: 500;
}

.admin-restock-form {
  padding: 8px 12px 10px;
  border-top: 1px solid rgba(240, 160, 48, 0.15);
}

.admin-restock-search {
  width: 100%;
  padding: 6px 10px;
  font-size: var(--fs-sm);
  background: var(--bg);
  border: 1px solid var(--surface);
  border-radius: 6px;
  color: var(--text);
  outline: none;
  box-sizing: border-box;
}

.admin-restock-search:focus {
  border-color: rgba(240, 160, 48, 0.5);
}

.admin-restock-search::placeholder {
  color: var(--border);
}

.admin-restock-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--surface);
  border-radius: 6px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
  margin-top: 2px;
}

.admin-restock-result-item {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
}

.admin-restock-result-item:hover {
  background: rgba(240, 160, 48, 0.15);
}

.admin-restock-remove {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(231, 76, 60, 0.3);
  border-radius: 4px;
  color: var(--red);
  font-size: var(--fs-sm);
  cursor: pointer;
  margin-right: 6px;
  padding: 0;
}

.admin-restock-remove:hover:not(:disabled) {
  background: rgba(231, 76, 60, 0.15);
  border-color: rgba(231, 76, 60, 0.5);
}

.admin-restock-remove:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ================================
   TABLE
   ================================ */
.table-wrapper {
  overflow-x: auto;
}

.queue-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
  border: 1px solid var(--surface);
  border-radius: 8px;
}

.queue-table th {
  text-align: left;
  padding: 12px 10px;
  background: var(--bg);
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--surface);
}

.queue-table td {
  padding: 14px 10px;
  border-bottom: 1px solid var(--surface);
  vertical-align: top;
  background: inherit;
}

.queue-table tbody tr {
  transition: background 0.15s;
  cursor: pointer;
  background: var(--bg-elevated);
}

.queue-table tbody tr:nth-child(odd) {
  background: var(--bg-elevated);
}

.queue-table tbody tr:nth-child(even) {
  background: var(--bg-elevated);
}

.queue-table tbody tr:hover {
  background: var(--surface);
}

.queue-table tbody tr.expanded {
  background: color-mix(in srgb, var(--gold) 16%, var(--bg));
}

.queue-table tbody tr.expanded-details {
  background: color-mix(in srgb, var(--gold) 16%, var(--bg));
}

/* Columns */
.col-id {
  width: 100px;
}

.queue-container .order-id {
  font-family: monospace;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  background: rgba(0,0,0,0.3);
  padding: 4px 8px;
  border-radius: 4px;
}

.col-requester {
  width: 140px;
}

.requester-name {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.requester-date {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.4;
}

.col-items {
  min-width: 200px;
}

.item-line {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: 4px;
  line-height: 1.4;
}

.queue-container .item-qty {
  color: var(--gold);
  font-weight: 600;
  margin-right: 4px;
}

.item-total {
  font-size: var(--fs-sm);
  color: var(--gold);
  margin-top: 8px;
  font-weight: 600;
}

.order-reagents {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--surface);
}

.reagent-line {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

.reagent-line .reagent-qty {
  color: var(--gold);
  font-weight: 600;
}

.reagent-line-herb { color: var(--green); }
.reagent-line-vendor { color: var(--text-muted); }
.reagent-line-drop { color: var(--red); }
.reagent-line-crafted { color: var(--gold); }
.reagent-line-other { color: var(--text-muted); }

.modal-reagents {
  padding: 10px 16px;
  border-top: 1px solid var(--surface);
  border-bottom: 1px solid var(--surface);
  background: rgba(0,0,0,0.15);
}

.modal-reagents-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.col-status {
  width: 110px;
}

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
}

.status-pending { background: rgba(241, 196, 15, 0.2); color: var(--gold); }
.status-claimed { background: rgba(52, 152, 219, 0.2); color: var(--blue); }
.status-fulfilled { background: rgba(155, 89, 182, 0.2); color: var(--purple); }
.status-completed { background: rgba(46, 204, 113, 0.2); color: var(--green); }
.status-received { background: rgba(46, 204, 113, 0.2); color: var(--green); }
.status-issue { background: rgba(231, 76, 60, 0.2); color: var(--red); }

.claimed-by {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 4px;
}

.claimed-by strong {
  color: var(--blue);
}

.col-actions {
  width: 280px;
}

/* Action Buttons */
.action-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.queue-container .action-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: all 0.2s;
  white-space: nowrap;
}

.queue-container .action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-claim {
  background: var(--blue-bg);
  color: var(--blue);
  border: 1px solid var(--blue-deep);
}

.btn-claim:hover:not(:disabled) {
  background: var(--blue-deep);
}

.btn-claimed {
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--surface);
  font-size: var(--fs-xs);
}

.btn-fulfill {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid var(--green-deep);
}

.btn-fulfill:hover:not(:disabled) {
  background: var(--green-deep);
}

.btn-fulfilled {
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--surface);
  font-size: var(--fs-xs);
}

.btn-receive {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid var(--green-deep);
}

.btn-receive:hover:not(:disabled) {
  background: var(--green-deep);
}

/* ================================
   EXPANDED DETAILS
   ================================ */
.expanded-details td {
  padding: 0 !important;
  background: var(--bg-elevated) !important;
}

.detail-content {
  padding: 20px;
  background: var(--bg-elevated);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.detail-item {
  background: var(--bg-elevated);
  padding: 12px;
  border-radius: 6px;
  border: 1px solid var(--surface);
}

.detail-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.detail-value {
  font-size: var(--fs-base);
  color: var(--text);
}

.detail-value.highlight { color: var(--blue); }
.detail-value.purple { color: var(--purple); }
.detail-value.gold { color: var(--gold); font-weight: 600; }
.detail-value.success { color: var(--green); }

.notes-box {
  background: rgba(0,0,0,0.2);
  padding: 12px;
  border-radius: 6px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: 16px;
}

.expanded-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ================================
   HERBALIST FLOW
   ================================ */
.herbalist-flow {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.herbalist-name {
  font-weight: 600;
  color: var(--green);
}

.flow-arrow {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.alchemist-name {
  color: var(--purple);
  font-weight: 500;
}

.mailed-from {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ================================
   MODAL
   ================================ */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: linear-gradient(135deg, var(--blue-bg), var(--blue-bg));
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 12px;
  padding: 24px;
  max-width: var(--w-tight);
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.modal-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--gold);
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-xl);
  cursor: pointer;
}

.modal-close:hover {
  color: var(--text);
}

.modal-customer {
  color: var(--text-muted);
  font-size: var(--fs-base);
  margin-bottom: 20px;
}

.fulfill-options {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.fulfill-option {
  flex: 1;
  padding: 16px;
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(0,0,0,0.3);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}

.fulfill-option:hover {
  border-color: rgba(212, 175, 55, 0.5);
  background: rgba(212, 175, 55, 0.1);
}

.fulfill-option-icon {
  font-size: var(--fs-xl);
  margin-bottom: 8px;
}

.fulfill-option-label {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
}

.fulfill-option-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 4px;
}

.partial-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.partial-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0,0,0,0.3);
  padding: 12px;
  border-radius: 6px;
}

.partial-item-name {
  color: var(--text);
  font-size: var(--fs-base);
}

.partial-item-ordered {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.partial-item-input {
  display: flex;
  align-items: center;
  gap: 8px;
}

.partial-item-input input {
  width: 60px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  background: rgba(0,0,0,0.5);
  color: var(--text);
  font-size: var(--fs-base);
  text-align: center;
}

.modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.modal-btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.modal-btn-cancel {
  background: rgba(100,100,100,0.3);
  color: var(--text-muted);
}

.modal-btn-cancel:hover {
  background: rgba(100,100,100,0.5);
  color: var(--text);
}

.modal-btn-submit {
  background: rgba(46, 204, 113, 0.3);
  color: var(--green);
}

.modal-btn-submit:hover {
  background: rgba(46, 204, 113, 0.5);
}

/* ================================
   EMPTY & LOADING STATES
   ================================ */
.loading-text {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.empty-state .emoji {
  font-size: var(--fs-2xl);
  margin-bottom: 16px;
}

/* ================================
   ADMIN MODE
   ================================ */
.admin-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-btn {
  padding: 6px 14px;
  border: 1px solid rgba(231, 76, 60, 0.3);
  border-radius: 6px;
  background: rgba(231, 76, 60, 0.1);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-sm);
  transition: all 0.2s;
}

.admin-btn:hover {
  background: rgba(231, 76, 60, 0.2);
  color: var(--text-muted);
}

.admin-btn.active {
  background: rgba(231, 76, 60, 0.3);
  border-color: rgba(231, 76, 60, 0.6);
  color: var(--red);
}

.filter-tab.hidden-tab {
  background: rgba(231, 76, 60, 0.15);
  color: var(--red);
}

.filter-tab.hidden-tab.active {
  background: rgba(231, 76, 60, 0.25);
  color: var(--red);
}

.btn-hide {
  background: color-mix(in srgb, var(--red) 16%, var(--bg));
  color: var(--red);
  border: 1px solid color-mix(in srgb, var(--red) 42%, var(--bg));
  padding: 4px 8px;
  font-size: var(--fs-xs);
}

.btn-hide:hover:not(:disabled) {
  background: color-mix(in srgb, var(--red) 42%, var(--bg));
}

.btn-restore {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid var(--green-deep);
}

.btn-restore:hover:not(:disabled) {
  background: var(--green-deep);
}

.btn-delete {
  background: color-mix(in srgb, var(--red) 16%, var(--bg));
  color: var(--red);
  border: 1px solid color-mix(in srgb, var(--red) 42%, var(--bg));
  padding: 4px 8px;
  font-size: var(--fs-xs);
}

.btn-delete:hover:not(:disabled) {
  background: color-mix(in srgb, var(--red) 42%, var(--bg));
}

.btn-delete-all {
  background: color-mix(in srgb, var(--red) 16%, var(--bg));
  color: var(--red);
  border: 1px solid color-mix(in srgb, var(--red) 42%, var(--bg));
  padding: 6px 14px;
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: 8px;
}

.btn-delete-all:hover:not(:disabled) {
  background: color-mix(in srgb, var(--red) 42%, var(--bg));
  border-color: color-mix(in srgb, var(--red) 42%, var(--bg));
}

.confirm-btn-delete {
  background: color-mix(in srgb, var(--red) 42%, var(--bg));
  color: var(--red);
}

.confirm-btn-delete:hover {
  background: color-mix(in srgb, var(--red) 42%, var(--bg));
}

.hidden-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  background: rgba(231, 76, 60, 0.2);
  color: var(--red);
  margin-left: 6px;
}

/* Confirmation Modal */
.confirm-modal-content {
  background: linear-gradient(135deg, var(--blue-bg), var(--blue-bg));
  border: 1px solid rgba(231, 76, 60, 0.5);
  border-radius: 12px;
  padding: 24px;
  max-width: var(--w-tight);
  width: 90%;
  text-align: center;
}

.confirm-icon {
  font-size: var(--fs-2xl);
  margin-bottom: 16px;
}

.confirm-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--red);
  margin-bottom: 12px;
}

.confirm-message {
  color: var(--text-muted);
  font-size: var(--fs-base);
  margin-bottom: 20px;
  line-height: 1.5;
}

.confirm-sale-info {
  background: rgba(0,0,0,0.3);
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 20px;
  text-align: left;
}

.confirm-sale-info .info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: var(--fs-sm);
}

.confirm-sale-info .info-label {
  color: var(--text-muted);
}

.confirm-sale-info .info-value {
  color: var(--text);
}

.confirm-buttons {
  display: flex;
  gap: 12px;
}

.confirm-btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.confirm-btn-cancel {
  background: rgba(100,100,100,0.3);
  color: var(--text-muted);
}

.confirm-btn-cancel:hover {
  background: rgba(100,100,100,0.5);
  color: var(--text);
}

.confirm-btn-hide {
  background: color-mix(in srgb, var(--red) 42%, var(--bg));
  color: var(--red);
}

.confirm-btn-hide:hover {
  background: color-mix(in srgb, var(--red) 42%, var(--bg));
}

/* Password Modal */
.password-modal-content {
  background: linear-gradient(135deg, var(--blue-bg), var(--blue-bg));
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 12px;
  padding: 24px;
  max-width: var(--w-tight);
  width: 90%;
  text-align: center;
}

.password-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 16px;
}

.password-input {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  background: rgba(0,0,0,0.5);
  color: var(--text);
  font-size: var(--fs-base);
  margin-bottom: 12px;
  box-sizing: border-box;
}

.password-input.error {
  border-color: var(--red);
}

.password-error {
  color: var(--red);
  font-size: var(--fs-sm);
  margin-bottom: 12px;
}

.password-buttons {
  display: flex;
  gap: 12px;
}

.password-btn {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 6px;
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.password-btn-cancel {
  background: rgba(100,100,100,0.3);
  color: var(--text-muted);
}

.password-btn-cancel:hover {
  background: rgba(100,100,100,0.5);
  color: var(--text);
}

.password-btn-submit {
  background: rgba(212, 175, 55, 0.3);
  color: var(--gold);
}

.password-btn-submit:hover {
  background: rgba(212, 175, 55, 0.5);
}

/* ============================================================
   PLAYER ANALYTICS PAGE STYLES
   Extracted from islands/PlayerAnalytics.tsx
   ============================================================ */

.player-analytics {
  margin-top: 24px;
}

.analytics-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 8px;
}

.tab-btn {
  padding: 10px 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px 6px 0 0;
  color: var(--text-muted);
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tab-btn:hover {
  background: var(--surface);
  color: var(--text);
}

.tab-btn.active {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}

.tab-content {
  min-height: 400px;
}

.charts-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.chart-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.chart-container {
  background: var(--bg-elevated);
  padding: 20px;
  border-radius: 8px;
  border: 1px solid var(--border);
  min-height: 400px;
  position: relative;
}

.chart-container.small {
  min-height: 350px;
}

.chart-container canvas {
  max-height: 100%;
}

.see-all-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 12px;
  background: var(--blue);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: all 0.2s;
  z-index: 10;
}

.see-all-btn:hover {
  background: var(--blue-deep);
  transform: translateY(-1px);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-content {
  background: var(--bg);
  border-radius: 8px;
  max-width: var(--w-medium);
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  font-size: var(--fs-xl);
  color: var(--text);
}

.modal-close {
  background: none;
  border: none;
  font-size: var(--fs-xl);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
}

.modal-close:hover {
  background: var(--surface);
  color: var(--text);
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
}

.all-players-table {
  width: 100%;
  border-collapse: collapse;
}

.all-players-table th {
  background: var(--bg-elevated);
  padding: 12px;
  text-align: left;
  border-bottom: 2px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.all-players-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.all-players-table tbody tr:hover {
  background: var(--bg-elevated);
}

.all-players-table tbody tr:nth-child(1) td:first-child {
  color: var(--coin-gold);
  font-weight: bold;
}

.all-players-table tbody tr:nth-child(2) td:first-child {
  color: var(--coin-silver);
  font-weight: bold;
}

.all-players-table tbody tr:nth-child(3) td:first-child {
  color: var(--coin-copper);
  font-weight: bold;
}

@media (max-width: 1024px) {
  .chart-row {
    grid-template-columns: 1fr;
  }

  .analytics-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tab-btn {
    white-space: nowrap;
  }
}

/* ============================================================
   ARCHITECTURE DOCS PAGE STYLES
   Extracted from islands/ArchitectureDocs.tsx
   Conflicts scoped: .stat-value, .stat-label, .flow-arrow
   ============================================================ */
  .arch-container {
    width: 100%;
    max-width: none;
  }
  .last-updated {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-align: right;
    margin-bottom: 12px;
    font-style: italic;
  }
  .arch-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
  }
  .arch-nav-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    font-size: var(--fs-base);
    font-weight: 500;
    font-family: inherit;
  }
  .arch-nav-btn:hover {
    background: var(--bg-elevated);
    color: var(--text);
    transform: translateY(-1px);
  }
  .arch-nav-btn.active {
    background: var(--blue);
    border-color: var(--blue);
    color: white;
  }
  .arch-nav-icon {
    font-size: var(--fs-lg);
  }

  .arch-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
  }
  .arch-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
  }
  .arch-card-title {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text);
    margin: 0;
  }
  .arch-card-body {
    padding: 20px;
  }

  .stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
  }
  @media (max-width: 768px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
  }
  .stat-item {
    background: linear-gradient(135deg, var(--surface) 0%, var(--bg-elevated) 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
  }
  .arch-container .stat-value {
    font-size: var(--fs-2xl);
    font-weight: 700;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .arch-container .stat-label {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
  }

  .tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
  }
  .tech-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s;
  }
  .tech-card:hover {
    border-color: var(--blue);
    transform: translateY(-2px);
  }
  .tech-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }
  .tech-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xl);
  }
  .tech-icon.blue { background: rgba(87, 148, 242, 0.15); }
  .tech-icon.green { background: rgba(115, 191, 105, 0.15); }
  .tech-icon.purple { background: rgba(184, 119, 217, 0.15); }
  .tech-icon.orange { background: rgba(255, 152, 48, 0.15); }
  .tech-name {
    font-weight: 600;
    color: var(--text);
    font-size: var(--fs-lg);
  }
  .tech-type {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .tech-desc {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
  }
  .tech-desc code {
    background: var(--bg-elevated);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: var(--fs-xs);
    color: var(--purple);
  }

  /* Visual Flow Diagram */
  .visual-flow {
    background: var(--surface);
    border-radius: 12px;
    padding: 32px;
    position: relative;
    overflow: hidden;
  }
  .flow-layer {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
  }
  .flow-layer:last-child { margin-bottom: 0; }
  .flow-layer-title {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 16px;
    font-weight: 600;
  }
  .flow-items {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }
  .flow-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: var(--fs-sm);
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .flow-item.external { border-color: var(--gold); }
  .flow-item.server { border-color: var(--blue); }
  .flow-item.module { border-color: var(--green); }
  .flow-item.db { border-color: var(--purple); }
  .arch-container .flow-arrow {
    text-align: center;
    padding: 8px 0;
    color: var(--text-muted);
    font-size: var(--fs-xl);
  }

  /* ERD Styles */
  .erd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
  }
  .erd-table {
    background: var(--surface);
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--border);
  }
  .erd-header {
    padding: 14px 16px;
    font-weight: 600;
    font-size: var(--fs-base);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .erd-header.blue { background: linear-gradient(135deg, rgba(87, 148, 242, 0.2) 0%, rgba(87, 148, 242, 0.1) 100%); color: var(--blue); border-bottom: 2px solid var(--blue); }
  .erd-header.green { background: linear-gradient(135deg, rgba(115, 191, 105, 0.2) 0%, rgba(115, 191, 105, 0.1) 100%); color: var(--green); border-bottom: 2px solid var(--green); }
  .erd-header.purple { background: linear-gradient(135deg, rgba(184, 119, 217, 0.2) 0%, rgba(184, 119, 217, 0.1) 100%); color: var(--purple); border-bottom: 2px solid var(--purple); }
  .erd-header.orange { background: linear-gradient(135deg, rgba(255, 152, 48, 0.2) 0%, rgba(255, 152, 48, 0.1) 100%); color: var(--gold); border-bottom: 2px solid var(--gold); }
  .erd-fields {
    padding: 12px 0;
  }
  .erd-field {
    padding: 8px 16px;
    font-size: var(--fs-sm);
    font-family: ui-monospace, monospace;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .erd-field:hover {
    background: var(--bg-elevated);
  }
  .erd-field.pk { color: var(--gold); font-weight: 600; }
  .erd-field.fk { color: var(--blue); }
  .erd-type {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    background: var(--bg-elevated);
    padding: 2px 6px;
    border-radius: 4px;
  }

  /* Shared Modules */
  .module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
  }
  .module-card {
    background: linear-gradient(135deg, rgba(115, 191, 105, 0.08) 0%, rgba(115, 191, 105, 0.02) 100%);
    border: 1px solid var(--green);
    border-radius: 12px;
    padding: 20px;
  }
  .module-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }
  .module-icon {
    font-size: var(--fs-xl);
  }
  .module-name {
    font-weight: 600;
    color: var(--green);
    font-size: var(--fs-base);
  }
  .module-desc {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
    margin-bottom: 12px;
  }
  .module-used {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    padding-top: 12px;
    border-top: 1px solid rgba(115, 191, 105, 0.2);
  }
  .module-used strong { color: var(--text-muted); }

  /* Island Grid */
  .island-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
  }
  .island-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
  }
  .island-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
  }
  .island-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xl);
    background: rgba(87, 148, 242, 0.15);
  }
  .island-name {
    font-weight: 600;
    color: var(--text);
    font-size: var(--fs-base);
  }
  .island-type {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .island-desc {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
    margin-bottom: 14px;
  }
  .island-deps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .island-dep {
    font-size: var(--fs-xs);
    padding: 4px 8px;
    background: var(--bg-elevated);
    border-radius: 4px;
    color: var(--purple);
    font-family: ui-monospace, monospace;
  }

  /* API Table */
  .api-section {
    margin-bottom: 28px;
  }
  .api-section:last-child { margin-bottom: 0; }
  .api-section-title {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .api-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-sm);
  }
  .api-table th {
    text-align: left;
    padding: 12px 14px;
    background: var(--surface);
    color: var(--text-muted);
    font-weight: 500;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
  }
  .api-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
  }
  .api-table tr:hover td {
    background: var(--surface);
  }
  .method {
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
  }
  .method.get { background: rgba(115, 191, 105, 0.15); color: var(--green); }
  .method.post { background: rgba(87, 148, 242, 0.15); color: var(--blue); }
  .method.put { background: rgba(255, 152, 48, 0.15); color: var(--gold); }
  .method.del { background: rgba(242, 73, 92, 0.15); color: var(--red); }
  .route {
    font-family: ui-monospace, monospace;
    font-size: var(--fs-sm);
    color: var(--purple);
  }

  /* Flow Steps */
  .flow-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: var(--w-narrow);
    margin: 0 auto;
  }
  .flow-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }
  .flow-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-base);
    font-weight: 600;
    flex-shrink: 0;
  }
  .flow-content {
    flex: 1;
    padding: 14px 18px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
  }
  .flow-content code {
    background: var(--surface);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: var(--fs-xs);
    color: var(--purple);
  }
  .flow-content strong {
    color: var(--text);
  }

  /* Rules Grid */
  .rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
  }
  .rule-card {
    background: var(--surface);
    border-left: 3px solid var(--blue);
    border-radius: 0 8px 8px 0;
    padding: 16px 20px;
  }
  .rule-card.green { border-left-color: var(--green); }
  .rule-card.orange { border-left-color: var(--gold); }
  .rule-card.purple { border-left-color: var(--purple); }
  .rule-title {
    font-weight: 600;
    color: var(--text);
    font-size: var(--fs-base);
    margin-bottom: 6px;
  }
  .rule-desc {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
  }
  .rule-desc code {
    background: var(--bg-elevated);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: var(--fs-xs);
    color: var(--purple);
  }

  @media (max-width: 768px) {
    .arch-nav { flex-direction: column; }
    .arch-nav-btn { justify-content: center; }
    .erd-grid, .module-grid, .island-grid, .rules-grid { grid-template-columns: 1fr; }
  }

  /* Visual Diagrams */
  .visual-diagram {
    padding: 20px;
    background: var(--bg-elevated);
    border-radius: 8px;
  }

  /* Architecture Diagram Styles */
  .diagram-layer-title {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 12px;
    text-align: center;
  }

  .diagram-layer {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
  }

  .diagram-box {
    min-width: 180px;
    padding: 16px 20px;
    border-radius: 8px;
    border: 2px solid;
    text-align: center;
    transition: transform 0.2s;
  }

  .diagram-box:hover {
    transform: translateY(-2px);
  }

  .diagram-box.status-good {
    border-color: var(--green);
    background: linear-gradient(135deg, rgba(115, 191, 105, 0.1) 0%, rgba(115, 191, 105, 0.05) 100%);
  }

  .diagram-box.status-warning {
    border-color: var(--gold);
    background: linear-gradient(135deg, rgba(255, 152, 48, 0.1) 0%, rgba(255, 152, 48, 0.05) 100%);
  }

  .diagram-box.status-error {
    border-color: var(--red);
    background: linear-gradient(135deg, rgba(242, 73, 92, 0.1) 0%, rgba(242, 73, 92, 0.05) 100%);
  }

  .diagram-box-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
  }

  .diagram-box-count {
    font-size: var(--fs-sm);
    color: var(--text-muted);
  }

  .diagram-arrow-down {
    text-align: center;
    font-size: var(--fs-xl);
    color: var(--blue);
    margin: 12px 0;
    font-weight: bold;
  }

  /* Flowchart Diagram Styles */
  .flowchart-diagram svg {
    background: var(--bg-elevated);
    border-radius: 8px;
  }

  /* Filesystem Diagram Styles */
  .filesystem-diagram svg {
    background: var(--bg-elevated);
    border-radius: 8px;
    padding: 20px;
  }


/* ============================================================
   ATTENDANCE TABS PAGE STYLES
   Extracted from islands/AttendanceTabs.tsx
   All selectors scoped under .attendance-container
   ============================================================ */
        .attendance-container .tab-nav {
          display: flex;
          gap: 8px;
          margin-bottom: 20px;
          border-bottom: 1px solid var(--border);
          padding-bottom: 12px;
          flex-wrap: wrap;
        }
        .attendance-container .tab-btn {
          padding: 10px 20px;
          background: transparent;
          border: 1px solid var(--border);
          border-radius: 8px;
          color: var(--text-muted);
          cursor: pointer;
          font-size: var(--fs-base);
          font-weight: 500;
          transition: all 0.2s;
          font-family: inherit;
          white-space: nowrap;
        }
        .attendance-container .tab-btn:hover {
          background: var(--surface);
          color: var(--text);
        }
        .attendance-container .tab-btn.active {
          background: var(--blue);
          border-color: var(--blue);
          color: white;
        }

        /* Mobile responsive tabs */
        @media (max-width: 640px) {
          .attendance-container .tab-nav {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 6px;
          }
          .attendance-container .tab-btn {
            padding: 8px 10px;
            font-size: var(--fs-sm);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .attendance-container .stat-grid-3 {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 16px;
        }
        @media (max-width: 640px) {
          .stat-grid-3 { grid-template-columns: 1fr; }
        }
        .attendance-container .stat-card {
          background: var(--bg-elevated);
          border: 1px solid var(--border);
          border-radius: 12px;
          padding: 24px;
          text-align: center;
        }
        .attendance-container .stat-value {
          font-size: var(--fs-2xl);
          font-weight: 700;
          color: var(--blue);
        }
        .attendance-container .stat-label {
          font-size: var(--fs-sm);
          color: var(--text-muted);
          text-transform: uppercase;
          letter-spacing: 0.5px;
          margin-top: 4px;
        }

        .attendance-container .card {
          background: var(--bg-elevated);
          border: 1px solid var(--border);
          border-radius: 12px;
          overflow: hidden;
        }
        .attendance-container .card-header {
          padding: 16px 20px;
          border-bottom: 1px solid var(--border);
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .attendance-container .card-title {
          font-size: var(--fs-lg);
          font-weight: 600;
          color: var(--text);
          margin: 0;
        }
        .attendance-container .card-body {
          padding: 20px;
        }
        .mt-3 { margin-top: 20px; }

        .attendance-container .badge {
          font-size: var(--fs-sm);
          padding: 4px 10px;
          border-radius: 12px;
          font-weight: 500;
        }
        .attendance-container .badge-green {
          background: rgba(115, 191, 105, 0.15);
          color: var(--green);
        }
        .attendance-container .badge-blue {
          background: rgba(87, 148, 242, 0.15);
          color: var(--blue);
        }

        .attendance-container .raid-type-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
          gap: 12px;
        }
        .attendance-container .raid-type-card {
          background: var(--surface);
          border-radius: 8px;
          padding: 12px 16px;
          transition: all 0.2s;
        }
        .attendance-container .raid-type-card:hover {
          background: var(--bg-elevated);
          transform: translateY(-2px);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        .attendance-container .raid-type-name {
          font-weight: 600;
          font-size: var(--fs-base);
        }
        .attendance-container .raid-type-count {
          font-size: var(--fs-sm);
          color: var(--text-muted);
          margin-top: 2px;
        }

        .attendance-container .recent-raids-list {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }
        .attendance-container .recent-raid-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px 16px;
          background: var(--surface);
          border-radius: 8px;
          transition: all 0.2s;
        }
        .attendance-container .recent-raid-item:hover {
          background: var(--bg-elevated);
          transform: translateX(4px);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        .attendance-container .recent-raid-info {
          display: flex;
          align-items: center;
          gap: 12px;
        }
        .attendance-container .recent-raid-type {
          font-weight: 600;
          font-size: var(--fs-sm);
          min-width: 60px;
        }
        .attendance-container .recent-raid-name {
          color: var(--text);
          font-size: var(--fs-base);
        }
        .attendance-container .recent-raid-meta {
          display: flex;
          align-items: center;
          gap: 16px;
          color: var(--text-muted);
          font-size: var(--fs-sm);
        }
        .attendance-container .recent-raid-players {
          color: var(--text-muted);
        }

        .attendance-container .table-container {
          overflow-x: auto;
        }
        .attendance-container table {
          width: 100%;
          border-collapse: collapse;
        }
        .attendance-container th, .attendance-container td {
          padding: 12px 16px;
          text-align: left;
          border-bottom: 1px solid var(--border);
        }
        .attendance-container th {
          background: var(--surface);
          font-size: var(--fs-xs);
          text-transform: uppercase;
          letter-spacing: 0.5px;
          color: var(--text-muted);
          font-weight: 500;
        }
        .attendance-container tr:hover td {
          background: var(--surface);
        }

        .attendance-container .raid-type-badges {
          display: flex;
          gap: 4px;
          flex-wrap: wrap;
        }
        .attendance-container .raid-type-badge {
          font-size: var(--fs-xs);
          padding: 2px 6px;
          border-radius: 4px;
          font-weight: 500;
        }

        .attendance-container .raid-select {
          width: 100%;
          padding: 12px 16px;
          background: var(--surface);
          border: 1px solid var(--border);
          border-radius: 8px;
          color: var(--text);
          font-size: var(--fs-base);
          cursor: pointer;
          font-family: inherit;
        }
        .attendance-container .raid-select:focus {
          outline: none;
          border-color: var(--blue);
        }

        .attendance-container .raid-date-display {
          font-size: var(--fs-sm);
          color: var(--text-muted);
          margin-bottom: 12px;
          padding-bottom: 8px;
          border-bottom: 1px solid var(--border);
        }

        .attendance-container .roster-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
          gap: 8px;
        }
        .attendance-container .roster-player {
          padding: 10px 14px;
          background: var(--surface);
          border-radius: 6px;
          font-size: var(--fs-sm);
          color: var(--text);
        }

        .attendance-container .empty-state {
          text-align: center;
          padding: 48px 20px;
          color: var(--text-muted);
        }

        .attendance-container .clickable {
          cursor: pointer;
        }

        .attendance-container .class-groups {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 12px;
        }

        .attendance-container .class-group {
          background: var(--surface);
          border-radius: 6px;
          overflow: hidden;
        }

        .attendance-container .class-group-header {
          display: flex;
          align-items: center;
          gap: 6px;
          padding: 8px 12px;
          background: var(--bg-elevated);
          border-left: 3px solid var(--blue);
          font-weight: 600;
        }

        .attendance-container .class-group-icon {
          font-size: var(--fs-lg);
        }

        .attendance-container .class-group-name {
          font-size: var(--fs-sm);
          letter-spacing: 0.5px;
          flex: 1;
        }

        .attendance-container .class-group-count {
          color: var(--text-muted);
          font-size: var(--fs-xs);
          font-weight: 500;
        }

        .attendance-container .class-group-players {
          display: flex;
          flex-direction: column;
          gap: 3px;
          padding: 8px;
        }

        .attendance-container .class-player-item {
          display: flex;
          align-items: center;
          gap: 5px;
          padding: 5px 8px;
          background: var(--bg-elevated);
          border-radius: 4px;
          font-size: var(--fs-sm);
          transition: all 0.15s;
        }

        .attendance-container .class-player-item:hover {
          background: var(--bg-tertiary);
          transform: translateX(3px);
        }

        .attendance-container .player-spec {
          color: var(--text-muted);
          font-size: var(--fs-xs);
          font-weight: 500;
        }

        .attendance-container .player-name {
          font-weight: 500;
        }

        .attendance-container .filter-clear-btn {
          padding: 6px 12px;
          background: rgba(255, 149, 0, 0.15);
          border: 1px solid var(--gold);
          border-radius: 6px;
          color: var(--gold);
          font-size: var(--fs-sm);
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s;
          font-family: inherit;
        }
        .attendance-container .filter-clear-btn:hover {
          background: rgba(255, 149, 0, 0.25);
        }

        /* Player Detail Panel */
        .attendance-container .player-panel-overlay {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.7);
          z-index: 1000;
          animation: fadeIn 0.2s;
        }

        .attendance-container .player-panel {
          position: fixed;
          top: 0;
          right: 0;
          bottom: 0;
          width: 400px;
          max-width: 90vw;
          background: var(--bg);
          border-left: 1px solid var(--border);
          z-index: 1001;
          display: flex;
          flex-direction: column;
          animation: slideIn 0.3s ease-out;
          box-shadow: -4px 0 12px rgba(0, 0, 0, 0.3);
        }

        @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }

        @keyframes slideIn {
          from { transform: translateX(100%); }
          to { transform: translateX(0); }
        }

        .attendance-container .player-panel-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          padding: 20px;
          border-bottom: 1px solid var(--border);
          background: var(--bg-elevated);
        }

        .attendance-container .player-panel-title {
          margin: 0;
          font-size: var(--fs-xl);
          font-weight: 600;
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .attendance-container .player-panel-class {
          font-size: var(--fs-base);
          color: var(--text-muted);
          margin-top: 4px;
        }

        .attendance-container .player-panel-spec {
          color: var(--text-muted);
        }

        .attendance-container .player-panel-close {
          background: transparent;
          border: none;
          color: var(--text-muted);
          font-size: var(--fs-xl);
          cursor: pointer;
          padding: 4px 8px;
          line-height: 1;
          transition: all 0.2s;
        }

        .attendance-container .player-panel-close:hover {
          color: var(--text);
          background: rgba(255, 255, 255, 0.1);
          border-radius: 4px;
        }

        .attendance-container .player-panel-body {
          flex: 1;
          overflow-y: auto;
          padding: 20px;
        }

        .attendance-container .player-panel-section {
          margin-bottom: 24px;
        }

        .attendance-container .player-panel-section:last-child {
          margin-bottom: 0;
        }

        .attendance-container .player-panel-section-title {
          font-size: var(--fs-base);
          font-weight: 600;
          margin: 0 0 12px 0;
          color: var(--text);
        }

        .attendance-container .player-panel-stats {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 12px;
        }

        .attendance-container .player-stat {
          background: var(--surface);
          padding: 12px;
          border-radius: 6px;
          text-align: center;
        }

        .attendance-container .player-stat-label {
          display: block;
          font-size: var(--fs-xs);
          color: var(--text-muted);
          margin-bottom: 4px;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .attendance-container .player-stat-value {
          display: block;
          font-size: var(--fs-lg);
          font-weight: 600;
          color: var(--text);
        }

        .attendance-container .player-panel-raid-types {
          display: flex;
          flex-direction: column;
          gap: 8px;
        }

        .attendance-container .player-raid-type-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px 12px;
          background: var(--surface);
          border-radius: 6px;
          font-size: var(--fs-sm);
        }

        .attendance-container .player-raid-type-count {
          color: var(--text-muted);
          font-size: var(--fs-sm);
        }

        .attendance-container .player-panel-recent-raids {
          display: flex;
          flex-direction: column;
          gap: 8px;
        }

        .attendance-container .player-recent-raid-item {
          display: flex;
          gap: 8px;
          padding: 8px 12px;
          background: var(--surface);
          border-radius: 6px;
          font-size: var(--fs-sm);
          align-items: center;
        }

        .attendance-container .player-recent-raid-date {
          color: var(--text-muted);
          min-width: 80px;
        }

        .attendance-container .player-recent-raid-name {
          color: var(--text-muted);
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      

/* ==================== ClaudeChat.tsx extracted styles ==================== */

.claude-chat {
          background: var(--bg-secondary);
          border: 2px solid var(--border);
          border-radius: 8px;
          padding: 1.5rem;
          display: flex;
          flex-direction: column;
          height: 600px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        .chat-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 1rem;
          padding-bottom: 1rem;
          border-bottom: 1px solid var(--border);
        }

        .chat-header h3 {
          margin: 0;
          color: var(--text);
        }

        .chat-actions {
          display: flex;
          gap: 0.5rem;
        }

        .preview-btn,
        .clear-btn {
          padding: 0.5rem 1rem;
          border: none;
          border-radius: 4px;
          font-size: var(--fs-base);
          cursor: pointer;
          transition: opacity 0.2s;
        }

        .preview-btn {
          background: var(--blue);
          color: white;
        }

        .clear-btn {
          background: var(--bg-tertiary);
          color: var(--text-muted);
        }

        .preview-btn:hover:not(:disabled),
        .clear-btn:hover {
          opacity: 0.8;
        }

        .preview-btn:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }

        .messages-container {
          flex: 1;
          overflow-y: auto;
          margin-bottom: 1rem;
          padding: 1rem;
          background: var(--bg-tertiary);
          border-radius: 6px;
          border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .empty-chat {
          text-align: center;
          padding: 2rem;
          color: var(--text-muted);
        }

        .empty-chat .hint {
          margin-top: 1.5rem;
          font-size: var(--fs-base);
        }

        .example-prompts {
          list-style: none;
          padding: 0;
          margin: 1rem auto;
          max-width: var(--w-tight);
          text-align: left;
        }

        .example-prompts li {
          padding: 0.5rem;
          margin: 0.5rem 0;
          background: var(--bg-secondary);
          border-left: 3px solid var(--blue);
          border-radius: 4px;
          font-size: var(--fs-base);
          font-style: italic;
        }

        .message {
          margin-bottom: 1.5rem;
        }

        .message-role {
          font-size: var(--fs-sm);
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          margin-bottom: 0.5rem;
        }

        .message.user .message-role {
          color: var(--green);
        }

        .message.assistant .message-role {
          color: var(--blue);
        }

        .message-content {
          padding: 1rem;
          border-radius: 6px;
          line-height: 1.6;
          white-space: pre-wrap;
        }

        .message.user .message-content {
          background: rgba(48, 209, 88, 0.1);
          border-left: 3px solid var(--green);
        }

        .message.assistant .message-content {
          background: rgba(59, 130, 246, 0.1);
          border-left: 3px solid var(--blue);
        }

        .chat-error {
          padding: 0.75rem;
          background: rgba(255, 69, 58, 0.1);
          border: 1px solid var(--red);
          border-radius: 4px;
          color: var(--red);
          margin-bottom: 1rem;
        }

        .chat-input-container {
          display: flex;
          gap: 0.75rem;
        }

        .chat-input {
          flex: 1;
          padding: 0.75rem;
          background: var(--bg);
          border: 2px solid var(--blue);
          border-radius: 6px;
          color: var(--text);
          font-family: inherit;
          font-size: var(--fs-base);
          resize: vertical;
          box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
        }

        .chat-input:focus {
          outline: none;
          border-color: var(--blue);
          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
        }

        .chat-input:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }

        .send-btn {
          padding: 0.75rem 1.5rem;
          background: var(--blue);
          color: white;
          border: none;
          border-radius: 6px;
          font-weight: 600;
          cursor: pointer;
          transition: opacity 0.2s;
          align-self: flex-end;
        }

        .send-btn:hover:not(:disabled) {
          opacity: 0.8;
        }

        .send-btn:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }

        .quick-prompts {
          margin-bottom: 1rem;
          padding: 1rem;
          background: var(--bg-tertiary);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 6px;
        }

        .prompts-header {
          font-size: var(--fs-base);
          font-weight: 600;
          color: var(--text-muted);
          margin-bottom: 0.75rem;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .prompts-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 0.5rem;
        }

        .prompt-btn {
          padding: 0.75rem;
          background: var(--bg-secondary);
          border: 2px solid var(--border);
          border-radius: 6px;
          color: var(--text);
          font-size: var(--fs-base);
          text-align: left;
          cursor: pointer;
          transition: all 0.2s;
          line-height: 1.4;
        }

        .prompt-btn:hover:not(:disabled) {
          border-color: var(--blue);
          background: rgba(59, 130, 246, 0.1);
          transform: translateY(-2px);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .prompt-btn:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }

/* ==================== HerbSales.tsx extracted styles ==================== */

.herbs-container { max-width: var(--container); margin: 0 auto; padding: 15px; }
        .demand-herbs-banner { background: linear-gradient(135deg, rgba(245, 166, 35, 0.08), rgba(234, 88, 12, 0.08)); border: 1px solid rgba(245, 166, 35, 0.25); border-radius: 12px; padding: 16px; margin-bottom: 16px; position: relative; z-index: 101; }
        .demand-herbs-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 4px; }
        .demand-herbs-title { font-size: var(--fs-lg); font-weight: 700; color: var(--gold); }
        .demand-herbs-subtitle { font-size: var(--fs-sm); color: var(--text-muted); width: 100%; }
        .demand-herbs-sync { font-size: var(--fs-xs); color: var(--text-muted); font-style: italic; width: 100%; }
        .demand-herbs-link { font-size: var(--fs-sm); color: rgba(255,255,255,0.5); text-decoration: none; }
        .demand-herbs-link:hover { color: var(--gold); }
        .demand-herbs-list { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 4px; }
        .demand-herb-item { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 8px 12px; min-width: 150px; }
        .demand-herb-icon { width: 32px; height: 32px; border-radius: 4px; flex-shrink: 0; }
        .demand-herb-icon-fallback { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-lg); flex-shrink: 0; }
        .demand-herb-info { display: flex; flex-direction: column; min-width: 0; }
        .demand-herb-name { font-size: var(--fs-sm); font-weight: 600; color: rgba(255,255,255,0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .demand-herb-level { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.05em; padding: 1px 6px; border-radius: 4px; display: inline-block; width: fit-content; }
        .demand-herb-level.critical { background: rgba(239, 68, 68, 0.2); color: var(--red); border: 1px solid rgba(239, 68, 68, 0.3); }
        .demand-herb-level.med { background: rgba(245, 158, 11, 0.2); color: var(--gold); border: 1px solid rgba(245, 158, 11, 0.3); }
        .demand-herb-level.low { background: rgba(107, 114, 128, 0.2); color: var(--text-muted); border: 1px solid rgba(107, 114, 128, 0.3); }

        /* Pinned Materials (admin-managed) */
        .pinned-separator { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; font-size: var(--fs-sm); color: rgba(255,255,255,0.45); }
        .pinned-separator::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.1); }
        .pinned-herbs-list { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 4px; }
        .pinned-herb-item { position: relative; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 8px 12px; min-width: 150px; flex-shrink: 0; }
        .demand-herb-level.clickable { cursor: pointer; border-style: dashed; transition: filter 0.15s, border-color 0.15s; }
        .demand-herb-level.clickable:hover { filter: brightness(1.3); border-color: rgba(255,255,255,0.4); }
        .demand-herb-level.clickable .level-cycle-icon { font-size: var(--fs-xs); margin-left: 3px; opacity: 0.7; }
        .pinned-herb-remove { position: absolute; top: 4px; right: 6px; background: none; border: none; color: rgba(255,255,255,0.35); font-size: var(--fs-base); cursor: pointer; padding: 0 3px; line-height: 1; transition: color 0.15s; }
        .pinned-herb-remove:hover { color: var(--red); }
        .pin-add-form { margin-top: 6px; }
        .pin-add-separator { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; font-size: var(--fs-sm); color: rgba(255,255,255,0.35); }
        .pin-add-separator::before, .pin-add-separator::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.08); }
        .pin-add-row { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
        .pin-search-container { position: relative; flex: 1; min-width: 200px; z-index: 101; }
        .pin-search-input { width: 100%; padding: 8px 12px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; color: white; font-size: var(--fs-base); outline: none; }
        .pin-search-input:focus { border-color: rgba(245, 166, 35, 0.5); }
        .pin-search-input::placeholder { color: rgba(255,255,255,0.3); }
        .pin-search-results { position: absolute; top: 100%; left: 0; right: 0; background: var(--blue-bg); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; margin-top: 4px; max-height: 200px; overflow-y: auto; z-index: 200; }
        .pin-search-result-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; transition: background 0.15s; font-size: var(--fs-base); color: rgba(255,255,255,0.85); }
        .pin-search-result-item:hover { background: rgba(245, 166, 35, 0.12); }
        .pin-search-result-icon { width: 24px; height: 24px; border-radius: 3px; flex-shrink: 0; }
        .pin-level-selector { display: flex; gap: 6px; align-items: center; }
        .pin-level-option { display: flex; align-items: center; gap: 4px; cursor: pointer; }
        .pin-level-option input[type="radio"] { accent-color: var(--gold); cursor: pointer; }
        .pin-level-option label { font-size: var(--fs-sm); font-weight: 600; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
        .pin-level-option label.critical-label { color: var(--red); background: rgba(239, 68, 68, 0.15); }
        .pin-level-option label.med-label { color: var(--gold); background: rgba(245, 158, 11, 0.15); }
        .pin-level-option label.low-label { color: var(--text-muted); background: rgba(107, 114, 128, 0.15); }
        .pin-level-option input:checked + label.critical-label { background: rgba(239, 68, 68, 0.3); border: 1px solid rgba(239, 68, 68, 0.4); }
        .pin-level-option input:checked + label.med-label { background: rgba(245, 158, 11, 0.3); border: 1px solid rgba(245, 158, 11, 0.4); }
        .pin-level-option input:checked + label.low-label { background: rgba(107, 114, 128, 0.3); border: 1px solid rgba(107, 114, 128, 0.4); }

        .herbs-header { text-align: center; margin-bottom: 20px; }
        .herbs-header h1 { color: var(--green); font-size: var(--fs-xl); margin-bottom: 8px; }
        .discount-badge { background: linear-gradient(135deg, var(--green-bg), var(--green-deep)); color: white; padding: 8px 20px; border-radius: 20px; font-size: var(--fs-lg); display: inline-block; }
        .discount-badge.editable { display: inline-flex; align-items: center; gap: 10px; }
        .discount-input { width: 60px; padding: 4px 8px; border: 1px solid var(--green); border-radius: 4px; background: rgba(0,0,0,0.3); color: white; font-size: var(--fs-lg); text-align: center; }
        .discount-save-btn { padding: 4px 12px; background: var(--green); color: var(--blue-bg); border: none; border-radius: 4px; font-weight: bold; cursor: pointer; font-size: var(--fs-base); }
        .discount-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .discount-save-msg { font-size: var(--fs-base); padding: 4px 8px; border-radius: 4px; }
        .discount-save-msg.success { background: rgba(74, 222, 128, 0.3); color: var(--green); }
        .discount-save-msg.error { background: rgba(239, 68, 68, 0.3); color: var(--red); }
        .dynamic-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: var(--fs-base); white-space: nowrap; }
        .dynamic-toggle input[type="checkbox"] { accent-color: var(--green); width: 16px; height: 16px; }
        .tier-discount-controls { display: flex; flex-wrap: wrap; gap: 6px 12px; }
        .tier-discount-row { display: flex; align-items: center; gap: 4px; font-size: var(--fs-sm); white-space: nowrap; }
        .tier-label { color: var(--text); min-width: 90px; }
        .tier-discount-input { width: 42px; padding: 2px 4px; border: 1px solid var(--green); border-radius: 3px; background: rgba(0,0,0,0.3); color: white; font-size: var(--fs-base); text-align: center; }
        .tier-pct { color: var(--text-muted); }
        .flat-discount-control { display: flex; align-items: center; gap: 6px; }
        .discount-badge.editable { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; }
        .header-actions { margin-top: 10px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
        .refresh-btn { background: linear-gradient(135deg, var(--green-bg), var(--green-deep)); color: white; padding: 10px 20px; border-radius: 8px; border: none; font-weight: bold; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s; font-size: var(--fs-base); position: relative; overflow: hidden; }
        .refresh-btn:hover { background: linear-gradient(135deg, var(--green-deep), var(--green-deep)); transform: translateY(-2px); }
        .refresh-btn:disabled { opacity: 1; cursor: not-allowed; transform: none; color: color-mix(in srgb, var(--green) 45%, var(--text)); }
        .refresh-progress-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(74,222,128,0.25), rgba(74,222,128,0.4)); border-radius: 8px; transition: width 0.5s ease; pointer-events: none; }
        .cart-btn { background: linear-gradient(135deg, var(--green), var(--green)); color: var(--blue-bg); padding: 10px 20px; border-radius: 8px; border: none; font-weight: bold; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s; }
        .cart-btn:hover { background: linear-gradient(135deg, var(--green), var(--green-deep)); transform: translateY(-2px); }
        .cart-badge { background: var(--blue-bg); color: var(--green); border-radius: 50%; min-width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: bold; }
        .admin-toggle { background: var(--bg-elevated); border: 1px solid var(--surface); color: var(--text-muted); padding: 10px 20px; border-radius: 8px; cursor: pointer; transition: all 0.2s; font-size: var(--fs-base); }
        .admin-toggle:hover { border-color: var(--green); }
        .admin-toggle.active { background: linear-gradient(135deg, var(--green-bg), var(--green-deep)); border-color: var(--green); color: var(--green); }
        .last-updated-banner { background: var(--bg-elevated); border: 1px solid var(--surface); border-radius: 8px; padding: 10px 20px; margin-top: 15px; display: inline-block; }
        .last-updated-banner .label { color: var(--text-muted); font-size: var(--fs-base); }
        .last-updated-banner .time { color: var(--green); font-weight: bold; margin-left: 8px; }
        .last-updated-banner .relative { color: var(--green); margin-left: 8px; font-size: var(--fs-base); }

        .sticky-toolbar { position: sticky; top: 75px; z-index: 100; background: linear-gradient(180deg, rgba(26,26,26,0.95) 0%, rgba(26,26,26,0.95) 90%, transparent 100%); padding: 12px 0 12px 0; margin: 0 -15px; padding-left: 15px; padding-right: 15px; }
        .sticky-toolbar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 10px; background: var(--bg); z-index: -1; }
        .toolbar-top-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 12px; }
        .search-container { position: relative; flex: 1; min-width: 200px; max-width: var(--w-tight); }
        .search-input { width: 100%; padding: 10px 40px 10px 38px; background: var(--bg-elevated); border: 2px solid var(--surface); border-radius: 8px; color: var(--green); font-size: var(--fs-base); outline: none; transition: border-color 0.2s; box-sizing: border-box; }
        .search-input:focus { border-color: var(--green); }
        .search-input::placeholder { color: var(--border); }
        .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--border); pointer-events: none; font-size: var(--fs-lg); }
        .search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--border); cursor: pointer; font-size: var(--fs-lg); padding: 2px 6px; }
        .search-clear:hover { color: var(--green); }
        .search-results { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); border: 2px solid var(--green); border-top: none; border-radius: 0 0 8px 8px; max-height: 350px; overflow-y: auto; z-index: 1000; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
        .search-results-header { padding: 8px 12px; font-size: var(--fs-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--surface); }
        .search-result-item { padding: 10px 12px; cursor: pointer; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--surface); transition: background 0.2s; }
        .search-result-item:hover { background: var(--bg-elevated); }
        .search-result-item:last-child { border-bottom: none; }
        .search-result-icon { width: 32px; height: 32px; border-radius: 4px; border: 1px solid var(--surface); flex-shrink: 0; }
        .search-result-icon-placeholder { width: 32px; height: 32px; border-radius: 4px; border: 1px solid var(--surface); background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; color: var(--border); font-size: var(--fs-sm); flex-shrink: 0; }
        .search-result-info { flex: 1; min-width: 0; }
        .search-result-name { color: var(--green); font-weight: bold; font-size: var(--fs-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .search-result-price { color: var(--gold); font-weight: bold; font-size: var(--fs-base); white-space: nowrap; margin-right: 8px; }
        .search-result-add { padding: 5px 10px; background: linear-gradient(135deg, var(--green-bg), var(--green-deep)); border: none; border-radius: 5px; color: white; font-size: var(--fs-sm); font-weight: bold; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
        .search-result-add:hover { background: linear-gradient(135deg, var(--green-deep), var(--green-deep)); transform: scale(1.05); }
        .search-result-add:disabled { background: var(--surface); cursor: not-allowed; transform: none; }
        .search-result-add.added { background: linear-gradient(135deg, var(--green-deep), var(--green-bg)); }
        .search-result-no-price { color: var(--border); font-size: var(--fs-sm); font-style: italic; }

        .category-tabs { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: thin; }
        .category-tab { padding: 6px 14px; background: var(--bg-elevated); border: 2px solid var(--surface); border-radius: 6px; color: var(--text-muted); cursor: pointer; transition: all 0.2s; font-size: var(--fs-base); white-space: nowrap; flex-shrink: 0; }
        .category-tab:hover { border-color: var(--green); }
        .category-tab.active { background: linear-gradient(135deg, var(--surface), var(--bg-elevated)); border-color: var(--green); color: var(--green); }
        .sell-mode-banner {
          background: linear-gradient(135deg, rgba(60, 15, 15, 0.95), rgba(40, 10, 10, 0.95));
          border: 1px solid rgba(220, 50, 50, 0.4);
          border-radius: 8px;
          padding: 8px 14px;
          font-size: var(--fs-sm);
          color: var(--red);
          margin-top: 10px;
          display: flex;
          align-items: center;
          gap: 8px;
        }
        .sell-mode-banner strong {
          background: var(--red);
          color: white;
          font-size: var(--fs-xs);
          font-weight: 700;
          padding: 2px 8px;
          border-radius: 4px;
          text-transform: uppercase;
          letter-spacing: 1px;
          flex-shrink: 0;
        }
        .sell-mode-banner span {
          color: var(--text);
        }

        .items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; max-width: var(--container); }
        @media (min-width: 1200px) { .items-grid { grid-template-columns: repeat(4, 1fr); } }
        .item-card { background: var(--bg-elevated); border: 1px solid var(--surface); border-radius: 8px; padding: 10px; transition: all 0.2s; }
        .item-card:hover { border-color: var(--green); transform: translateY(-2px); }
        .item-card.in-cart { border-color: var(--green); box-shadow: 0 0 10px rgba(74, 222, 128, 0.3); }
        .item-card.highlight { animation: highlightPulse 1.5s ease-out; }
        @keyframes highlightPulse { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); border-color: var(--green); } 70% { box-shadow: 0 0 0 15px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
        .item-header { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; padding-right: 55px; }
        .item-icon { width: 40px; height: 40px; border-radius: 4px; border: 2px solid var(--surface); background: var(--bg); flex-shrink: 0; image-rendering: pixelated; }
        .item-icon-placeholder { width: 40px; height: 40px; border-radius: 4px; border: 2px solid var(--surface); background: linear-gradient(135deg, var(--surface), var(--bg-elevated)); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--border); font-size: var(--fs-lg); }
        a.item-name { color: var(--green); font-weight: bold; font-size: var(--fs-lg); line-height: 1.3; text-decoration: none; transition: color 0.2s; overflow: hidden; text-overflow: ellipsis; }
        a.item-name:hover { color: var(--green); text-decoration: underline; }
        .item-prices { margin: 8px 0; }
        .shop-price { font-size: var(--fs-lg); color: var(--gold); font-weight: bold; }
        .ah-price { color: var(--text-muted); font-size: var(--fs-base); margin-left: 8px; }
        .no-price { color: var(--text-muted); font-style: italic; }
        .add-to-cart-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
        .qty-control { display: flex; align-items: center; background: var(--surface); border-radius: 6px; overflow: visible; flex-shrink: 0; min-width: 110px; }
        .qty-btn { width: 28px; height: 28px; border: none; background: transparent; color: var(--green); font-size: var(--fs-lg); cursor: pointer; transition: background 0.2s; }
        .qty-btn:hover { background: rgba(255,255,255,0.1); }
        .qty-input { width: 50px; text-align: center; border: none; background: transparent; color: var(--green); font-size: var(--fs-base); -moz-appearance: textfield; appearance: textfield; padding: 4px 2px; }
        .qty-input::-webkit-inner-spin-button, .qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        .add-btn { flex: 1; padding: 6px 10px; background: linear-gradient(135deg, var(--green-bg), var(--green-deep)); border: none; border-radius: 6px; color: white; font-weight: bold; cursor: pointer; transition: all 0.2s; font-size: var(--fs-base); }
        .add-btn:hover { background: linear-gradient(135deg, var(--green-deep), var(--green-deep)); }
        .add-btn:disabled { background: var(--surface); cursor: not-allowed; }
        .remove-btn { flex: 1; padding: 6px 10px; background: transparent; border: 1px solid var(--red); border-radius: 6px; color: var(--red); font-weight: bold; cursor: pointer; transition: all 0.2s; font-size: var(--fs-base); }
        .remove-btn:hover { background: rgba(239, 68, 68, 0.2); }
        .in-cart-indicator { color: var(--green); font-size: var(--fs-sm); margin-top: 6px; }

        .cart-overlay { position: fixed; top: 95px; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); z-index: 1100; display: flex; justify-content: flex-end; }
        .cart-panel { width: 340px; max-width: 100%; background: var(--bg); height: 100%; display: flex; flex-direction: column; border-left: 2px solid var(--green); }
        .cart-header { padding: 12px 15px; border-bottom: 1px solid var(--surface); display: flex; justify-content: space-between; align-items: center; }
        .cart-header h2 { color: var(--green); margin: 0; font-size: var(--fs-lg); }
        .close-btn { background: none; border: none; color: var(--text-muted); font-size: var(--fs-xl); cursor: pointer; }
        .cart-items { flex: 1; overflow-y: auto; padding: 10px; }
        .cart-item { background: var(--bg-elevated); border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; }
        .cart-item-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
        .cart-item-name { color: var(--green); font-weight: bold; }
        .cart-item-remove { background: none; border: none; color: var(--red); cursor: pointer; font-size: var(--fs-lg); }
        .cart-item-details { display: flex; justify-content: space-between; align-items: center; }
        .cart-item-price { color: var(--gold); font-weight: bold; }
        .cart-item-qty { display: flex; align-items: center; gap: 8px; }
        .cart-item-qty input { width: 50px; padding: 4px; text-align: center; background: var(--surface); border: 1px solid var(--surface); border-radius: 4px; color: var(--green); }
        .cart-empty { text-align: center; color: var(--text-muted); padding: 40px 20px; }
        .cart-footer { padding: 12px 15px; border-top: 1px solid var(--surface); }
        .cart-notes { margin-bottom: 10px; }
        .cart-notes label { display: block; color: var(--text-muted); margin-bottom: 3px; font-size: var(--fs-sm); }
        .cart-notes input, .cart-notes select, .cart-notes textarea { width: 100%; padding: 8px; background: var(--bg-elevated); border: 1px solid var(--surface); border-radius: 5px; color: var(--green); box-sizing: border-box; font-size: var(--fs-base); }
        .cart-notes input:focus, .cart-notes select:focus, .cart-notes textarea:focus { outline: none; border-color: var(--green); }
        .login-required-box { text-align: center; padding: 12px; background: rgba(74, 222, 128, 0.1); border: 1px dashed var(--green); border-radius: 6px; margin-bottom: 10px; }
        .login-required-box p { color: var(--text-muted); margin-bottom: 10px; font-size: var(--fs-base); }
        .discord-login-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--discord); color: white; padding: 8px 16px; border-radius: 5px; text-decoration: none; font-weight: bold; font-size: var(--fs-base); transition: background 0.2s; }
        .discord-login-btn:hover { background: var(--discord-hover); }
        .discord-user-display { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--bg-elevated); border: 1px solid var(--green); border-radius: 5px; }
        .discord-name { color: var(--green); font-weight: bold; font-size: var(--fs-base); }
        .discord-tag { color: var(--discord); font-size: var(--fs-sm); background: color-mix(in srgb, var(--discord) 20%, transparent); padding: 2px 6px; border-radius: 3px; }
        .cart-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: var(--fs-lg); }
        .cart-total-label { color: var(--text-muted); font-size: var(--fs-base); }
        .cart-total-value { color: var(--gold); font-weight: bold; font-size: var(--fs-lg); }
        .checkout-btn { width: 100%; padding: 10px; background: linear-gradient(135deg, var(--green), var(--green)); border: none; border-radius: 6px; color: var(--blue-bg); font-size: var(--fs-base); font-weight: bold; cursor: pointer; transition: all 0.2s; }
        .checkout-btn:hover { background: linear-gradient(135deg, var(--green), var(--green-deep)); }
        .checkout-btn:disabled { background: var(--surface); color: var(--border); cursor: not-allowed; }
        .clear-cart-btn { width: 100%; padding: 8px; background: transparent; border: 1px solid var(--surface); border-radius: 5px; color: var(--text-muted); margin-top: 8px; cursor: pointer; font-size: var(--fs-base); }
        .clear-cart-btn:hover { border-color: var(--red); color: var(--red); }

        .herbs-container .status-message { text-align: center; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
        .herbs-container .status-success { background: rgba(74, 222, 128, 0.2); color: var(--green); border: 1px solid var(--green); }
        .herbs-container .status-error { background: rgba(239, 68, 68, 0.2); color: var(--red); border: 1px solid var(--red); }

        .admin-bar { background: linear-gradient(135deg, var(--green-bg), var(--green-deep)); border: 1px solid var(--green); border-radius: 10px; padding: 15px 20px; margin-bottom: 20px; }
        .admin-bar-title { color: var(--green); font-weight: bold; font-size: var(--fs-lg); margin-bottom: 15px; }
        .alchemist-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; }
        .alchemist-row { display: flex; align-items: center; gap: 10px; padding: 10px; background: rgba(0,0,0,0.3); border-radius: 6px; }
        .alchemist-row.inactive { opacity: 0.5; }
        .alchemist-name { flex: 1; color: white; font-weight: 500; }
        .alchemist-discord-id { color: var(--text-muted); font-size: var(--fs-sm); }
        .alchemist-status { font-size: var(--fs-sm); padding: 2px 8px; border-radius: 4px; }
        .alchemist-status.active { background: rgba(74, 222, 128, 0.3); color: var(--green); }
        .alchemist-status.inactive { background: rgba(239, 68, 68, 0.3); color: var(--red); }
        .alchemist-actions { display: flex; gap: 5px; }
        .alchemist-action-btn { padding: 4px 8px; font-size: var(--fs-sm); border: none; border-radius: 4px; cursor: pointer; }
        .alchemist-action-btn.edit { background: rgba(74, 222, 128, 0.3); color: var(--green); }
        .alchemist-action-btn.toggle { background: rgba(255,255,255,0.1); color: white; }
        .alchemist-action-btn.delete { background: rgba(239, 68, 68, 0.3); color: var(--red); }
        .alchemist-action-btn:hover { opacity: 0.8; }
        .add-alchemist-form { background: rgba(0,0,0,0.3); border-radius: 8px; padding: 15px; }
        .add-alchemist-form input { width: 100%; padding: 8px 12px; background: var(--bg); border: 1px solid var(--surface); border-radius: 6px; color: white; margin-bottom: 10px; box-sizing: border-box; }
        .add-alchemist-form input:focus { outline: none; border-color: var(--green); }
        .add-alchemist-buttons { display: flex; gap: 10px; }
        .add-alchemist-btn { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; }
        .add-alchemist-btn.primary { background: var(--green); color: var(--blue-bg); }
        .add-alchemist-btn.secondary { background: var(--surface); color: white; }
        .add-alchemist-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .add-alchemist-error { color: var(--red); font-size: var(--fs-base); margin-bottom: 10px; }
        .show-add-btn { background: rgba(74, 222, 128, 0.2); border: 1px dashed rgba(74, 222, 128, 0.5); color: var(--green); padding: 10px; border-radius: 6px; cursor: pointer; width: 100%; font-size: var(--fs-base); }
        .show-add-btn:hover { background: rgba(74, 222, 128, 0.3); }
        .discord-search-container { position: relative; margin-bottom: 10px; }
        .discord-search-input { width: 100%; padding: 8px 12px; background: var(--bg); border: 1px solid var(--green); border-radius: 6px; color: white; box-sizing: border-box; }
        .discord-search-results { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); border: 1px solid var(--surface); border-radius: 6px; margin-top: 4px; max-height: 200px; overflow-y: auto; z-index: 50; }
        .discord-member-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--surface); }
        .discord-member-item:hover { background: rgba(74, 222, 128, 0.2); }
        .discord-member-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--surface); }
        .discord-member-info { flex: 1; }
        .discord-member-name { color: white; font-weight: 500; }
        .discord-member-username { color: var(--text-muted); font-size: var(--fs-sm); }
        .discord-search-hint { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: 5px; }
        .form-divider { border-top: 1px solid var(--surface); margin: 10px 0; padding-top: 10px; color: var(--text-muted); font-size: var(--fs-sm); }

        .herbs-container .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: 1000; }
        .herbs-container .modal-content { background: var(--bg); border: 2px solid var(--green); border-radius: 15px; padding: 30px; max-width: var(--w-tight); width: 90%; }
        .herbs-container .modal-header { text-align: center; margin-bottom: 20px; }
        .herbs-container .modal-header h2 { color: var(--green); margin-bottom: 5px; }
        .herbs-container .modal-body { margin-bottom: 20px; }
        .herbs-container .form-group { margin-bottom: 15px; }
        .herbs-container .form-group label { display: block; color: var(--text-muted); margin-bottom: 5px; }
        .herbs-container .form-group input { width: 100%; padding: 10px; background: var(--bg-elevated); border: 1px solid var(--surface); border-radius: 6px; color: var(--green); box-sizing: border-box; }
        .herbs-container .form-group input.error { border-color: var(--red); }
        .herbs-container .form-group .error-text { color: var(--red); font-size: var(--fs-base); margin-top: 5px; }
        .herbs-container .modal-actions { display: flex; gap: 10px; }
        .herbs-container .modal-actions button { flex: 1; padding: 12px; border-radius: 6px; font-weight: bold; cursor: pointer; border: none; }
        .herbs-container .btn-cancel { background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--surface) !important; }
        .herbs-container .btn-confirm { background: linear-gradient(135deg, var(--green), var(--green)); color: var(--blue-bg); }
        .herbs-container .loading, .herbs-container .error { text-align: center; padding: 40px; color: var(--text-muted); }
        @media (max-width: 768px) { .herbs-header h1 { font-size: var(--fs-xl); } .items-grid { grid-template-columns: 1fr; } .cart-panel { width: 100%; } }

/* ==================== ConsumesShop.tsx extracted styles ==================== */

        .consumes-container { max-width: var(--container); margin: 0 auto; padding: 15px; }
        .consumes-container .consumes-header { text-align: center; margin-bottom: 20px; }
        .consumes-container .consumes-header h1 { color: var(--gold-soft); font-size: var(--fs-xl); margin-bottom: 8px; }
        .consumes-container .discount-badge { background: linear-gradient(135deg, var(--green), var(--green-deep)); color: white; padding: 8px 20px; border-radius: 20px; font-size: var(--fs-lg); display: inline-block; }
        .consumes-container .discount-badge.editable { background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 42%, var(--bg)), color-mix(in srgb, var(--gold) 42%, var(--bg))); display: inline-flex; align-items: center; gap: 10px; }
        .consumes-container .discount-input { width: 60px; padding: 4px 8px; border: 1px solid var(--gold); border-radius: 4px; background: rgba(0,0,0,0.3); color: white; font-size: var(--fs-lg); text-align: center; }
        .consumes-container .header-actions { margin-top: 10px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
        .consumes-container .download-btn { background: linear-gradient(135deg, var(--blue), var(--blue-deep)); color: white; padding: 10px 20px; border-radius: 8px; text-decoration: none; font-weight: bold; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s; font-size: var(--fs-base); }
        .consumes-container .download-btn:hover { background: linear-gradient(135deg, var(--blue), var(--blue)); transform: translateY(-2px); }
        .consumes-container .scanner-update-banner { background: linear-gradient(135deg, var(--green-bg), var(--green-bg)); border: 1px solid var(--green-deep); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; animation: slideDown 0.3s ease-out; }
        @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
        .consumes-container .scanner-update-content { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
        .consumes-container .scanner-update-icon { font-size: var(--fs-xl); flex-shrink: 0; }
        .consumes-container .scanner-update-text { flex: 1; min-width: 200px; color: color-mix(in srgb, var(--green) 45%, var(--text)); font-size: var(--fs-base); }
        .consumes-container .scanner-update-text strong { color: var(--green); }
        .consumes-container .scanner-update-changelog { color: var(--green); }
        .consumes-container .scanner-update-download { background: var(--green-deep); color: var(--text); padding: 6px 14px; border-radius: 6px; text-decoration: none; font-weight: bold; font-size: var(--fs-base); white-space: nowrap; transition: background 0.2s; }
        .consumes-container .scanner-update-download:hover { background: var(--green); }
        .consumes-container .scanner-update-dismiss { background: none; border: none; color: var(--green); font-size: var(--fs-lg); cursor: pointer; padding: 4px 8px; line-height: 1; transition: color 0.2s; }
        .consumes-container .scanner-update-dismiss:hover { color: var(--green); }
        @media (max-width: 600px) { .consumes-container .scanner-update-content { gap: 8px; } .consumes-container .scanner-update-text { font-size: var(--fs-sm); } }
        .consumes-container .cart-btn { background: linear-gradient(135deg, var(--gold), var(--gold)); color: var(--bg); padding: 10px 20px; border-radius: 8px; border: none; font-weight: bold; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s; }
        .consumes-container .cart-btn:hover { background: linear-gradient(135deg, var(--gold), var(--gold)); transform: translateY(-2px); }
        .consumes-container .cart-badge { background: var(--red); color: white; border-radius: 50%; min-width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: bold; }
        .consumes-container .admin-toggle { background: var(--bg-elevated); border: 1px solid var(--surface); color: var(--gold); padding: 10px 20px; border-radius: 8px; cursor: pointer; transition: all 0.2s; font-size: var(--fs-base); }
        .consumes-container .admin-toggle:hover { border-color: var(--gold-soft); }
        .consumes-container .admin-toggle.active { background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 42%, var(--bg)), color-mix(in srgb, var(--gold) 42%, var(--bg))); border-color: var(--gold); color: var(--gold-soft); }
        .consumes-container .last-updated-banner { background: var(--bg-elevated); border: 1px solid var(--surface); border-radius: 8px; padding: 10px 20px; margin-top: 15px; display: inline-block; }
        .consumes-container .last-updated-banner .label { color: var(--text-muted); font-size: var(--fs-base); }
        .consumes-container .last-updated-banner .time { color: var(--gold-soft); font-weight: bold; margin-left: 8px; }
        .consumes-container .last-updated-banner .relative { color: var(--gold); margin-left: 8px; font-size: var(--fs-base); }

        .consumes-container .sticky-toolbar { position: sticky; top: 75px; z-index: 100; background: linear-gradient(180deg, rgba(26,26,26,0.95) 0%, rgba(26,26,26,0.95) 90%, transparent 100%); padding: 12px 0 12px 0; margin: 0 -15px; padding-left: 15px; padding-right: 15px; }
        .consumes-container .sticky-toolbar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 10px; background: var(--bg); z-index: -1; }
        .consumes-container .toolbar-top-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 12px; }
        .consumes-container .search-container { position: relative; flex: 1; min-width: 200px; max-width: var(--w-tight); }
        .consumes-container .search-input { width: 100%; padding: 10px 40px 10px 38px; background: var(--bg-elevated); border: 2px solid var(--surface); border-radius: 8px; color: var(--gold-soft); font-size: var(--fs-base); outline: none; transition: border-color 0.2s; box-sizing: border-box; }
        .consumes-container .search-input:focus { border-color: var(--gold); }
        .consumes-container .search-input::placeholder { color: var(--border); }
        .consumes-container .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--border); pointer-events: none; font-size: var(--fs-lg); }
        .consumes-container .search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--border); cursor: pointer; font-size: var(--fs-lg); padding: 2px 6px; }
        .consumes-container .search-clear:hover { color: var(--gold-soft); }
        .consumes-container .search-results { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); border: 2px solid var(--gold); border-top: none; border-radius: 0 0 8px 8px; max-height: 350px; overflow-y: auto; z-index: 1000; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
        .consumes-container .search-results-header { padding: 8px 12px; font-size: var(--fs-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--surface); }
        .consumes-container .search-result-item { padding: 10px 12px; cursor: pointer; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--surface); transition: background 0.2s; }
        .consumes-container .search-result-item:hover { background: var(--bg-elevated); }
        .consumes-container .search-result-item:last-child { border-bottom: none; }
        .consumes-container .search-result-icon { width: 32px; height: 32px; border-radius: 4px; border: 1px solid var(--surface); flex-shrink: 0; }
        .consumes-container .search-result-icon-placeholder { width: 32px; height: 32px; border-radius: 4px; border: 1px solid var(--surface); background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; color: var(--border); font-size: var(--fs-sm); flex-shrink: 0; }
        .consumes-container .search-result-info { flex: 1; min-width: 0; }
        .consumes-container .search-result-name { color: var(--gold-soft); font-weight: bold; font-size: var(--fs-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .consumes-container .search-result-desc { color: var(--green); font-size: var(--fs-sm); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .consumes-container .search-result-price { color: var(--green); font-weight: bold; font-size: var(--fs-base); white-space: nowrap; margin-right: 8px; }
        .consumes-container .search-result-add { padding: 5px 10px; background: linear-gradient(135deg, var(--green), var(--green-deep)); border: none; border-radius: 5px; color: white; font-size: var(--fs-sm); font-weight: bold; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
        .consumes-container .search-result-add:hover { background: linear-gradient(135deg, var(--green), var(--green-deep)); transform: scale(1.05); }
        .consumes-container .search-result-add:disabled { background: var(--surface); cursor: not-allowed; transform: none; }
        .consumes-container .search-result-add.added { background: linear-gradient(135deg, var(--green-deep), var(--green-bg)); }
        .consumes-container .search-result-no-price { color: var(--border); font-size: var(--fs-sm); font-style: italic; }

        /* 2026-08-28: Price lookup line inside a Sell Consumes search result.
           Shows the reference AH price and the current stock level next to the
           sale price that was already there, so a member can check what an item
           pays without building a cart. Tokens only, no new colours. */
        .consumes-container .search-result-quote { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
        .consumes-container .search-result-ah { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
        .consumes-container .search-result-stock { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; padding: 1px 6px; border-radius: 8px; border: 1px solid var(--border); color: var(--text-muted); }
        .consumes-container .search-result-stock.tone-short { color: var(--red); border-color: var(--red-dim); }
        .consumes-container .search-result-stock.tone-watch { color: var(--gold); border-color: var(--gold-dim); }
        .consumes-container .search-result-stock.tone-stocked { color: var(--green); border-color: var(--green); }

        /* 2026-08-28: My Orders tab (islands/MyConsumeOrders.tsx). A member
           facing, read only list of the signed in member's own buy orders and
           consume sell orders. Tokens only, no new colours. */
        .consumes-container .my-orders-section { margin-bottom: 22px; }
        .consumes-container .my-orders-title { font-size: var(--fs-base); font-weight: 700; color: var(--gold); margin-bottom: 2px; }
        .consumes-container .my-orders-subtitle { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 10px; }
        .consumes-container .my-orders-empty { background: var(--bg-elevated); border: 1px solid var(--surface); border-radius: 8px; padding: 14px 16px; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.5; }
        .consumes-container .my-order-row { background: var(--bg-elevated); border: 1px solid var(--surface); border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; }
        .consumes-container .my-order-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
        .consumes-container .my-order-date { font-size: var(--fs-sm); color: var(--text-muted); }
        .consumes-container .my-order-status { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--border); color: var(--text-muted); }
        .consumes-container .my-order-status.status-pending { color: var(--gold); border-color: var(--gold-dim); }
        .consumes-container .my-order-status.status-claimed { color: var(--blue); border-color: var(--blue-soft); background: var(--blue-bg); }
        .consumes-container .my-order-status.status-fulfilled,
        .consumes-container .my-order-status.status-completed,
        .consumes-container .my-order-status.status-received { color: var(--green); border-color: var(--green); }
        .consumes-container .my-order-status.status-cancelled,
        .consumes-container .my-order-status.status-issue { color: var(--red); border-color: var(--red-dim); }
        .consumes-container .my-order-items { font-size: var(--fs-sm); color: var(--text); line-height: 1.45; margin: 6px 0; }
        .consumes-container .my-order-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: var(--fs-sm); }
        .consumes-container .my-order-qty { color: var(--text-muted); }
        .consumes-container .my-order-total { color: var(--gold); font-weight: 700; }
        .consumes-container .my-order-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; }

        .consumes-container .price-source { font-size: var(--fs-xs); padding: 2px 5px; border-radius: 3px; margin-left: 5px; font-weight: bold; }
        .consumes-container .price-source.addon { background: var(--green-deep); color: color-mix(in srgb, var(--green) 45%, var(--text)); }
        .consumes-container .price-source.web { background: color-mix(in srgb, var(--gold) 42%, var(--bg)); color: var(--gold); }
        .consumes-container .price-source.static { background: color-mix(in srgb, var(--purple) 42%, var(--bg)); color: var(--purple); }
        .consumes-container .price-source.linked { background: var(--blue-bg); color: var(--blue); cursor: help; }
        .consumes-container .price-legend-box { background: var(--bg-elevated); border: 1px solid var(--surface); border-radius: 8px; padding: 10px 16px; margin-bottom: 14px; }
        .consumes-container .price-legend-box-title { font-size: var(--fs-base); font-weight: 700; color: var(--gold-soft); margin-bottom: 6px; }
        .consumes-container .price-legend-box-items { display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: var(--fs-sm); color: var(--text-muted); align-items: center; }
        .consumes-container .price-legend-box-item { display: flex; align-items: center; gap: 6px; }
        .consumes-container .price-legend-box-item .price-source { font-size: var(--fs-xs); flex-shrink: 0; }
        .consumes-container .vendor-note { font-size: var(--fs-xs); color: var(--gold); font-style: italic; margin-top: 3px; }
        .consumes-container .price-legend { display: flex; gap: 15px; justify-content: center; margin-bottom: 15px; font-size: var(--fs-sm); flex-wrap: wrap; }
        .consumes-container .price-legend-item { display: flex; align-items: center; gap: 5px; }
        .consumes-container .price-legend-dot { width: 10px; height: 10px; border-radius: 50%; }
        .consumes-container .price-legend-dot.addon { background: color-mix(in srgb, var(--green) 45%, var(--text)); }
        .consumes-container .price-legend-dot.web { background: var(--gold); }
        .consumes-container .price-legend-dot.static { background: var(--purple); }
        .consumes-container .category-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; justify-content: center; }
        .consumes-container .category-tab { padding: 6px 14px; background: var(--bg-elevated); border: 2px solid var(--surface); border-radius: 6px; color: var(--gold); cursor: pointer; transition: all 0.2s; font-size: var(--fs-base); }
        .consumes-container .category-tab:hover { border-color: var(--gold); }
        .consumes-container .category-tab.active { background: linear-gradient(135deg, var(--surface), var(--bg-elevated)); border-color: var(--gold); color: var(--gold-soft); }
        .consumes-container .items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; max-width: var(--container); }
        @media (min-width: 1200px) { .consumes-container .items-grid { grid-template-columns: repeat(4, 1fr); } }
        .consumes-container .item-card { background: var(--bg-elevated); border: 1px solid var(--surface); border-radius: 8px; padding: 10px; transition: all 0.2s; }
        .consumes-container .item-card:hover { border-color: var(--gold); transform: translateY(-2px); }
        .consumes-container .item-card.in-cart { border-color: var(--green); box-shadow: 0 0 10px rgba(74, 156, 45, 0.3); }
        .consumes-container .item-card.highlight { animation: highlightPulse 1.5s ease-out; }
        @keyframes highlightPulse { 0% { box-shadow: 0 0 0 0 rgba(201, 169, 89, 0.7); border-color: var(--gold); } 70% { box-shadow: 0 0 0 15px rgba(201, 169, 89, 0); } 100% { box-shadow: 0 0 0 0 rgba(201, 169, 89, 0); } }
        .consumes-container .item-header { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
        .consumes-container .item-icon { width: 40px; height: 40px; border-radius: 4px; border: 2px solid var(--surface); background: var(--bg); flex-shrink: 0; image-rendering: pixelated; }
        .consumes-container .item-icon-placeholder { width: 40px; height: 40px; border-radius: 4px; border: 2px solid var(--surface); background: linear-gradient(135deg, var(--surface), var(--bg-elevated)); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--border); font-size: var(--fs-lg); }
        .consumes-container a.item-name { color: var(--gold-soft); font-weight: bold; font-size: var(--fs-lg); line-height: 1.3; text-decoration: none; transition: color 0.2s; }
        .consumes-container a.item-name:hover { color: var(--gold); text-decoration: underline; }
        .consumes-container .item-description { color: var(--green); font-size: var(--fs-sm); line-height: 1.3; margin: 6px 0 10px 0; }
        .item-reagents { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px 0; }
        .reagent-pill { display: inline-block; font-size: var(--fs-xs); padding: 1px 6px; border-radius: 8px; background: rgba(255,255,255,0.06); color: var(--text-muted); border: 1px solid var(--surface); line-height: 1.4; }
        .reagent-pill-herb { color: var(--green); border-color: rgba(88,214,141,0.25); }
        .reagent-pill-vendor { color: var(--text-muted); border-color: rgba(176,176,176,0.2); }
        .reagent-pill-drop { color: var(--red); border-color: rgba(231,76,60,0.25); }
        .reagent-pill-crafted { color: var(--gold); border-color: rgba(243,156,18,0.25); }
        .reagent-pill-other { color: var(--text-muted); border-color: rgba(153,153,153,0.2); }
        /* Stock badges — Phase 3 */
        .consumes-container .stock-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.05em; margin: 4px 0; position: relative; cursor: default; }
        .consumes-container .stock-badge .stock-count { font-size: var(--fs-sm); font-weight: 800; }
        .consumes-container .stock-badge-surplus { background: rgba(34, 197, 94, 0.2); color: var(--green); border: 1px solid rgba(34, 197, 94, 0.3); }
        .consumes-container .stock-badge-in-stock { background: rgba(20, 184, 166, 0.2); color: var(--green); border: 1px solid rgba(20, 184, 166, 0.3); }
        .consumes-container .stock-badge-low-stock { background: rgba(245, 158, 11, 0.2); color: var(--gold); border: 1px solid rgba(245, 158, 11, 0.3); }
        .consumes-container .stock-badge-critical { background: rgba(239, 68, 68, 0.2); color: var(--red); border: 1px solid rgba(239, 68, 68, 0.3); }
        .consumes-container .stock-badge-out-of-stock { background: rgba(185, 28, 28, 0.2); color: var(--red); border: 1px solid rgba(185, 28, 28, 0.3); }
        .consumes-container .stock-tooltip { display: none; position: absolute; top: 100%; left: 0; z-index: 100; background: var(--bg); border: 1px solid var(--surface); border-radius: 6px; padding: 8px 10px; min-width: 200px; margin-top: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); font-weight: normal; letter-spacing: normal; }
        .consumes-container .stock-badge:hover .stock-tooltip { display: block; }
        .consumes-container .stock-tooltip-title { color: var(--gold); font-size: var(--fs-sm); font-weight: bold; margin-bottom: 4px; border-bottom: 1px solid var(--surface); padding-bottom: 3px; }
        .consumes-container .stock-tooltip-row { display: flex; justify-content: space-between; gap: 12px; padding: 1px 0; font-size: var(--fs-sm); }
        .consumes-container .stock-tooltip-loc { color: var(--gold); }
        .consumes-container .stock-tooltip-count { color: var(--gold-soft); font-weight: bold; }
        .consumes-container .stock-tooltip-updated { color: var(--border); font-size: var(--fs-xs); margin-top: 4px; border-top: 1px solid var(--surface); padding-top: 3px; }
        .consumes-container .item-card.out-of-stock-card { opacity: 0.7; }
        .consumes-container .item-card.out-of-stock-card:hover { opacity: 1; }
        .consumes-container .stock-price-tier, .herbs-container .stock-price-tier { font-size: var(--fs-xs); color: var(--gold); margin-left: 6px; font-weight: normal; }
        .herbs-container .shop-price.price-tier-high { color: var(--green); font-size: var(--fs-xl); }
        .herbs-container .shop-price.price-tier-good { color: var(--green); }
        .herbs-container .shop-price.price-tier-low { color: var(--gold); opacity: 0.75; }

        /* Card border tints by stock level */
        .herbs-container .item-card.stock-need { border-color: var(--green); border-width: 2px; }
        .herbs-container .item-card.stock-low { border-color: var(--gold); }
        .herbs-container .item-card.stock-surplus { border-color: var(--surface); }

        /* "Pays X% of AH" line on cards */
        .herbs-container .pays-percent { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
        .herbs-container .item-card.stock-need .pays-percent { color: var(--green); font-weight: 600; }
        .herbs-container .item-card.stock-low .pays-percent { color: var(--gold); }

        /* Stock info line on cards (bank count + supply days) */
        .herbs-container .herb-stock-info { display: flex; gap: 8px; align-items: center; margin-top: 4px; font-size: var(--fs-xs); color: var(--text-muted); }
        .herbs-container .herb-bank-count { color: var(--text-muted); }
        .herbs-container .herb-supply-days { color: var(--text-muted); }
        .herbs-container .herb-supply-days.supply-critical { color: var(--red); font-weight: 600; }
        .herbs-container .herb-supply-days.supply-low { color: var(--gold); }

        /* Materials admin controls (fixed price per-card) */
        .herbs-container .admin-controls { background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.3); border-radius: 6px; padding: 10px; margin-top: 10px; }
        .herbs-container .admin-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
        .herbs-container .admin-row:last-child { margin-bottom: 0; }
        .herbs-container .admin-row label { color: var(--text-muted); font-size: var(--fs-base); min-width: 50px; }
        .herbs-container .admin-price-input { flex: 1; padding: 6px 10px; border: 1px solid var(--surface); border-radius: 4px; background: var(--bg); color: var(--green); font-size: var(--fs-base); max-width: 120px; }
        .herbs-container .fixed-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; }
        .herbs-container .fixed-toggle input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--green); flex-shrink: 0; }
        .herbs-container .fixed-toggle span { color: var(--text-muted); font-size: var(--fs-base); }
        .herbs-container .price-source { font-size: var(--fs-xs); padding: 2px 5px; border-radius: 3px; margin-left: 5px; font-weight: bold; vertical-align: middle; }
        .herbs-container .price-source.static { background: var(--green-bg); color: var(--green); }
        .herbs-container .price-source.linked { background: var(--blue-bg); color: var(--blue); }
        .herbs-container .vendor-note { font-size: var(--fs-xs); color: var(--gold); font-style: italic; margin-top: 3px; }

        /* Pricing legend box */
        .pricing-legend { background: var(--bg-elevated); border: 1px solid var(--surface); border-radius: 8px; padding: 14px 18px; margin-bottom: 16px; }
        .pricing-legend-title { font-size: var(--fs-lg); font-weight: 700; color: var(--gold-soft); margin-bottom: 6px; }
        .pricing-legend-desc { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 10px; line-height: 1.4; }
        .pricing-legend-desc strong { color: var(--gold); }
        .pricing-legend-tiers { display: flex; flex-wrap: wrap; gap: 6px 16px; }
        .pricing-legend-tier { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); padding: 4px 0; min-width: 200px; }
        .pricing-legend-tier .tier-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
        .pricing-legend-tier .tier-dot.need { background: var(--green); }
        .pricing-legend-tier .tier-dot.critical { background: var(--green); }
        .pricing-legend-tier .tier-dot.low { background: var(--gold); }
        .pricing-legend-tier .tier-dot.stocked { background: var(--blue); }
        .pricing-legend-tier .tier-dot.surplus { background: var(--text-muted); }
        .pricing-legend-tier .tier-name { color: var(--text); flex: 1; }
        .pricing-legend-tier .tier-range { color: var(--text-muted); font-size: var(--fs-xs); }
        .pricing-legend-tier .tier-rate { color: var(--gold); font-weight: 700; white-space: nowrap; }
        .consumes-container .stock-summary-bar { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; flex-wrap: wrap; font-size: var(--fs-sm); }
        .consumes-container .stock-summary-item { display: flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 4px; background: rgba(255,255,255,0.05); }
        .consumes-container .stock-summary-dot { width: 8px; height: 8px; border-radius: 50%; }
        .consumes-container .stock-summary-dot.surplus { background: var(--green); }
        .consumes-container .stock-summary-dot.in-stock { background: var(--green); }
        .consumes-container .stock-summary-dot.low-stock { background: var(--gold); }
        .consumes-container .stock-summary-dot.critical { background: var(--red); }
        .consumes-container .stock-summary-dot.out-of-stock { background: var(--red); }
        .consumes-container .stock-refresh-btn { padding: 5px 14px; border-radius: 6px; border: 1px solid var(--green); background: rgba(74,222,128,0.15); color: var(--green); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: all 0.2s; margin-left: 12px; letter-spacing: 0.3px; }
        .consumes-container .stock-refresh-btn:hover { background: rgba(74,222,128,0.3); color: var(--text); border-color: var(--green); }
        .consumes-container .stock-refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; border-color: var(--gold); color: var(--gold); background: rgba(251,191,36,0.15); }

        .consumes-container .item-prices { margin: 8px 0; }
        .consumes-container .shop-price { font-size: var(--fs-lg); color: var(--green); font-weight: bold; }
        .consumes-container .ah-price { color: var(--text-muted); font-size: var(--fs-base); margin-left: 8px; }
        .consumes-container .fixed-badge { background: var(--gold); color: var(--bg); padding: 2px 6px; border-radius: 4px; font-size: var(--fs-sm); margin-left: 8px; }
        .consumes-container .no-price { color: var(--text-muted); font-style: italic; }
        .consumes-container .add-to-cart-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
        .consumes-container .qty-control { display: flex; align-items: center; background: var(--surface); border-radius: 6px; overflow: visible; flex-shrink: 0; min-width: 110px; }
        .consumes-container .qty-btn { width: 28px; height: 28px; border: none; background: transparent; color: var(--gold-soft); font-size: var(--fs-lg); cursor: pointer; transition: background 0.2s; }
        .consumes-container .qty-btn:hover { background: rgba(255,255,255,0.1); }
        .consumes-container .qty-input { width: 50px; text-align: center; border: none; background: transparent; color: var(--gold-soft); font-size: var(--fs-base); -moz-appearance: textfield; appearance: textfield; padding: 4px 2px; }
        .consumes-container .qty-input::-webkit-inner-spin-button, .consumes-container .qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        .consumes-container .add-btn { flex: 1; padding: 6px 10px; background: linear-gradient(135deg, var(--green), var(--green-deep)); border: none; border-radius: 6px; color: white; font-weight: bold; cursor: pointer; transition: all 0.2s; font-size: var(--fs-base); }
        .consumes-container .add-btn:hover { background: linear-gradient(135deg, var(--green), var(--green-deep)); }
        .consumes-container .add-btn:disabled { background: var(--surface); cursor: not-allowed; }
        .consumes-container .remove-btn { flex: 1; padding: 6px 10px; background: transparent; border: 1px solid var(--red); border-radius: 6px; color: var(--red); font-weight: bold; cursor: pointer; transition: all 0.2s; font-size: var(--fs-base); }
        .consumes-container .remove-btn:hover { background: rgba(239, 68, 68, 0.2); }
        .consumes-container .in-cart-indicator { color: var(--green); font-size: var(--fs-sm); margin-top: 6px; }
        .consumes-container .cart-overlay { position: fixed; top: 95px; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); z-index: 1100; display: flex; justify-content: flex-end; }
        .consumes-container .cart-panel { width: 340px; max-width: 100%; background: var(--bg); height: 100%; display: flex; flex-direction: column; border-left: 2px solid var(--gold); }
        .consumes-container .cart-header { padding: 12px 15px; border-bottom: 1px solid var(--surface); display: flex; justify-content: space-between; align-items: center; }
        .consumes-container .cart-header h2 { color: var(--gold-soft); margin: 0; font-size: var(--fs-lg); }
        .consumes-container .close-btn { background: none; border: none; color: var(--gold); font-size: var(--fs-xl); cursor: pointer; }
        .consumes-container .cart-items { flex: 1; overflow-y: auto; padding: 10px; }
        .consumes-container .cart-item { background: var(--bg-elevated); border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; }
        .consumes-container .cart-item-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
        .consumes-container .cart-item-name { color: var(--gold-soft); font-weight: bold; }
        .consumes-container .cart-item-remove { background: none; border: none; color: var(--red); cursor: pointer; font-size: var(--fs-lg); }
        .consumes-container .cart-item-details { display: flex; justify-content: space-between; align-items: center; }
        .consumes-container .cart-item-price { color: var(--green); font-weight: bold; }
        .consumes-container .cart-item-qty { display: flex; align-items: center; gap: 8px; }
        .consumes-container .cart-item-qty input { width: 50px; padding: 4px; text-align: center; background: var(--surface); border: 1px solid var(--surface); border-radius: 4px; color: var(--gold-soft); }
        .consumes-container .cart-empty { text-align: center; color: var(--text-muted); padding: 40px 20px; }
        .consumes-container .cart-footer { padding: 12px 15px; border-top: 1px solid var(--surface); }
        .consumes-container .cart-notes { margin-bottom: 10px; }
        .consumes-container .cart-notes label { display: block; color: var(--gold); margin-bottom: 3px; font-size: var(--fs-sm); }
        .consumes-container .cart-notes textarea { width: 100%; padding: 8px; background: var(--bg-elevated); border: 1px solid var(--surface); border-radius: 5px; color: var(--gold-soft); resize: vertical; min-height: 50px; box-sizing: border-box; font-size: var(--fs-base); }
        .consumes-container .cart-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: var(--fs-lg); }
        .consumes-container .cart-total-label { color: var(--gold); font-size: var(--fs-base); }
        .consumes-container .cart-total-value { color: var(--green); font-weight: bold; font-size: var(--fs-lg); }
        .consumes-container .checkout-btn { width: 100%; padding: 10px; background: linear-gradient(135deg, var(--green), var(--green-deep)); border: none; border-radius: 6px; color: white; font-size: var(--fs-base); font-weight: bold; cursor: pointer; transition: all 0.2s; }
        .consumes-container .checkout-btn:hover { background: linear-gradient(135deg, var(--green), var(--green-deep)); }
        .consumes-container .checkout-btn:disabled { background: var(--surface); cursor: not-allowed; }
        .consumes-container .clear-cart-btn { width: 100%; padding: 8px; background: transparent; border: 1px solid var(--surface); border-radius: 5px; color: var(--gold); margin-top: 8px; cursor: pointer; font-size: var(--fs-base); }
        .consumes-container .clear-cart-btn:hover { border-color: var(--red); color: var(--red); }
        .consumes-container .status-message { text-align: center; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
        .consumes-container .status-success { background: rgba(74, 156, 45, 0.2); color: var(--green); border: 1px solid var(--green); }
        .consumes-container .status-error { background: rgba(200, 50, 50, 0.2); color: var(--red); border: 1px solid var(--red); }
        .consumes-container .admin-bar { background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 42%, var(--bg)), color-mix(in srgb, var(--gold) 42%, var(--bg))); border: 1px solid var(--gold); border-radius: 10px; padding: 15px 20px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
        .consumes-container .admin-bar-title { color: var(--gold-soft); font-weight: bold; font-size: var(--fs-lg); }
        .consumes-container .admin-bar-actions { display: flex; gap: 10px; align-items: center; }
        .consumes-container .save-btn { background: linear-gradient(135deg, var(--green), var(--green-deep)); color: white; padding: 8px 20px; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }
        .consumes-container .save-btn:disabled { background: var(--surface); cursor: not-allowed; }
        .consumes-container .discount-save-btn { padding: 4px 12px; background: var(--green); color: var(--blue-bg); border: none; border-radius: 4px; font-weight: bold; cursor: pointer; font-size: var(--fs-base); margin-left: 10px; }
        .consumes-container .discount-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .consumes-container .discount-save-msg { font-size: var(--fs-base); padding: 4px 8px; border-radius: 4px; margin-left: 8px; }
        .consumes-container .discount-save-msg.success { background: rgba(74, 222, 128, 0.3); color: var(--green); }
        .consumes-container .discount-save-msg.error { background: rgba(239, 68, 68, 0.3); color: var(--red); }
        .consumes-container .dynamic-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: var(--fs-base); white-space: nowrap; }
        .consumes-container .dynamic-toggle input[type="checkbox"] { accent-color: var(--green); width: 16px; height: 16px; }
        .consumes-container .tier-discount-controls { display: flex; flex-wrap: wrap; gap: 6px 12px; }
        .consumes-container .tier-discount-row { display: flex; align-items: center; gap: 4px; font-size: var(--fs-sm); white-space: nowrap; }
        .consumes-container .tier-label { color: var(--text); min-width: 90px; }
        .consumes-container .tier-discount-input { width: 42px; padding: 2px 4px; border: 1px solid var(--gold); border-radius: 3px; background: rgba(0,0,0,0.3); color: white; font-size: var(--fs-base); text-align: center; }
        .consumes-container .tier-pct { color: var(--text-muted); }
        .consumes-container .flat-discount-control { display: flex; align-items: center; gap: 6px; }
        .consumes-container .discount-badge.editable { background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 42%, var(--bg)), color-mix(in srgb, var(--gold) 42%, var(--bg))); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; }
        .consumes-container .save-message { padding: 6px 12px; border-radius: 4px; font-size: var(--fs-base); }
        .consumes-container .save-message.success { background: rgba(74, 156, 45, 0.3); color: var(--green); }
        .consumes-container .save-message.error { background: rgba(200, 50, 50, 0.3); color: var(--red); }
        .consumes-container .admin-controls { background: rgba(139, 90, 43, 0.2); border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--bg)); border-radius: 6px; padding: 10px; margin-top: 10px; }
        .consumes-container .admin-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
        .consumes-container .admin-row:last-child { margin-bottom: 0; }
        .consumes-container .admin-row label { color: var(--gold); font-size: var(--fs-base); min-width: 70px; }
        .consumes-container .admin-price-input { flex: 1; padding: 6px 10px; border: 1px solid var(--surface); border-radius: 4px; background: var(--bg); color: var(--gold-soft); font-size: var(--fs-base); }
        .consumes-container .fixed-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; }
        .consumes-container .fixed-toggle input { width: 18px; height: 18px; cursor: pointer; }
        .consumes-container .fixed-toggle span { color: var(--gold); font-size: var(--fs-base); }
        .consumes-container .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: 1000; }
        .consumes-container .modal-content { background: var(--bg); border: 2px solid var(--gold); border-radius: 15px; padding: 30px; max-width: var(--w-tight); width: 90%; }
        .consumes-container .modal-header { text-align: center; margin-bottom: 20px; }
        .consumes-container .modal-header h2 { color: var(--gold-soft); margin-bottom: 5px; }
        .consumes-container .modal-body { margin-bottom: 20px; }
        .consumes-container .form-group { margin-bottom: 15px; }
        .consumes-container .form-group label { display: block; color: var(--gold); margin-bottom: 5px; }
        .consumes-container .form-group input { width: 100%; padding: 10px; background: var(--bg-elevated); border: 1px solid var(--surface); border-radius: 6px; color: var(--gold-soft); box-sizing: border-box; }
        .consumes-container .form-group input.error { border-color: var(--red); }
        .consumes-container .form-group .error-text { color: var(--red); font-size: var(--fs-base); margin-top: 5px; }
        .consumes-container .modal-actions { display: flex; gap: 10px; }
        .consumes-container .modal-actions button { flex: 1; padding: 12px; border-radius: 6px; font-weight: bold; cursor: pointer; border: none; }
        .consumes-container .btn-cancel { background: var(--bg-elevated); color: var(--gold); border: 1px solid var(--surface) !important; }
        .consumes-container .btn-confirm { background: linear-gradient(135deg, var(--green), var(--green-deep)); color: white; }
        .consumes-container .loading, .consumes-container .error { text-align: center; padding: 40px; color: var(--gold); }
        @media (max-width: 768px) { .consumes-container .consumes-header h1 { font-size: var(--fs-xl); } .consumes-container .category-tabs { flex-direction: column; } .consumes-container .items-grid { grid-template-columns: 1fr; } .consumes-container .cart-panel { width: 100%; } }

        /* Package tab styles */
        .consumes-container .packages-tab { background: linear-gradient(135deg, var(--green-bg), var(--green-bg)); border-color: var(--green); color: var(--green); }
        .consumes-container .packages-tab:hover { border-color: var(--green); }
        .consumes-container .packages-tab.active { background: linear-gradient(135deg, var(--green-deep), var(--green-bg)); border-color: var(--green); color: var(--green); }
        .consumes-container .class-selector { display: flex; gap: 6px; margin-bottom: 16px; justify-content: center; }
        .consumes-container .class-selector.single-class { display: none; }
        .consumes-container .class-tab { padding: 6px 16px; background: var(--bg-elevated); border: 2px solid var(--surface); border-radius: 6px; color: var(--gold); cursor: pointer; transition: all 0.2s; font-size: var(--fs-base); }
        .consumes-container .class-tab:hover { border-color: var(--gold); }
        .consumes-container .class-tab.active { background: linear-gradient(135deg, var(--surface), var(--bg-elevated)); border-color: var(--gold); color: var(--gold-soft); }
        .consumes-container .packages-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; max-width: var(--container); }
        .consumes-container .package-card { background: var(--bg-elevated); border: 1px solid var(--surface); border-radius: 10px; padding: 16px; transition: all 0.2s; display: flex; flex-direction: column; }
        .consumes-container .package-card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
        .consumes-container .package-card-header { margin-bottom: 12px; }
        .consumes-container .package-card-header h3 { color: var(--gold-soft); font-size: var(--fs-lg); margin: 0 0 4px 0; }
        .consumes-container .package-card-header p { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }
        .consumes-container .package-items-list { flex: 1; display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
        .consumes-container .package-item-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; transition: background 0.15s; }
        .consumes-container .package-item-row:hover { background: rgba(255,255,255,0.03); }
        .consumes-container .package-item-icon { width: 24px; height: 24px; border-radius: 3px; border: 1px solid var(--surface); flex-shrink: 0; image-rendering: pixelated; }
        .consumes-container .package-item-icon-placeholder { width: 24px; height: 24px; border-radius: 3px; border: 1px solid var(--surface); background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--border); font-size: var(--fs-xs); flex-shrink: 0; }
        .consumes-container .package-item-qty { color: var(--gold); font-weight: bold; font-size: var(--fs-sm); min-width: 28px; text-align: right; flex-shrink: 0; }
        .consumes-container .package-item-name { color: var(--text); font-size: var(--fs-sm); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .consumes-container .package-item-price { color: var(--green); font-size: var(--fs-sm); font-weight: bold; text-align: right; min-width: 60px; flex-shrink: 0; }
        .consumes-container .package-item-no-price { color: var(--border); font-size: var(--fs-sm); font-style: italic; text-align: right; min-width: 60px; flex-shrink: 0; }
        .consumes-container .package-choice-row { display: flex; align-items: center; gap: 8px; padding: 6px; background: rgba(201, 169, 89, 0.08); border: 1px solid rgba(201, 169, 89, 0.2); border-radius: 6px; margin-top: 2px; }
        .consumes-container .prot-select { flex: 1; padding: 5px 8px; background: var(--bg); border: 1px solid var(--surface); border-radius: 4px; color: var(--gold-soft); font-size: var(--fs-sm); cursor: pointer; outline: none; appearance: auto; }
        .consumes-container .prot-select:focus { border-color: var(--gold); }
        .consumes-container .package-footer { border-top: 1px solid var(--surface); padding-top: 12px; }
        .consumes-container .package-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
        .consumes-container .package-total-label { color: var(--gold); font-size: var(--fs-base); }
        .consumes-container .package-total-value { color: var(--green); font-weight: bold; font-size: var(--fs-lg); }
        .consumes-container .package-add-btn { width: 100%; padding: 10px; background: linear-gradient(135deg, var(--green), var(--green-deep)); border: none; border-radius: 6px; color: white; font-size: var(--fs-base); font-weight: bold; cursor: pointer; transition: all 0.2s; }
        .consumes-container .package-add-btn:hover { background: linear-gradient(135deg, var(--green), var(--green-deep)); transform: translateY(-1px); }
        .consumes-container .package-add-btn:disabled { background: var(--surface); cursor: not-allowed; transform: none; }
        @media (max-width: 820px) { .consumes-container .packages-grid { grid-template-columns: 1fr; } }

/* ==================== ConsumesTabs.tsx extracted styles ==================== */

.consumes-tabs-container {
          max-width: var(--container);
          margin: 0 auto;
          padding: 0 10px;
        }
        .tabs-header {
          display: flex;
          gap: 0;
          margin-bottom: 0;
          padding-left: 10px;
        }
        .tab-button {
          padding: 10px 24px;
          background: rgba(42, 42, 42, 0.9);
          border: 2px solid var(--surface);
          border-bottom: 2px solid var(--surface);
          border-radius: 8px 8px 0 0;
          color: var(--text-muted);
          font-size: var(--fs-base);
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s;
          margin-right: -2px;
          margin-bottom: -2px;
          position: relative;
        }
        .tab-button:hover {
          background: rgba(58, 58, 58, 0.9);
          color: var(--gold);
        }
        .tab-button.active {
          background: transparent;
          border-color: var(--gold);
          border-bottom-color: transparent;
          color: var(--gold-soft);
          z-index: 2;
        }
        .tab-button.buy-tab.active {
          border-color: var(--gold);
          border-bottom-color: transparent;
          color: var(--gold-soft);
        }
        .tab-button.sell-tab.active {
          border-color: var(--green);
          border-bottom-color: transparent;
          color: var(--green);
        }
        .tab-content {
          background: transparent;
          border: 2px solid var(--surface);
          border-radius: 0 8px 8px 8px;
          min-height: 400px;
          position: relative;
        }
        .tab-content.buy-active {
          border-color: var(--gold);
        }
        .tab-content.sell-active {
          border-color: var(--green);
        }
        .tab-panel {
          display: none;
        }
        .tab-panel.active {
          display: block;
        }

/* ==================== Nav.tsx extracted styles ==================== */

.nav-auth-wrapper {
          position: absolute;
          right: 20px;
          top: 50%;
          transform: translateY(-50%);
          z-index: 101;
        }
        @media (max-width: 768px) {
          .nav-auth-wrapper {
            position: static;
            transform: none;
            margin: 10px 0;
            order: -1;
          }
        }
        .nav-decoration {
          position: absolute;
          bottom: -35px;
          left: 0;
          width: 100%;
          height: 50px;
          background-image: url('/images/nav-decoration.png');
          background-repeat: repeat-x;
          background-size: auto 100%;
          background-position: center top;
          z-index: 100;
          pointer-events: none;
        }

/* ==================== AnalyzeContainer.tsx extracted styles ==================== */

.analyze-grid {
          display: grid;
          grid-template-columns: 35% 65%;
          gap: 1.5rem;
          margin-top: 1.5rem;
        }

        .analyze-section {
          display: flex;
          flex-direction: column;
          gap: 1.5rem;
        }

        .log-selection {
          /* LogSelector on left - narrower */
        }

        .chat-section {
          /* Chat only */
          display: flex;
          flex-direction: column;
        }

        @media (max-width: 1024px) {
          .analyze-grid {
            grid-template-columns: 1fr;
          }
        }

/* ==================== LogProcessor.tsx extracted styles ==================== */

input[type="time"]::-webkit-calendar-picker-indicator,
        input[type="date"]::-webkit-calendar-picker-indicator {
          /* filter removed for animated icon */
          cursor: pointer;
          opacity: 1;
        }
        input[type="time"],
        input[type="date"] {
          color-scheme: dark;
        }
        select {
          color-scheme: dark;
        }
        select option {
          background: var(--bg);
          color: var(--text);
        }

/* ==================== ReportPreview.tsx extracted styles ==================== */

        .report-preview .modal-overlay {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.85);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 1000;
          padding: 2rem;
        }

        .report-preview .modal-content {
          background: var(--bg);
          border: 2px solid var(--border);
          border-radius: 12px;
          max-width: var(--w-medium);
          width: 100%;
          max-height: 90vh;
          display: flex;
          flex-direction: column;
          box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
        }

        .report-preview .modal-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 1.5rem;
          border-bottom: 1px solid var(--border);
        }

        .report-preview .modal-header h2 {
          margin: 0;
          color: var(--text);
        }

        .report-preview .close-btn {
          background: none;
          border: none;
          font-size: var(--fs-xl);
          color: var(--text-muted);
          cursor: pointer;
          padding: 0.25rem 0.5rem;
          line-height: 1;
          transition: color 0.2s;
        }

        .report-preview .close-btn:hover {
          color: var(--text);
        }

        .report-preview .modal-body {
          flex: 1;
          overflow-y: auto;
          padding: 2rem;
        }

        .report-preview .report-preview-content {
          color: var(--text);
          line-height: 1.6;
        }

        /* Styling to match existing raid reports */
        .report-preview .report-preview-content h1 {
          font-size: var(--fs-xl);
          color: var(--text);
          margin: 0 0 1rem 0;
        }

        .report-preview .report-preview-content h2 {
          font-size: var(--fs-xl);
          color: var(--text);
          margin: 2rem 0 1rem 0;
          border-bottom: 2px solid var(--border);
          padding-bottom: 0.5rem;
        }

        .report-preview .report-preview-content h3 {
          font-size: var(--fs-lg);
          color: var(--blue);
          margin: 1.5rem 0 0.75rem 0;
        }

        .report-preview .report-preview-content p {
          margin: 0.75rem 0;
          color: var(--text-muted);
        }

        .report-preview .report-preview-content ul {
          margin: 0.75rem 0;
          padding-left: 1.5rem;
        }

        .report-preview .report-preview-content li {
          margin: 0.5rem 0;
          color: var(--text-muted);
        }

        .report-preview .report-preview-content table.raid-table {
          width: 100%;
          border-collapse: collapse;
          margin: 1rem 0;
          background: var(--bg-secondary);
          border-radius: 6px;
          overflow: hidden;
        }

        .report-preview .report-preview-content table.raid-table tr {
          border-bottom: 1px solid var(--border);
        }

        .report-preview .report-preview-content table.raid-table tr:last-child {
          border-bottom: none;
        }

        .report-preview .report-preview-content table.raid-table td {
          padding: 0.75rem 1rem;
          color: var(--text);
        }

        .report-preview .report-preview-content table.raid-table tr:first-child td {
          font-weight: 700;
          background: var(--bg-tertiary);
        }

        .report-preview .report-preview-content strong {
          color: var(--text);
          font-weight: 700;
        }

        .report-preview .report-preview-content em {
          color: var(--text-muted);
          font-style: italic;
        }

        .report-preview .modal-footer {
          display: flex;
          justify-content: space-between;
          padding: 1.5rem;
          border-top: 1px solid var(--border);
          gap: 1rem;
        }

        .keep-working-btn,
        .report-preview .approve-btn {
          padding: 0.75rem 1.5rem;
          border: none;
          border-radius: 6px;
          font-weight: 600;
          cursor: pointer;
          transition: opacity 0.2s;
          font-size: var(--fs-base);
        }

        .report-preview .keep-working-btn {
          background: var(--bg-tertiary);
          color: var(--text);
          border: 1px solid var(--border);
        }

        .report-preview .approve-btn {
          background: var(--green);
          color: white;
        }

        .keep-working-btn:hover,
        .report-preview .approve-btn:hover {
          opacity: 0.8;
        }

        @media (max-width: 768px) {
        .report-preview .modal-overlay {
            padding: 1rem;
          }

        .report-preview .modal-content {
            max-height: 95vh;
          }

        .report-preview .modal-footer {
            flex-direction: column;
          }

          .keep-working-btn,
        .report-preview .approve-btn {
            width: 100%;
          }
        }

/* ==================== LogSelector.tsx extracted styles ==================== */

        .log-selector {
          background: var(--bg-secondary);
          border: 2px solid var(--border);
          border-radius: 8px;
          padding: 1.5rem;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        .log-selector-header {
          margin-bottom: 1.5rem;
        }

        .log-selector-header h3 {
          margin: 0 0 0.5rem 0;
          color: var(--text);
        }

        .log-selector .subtitle {
          color: var(--text-muted);
          font-size: var(--fs-base);
          margin: 0;
        }

        .clear-selection-btn {
          margin-left: 1rem;
          padding: 0.25rem 0.75rem;
          background: var(--red);
          color: white;
          border: none;
          border-radius: 4px;
          font-size: var(--fs-base);
          cursor: pointer;
          transition: opacity 0.2s;
        }

        .clear-selection-btn:hover {
          opacity: 0.8;
        }

        .log-filters {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 1rem;
          margin-bottom: 1.5rem;
        }

        .filter-group {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
        }

        .filter-group label {
          font-size: var(--fs-base);
          font-weight: 600;
          color: var(--text-muted);
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .filter-select,
        .filter-input {
          padding: 0.5rem;
          background: rgb(30, 30, 34);
          border: 1px solid var(--border);
          border-radius: 4px;
          color: var(--text);
          font-size: var(--fs-base);
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
        }

        .filter-select {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
          background-repeat: no-repeat;
          background-position: right 0.5rem center;
          padding-right: 2rem;
          cursor: pointer;
        }

        .filter-select option {
          background: rgb(30, 30, 34);
          color: var(--text);
          padding: 8px;
        }

        .filter-select:focus,
        .filter-input:focus {
          outline: none;
          border-color: var(--blue);
        }

        .loading-state,
        .error-state,
        .log-selector .empty-state {
          text-align: center;
          padding: 2rem;
          color: var(--text-muted);
        }

        .retry-btn {
          margin-top: 1rem;
          padding: 0.5rem 1rem;
          background: var(--blue);
          color: white;
          border: none;
          border-radius: 4px;
          cursor: pointer;
        }

        .logs-list {
          display: flex;
          flex-direction: column;
          gap: 0.75rem;
          max-height: 400px;
          overflow-y: auto;
          margin-bottom: 1rem;
        }

        .log-item {
          display: flex;
          gap: 0.75rem;
          padding: 0.75rem;
          background: var(--bg-tertiary);
          border: 2px solid var(--border);
          border-radius: 6px;
          cursor: pointer;
          transition: all 0.2s;
        }

        .log-item:hover {
          border-color: var(--blue);
          background: var(--bg-secondary);
        }

        .log-item.selected {
          border-color: var(--blue);
          background: rgba(59, 130, 246, 0.1);
        }

        .log-checkbox input {
          cursor: pointer;
          width: 18px;
          height: 18px;
        }

        .log-details {
          flex: 1;
        }

        .log-display-name {
          font-weight: 600;
          color: var(--text);
          margin-bottom: 0.5rem;
        }

        .log-metadata {
          display: flex;
          gap: 1rem;
          flex-wrap: wrap;
        }

        .meta-item {
          font-size: var(--fs-sm);
          color: var(--text-muted);
        }

        .load-more-btn {
          width: 100%;
          padding: 0.75rem;
          background: var(--bg-tertiary);
          border: 1px solid var(--border);
          border-radius: 4px;
          color: var(--text);
          cursor: pointer;
          transition: all 0.2s;
        }

        .load-more-btn:hover {
          background: var(--bg-secondary);
          border-color: var(--blue);
        }

/* ==================== UserAuthButton.tsx extracted styles ==================== */

.user-auth-container {
          position: relative;
          margin-left: auto;
        }
        .auth-btn {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 8px 16px;
          border-radius: 6px;
          font-weight: 600;
          font-size: var(--fs-base);
          cursor: pointer;
          transition: all 0.2s;
          border: none;
          text-decoration: none;
        }
        .login-btn {
          background: var(--discord);
          color: white;
        }
        .login-btn:hover {
          background: var(--discord-hover);
        }
        .user-btn {
          background: rgba(74, 222, 128, 0.2);
          border: 1px solid var(--green);
          color: var(--green);
        }
        .user-btn:hover {
          background: rgba(74, 222, 128, 0.3);
        }
        .loading-btn {
          background: var(--surface);
          color: var(--border);
          cursor: default;
        }
        .discord-icon {
          width: 18px;
          height: 18px;
        }
        .user-dropdown {
          position: absolute;
          top: 100%;
          right: 0;
          margin-top: 8px;
          background: var(--bg);
          border: 1px solid var(--surface);
          border-radius: 8px;
          min-width: 180px;
          box-shadow: 0 8px 24px rgba(0,0,0,0.5);
          z-index: 1000;
          overflow: hidden;
        }
        .user-dropdown-header {
          padding: 12px 16px;
          border-bottom: 1px solid var(--surface);
          color: var(--green);
          font-weight: 600;
          font-size: var(--fs-base);
        }
        .user-dropdown-sub {
          color: var(--border);
          font-size: var(--fs-sm);
          font-weight: normal;
          margin-top: 2px;
        }
        .logout-btn {
          width: 100%;
          padding: 12px 16px;
          background: none;
          border: none;
          color: var(--red);
          font-size: var(--fs-base);
          cursor: pointer;
          text-align: left;
          transition: background 0.2s;
        }
        .logout-btn:hover {
          background: rgba(239, 68, 68, 0.2);
        }

/* ==================== RaidRefreshIndicator.tsx extracted styles ==================== */

        .raid-refresh-indicator {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 6px 12px;
          background: rgba(88, 86, 214, 0.15);
          border: 1px solid rgba(88, 86, 214, 0.3);
          border-radius: 20px;
          font-size: var(--fs-sm);
          transition: all 0.3s ease;
        }

        .raid-refresh-indicator.stale {
          background: rgba(245, 158, 11, 0.15);
          border-color: rgba(245, 158, 11, 0.5);
          animation: stale-pulse 2s ease-in-out infinite;
        }

        @keyframes stale-pulse {
          0%, 100% { border-color: rgba(245, 158, 11, 0.5); }
          50% { border-color: rgba(245, 158, 11, 0.8); }
        }

        .refresh-time {
          color: var(--text-muted, var(--text-muted));
        }

        .raid-refresh-indicator .stale .refresh-time {
          color: var(--gold);
        }

        .raid-refresh-indicator .refresh-btn {
          background: none;
          border: none;
          cursor: pointer;
          font-size: var(--fs-lg);
          padding: 2px 6px;
          border-radius: 6px;
          transition: all 0.2s ease;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .raid-refresh-indicator .refresh-btn:hover:not(:disabled) {
          background: rgba(88, 86, 214, 0.3);
          transform: scale(1.1);
        }

        .raid-refresh-indicator .refresh-btn:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }

        .refresh-spinner {
          display: inline-block;
          animation: spin 1s linear infinite;
        }

        @keyframes spin {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }

        @media (max-width: 600px) {
        .raid-refresh-indicator {
            padding: 4px 10px;
            font-size: var(--fs-sm);
          }
        .raid-refresh-indicator .refresh-btn {
            font-size: var(--fs-base);
          }
        }

/* ==================== CostMonitor.tsx extracted styles ==================== */

.cost-monitor {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          background: var(--bg-secondary);
          border: 1px solid var(--border);
          border-radius: 6px;
          padding: 0.5rem 1rem;
          font-size: var(--fs-base);
          white-space: nowrap;
        }

        .cost-monitor.warning {
          border-color: var(--gold);
          background: rgba(255, 159, 10, 0.05);
        }

        .cost-monitor.critical {
          border-color: var(--red);
          background: rgba(255, 69, 58, 0.05);
        }

        .cost-monitor.exceeded {
          border-color: var(--red);
          background: rgba(255, 69, 58, 0.1);
        }

        .cost-inline {
          color: var(--text-muted);
          font-size: var(--fs-base);
        }

        .cost-inline strong {
          color: var(--text);
          font-weight: 600;
        }

        .separator {
          color: var(--border);
          font-weight: 300;
        }

        .warning-inline {
          color: var(--gold);
          font-size: var(--fs-base);
          font-weight: 600;
        }

        .cost-monitor.critical .warning-inline,
        .cost-monitor.exceeded .warning-inline {
          color: var(--red);
        }

        .cost-monitor.loading {
          padding: 1rem;
          text-align: center;
          color: var(--text-muted);
          font-size: var(--fs-sm);
        }

/* ==================== RaidRoster.tsx extracted styles ==================== */

/* Status Pills */
        .roster-status-pills {
          display: flex;
          justify-content: center;
          gap: 8px;
          margin-bottom: 16px;
          flex-wrap: wrap;
        }

        .class-groups {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 12px;
        }

        .class-group {
          background: var(--surface);
          border-radius: 6px;
          overflow: hidden;
        }

        .class-group-header {
          display: flex;
          align-items: center;
          gap: 6px;
          padding: 8px 12px;
          background: var(--bg-elevated);
          border-left: 3px solid;
        }

        .class-group-icon {
          font-size: var(--fs-lg);
        }

        .class-group-name {
          font-size: var(--fs-sm);
          letter-spacing: 0.5px;
          flex: 1;
          font-weight: 600;
        }

        .class-group-count {
          color: var(--text-muted);
          font-size: var(--fs-xs);
          font-weight: 500;
        }

        @media (max-width: 768px) {
          .class-groups {
            grid-template-columns: 1fr;
          }
        }

/* ==================== RaidResFetcher.tsx extracted styles ==================== */

@keyframes pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.5; }
        }

        /* WoW-style tooltip content */
        .tw-tooltip-content {
          font-size: var(--fs-sm);
          line-height: 1.4;
          color: var(--coin-gold);
        }
        .tw-tooltip-content b {
          color: var(--coin-gold);
        }
        .tw-tooltip-content .q0 { color: var(--quality-poor); }
        .tw-tooltip-content .q1 { color: var(--quality-common); }
        .tw-tooltip-content .q2 { color: var(--quality-uncommon); }
        .tw-tooltip-content .q3 { color: var(--quality-rare); }
        .tw-tooltip-content .q4 { color: var(--quality-epic); }
        .tw-tooltip-content .q5 { color: var(--quality-legendary); }
        .tw-tooltip-content table {
          width: 100%;
        }
        .tw-tooltip-content td, .tw-tooltip-content th {
          color: var(--text);
          font-size: var(--fs-sm);
          padding: 1px 0;
        }
        .tw-tooltip-content a {
          color: var(--quality-uncommon);
          text-decoration: none;
        }
        .tw-tooltip-content br {
          display: block;
          margin: 2px 0;
        }

/* ==================== PlayerStatsTable.tsx extracted styles ==================== */

.hoverable-stat {
          cursor: help;
          border-bottom: 1px dotted var(--text-muted);
          transition: all 0.2s ease;
          position: relative;
        }
        .hoverable-stat:hover {
          opacity: 0.9;
          border-bottom: 2px solid currentColor;
        }
        .hoverable-stat::after {
          content: "ⓘ";
          font-size: var(--fs-xs);
          opacity: 0.5;
          margin-left: 2px;
          vertical-align: super;
          color: var(--text-muted);
        }
        .hoverable-stat:hover::after {
          opacity: 1;
          color: var(--blue);
        }

/* ==================== LootAnalytics.tsx extracted styles ==================== */

canvas {
          max-width: 100%;
        }

/* ==================== RecipeBrowser.tsx extracted styles ==================== */

.recipe-browser {
    max-width: var(--container);
    margin: 0 auto;
    padding: 20px;
  }

.recipe-header {
    text-align: center;
    margin-bottom: 24px;
  }

.recipe-header h1 {
    font-size: var(--fs-2xl);
    color: var(--gold);
    margin-bottom: 8px;
  }

.recipe-header .subtitle {
    color: var(--text-muted);
    font-size: var(--fs-lg);
  }

.recipe-browser .loading-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
  }

.recipe-browser .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--surface);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  /* Controls */
.recipe-controls {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    align-items: center;
    flex-wrap: wrap;
  }

.search-box-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 280px;
    max-width: var(--w-tight);
  }

.search-box {
    flex: 1;
  }

.search-clear-btn {
    padding: 8px 16px;
    background: var(--surface);
    border: 1px solid var(--surface);
    border-radius: 6px;
    color: var(--gold);
    font-size: var(--fs-base);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    white-space: nowrap;
  }

.search-clear-btn:hover {
    background: var(--surface);
    border-color: var(--gold);
    color: var(--gold);
  }

.results-count {
    color: var(--text-muted);
    font-size: var(--fs-base);
  }

  /* Category Tabs - matches ConsumesShop */
.recipe-browser .category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
    justify-content: center;
  }

.recipe-browser .category-tab {
    padding: 6px 14px;
    background: var(--bg-elevated);
    border: 2px solid var(--surface);
    border-radius: 6px;
    color: var(--gold);
    cursor: pointer;
    transition: all 0.2s;
    font-size: var(--fs-base);
  }

.recipe-browser .category-tab:hover {
    border-color: var(--gold);
  }

.recipe-browser .category-tab.active {
    background: linear-gradient(135deg, var(--surface), var(--bg-elevated));
    border-color: var(--gold);
    color: var(--gold-soft);
  }

  /* Recipe Grid */
.recipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
  }

/* Paging sentinel under .recipe-grid. The Recipe Book renders 60 cards at a
   time and appends the next page when this scrolls into view. */
.recipe-page-sentinel {
    padding: 24px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-xs);
  }

.no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
  }

  /* Recipe Card */
.recipe-card {
    background: var(--bg-elevated);
    border: 1px solid var(--surface);
    border-radius: 8px;
    padding: 16px;
    transition: border-color 0.2s;
  }

.recipe-card:hover {
    border-color: var(--gold);
  }

.recipe-card-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
  }

.recipe-icon {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid var(--surface);
    flex-shrink: 0;
  }

.recipe-icon-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid var(--surface);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--border);
    font-size: var(--fs-xl);
    flex-shrink: 0;
  }

.recipe-icon-loading {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid var(--surface);
    background: linear-gradient(90deg, var(--surface) 25%, var(--surface) 50%, var(--surface) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    flex-shrink: 0;
    flex-shrink: 0;
  }

.recipe-title {
    flex: 1;
    min-width: 0;
  }

.recipe-name {
    font-size: var(--fs-lg);
    color: var(--text);
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
  }

.recipe-name:hover {
    color: var(--gold);
  }

.recipe-meta {
    display: flex;
    gap: 10px;
    font-size: var(--fs-xs);
    color: var(--text-muted);
  }

.recipe-meta .profession {
    color: var(--gold);
    text-transform: capitalize;
  }

.recipe-meta .yields {
    color: var(--green);
  }

  /* Reagents */
  .reagents-section h4,
.demand-section h4 {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

.recipe-browser .reagent-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

.recipe-browser .reagent {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--surface);
    font-size: var(--fs-sm);
  }

.recipe-browser .reagent:last-child {
    border-bottom: none;
  }

.recipe-browser .reagent-icon {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    flex-shrink: 0;
  }

.recipe-browser .reagent-icon-placeholder {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    flex-shrink: 0;
  }

.recipe-browser .reagent-icon-loading {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--surface) 25%, var(--surface) 50%, var(--surface) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    flex-shrink: 0;
  }

  @keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

.recipe-browser .reagent-name {
    flex: 1;
    color: var(--text-muted);
    text-decoration: none;
  }

.recipe-browser .reagent-name:hover {
    color: var(--gold);
  }

.recipe-browser .reagent-herb .reagent-name { color: var(--green); }
.recipe-browser .reagent-vendor .reagent-name { color: var(--text-muted); }
.recipe-browser .reagent-drop .reagent-name { color: var(--red); }
.recipe-browser .reagent-crafted .reagent-name { color: var(--gold); }

.recipe-browser .reagent-qty {
    color: var(--gold);
    font-weight: 600;
    font-size: var(--fs-sm);
  }

  /* Demand Section */
.demand-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--surface);
  }

.demand-section.empty {
    text-align: center;
  }

.demand-stats {
    margin-bottom: 6px;
  }

.demand-total {
    color: var(--blue);
    font-weight: 600;
    font-size: var(--fs-sm);
  }

.herb-needs {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

.herb-need {
    font-size: var(--fs-xs);
    color: var(--green);
    padding-left: 8px;
  }

.no-demand {
    color: var(--border);
    font-size: var(--fs-sm);
    font-style: italic;
  }

  /* Autocomplete overrides */
.search-box input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--surface);
    border-radius: 6px;
    color: var(--text);
    font-size: var(--fs-base);
  }

.search-box input:focus {
    outline: none;
    border-color: var(--gold);
  }

  /* Responsive */
@media (max-width: 768px) {
.recipe-controls {
      flex-direction: column;
      align-items: stretch;
    }

.search-box {
      max-width: none;
    }

.recipe-browser .category-tabs {
      flex-direction: column;
    }

.recipe-grid {
      grid-template-columns: 1fr;
    }
  }

/* ==================== LogReconciliation.tsx extracted styles ==================== */

.reconcile-container {
    max-width: var(--w-medium);
    margin: 0 auto;
  }

.status-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
  }

.status-card {
    padding: 24px;
    border-radius: 12px;
    text-align: center;
    border: 2px solid;
    background: var(--bg-elevated);
  }

.status-card.good {
    border-color: var(--green);
    background: linear-gradient(135deg, rgba(115, 191, 105, 0.1) 0%, rgba(115, 191, 105, 0.05) 100%);
  }

.status-card.warning {
    border-color: var(--gold);
    background: linear-gradient(135deg, rgba(255, 152, 48, 0.1) 0%, rgba(255, 152, 48, 0.05) 100%);
  }

.status-card.error {
    border-color: var(--red);
    background: linear-gradient(135deg, rgba(242, 73, 92, 0.1) 0%, rgba(242, 73, 92, 0.05) 100%);
  }

.status-icon {
    font-size: var(--fs-2xl);
    margin-bottom: 8px;
  }

.status-count {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
  }

.status-label {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

.issues-panel {
    padding: 16px;
    background: rgba(255, 152, 48, 0.1);
    border-left: 3px solid var(--gold);
    border-radius: 8px;
    margin-bottom: 24px;
  }

.issues-title {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text);
  }

.issue-item {
    font-size: var(--fs-base);
    color: var(--text-muted);
    margin: 4px 0;
  }

.success-panel {
    padding: 16px;
    background: rgba(115, 191, 105, 0.1);
    border-left: 3px solid var(--green);
    border-radius: 8px;
    margin-bottom: 24px;
    color: var(--green);
    font-weight: 600;
  }

.reprocess-info {
    margin-bottom: 24px;
    padding: 20px;
    background: var(--bg-elevated);
    border-radius: 8px;
    border: 1px solid var(--border);
  }

.reprocess-title {
    font-weight: 600;
    font-size: var(--fs-lg);
    margin-bottom: 12px;
    color: var(--text);
  }

.reprocess-description {
    font-size: var(--fs-base);
    color: var(--text-muted);
    line-height: 1.6;
  }

.reprocess-description ul {
    margin: 12px 0 0 20px;
    padding: 0;
  }

.reprocess-description li {
    margin: 6px 0;
  }

.table-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px 0;
    gap: 12px;
  }

.btn-select-toggle {
    padding: 8px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
  }

.btn-select-toggle:hover:not(:disabled) {
    background: var(--bg-elevated);
    border-color: var(--blue);
  }

.btn-select-toggle:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

.sort-controls {
    display: flex;
    align-items: center;
    gap: 8px;
  }

.sort-controls label {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    font-weight: 600;
  }

.sort-controls select {
    padding: 6px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: var(--fs-sm);
    cursor: pointer;
  }

.sort-controls select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

.btn-sort-order {
    padding: 6px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: var(--fs-lg);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
  }

.btn-sort-order:hover:not(:disabled) {
    background: var(--bg-elevated);
  }

.btn-sort-order:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

.log-table-container {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin: 12px 0;
  }

.log-table {
    width: 100%;
    border-collapse: collapse;
  }

.log-table thead {
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 10;
  }

.log-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border);
  }

.log-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-sm);
    color: var(--text);
  }

.log-table tbody tr {
    cursor: pointer;
    transition: background-color 0.15s;
  }

.log-table tbody tr:hover {
    background: var(--bg-elevated);
  }

.log-table tbody tr.selected {
    background: rgba(0, 122, 255, 0.1);
  }

.log-table tbody tr:last-child td {
    border-bottom: none;
  }

.log-id-cell {
    font-family: ui-monospace, monospace;
    font-size: var(--fs-sm);
  }

.raid-cell {
    font-weight: 600;
  }

.reconcile-container .status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

.reconcile-container .status-badge.parsed {
    background: rgba(115, 191, 105, 0.2);
    color: var(--green);
  }

.reconcile-container .status-badge.unparsed {
    background: rgba(255, 152, 48, 0.2);
    color: var(--gold);
  }

.selection-summary {
    padding: 12px 16px;
    background: rgba(0, 122, 255, 0.1);
    border-radius: 6px;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--blue);
    text-align: center;
    margin: 12px 0;
  }

.btn-reprocess-selected {
    width: 100%;
    padding: 12px;
    background: var(--purple);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 24px;
  }

.btn-reprocess-selected:hover:not(:disabled) {
    background: var(--purple);
    transform: translateY(-1px);
  }

.btn-reprocess-selected:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

.btn-start {
    width: 100%;
    padding: 14px;
    background: var(--blue);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: var(--fs-lg);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
  }

.btn-start:hover:not(:disabled) {
    background: var(--apple-blue-dark);
    transform: translateY(-1px);
  }

.btn-start:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

.phases-container {
    margin: 24px 0;
    padding: 20px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
  }

.phases-title {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 16px;
    text-align: center;
  }

.phase-item {
    margin-bottom: 16px;
    padding: 12px;
    background: var(--surface);
    border-radius: 8px;
    border-left: 3px solid var(--border);
    transition: all 0.3s ease;
  }

.phase-item:last-child {
    margin-bottom: 0;
  }

.phase-item.pending {
    opacity: 0.6;
    border-left-color: var(--text-muted);
  }

.phase-item.in-progress {
    border-left-color: var(--blue);
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.1) 0%, rgba(0, 122, 255, 0.05) 100%);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
  }

.phase-item.complete {
    border-left-color: var(--green);
    background: linear-gradient(135deg, rgba(115, 191, 105, 0.1) 0%, rgba(115, 191, 105, 0.05) 100%);
  }

.phase-item.error {
    border-left-color: var(--red);
    background: linear-gradient(135deg, rgba(242, 73, 92, 0.1) 0%, rgba(242, 73, 92, 0.05) 100%);
  }

.phase-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }

.phase-name {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
  }

.phase-icon {
    display: inline-block;
    font-size: var(--fs-lg);
  }

.phase-icon.spinning {
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

.phase-status-text {
    font-size: var(--fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

.phase-item.pending .phase-status-text {
    color: var(--text-muted);
  }

.phase-item.in-progress .phase-status-text {
    color: var(--blue);
  }

.phase-item.complete .phase-status-text {
    color: var(--green);
  }

.phase-item.error .phase-status-text {
    color: var(--red);
  }

.phase-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--bg);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
  }

.phase-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--blue), var(--purple));
    transition: width 0.5s ease;
    border-radius: 4px;
  }

.phase-item.complete .phase-progress-fill {
    background: var(--green);
  }

.phase-item.error .phase-progress-fill {
    background: var(--red);
  }

.phase-details {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-top: 4px;
  }

.phase-count {
    color: var(--blue);
    font-weight: 600;
  }

.phase-current-item {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-top: 6px;
    font-style: italic;
    padding: 4px 8px;
    background: var(--bg);
    border-radius: 4px;
    font-family: ui-monospace, monospace;
  }

.activity-log {
    margin-top: 24px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
  }

.activity-title {
    padding: 12px 16px;
    background: var(--surface);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
  }

.activity-entries {
    max-height: 300px;
    overflow-y: auto;
  }

.activity-entry {
    display: flex;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-sm);
  }

.activity-entry:last-child {
    border-bottom: none;
  }

.activity-entry.success {
    background: rgba(115, 191, 105, 0.05);
  }

.activity-entry.error {
    background: rgba(242, 73, 92, 0.05);
  }

.activity-entry.warning {
    background: rgba(255, 152, 48, 0.05);
  }

.activity-time {
    color: var(--text-muted);
    font-family: ui-monospace, monospace;
    flex-shrink: 0;
  }

.activity-message {
    color: var(--text);
  }

  @media (max-width: 768px) {
.status-cards {
      grid-template-columns: 1fr;
    }
  }

/* ================================
   PHASE 4: Stock-Aware Demand Insights
   ================================ */

/* Stock Health summary card */
.stock-health-card {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.stock-health-stat {
  flex: 1;
  min-width: 80px;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  border-left: 3px solid;
  text-align: center;
}

.stock-health-stat.critical { border-left-color: var(--red); }
.stock-health-stat.high { border-left-color: var(--gold); }
.stock-health-stat.medium { border-left-color: var(--gold); }
.stock-health-stat.low { border-left-color: var(--green); }
.stock-health-stat.ok { border-left-color: var(--green); }

.stock-health-count {
  font-size: var(--fs-xl);
  font-weight: bold;
  color: var(--text);
}

.stock-health-stat.critical .stock-health-count { color: var(--red); }
.stock-health-stat.high .stock-health-count { color: var(--gold); }
.stock-health-stat.medium .stock-health-count { color: var(--gold); }
.stock-health-stat.low .stock-health-count { color: var(--green); }
.stock-health-stat.ok .stock-health-count { color: var(--green); }

.stock-health-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Enhanced reagent demand row (Phase 4) */
.reagent-demand-row-enhanced {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.6rem 0.75rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

/* Resolved-from footnote spans full row */
.reagent-demand-row-enhanced .reagent-resolved-note {
  grid-column: 1 / -1;
}

/* Stock data cells */
.reagent-stock-data {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.reagent-stock-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 40px;
}

.reagent-stock-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.reagent-stock-value {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
}

.reagent-stock-value.gap-warning {
  color: var(--red);
}

/* Priority badges */
.priority-badge {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.priority-badge.critical { background: rgba(248, 113, 113, 0.2); color: var(--red); border: 1px solid rgba(248, 113, 113, 0.3); }
.priority-badge.high { background: rgba(245, 158, 11, 0.2); color: var(--gold); border: 1px solid rgba(245, 158, 11, 0.3); }
.priority-badge.medium { background: rgba(251, 191, 36, 0.2); color: var(--gold); border: 1px solid rgba(251, 191, 36, 0.3); }
.priority-badge.low { background: rgba(20, 184, 166, 0.2); color: var(--green); border: 1px solid rgba(20, 184, 166, 0.3); }
.priority-badge.ok { background: rgba(34, 197, 94, 0.2); color: var(--green); border: 1px solid rgba(34, 197, 94, 0.3); }

/* Resolved-from footnote */
.reagent-resolved-note {
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--text-muted);
  padding-left: 2rem;
  margin-top: -0.25rem;
}

/* Inline sources fallback when no priority data */
.reagent-demand-sources-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: var(--fs-sm);
}

/* Demand badge on material cards */
.demand-badge-card {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border-radius: 3px;
  z-index: 1;
}

.demand-badge-card.critical { background: rgba(239, 68, 68, 0.25); color: var(--red); border: 1px solid rgba(239, 68, 68, 0.4); }
.demand-badge-card.med { background: rgba(245, 158, 11, 0.25); color: var(--gold); border: 1px solid rgba(245, 158, 11, 0.4); }
.demand-badge-card.low { background: rgba(107, 114, 128, 0.2); color: var(--text-muted); border: 1px solid rgba(107, 114, 128, 0.3); }

/* item-card needs position:relative for badge overlay */
.item-card { position: relative; }

/* Sort by urgency toggle button */
.sort-urgency-btn {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.sort-urgency-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.sort-urgency-btn.active {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: var(--gold);
}

/* Banner stock detail line */
.demand-herb-stock-detail {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  display: block;
  margin-top: 1px;
}

/* Banner resolved-from line (e.g. "via Shadow Oil") */
.demand-herb-resolved {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  display: block;
  font-style: italic;
}

/* View Full Demand link in banner */
.demand-view-full-link {
  display: block;
  text-align: right;
  color: var(--blue);
  font-size: var(--fs-sm);
  text-decoration: none;
  padding: 6px 12px 2px 0;
  transition: color 0.2s;
}
.demand-view-full-link:hover { color: var(--blue-soft); }

/* Stock health summary stats line */
.stock-health-summary-line {
  display: flex;
  gap: 1.2rem;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  width: 100%;
  justify-content: center;
}

/* Double Whammy badge */
.double-whammy-badge {
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(239, 68, 68, 0.35);
  color: color-mix(in srgb, var(--red) 45%, var(--text));
  border: 1px solid rgba(239, 68, 68, 0.5);
  cursor: help;
  letter-spacing: 0.03em;
}

/* Responsive: stack stock data on narrow screens */
@media (max-width: 768px) {
  .reagent-demand-row-enhanced {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .reagent-stock-data {
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .stock-health-card {
    gap: 0.35rem;
  }
  .stock-health-stat {
    min-width: 55px;
    padding: 0.4rem 0.5rem;
  }
  .stock-health-count {
    font-size: var(--fs-lg);
  }
}

/* ================================
   REDESIGNED DEMAND INSIGHTS
   ================================ */

/* Bank Coverage Card */
.bank-coverage-card {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.bank-coverage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.bank-coverage-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.bank-coverage-pct {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text);
}

.bank-coverage-bar-track {
  height: 12px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.bank-coverage-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.5s ease;
}

.bank-coverage-bar-fill.critical { background: linear-gradient(90deg, var(--red), var(--red)); }
.bank-coverage-bar-fill.medium { background: linear-gradient(90deg, var(--gold), var(--gold)); }
.bank-coverage-bar-fill.ok { background: linear-gradient(90deg, var(--green), var(--green)); }

.bank-coverage-desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.bank-coverage-alert {
  margin-top: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  font-size: var(--fs-sm);
  color: color-mix(in srgb, var(--red) 45%, var(--text));
}

/* Clickable tier badges */
.stock-health-stat.clickable {
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.stock-health-stat.clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.stock-health-days {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Restock Now Table ── */
.restock-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0.75rem;
}

.restock-table .restock-header {
  display: grid;
  grid-template-columns: 30px 1.5fr 70px 80px 70px 100px 1fr;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.restock-row {
  display: grid;
  grid-template-columns: 30px 1.5fr 70px 80px 70px 100px 1fr;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  align-items: center;
  font-size: var(--fs-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s;
}

.restock-row:hover { background: rgba(255, 255, 255, 0.03); }

.restock-row-critical {
  background: rgba(239, 68, 68, 0.06);
  border-left: 3px solid var(--red);
}

.restock-col-rank {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}

.restock-col-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.restock-name-main {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.restock-via {
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--text-muted);
  padding-left: 1.75rem;
}

.restock-col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.restock-have { color: var(--green); }
.restock-short { color: var(--red); font-weight: 600; }

.restock-col-runs {
  text-align: center;
  font-weight: 600;
}

.restock-danger { color: var(--red); }
.restock-warn { color: var(--gold); }

.restock-col-used {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Double Hit badge */
.double-hit-badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(239, 68, 68, 0.35);
  color: color-mix(in srgb, var(--red) 45%, var(--text));
  border: 1px solid rgba(239, 68, 68, 0.5);
  letter-spacing: 0.03em;
  margin-left: 0.35rem;
  flex-shrink: 0;
}

/* Copy Shopping List button */
.copy-shopping-list-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 6px;
  color: var(--blue-soft);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.copy-shopping-list-btn:hover {
  background: rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.5);
}

.copy-hint {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-left: 0.75rem;
}

/* ── Filter Pills + Sort Controls ── */
.reagent-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.reagent-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.reagent-filter-pill {
  padding: 0.3rem 0.65rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.reagent-filter-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.reagent-filter-pill.active {
  background: rgba(93, 173, 226, 0.15);
  border-color: rgba(93, 173, 226, 0.4);
  color: var(--blue);
}

.reagent-sort-controls {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.sort-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-right: 0.2rem;
}

.reagent-sort-btn {
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.reagent-sort-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--text); }
.reagent-sort-btn.active { background: rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.4); color: var(--gold); }

/* ── Tier Groups (Collapsible Priority Sections) ── */
.tier-groups {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tier-group {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.tier-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.9rem;
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
  font-size: var(--fs-sm);
}

.tier-header:hover { background: rgba(0, 0, 0, 0.4); }

.tier-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tier-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tier-header-right {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.tier-header.critical { border-left: 3px solid var(--red); }
.tier-header.high { border-left: 3px solid var(--gold); }
.tier-header.medium { border-left: 3px solid var(--gold); }
.tier-header.low { border-left: 3px solid var(--green); }
.tier-header.ok { border-left: 3px solid var(--green); }

.tier-body {
  padding: 0;
}

/* Column headers */
.tier-col-headers {
  display: grid;
  grid-template-columns: 60px 1.2fr 1.5fr 60px 60px 1fr;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.15);
}

/* Tier row */
.tier-row {
  display: grid;
  grid-template-columns: 60px 1.2fr 1.5fr 60px 60px 1fr;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  align-items: center;
  font-size: var(--fs-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.15s;
}

.tier-row:hover { background: rgba(255, 255, 255, 0.03); }

.tier-col-urgency {
  font-weight: 700;
  font-size: var(--fs-sm);
  text-align: center;
  color: var(--text-muted);
}

.urgency-dead { color: var(--red); }
.urgency-critical { color: var(--gold); }

.tier-col-name {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.tier-name-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.tier-via {
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--text-muted);
  padding-left: 1.75rem;
}

/* Stacked have/short bar */
.tier-col-bar {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stacked-bar {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

.stacked-bar-have {
  background: var(--green);
  min-width: 0;
  transition: width 0.3s;
}

.stacked-bar-short {
  background: var(--red);
  min-width: 0;
  transition: width 0.3s;
}

.stacked-bar-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.tier-col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
}

.tier-have { color: var(--green); }
.tier-short { color: var(--red); font-weight: 600; }
.tier-ok { color: var(--green); }

.tier-col-used {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Show more button inside tier */
.tier-show-more {
  display: block;
  width: 100%;
  padding: 0.5rem;
  background: rgba(93, 173, 226, 0.08);
  border: none;
  color: var(--blue);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background 0.15s;
}

.tier-show-more:hover { background: rgba(93, 173, 226, 0.15); }

/* Stacked bar legend */
.stacked-bar-legend {
  display: flex;
  gap: 1.2rem;
  padding: 0.5rem 0.75rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}

.legend-swatch.have { background: var(--green); }
.legend-swatch.short { background: var(--red); }

/* ── Responsive ── */
@media (max-width: 768px) {
  .restock-table .restock-header,
  .restock-row {
    grid-template-columns: 25px 1fr 55px 65px 55px;
    font-size: var(--fs-xs);
  }
  .restock-col-runs,
  .restock-col-used { display: none; }

  .tier-col-headers,
  .tier-row {
    grid-template-columns: 45px 1fr 1.2fr 50px 50px;
    font-size: var(--fs-xs);
  }
  .tier-col-used { display: none; }

  .reagent-controls {
    flex-direction: column;
    align-items: flex-start;
  }

  .bank-coverage-pct { font-size: var(--fs-lg); }
}

/* Guild Bank table row hover */
.guild-bank-row:hover { background: var(--surface); }

/* ================================
   SHOP STOCK STATUS SECTION
   ================================ */
.shop-stock-section {
  margin-bottom: 8px;
}

.shop-stock-subtitle {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 16px 0;
}

.shop-stock-summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.shop-stock-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: var(--fs-sm);
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.shop-stock-badge .badge-count {
  font-size: var(--fs-lg);
  font-weight: 700;
}

.shop-stock-badge.out-of-stock { background: rgba(220, 38, 38, 0.15); color: color-mix(in srgb, var(--red) 45%, var(--text)); border-color: rgba(220, 38, 38, 0.3); }
.shop-stock-badge.critical { background: rgba(248, 113, 113, 0.12); color: color-mix(in srgb, var(--red) 45%, var(--text)); border-color: rgba(248, 113, 113, 0.25); }
.shop-stock-badge.low-stock { background: rgba(251, 191, 36, 0.12); color: var(--gold-soft); border-color: rgba(251, 191, 36, 0.25); }
.shop-stock-badge.in-stock { background: rgba(20, 184, 166, 0.12); color: var(--green); border-color: rgba(20, 184, 166, 0.25); }
.shop-stock-badge.surplus { background: rgba(34, 197, 94, 0.12); color: var(--green); border-color: rgba(34, 197, 94, 0.25); }

.shop-stock-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.shop-stock-category {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
  padding: 10px 0 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 4px;
}

.shop-stock-category:first-child { margin-top: 0; }

.shop-stock-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  font-size: var(--fs-sm);
}

.shop-stock-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.stock-item-icon {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--bg);
  flex-shrink: 0;
  image-rendering: pixelated;
}

.stock-item-icon-placeholder {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  flex-shrink: 0;
}

.shop-stock-row .stock-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-stock-row .stock-item-name a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-weight: 500;
}

.shop-stock-row .stock-item-name a:hover {
  color: var(--blue);
  text-decoration: underline;
}

.shop-stock-row .stock-item-count {
  font-weight: 600;
  min-width: 30px;
  text-align: right;
  color: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
}

.shop-stock-level {
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  text-transform: uppercase;
}

.shop-stock-level.out-of-stock { background: rgba(220, 38, 38, 0.2); color: color-mix(in srgb, var(--red) 45%, var(--text)); }
.shop-stock-level.critical { background: rgba(248, 113, 113, 0.15); color: color-mix(in srgb, var(--red) 45%, var(--text)); }
.shop-stock-level.low-stock { background: rgba(251, 191, 36, 0.15); color: var(--gold-soft); }

.shop-stock-toggle {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: var(--fs-sm);
  padding: 8px 16px;
  border-radius: 6px;
  margin-top: 12px;
}

.shop-stock-toggle:hover { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.8); }

.shop-stock-empty {
  text-align: center;
  padding: 24px;
  color: rgba(255, 255, 255, 0.4);
  font-size: var(--fs-base);
}

/* ================================
   DAILY TRENDS LINE CHART
   ================================ */
.trend-line-chart {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  padding: 16px;
  margin-top: 12px;
}

.trend-line-chart svg {
  display: block;
  width: 100%;
  height: 100%;
}

.trend-line-chart-svg {
  width: 100%;
  height: 200px;
}

.trend-period-pills {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.trend-period-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  padding: 4px 14px;
  border-radius: 16px;
  font-size: var(--fs-sm);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s ease;
}

.trend-period-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}

.trend-period-pill.active {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.4);
  color: var(--blue-soft);
  font-weight: 600;
}

/* ================================
   RESPONSIVE: SHOP STOCK & TRENDS
   ================================ */
@media (max-width: 768px) {
  .shop-stock-summary { gap: 6px; }
  .shop-stock-badge { padding: 4px 10px; font-size: var(--fs-xs); }
  .shop-stock-row .stock-item-cat { display: none; }
  .trend-line-chart-svg { height: 160px; }
}

/* ================================
   RECIPE BROWSER: EXPANDABLE SUB-RECIPES
   ================================ */
.recipe-browser .reagent-main { display: flex; align-items: center; gap: 6px; }
.recipe-browser .reagent-crafted .sub-recipe-toggle { cursor: pointer; padding: 2px 8px 2px 4px; margin: -2px -4px; border-radius: 6px; background: rgba(243, 156, 18, 0.08); border: 1px solid rgba(243, 156, 18, 0.2); transition: background 0.15s, border-color 0.15s; }
.recipe-browser .reagent-crafted .sub-recipe-toggle:hover { background: rgba(243, 156, 18, 0.15); border-color: rgba(243, 156, 18, 0.4); }
.recipe-browser .sub-recipe-arrow { font-size: var(--fs-sm); margin-left: 8px; transition: transform 0.2s; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; background: rgba(243, 156, 18, 0.2); color: var(--gold); line-height: 1; }
.recipe-browser .sub-recipe-arrow.expanded { transform: rotate(90deg); background: rgba(243, 156, 18, 0.3); }
.recipe-browser .sub-recipe-list { margin: 4px 0 4px 24px; padding: 6px 0 6px 12px; border-left: 2px solid rgba(243, 156, 18, 0.3); list-style: none; }
.recipe-browser .sub-recipe-list .reagent { padding: 2px 0; font-size: var(--fs-base); display: flex; align-items: center; gap: 6px; }
.recipe-browser .raw-materials-summary { margin-top: 8px; padding: 8px 12px; background: rgba(255,255,255,0.03); border-radius: 6px; border: 1px solid rgba(255,255,255,0.06); }
.recipe-browser .raw-materials-summary h5 { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 6px 0; text-transform: uppercase; letter-spacing: 0.5px; }
.recipe-browser .raw-material-pill { display: inline-block; font-size: var(--fs-xs); padding: 2px 8px; margin: 2px 4px 2px 0; border-radius: 10px; background: rgba(255,255,255,0.05); }
.recipe-browser .raw-material-herb { color: var(--green); border: 1px solid rgba(88,214,141,0.25); }
.recipe-browser .raw-material-drop { color: var(--red); border: 1px solid rgba(231,76,60,0.25); }
.recipe-browser .raw-material-vendor { color: var(--text-muted); border: 1px solid rgba(176,176,176,0.2); }
.recipe-browser .raw-material-other { color: var(--text-muted); border: 1px solid rgba(153,153,153,0.2); }

/* ================================
   CONSUMES QUEUE: BANK CROSS-REFERENCE
   ================================ */
.order-item-stock { display: inline-block; font-size: var(--fs-xs); margin-left: 8px; padding: 1px 6px; border-radius: 8px; }
.order-item-stock.sufficient { color: var(--green); background: rgba(88,214,141,0.1); }
.order-item-stock.partial { color: var(--gold); background: rgba(251,191,36,0.1); }
.order-item-stock.short { color: var(--red); background: rgba(248,113,113,0.1); }
.priority-farm-summary { margin-top: 8px; padding: 6px 10px; background: rgba(88,214,141,0.06); border: 1px solid rgba(88,214,141,0.15); border-radius: 6px; font-size: var(--fs-xs); }
.priority-farm-summary .farm-title { color: var(--green); font-weight: 600; margin-right: 6px; }
.priority-farm-summary .farm-item { color: var(--text); margin-right: 4px; }
.priority-farm-summary .farm-qty { color: var(--gold); }

/* Tray app update notification banner — guild-bank page */
.tray-update-banner { background: linear-gradient(135deg, var(--green-bg), var(--green-bg)); border: 1px solid var(--green-deep); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; animation: slideDown 0.3s ease-out; }
.tray-update-content { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tray-update-icon { font-size: var(--fs-xl); flex-shrink: 0; }
.tray-update-text { flex: 1; min-width: 200px; color: color-mix(in srgb, var(--green) 45%, var(--text)); font-size: var(--fs-base); }
.tray-update-text strong { color: var(--green); }
.tray-update-changelog { color: var(--green); }
.tray-update-download { background: var(--green-deep); color: var(--text); padding: 6px 14px; border-radius: 6px; text-decoration: none; font-weight: bold; font-size: var(--fs-base); white-space: nowrap; transition: background 0.2s; }
.tray-update-download:hover { background: var(--green); }
.tray-update-dismiss { background: none; border: none; color: var(--green); font-size: var(--fs-lg); cursor: pointer; padding: 4px 8px; line-height: 1; transition: color 0.2s; }
.tray-update-dismiss:hover { color: var(--green); }

/* ==================== Visual Polish: Global Enhancements ==================== */

/* Card hover glow — strong visible effect using page accent colors */
.card:hover {
    border-color: var(--page-accent, rgba(255, 140, 0, 0.7)) !important;
    box-shadow:
        0 6px 24px var(--page-accent-glow, rgba(139, 0, 0, 0.4)),
        0 0 40px var(--page-accent-glow, rgba(178, 34, 34, 0.2)),
        0 0 80px var(--page-accent-glow, rgba(178, 34, 34, 0.1)),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 0 20px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-2px);
}

/* Smooth page entrance animation (opacity only — no transform, which breaks position:fixed in tooltips) */
@keyframes fadeSlideIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.container {
    animation: fadeSlideIn 0.5s ease-out both;
}

/* ---- Floating Ember Particles (real DOM elements via Nav.tsx) ---- */
.ember-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.ember {
    position: absolute;
    bottom: -20px;
    border-radius: 50%;
    background: rgba(255, 100, 0, 0.8);
    box-shadow: 0 0 6px 2px rgba(255, 80, 0, 0.4);
    animation: ember-float linear infinite;
}

.ember.e1 { left: 8%;  width: 3px; height: 3px; animation-duration: 14s; animation-delay: 0s; background: rgba(255, 80, 0, 0.7); box-shadow: 0 0 6px 2px rgba(255, 80, 0, 0.5); }
.ember.e2 { left: 18%; width: 2px; height: 2px; animation-duration: 18s; animation-delay: -4s; background: rgba(178, 34, 34, 0.8); box-shadow: 0 0 5px 2px rgba(178, 34, 34, 0.5); }
.ember.e3 { left: 30%; width: 3px; height: 3px; animation-duration: 12s; animation-delay: -2s; background: rgba(255, 120, 0, 0.7); box-shadow: 0 0 8px 3px rgba(255, 120, 0, 0.4); }
.ember.e4 { left: 42%; width: 4px; height: 4px; animation-duration: 20s; animation-delay: -8s; background: rgba(255, 140, 0, 0.6); box-shadow: 0 0 10px 3px rgba(255, 140, 0, 0.4); }
.ember.e5 { left: 55%; width: 2px; height: 2px; animation-duration: 16s; animation-delay: -6s; background: rgba(178, 34, 34, 0.7); box-shadow: 0 0 5px 2px rgba(178, 34, 34, 0.4); }
.ember.e6 { left: 65%; width: 3px; height: 3px; animation-duration: 22s; animation-delay: -10s; background: rgba(255, 100, 0, 0.8); box-shadow: 0 0 7px 2px rgba(255, 100, 0, 0.5); }
.ember.e7 { left: 78%; width: 2px; height: 2px; animation-duration: 15s; animation-delay: -3s; background: rgba(255, 60, 0, 0.8); box-shadow: 0 0 6px 2px rgba(255, 60, 0, 0.5); }
.ember.e8 { left: 88%; width: 3px; height: 3px; animation-duration: 19s; animation-delay: -7s; background: rgba(255, 120, 0, 0.6); box-shadow: 0 0 8px 3px rgba(255, 120, 0, 0.3); }
.ember.e9 { left: 92%; width: 2px; height: 2px; animation-duration: 13s; animation-delay: -1s; background: rgba(178, 34, 34, 0.7); box-shadow: 0 0 5px 2px rgba(178, 34, 34, 0.4); }
.ember.e10 { left: 5%; width: 2px; height: 2px; animation-duration: 17s; animation-delay: -9s; background: rgba(255, 80, 0, 0.6); box-shadow: 0 0 6px 2px rgba(255, 80, 0, 0.3); }
.ember.e11 { left: 50%; width: 3px; height: 3px; animation-duration: 21s; animation-delay: -12s; background: rgba(255, 140, 0, 0.7); box-shadow: 0 0 7px 2px rgba(255, 140, 0, 0.4); }
.ember.e12 { left: 73%; width: 2px; height: 2px; animation-duration: 11s; animation-delay: -5s; background: rgba(255, 60, 0, 0.7); box-shadow: 0 0 5px 2px rgba(255, 60, 0, 0.4); }
.ember.e13 { left: 12%; width: 3px; height: 3px; animation-duration: 16s; animation-delay: -13s; background: rgba(255, 100, 0, 0.7); box-shadow: 0 0 7px 2px rgba(255, 100, 0, 0.4); }
.ember.e14 { left: 38%; width: 2px; height: 2px; animation-duration: 13s; animation-delay: -2s; background: rgba(178, 34, 34, 0.8); box-shadow: 0 0 5px 2px rgba(178, 34, 34, 0.5); }
.ember.e15 { left: 62%; width: 3px; height: 3px; animation-duration: 19s; animation-delay: -11s; background: rgba(255, 80, 0, 0.6); box-shadow: 0 0 6px 2px rgba(255, 80, 0, 0.4); }
.ember.e16 { left: 85%; width: 2px; height: 2px; animation-duration: 15s; animation-delay: -7s; background: rgba(255, 120, 0, 0.7); box-shadow: 0 0 6px 2px rgba(255, 120, 0, 0.4); }

@keyframes ember-float {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    50% {
        transform: translateY(-50vh) translateX(20px) scale(0.8);
        opacity: 0.8;
    }
    100% {
        transform: translateY(-110vh) translateX(-10px) scale(0.3);
        opacity: 0;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .ember-overlay {
        display: none;
    }
    .container {
        animation: none;
    }
}
@media (max-width: 600px) { .tray-update-content { gap: 8px; } .tray-update-text { font-size: var(--fs-sm); } }

/* ════════════════════════════════════════════════════════════════════════════
   2026-04-08: Flask Demand by Day panel (Demand Analytics Section 2.5)
   Single pane of glass showing flask orders per day + raid context.
   ════════════════════════════════════════════════════════════════════════════ */
/* 2026-04-10: Restyled to match the standard analytics dark theme.
   Previously used a custom purple palette that clashed with the rest
   of the page. Now uses the same blues/grays as every other section. */
.flask-demand-section h2 { color: var(--blue); }

.flask-demand-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 16px 0 20px;
    padding: 14px 18px;
    background: rgba(20, 30, 50, 0.7);
    border-left: 3px solid var(--blue);
    border-radius: 4px;
}
.flask-demand-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
}
.flask-demand-stat-num {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--blue-soft);
    line-height: 1.1;
}
.flask-demand-stat-num-small {
    font-size: var(--fs-lg);
    font-weight: 600;
}
.flask-demand-stat-label {
    font-size: var(--fs-sm);
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.flask-demand-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 14px;
    padding: 8px 12px;
    font-size: var(--fs-base);
    color: var(--blue-soft);
}
.flask-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.flask-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
}
.flask-swatch-supreme { background: var(--blue); }
.flask-swatch-titans { background: var(--red); }
.flask-swatch-wisdom { background: var(--blue); }
.flask-swatch-chromatic { background: var(--green); }

.flask-demand-chart {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 24px;
    padding: 12px;
    background: rgba(20, 30, 50, 0.5);
    border-radius: 6px;
}
.flask-demand-row {
    display: grid;
    grid-template-columns: 90px 1fr 2fr 60px;
    gap: 10px;
    align-items: center;
    padding: 4px 6px;
    border-radius: 3px;
    transition: background 0.15s;
}
.flask-demand-row:hover {
    background: rgba(93, 173, 226, 0.08);
}
.flask-demand-row-peak {
    background: rgba(93, 173, 226, 0.12);
}
.flask-demand-row-label {
    display: flex;
    gap: 6px;
    font-size: var(--fs-base);
    color: var(--blue);
    white-space: nowrap;
}
.flask-demand-row-day {
    color: var(--blue);
    width: 28px;
}
.flask-demand-row-date {
    color: var(--blue-soft);
    font-weight: 500;
}
.flask-demand-row-raid {
    font-size: var(--fs-sm);
    color: var(--blue-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.flask-demand-no-raid {
    color: var(--border);
}
.flask-demand-row-barwrap {
    height: 18px;
    background: rgba(30, 40, 60, 0.5);
    border-radius: 3px;
    overflow: hidden;
}
.flask-demand-row-bar {
    display: flex;
    height: 100%;
    border-radius: 3px;
    overflow: hidden;
    transition: width 0.3s;
}
.flask-demand-seg {
    height: 100%;
    transition: width 0.3s;
}
.flask-demand-seg-supreme { background: var(--blue); }
.flask-demand-seg-titans { background: var(--red); }
.flask-demand-seg-wisdom { background: var(--blue); }
.flask-demand-seg-chromatic { background: var(--green); }
.flask-demand-row-total {
    text-align: right;
    color: var(--blue-soft);
    font-weight: 600;
    font-size: var(--fs-base);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.flask-demand-peak-tag {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text);
    background: var(--blue);
    padding: 1px 5px;
    border-radius: 2px;
    letter-spacing: 0.5px;
}

.flask-demand-table {
    margin-top: 16px;
    background: rgba(20, 30, 50, 0.5);
    border-radius: 6px;
    overflow: hidden;
}
.flask-demand-table-header {
    display: grid;
    grid-template-columns: 70px 50px 2fr 50px 50px 50px 50px 70px;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(20, 30, 50, 0.5);
    color: var(--blue);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.6px;
    border-bottom: 1px solid var(--blue-deep);
}
.flask-demand-table-row {
    display: grid;
    grid-template-columns: 70px 50px 2fr 50px 50px 50px 50px 70px;
    gap: 8px;
    padding: 8px 14px;
    font-size: var(--fs-base);
    color: var(--blue-soft);
    border-bottom: 1px solid var(--blue-deep);
}
.flask-demand-table-row:hover {
    background: rgba(93, 173, 226, 0.05);
}
.flask-demand-table-row:last-child {
    border-bottom: none;
}
.flask-demand-table-footer {
    display: grid;
    grid-template-columns: 70px 50px 2fr 50px 50px 50px 50px 70px;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(20, 30, 50, 0.5);
    color: var(--blue-soft);
    font-weight: 700;
    font-size: var(--fs-base);
    border-top: 1px solid var(--blue-deep);
}
.flask-col-date { color: var(--blue-soft); }
.flask-col-day { color: var(--blue); }
.flask-col-raid {
    color: var(--blue-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.flask-col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.flask-col-total {
    color: var(--blue-soft);
    font-weight: 600;
}

.flask-demand-footnote {
    margin-top: 10px;
    padding: 8px 12px;
    font-size: var(--fs-sm);
    color: var(--blue);
    font-style: italic;
}

@media (max-width: 900px) {
    .flask-demand-row {
        grid-template-columns: 80px 1fr 50px;
        grid-template-areas:
            "label raid total"
            "bar bar bar";
        gap: 6px;
    }
    .flask-demand-row-label { grid-area: label; }
    .flask-demand-row-raid { grid-area: raid; }
    .flask-demand-row-total { grid-area: total; }
    .flask-demand-row-barwrap { grid-area: bar; }
    .flask-demand-table-header,
    .flask-demand-table-row,
    .flask-demand-table-footer {
        grid-template-columns: 60px 40px 1.5fr 40px 40px 40px 40px 50px;
        padding: 6px 8px;
        font-size: var(--fs-sm);
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   2026-04-09: Analytics quick-nav bar + collapsible section headers.
   Lives below the time-range controls inside .analytics-sticky-wrapper so
   both elements stick together as a single floating toolbar.
   ════════════════════════════════════════════════════════════════════════════ */

/* Lives INSIDE .analytics-controls as the last flex row, so no
   background/shadow/radius of its own - inherits from parent. A subtle
   top border separates it from the refresh button row above. */
.analytics-quicknav {
    display: flex;
    gap: 6px;
    padding: 8px 0 0 0;
    margin-top: 2px;
    border-top: 1px solid rgba(100, 120, 160, 0.15);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 120, 160, 0.4) transparent;
    white-space: nowrap;
}
.analytics-quicknav::-webkit-scrollbar { height: 6px; }
.analytics-quicknav::-webkit-scrollbar-track { background: transparent; }
.analytics-quicknav::-webkit-scrollbar-thumb { background: rgba(100, 120, 160, 0.4); border-radius: 3px; }

.quicknav-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(40, 52, 80, 0.6);
    color: var(--blue-soft);
    border: 1px solid rgba(100, 120, 160, 0.3);
    border-radius: 6px;
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.quicknav-btn:hover {
    background: rgba(60, 78, 115, 0.8);
    color: var(--text);
    border-color: rgba(140, 170, 220, 0.6);
    transform: translateY(-1px);
}
.quicknav-btn:active {
    transform: translateY(0);
}
.quicknav-icon { font-size: var(--fs-lg); }
.quicknav-label { font-size: var(--fs-base); }

/* Sections need scroll-margin-top so scrollIntoView from quick-nav lands
   BELOW the sticky header stack (60px nav + ~80px controls + ~45px nav bar
   + ~20px gap = ~205px). Use a safe 215px to account for rounding. */
.analytics-section {
    scroll-margin-top: 215px;
}

/* Collapsible section headers */
.section-toggle-h2 {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
    margin: -4px -8px 8px -8px;
    border-radius: 6px;
    transition: background 0.15s;
}
.section-toggle-h2:hover {
    background: rgba(140, 170, 220, 0.08);
}
.section-chevron {
    display: inline-block;
    font-size: var(--fs-xs);
    color: var(--blue);
    min-width: 14px;
    transition: transform 0.2s;
}
.section-hint {
    margin-left: auto;
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--blue);
    padding: 3px 10px;
    background: rgba(140, 170, 220, 0.08);
    border: 1px dashed rgba(140, 170, 220, 0.25);
    border-radius: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.section-toggle-h2:hover .section-hint {
    color: var(--blue);
    border-color: rgba(140, 170, 220, 0.5);
    background: rgba(140, 170, 220, 0.15);
}

/* Condense section spacing. Before 2026-04-09 each section had ~30px of
   top/bottom margin which made the page feel airy. With collapse defaults
   most sections are single-line headers, so tighter spacing is more
   appropriate. */
.analytics-section {
    margin-bottom: 12px;
    padding: 14px 18px;
}
.analytics-section h2 {
    margin: 0;
    font-size: var(--fs-lg);
}

/* Least Ordered Consumables table */
.least-ordered-table {
    margin-top: 10px;
    background: rgba(20, 24, 38, 0.5);
    border-radius: 6px;
    overflow: hidden;
}
.least-ordered-header {
    display: grid;
    grid-template-columns: 40px 2fr 70px 70px 110px 160px;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(185, 95, 95, 0.12);
    color: color-mix(in srgb, var(--red) 45%, var(--text));
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.6px;
    border-bottom: 1px solid rgba(185, 95, 95, 0.2);
}
.least-ordered-row {
    display: grid;
    grid-template-columns: 40px 2fr 70px 70px 110px 160px;
    gap: 10px;
    padding: 8px 14px;
    font-size: var(--fs-base);
    color: color-mix(in srgb, var(--purple) 45%, var(--text));
    border-bottom: 1px solid rgba(60, 50, 60, 0.3);
    align-items: center;
}
.least-ordered-row:last-child { border-bottom: none; }
.least-ordered-row:hover { background: rgba(185, 95, 95, 0.06); }
.least-ordered-zero {
    background: rgba(80, 60, 60, 0.2);
    color: var(--text-muted);
    font-style: italic;
}
.least-ordered-zero:hover { background: rgba(185, 95, 95, 0.1); }
.least-col-rank { color: var(--text-muted); text-align: right; }
.least-col-name { color: color-mix(in srgb, var(--purple) 45%, var(--text)); }
.least-col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.least-col-stock {
    font-size: var(--fs-sm);
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}
.least-stock-level {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: var(--fs-base);
    font-weight: 600;
    white-space: nowrap;
}
.least-stock-out-of-stock { background: rgba(185, 28, 28, 0.3); color: color-mix(in srgb, var(--red) 45%, var(--text)); }
.least-stock-critical { background: rgba(234, 88, 12, 0.3); color: var(--gold-soft); }
.least-stock-low-stock { background: rgba(202, 138, 4, 0.3); color: var(--gold-soft); }
.least-stock-in-stock { background: rgba(22, 163, 74, 0.3); color: var(--green); }
.least-stock-surplus { background: rgba(37, 99, 235, 0.3); color: var(--blue-soft); }
.least-zero-mark { color: var(--border); }

/* 2026-04-09: Progressive shrinking for the quicknav bar so 11 buttons
   always fit across the viewport without horizontal clipping. Previous
   single breakpoint at 900px left a gap where labels were still visible
   but the rightmost buttons got cut off by overflow-x scroll. */

/* Step 1 (1400px): tighten gaps and padding first while keeping labels */
@media (max-width: 1400px) {
    .analytics-quicknav { gap: 4px; }
    .quicknav-btn { padding: 5px 9px; font-size: var(--fs-sm); }
    .quicknav-label { font-size: var(--fs-base); }
}

/* Step 2 (1200px): tighter still, smaller label font */
@media (max-width: 1200px) {
    .quicknav-btn { padding: 5px 7px; gap: 4px; }
    .quicknav-label { font-size: var(--fs-sm); }
}

/* Step 3 (1050px): icon-only mode. Labels disappear before buttons
   overflow, so there is no "rightmost buttons clipped" dead zone. */
@media (max-width: 1050px) {
    .quicknav-label { display: none; }
    .quicknav-btn { padding: 6px 10px; }
    .quicknav-icon { font-size: var(--fs-lg); }
}

@media (max-width: 900px) {
    .least-ordered-header,
    .least-ordered-row {
        grid-template-columns: 30px 1.5fr 50px 50px 80px 120px;
        padding: 6px 10px;
        font-size: var(--fs-sm);
    }
    .section-hint { display: none; }
}

/* ================================
   MOBILE RESPONSIVE FIXES (2026-04-09)
   ================================ */

/* Global mobile overflow prevention */
@media (max-width: 768px) {
    .container { max-width: 100vw; }
    code { word-break: break-all; overflow-wrap: anywhere; }
    .nav-toggle {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Consumes + Herbs tab buttons */
@media (max-width: 480px) {
    .tabs-header { flex-wrap: wrap; }
    .tab-button { padding: 8px 12px; font-size: var(--fs-sm); }
}

/* Consumes queue tab + filter buttons */
@media (max-width: 480px) {
    .tabs-wrapper { flex-wrap: wrap; }
    .tab-btn { padding: 8px 14px; font-size: var(--fs-sm); }
    .filter-tabs { flex-wrap: wrap; }
    .filter-tab { font-size: var(--fs-sm); padding: 6px 10px; }
}

/* Guild bank table + stat summary mobile scroll */
@media (max-width: 768px) {
    .guild-bank-table-wrap,
    .log-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .guild-bank-table-wrap table,
    .log-table-container table {
        min-width: 600px;
    }
}

/* Font legibility: turtlelogs */
@media (max-width: 768px) {
    .log-table td { font-size: var(--fs-base); }
    .log-table th { font-size: var(--fs-sm); }
}

/* Font legibility: guild-bank table */
@media (max-width: 768px) {
    .guild-bank-row { font-size: var(--fs-base); }
}

/* Font legibility: recipes */
@media (max-width: 768px) {
    .recipe-card { font-size: var(--fs-base); }
    .recipe-name { font-size: var(--fs-base); }
}

/* ==========================================================================
   Auction House (/ah)
   Reuses the existing design tokens. The only genuinely new custom properties
   are the two faction accents (aliases onto existing colours) and the three
   coin colours, which have no equivalent in the palette above.
   ========================================================================== */

:root {
    --ah-horde: var(--red);
    --ah-alliance: var(--blue);

    /* Chart series palette (price-history chart only).
       The two accents above are text colours picked for table headers; as CHART
       MARKS on the panel surface (#2a2a2a) the alliance blue sits at OKLCH
       L 0.718, above the 0.48-0.67 band a dark-mode series colour has to hold,
       so the chart takes a darker step of the same hue. Validated with the
       dataviz palette checker against surfaces #2a2a2a and #3a3a3a:
       lightness band PASS, chroma floor PASS, colour-vision-deficiency
       separation dE 21.2 (deutan) / 20.4 (protan), normal-vision dE 31.4,
       contrast vs surface PASS - every check passes in both modes.
       Re-run before changing either value:
         node validate_palette.js "#ef4444,#3d99cf" --mode dark               --surface "#2a2a2a" --pairs all                                */
    --ah-chart-horde: #ef4444;
    --ah-chart-alliance: #3d99cf;

    --coin-gold: #ffd100;
    --coin-silver: #c9ccd1;
    --coin-copper: #eda55f;
}

.ah-muted { color: var(--text-muted); }

.ah-alert { margin-bottom: 16px; }

/* --- summary cards -------------------------------------------------------- */

.ah-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.ah-stat-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.ah-stat-faction {
    font-size: var(--fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.ah-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

.ah-stat-value {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
    word-break: break-word;
}

.ah-stat-label {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.ah-stat-foot {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* --- controls ------------------------------------------------------------- */

.ah-controls { padding-bottom: 12px; }

.ah-control-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.ah-control-row-foot {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    align-items: center;
    justify-content: space-between;
}

.ah-control { flex: 0 1 auto; }
.ah-control-search { flex: 1 1 280px; min-width: 220px; }
.ah-control select { min-width: 180px; }

.ah-quality-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ah-quality-chip {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.ah-quality-chip:hover { opacity: 0.85; }

.ah-quality-chip.on {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08);
}

.ah-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--text);
    font-size: var(--fs-base);
    cursor: pointer;
}

.ah-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    padding: 0;
    accent-color: var(--blue);
    cursor: pointer;
}

.ah-result-count {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* --- table ---------------------------------------------------------------- */

.ah-table { font-size: var(--fs-base); }

.ah-table th { white-space: nowrap; }

.ah-th-sortable {
    cursor: pointer;
    user-select: none;
}

.ah-th-sortable:hover { color: var(--text); }

.ah-sort-arrow {
    font-size: var(--fs-xs);
    margin-left: 4px;
    color: var(--blue);
}

.ah-table th.ah-horde,
.ah-table td.ah-horde { border-left: 1px solid var(--border); }

.ah-table th.ah-horde { color: var(--ah-horde); }
.ah-table th.ah-alliance { color: var(--ah-alliance); }

.ah-tr { cursor: pointer; }
.ah-tr:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

.ah-item-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ah-icon {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
}

.ah-icon-lg {
    width: 40px;
    height: 40px;
    vertical-align: middle;
    margin-right: 10px;
}

.ah-item-name { font-weight: 500; }

.ah-num { text-align: right; white-space: nowrap; }
.ah-price { white-space: nowrap; }

.ah-price-sub {
    display: flex;
    gap: 8px;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

.ah-seen { color: var(--text-muted); }

.ah-empty {
    text-align: center;
    padding: 40px 16px;
    color: var(--text-muted);
}

/* --- dead rows (qty === 0): price memory, NOT a price you can pay --------- */

.ah-row-dead .ah-money,
.ah-row-dead { color: var(--text-muted); }

.ah-money-dim {
    opacity: 0.45;
    font-style: italic;
}

.ah-tr-dead td { background: rgba(0, 0, 0, 0.18); }
.ah-tr-dead:hover td { background: var(--surface); }

.ah-not-listed {
    color: var(--gold);
    font-style: italic;
}

/* --- money ---------------------------------------------------------------- */

.ah-money {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ah-money-none { color: var(--text-muted); }

.ah-gold { color: var(--coin-gold); }
.ah-silver { color: var(--coin-silver); }
.ah-copper { color: var(--coin-copper); }

.ah-coin {
    font-size: var(--fs-xs);
    margin: 0 4px 0 1px;
}

.ah-coin-g { color: var(--coin-gold); }
.ah-coin-s { color: var(--coin-silver); }
.ah-coin-c { color: var(--coin-copper); }

/* --- pagination ----------------------------------------------------------- */

.ah-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 0 4px;
}

.ah-pager .btn { padding: 6px 14px; font-size: var(--fs-sm); }
.ah-pager .btn:disabled { opacity: 0.4; cursor: not-allowed; }

.ah-pager-label {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    padding: 0 8px;
}

/* --- detail panel --------------------------------------------------------- */

.ah-detail .card-title {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ah-detail-body {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 24px;
    margin-top: 16px;
}

.ah-tooltip {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.ah-tt-line {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.ah-tt-right { flex-shrink: 0; }

.ah-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 12px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.ah-detail-markets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.ah-detail-market {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
}

.ah-detail-faction {
    font-size: var(--fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.ah-detail-dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    margin: 0;
}

.ah-detail-dl dt {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.ah-detail-dl dd {
    margin: 0;
    font-size: var(--fs-base);
    color: var(--text);
}

/* --- chart ---------------------------------------------------------------- */

.ah-chart {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
}

.ah-chart-svg {
    width: 100%;
    height: auto;
    display: block;
}

.ah-chart-grid {
    stroke: var(--border);
    stroke-width: 1;
}

.ah-chart-axis {
    stroke: var(--border);
    stroke-width: 1;
}

.ah-chart-label {
    fill: var(--text-muted);
    font-size: var(--fs-xs);
    font-family: inherit;
}

.ah-chart-empty {
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 32px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-base);
}

.ah-chart-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 10px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.ah-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ah-legend-swatch {
    width: 14px;
    height: 3px;
    border-radius: 2px;
    display: inline-block;
}

.ah-legend-note {
    margin-left: auto;
    color: var(--text-muted);
}

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 1024px) {
    .ah-summary { grid-template-columns: 1fr; }
    /* minmax(0,...) not 1fr: a grid item defaults to a content-sized
       minimum, which lets the 560px chart strip push the page sideways
       instead of scrolling inside its own container. */
    .ah-detail-body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
    /* The row turns into a COLUMN here, which re-points flex-basis at the
       cross axis: .ah-control-search's "flex: 1 1 280px" then reserved 280px
       of HEIGHT and left an empty band under the search box at 390px. Reset
       the basis for the stacked layout. */
    .ah-control-row { flex-direction: column; align-items: stretch; }
    .ah-control-row > .ah-control,
    .ah-control-row > .ah-control-search { flex: 0 0 auto; min-width: 0; }
    .ah-control select { min-width: 0; width: 100%; }
    .ah-control-row-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
    .ah-detail-markets { grid-template-columns: 1fr; }
    .ah-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==================== 5-hub navigation (item B, 2026-08-27) ====================
   Five hubs in the header; each hub's tab list renders twice from one source
   (components/nav-config.ts): as a CSS-only hover/focus menu on desktop, and as
   the sticky sub-tab bar under the header on every page in that hub. No JS is
   involved in opening either one -- the only remaining nav script is the mobile
   hamburger. Colors and sizes are design tokens only; no new hex, no new px
   font size. */

.nav-hub {
    position: relative;
}

/* The row wrapper and chevron exist for the mobile accordion (2026-08-31).
   display:contents makes the wrapper vanish from desktop layout, so the hub
   link and hover menu behave exactly as if it were not there. */
.nav-hub-row {
    display: contents;
}

.nav-hub-toggle {
    display: none;
}

/* Mobile-only: inside the accordion, the first item is the hub landing
   itself ("Overview"), because on mobile the hub row toggles instead of
   navigating. Never shown in the desktop dropdown. Two classes so this
   beats the later single-class .nav-hub-item { display: block } rule. */
.nav-hub-item.nav-hub-overview {
    display: none;
}

.nav-link.hub-active {
    color: var(--gold);
    background: color-mix(in srgb, var(--gold) 16%, var(--bg));
    font-weight: 600;
}

.nav-hub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 190px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    margin-top: 6px;
    padding: 6px 0;
    z-index: 1001;
}

/* Opens on hover for a mouse and on focus-within for a keyboard. Desktop
   only: on mobile the menu is the accordion below, and a global focus-within
   rule here kept a hub pinned open after its chevron was tapped (the tapped
   button holds focus, so focus-within stayed true and the collapsed menu
   never actually hid). */
@media (min-width: 769px) {
    .nav-hub:hover > .nav-hub-menu,
    .nav-hub:focus-within > .nav-hub-menu {
        display: block;
    }

    /* The 6px margin-top below the hub link is a VISUAL gap, not a hoverable
       one: .nav-hub-row is display:contents, so the li hover box ends at the
       link. Moving the mouse straight down crossed dead pixels and the panel
       closed before it was reached. This invisible bridge extends the panel
       hit box up over that band (6px margin + ~2px subpixel rounding) so the
       gap still looks the same but hover never breaks. Desktop only. */
    .nav-hub-menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -8px;
        height: 8px;
    }
}

.nav-hub-item {
    display: block;
    padding: 9px 16px;
    color: var(--text);
    text-decoration: none;
    font-size: var(--fs-sm);
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s;
}

/* Section heading inside a hub menu (the Guild menu's "Tools" group). Same font
   size as the items it labels -- the rank is carried by the muted colour, the
   letter-spacing and the rule above it, not by a fourth font size. */
/* (.nav-hub-group retired 2026-08-31: the external tools moved out of the
   Guild menu into their own top-level Tools hub, so no menu has an inline
   group label anymore.) */

/* An in-page anchor must clear the fixed header AND the sticky sub-tab bar
   under it, or the heading it lands on is hidden behind them. */
.hub-section-title[id] {
    scroll-margin-top: calc(var(--header-h) + 60px);
}

.nav-hub-item:hover,
.nav-hub-item:focus {
    background: var(--surface);
    color: var(--gold);
}

.nav-hub-item.active {
    color: var(--gold);
    font-weight: 600;
}

/* Sticky sub-tab bar. body is padded by --header-h and the fixed header block
   is exactly --header-h tall, so a sticky top of --header-h equals the bar's
   resting position -- it pins with no jump on the first scroll pixel, and it
   sits flush under the decoration apron instead of 5px behind it. */
.subtabs {
    position: sticky;
    top: var(--header-h);
    z-index: 900;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}

.subtabs-inner {
    /* full width with the same 20px gutter as .container, so the first tab
       lines up with the page content underneath it */
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.subtabs-inner::-webkit-scrollbar {
    display: none;
}

.subtab {
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    font-size: var(--fs-sm);
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    transition: background-color 0.2s, color 0.2s;
}

.subtab:hover,
.subtab:focus {
    color: var(--text);
    background: var(--surface);
}

.subtab.active {
    color: var(--gold);
    background: color-mix(in srgb, var(--gold) 16%, var(--bg));
    font-weight: 600;
}

/* Hub landing pages (/guild, /members, /economy) */
.hub-title {
    font-size: var(--fs-2xl);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.hub-lead {
    font-size: var(--fs-base);
    color: var(--text-muted);
    max-width: var(--w-medium);
    margin-bottom: 24px;
}

.hub-section-title {
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--text);
    margin: 36px 0 8px;
}

.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}

.hub-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    text-decoration: none;
    transition: border-color 0.2s, background-color 0.2s;
}

.hub-card:hover,
.hub-card:focus {
    border-color: var(--gold);
    background: var(--surface);
}

.hub-card-title {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--gold);
}

.hub-card-external .hub-card-title {
    color: var(--blue);
}

.hub-card-desc {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* Footer link row: the hubs plus Discord, nothing else. */
.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    margin-top: 12px;
}

.site-footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--fs-sm);
}

.site-footer-links a:hover,
.site-footer-links a:focus {
    color: var(--gold);
}

@media (max-width: 768px) {
    /* 2026-08-31 mobile accordion: the open hamburger panel used to paint
       every hub's tabs expanded in place -- about 35 flat entries of
       visually similar hub labels and sub-items. Now the panel shows only
       the hub rows; a hub's tabs appear only while that hub carries
       the `open` class (toggled by the .nav-hub-toggle button in Nav.tsx,
       pre-set on the hub owning the current page). */
    .nav-hub-menu {
        display: none;
        position: static;
        min-width: 0;
        margin-top: 0;
        padding: 0 0 8px 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .nav-hub.open > .nav-hub-menu {
        display: block;
    }

    .nav-hub {
        width: 100%;
    }

    /* Row = hub label (flex-grow, keeps its tap target) + chevron toggle.
       The toggle is a real button, so keyboard focus and activation come
       free; it is display:none outside this media query. Rows are
       left-aligned: centered labels with a chevron on one side read as
       off-balance, and the eye needs a straight left edge to scan a menu. */
    .nav-hub-row {
        display: flex;
        align-items: center;
    }

    .nav-hub-toggle {
        display: block;
        flex: none;
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: var(--fs-sm);
        cursor: pointer;
        padding: 12px 16px;
        transition: transform 0.15s;
    }

    .nav-hub.open .nav-hub-toggle span {
        display: inline-block;
        transform: rotate(180deg);
    }

    /* The base .nav-link mobile rule sets width/text-align, but an <a> is
       inline, so neither applies until it is a block. */
    .nav-hub-row > .nav-link {
        display: block;
        flex: 1;
        text-align: left;
        font-weight: 600;
        padding: 12px 16px;
        border-radius: 6px;
    }

    /* Sub-items are visually subordinate to the hub row: smaller, muted,
       left-aligned on a real indent (one stop past the hub label), with a
       thin rail connecting them to their hub. */
    .nav-hub.open > .nav-hub-menu {
        border-left: 2px solid var(--border);
        margin: 0 16px 4px 24px;
    }

    .nav-hub-item {
        text-align: left;
        padding: 8px 16px;
        font-size: var(--fs-sm);
        color: var(--text-muted);
    }

    /* The hub landing, first item in the expanded list. Slightly stronger
       than the other sub-items: it is the page the hub row used to open. */
    .nav-hub.open > .nav-hub-menu > .nav-hub-overview {
        display: block;
        color: var(--text);
        font-weight: 600;
    }

    /* Every hub's tab list is wider than a 390px viewport (Members 920px,
       Economy 793px), so the strip always scrolls here. It already had
       overflow-x:auto, but a hard cut at the right edge reads as a truncated
       list rather than a scrollable one, so fade the edge to announce that it
       continues. .subtabs is position:sticky, which is a positioned element,
       so the pseudo-element anchors to it without changing the sticky
       behaviour. The extra right padding lets the last tab scroll clear of
       the fade instead of ending underneath it. */
    .subtabs-inner {
        padding: 8px 40px 8px 12px;
        justify-content: flex-start;
        scroll-padding-right: 40px;
        overscroll-behavior-x: contain;
    }

    .subtabs::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 36px;
        pointer-events: none;
        background: linear-gradient(to left, var(--bg-elevated), transparent);
    }

    .hub-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Professions / crafter directory (UX cleanup, item G, 2026-08-27)
   Members > Professions  (islands/ProfessionsDirectory.tsx)
   Admin > Crafters       (islands/CraftersAdmin.tsx)

   Two type sizes only (--fs-base body, --fs-sm meta); every other
   step in the hierarchy is weight or colour. No raw colours: the
   palette tokens and color-mix() of them, same as item A.
   ============================================================ */

.prof-directory {
    margin-bottom: 40px;
}

/* Sticky search (2026-09-13). Once the profession panels open, the page is
   ~1,300 rows deep and a search box that scrolls away is a search box you have
   to scroll back to. top: var(--header-h) is the same rule .subtabs uses -- the
   fixed nav block is exactly --header-h tall, so the bar pins at its own
   resting position with no jump on the first scroll pixel. The negative side
   margins bleed the background over .container's 20px gutter so rows cannot
   peek past the bar's edges as they scroll under it. */
.prof-toolbar {
    position: sticky;
    /* BELOW the sub-nav, not behind it. top: var(--header-h) put this bar at
       exactly the same y as .subtabs, which is sticky at the same top with
       z-index 900 - so past ~410px of scroll the search box was completely
       covered by the sub-nav and elementFromPoint at its centre returned a
       sub-nav link. Fighting that with z-index would have hidden the sub-nav
       instead; both bars have to stay visible, stacked. */
    top: calc(var(--header-h) + var(--subtabs-h));
    z-index: 500;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 -20px 20px;
    padding: 10px 20px 12px;
    background: linear-gradient(
        180deg,
        var(--bg) 0%,
        var(--bg) 88%,
        transparent 100%
    );
}

.prof-search {
    flex: 1 1 260px;
    max-width: var(--w-narrow);
    padding: 9px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: var(--fs-base);
    font-family: inherit;
}

.prof-search::placeholder {
    color: var(--text-muted);
}

.prof-search:focus {
    outline: none;
    border-color: var(--gold);
}

.prof-note {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.prof-note-bad {
    color: var(--red-dim);
}

.prof-empty {
    font-size: var(--fs-base);
    color: var(--text);
    background: color-mix(in srgb, var(--gold) 10%, var(--bg-elevated));
    border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--border));
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 22px;
}

.prof-group {
    margin-bottom: 28px;
}

.prof-group-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    font-size: var(--fs-base);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold);
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.prof-rows {
    display: flex;
    flex-direction: column;
}

/* THE COLUMN-ALIGNMENT FIX (2026-09-13).
   Every .prof-row is its OWN grid container (.prof-rows is a flex column), so
   track widths are resolved per row, not once for the table. The last two
   tracks were `auto auto`, which sizes to CONTENT: a row with a "Request" link
   and a "Recipe skill ~300" spent ~200px on tracks 3 and 4, while a row with
   neither spent 0 -- and the freed width went to the two fr tracks, pushing
   the crafter column right on exactly the rows that had no shop badge. That is
   why "No crafter yet" was indented on some rows and flush on others.
   Fixed widths on the last two tracks make the fr maths identical on every
   row, so column 2 starts at the same x down the whole table. The island also
   always emits a fourth child (an empty .prof-action-empty on non-shop rows),
   so a missing child can never collapse a track again. */
.prof-row {
    display: grid;
    grid-template-columns: minmax(150px, 1.1fr) minmax(140px, 1.6fr) 132px 92px;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, var(--bg));
    font-size: var(--fs-base);
}

/* Column 2 is flush-left on every row, badge or no badge. */
.prof-crafters,
.prof-namecell {
    justify-self: start;
    text-align: left;
}

/* THE SECOND LINE OF A ROW: what the crafted item is and what it does, in the
   game database's own words (lib/item-detail.ts, resolved server-side).
   It spans every track, so a long Use effect wraps under the WHOLE row rather
   than stretching the name column and pushing the crafter list right. The
   left indent lines it up with the recipe name, past the 20px icon and its
   8px gap. */
.prof-detail {
    grid-column: 1 / -1;
    margin: 1px 0 0 28px;
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--text-muted);
    overflow-wrap: anywhere;
    min-width: 0;
}

/* Placeholder for the action cell on rows with no Request link. It holds the
   track open so the grid maths matches a shop row exactly. */
.prof-action-empty {
    display: block;
    min-width: 0;
}

.prof-row:last-child {
    border-bottom: none;
}

.prof-row:hover {
    background: var(--bg-elevated);
}

.prof-recipe {
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
}

.prof-recipe:hover {
    color: var(--gold-soft);
}

.prof-crafters {
    color: var(--text);
    min-width: 0;
    overflow-wrap: anywhere;
}

.prof-none {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    font-style: italic;
}

.prof-sep {
    color: var(--text-muted);
}

/* Name and its In-guild-shop badge share the first .prof-row grid cell
   (2026-09-01): the badge as a fifth grid track stretched the whole row. */
.prof-namecell {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.prof-shop-badge {
    flex: 0 0 auto;
    padding: 2px 8px;
    white-space: nowrap;
}

/* Mini item icon beside the recipe name (2026-09-02). 20px, quality-coloured
   border, same visual language as the EPGP item cells (islands/EPGPTabs.tsx).
   Border color is set inline from the resolved item quality. */
.prof-icon {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    flex: 0 0 auto;
    object-fit: cover;
    vertical-align: middle;
    background: var(--bg);
}

/* Spell-only rows (profession specializations, gathering actives) have no
   craftable output, so they get no link, no icon and no tooltip affordance:
   muted text plus a small neutral badge instead. */
.prof-spell {
    color: var(--text-muted);
    font-weight: 400;
}

.prof-spell-badge {
    flex: 0 0 auto;
    padding: 1px 6px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 4px;
    white-space: nowrap;
}

.prof-skill {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    white-space: nowrap;
    text-align: right;
}

.prof-request {
    justify-self: end;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
    white-space: nowrap;
    padding: 4px 12px;
    border: 1px solid color-mix(in srgb, var(--blue) 45%, var(--border));
    border-radius: 6px;
}

.prof-request:hover {
    background: var(--blue-bg);
    color: var(--blue-soft);
}

/* --- Collapsible profession panels + per-panel filters (2026-09-13) ---
   Every panel is CLOSED on arrival and opens on click. The render cap this
   replaced ("showing 30 of 213 - search to narrow") made the other 183 rows
   unreachable; a closed panel hides rows that are one click away, which is not
   the same thing. Tokens only, no new colours: gold for the heading, blue for
   the affordance, the six WoW quality colours (utils/quality.ts) inline on the
   rarity chips. */

.prof-group-toggle {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
    padding: 6px 8px;
    margin: 0 -8px;
    background: none;
    border: none;
    border-radius: 6px;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.prof-group-toggle:hover,
.prof-group-toggle:focus-visible {
    background: color-mix(in srgb, var(--gold) 10%, transparent);
    outline: none;
}

.prof-group-name {
    color: var(--gold);
}

/* The explicit click-to-expand affordance. Always visible, not hover-only:
   a control you have to hover to discover is a control most readers never
   find. */
.prof-group-hint {
    margin-left: auto;
    font-size: var(--fs-xs);
    font-weight: 400;
    letter-spacing: 0.5px;
    color: var(--blue);
    padding: 3px 10px;
    background: color-mix(in srgb, var(--blue) 8%, transparent);
    border: 1px dashed color-mix(in srgb, var(--blue) 35%, transparent);
    border-radius: 12px;
    white-space: nowrap;
}

.prof-group-toggle:hover .prof-group-hint {
    background: color-mix(in srgb, var(--blue) 18%, transparent);
    border-color: color-mix(in srgb, var(--blue) 60%, transparent);
}

/* The body. Animated open so the jump from a header to 200 rows is readable
   rather than instantaneous. max-height is generous on purpose: a profession
   can be 250 rows, and a cap that is too small would clip the list. */
.prof-panel {
    animation: profPanelOpen 0.18s ease-out both;
    overflow: hidden;
}

@keyframes profPanelOpen {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.prof-panel-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0 12px;
}

.prof-panel-search {
    flex: 1 1 240px;
    max-width: 340px;
    padding: 7px 11px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: var(--fs-sm);
    font-family: inherit;
}

.prof-panel-search::placeholder {
    color: var(--text-muted);
}

.prof-panel-search:focus {
    outline: none;
    border-color: var(--gold);
}

.prof-rarity {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Chip colour IS the quality colour, set inline from QUALITY_COLORS, so the
   control reads the way item names read everywhere else on the site. */
.prof-rarity-chip {
    padding: 3px 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: var(--fs-xs);
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.3px;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.15s, background 0.15s;
}

.prof-rarity-chip:hover {
    opacity: 1;
}

.prof-rarity-chip[data-on="true"] {
    opacity: 1;
    background: color-mix(in srgb, currentColor 16%, transparent);
}

.prof-rarity-clear {
    padding: 3px 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-family: inherit;
    cursor: pointer;
}

.prof-rarity-clear:hover {
    color: var(--text);
    border-color: var(--text-muted);
}

.prof-panel-count {
    margin-left: auto;
    white-space: nowrap;
}

.prof-panel-empty {
    padding: 10px 0 14px;
}

/* --- My Professions, collapsed by default (2026-09-13) ------------------ */

.myprof {
    margin-bottom: 32px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-elevated) 55%, transparent);
}

.myprof-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: none;
    border-radius: 10px;
    color: var(--text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.myprof-head:hover,
.myprof-head:focus-visible {
    background: color-mix(in srgb, var(--gold) 8%, transparent);
    outline: none;
}

.myprof-headtext {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.myprof-title {
    font-size: var(--fs-base);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold);
}

/* The subtitle is the whole point of the header: a reader who has never
   opened this panel has to be told what ticking boxes in it does. */
.myprof-sub {
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--text-muted);
}

.myprof-hint {
    margin-left: auto;
    font-size: var(--fs-xs);
    letter-spacing: 0.5px;
    color: var(--blue);
    padding: 4px 12px;
    background: color-mix(in srgb, var(--blue) 8%, transparent);
    border: 1px dashed color-mix(in srgb, var(--blue) 35%, transparent);
    border-radius: 12px;
    white-space: nowrap;
}

.myprof-head:hover .myprof-hint {
    background: color-mix(in srgb, var(--blue) 18%, transparent);
    border-color: color-mix(in srgb, var(--blue) 60%, transparent);
}

.myprof-body {
    padding: 0 16px 16px;
    border-top: 1px solid var(--border);
    animation: profPanelOpen 0.18s ease-out both;
}

.myprof-body > .crafters-admin {
    padding-top: 14px;
}

/* The picker's shop tag. .crafters-tag was referenced by MyProfessions and
   CraftersAdmin but never had a rule, so the old "shop list" text rendered as
   bare body copy with no affordance at all. It is a real badge now, in the
   same green the directory's "In guild shop" badge uses. */
.crafters-tag,
.crafters-tag-shop {
    flex: 0 0 auto;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    color: var(--green);
    background: color-mix(in srgb, var(--green) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 45%, var(--border));
}

@media (max-width: 700px) {
    .prof-group-hint,
    .myprof-hint {
        margin-left: 0;
    }

    .prof-panel-count {
        margin-left: 0;
    }
}

/* loading placeholder -- reuses the existing @keyframes shimmer */
.prof-skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-elevated) 25%,
        var(--surface) 50%,
        var(--bg-elevated) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 6px;
}

.prof-skeleton-title {
    height: 18px;
    width: 160px;
    margin-bottom: 14px;
}

.prof-skeleton-row {
    height: 30px;
    margin-bottom: 8px;
}

@media (max-width: 700px) {
    .prof-row {
        grid-template-columns: 1fr auto;
        row-gap: 6px;
    }

    .prof-crafters {
        grid-column: 1 / -1;
    }

    /* 390px has no room to give 28px away to an indent. */
    .prof-detail {
        margin-left: 0;
    }

    .prof-skill {
        text-align: left;
    }
}

/* --- Admin > Crafters ------------------------------------- */

.crafters-admin {
    font-size: var(--fs-base);
    color: var(--text);
}

.crafters-note {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-bottom: 14px;
}

.crafters-note-bad {
    color: var(--red-dim);
}

.crafters-status {
    color: var(--green);
    margin-top: 14px;
}

.crafters-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    align-items: start;
}

.crafters-panel {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
}

.crafters-panel-title {
    font-size: var(--fs-base);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}

.crafters-listed-title {
    margin-top: 28px;
}

.crafters-input {
    width: 100%;
    padding: 8px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: var(--fs-base);
    font-family: inherit;
    margin-bottom: 10px;
}

.crafters-input:focus {
    outline: none;
    border-color: var(--gold);
}

.crafters-member-list,
.crafters-recipe-list {
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.crafters-member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 6px 9px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text);
    font-size: var(--fs-base);
    font-family: inherit;
    cursor: pointer;
}

.crafters-member:hover {
    background: var(--surface);
}

.crafters-member[data-active="true"] {
    background: var(--blue-bg);
    border-color: var(--blue);
}

.crafters-pill {
    font-size: var(--fs-sm);
    color: var(--gold);
    background: color-mix(in srgb, var(--gold) 14%, var(--bg));
    border-radius: 999px;
    padding: 1px 9px;
    white-space: nowrap;
}

.crafters-prof-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.crafters-prof {
    padding: 6px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: var(--fs-base);
    font-family: inherit;
    cursor: pointer;
}

.crafters-prof:hover {
    color: var(--text);
}

.crafters-prof[data-active="true"] {
    background: var(--blue-bg);
    border-color: var(--blue);
    color: var(--text);
    font-weight: 600;
}

.crafters-recipe {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
}

.crafters-recipe:hover {
    background: var(--surface);
}

/* Same site-wide input-width-100% bug as .raid-ping-toggle above: the
   bare checkbox in a catalog-scale recipe row was computing a ~290px width
   inside the flex row, leaving the flex:1 name span nothing to grow into and
   wrapping every recipe name into a one-word-per-line column. Pin the
   checkbox to its own size, same fix as line ~1440. */
.crafters-recipe input[type="checkbox"] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    min-width: 0;
    margin: 0;
    padding: 0;
    accent-color: var(--gold);
    cursor: pointer;
}

.crafters-recipe span:first-of-type {
    flex: 1;
    min-width: 0;
}

.crafters-skill {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.crafters-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.crafters-btn {
    padding: 7px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: var(--fs-base);
    font-family: inherit;
    cursor: pointer;
}

.crafters-btn:hover:not(:disabled) {
    border-color: var(--gold);
}

.crafters-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.crafters-btn-primary {
    background: var(--blue-deep);
    border-color: var(--blue);
    font-weight: 600;
}

.crafters-listed {
    display: flex;
    flex-direction: column;
}

.crafters-listed-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 4px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, var(--bg));
}

.crafters-listed-row .crafters-note {
    margin-bottom: 0;
}

/* Item G: /members/professions deep-links here as /consumes#<shopItemId>.
   This flashes the item the reader asked for so it is findable in a grid. */
.item-card-targeted {
    border: 2px solid var(--gold) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent);
}

/* ==================== Auction House: scope toggle + price chart (item H) ====
   The scope toggle replaces the old "N price-memory items hidden" checkbox with
   two named, counted states. The chart block adds the crosshair tooltip, the
   quantity panel's legend keys and the data-table twin.
   Tokens only - no new hex, no new font size. */

.ah-scope {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
}

.ah-scope-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    padding: 7px 16px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.ah-scope-btn + .ah-scope-btn { border-left: 1px solid var(--border); }

.ah-scope-btn:hover { color: var(--text); }

.ah-scope-btn.on {
    background: var(--blue-bg);
    color: var(--text);
}

.ah-scope-count {
    font-size: var(--fs-sm);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.ah-scope-btn.on .ah-scope-count { color: var(--blue); }

/* Refetching holds the previous rows instead of flashing a skeleton. */
.ah-refreshing {
    opacity: 0.55;
    transition: opacity 0.12s ease;
}

/* --- chart: crosshair, cursor dots, tooltip ------------------------------- */

.ah-chart-plot { position: relative; }

.ah-chart-svg:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.ah-chart-hair {
    stroke: var(--text-muted);
    stroke-width: 1;
}

/* The 2px ring is the surface colour, so a dot stays legible where it crosses
   the other faction's line. */
.ah-chart-dot {
    paint-order: stroke;
    stroke: var(--surface);
    stroke-width: 2;
}

.ah-chart-tip {
    position: absolute;
    top: 4px;
    transform: translateX(12px);
    min-width: 220px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: var(--fs-sm);
    pointer-events: none;
    z-index: 2;
}

.ah-chart-tip-flip { transform: translateX(calc(-100% - 12px)); }

.ah-tip-date {
    color: var(--text-muted);
    margin-bottom: 6px;
}

.ah-tip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.9;
}

.ah-tip-key {
    width: 12px;
    height: 2px;
    border-radius: 1px;
    flex: 0 0 auto;
}

.ah-tip-name {
    color: var(--text-muted);
    flex: 0 0 58px;
}

.ah-tip-vals {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

/* A money value is several spans (8g 99s); without this the row wraps
   between the gold and the silver and reads as two numbers. */
.ah-tip-vals b {
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
}

.ah-tip-unit {
    color: var(--text-muted);
    margin-right: 6px;
}

.ah-tip-vals .ah-tip-unit:last-child { margin-right: 0; }

/* --- chart: legend keys + data table -------------------------------------- */

.ah-legend-group {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

/* A line key, not a filled box: the marks it names are lines, and the dashed
   variant is the only thing separating "avg" from "min" in the same hue. */
.ah-legend-key {
    width: 18px;
    height: 0;
    border-top: 2px solid var(--text-muted);
    display: inline-block;
}

.ah-legend-key-avg { border-top-style: dashed; }

.ah-chart-table {
    margin-top: 12px;
    font-size: var(--fs-sm);
}

.ah-chart-table > summary {
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px 0;
}

.ah-chart-table > summary:hover { color: var(--text); }

.ah-chart-table .table-container {
    max-height: 320px;
    overflow: auto;
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.ah-hist-table { font-size: var(--fs-sm); }
.ah-hist-table th, .ah-hist-table td { white-space: nowrap; }

/* Desktop shows the crosshair tooltip; the static twin is phone-only. */
.ah-chart-scroll { overflow-x: auto; max-width: 100%; }
.ah-chart { min-width: 0; }
.ah-chart-tip-static { display: none; }

@media (max-width: 768px) {
    .ah-scope { width: 100%; }
    .ah-scope-btn { flex: 1 1 50%; justify-content: center; }

    /* 560px is the width below which the axis labels stop being readable, so
       the plot holds that and the strip scrolls rather than shrinking. */
    .ah-chart-plot { min-width: 560px; }

    .ah-chart-plot .ah-chart-tip { display: none; }

    .ah-chart-tip-static {
        display: block;
        position: static;
        transform: none;
        width: 100%;
        min-width: 0;
        margin-top: 10px;
    }
}

/* ==========================================================================
   Item F (2026-08-27): officer raid tools -- /raids/officer.
   Two font sizes only (--fs-base, --fs-sm); every colour is an item A token
   or a color-mix() of one. Everything below is prefixed .rot- and used by
   islands/RaidOfficerTools.tsx alone.
   ========================================================================== */

.rot {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.rot-note {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin: 0 0 8px;
}

.rot-note-bad {
    color: var(--red-dim);
}

.rot-label {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    font-weight: 600;
    margin: 0 0 6px;
    display: block;
}

.rot-pickrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.rot-pickrow .rot-label,
.rot-pickrow .rot-note {
    margin: 0;
}

.rot-select,
.rot-input {
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: var(--fs-base);
    font-family: inherit;
    min-width: 140px;
}

.rot-select-wide {
    min-width: 260px;
    max-width: 100%;
}

.rot-input-note {
    min-width: 160px;
    flex: 1 1 160px;
}

.rot-select:focus,
.rot-input:focus {
    outline: none;
    border-color: var(--gold);
}

/* --- tool tabs ---------------------------------------------------------- */

.rot-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}

.rot-tab {
    background: var(--bg-elevated);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 14px;
    font-size: var(--fs-base);
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rot-tab:hover {
    border-color: var(--gold);
}

.rot-tab.active {
    background: var(--surface);
    color: var(--gold);
    border-color: var(--gold);
    font-weight: 600;
}

/* An unsaved-edits marker on the tab, so switching tabs never hides one. */
.rot-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    display: inline-block;
}

/* --- panels and rows ---------------------------------------------------- */

.rot-panel {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
}

.rot-list {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
}

.rot-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 4px;
    font-size: var(--fs-base);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, var(--bg));
}

.rot-row-tight {
    padding: 6px 4px;
}

.rot-rowname {
    font-weight: 600;
    color: var(--text);
    min-width: 120px;
}

.rot-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* --- buttons ------------------------------------------------------------ */

.rot-btn {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 7px 12px;
    font-size: var(--fs-base);
    font-family: inherit;
    cursor: pointer;
}

.rot-btn:hover:not(:disabled) {
    border-color: var(--gold);
}

.rot-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.rot-btn-sm {
    padding: 5px 10px;
    font-size: var(--fs-sm);
}

.rot-btn.active {
    background: var(--blue-deep);
    border-color: var(--blue);
    color: var(--text);
    font-weight: 600;
}

.rot-btn-primary {
    background: var(--blue-deep);
    border-color: var(--blue);
    font-weight: 600;
}

.rot-savebar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.rot-status {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* --- boss list ---------------------------------------------------------- */

.rot-state {
    font-size: var(--fs-sm);
    border-radius: 999px;
    padding: 3px 10px;
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.rot-state-killed {
    color: var(--green);
    border-color: var(--green);
    background: var(--green-bg);
}

.rot-state-wiped {
    color: var(--red-dim);
    border-color: var(--red);
    background: color-mix(in srgb, var(--red) 16%, var(--bg));
}

.rot-state-skipped {
    color: var(--gold-dim);
    border-color: var(--gold-dim);
}

.rot-pulls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rot-pullcount {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    min-width: 60px;
    text-align: center;
}

/* --- assignments -------------------------------------------------------- */

.rot-assign {
    padding: 12px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, var(--bg));
}

.rot-assign-boss {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--gold);
    margin: 0 0 8px;
}

.rot-assign-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 5px 0;
    flex-wrap: wrap;
}

.rot-assign-row .rot-label {
    min-width: 90px;
    margin: 6px 0 0;
}

.rot-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 240px;
}

.rot-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 6px 4px 12px;
    font-size: var(--fs-sm);
    color: var(--text);
}

.rot-chip-x {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-family: inherit;
    cursor: pointer;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 50%;
}

.rot-chip-x:hover {
    color: var(--red-dim);
}

/* --- group setup -------------------------------------------------------- */

.rot-two {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 20px;
    margin-top: 12px;
}

.rot-count {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 10px;
}

.rot-count-met {
    color: var(--green);
    border-color: var(--green);
    background: var(--green-bg);
}

.rot-seats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 6px;
    margin-top: 12px;
}

.rot-seat {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg);
    border: 1px dashed var(--border);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: var(--fs-sm);
    min-height: 42px;
}

.rot-seat.filled {
    border-style: solid;
    border-color: var(--blue);
    background: var(--blue-bg);
}

.rot-seat .rot-rowname {
    min-width: 0;
    flex: 1 1 auto;
    font-size: var(--fs-sm);
}

.rot-seat .rot-select {
    min-width: 92px;
    padding: 3px 6px;
    font-size: var(--fs-sm);
}

.rot-seat-no {
    color: var(--text-muted);
    min-width: 20px;
    text-align: right;
}

@media (max-width: 768px) {
    .rot-two {
        grid-template-columns: minmax(0, 1fr);
    }

    .rot-select-wide {
        min-width: 0;
        width: 100%;
    }

    .rot-rowname {
        min-width: 0;
    }

    .rot-seats {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Item F follow-up after looking at the rendered page (2026-08-27):
   1. an unbounded select/input stretched to the full 1280px container, which
      made a 12-character player picker look like a search bar;
   2. the group seat clipped every name longer than about eight characters
      (Chaosweaver rendered as Chaoswe). The seat now wraps: name and the
      remove button on the first line, the role picker on its own line, so a
      long name is never cut. */

.rot-select {
    max-width: var(--w-tight);
}

.rot-select-wide {
    max-width: var(--w-medium);
}

.rot-input {
    max-width: var(--w-tight);
}

.rot-chips .rot-select {
    flex: 0 0 auto;
}

.rot-seats {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.rot-seat {
    flex-wrap: wrap;
    align-items: center;
}

.rot-seat .rot-rowname {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rot-seat .rot-chip-x {
    margin-left: auto;
}

.rot-seat .rot-select {
    flex: 1 0 100%;
    max-width: 100%;
}

/* ---- Crafter Queue: recipe focus banner (item G, 2026-08-27)
   Set when the Professions directory sends a reader here with ?recipe=<key>.
   Two type sizes, both already in the scale. ---- */

.queue-recipe-focus {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid var(--gold-dim);
    border-radius: 8px;
    background: color-mix(in srgb, var(--gold) 10%, var(--bg-elevated));
    font-size: var(--fs-sm);
}

.queue-recipe-focus-label {
    color: var(--text-muted);
}

.queue-recipe-focus-name {
    color: var(--gold);
}

.queue-recipe-focus-count {
    color: var(--text-muted);
}

.queue-recipe-focus-order,
.queue-recipe-focus-clear {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font-size: var(--fs-sm);
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
}

.queue-recipe-focus-order {
    border-color: var(--gold);
    color: var(--gold);
}

.queue-recipe-focus-clear {
    margin-left: auto;
}

.queue-recipe-focus-order:hover,
.queue-recipe-focus-clear:hover {
    border-color: var(--gold);
    color: var(--gold);
}


.queue-recipe-focus-hint {
    color: var(--text-muted);
}

.queue-recipe-focus-hint a {
    color: var(--gold);
}

/* "About this profession": one line under a panel header, drawn only for the
   professions islands/ProfessionsDirectory.tsx PROFESSION_BLURBS has an entry
   for (the custom Turtle WoW skill lines, 2026-09-17). It sits between the
   header and the panel body, reads at the muted note size, and is capped in
   width so a four-line paragraph cannot push the first row off the fold. */
/* The gardening rows' second column: what a planted seed yields, where every
   other row lists its crafters. Same left edge as .prof-crafters. */
.prof-harvest {
    display: inline;
    color: var(--text);
    overflow-wrap: anywhere;
}

.prof-harvest-arrow {
    color: var(--text-muted);
    margin-right: 6px;
}

.prof-harvest-item {
    white-space: normal;
}

/* A crop icon sits inline in a sentence rather than at the head of a row, so
   it is a touch smaller than .prof-icon and keeps a gap from its name. */
.prof-icon-mini {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

/* The harvest range next to a crop name. Its own class, not .prof-note, so it
   can own the gap that separates it from the name without a {" "} literal. */
.prof-harvest-yield {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}