/* =============================================
   Oakheart Staff Portal — MC Aesthetic
   ============================================= */

@font-face {
    font-family: 'Minecraft';
    src: url('/assets/fonts/minecraft.woff2?v=3') format('woff2');
    font-display: swap;
}

:root {
    --p-bg: #1c1c1e;
    --p-sidebar: #161618;
    --p-card: #2c2c30;
    --p-card-hover: #353538;
    --p-border: #3a3a40;
    --p-text: #f2ebd7;
    --p-text-secondary: #b8ad9a;
    --p-text-muted: #7a7064;
    --p-accent: #8FAA87;
    --p-accent-hover: #a3c09a;
    --p-danger: #C27B6B;
    --p-danger-hover: #d4897a;
    --p-yellow: #FCD472;

    /* Aliases — renames that grew organically across the file without the
     * underlying var ever being defined. Adding them here so all 27+ stale
     * call sites resolve correctly. Prefer the canonical name on the right
     * for new code. */
    --p-muted: var(--p-text-muted);          /* canonical: --p-text-muted */
    --p-surface: var(--p-card-hover);        /* hover-background contexts */
    --p-bg-elevated: var(--p-card);          /* raised card backgrounds */
    --p-bg-hover: var(--p-card-hover);
    --p-hover-bg: var(--p-card-hover);       /* both spellings appear in places */
    --p-border-hover: var(--border-light);

    /* MC tokens (matching main site) */
    --bg-section: #222224;
    --bg-slot: #373737;
    --bg-slot-hover: #484850;
    --border-mc: #1a1a1c;
    --border-light: #4a4a50;
    --border-highlight: #5a5a62;
    --forest-oak: #6B7A5E;
    --forest-oak-dark: #556649;
    --garden-green: #8FAA87;
    --cream: #f2ebd7;
    --transition: 0.3s ease;

    /* Height of the sidebar user card / editor bottom bar (kept in sync) */
    --bottom-bar-height: 69px;
    /* Height of the sidebar "◆ Portal" logo box / perm-editor top bar (kept in
       sync, same idea as --bottom-bar-height). The logo box's bottom border ends
       up at: sidebar top(8px) + sidebar padding-top(20px) + this. */
    --top-bar-height: 44px;
}

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

:focus-visible {
    outline: 2px solid var(--garden-green);
    outline-offset: 2px;
}

body {
    font-family: 'Inter', -apple-system, sans-serif;
    background: var(--p-bg);
    color: var(--p-text);
    min-height: 100vh;
}

/* Global dark scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--bg-slot-hover) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-slot-hover); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* =============================================
   Dirt Border
   ============================================= */

.dirt-border {
    height: 8px;
    background: repeating-linear-gradient(
        90deg,
        #6b5d4a 0px, #6b5d4a 4px,
        #5c4f3d 4px, #5c4f3d 8px,
        #7a6b56 8px, #7a6b56 12px,
        #594937 12px, #594937 16px
    );
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    image-rendering: pixelated;
}

/* =============================================
   SPA Progress Bar
   ============================================= */

.portal-progress {
    position: fixed;
    top: 8px;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 1001;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.portal-progress.active {
    opacity: 1;
}

.portal-progress.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--p-accent);
    box-shadow: 0 0 6px rgba(143, 170, 135, 0.4);
    animation: portal-fill 8s cubic-bezier(0.1, 0.4, 0.2, 1) forwards;
}

.portal-progress.done::after {
    width: 100% !important;
    animation: none;
    transition: opacity 0.3s ease;
}

.portal-progress.done {
    opacity: 0;
}

@keyframes portal-fill {
    0%   { width: 0; }
    20%  { width: 40%; }
    50%  { width: 65%; }
    80%  { width: 85%; }
    100% { width: 95%; }
}

/* =============================================
   MC Panel
   ============================================= */

.mc-panel {
    background: var(--p-card);
    border: 3px solid var(--border-light);
    border-top-color: var(--border-highlight);
    border-left-color: var(--border-highlight);
    border-bottom-color: var(--border-mc);
    border-right-color: var(--border-mc);
}

/* =============================================
   Headings
   ============================================= */

.portal-header h1,
.portal-section-header h2,
.login-title {
    text-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}

/* ---- Login Page ---- */

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 40% 40%, rgba(107, 122, 94, 0.08) 0%, transparent 50%),
        var(--p-bg);
}

.login-box {
    text-align: center;
    padding: 48px 40px;
    max-width: 400px;
    width: 100%;
}

.login-logo {
    font-family: 'Silkscreen', monospace;
    font-size: 1.6rem;
    color: var(--p-accent);
    margin-bottom: 24px;
}

.login-logo .logo-icon {
    color: var(--p-accent);
}

.login-title {
    font-family: 'Silkscreen', monospace;
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.login-desc {
    color: var(--p-text-secondary);
    margin-bottom: 32px;
    font-size: 0.9rem;
}

.login-error {
    margin: 0 0 24px;
    padding: 10px 14px;
    border: 2px solid #C27B6B;
    border-radius: 4px;
    background: rgba(194, 123, 107, 0.12);
    color: #C27B6B;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* --- Public wiki contributor shell (layout-wiki.html) --- */
/* The editor is a fixed-height app: the body fills the viewport as a flex
   column (topbar + editor), the editor area scrolls internally, and the
   bottom action bar stays pinned. Mirrors the staff portal's
   .portal-main:has(.editor-page) behavior, minus the sidebar. */
body.wiki-contributor {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.wiki-contributor-topbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--p-border);
    background: var(--p-bg-alt, var(--p-bg));
}
.wiki-contributor-user {
    display: flex;
    align-items: center;
    gap: 12px;
}
.wiki-contributor-tag {
    color: var(--p-text-secondary);
    font-size: 0.82rem;
}
.wiki-contributor-tag strong { color: var(--p-text); }
.wiki-contributor-main.portal-main {
    flex: 1;
    min-height: 0;
    margin-left: 0;   /* no staff sidebar — reclaim the 220px gap */
    padding: 0;
    overflow: hidden;
}
/* Outrank .portal-main:has(.editor-page){height:100vh} — flex sizes the main
   below the topbar, so 100vh here would overflow and reintroduce page scroll. */
.wiki-contributor-main.portal-main:has(.editor-page) {
    height: auto;
}
.wiki-contributor-main > .portal-content {
    height: 100%;
}

@media (max-width: 768px) {
    /* On phones the editor lays out at natural height (see the editor's own
       mobile rules), so let the whole page scroll instead of clipping. */
    body.wiki-contributor {
        height: auto;
        overflow: auto;
    }
    .wiki-contributor-main.portal-main {
        overflow: visible;
    }
}

/* --- Wiki submissions review panel --- */
.portal-header-actions { display: flex; align-items: center; gap: 10px; }
.wiki-submissions-link { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.wiki-submissions-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--p-danger); color: #fff;
    font-size: 0.7rem; font-weight: 600; line-height: 1;
}
.sub-intro { color: var(--p-text-secondary); font-size: 0.88rem; margin: 0 0 18px; max-width: 70ch; }
.sub-list { display: flex; flex-direction: column; gap: 16px; }
.sub-empty { color: var(--p-text-muted); padding: 32px; text-align: center; border: 1px dashed var(--p-border); border-radius: 6px; }
.sub-card { border: 1px solid var(--p-border); border-radius: 6px; overflow: hidden; background: var(--p-bg-alt, var(--p-bg)); }
.sub-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--p-border); }
.sub-badge { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 7px; border-radius: 4px; }
.sub-badge-new { background: rgba(143,170,135,0.18); color: var(--p-accent); }
.sub-badge-edit { background: rgba(137,181,201,0.18); color: #89B5C9; }
.sub-path { font-family: 'JetBrains Mono', 'Consolas', monospace; font-size: 0.82rem; color: var(--p-text); }
.sub-meta { color: var(--p-text-muted); font-size: 0.78rem; margin-left: auto; }
.sub-username { opacity: 0.7; }
.sub-note { padding: 10px 14px; border-bottom: 1px solid var(--p-border); color: var(--p-text-secondary); font-size: 0.85rem; font-style: italic; }

/* --- Integrations & Access (settings page) --- */
.settings-subhead {
    font-family: 'Silkscreen', monospace;
    font-size: 0.78rem;
    color: var(--p-text-secondary);
    margin: 22px 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.settings-source { font-size: 0.72rem; color: var(--p-text-muted); font-weight: 400; }
.settings-clear { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.78rem; color: var(--p-text-muted); }
.settings-clear input { margin: 0; }
.sub-diff { max-height: 420px; overflow: auto; padding: 8px 4px; background: var(--p-bg); }
.sub-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--p-border); }

/* ============================================================
   Permissions editor — flat, full-bleed, LuckPerms-style editor.
   Three regions stacked in a full-height flex column: a thin top
   bar, then a 2-pane body (holder rail flush against the portal
   nav sidebar + a scrolling node detail). Deliberately flat — 1px
   dividers, no mc-panel bevels — to read like LP's node table.
   ============================================================ */
.portal-main:has(.perm-page) { padding: 0; height: 100vh; overflow: hidden; }
/* Lock document scroll while the (full-screen) perm page is mounted — kills the
   ~1px sub-pixel scroll left by 100vh rounding when the wheel is over a
   non-scrolling area (nav / rail). Releases automatically on SPA nav-away since
   :has stops matching. Inner scrolling lives on .perm-rail / .perm-detail. */
body:has(.perm-page) { overflow: hidden; }
/* Opt out of the centered max-width content column so the rail sits flush
   against the portal nav sidebar (mirrors the .editor-page full-bleed rule).
   The `.portal-main >` prefix raises specificity above the later
   `.portal-main > .portal-content { max-width:1200px; margin:0 auto }` rule. */
.portal-main > .portal-content:has(.perm-page) { max-width: none; height: 100%; margin: 0; }
/* Lock the page to the viewport using the exact .editor-page shape (proven
   robust across SPA navigation): portal-content stays a plain full-height block,
   .perm-page is the full-height flex column, and #permForm flexes to fill it.
   Only .perm-rail and .perm-detail scroll — the document itself never does. */
.perm-page { height: 100%; display: flex; flex-direction: column; min-height: 0; }
#permForm { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* Top bar — its bottom border lines up with the sidebar's "◆ Portal" logo
   divider, the same way the editor bottom bar lines up with the sidebar user
   card: a shared height var + box-sizing:border-box, deterministic (no JS, no
   font dependence). The bar starts at the main content's top (viewport 0); the
   logo's divider sits at sidebar-top(8) + sidebar-pad-top(20) + --top-bar-height,
   so the bar's height is that same 28px offset + --top-bar-height. Its top 8px
   sit under the dirt strip, exactly like the sidebar's. The bar height is fixed
   (not content-driven), so the action buttons can sit in normal flow and be
   vertically centered without affecting where the divider lands. */
.perm-topbar { display: flex; align-items: center; gap: 18px; flex-shrink: 0; box-sizing: border-box; height: calc(28px + var(--top-bar-height)); padding: 0 22px; background: var(--p-sidebar); border-bottom: 1px solid var(--p-border); }
.perm-topbar h1 { margin: 0; font-family: 'Silkscreen', monospace; font-size: 1.15rem; line-height: normal; color: var(--cream); letter-spacing: 0.02em; }
.perm-legend { display: flex; align-items: center; gap: 14px; min-width: 0; font-size: 0.74rem; color: var(--p-text-secondary); white-space: nowrap; overflow: hidden; }
.perm-legend-item { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.perm-legend-note { color: var(--p-text-muted); font-size: 0.68rem; border-left: 1px solid var(--p-border); padding-left: 14px; overflow: hidden; text-overflow: ellipsis; }
.perm-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.perm-dot-yes { background: var(--garden-green); }
.perm-dot-no { background: var(--p-danger); }
.perm-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.perm-unsaved { font-family: 'Silkscreen', monospace; font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--p-danger); white-space: nowrap; }
.perm-save.is-dirty { box-shadow: 0 0 0 2px rgba(143,170,135,0.5); }

/* Resolution tester modal. The [hidden] rule must outrank .modal-overlay's
   display:flex — otherwise the attribute can't hide the overlay (it'd show on
   load and refuse to close). */
.perm-test-overlay[hidden] { display: none; }
.perm-test-body { padding: 16px 18px; overflow: auto; }
.perm-test-hint { margin: 0 0 14px; font-size: 0.82rem; color: var(--p-text-secondary); line-height: 1.5; }
.perm-test-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.perm-test-chip { font-size: 0.72rem; padding: 4px 10px; background: var(--p-card); color: var(--p-text-secondary); border: 1px solid var(--p-border); border-radius: 12px; cursor: pointer; transition: all 0.12s ease; }
.perm-test-chip:hover { background: var(--garden-green); color: #1c1c1e; border-color: var(--garden-green); }
.perm-test-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; font-family: 'Silkscreen', monospace; font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--p-text-secondary); }
.perm-test-opt { text-transform: none; font-family: 'Inter', sans-serif; color: var(--p-text-muted); letter-spacing: 0; }
.perm-test-result:not(:empty) { margin-top: 6px; border-top: 1px solid var(--p-border); padding-top: 14px; }
.perm-test-none { color: var(--p-text-secondary); font-size: 0.85rem; padding: 8px 0; }
.perm-test-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 0.78rem; color: var(--p-text-secondary); }
.perm-test-rank { font-family: 'Silkscreen', monospace; font-size: 0.58rem; color: var(--p-text-muted); }
.perm-test-groups { color: var(--p-text); }
.perm-test-lists { display: flex; gap: 18px; align-items: flex-start; }
.perm-test-col { flex: 1; min-width: 0; }
.perm-test-coltitle { font-family: 'Silkscreen', monospace; font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--garden-green); margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--p-border); }
.perm-test-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 0.76rem; }
.perm-test-row code { font-family: 'JetBrains Mono', 'Consolas', monospace; font-size: 0.72rem; color: var(--p-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perm-test-via { margin-left: auto; font-size: 0.62rem; color: var(--p-text-muted); white-space: nowrap; }
.perm-test-empty { color: var(--p-text-muted); font-size: 0.76rem; font-style: italic; padding: 3px 0; }

/* The portal banner sits between bar and body — keep it from being squeezed */
#permForm > .portal-banner { flex-shrink: 0; margin: 12px 22px 0; }

/* Body: holder rail + detail */
.perm-layout { flex: 1; display: flex; min-height: 0; }

/* Holder rail — flat, full-height, flush against the portal nav sidebar */
.perm-rail { width: 252px; flex-shrink: 0; background: var(--p-sidebar); border-right: 1px solid var(--p-border); overflow: auto; padding: 6px 10px 16px; }
.perm-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: 'Silkscreen', monospace; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--p-text-secondary); margin: 16px 4px 8px; padding-bottom: 6px; border-bottom: 1px solid var(--p-border); }
.perm-rail-head:first-child { margin-top: 6px; }
.perm-rail-add { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 0.95rem; line-height: 1; background: transparent; color: var(--p-text-muted); border: 1px solid var(--p-border); border-radius: 3px; cursor: pointer; transition: all 0.12s ease; }
.perm-rail-add:hover { background: var(--garden-green); color: #1c1c1e; border-color: var(--garden-green); }

.perm-nav { display: flex; flex-direction: column; gap: 1px; margin-bottom: 4px; }
.perm-nav-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; padding: 7px 10px; background: transparent; color: var(--p-text-secondary); cursor: pointer; font-size: 0.84rem; border: none; border-left: 2px solid transparent; transition: background 0.1s ease, color 0.1s ease; }
.perm-nav-item:hover { background: var(--p-card); color: var(--p-text); }
.perm-nav-item.active { background: var(--p-card); color: var(--cream); border-left-color: var(--garden-green); }
.perm-nav-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.perm-nav-meta { display: inline-flex; align-items: center; gap: 5px; font-family: 'Silkscreen', monospace; font-size: 0.58rem; color: var(--p-text-muted); flex-shrink: 0; }
.perm-tag-nonportal { font-size: 0.52rem; padding: 1px 5px; border-radius: 3px; background: rgba(137,181,201,0.16); color: #89B5C9; text-transform: uppercase; letter-spacing: 0.03em; }
.perm-nav-empty { color: var(--p-text-muted); font-size: 0.78rem; padding: 6px 10px; font-style: italic; }
.perm-adduser { display: flex; gap: 6px; margin: 0 4px 6px; }
.perm-adduser .portal-input { min-width: 0; font-size: 0.78rem; }

/* Detail pane — scrolls independently */
.perm-detail { flex: 1; min-width: 0; overflow: auto; padding: 18px 24px 28px; background: var(--p-bg); }

/* Detail header */
.perm-detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--p-border); }
.perm-detail-head .perm-name { max-width: 260px; font-family: 'Silkscreen', monospace; font-size: 0.85rem; }
.perm-id { font-family: 'JetBrains Mono', 'Consolas', monospace; font-size: 0.68rem; color: var(--p-text-muted); padding: 2px 7px; background: var(--p-card); border: 1px solid var(--p-border); border-radius: 3px; }
.perm-status { font-family: 'Silkscreen', monospace; font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 3px; }
.perm-status-portal { background: rgba(143,170,135,0.18); color: var(--garden-green); }
.perm-status-contrib { background: rgba(137,181,201,0.18); color: #89B5C9; }
.perm-detail-head .btn-danger { margin-left: auto; }

/* Meta fields */
.perm-card-meta { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; margin-bottom: 18px; }
.perm-card-meta label { display: flex; flex-direction: column; gap: 5px; font-family: 'Silkscreen', monospace; font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--p-text-secondary); }
.perm-card-meta .perm-roles { flex: 1; min-width: 240px; }
.perm-card-meta .perm-portal { flex-direction: row; align-items: center; gap: 7px; text-transform: none; font-family: inherit; font-size: 0.8rem; color: var(--p-text-secondary); cursor: pointer; }
.perm-card-meta .perm-portal input { width: auto; }

/* Node search */
.perm-search { position: relative; max-width: 340px; margin: 0 0 4px; }
.perm-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--p-text-muted); font-size: 1rem; pointer-events: none; }
.perm-search .portal-input { padding-left: 30px; }

/* Node list, grouped by category */
.perm-node-grid { animation: permRise 0.18s ease; margin-top: 8px; }
@keyframes permRise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.perm-cat { margin-bottom: 18px; }
.perm-cat-name { position: sticky; top: -18px; z-index: 1; font-family: 'Silkscreen', monospace; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--garden-green); margin: 0 0 2px; padding: 6px 0 6px 2px; background: var(--p-bg); border-bottom: 1px solid var(--p-border); }
.perm-node-row { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-bottom: 1px solid rgba(58,58,64,0.45); transition: background 0.1s ease; }
.perm-node-row:hover { background: var(--p-card); }
.perm-node-name { font-family: 'JetBrains Mono', 'Consolas', monospace; font-size: 0.78rem; color: var(--p-text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Hybrid editor — explicitly-set nodes float to a "Set on this group" section
   at the top (LP granted-list feel); the known registry sits below, dimmed, for
   discovery (you set one and it jumps up into the Set section on re-render). */
.perm-set-head { color: var(--cream); border-bottom-color: var(--garden-green); }
.perm-set-empty { color: var(--p-text-muted); font-size: 0.82rem; font-style: italic; padding: 10px 8px 14px; border-bottom: 1px solid var(--p-border); margin-bottom: 4px; }
.perm-node-row.is-set { padding-left: 6px; border-left: 2px solid var(--forest-oak); background: rgba(143,170,135,0.05); }
.perm-node-row.is-set .perm-node-name { color: var(--cream); }
.perm-avail-label { font-family: 'Silkscreen', monospace; font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--p-text-muted); margin: 24px 0 4px; padding-top: 8px; border-top: 1px dashed var(--p-border); }
.perm-avail { opacity: 0.68; transition: opacity 0.15s ease; }
.perm-avail:hover, .perm-avail:focus-within { opacity: 1; }

/* Effective badge — pill with status dot */
.perm-eff { display: inline-flex; align-items: center; gap: 5px; justify-content: center; min-width: 66px; font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 8px; border-radius: 10px; flex-shrink: 0; }
.perm-eff::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.perm-eff-yes { background: rgba(143,170,135,0.16); color: var(--garden-green); }
.perm-eff-no { background: rgba(194,123,107,0.16); color: var(--p-danger); }
.perm-eff-none { background: var(--p-card); color: var(--p-text-muted); }

/* Tri-state control — one flat segmented pill: Grant lights green, Deny red */
.perm-tri { display: inline-flex; flex-shrink: 0; border: 1px solid var(--p-border); border-radius: 4px; overflow: hidden; }
.perm-seg { font-family: 'Silkscreen', monospace; font-size: 0.55rem; letter-spacing: 0.02em; text-transform: uppercase; padding: 5px 10px; background: var(--p-bg); color: var(--p-text-muted); cursor: pointer; border: none; border-right: 1px solid var(--p-border); transition: background 0.1s ease, color 0.1s ease; }
.perm-seg:last-child { border-right: none; }
.perm-seg:hover { background: var(--p-card-hover); color: var(--p-text); }
.perm-seg-inh.on { background: var(--p-card-hover); color: var(--cream); }
.perm-seg-grant.on { background: var(--garden-green); color: #1c1c1e; }
.perm-seg-deny.on { background: var(--p-danger); color: #1c1c1e; }

/* Add-node bar */
.perm-addnode { display: flex; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--p-border); }
.perm-addnode .perm-newnode { max-width: 300px; }

@media (max-width: 860px) {
    .portal-main:has(.perm-page) { height: auto; overflow: visible; }
    #permForm { height: auto; }
    .perm-topbar { height: auto; min-height: 56px; flex-wrap: wrap; padding: 10px 16px; }
    .perm-save { position: static; margin-left: auto; }
    .perm-layout { flex-direction: column; min-height: 0; }
    .perm-rail { width: 100%; border-right: none; border-bottom: 1px solid var(--p-border); }
    .perm-detail { overflow: visible; }
}

.login-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    background: #5865F2;
    color: #fff;
    border: 3px solid #7983F5;
    border-bottom-color: #4752C4;
    border-right-color: #4752C4;
    font-family: 'Silkscreen', monospace;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition);
}

.login-btn:hover {
    background: #4752C4;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(88, 101, 242, 0.3);
}

.login-btn:active {
    transform: translateY(1px);
    border-top-color: #4752C4;
    border-left-color: #4752C4;
    border-bottom-color: #7983F5;
    border-right-color: #7983F5;
}

.login-note {
    margin-top: 20px;
    color: var(--p-text-muted);
    font-size: 0.8rem;
}

/* ---- Portal Layout ---- */

.portal-layout {
    display: flex;
    min-height: 100vh;
}

.portal-sidebar {
    width: 220px;
    min-width: 220px;
    background: var(--p-sidebar);
    border-right: 1px solid var(--p-border);
    display: flex;
    flex-direction: column;
    padding: 20px 0 0;
    position: fixed;
    top: 8px;
    bottom: 0;
    left: 0;
    z-index: 10;
}

.portal-logo {
    font-family: 'Silkscreen', monospace;
    font-size: 1.15rem;
    color: var(--p-accent);
    text-decoration: none;
    /* Fixed height (not font-dependent) so the perm-editor top bar can line its
       divider up with this one deterministically — same trick as the bottom bar.
       Flex-centered so the wordmark stays vertically centered in the fixed box. */
    display: flex;
    align-items: center;
    height: var(--top-bar-height);
    box-sizing: border-box;
    padding: 0 20px;
    border-bottom: 1px solid var(--p-border);
    margin-bottom: 12px;
}

.portal-logo .logo-icon { color: var(--p-accent); }

.portal-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 12px;
    gap: 2px;
}

.portal-nav-link {
    display: block;
    padding: 9px 12px;
    color: var(--p-text-secondary);
    text-decoration: none;
    font-family: 'Silkscreen', monospace;
    font-size: 0.82rem;
    transition: background 0.15s, color 0.15s;
}

.portal-nav-link:hover {
    background: var(--p-card);
    color: var(--p-text);
}

.portal-nav-link.nav-active {
    color: var(--garden-green);
    background: rgba(143, 170, 135, 0.08);
}

.portal-nav-divider {
    height: 1px;
    background: var(--p-border);
    margin: 8px 0;
}

.portal-nav-ext {
    color: var(--p-text-muted);
    font-size: 0.78rem;
}

.portal-nav-ext::after {
    content: ' \2197';
    font-size: 0.7em;
    opacity: 0.6;
}

.portal-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    border-top: 1px solid var(--p-border);
    margin-top: auto;
    height: var(--bottom-bar-height);
    box-sizing: border-box;
}

.portal-user-avatar {
    width: 32px;
    height: 32px;
    background: var(--p-card);
    image-rendering: pixelated;
}

.portal-user-info {
    flex: 1;
    min-width: 0;
}

.portal-user-name {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portal-user-role {
    display: block;
    font-size: 0.75rem;
    color: var(--p-accent);
}

.portal-logout button {
    background: none;
    border: none;
    color: var(--p-text-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 4px;
    transition: color 0.15s;
}

.portal-logout button:hover { color: var(--p-danger); }

/* Mobile topbar + hamburger (hidden on desktop) */
.portal-topbar {
    display: none;
}

.portal-menu-toggle {
    display: none;
}

.portal-menu-backdrop {
    display: none;
}

.portal-topbar-logo {
    font-family: 'Silkscreen', monospace;
    font-size: 1rem;
    color: var(--p-accent);
    text-decoration: none;
}

/* ---- Main Content ---- */

.portal-main {
    flex: 1;
    margin-left: 220px;
    padding: 32px 40px;
    padding-top: 40px;
}

.portal-main > .portal-content {
    max-width: 1200px;
    margin: 0 auto;
}

/* Editor and dashboard benefit from extra width on ultrawide */
.portal-content:has(.editor-page),
.portal-content:has(.resource-gauges) {
    max-width: none;
}
.portal-content:has(.editor-page) {
    height: 100%;
}

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

.portal-header h1 {
    font-family: 'Silkscreen', monospace;
    font-size: 1.4rem;
}

.portal-welcome {
    font-size: 0.9rem;
    color: var(--p-text-secondary);
    margin-bottom: 28px;
}

.portal-welcome strong {
    color: var(--p-text);
}

/* ---- Cards ---- */

.portal-cards {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
}

.portal-card {
    background: var(--p-card);
    border: 3px solid var(--border-light);
    border-top-color: var(--border-highlight);
    border-left-color: var(--border-highlight);
    border-bottom-color: var(--border-mc);
    border-right-color: var(--border-mc);
    padding: 20px 24px;
    min-width: 160px;
    transition: transform var(--transition), box-shadow var(--transition);
}

.portal-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.portal-card-label {
    font-size: 0.8rem;
    color: var(--p-text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.portal-card-value {
    font-size: 1.8rem;
    font-weight: 700;
    font-family: 'Silkscreen', monospace;
    color: var(--p-accent);
}

.portal-card-sub {
    font-size: 0.75rem;
    color: var(--p-text-muted);
    margin-top: 4px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

/* ---- Sections ---- */

.portal-section {
    margin-bottom: 32px;
}

.portal-section-header {
    margin-bottom: 16px;
}

.portal-section-header h2 {
    font-family: 'Silkscreen', monospace;
    font-size: 1rem;
    color: var(--p-text-secondary);
}

.portal-note {
    padding: 16px 20px;
    font-size: 0.85rem;
    color: var(--p-text-muted);
    line-height: 1.6;
}

.portal-note p + p {
    margin-top: 6px;
}

/* ---- Table Wrapper (MC Panel) ---- */

.portal-table-wrap {
    background: var(--p-card);
    border: 3px solid var(--border-light);
    border-top-color: var(--border-highlight);
    border-left-color: var(--border-highlight);
    border-bottom-color: var(--border-mc);
    border-right-color: var(--border-mc);
    overflow: visible;
}

/* ---- Tables ---- */

.portal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.portal-table th {
    text-align: left;
    padding: 10px 14px;
    background: var(--bg-slot);
    color: var(--p-text-secondary);
    font-family: 'Silkscreen', monospace;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--border-mc);
}

.portal-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-mc);
    vertical-align: middle;
}

.portal-table tbody tr:hover {
    background: rgba(255,255,255,0.02);
}

/* Audit action badge — color set inline per category */
.audit-action {
    background: var(--bg-slot);
    padding: 2px 8px;
    border: 1px solid;
    font-family: 'Silkscreen', monospace;
    font-size: 0.72rem;
    white-space: nowrap;
}

/* Details view button */
.details-btn {
    background: var(--bg-slot);
    border: 1px solid var(--border-mc);
    color: var(--p-text-secondary);
    cursor: pointer;
    font-size: 0.78rem;
    padding: 2px 10px;
    transition: color 0.15s, border-color 0.15s;
}

.details-btn:hover {
    color: var(--p-text);
    border-color: var(--border-light);
}
.audit-inline-detail {
    font-size: 0.8rem;
    color: var(--p-text-secondary);
}

/* Details modal body */
.audit-details-body {
    padding: 16px 18px;
    max-height: 60vh;
    overflow-y: auto;
}

.audit-details-body pre {
    margin: 0;
    font-size: 0.85rem;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    color: var(--p-text);
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.5;
}

/* Modal close button definition lives lower in this file (around line 2515) —
 * duplicate stub here removed. Both audit + generic modals share the same X
 * button now. */

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

/* Audit filters bar */
.audit-filters {
    margin-bottom: 20px;
}

.audit-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

.audit-filter-select,
.audit-filter-input {
    font-size: 0.85rem;
    padding: 6px 10px;
    background: var(--p-card);
    color: var(--p-text);
    border: 2px solid var(--border-mc);
    font-family: 'Inter', sans-serif;
}

.audit-filter-select {
    min-width: 120px;
}

.audit-filter-input {
    min-width: 160px;
}

.audit-filter-date {
    min-width: 130px;
}

.audit-filter-select:focus,
.audit-filter-input:focus {
    outline: none;
    border-color: var(--border-light);
}

/* Toolbar row */
/* Daily stats banner */
.audit-daily-stats {
    background: var(--p-card);
    border: 2px solid var(--border-mc);
    padding: 10px 16px;
    margin-bottom: 16px;
    font-size: 0.85rem;
    color: var(--p-text-secondary);
    line-height: 1.6;
}

.audit-daily-label {
    font-family: 'Silkscreen', monospace;
    font-size: 0.72rem;
    color: var(--p-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Target links */
.audit-target-link {
    color: var(--p-accent);
    text-decoration: none;
}

.audit-target-link:hover {
    text-decoration: underline;
}

/* IP warning indicator */
.audit-ip-new {
    color: #d89b6a;
    cursor: help;
    font-size: 0.85rem;
    margin-left: 4px;
}

.audit-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Live indicator */
.audit-live {
    font-family: 'Silkscreen', monospace;
    font-size: 0.72rem;
    color: var(--garden-green);
    opacity: 0.7;
}

.audit-live-flash {
    animation: auditFlash 1s ease;
}

@keyframes auditFlash {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; text-shadow: 0 0 8px rgba(143,170,135,0.5); }
}

/* New row highlight */
.audit-new-row {
    animation: auditNewRow 2s ease;
}

@keyframes auditNewRow {
    0% { background: rgba(143,170,135,0.15); }
    100% { background: transparent; }
}

/* Relative time styling */
.audit-time {
    white-space: nowrap;
    cursor: default;
}

/* ---- Tags ---- */

.tag {
    display: inline-block;
    padding: 2px 10px;
    font-family: 'Silkscreen', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: 1px solid;
}

.tag-announcement { background: rgba(143,170,135,0.15); color: var(--p-accent); border-color: rgba(143,170,135,0.3); }
.tag-update { background: rgba(252,212,114,0.12); color: var(--p-yellow); border-color: rgba(252,212,114,0.25); }
.tag-event { background: rgba(200,181,208,0.12); color: #C8B5D0; border-color: rgba(200,181,208,0.25); }
.tag-maintenance { background: rgba(194,123,107,0.12); color: #C27B6B; border-color: rgba(194,123,107,0.25); }
.tag-owner { background: linear-gradient(90deg, #2ECC71, #58D68D); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; border-color: rgba(46,204,113,0.3); }
.tag-admin { background: linear-gradient(90deg, #C74B8F, #DA7CB5); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; border-color: rgba(199,75,143,0.3); }
.tag-srmod { background: linear-gradient(90deg, #8B5EC7, #A87ED4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; border-color: rgba(139,94,199,0.3); }
.tag-mod { background: linear-gradient(90deg, #4A90C9, #7EB8E7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; border-color: rgba(74,144,201,0.3); }
.tag-helper { background: linear-gradient(90deg, #D4A03C, #F0C75E); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; border-color: rgba(212,160,60,0.3); }

/* ---- Staff page extras ---- */

/* Drag handle */
.drag-handle {
    cursor: grab;
    color: var(--p-text-muted);
    font-size: 1rem;
    user-select: none;
    padding: 0 4px;
    opacity: 0.5;
    transition: opacity 0.15s;
}

.drag-handle:hover {
    opacity: 1;
    color: var(--p-text);
}

.staff-dragging {
    opacity: 0.5;
    background: var(--bg-slot) !important;
}

.staff-placeholder td {
    height: 44px;
    background: rgba(143,170,135,0.08);
    border: 2px dashed rgba(143,170,135,0.3);
}

/* Activity column */
.staff-activity {
    font-size: 0.82rem;
    color: var(--p-text-secondary);
    white-space: nowrap;
}

.staff-weekly {
    font-size: 0.75rem;
    color: var(--p-text-muted);
}

/* Avatar preview on edit form */
.staff-pose-preview {
    margin-top: 10px;
}
.staff-pose-preview img {
    height: 192px;
    image-rendering: auto;
}

.staff-avatar-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding: 14px 18px;
    background: var(--p-card);
    border: 2px solid var(--border-mc);
}

.staff-avatar-img {
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
    border: 2px solid var(--border-light);
}

.staff-avatar-name {
    font-family: 'Silkscreen', monospace;
    font-size: 1rem;
    color: var(--p-text);
}

/* Quote character counter */
.quote-counter {
    font-size: 0.78rem;
    color: var(--p-text-muted);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    margin-left: 8px;
}

/* ---- Buttons ---- */

.btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 9px 20px;
    background: var(--forest-oak);
    color: var(--cream);
    border: 3px solid var(--garden-green);
    border-bottom-color: var(--forest-oak-dark);
    border-right-color: var(--forest-oak-dark);
    font-family: 'Silkscreen', monospace;
    font-size: 0.82rem;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition);
}

.btn-primary:hover {
    background: var(--forest-oak-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(107, 122, 94, 0.3);
}

.btn-primary:active {
    transform: translateY(1px);
    border-top-color: var(--forest-oak-dark);
    border-left-color: var(--forest-oak-dark);
    border-bottom-color: var(--garden-green);
    border-right-color: var(--garden-green);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    padding: 9px 20px;
    background: var(--bg-slot);
    color: var(--p-text);
    border: 3px solid var(--border-highlight);
    border-bottom-color: var(--border-mc);
    border-right-color: var(--border-mc);
    font-family: 'Silkscreen', monospace;
    font-size: 0.82rem;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition);
}

.btn-secondary:hover {
    background: var(--bg-slot-hover);
    transform: translateY(-2px);
}

.btn-secondary:active {
    transform: translateY(1px);
    border-top-color: var(--border-mc);
    border-left-color: var(--border-mc);
    border-bottom-color: var(--border-highlight);
    border-right-color: var(--border-highlight);
}

.btn-sm {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--bg-slot);
    color: var(--p-text-secondary);
    border: 2px solid var(--border-highlight);
    border-bottom-color: var(--border-mc);
    border-right-color: var(--border-mc);
    font-family: 'Silkscreen', monospace;
    font-size: 0.72rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-sm:hover {
    background: var(--bg-slot-hover);
    color: var(--p-text);
    transform: translateY(-1px);
}

.btn-sm:active {
    transform: translateY(1px);
    border-top-color: var(--border-mc);
    border-left-color: var(--border-mc);
    border-bottom-color: var(--border-highlight);
    border-right-color: var(--border-highlight);
}

.btn-danger {
    background: transparent;
    color: var(--p-danger);
    border-color: var(--p-danger);
    border-bottom-color: #8a4a3e;
    border-right-color: #8a4a3e;
}

.btn-danger:hover {
    background: var(--p-danger);
    color: #fff;
}

.btn-danger:active {
    border-top-color: #8a4a3e;
    border-left-color: #8a4a3e;
    border-bottom-color: var(--p-danger);
}

.btn-success {
    background: transparent;
    color: var(--garden-green);
    border-color: var(--garden-green);
    border-bottom-color: #5a6e4e;
    border-right-color: #5a6e4e;
}
.btn-success:hover {
    background: var(--garden-green);
    color: #fff;
}
.btn-success:active {
    border-top-color: #5a6e4e;
    border-left-color: #5a6e4e;
    border-bottom-color: var(--garden-green);
    border-right-color: var(--garden-green);
}

.actions { white-space: nowrap; }
.actions .btn-sm { margin-right: 4px; }
.inline { display: inline; }

/* ---- Forms ---- */

.portal-form {
    max-width: 700px;
}

.portal-form.mc-panel {
    padding: 24px;
}

.form-row {
    margin-bottom: 20px;
}

.form-row label {
    display: block;
    font-family: 'Silkscreen', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--p-text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.form-help {
    font-size: 0.78rem;
    color: var(--p-text-muted);
    margin-bottom: 6px;
}

.form-row input[type="text"],
.form-row input[type="date"],
.form-row select,
.form-row textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-slot);
    border: 2px solid var(--border-mc);
    border-top-color: var(--border-mc);
    border-left-color: var(--border-mc);
    border-bottom-color: var(--border-highlight);
    border-right-color: var(--border-highlight);
    color: var(--p-text);
    font-family: inherit;
    font-size: 0.9rem;
    transition: border-color 0.15s;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--p-accent);
}

.form-row textarea {
    resize: vertical;
    min-height: 120px;
    font-family: 'Inter', monospace;
    line-height: 1.6;
}

.form-row-pair {
    display: flex;
    gap: 16px;
}

.form-row-pair .form-row { flex: 1; }

.form-actions {
    display: flex;
    gap: 12px;
    padding-top: 8px;
}

/* ---- Preview ---- */

.form-preview {
    background: var(--bg-slot);
    border: 2px solid var(--border-mc);
    border-top-color: var(--border-mc);
    border-left-color: var(--border-mc);
    border-bottom-color: var(--border-highlight);
    border-right-color: var(--border-highlight);
    padding: 16px;
    min-height: 60px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--p-text);
}

.form-preview a { color: var(--p-accent); }
.form-preview .preview-empty { color: var(--p-text-muted); font-style: italic; }

/* ---- News Editor (reuses .editor-* wiki classes + small overrides) ---- */

.news-last-edited {
    font-size: 0.78rem;
    color: var(--p-text-muted);
}

.news-meta-bar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 12px 20px;
    background: var(--p-card);
    border-bottom: 1px solid var(--p-border);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.news-meta-field { display: flex; flex-direction: column; gap: 4px; }
.news-meta-field:first-child { flex: 1; min-width: 200px; }
.news-meta-field label { font-size: 0.72rem; text-transform: uppercase; color: var(--p-text-muted); letter-spacing: 0.05em; }
.news-meta-field input, .news-meta-field select {
    background: var(--bg-slot);
    border: 1px solid var(--p-border);
    color: var(--p-text);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.88rem;
}
.news-meta-short { width: 140px; flex-shrink: 0; }
.news-meta-pin {
    display: flex;
    align-items: center;
    padding-bottom: 4px;
}
.news-meta-pin label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--p-text-secondary);
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
}

/* News editor split — flex fills remaining space (no fixed height needed) */

/* News textarea — padding override (color fixed after base .editor-textarea) */
.news-editor-textarea {
    padding: 16px 20px;
    resize: none;
}

/* News preview — inline div instead of wiki's iframe */
.news-preview-content {
    padding: 16px 20px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--p-text);
    overflow-y: auto;
    height: 100%;
}

.news-preview-content a { color: var(--p-accent); }
.news-preview-content .preview-empty { color: var(--p-text-muted); font-style: italic; }
.news-preview-content strong { color: #fff; }
.news-preview-content h3 { font-size: 1.1rem; color: var(--p-text); margin: 12px 0 4px; }
.news-preview-content h4 { font-size: 0.95rem; color: var(--p-text-muted); margin: 10px 0 4px; }
.news-preview-content .news-img { max-width: 100%; max-height: 300px; border-radius: 4px; margin: 8px 0; display: block; }

/* News bottom bar — right-align actions to match wiki editor */
.news-editor-bottombar { justify-content: flex-end; }

/* --- News list enhancements --- */
.news-status {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 500;
    white-space: nowrap;
}

.news-status-published {
    background: rgba(143,170,135,0.15);
    color: var(--p-accent);
}

.news-status-draft {
    background: rgba(252,212,114,0.12);
    color: var(--p-yellow);
}

.news-status-scheduled {
    background: rgba(137,181,201,0.12);
    color: #89B5C9;
}

.news-pin-icon {
    font-size: 0.8rem;
    opacity: 0.7;
}

.news-last-edit {
    font-size: 0.78rem;
    color: var(--p-text-muted);
    white-space: nowrap;
}

.news-actions {
    white-space: nowrap;
}

.news-actions .btn-sm {
    padding: 3px 8px;
    font-size: 0.72rem;
}

/* ---- Pagination ---- */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 20px;
}

.pagination-btn {
    background: var(--p-card);
    border: 1px solid var(--p-border, #2a2d33);
    color: var(--p-text-secondary, #8b949e);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.pagination-btn:hover:not(:disabled):not(.active) {
    background: var(--p-hover-bg, #262a30);
    color: var(--p-text, #c9d1d9);
    border-color: var(--p-border-hover, #3a3f47);
}

.pagination-btn.active {
    background: var(--p-accent, #6B7A5E);
    color: #fff;
    border-color: var(--p-accent, #6B7A5E);
}

.pagination-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.pagination-ellipsis {
    color: var(--p-text-secondary, #8b949e);
    padding: 0 4px;
    font-size: 0.85rem;
}

.table-total {
    display: block;
    font-size: 0.8rem;
    color: var(--p-text-secondary, #8b949e);
    margin-bottom: 8px;
}

.page-info {
    font-size: 0.85rem;
    color: var(--p-text-secondary);
}

/* ---- Banners ---- */

.portal-banner {
    padding: 12px 16px;
    font-size: 0.88rem;
    margin-bottom: 20px;
    border: 3px solid var(--border-light);
    border-top-color: var(--border-highlight);
    border-left-color: var(--border-highlight);
    border-bottom-color: var(--border-mc);
    border-right-color: var(--border-mc);
}

.portal-banner code {
    background: rgba(0,0,0,0.2);
    padding: 2px 6px;
    font-size: 0.82rem;
}

.banner-success {
    background: rgba(143,170,135,0.12);
    border-color: rgba(143,170,135,0.3);
    border-top-color: rgba(143,170,135,0.5);
    border-left-color: rgba(143,170,135,0.5);
    border-bottom-color: rgba(143,170,135,0.15);
    border-right-color: rgba(143,170,135,0.15);
    color: var(--p-accent);
}

.banner-warning {
    background: rgba(216,155,106,0.12);
    border-color: rgba(216,155,106,0.3);
    border-top-color: rgba(216,155,106,0.5);
    border-left-color: rgba(216,155,106,0.5);
    border-bottom-color: rgba(216,155,106,0.15);
    border-right-color: rgba(216,155,106,0.15);
    color: #D89B6A;
}

/* ---- Wiki File Browser ---- */

.wiki-file-count {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.72rem;
    color: var(--p-text-muted);
    font-weight: 400;
    margin-left: 8px;
}

.wiki-stale-summary {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.72rem;
    color: #D89B6A;
    font-weight: 400;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: help;
}

.wiki-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.wiki-search-input {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg-slot);
    border: 2px solid var(--border-mc);
    border-top-color: var(--border-mc);
    border-left-color: var(--border-mc);
    border-bottom-color: var(--border-highlight);
    border-right-color: var(--border-highlight);
    color: var(--p-text);
    font-family: inherit;
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.2s;
}

.wiki-search-input:focus { border-color: var(--p-accent); }
.wiki-search-input::placeholder { color: var(--p-text-muted); }

.wiki-search-hint {
    font-size: 0.78rem;
    color: var(--p-text-muted);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    white-space: nowrap;
}

.wiki-file-browser {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wiki-section {
    background: var(--p-card);
    border: 3px solid var(--border-light);
    border-top-color: var(--border-highlight);
    border-left-color: var(--border-highlight);
    border-bottom-color: var(--border-mc);
    border-right-color: var(--border-mc);
    overflow: hidden;
}

.wiki-section-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: rgba(0,0,0,0.15);
    border: none;
    color: var(--p-text);
    font-family: 'Silkscreen', monospace;
    font-size: 0.78rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.wiki-section-toggle:hover { background: rgba(0,0,0,0.25); }

.wiki-section-arrow {
    font-size: 0.6rem;
    color: var(--p-text-muted);
    transition: transform 0.2s;
}

.wiki-section.collapsed .wiki-section-arrow { transform: rotate(-90deg); }
.wiki-section.collapsed .wiki-section-files { display: none; }

.wiki-section-label { flex: 1; }

.wiki-section-count {
    font-size: 0.68rem;
    color: var(--p-text-muted);
    background: rgba(0,0,0,0.2);
    padding: 1px 7px;
}

.wiki-file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px 9px 34px;
    text-decoration: none;
    color: var(--p-text);
    border-top: 1px solid rgba(58,58,64,0.3);
    transition: background 0.12s;
    font-size: 0.85rem;
}

.wiki-file-row:hover { background: rgba(143,170,135,0.06); }

.wiki-file-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.wiki-recent-dot {
    width: 6px;
    height: 6px;
    background: var(--p-accent);
    border-radius: 50%;
    flex-shrink: 0;
}

.wiki-stale-dot {
    width: 6px;
    height: 6px;
    background: #D89B6A;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: help;
}

.wiki-edit-info {
    font-size: 0.72rem;
    color: var(--p-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 12px;
}

.wiki-edit-never {
    opacity: 0.5;
}

/* ---- Wiki Editor ---- */

/* Editor page overrides portal-main constraints */
.portal-main:has(.editor-page) {
    padding: 0;
    overflow: hidden;
    height: 100vh;
}

.editor-page {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.editor-page form {
    max-width: none;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Top bar */
.editor-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--p-sidebar);
    border-bottom: 1px solid var(--p-border);
}

.editor-topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.editor-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.editor-back {
    color: var(--p-text-muted);
    text-decoration: none;
    font-size: 1.3rem;
    padding: 4px 8px;
    transition: color 0.15s, background 0.15s;
}

.editor-back:hover { color: var(--p-text); background: var(--p-card); }

.editor-file-info { min-width: 0; }

.editor-title {
    font-family: 'Silkscreen', monospace;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.editor-path {
    font-size: 0.78rem;
    color: var(--p-text-muted);
    font-family: monospace;
}

.editor-breadcrumb {
    font-size: 0.72rem;
    color: var(--p-text-muted);
    margin-bottom: 2px;
}

.editor-breadcrumb a {
    color: var(--p-accent);
    text-decoration: none;
}

.editor-breadcrumb a:hover { text-decoration: underline; }

.bc-sep { color: var(--p-text-muted); margin: 0 3px; }
.bc-current { color: var(--p-text-secondary); }

.editor-draft-badge {
    font-size: 0.72rem;
    color: var(--p-accent);
    padding: 2px 8px;
    background: rgba(143,170,135,0.1);
    border: 1px solid rgba(143,170,135,0.25);
    animation: fadeIn 0.3s;
}

.editor-unsaved {
    font-size: 0.78rem;
    color: var(--p-yellow);
    padding: 3px 10px;
    background: rgba(252,212,114,0.1);
    border: 1px solid rgba(252,212,114,0.25);
    font-weight: 600;
}

.tb-active {
    background: rgba(143,170,135,0.15) !important;
    color: var(--p-accent) !important;
    border-color: rgba(143,170,135,0.4) !important;
}

/* New file path bar */
.editor-new-path {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--p-sidebar);
    border-bottom: 1px solid var(--p-border);
}

.new-path-label {
    font-size: 0.78rem;
    color: var(--p-text-secondary);
    font-family: 'Silkscreen', monospace;
    white-space: nowrap;
}

.new-path-select, .new-path-input {
    padding: 6px 10px;
    background: var(--bg-slot);
    border: 2px solid var(--border-mc);
    border-top-color: var(--border-mc);
    border-left-color: var(--border-mc);
    border-bottom-color: var(--border-highlight);
    border-right-color: var(--border-highlight);
    color: var(--p-text);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.82rem;
}

.new-path-select:focus, .new-path-input:focus {
    outline: none;
    border-color: var(--p-accent);
}

.new-path-sep {
    color: var(--p-text-muted);
    font-size: 0.9rem;
}

.new-path-input { flex: 1; }

/* Find & Replace — VS Code-style floating panel */
.editor-find-bar {
    position: absolute;
    top: 0;
    right: 16px;
    z-index: 20;
    display: flex;
    align-items: flex-start;
    gap: 0;
    background: var(--p-sidebar);
    border: 1px solid var(--p-border);
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    padding: 6px 6px 6px 2px;
}

.find-expand-btn {
    background: none;
    border: none;
    color: var(--p-text-muted);
    cursor: pointer;
    padding: 4px 4px;
    font-size: 0.85rem;
    line-height: 1;
    transition: color 0.12s, transform 0.15s;
    flex-shrink: 0;
    align-self: center;
}
.find-expand-btn:hover { color: var(--p-text); }
.find-expand-btn.expanded { transform: rotate(90deg); }

.find-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.find-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.find-field {
    width: 200px;
    padding: 4px 8px;
    background: var(--bg-slot);
    border: 1px solid var(--p-border);
    color: var(--p-text);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.78rem;
    outline: none;
    border-radius: 3px;
}

.find-field:focus { border-color: var(--p-accent); }

.find-count {
    font-size: 0.68rem;
    color: var(--p-text-muted);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    white-space: nowrap;
    min-width: 48px;
    text-align: right;
}

.find-btn {
    padding: 3px 8px;
    background: none;
    border: 1px solid transparent;
    color: var(--p-text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.12s;
    white-space: nowrap;
    border-radius: 3px;
    line-height: 1.2;
}

.find-btn:hover {
    background: var(--bg-slot-hover);
    color: var(--p-text);
    border-color: var(--p-border);
}

.find-close-btn {
    font-size: 0.92rem;
    padding: 2px 5px;
}

.editor-help-btn {
    width: 30px;
    height: 30px;
    background: var(--p-card);
    border: 1px solid var(--p-border);
    color: var(--p-text-muted);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.editor-help-btn:hover { color: var(--p-text); border-color: var(--p-accent); }

/* Help panel */
.editor-help-panel {
    padding: 16px 20px;
    background: var(--p-sidebar);
    border-bottom: 1px solid var(--p-border);
}

.help-columns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.help-col-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--p-text-muted);
    margin-bottom: 8px;
}

.help-entry {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 3px 0;
    font-size: 0.8rem;
}

.help-entry code {
    background: var(--p-card);
    padding: 1px 5px;
    font-size: 0.74rem;
    color: var(--p-accent);
    white-space: nowrap;
}

.help-entry span {
    color: var(--p-text-secondary);
    font-size: 0.78rem;
}

.help-shortcut {
    background: var(--p-card) !important;
    padding: 1px 6px !important;
    font-size: 0.74rem !important;
    color: var(--p-text-secondary) !important;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid var(--p-border);
}

/* Toolbar */
.editor-toolbar {
    padding: 6px 12px;
    background: var(--p-bg);
    border-bottom: 1px solid var(--p-border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.toolbar-section {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.toolbar-group {
    display: flex;
    gap: 2px;
}

.toolbar-sep {
    width: 1px;
    height: 26px;
    background: var(--p-border);
    margin: 0 8px;
}

.tb {
    padding: 4px 11px;
    background: transparent;
    color: var(--p-text-secondary);
    border: 2px solid transparent;
    font-family: 'Silkscreen', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
    white-space: nowrap;
}

.tb:hover {
    background: var(--bg-slot);
    color: var(--p-text);
    border-color: var(--border-highlight);
    border-bottom-color: var(--border-mc);
    border-right-color: var(--border-mc);
}

.tb:active {
    background: var(--bg-slot-hover);
    border-top-color: var(--border-mc);
    border-left-color: var(--border-mc);
    border-bottom-color: var(--border-highlight);
    border-right-color: var(--border-highlight);
}

.tb-wiki {
    color: var(--p-accent);
}

.tb-wiki:hover {
    color: var(--p-accent-hover);
    border-color: rgba(143,170,135,0.3);
    background: rgba(143,170,135,0.08);
}

/* Editor area */
.editor-split {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.editor-split.split-active .editor-wrap {
    flex: 1 1 50%;
    width: auto;
}

.editor-wrap {
    display: flex;
    flex: 1;
    min-height: 0;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* Resizer handle between editor and preview */
.editor-resizer {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--p-border);
    transition: background 0.15s;
}
.editor-resizer:hover,
.editor-resizer:active {
    background: var(--p-accent);
}

/* Preview panel — iframe with real wiki rendering */
.editor-preview {
    flex: 1 1 50%;
    position: relative;
    background: #1a1a1c;
}

.preview-frame {
    width: 100%;
    height: 100%;
    border: none;
    background: #1a1a1c;
}

.preview-loading {
    position: absolute;
    top: 12px;
    right: 16px;
    font-family: 'Silkscreen', monospace;
    font-size: 0.68rem;
    color: var(--p-text-muted);
    background: var(--p-card);
    padding: 4px 10px;
    border: 1px solid var(--p-border);
    animation: previewPulse 1s ease-in-out infinite;
}

@keyframes previewPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.editor-gutter {
    width: 52px;
    min-width: 52px;
    padding: 14px 12px 14px 0;
    background: var(--p-sidebar);
    border-right: 1px solid var(--p-border);
    color: var(--p-text-muted);
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.82rem;
    line-height: 1.65;
    text-align: right;
    overflow: hidden;
    white-space: pre;
    user-select: none;
    pointer-events: none;
}

/* Input area: stacks highlight backdrop behind transparent textarea */
.editor-input-area {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--p-bg);
    min-height: 0;
}

.editor-highlight,
.editor-textarea {
    padding: 14px 16px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.82rem;
    line-height: 1.65;
    tab-size: 4;
    white-space: pre;
    word-wrap: normal;
    overflow-wrap: normal;
    border: none;
    margin: 0;
}

.editor-highlight {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    color: var(--p-text);
    background: transparent;
    will-change: transform;
}

.editor-textarea {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;
    color: transparent;
    caret-color: var(--p-text);
    outline: none;
    resize: none;
    overflow: scroll;
    z-index: 1;
}

.editor-textarea::selection {
    background: rgba(143,170,135,0.35);
    color: transparent;
}

/* News editor textarea — visible text (no syntax highlight overlay by default) */
.editor-textarea.news-editor-textarea {
    color: var(--p-text);
    background: var(--p-bg);
}

.editor-textarea.news-editor-textarea::selection {
    color: var(--p-text);
}

/* When find is active, news editor switches to overlay mode like wiki editor */
.editor-textarea.news-editor-textarea.find-active {
    color: transparent;
    background: transparent;
}

.editor-textarea.news-editor-textarea.find-active::selection {
    color: transparent;
}

.news-editor-highlight {
    display: none;
    padding: 16px 20px;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.news-editor-highlight.find-active {
    display: block;
}

/* Syntax highlight tokens */
.hl-heading { color: #d4a65d; font-weight: 600; }
.hl-bold { color: #ddb67d; font-weight: 600; }
.hl-italic { color: #c8b5d0; font-style: italic; }
.hl-link { color: #89b5c9; }
.hl-item-ref { color: #b8e6d5; }
.hl-hint { color: #d89b6a; }
.hl-inline-code { color: #9bb4c4; }
.hl-code-fence { color: #7a7064; }

/* Find match highlights */
.hl-find {
    background: rgba(212, 166, 93, 0.4);
    border-radius: 2px;
    outline: 1px solid rgba(212, 166, 93, 0.35);
}
.hl-find-active {
    background: rgba(143, 170, 135, 0.6);
    border-radius: 2px;
    outline: 2px solid rgba(143, 170, 135, 0.8);
}

/* Drag & drop zone overlay */
.editor-drop-zone {
    position: absolute;
    inset: 0;
    background: rgba(143,170,135,0.12);
    border: 2px dashed var(--p-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
}

.drop-zone-text {
    font-family: 'Silkscreen', monospace;
    font-size: 1rem;
    color: var(--p-accent);
    background: var(--p-card);
    padding: 12px 24px;
    border: 1px solid var(--p-accent);
}

/* History modal content */
.history-body {
    display: flex;
    flex: 1;
    min-height: 0;
    max-height: 60vh;
    overflow: hidden;
}

.history-list {
    width: 260px;
    min-width: 260px;
    overflow-y: auto;
    border-right: 1px solid var(--p-border);
}

.history-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(58,58,64,0.5);
    transition: background 0.12s;
}

.history-item:hover, .history-item.active {
    background: var(--p-card);
}

.history-item-msg {
    font-size: 0.8rem;
    color: var(--p-text);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-item-meta {
    font-size: 0.7rem;
    color: var(--p-text-muted);
}

.history-item-sha {
    font-size: 0.68rem;
    color: var(--p-text-muted);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    margin-top: 2px;
}

.history-loading, .history-empty {
    padding: 24px 14px;
    text-align: center;
    color: var(--p-text-muted);
    font-size: 0.82rem;
}

.history-load-more {
    display: block;
    margin: 8px auto;
}

.history-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.history-detail-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--p-text-muted);
    font-size: 0.82rem;
}

.history-detail-meta {
    padding: 10px 14px;
    font-size: 0.75rem;
    color: var(--p-text-secondary);
    border-bottom: 1px solid var(--p-border);
    line-height: 1.5;
}

.history-detail-meta code {
    background: var(--p-card);
    padding: 1px 4px;
    font-size: 0.7rem;
}

.history-detail-content {
    flex: 1;
    overflow: auto;
    padding: 10px 14px;
    margin: 0;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.76rem;
    line-height: 1.55;
    color: var(--p-text-secondary);
    white-space: pre-wrap;
    word-break: break-all;
}

.history-detail-tabs {
    display: flex;
    border-bottom: 1px solid var(--p-border);
    padding: 0 14px;
    gap: 0;
}

.history-tab {
    padding: 8px 14px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--p-text-muted);
    font-size: 0.75rem;
    font-family: 'Silkscreen', monospace;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
}

.history-tab:hover { color: var(--p-text-secondary); }
.history-tab.active { color: var(--p-accent); border-bottom-color: var(--p-accent); }

/* Diff lines */
.diff-line { padding: 1px 8px; font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; font-size: 0.76rem; line-height: 1.55; white-space: pre-wrap; word-break: break-all; }
.diff-add { background: rgba(143,170,135,0.15); color: var(--p-accent); }
.diff-del { background: rgba(194,123,107,0.15); color: var(--p-danger); }
.diff-ctx { color: var(--p-text-muted); }
.diff-sep { color: var(--p-text-muted); padding: 4px 8px; font-style: italic; font-size: 0.7rem; border-top: 1px solid var(--p-border); border-bottom: 1px solid var(--p-border); margin: 2px 0; }

.history-actions {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid var(--p-border);
    justify-content: flex-end;
}

/* Conflict modal */
.conflict-message {
    padding: 12px 18px;
    font-size: 0.82rem;
    color: var(--p-yellow);
    background: rgba(252,212,114,0.08);
    border-bottom: 1px solid var(--p-border);
}

.conflict-panels {
    display: flex;
    flex: 1;
    min-height: 0;
    max-height: 50vh;
    overflow: hidden;
}

.conflict-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.conflict-panel + .conflict-panel {
    border-left: 1px solid var(--p-border);
}

.conflict-panel-label {
    padding: 8px 12px;
    font-family: 'Silkscreen', monospace;
    font-size: 0.68rem;
    color: var(--p-text-muted);
    background: var(--p-card);
    border-bottom: 1px solid var(--p-border);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.conflict-content {
    flex: 1;
    overflow: auto;
    padding: 10px 12px;
    margin: 0;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--p-text-secondary);
    white-space: pre-wrap;
    word-break: break-all;
    background: var(--p-bg);
}

.conflict-actions {
    display: flex;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--p-border);
    justify-content: flex-end;
}

/* Upload toast */
.upload-toast {
    position: fixed;
    bottom: 80px;
    right: 24px;
    background: var(--p-card);
    border: 1px solid var(--p-border);
    padding: 10px 18px;
    font-size: 0.82rem;
    color: var(--p-text);
    z-index: 200;
    font-family: 'Silkscreen', monospace;
    font-size: 0.72rem;
    animation: fadeIn 0.2s;
}

/* Bottom bar */
.editor-bottombar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: var(--p-sidebar);
    border-top: 1px solid var(--p-border);
    flex-shrink: 0;
    height: var(--bottom-bar-height);
    box-sizing: border-box;
}

.editor-stats {
    font-size: 0.78rem;
    color: var(--p-text-muted);
    font-family: monospace;
}

.editor-actions {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

/* Commit message input */
.editor-commit-msg {
    flex: 1;
    margin: 0 16px;
    max-width: 400px;
}
.commit-msg-input {
    width: 100%;
    padding: 6px 10px;
    background: var(--bg-slot);
    border: 2px solid var(--border-mc);
    border-top-color: var(--border-mc);
    border-left-color: var(--border-mc);
    border-bottom-color: var(--border-highlight);
    border-right-color: var(--border-highlight);
    color: var(--p-text);
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.8rem;
    box-sizing: border-box;
}
.commit-msg-input:focus { outline: none; border-color: var(--p-accent); }
.commit-msg-input::placeholder { color: var(--p-text-muted); }

/* Outline panel */
.outline-toggle {
    position: relative;
    z-index: 2;
    width: 20px;
    min-width: 20px;
    background: var(--p-sidebar);
    border: none;
    border-left: 1px solid var(--p-border);
    color: var(--p-text-muted);
    font-size: 0.6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.outline-toggle:hover {
    color: var(--p-text);
    background: var(--bg-slot);
}
.editor-outline {
    width: 220px;
    min-width: 220px;
    background: var(--p-sidebar);
    border-left: 1px solid var(--p-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.outline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--p-border);
}
.outline-title {
    font-family: 'Silkscreen', monospace;
    font-size: 0.72rem;
    color: var(--p-text-secondary);
}
.outline-close {
    background: none;
    border: none;
    color: var(--p-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 2px 6px;
}
.outline-close:hover { color: var(--p-text); }
.outline-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
.outline-item {
    padding: 5px 14px;
    font-size: 0.8rem;
    color: var(--p-text-secondary);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.outline-item:hover { background: var(--bg-slot); color: var(--p-text); }
.outline-h1 { font-weight: 600; }
.outline-h2 { padding-left: 26px; }
.outline-h3 { padding-left: 38px; font-size: 0.75rem; }
.outline-empty {
    padding: 20px 14px;
    font-size: 0.78rem;
    color: var(--p-text-muted);
    text-align: center;
}

/* Autocomplete dropdown */
.autocomplete-dropdown {
    position: absolute;
    z-index: 50;
    background: var(--p-card);
    border: 2px solid var(--border-light);
    border-top-color: var(--border-highlight);
    border-left-color: var(--border-highlight);
    border-bottom-color: var(--border-mc);
    border-right-color: var(--border-mc);
    max-height: 240px;
    overflow-y: auto;
    min-width: 280px;
    max-width: 380px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.ac-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--p-text-secondary);
    transition: background 0.1s;
}
.ac-item:hover, .ac-item.ac-active { background: var(--bg-slot-hover); color: var(--p-text); }
.ac-item .item-icon { width: 20px; height: 20px; image-rendering: pixelated; }
.ac-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-id { font-size: 0.72rem; color: var(--p-text-muted); font-family: monospace; }

/* Active editors warning banner */
.editor-editing-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: rgba(216, 155, 106, 0.1);
    border-bottom: 1px solid rgba(216, 155, 106, 0.25);
    color: #D89B6A;
    font-size: 0.82rem;
    animation: fadeIn 0.3s;
}
.editing-icon { font-size: 1rem; }

/* Save confirmation modal */
.save-confirm-stats {
    padding: 12px 18px;
    font-size: 0.85rem;
    color: var(--p-text-secondary);
    border-bottom: 1px solid var(--p-border);
}
.save-confirm-stats .diff-stat { font-family: monospace; color: var(--p-accent); font-weight: 600; }
.save-confirm-diff {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.78rem;
    line-height: 1.6;
    max-height: 50vh;
}
.save-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 12px 18px;
    border-top: 1px solid var(--p-border);
}

/* Fullscreen mode */
body.editor-fullscreen .portal-sidebar,
body.editor-fullscreen .dirt-border { display: none !important; }
body.editor-fullscreen .portal-layout { display: block; }
body.editor-fullscreen .portal-main { margin-left: 0; max-width: none; padding: 0; height: 100vh; }
body.editor-fullscreen .portal-content { max-width: none; height: 100%; }
body.editor-fullscreen .editor-page {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: var(--p-bg);
    margin: 0;
}
body.editor-fullscreen .editor-split { flex: 1; }
body.editor-fullscreen .editor-page { height: 100% !important; }
body.editor-fullscreen .editor-topbar,
body.editor-fullscreen .editor-toolbar,
body.editor-fullscreen .editor-bottombar { flex-shrink: 0; }
body.editor-fullscreen .editor-bottombar { height: auto !important; }

/* ---- Modals ---- */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(2px);
}

.modal-dialog {
    background: var(--p-bg);
    border: 3px solid var(--border-light);
    border-top-color: var(--border-highlight);
    border-left-color: var(--border-highlight);
    border-bottom-color: var(--border-mc);
    border-right-color: var(--border-mc);
    width: 500px;
    max-width: 92vw;
    max-height: 72vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}

.modal-lg { width: 580px; }
.modal-sm { width: 360px; }

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

.modal-title {
    font-family: 'Silkscreen', monospace;
    font-size: 0.9rem;
}

.modal-close {
    background: none;
    border: none;
    color: var(--p-text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
}

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

.modal-options {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--p-border);
}

.modal-search {
    flex: 1;
    padding: 8px 12px;
    background: var(--bg-slot);
    border: 2px solid var(--border-mc);
    border-top-color: var(--border-mc);
    border-left-color: var(--border-mc);
    border-bottom-color: var(--border-highlight);
    border-right-color: var(--border-highlight);
    color: var(--p-text);
    font-size: 0.88rem;
    font-family: inherit;
}

.modal-search:focus {
    outline: none;
    border-color: var(--p-accent);
}

.modal-option-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--p-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.modal-option-input {
    padding: 6px 10px;
    background: var(--bg-slot);
    border: 2px solid var(--border-mc);
    border-top-color: var(--border-mc);
    border-left-color: var(--border-mc);
    border-bottom-color: var(--border-highlight);
    border-right-color: var(--border-highlight);
    color: var(--p-text);
    font-size: 0.82rem;
    font-family: inherit;
    width: 90px;
}

.modal-option-input:focus {
    outline: none;
    border-color: var(--p-accent);
}

.modal-list {
    overflow-y: auto;
    flex: 1;
    padding: 6px;
}

.modal-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    transition: background 0.1s;
    font-size: 0.88rem;
}

.modal-list-item:hover {
    background: var(--p-card);
}

/* Item picker specifics */
.item-row { gap: 10px; }

.item-icon {
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Minecraft', monospace;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: never;
}

.item-id {
    font-size: 0.72rem;
    color: var(--p-text-muted);
    font-family: monospace;
    flex-shrink: 0;
}

/* Animated sprite strip display — container clips to one frame, animation scrolls */
.mc-item-animated { display: inline-block; overflow: hidden; image-rendering: pixelated; vertical-align: middle; flex-shrink: 0; }
.mc-item-animated img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
/* Override .mc-item-slot img { height: 32px } so sprite strips keep their full height */
.mc-item-slot .mc-item-animated img { height: auto !important; width: 100% !important; }
.mc-item-glint { flex-shrink: 0; vertical-align: middle; }
.item-icon.mc-item-animated { width: 24px; height: 24px; }
.craft-slot .mc-item-animated { width: 36px; height: 36px; }
.craft-slot-result .mc-item-animated { width: 42px; height: 42px; }
.item-row .mc-item-glint { width: 24px; height: 24px; }
.craft-slot .mc-item-glint { width: 36px; height: 36px; }
.craft-slot-result .mc-item-glint { width: 42px; height: 42px; }

/* Hint picker */
.hint-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.hint-desc {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--p-text-muted);
}

/* Crafting Builder */
.crafting-builder {
    padding: 24px;
}

.crafting-grid-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.crafting-grid {
    display: grid;
    grid-template-columns: repeat(3, 54px);
    grid-template-rows: repeat(3, 54px);
    gap: 4px;
    padding: 12px;
    background: var(--p-sidebar);
    border: 3px solid var(--border-light);
    border-top-color: var(--border-highlight);
    border-left-color: var(--border-highlight);
    border-bottom-color: var(--border-mc);
    border-right-color: var(--border-mc);
}

.craft-slot {
    width: 54px;
    height: 54px;
    background: var(--bg-slot);
    border: 2px solid var(--border-mc);
    border-top-color: var(--border-mc);
    border-left-color: var(--border-mc);
    border-bottom-color: var(--border-highlight);
    border-right-color: var(--border-highlight);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, background 0.15s;
}

.craft-slot:hover {
    border-color: var(--p-accent);
    background: var(--bg-slot-hover);
}

.craft-slot-filled {
    border-color: rgba(143,170,135,0.4);
    background: rgba(143,170,135,0.06);
}

.craft-slot-empty {
    font-size: 1.2rem;
    color: var(--p-text-muted);
    opacity: 0.4;
}

.craft-slot-icon {
    width: 36px;
    height: 36px;
    image-rendering: pixelated;
}

.crafting-arrow {
    font-size: 2rem;
    color: var(--p-text-muted);
}

.crafting-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.craft-slot-result {
    width: 62px;
    height: 62px;
    border-width: 2px;
    border-style: dashed;
}

.craft-slot-result .craft-slot-icon {
    width: 42px;
    height: 42px;
}

.crafting-result-count {
    font-size: 0.78rem;
    color: var(--p-text-secondary);
}

.craft-count-input {
    width: 48px;
    padding: 3px 6px;
    background: var(--bg-slot);
    border: 1px solid var(--border-mc);
    color: var(--p-text);
    font-size: 0.82rem;
    text-align: center;
    font-family: inherit;
}

.craft-count-input:focus {
    outline: none;
    border-color: var(--p-accent);
}

.crafting-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--p-border);
}

/* =============================================
   Server Monitoring
   ============================================= */

/* Status badge */
.server-badge {
    display: inline-block;
    font-family: 'Silkscreen', monospace;
    font-size: 0.78rem;
    padding: 3px 12px;
    border: 2px solid;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.server-badge-online {
    color: var(--garden-green);
    border-color: rgba(143,170,135,0.4);
    background: rgba(143,170,135,0.1);
}

.server-badge-offline {
    color: var(--p-danger);
    border-color: rgba(194,123,107,0.4);
    background: rgba(194,123,107,0.1);
}

.server-badge-starting, .server-badge-stopping {
    color: var(--p-yellow);
    border-color: rgba(252,212,114,0.4);
    background: rgba(252,212,114,0.1);
}

/* Section header with uptime + restart */
.server-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: 214px; /* don't extend over player panel column */
}

.server-uptime {
    font-size: 0.78rem;
    color: var(--p-text-muted);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    margin-left: auto;
}

/* Confirm modal (player detail, punishments) */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
    backdrop-filter: blur(3px);
}

.confirm-overlay.visible {
    display: flex;
}

.confirm-dialog {
    width: 380px;
    max-width: 92vw;
    padding: 24px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.confirm-title {
    font-family: 'Silkscreen', monospace;
    font-size: 1rem;
    margin-bottom: 12px;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.confirm-message {
    font-size: 0.88rem;
    color: var(--p-text-secondary);
    line-height: 1.5;
    margin-bottom: 20px;
}

.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Power buttons */
.power-buttons {
    display: flex;
    gap: 6px;
}

.btn-power-start {
    color: var(--garden-green);
    border-color: rgba(143,170,135,0.4);
}

.btn-power-start:hover {
    background: var(--garden-green);
    color: #fff;
}

.btn-power-restart {
    color: var(--p-yellow);
    border-color: rgba(252,212,114,0.4);
}

.btn-power-restart:hover {
    background: var(--p-yellow);
    color: #1c1c1e;
}

/* Resource gauges — 4 gauge cards + 5th column reserved for player panel */
.resource-gauges {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 200px;
    gap: 14px;
    position: relative;
    overflow: visible;
}

.resource-gauge {
    padding: 16px;
}

.gauge-label {
    font-family: 'Silkscreen', monospace;
    font-size: 0.72rem;
    color: var(--p-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

.gauge-bar {
    height: 12px;
    background: var(--bg-slot);
    border: 2px solid var(--border-mc);
    border-top-color: var(--border-mc);
    border-left-color: var(--border-mc);
    border-bottom-color: var(--border-highlight);
    border-right-color: var(--border-highlight);
    overflow: hidden;
}

.gauge-fill {
    height: 100%;
    background: var(--garden-green);
    transition: width 0.5s ease;
}

.gauge-fill.gauge-warn { background: var(--p-yellow); }
.gauge-fill.gauge-crit { background: var(--p-danger); }

.gauge-value {
    font-size: 0.78rem;
    color: var(--p-text-secondary);
    margin-top: 6px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

/* Network split display */
.gauge-bar-split {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
}

.net-label {
    font-size: 0.78rem;
    color: var(--p-text-secondary);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

/* Console */
.console-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.console-status {
    font-size: 0.72rem;
    font-family: 'Silkscreen', monospace;
    color: var(--p-text-muted);
    padding: 2px 10px;
    border: 1px solid var(--p-border);
}

.console-connected {
    color: var(--garden-green);
    border-color: rgba(143,170,135,0.4);
    background: rgba(143,170,135,0.08);
}

/* Console search */
.console-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.console-search {
    width: 180px;
    padding: 4px 10px;
    background: var(--bg-slot);
    border: 1px solid var(--p-border);
    color: var(--p-text);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.72rem;
    outline: none;
    transition: border-color 0.2s;
}

.console-search:focus {
    border-color: var(--p-accent);
}

.console-search::placeholder {
    color: var(--p-text-muted);
}

.console-search-count {
    font-size: 0.68rem;
    color: var(--p-text-muted);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    white-space: nowrap;
}

.console-line-match {
    background: rgba(143,170,135,0.1);
}

.console-panel {
    overflow: hidden;
}

.console-output {
    height: clamp(350px, 45vh, 600px);
    overflow-y: auto;
    padding: 12px 14px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.78rem;
    line-height: 1.55;
    background: #0c0c0e;
    color: var(--p-text-secondary);
    scrollbar-width: thin;
    scrollbar-color: var(--bg-slot-hover) #0c0c0e;
}

.console-output::-webkit-scrollbar { width: 8px; }
.console-output::-webkit-scrollbar-track { background: #0c0c0e; }
.console-output::-webkit-scrollbar-thumb { background: var(--bg-slot-hover); border-radius: 0; }
.console-output::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

.console-line {
    white-space: pre-wrap;
    word-break: break-all;
}

.console-input-wrap {
    display: flex;
    border-top: 2px solid var(--border-mc);
}

.console-input {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg-slot);
    border: none;
    color: var(--p-text);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.82rem;
    outline: none;
}

.console-input::placeholder {
    color: var(--p-text-muted);
}

.console-input-wrap .btn-sm {
    border: none;
    border-left: 2px solid var(--border-mc);
    padding: 10px 18px;
}

/* Console scroll-to-bottom */
.console-output-wrap {
    position: relative;
}

.console-scroll-btn {
    position: absolute;
    bottom: 10px;
    right: 14px;
    width: 30px;
    height: 30px;
    background: var(--bg-slot);
    border: 2px solid var(--border-light);
    color: var(--p-text-secondary);
    font-size: 0.72rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: opacity 0.2s, background 0.2s;
}

.console-scroll-btn:hover {
    opacity: 1;
    background: var(--bg-slot-hover);
}

/* Gauge header (label + value on same line) */
.gauge-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.gauge-header .gauge-label {
    margin-bottom: 0;
}

.gauge-header .gauge-value {
    margin-top: 0;
}

/* Sparkline canvases */
.spark {
    display: block;
    width: 100%;
    height: 32px;
    margin-top: 8px;
}

/* Crash banner */
.banner-crash {
    background: rgba(194,123,107,0.15);
    border: 1px solid rgba(194,123,107,0.4);
    color: var(--p-danger);
    padding: 10px 16px;
    font-size: 0.85rem;
    margin-bottom: 16px;
}

/* Server monitor allows player panel to overflow downward */
#serverMonitor {
    overflow: visible;
}

/* Console leaves room for the player panel extending alongside it */
#consoleSection {
    margin-right: 214px;
}

/* Player panel: positioned in the 5th column area, out of flow so it doesn't stretch the row */
.resource-gauges .player-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    overflow: visible;
    z-index: 2;
}


.player-panel {
    padding: 0;
}

.player-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 2px solid var(--border-mc);
}

.player-panel-title {
    font-family: 'Silkscreen', monospace;
    font-size: 0.72rem;
    color: var(--p-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.player-panel-count {
    font-family: 'Silkscreen', monospace;
    font-size: 0.72rem;
    color: var(--garden-green);
    background: rgba(143,170,135,0.12);
    border: 1px solid rgba(143,170,135,0.3);
    padding: 2px 8px;
    min-width: 24px;
    text-align: center;
}

.player-panel-list {
    max-height: var(--player-list-max, 500px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--bg-slot-hover) transparent;
}

.player-panel-list::-webkit-scrollbar { width: 6px; }
.player-panel-list::-webkit-scrollbar-track { background: transparent; }
.player-panel-list::-webkit-scrollbar-thumb { background: var(--bg-slot-hover); }

.player-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(58,58,64,0.5);
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.player-entry:last-child {
    border-bottom: none;
}

.player-entry:hover {
    background: rgba(255,255,255,0.03);
}

.player-head {
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.player-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.player-name {
    font-size: 0.82rem;
    color: var(--p-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-session {
    font-size: 0.68rem;
    color: var(--p-text-muted);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

.player-panel-empty {
    padding: 20px 14px;
    text-align: center;
    font-size: 0.78rem;
    color: var(--p-text-muted);
}

/* ---- Responsive ---- */

@media (max-width: 768px) {
    /* Mobile topbar (always visible) */
    .portal-topbar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        background: var(--p-sidebar);
        border-bottom: 1px solid var(--p-border);
        position: sticky;
        top: 8px;
        z-index: 20;
    }

    .portal-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: none;
        border: 1px solid var(--p-border);
        border-radius: 4px;
        color: var(--p-text);
        font-size: 1.3rem;
        cursor: pointer;
        flex-shrink: 0;
        transition: background 0.15s;
    }

    .portal-menu-toggle:hover {
        background: var(--p-card);
    }

    /* Sidebar → slide-in drawer */
    .portal-sidebar {
        width: 260px;
        min-width: 260px;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        border-right: 1px solid var(--p-border);
    }

    .portal-sidebar.menu-open {
        transform: translateX(0);
    }

    /* Backdrop */
    .portal-menu-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .portal-menu-backdrop.visible {
        opacity: 1;
        pointer-events: auto;
    }

    .portal-nav-link {
        padding: 11px 12px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .portal-layout { flex-direction: column; }
    .portal-main {
        margin-left: 0;
        padding: 16px 12px;
        max-width: 100%;
        overflow-x: clip;
    }

    /* Header */
    .portal-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 20px;
    }

    .portal-header h1 { font-size: 1.15rem; }

    /* Cards stack vertically */
    .portal-cards {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 24px;
    }

    .portal-card {
        padding: 16px 18px;
        min-width: 0;
    }

    .portal-card-value { font-size: 1.4rem; }

    /* Dashboard: stack player panel on mobile */
    #consoleSection { margin-right: 0; }
    .resource-gauges { grid-template-columns: repeat(2, 1fr); }
    .resource-gauges .player-panel { position: static; width: 100%; grid-column: 1 / -1; }
    .player-panel-list { max-height: 200px; }

    /* Console */
    .console-output { height: 220px; }

    .server-section-header { flex-wrap: wrap; margin-right: 0; }
    .console-search-wrap { width: 100%; }
    .console-search { width: 100%; }

    /* Tables → stacked card layout */
    .portal-table-wrap {
        border: none;
        background: none;
    }

    .portal-table {
        font-size: 0.85rem;
    }

    .portal-table thead {
        display: none;
    }

    .portal-table tbody tr {
        display: block;
        background: var(--p-card);
        border: 3px solid var(--border-light);
        border-top-color: var(--border-highlight);
        border-left-color: var(--border-highlight);
        border-bottom-color: var(--border-mc);
        border-right-color: var(--border-mc);
        margin-bottom: 10px;
        padding: 10px 0;
    }

    .portal-table tbody tr:hover {
        background: var(--p-card);
    }

    .portal-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 14px;
        border-bottom: none;
        text-align: right;
    }

    .portal-table td::before {
        content: attr(data-label);
        font-family: 'Silkscreen', monospace;
        font-size: 0.68rem;
        color: var(--p-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        text-align: left;
        flex-shrink: 0;
        margin-right: 12px;
    }

    /* Hide label for action columns (empty data-label) */
    .portal-table td[data-label=""]::before {
        display: none;
    }

    .portal-table td[data-label=""] {
        justify-content: flex-end;
        padding-top: 8px;
        border-top: 1px solid rgba(255,255,255,0.04);
    }

    .portal-table td.actions {
        justify-content: flex-end;
    }

    /* Audit filters stack on mobile */
    .audit-filters-row { flex-direction: column; }
    .audit-filter-select,
    .audit-filter-input { width: 100%; min-width: 0; }

    /* Player search full width */
    .player-search { width: 100%; }
    .portal-header-actions { width: 100%; flex-wrap: wrap; }

    /* Forms */
    .portal-form {
        max-width: 100%;
    }

    .portal-form {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .portal-form.mc-panel {
        padding: 12px;
    }

    .form-row {
        overflow: hidden;
        min-width: 0;
    }

    .form-row-pair .form-row {
        flex: none;
        width: 100%;
    }

    .form-row input[type="text"],
    .form-row input[type="date"],
    .form-row select,
    .form-row textarea {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .form-row-pair { flex-direction: column; gap: 0; }

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

    .form-actions .btn-primary,
    .form-actions .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    /* Buttons: full width on mobile */
    .portal-header .btn-primary {
        width: 100%;
        justify-content: center;
    }

    /* Banners */
    .portal-banner {
        font-size: 0.82rem;
        padding: 10px 12px;
    }

    /* Pagination */
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Login page */
    .login-box {
        padding: 32px 20px;
        max-width: 100%;
    }

    .login-box.mc-panel {
        margin: 0 12px;
    }

    .login-logo { font-size: 1.3rem; }
    .login-title { font-size: 1rem; }
    .login-btn { font-size: 0.8rem; padding: 10px 20px; }

    /* Wiki file browser */
    .wiki-search-input { font-size: 0.82rem; padding: 8px 12px; }
    .wiki-file-row { padding: 8px 12px 8px 24px; font-size: 0.82rem; flex-wrap: wrap; gap: 2px; }
    .wiki-edit-info { margin-left: 0; }
    .wiki-section-toggle { padding: 8px 12px; font-size: 0.72rem; }

    /* Wiki editor */
    .editor-page {
        margin: 0;
    }

    .editor-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px 12px;
    }

    .editor-topbar-left { width: 100%; }
    .editor-topbar-right { width: 100%; justify-content: flex-end; flex-wrap: wrap; }

    .editor-title { font-size: 0.85rem; }
    .editor-breadcrumb { font-size: 0.68rem; }

    .editor-new-path { flex-wrap: wrap; padding: 8px 12px; }
    .new-path-input { min-width: 120px; }

    .editor-find-bar { right: 8px; }
    .find-field { width: 140px; font-size: 0.75rem; }

    .editor-toolbar {
        padding: 4px 8px;
    }

    .toolbar-section { flex-wrap: wrap; }

    .tb {
        padding: 4px 8px;
        font-size: 0.68rem;
    }

    .tb:hover {
        padding: 3px 7px;
    }

    .toolbar-sep {
        margin: 0 4px;
        height: 20px;
    }

    .editor-gutter {
        display: none;
    }

    .editor-highlight,
    .editor-textarea {
        padding: 10px 10px;
        font-size: 0.78rem;
    }

    .editor-split {
        min-height: 300px;
    }

    /* Disable split preview and outline on mobile */
    .editor-split.split-active .editor-wrap { width: 100%; }
    .editor-resizer { display: none !important; }
    .editor-preview { display: none !important; }
    .outline-toggle { display: none !important; }
    .editor-outline { display: none !important; }
    .editor-commit-msg { display: none; }

    /* Conflict/history modals: stack panels vertically */
    .conflict-panels { flex-direction: column; max-height: 60vh; }
    .conflict-panel + .conflict-panel { border-left: none; border-top: 1px solid var(--p-border); }
    .conflict-actions { flex-wrap: wrap; }
    .history-body { flex-direction: column; }
    .history-list { width: 100%; min-width: 0; max-height: 200px; border-right: none; border-bottom: 1px solid var(--p-border); }

    .editor-bottombar {
        padding: 8px 12px;
        flex-wrap: wrap;
        gap: 8px;
    }
    .editor-page { height: auto; }

    .editor-actions { width: 100%; justify-content: flex-end; }

    .editor-stats { font-size: 0.72rem; }

    .help-columns {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    /* Modals */
    .modal-dialog {
        max-width: 96vw;
        max-height: 80vh;
    }

    .modal-options {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .modal-option-input { width: 100%; }

    /* Crafting builder */
    .crafting-grid-wrap {
        flex-direction: column;
        gap: 12px;
    }

    .crafting-grid {
        grid-template-columns: repeat(3, 48px);
        grid-template-rows: repeat(3, 48px);
        padding: 8px;
    }

    .craft-slot {
        width: 48px;
        height: 48px;
    }

    .craft-slot-icon { width: 32px; height: 32px; }

    .craft-slot-result { width: 56px; height: 56px; }
    .craft-slot-result .craft-slot-icon { width: 38px; height: 38px; }

    .crafting-builder { padding: 16px; }

    /* News editor (mobile) */
    .news-meta-bar { flex-direction: column; padding: 10px 12px; gap: 8px; }
    .news-meta-short { width: 100%; }
    .news-meta-field:first-child { min-width: 0; }
    .news-editor-split { min-height: 300px; }
    .news-actions .btn-sm { padding: 3px 6px; font-size: 0.68rem; }
}

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

/* Small phones */
@media (max-width: 400px) {
    .portal-header h1 { font-size: 1rem; }
    .portal-main { padding: 12px 8px; }

    .help-columns { grid-template-columns: 1fr; }
    .resource-gauges { grid-template-columns: 1fr; }
    .console-output { height: 180px; font-size: 0.72rem; }
    .player-profile-card { flex-direction: column; text-align: center; }
    .player-header-stats { justify-content: center; }
    .player-header-actions { justify-content: center; }
    .player-detail-grid { grid-template-columns: 1fr; }
}

/* =============================================
   Player Management
   ============================================= */

.player-search {
    padding: 8px 14px;
    background: var(--p-bg);
    border: 1px solid var(--p-border);
    border-radius: 4px;
    color: var(--p-text);
    font-size: 0.85rem;
    width: 260px;
    outline: none;
    transition: border-color 0.2s;
}
.player-search:focus {
    border-color: var(--p-accent);
}

.portal-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Player table */
.portal-table-wrap {
    overflow-x: auto;
}
.portal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.portal-table th {
    text-align: left;
    padding: 10px 14px;
    color: var(--p-muted);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--p-border);
    user-select: none;
}
.portal-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--p-border);
    vertical-align: middle;
}
.portal-table tbody tr:last-child td { border-bottom: none; }

.player-row {
    cursor: pointer;
    transition: background 0.15s;
}
.player-row:hover {
    background: var(--p-card-hover);
}

.player-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.player-head {
    width: 24px;
    height: 24px;
    border-radius: 2px;
    image-rendering: pixelated;
}

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

.sortable {
    cursor: pointer;
    position: relative;
    padding-right: 20px !important;
}
.sortable::after {
    content: '⇕';
    position: absolute;
    right: 4px;
    opacity: 0.3;
    font-size: 0.7rem;
}
.sortable.sorted-asc::after { content: '↑'; opacity: 0.8; }
.sortable.sorted-desc::after { content: '↓'; opacity: 0.8; }

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

/* Rank badge — base in mc-shared.css; per-context size below */
.rank-badge-prefix {
    font-size: 0.65rem;
    padding: 3px 8px;
}

/* Player profile */
.portal-back {
    color: var(--p-muted);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.15s;
}
.portal-back:hover { color: var(--p-text); }

.player-profile {
    margin-bottom: 24px;
}

.player-profile-card {
    display: flex;
    gap: 24px;
    padding: 24px;
    margin-bottom: 20px;
    align-items: center;
}
.player-profile-skin {
    image-rendering: auto;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
    flex-shrink: 0;
}
.player-profile-info {
    flex: 1;
}
.player-profile-name {
    margin: 0 0 4px;
    font-size: 1.4rem;
    color: var(--p-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.online-badge {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8FAA87;
    background: rgba(138, 170, 135, 0.15);
    padding: 2px 8px;
    border-radius: 8px;
    font-family: 'Silkscreen', monospace;
}
.player-profile-nick {
    font-size: 0.8rem;
    margin-bottom: 8px;
}
.player-profile-rank {
    margin: 8px 0;
}
.player-profile-meta {
    font-size: 0.8rem;
    margin-top: 4px;
}
.player-profile-meta code {
    font-size: 0.75rem;
    background: var(--p-bg);
    padding: 2px 6px;
    border-radius: 3px;
}

/* Active punishment banner */
.punishment-alert {
    background: rgba(194, 123, 107, 0.1);
    border: 1px solid rgba(194, 123, 107, 0.3);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 16px;
}
.punishment-alert h3 {
    margin: 0 0 10px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #c27b6b;
}
.punishment-alert-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 0.82rem;
    color: var(--p-text);
}
.punishment-alert-item + .punishment-alert-item {
    border-top: 1px solid rgba(194, 123, 107, 0.15);
}
.punishment-alert-type {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    min-width: 44px;
}
.punishment-alert-item.punishment-ban .punishment-alert-type { color: #c27b6b; }
.punishment-alert-item.punishment-mute .punishment-alert-type { color: #d89b6a; }
.punishment-alert-item.punishment-warning .punishment-alert-type { color: #fcd472; }
.punishment-alert-reason {
    flex: 1;
    color: var(--p-muted);
}
.punishment-alert-duration {
    font-size: 0.75rem;
    color: var(--p-muted);
    white-space: nowrap;
}
.punishment-alert-by {
    font-size: 0.75rem;
    color: var(--p-muted);
    white-space: nowrap;
}

/* Inline header stats */
.player-header-stats {
    display: flex;
    gap: 24px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.player-header-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.player-header-stat-label {
    font-size: 0.65rem;
    color: var(--p-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.player-header-stat-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--p-text);
    font-family: 'Silkscreen', monospace;
}
.vanish-time {
    font-size: 0.7rem;
    font-weight: 400;
    color: #9BB4C4;
    font-family: inherit;
    display: block;
    margin-top: 2px;
}

/* ── Gallery Admin ────────────────────────────────────── */

.gallery-upload-form {
    display: block;
}

.gallery-upload-fields {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.gallery-upload-preview {
    width: 240px;
    min-height: 160px;
    background: var(--bg-slot);
    border: 2px dashed var(--border-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.gallery-upload-preview img {
    border-radius: 2px;
}

.gallery-upload-preview.gallery-drag-over {
    border-color: var(--p-accent);
    background: rgba(143, 170, 135, 0.08);
}

.gallery-change-btn {
    cursor: pointer;
    color: var(--p-accent);
    font-size: 0.75rem;
    margin-top: 4px;
    display: block;
    text-align: center;
}

.gallery-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: var(--p-text-muted);
    font-size: 0.8rem;
    padding: 16px;
    text-align: center;
}

.gallery-upload-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gallery-upload-meta label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gallery-field-label {
    font-size: 0.75rem;
    color: var(--p-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gallery-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.gallery-admin-card {
    background: var(--p-card);
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity 0.15s;
}

.gallery-admin-thumb {
    height: 140px;
    overflow: hidden;
    background: var(--bg-slot);
    position: relative;
}

.gallery-admin-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.gallery-admin-info {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gallery-admin-edit {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gallery-admin-edit label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gallery-admin-edit .portal-input {
    font-size: 0.8rem;
    padding: 4px 8px;
}

.gallery-admin-actions {
    padding: 8px 12px;
    border-top: 1px solid var(--border-light);
    display: flex;
    gap: 8px;
}

@media (max-width: 600px) {
    .gallery-upload-fields {
        flex-direction: column;
    }
    .gallery-upload-preview {
        width: 100%;
    }
}

/* ── Staff Activity Cards ─────────────────────────────── */

.sa-section-title {
    margin-bottom: 16px;
    font-size: 1rem;
    color: var(--p-text);
}

.sa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

@keyframes saCardIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.sa-card {
    background: var(--p-card);
    border: 3px solid var(--border-light);
    border-top-color: var(--border-highlight);
    border-left-color: var(--border-highlight);
    border-bottom-color: var(--border-mc);
    border-right-color: var(--border-mc);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    animation: saCardIn 0.35s ease both;
}

.sa-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.sa-card-online {
    border-top-color: rgba(143, 170, 135, 0.5);
    border-left-color: rgba(143, 170, 135, 0.4);
    box-shadow: inset 0 0 12px rgba(143, 170, 135, 0.06);
}

.sa-card-unavailable {
    opacity: 0.5;
}

/* Card header: avatar + name + role + online badge */
.sa-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sa-player-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.sa-player-link:hover .sa-player-name {
    color: var(--p-accent);
}

.sa-avatar {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    border: 2px solid var(--border-light);
    flex-shrink: 0;
}

.sa-player-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sa-player-name {
    font-family: 'Silkscreen', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--p-text);
    transition: color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sa-card-header .tag {
    font-size: 0.55rem;
    padding: 1px 6px;
}

.sa-card-header .online-badge {
    flex-shrink: 0;
    font-size: 0.55rem;
    padding: 2px 7px;
}

/* Vanish gauge */
.sa-vanish {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sa-vanish-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sa-vanish-label {
    font-family: 'Silkscreen', monospace;
    font-size: 0.6rem;
    color: var(--p-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sa-vanish-value {
    font-family: 'Silkscreen', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--garden-green);
}

.sa-vanish-value.vanish-warn { color: var(--p-yellow); }
.sa-vanish-value.vanish-crit { color: var(--p-danger); }

.sa-vanish .gauge-bar {
    height: 8px;
}

/* Stat row */
.sa-stats {
    display: flex;
    gap: 0;
    border-top: 1px solid var(--border-light);
    padding-top: 10px;
}

.sa-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sa-stat + .sa-stat {
    border-left: 1px solid var(--border-light);
    padding-left: 12px;
}

.sa-stat-label {
    font-size: 0.6rem;
    color: var(--p-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sa-stat-value {
    font-family: 'Silkscreen', monospace;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--p-text);
}

.sa-stat-online {
    color: var(--garden-green);
}

@media (max-width: 600px) {
    .sa-grid {
        grid-template-columns: 1fr;
    }
}

/* Staff section: notes + punishments side by side */
.player-staff-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

/* Balance display */
.player-balance {
    font-size: 0.85rem;
    color: var(--p-text);
    margin-top: 6px;
}
.player-balance .balance-amount {
    font-family: 'Silkscreen', monospace;
    color: #D4A65D;
}

/* Punishment clean record */
.punishment-clean {
    color: #8FAA87;
    font-size: 0.85rem;
    padding: 12px 0;
}

/* Section count - active variant */
.section-count-active {
    color: #c27b6b;
}

/* Full-width grid item */
.player-detail-full {
    grid-column: 1 / -1;
}

/* Land links */
a.detail-item-name.land-link,
a.detail-item-name.land-member-link {
    text-decoration: none;
    transition: color 0.15s;
}
a.detail-item-name.land-link:hover,
a.detail-item-name.land-member-link:hover {
    text-decoration: underline;
}

/* Land list grid */
.land-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 16px;
}
.land-card {
    padding: 18px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
}
.land-card:hover {
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-1px);
}
.land-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.land-card-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--p-text);
}
.land-card-owner {
    font-size: 0.8rem;
    color: var(--p-muted);
    margin-bottom: 14px;
}
.land-card-owner-link {
    color: var(--p-accent);
    text-decoration: none;
}
.land-card-owner-link:hover {
    text-decoration: underline;
}
.land-card-stats {
    display: flex;
    gap: 20px;
}
.land-card-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.land-card-stat-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--p-text);
    font-family: 'Silkscreen', monospace;
}
.land-card-stat-label {
    font-size: 0.6rem;
    color: var(--p-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Land detail page */
.land-profile-card {
    display: flex;
    gap: 24px;
    padding: 24px;
    margin-bottom: 20px;
    align-items: center;
}
.land-profile-info {
    flex: 1;
}
.land-profile-name {
    margin: 0 0 8px;
    font-size: 1.4rem;
    color: var(--p-text);
}
.land-profile-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    margin-bottom: 4px;
}
.land-type-badge {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #7A9B76;
    background: rgba(122, 155, 118, 0.15);
    padding: 2px 8px;
    border-radius: 8px;
}
.land-owner-link {
    color: var(--p-accent);
    text-decoration: none;
}
.land-owner-link:hover {
    text-decoration: underline;
}

/* Land Management Actions */
.land-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.land-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--p-border);
}

.land-action-row:last-child {
    border-bottom: none;
}

.land-action-label {
    font-size: 0.85rem;
    color: var(--p-text-muted);
    min-width: 140px;
    flex-shrink: 0;
}

.land-action-field {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: flex-end;
}

.land-input {
    background: var(--p-card);
    border: 1px solid var(--p-border);
    color: var(--p-text);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: inherit;
    min-width: 160px;
    max-width: 240px;
}

.land-input:focus {
    outline: none;
    border-color: var(--p-accent);
}

.land-action-danger {
    padding-top: 16px;
    margin-top: 4px;
    border-top: 1px solid var(--p-danger);
    border-bottom: none;
}

@media (max-width: 600px) {
    .land-action-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .land-action-field {
        width: 100%;
        justify-content: flex-start;
    }
    .land-input {
        flex: 1;
        min-width: 0;
    }
}

/* Portal Input (shared base for settings, forms) */
.portal-input {
    background: var(--p-card);
    border: 1px solid var(--p-border);
    color: var(--p-text);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: inherit;
    width: 100%;
}

.portal-input:focus {
    outline: none;
    border-color: var(--p-accent);
}

.portal-input::placeholder {
    color: var(--p-text-muted);
}

/* Settings Page */
.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.settings-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-field label {
    font-size: 0.8rem;
    color: var(--p-text-muted);
    font-weight: 500;
}

.settings-field-wide {
    grid-column: 1 / -1;
}

.settings-hint {
    font-size: 0.75rem;
    color: var(--p-text-muted);
    opacity: 0.7;
}

.settings-toggles {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.settings-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    padding: 10px 0;
}

.settings-toggle input[type="checkbox"] {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    accent-color: var(--p-accent);
    cursor: pointer;
}

.settings-toggle-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-toggle-label strong {
    font-size: 0.9rem;
    color: var(--p-text);
}

.vote-site-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.vote-site-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vote-site-num {
    font-family: 'Silkscreen', monospace;
    font-size: 0.75rem;
    color: var(--p-text-muted);
    min-width: 24px;
}

.vote-site-name {
    flex: 1;
    max-width: 200px;
}

.vote-site-url {
    flex: 2;
}

.settings-actions {
    padding: 16px 0;
    border-top: 1px solid var(--p-border);
    margin-top: 8px;
}

@media (max-width: 600px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
    .vote-site-row {
        flex-wrap: wrap;
    }
    .vote-site-name,
    .vote-site-url {
        flex: 1 1 100%;
        max-width: none;
    }
}

.text-link {
    color: var(--p-accent);
    text-decoration: none;
}
.text-link:hover {
    text-decoration: underline;
}

/* Detail grid */
.player-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.player-detail-section {
    padding: 16px;
}
.player-detail-section h3 {
    margin: 0 0 12px;
    font-size: 0.85rem;
    color: var(--p-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.player-detail-section h3 .section-subtitle {
    font-size: 0.7rem;
    color: var(--p-text-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 6px;
}
.vanish-history-chart-wrap {
    position: relative;
    width: 100%;
}
.vanish-history-chart-wrap canvas {
    display: block;
    max-width: 100%;
    height: auto;
}
.vanish-history-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--p-text-muted);
    font-size: 0.85rem;
}
.player-detail-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.player-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    padding: 4px 0;
    color: var(--p-text);
}
/* Detail lists (homes, warps, lands) */
.detail-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.detail-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 4px;
    font-size: 0.82rem;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.detail-list-item:last-child { border-bottom: none; }
.detail-list-item:hover {
    background: rgba(255,255,255,0.03);
}
.detail-item-name {
    color: var(--p-text);
    font-weight: 600;
    white-space: nowrap;
    min-width: 60px;
}
.detail-item-coords {
    color: var(--p-muted);
    font-size: 0.75rem;
    font-family: 'Silkscreen', monospace;
    letter-spacing: -0.3px;
    margin-left: auto;
    white-space: nowrap;
}
.coord-world {
    color: rgba(255,255,255,0.3);
    margin-right: 2px;
}
.coord-xyz {
    color: var(--p-muted);
    min-width: 28px;
    display: inline-block;
    text-align: right;
}
.detail-item-meta {
    color: var(--p-muted);
    font-size: 0.75rem;
    margin-left: auto;
    white-space: nowrap;
}
.detail-item-badge {
    font-size: 0.68rem;
    color: var(--p-muted);
    background: rgba(255,255,255,0.05);
    padding: 1px 6px;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}
.detail-copy {
    background: none;
    border: 1px solid var(--p-border);
    color: var(--p-muted);
    cursor: pointer;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 0.7rem;
    line-height: 1;
    flex-shrink: 0;
    transition: all 0.15s;
}
.detail-copy:hover {
    background: rgba(255,255,255,0.08);
    color: var(--p-text);
    border-color: rgba(255,255,255,0.15);
}
.detail-land-owned .detail-item-name { color: #7A9B76; }
.detail-land-trusted .detail-item-name { color: var(--p-muted); }
.detail-list-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--p-muted);
    padding: 6px 10px 2px;
    font-weight: 600;
    opacity: 0.7;
}
.detail-list-divider {
    height: 1px;
    background: var(--p-border);
    margin: 6px 10px;
}
.detail-show-all {
    background: none;
    border: none;
    color: var(--p-accent);
    font-size: 0.78rem;
    padding: 6px 10px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    opacity: 0.8;
    transition: opacity 0.15s;
}
.detail-show-all:hover {
    opacity: 1;
    text-decoration: underline;
}
.section-count {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--p-muted);
    margin-left: 4px;
}

/* Tag badges */
.tag-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.tag-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: 'Minecraft', monospace;
    font-size: 0.7rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    white-space: nowrap;
    transition: opacity 0.2s, border-color 0.2s, background 0.2s;
}
.tag-owned {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
}
.tag-locked {
    opacity: 0.35;
}
.tag-locked:hover {
    opacity: 0.7;
}
.tag-active {
    background: rgba(138, 170, 135, 0.15);
    border-color: rgba(138, 170, 135, 0.5);
    box-shadow: 0 0 8px rgba(138, 170, 135, 0.15);
    position: relative;
    animation: tagPulse 2s ease-in-out infinite;
}
@keyframes tagPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(143, 170, 135, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(143, 170, 135, 0); }
}
.tag-active::after {
    content: 'Equipped';
    position: absolute;
    top: -7px;
    right: -4px;
    font-family: inherit;
    font-size: 0.45rem;
    background: #6B7A5E;
    color: #f2ebd7;
    padding: 0 4px;
    border-radius: 3px;
    line-height: 1.3;
    letter-spacing: 0.3px;
}

/* Status Controls */
.status-controls {
    padding: 12px 20px;
    margin-bottom: 16px;
}
.status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.status-location {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}
.status-label-muted {
    color: var(--p-muted);
    font-size: 0.75rem;
    font-style: italic;
}
.status-world {
    color: var(--p-accent);
    text-transform: capitalize;
    font-weight: 600;
}
.status-coords {
    color: var(--p-muted);
    font-family: 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.8rem;
}
.status-toggles {
    display: flex;
    align-items: center;
    gap: 8px;
}
.status-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    background: rgba(194, 123, 107, 0.1);
    border: 1px solid rgba(194, 123, 107, 0.35);
    border-radius: 20px;
    color: #C27B6B;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}
.status-toggle:hover:not(:disabled) {
    background: rgba(194, 123, 107, 0.2);
    border-color: rgba(194, 123, 107, 0.5);
}
.status-toggle:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.status-toggle.active {
    background: rgba(138, 170, 135, 0.15);
    border-color: rgba(138, 170, 135, 0.5);
    color: #8FAA87;
}
.status-toggle.active:hover:not(:disabled) {
    background: rgba(138, 170, 135, 0.25);
}
.status-toggle-icon {
    font-size: 0.9rem;
}
.status-toggle-label {
    font-weight: 500;
}
.status-gamemode {
    padding: 5px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: var(--p-text);
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s;
}
.status-gamemode:hover:not(:disabled) {
    border-color: rgba(255,255,255,0.2);
}
.status-gamemode:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.status-gamemode option {
    background: var(--p-card);
    color: var(--p-text);
}
.gm-survival {
    border-color: rgba(138, 170, 135, 0.5);
    color: #8FAA87;
}
.gm-creative {
    border-color: rgba(212, 166, 93, 0.5);
    color: #D4A65D;
}
.gm-adventure {
    border-color: rgba(137, 181, 201, 0.5);
    color: #89B5C9;
}
.gm-spectator {
    border-color: rgba(200, 181, 208, 0.5);
    color: #C8B5D0;
}
.status-effects {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.status-effect-badge {
    padding: 2px 8px;
    background: rgba(137, 181, 201, 0.12);
    border: 1px solid rgba(137, 181, 201, 0.3);
    border-radius: 10px;
    font-size: 0.7rem;
    color: #89B5C9;
}

/* Punishments */
.punishment-timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.punishment-entry {
    padding: 14px 16px;
    background: var(--p-card);
    border-radius: 6px;
    border-left: 3px solid var(--p-border);
}
.punishment-ban { border-left-color: #c27b6b; }
.punishment-mute { border-left-color: #d89b6a; }
.punishment-warn { border-left-color: #fcd472; }
.punishment-kick { border-left-color: #6c757d; }

.punishment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.punishment-type {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.punishment-ban .punishment-type { color: #c27b6b; }
.punishment-mute .punishment-type { color: #d89b6a; }
.punishment-warn .punishment-type { color: #fcd472; }
.punishment-kick .punishment-type { color: #6c757d; }

.punishment-active {
    font-size: 0.65rem;
    padding: 1px 6px;
    background: rgba(194, 123, 107, 0.2);
    color: #c27b6b;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.punishment-date {
    font-size: 0.75rem;
    color: var(--p-muted);
}
.punishment-reason {
    font-size: 0.85rem;
    color: var(--p-text);
    margin-bottom: 6px;
}
.punishment-meta {
    display: flex;
    gap: 16px;
    font-size: 0.75rem;
    color: var(--p-muted);
}

/* Punishment actions */
.punishment-actions {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}
.btn-punish {
    font-size: 0.78rem;
    padding: 4px 12px;
    background: transparent;
    border: 1px solid;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
}
.btn-punish-warn { color: #fcd472; border-color: #fcd472; }
.btn-punish-warn:hover { background: rgba(252, 212, 114, 0.1); }
.btn-punish-kick { color: #6c757d; border-color: #6c757d; }
.btn-punish-kick:hover { background: rgba(108, 117, 125, 0.1); }
.btn-punish-mute { color: #d89b6a; border-color: #d89b6a; }
.btn-punish-mute:hover { background: rgba(216, 155, 106, 0.1); }
.btn-punish-ban { color: #c27b6b; border-color: #c27b6b; }
.btn-punish-ban:hover { background: rgba(194, 123, 107, 0.1); }

.punishment-manageable {
    cursor: pointer;
    transition: background 0.15s;
}
.punishment-manageable:hover {
    background: rgba(255, 255, 255, 0.03);
}
.punishment-expanded {
    background: rgba(255, 255, 255, 0.03);
}
.punishment-manage-hint {
    font-size: 0.65rem;
    color: var(--p-muted);
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.15s;
}
.punishment-manageable:hover .punishment-manage-hint {
    opacity: 1;
}
.punishment-revoked {
    font-size: 0.65rem;
    padding: 1px 6px;
    background: rgba(143, 170, 135, 0.15);
    color: #8faa87;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.punishment-expired {
    font-size: 0.65rem;
    padding: 1px 6px;
    background: rgba(108, 117, 125, 0.15);
    color: #6c757d;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.punishment-revoked-meta {
    font-size: 0.7rem;
    color: #8faa87;
    margin-top: 4px;
    font-style: italic;
}
.punishment-actions-drawer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--p-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.punishment-drawer-revoke {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.punishment-revoke-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.punishment-revoke-reason,
.punishment-modify-input,
.punishment-modify-reason {
    padding: 4px 8px;
    background: var(--p-bg);
    border: 1px solid var(--p-border);
    border-radius: 4px;
    color: var(--p-text);
    font-size: 0.75rem;
    font-family: inherit;
}
.punishment-revoke-reason { flex: 1; }
.punishment-modify-input { width: 100px; }
.punishment-modify-reason { flex: 1; }
.punishment-revoke-reason:focus,
.punishment-modify-input:focus,
.punishment-modify-reason:focus {
    outline: none;
    border-color: var(--p-accent);
}
.punishment-modify {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px dashed var(--p-border);
}
.punishment-modify-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.btn-punish-modify {
    font-size: 0.75rem;
    padding: 4px 12px;
    background: transparent;
    border: 1px solid #d89b6a;
    border-radius: 4px;
    cursor: pointer;
    color: #d89b6a;
    font-family: inherit;
    white-space: nowrap;
}
.btn-punish-modify:hover {
    background: rgba(216, 155, 106, 0.15);
}
.btn-punish-revoke {
    font-size: 0.75rem;
    padding: 4px 12px;
    background: transparent;
    border: 1px solid #c27b6b;
    border-radius: 4px;
    cursor: pointer;
    color: #c27b6b;
    font-family: inherit;
}
.btn-punish-revoke:hover {
    background: rgba(194, 123, 107, 0.15);
}

/* Punishment modal */
.punish-modal {
    width: 420px;
    max-width: 90vw;
}
.punish-form label {
    display: block;
    font-size: 0.8rem;
    color: var(--p-muted);
    margin: 10px 0 4px;
}
.punish-form label:first-child { margin-top: 0; }
.punish-form input[type="text"] {
    width: 100%;
    padding: 8px 10px;
    background: var(--p-bg);
    border: 1px solid var(--p-border);
    border-radius: 4px;
    color: var(--p-text);
    font-size: 0.85rem;
    font-family: inherit;
    box-sizing: border-box;
}
.punish-form input[type="text"]:focus {
    outline: none;
    border-color: var(--p-accent);
}
.punish-form input[type="text"]:disabled {
    opacity: 0.5;
}
.punish-duration-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}
.duration-preset {
    font-size: 0.75rem;
    padding: 3px 10px;
    background: var(--p-bg);
    border: 1px solid var(--p-border);
    border-radius: 4px;
    cursor: pointer;
    color: var(--p-text-muted);
    font-family: inherit;
}
.duration-preset:hover {
    border-color: var(--p-text-muted);
    color: var(--p-text);
}
.duration-preset.active {
    background: var(--p-accent);
    color: var(--p-bg);
    border-color: var(--p-accent);
}
.btn-warn { background: rgba(252, 212, 114, 0.2); color: #fcd472; border-color: #fcd472; }

/* Staff notes */
.note-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.note-entry {
    padding: 12px 14px;
    background: var(--p-card);
    border-radius: 6px;
}
.note-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.note-author {
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--p-text);
}
.note-date {
    font-size: 0.7rem;
    color: var(--p-muted);
}
.note-edit, .note-delete {
    margin-left: 0;
    background: none;
    border: none;
    color: var(--p-muted);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
}
.note-edit { margin-left: auto; }
.note-edit:hover { color: var(--p-accent); }
.note-delete:hover { color: #c27b6b; }
.note-edit-area {
    background: var(--p-bg);
    color: var(--p-text);
    border: 1px solid var(--p-border);
    border-radius: 4px;
    padding: 8px;
    font-family: inherit;
    font-size: 0.85rem;
}

.note-body {
    font-size: 0.85rem;
    color: var(--p-text);
    line-height: 1.5;
    white-space: pre-wrap;
}
.note-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.note-form textarea {
    background: var(--p-bg);
    border: 1px solid var(--p-border);
    border-radius: 4px;
    color: var(--p-text);
    padding: 10px;
    font-size: 0.85rem;
    resize: vertical;
    outline: none;
    font-family: inherit;
}
.note-form textarea:focus {
    border-color: var(--p-accent);
}
.note-form .btn {
    align-self: flex-end;
}

@media (max-width: 900px) {
    .player-staff-row { grid-template-columns: 1fr; }
    .player-detail-grid { grid-template-columns: 1fr; }
    .player-detail-full { grid-column: 1; }
}
@media (max-width: 600px) {
    .player-header-stats { gap: 16px; }
    .player-header-stat-value { font-size: 0.8rem; }
    .status-row { flex-direction: column; align-items: stretch; }
    .status-toggles { justify-content: center; flex-wrap: wrap; }
    .status-location { justify-content: center; }
}

/* =============================================
   My Player — Identity Awareness
   ============================================= */

/* Sidebar "My Player" link */
.portal-nav-myplayer {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.nav-myplayer-head {
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
    border-radius: 2px;
}

/* "You" tag in player list */
.player-me-tag {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--p-accent);
    background: rgba(143, 170, 135, 0.15);
    padding: 1px 6px;
    border-radius: 6px;
    margin-left: 6px;
    font-family: 'Silkscreen', monospace;
}

/* Vanished player indicator */
.player-vanished {
    opacity: 0.5;
}
.player-vanish-tag {
    font-size: 0.65rem;
    margin-left: 4px;
    opacity: 0.7;
    cursor: help;
}

/* Staff page player link */
.staff-player-link {
    color: inherit;
    text-decoration: none;
}
.staff-player-link:hover {
    color: var(--p-accent);
}

/* Highlighted row for "me" */
.player-row-me {
    background: rgba(143, 170, 135, 0.04);
}
.player-row-me:hover {
    background: rgba(143, 170, 135, 0.08);
}

/* "Yours" tag on land cards */
.land-card-mine {
    border-color: rgba(143, 170, 135, 0.25);
}

/* =============================================
   Animations & Polish
   ============================================= */

/* Page entrance — fade + slide up */
@keyframes portalFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.portal-main > * {
    animation: portalFadeIn 0.3s ease-out both;
}

/* Stagger child elements on page load */
.portal-main > *:nth-child(1) { animation-delay: 0s; }
.portal-main > *:nth-child(2) { animation-delay: 0.04s; }
.portal-main > *:nth-child(3) { animation-delay: 0.08s; }
.portal-main > *:nth-child(4) { animation-delay: 0.12s; }
.portal-main > *:nth-child(5) { animation-delay: 0.16s; }
.portal-main > *:nth-child(6) { animation-delay: 0.2s; }
.portal-main > *:nth-child(n+7) { animation-delay: 0.24s; }

/* SPA fade-out transition */
.portal-main.portal-exit,
.portal-content.portal-exit {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.15s ease-in, transform 0.15s ease-in;
}

/* Online badge pulse */
@keyframes onlinePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(143, 170, 135, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(143, 170, 135, 0); }
}

.online-badge {
    animation: onlinePulse 2s ease-in-out infinite;
}

/* MC Panel hover lift (for interactive panels) */
.land-card,
.portal-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.land-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Player table row slide in */
@keyframes rowSlideIn {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

.player-row {
    animation: rowSlideIn 0.25s ease-out both;
}

/* Stagger rows */
.player-row:nth-child(1) { animation-delay: 0s; }
.player-row:nth-child(2) { animation-delay: 0.02s; }
.player-row:nth-child(3) { animation-delay: 0.04s; }
.player-row:nth-child(4) { animation-delay: 0.06s; }
.player-row:nth-child(5) { animation-delay: 0.08s; }
.player-row:nth-child(6) { animation-delay: 0.1s; }
.player-row:nth-child(7) { animation-delay: 0.12s; }
.player-row:nth-child(8) { animation-delay: 0.14s; }
.player-row:nth-child(9) { animation-delay: 0.16s; }
.player-row:nth-child(10) { animation-delay: 0.18s; }
.player-row:nth-child(n+11) { animation-delay: 0.2s; }

/* Land cards stagger */
@keyframes cardFadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.land-card {
    animation: cardFadeIn 0.3s ease-out both;
}

.land-card:nth-child(1) { animation-delay: 0s; }
.land-card:nth-child(2) { animation-delay: 0.04s; }
.land-card:nth-child(3) { animation-delay: 0.08s; }
.land-card:nth-child(4) { animation-delay: 0.12s; }
.land-card:nth-child(5) { animation-delay: 0.16s; }
.land-card:nth-child(6) { animation-delay: 0.2s; }
.land-card:nth-child(n+7) { animation-delay: 0.24s; }

/* Detail section panels stagger */
.player-detail-section {
    animation: portalFadeIn 0.3s ease-out both;
}

.player-detail-grid .player-detail-section:nth-child(1) { animation-delay: 0.05s; }
.player-detail-grid .player-detail-section:nth-child(2) { animation-delay: 0.1s; }
.player-detail-grid .player-detail-section:nth-child(3) { animation-delay: 0.15s; }
.player-detail-grid .player-detail-section:nth-child(4) { animation-delay: 0.2s; }
.player-detail-grid .player-detail-section:nth-child(5) { animation-delay: 0.25s; }
.player-detail-grid .player-detail-section:nth-child(6) { animation-delay: 0.3s; }
.player-detail-grid .player-detail-section:nth-child(n+7) { animation-delay: 0.35s; }

/* Stat value highlight flash on SSE update */
@keyframes statFlash {
    0% { color: var(--p-accent); }
    100% { color: inherit; }
}

.stat-updated {
    animation: statFlash 0.8s ease-out;
}

/* Sidebar nav link hover indicator */
.portal-nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 60%;
    background: var(--p-text-muted);
    transition: transform 0.15s ease;
}

.portal-nav-link {
    position: relative;
}

.portal-nav-link:hover::before {
    transform: translateY(-50%) scaleY(1);
}

.portal-nav-link.nav-active::before {
    background: var(--garden-green);
    transform: translateY(-50%) scaleY(1);
}

/* Smooth transitions for live-updating elements */
#livePlaytime,
#liveBalance,
#liveOnline,
#liveLastSeen,
.land-stat-chunks,
.land-stat-members,
.land-stat-balance {
    transition: color 0.3s ease;
}

/* Profile skin hover float */
.player-profile-skin {
    transition: transform 0.3s ease;
}

.player-profile-skin:hover {
    transform: translateY(-4px) scale(1.02);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .portal-main > *,
    .player-row,
    .land-card,
    .player-detail-section,
    .online-badge,
    .tag-active {
        animation: none !important;
    }
    .portal-main.portal-exit {
        transition: none !important;
    }
}

/* ── Inventory Viewer ─────────────────────────────────── */
/* Inventory section needs visible overflow so tooltips can escape */
#inventorySection {
    overflow: visible;
    position: relative;
    z-index: 20;
}
#inventorySection .mc-item-slot:hover {
    z-index: 200;
}
#inventorySection .mc-tooltip {
    z-index: 1000;
}

.inv-offline-notice {
    font-size: 0.8rem;
    margin-bottom: 8px;
    font-style: italic;
}

.inv-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.inv-refresh {
    background: none;
    border: 1px solid var(--p-border);
    border-radius: 4px;
    cursor: pointer;
    color: var(--p-text-muted);
    font-size: 1rem;
    padding: 4px 8px;
    font-family: inherit;
}
.inv-refresh:hover {
    color: var(--p-text);
    border-color: var(--p-text-muted);
}
.inv-refresh-spin {
    animation: invRefreshSpin 0.8s linear infinite;
    pointer-events: none;
    opacity: 0.6;
}
@keyframes invRefreshSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.mc-hotbar-num {
    position: absolute;
    top: 1px;
    left: 2px;
    font-size: 9px;
    color: rgba(255,255,255,0.35);
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
    pointer-events: none;
    z-index: 1;
    line-height: 1;
}

.sk-slot {
    background: #6b6b6b !important;
}
.sk-pulse {
    animation: skPulse 1.5s ease-in-out infinite;
}
@keyframes skPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

.inv-dual {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.inv-panel-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* MC-style equipment row: armor | skin | offhand */
.inv-equip-row {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 8px;
}

.inv-armor {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.inv-skin {
    width: 160px;
    height: 204px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    border: 2px solid;
    border-color: #373737 #555 #555 #373737;
    flex-shrink: 0;
    overflow: hidden;
}
.inv-skin img {
    height: 100%;
    width: auto;
    image-rendering: auto;
}
.sk-skin {
    background: #555 !important;
}

.inv-offhand-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-self: stretch;
    flex-shrink: 0;
}

.inv-grid-9 {
    display: grid !important;
    grid-template-columns: repeat(9, 48px) !important;
    width: fit-content !important;
}

.inv-hotbar-divider {
    height: 6px;
}

.inv-main {
    display: flex;
    flex-direction: column;
}

/* Responsive: stack panels on narrow screens */
@media (max-width: 600px) {
    .inv-dual {
        flex-direction: column;
        gap: 20px;
    }
    .inv-equip-row {
        justify-content: center;
    }
    .inv-skin {
        width: 72px;
        height: 148px;
    }
    .inv-grid-9 {
        grid-template-columns: repeat(9, 1fr) !important;
        width: 100% !important;
        gap: 1px !important;
    }
    .inv-grid-9 .mc-item-slot {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1;
        min-width: 0;
        overflow: visible;
    }
    .inv-grid-9 .mc-item-slot img {
        width: 70% !important;
        height: 70% !important;
    }
    .inv-grid-9 .mc-item-animated {
        width: 70% !important;
        height: auto !important;
        aspect-ratio: 1;
    }
    .inv-grid-9 .mc-item-glint {
        width: 70% !important;
        height: 70% !important;
    }
    .inv-grid-9 .mc-item-animated img {
        width: 100% !important;
        height: auto !important;
    }
    .inv-grid-9 .mc-item-glint img {
        width: 100% !important;
        height: 100% !important;
    }
    .mc-hotbar-num {
        display: none;
    }
    .mc-ghost-icon {
        width: 70% !important;
        height: 70% !important;
    }
    /* Pinned tooltips: reposition for narrow screens */
    .inv-grid-9 .mc-tooltip.pinned {
        left: 0;
        transform: none;
        z-index: 1000;
    }
}

/* ===================== Toast Notifications ===================== */
.portal-toasts {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.portal-toast {
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #fff;
    background: var(--p-bg-elevated, #2a2a2a);
    border-left: 4px solid #89B5C9;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    cursor: pointer;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(100%);
    transition: none;
    max-width: 360px;
}
.portal-toast-show {
    animation: toast-slide-in 0.3s ease forwards;
}
.portal-toast-out {
    animation: toast-fade-out 0.3s ease forwards;
}
.portal-toast-success { border-left-color: #8FAA87; }
.portal-toast-error { border-left-color: #C27B6B; }
.portal-toast-warning { border-left-color: #D89B6A; }
.portal-toast-info { border-left-color: #89B5C9; }

@keyframes toast-slide-in {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes toast-fade-out {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(100%); }
}

/* ===================== Global Search ===================== */
.portal-search-wrap {
    position: relative;
    padding: 12px 16px 4px;
}
.portal-search-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--p-border);
    border-radius: 6px;
    background: var(--p-bg);
    color: var(--p-text);
    font-size: 0.82rem;
    outline: none;
    box-sizing: border-box;
}
.portal-search-input:focus {
    border-color: var(--p-accent);
}
.portal-search-input::placeholder {
    color: var(--p-text-muted);
}
.portal-search-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 16px;
    right: 16px;
    background: var(--p-bg-elevated, #1e1e1e);
    border: 1px solid var(--p-border);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    z-index: 100;
    max-height: 400px;
    overflow-y: auto;
}
.search-result-category {
    padding: 6px 12px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--p-text-muted);
    border-top: 1px solid var(--p-border);
}
.search-result-category:first-child {
    border-top: none;
}
.search-result-item {
    display: block;
    padding: 8px 12px;
    color: var(--p-text);
    text-decoration: none;
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.search-result-item:hover {
    background: var(--p-bg-hover, rgba(255,255,255,0.05));
}
.search-result-empty {
    padding: 16px 12px;
    color: var(--p-text-muted);
    font-size: 0.82rem;
    text-align: center;
}

/* ===================== Note Mentions & Links ===================== */
.note-mention {
    color: #DDB67D;
    text-decoration: none;
    font-weight: 500;
}
.note-mention:hover {
    text-decoration: underline;
}
.note-link {
    color: #89B5C9;
    text-decoration: none;
    word-break: break-all;
}
.note-link:hover {
    text-decoration: underline;
}

/* ===================== Punishment Filters ===================== */
.punishment-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.filter-btn {
    padding: 4px 10px;
    border: 1px solid var(--p-border);
    border-radius: 12px;
    background: transparent;
    color: var(--p-text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
}
.filter-btn:hover {
    border-color: var(--p-text);
    color: var(--p-text);
}
.filter-btn.filter-active {
    background: var(--p-accent);
    border-color: var(--p-accent);
    color: #fff;
}

/* ===================== Punishment Templates ===================== */
.punish-templates {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.punish-template-chip {
    padding: 5px 12px;
    border: 1px solid var(--p-border);
    border-radius: 16px;
    background: transparent;
    color: var(--p-text);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
}
.punish-template-chip:hover {
    border-color: var(--p-accent);
    background: rgba(255,255,255,0.05);
}
.punish-template-chip.active {
    background: var(--p-accent);
    border-color: var(--p-accent);
    color: #fff;
}

/* ===================== Activity Dashboard ===================== */
.activity-period-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.activity-bar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.activity-bar {
    height: 20px;
    background: var(--p-accent);
    border-radius: 3px;
    min-width: 2px;
    transition: width 0.3s;
}
.activity-bar-count {
    font-size: 0.8rem;
    color: var(--p-text-muted);
    white-space: nowrap;
}
.hourly-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 80px;
    padding: 8px 0;
}
.hourly-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}
.hourly-bar {
    width: 100%;
    background: var(--p-accent);
    border-radius: 2px 2px 0 0;
    min-height: 1px;
}
.hourly-label {
    font-size: 0.6rem;
    color: var(--p-text-muted);
    margin-top: 2px;
}

/* ── Rank edit button & dropdown ── */
.rank-edit-btn {
    background: none;
    border: none;
    color: var(--p-text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 2px 6px;
    margin-left: 4px;
    border-radius: 4px;
    vertical-align: middle;
    transition: color 0.15s, background 0.15s;
}
.rank-edit-btn:hover {
    color: var(--p-text);
    background: var(--p-surface);
}
.rank-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    background: var(--p-bg);
    border: 1px solid var(--p-border);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    min-width: 180px;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px 0;
    margin-top: 4px;
}
.rank-dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--p-text);
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.1s;
}
.rank-dropdown-item:hover {
    background: var(--p-surface);
}
.rank-dropdown-item.rank-current {
    color: var(--p-accent);
    font-weight: 600;
}
.rank-current-tag {
    font-size: 0.7rem;
    color: var(--p-text-muted);
    margin-left: 4px;
}

/* Base .mc-item styles are in mc-shared.css — portal-specific overrides only */
.mc-item-name {
    font-family: 'Minecraft', monospace;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
    line-height: 20px;
}

/* ── Economy Page ────────────────────────────────────────── */

/* Allow MC tooltips to escape table containers on economy page */
.economy-page .portal-table-wrap,
.economy-page .portal-section,
.economy-page .economy-tables-row,
.economy-page .economy-table-half,
.economy-page table,
.economy-page tbody,
.economy-page tr,
.economy-page td {
    overflow: visible;
}
.economy-page .mc-item:hover {
    z-index: 200;
}
.economy-page .mc-tooltip {
    z-index: 1000;
}
/* Clamp tooltips to viewport — if item is near top, show tooltip below instead */
.economy-page .portal-header .mc-tooltip {
    bottom: auto;
    top: calc(100% + 8px);
}
.item-page-back + h1 .mc-tooltip {
    bottom: auto;
    top: calc(100% + 8px);
}
.economy-page .trade-feed,
.economy-page .trade-entry,
.economy-page .trade-entry-body {
    overflow: visible;
}

/* ── Item Detail Stats (used on item detail page) ──────── */

.item-detail-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}
.item-detail-stat {
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-radius: 4px;
    padding: 10px 14px;
    text-align: center;
}
.item-detail-stat-value {
    display: block;
    font-family: 'Silkscreen', monospace;
    font-size: 1.2rem;
    color: var(--p-accent);
}
.item-detail-stat-label {
    display: block;
    font-size: 0.72rem;
    color: var(--p-text-secondary);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.item-detail-section-title {
    font-family: 'Silkscreen', monospace;
    font-size: 0.8rem;
    color: var(--p-text-secondary);
    margin: 16px 0 8px;
}
.item-detail-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.item-detail-list-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-radius: 3px;
    font-size: 0.85rem;
}
.item-detail-list-value {
    color: var(--p-text-muted);
    font-size: 0.8rem;
    font-family: 'Silkscreen', monospace;
}

/* ── Item Detail Page ───────────────────────────────────── */

.item-page-back {
    font-size: 0.8rem;
    color: var(--p-text-muted);
    text-decoration: none;
    display: inline-block;
    margin-bottom: 6px;
}
.item-page-back:hover {
    color: var(--p-accent);
}
.item-page-key {
    font-size: 0.72rem;
    color: var(--p-text-muted);
    font-family: monospace;
    margin-top: 4px;
}
.item-page-section-title {
    font-family: 'Silkscreen', monospace;
    font-size: 0.85rem;
    color: var(--p-text-secondary);
    margin: 0 0 12px;
}
.item-chart-wrap {
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-radius: 4px;
    padding: 12px;
}
.item-chart-wrap {
    position: relative;
}
.item-chart-wrap canvas {
    display: block;
}
.chart-tooltip {
    position: absolute;
    background: rgba(16, 0, 16, 0.9);
    color: #f2ebd7;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 0.75rem;
    font-family: 'Silkscreen', monospace;
    pointer-events: none;
    white-space: nowrap;
    z-index: 10;
    transform: translateX(-50%);
}

.trade-log-time {
    font-size: 0.75rem;
    color: var(--p-text-muted);
    white-space: nowrap;
}

/* ── Player Comparison ──────────────────────────────────── */

.compare-form {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.compare-input {
    padding: 8px 14px;
    font-size: 0.85rem;
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-radius: 4px;
    color: var(--p-text);
    font-family: 'Inter', sans-serif;
    flex: 1;
    min-width: 150px;
}
.compare-vs {
    color: var(--p-text-muted);
    font-family: 'Silkscreen', monospace;
    font-size: 0.8rem;
}
.compare-table {
    text-align: center;
}
.compare-table th:nth-child(2),
.compare-table td:nth-child(2) {
    color: var(--p-text-secondary);
    font-size: 0.8rem;
}
.compare-table th:first-child,
.compare-table th:last-child {
    color: var(--p-accent);
}

.item-detail-link {
    color: var(--p-accent);
    text-decoration: none;
    font-size: 0.85rem;
    font-family: 'Silkscreen', monospace;
}
.item-detail-link:hover {
    text-decoration: underline;
}

/* Make mc-item clickable on economy page */
.economy-page .mc-item {
    cursor: pointer;
}
.economy-page .mc-item:active {
    opacity: 0.7;
}

.period-selector {
    display: flex;
    gap: 4px;
}
.period-btn {
    padding: 4px 12px;
    font-size: 0.8rem;
    font-family: 'Inter', sans-serif;
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-radius: 4px;
    color: var(--p-text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.period-btn:hover {
    background: var(--p-surface);
    color: var(--p-text);
}
.period-btn.active {
    background: var(--p-accent);
    color: var(--p-bg);
    border-color: var(--p-accent);
}
.period-divider {
    color: var(--p-border);
    margin: 0 4px;
}
.period-date {
    padding: 3px 8px;
    font-size: 0.75rem;
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-radius: 4px;
    color: var(--p-text);
    font-family: 'Inter', sans-serif;
}
.period-date-sep {
    color: var(--p-text-muted);
    font-size: 0.8rem;
}

.currency-flow-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 8px;
}
.currency-card {
    padding: 16px;
}
.currency-card-header {
    font-family: 'Silkscreen', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 12px;
}
.currency-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.currency-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}
.currency-label {
    color: var(--p-text-secondary);
}
.currency-value {
    font-family: 'Silkscreen', monospace;
    font-size: 0.9rem;
}
.flow-balance-bar {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 10px;
}
.flow-balance-in {
    background: #8FAA87;
    transition: width 0.3s;
}
.flow-balance-out {
    background: #C27B6B;
    transition: width 0.3s;
}
.flow-in { color: #8FAA87; }
.flow-out { color: #C27B6B; }
.flow-traded { color: var(--p-text-muted); }

.flow-section {
    margin-bottom: 10px;
}
.flow-section-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.flow-in-label { color: #8FAA87; }
.flow-out-label { color: #C27B6B; }

.flow-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
    font-size: 0.82rem;
}
.flow-row-label {
    color: var(--p-text-secondary);
}
.flow-row-value {
    font-family: 'Silkscreen', monospace;
    font-size: 0.8rem;
}
.flow-empty {
    color: var(--p-text-muted);
    font-style: italic;
    font-size: 0.78rem;
}
.flow-subtotal {
    border-top: 1px solid var(--p-border);
    margin-top: 4px;
    padding-top: 4px;
}
.flow-subtotal .flow-row-value {
    font-weight: 700;
}

.flow-footer {
    border-top: 1px solid var(--p-border);
    padding-top: 8px;
    margin-top: 8px;
}
.flow-net .flow-row-label {
    font-weight: 600;
    color: var(--p-text);
}
.flow-net .flow-row-value {
    color: var(--p-accent);
    font-weight: 700;
    font-size: 0.9rem;
}
.flow-traded-row {
    margin-top: 4px;
    font-size: 0.78rem;
}
.flow-traded-row .flow-row-label {
    font-size: 0.72rem;
}

.economy-tables-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.economy-table-half {
    min-width: 0;
}

.badge-muted {
    display: inline-block;
    font-size: 0.65rem;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--p-surface);
    color: var(--p-text-muted);
    vertical-align: middle;
    margin-left: 4px;
}

.table-empty {
    text-align: center;
    color: var(--p-text-muted);
    padding: 24px !important;
    font-style: italic;
}

/* ── Crate Analysis ─────────────────────────────────────── */

.crate-roi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.crate-roi-card {
    padding: 14px;
}
.crate-roi-header {
    font-family: 'Silkscreen', monospace;
    font-size: 0.9rem;
    color: var(--p-accent);
    margin-bottom: 8px;
}
.crate-roi-stats {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.8rem;
    color: var(--p-text-secondary);
}
.crate-roi-currency {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--p-border);
}
.crate-currency {
    font-family: 'Silkscreen', monospace;
    font-size: 0.72rem;
}

/* ── Economy Export Button ──────────────────────────────── */

.btn-export {
    padding: 4px 12px;
    font-size: 0.78rem;
    font-family: 'Silkscreen', monospace;
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-radius: 4px;
    color: var(--p-text-secondary);
    text-decoration: none;
    transition: all 0.15s;
}
.btn-export:hover {
    background: var(--p-surface);
    color: var(--p-text);
}

/* ── Economy Search ─────────────────────────────────────── */

.economy-search {
    padding: 5px 12px;
    font-size: 0.82rem;
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-radius: 4px;
    color: var(--p-text);
    font-family: 'Inter', sans-serif;
    width: 180px;
    margin-right: 8px;
}
.economy-search::placeholder {
    color: var(--p-text-muted);
}
.economy-search-wrap {
    position: relative;
    display: inline-block;
}
.economy-search-results {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    width: 300px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--p-bg);
    border: 1px solid var(--p-border);
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 200;
    margin-top: 4px;
}
/* Scoped to the economy search dropdown so it doesn't override the global
 * .search-result-item (which uses `display: block`) for the portal-search
 * dropdown at the top of every page. */
.economy-search-results .search-result-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    text-decoration: none;
    font-size: 0.85rem;
    font-family: 'Minecraft', monospace;
    -webkit-font-smoothing: none;
    transition: background 0.1s;
}
.economy-search-results .search-result-item:hover {
    background: var(--p-surface);
}
.economy-search-results .search-result-item .mc-item-name {
    text-decoration: none;
}
.economy-search-results .search-result-item .mc-tooltip {
    display: none;
}
.search-result-icon {
    width: 20px;
    height: 20px;
    image-rendering: pixelated;
    flex-shrink: 0;
}
.search-no-results {
    padding: 12px;
    color: var(--p-text-muted);
    font-size: 0.82rem;
    text-align: center;
    font-style: italic;
}

/* ── Activity Chart ────────────────────────────────────── */

.activity-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 80px;
    padding: 0 4px;
}
.activity-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}
.activity-bar {
    width: 100%;
    background: #8FAA87;
    border-radius: 2px 2px 0 0;
    min-height: 1px;
    transition: height 0.3s;
}
.activity-bar-label {
    font-size: 0.55rem;
    color: var(--p-text-muted);
    margin-top: 3px;
    font-family: monospace;
}

/* ── Anomaly Banner ─────────────────────────────────────── */

.anomaly-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin-bottom: 20px;
    background: rgba(216, 155, 106, 0.1);
    border: 1px solid rgba(216, 155, 106, 0.3);
    border-radius: 4px;
    color: #D89B6A;
    font-size: 0.82rem;
}
.anomaly-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}
.anomaly-text {
    line-height: 1.4;
}

/* ── Economy Health Score ───────────────────────────────── */

.economy-health {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 4px;
    margin-bottom: 24px;
    border: 1px solid var(--p-border);
}
.health-icon {
    font-size: 1.2rem;
}
.health-label {
    font-family: 'Silkscreen', monospace;
    font-size: 0.9rem;
    font-weight: 700;
}
.health-detail {
    margin-left: auto;
    font-size: 0.8rem;
    font-family: 'Silkscreen', monospace;
}
.health-inflate {
    background: rgba(143, 170, 135, 0.08);
    border-color: rgba(143, 170, 135, 0.3);
}
.health-inflate .health-icon,
.health-inflate .health-label { color: #8FAA87; }
.health-inflate .health-detail { color: #8FAA87; }
.health-deflate {
    background: rgba(194, 123, 107, 0.08);
    border-color: rgba(194, 123, 107, 0.3);
}
.health-deflate .health-icon,
.health-deflate .health-label { color: #C27B6B; }
.health-deflate .health-detail { color: #C27B6B; }
.health-stable {
    background: rgba(108, 117, 125, 0.08);
    border-color: rgba(108, 117, 125, 0.3);
}
.health-stable .health-icon,
.health-stable .health-label { color: #6C757D; }
.health-stable .health-detail { color: #6C757D; }

/* Per-currency health pip — small inline variant that sits at the top of
   each currency flow card. Reuses the .health-inflate/deflate/stable color
   classes from the big economy-health badge. */
.flow-health-pip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    margin-bottom: 10px;
    border-radius: 3px;
    border: 1px solid var(--p-border);
    font-size: 0.75rem;
}
.flow-health-pip .health-icon { font-size: 0.85rem; }
.flow-health-pip .health-label { font-size: 0.75rem; }

/* ── Trending Items ─────────────────────────────────────── */

.trending-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.trending-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-radius: 4px;
    font-size: 0.85rem;
}
.trending-item {
    flex: 1;
    min-width: 0;
}
.trending-change {
    font-family: 'Silkscreen', monospace;
    font-size: 0.78rem;
    white-space: nowrap;
}
.trending-up { color: #8FAA87; }
.trending-down { color: #C27B6B; }
.trending-arrow { font-size: 0.65rem; }
.trending-volumes {
    font-size: 0.72rem;
    color: var(--p-text-muted);
    white-space: nowrap;
    display: flex;
    gap: 4px;
    align-items: center;
}
.trending-vs {
    font-size: 0.6rem;
    color: var(--p-text-muted);
    opacity: 0.6;
}

/* ── Admin Shops ────────────────────────────────────────── */

.admin-shops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    align-items: start;
}
.admin-shop-card {
    padding: 14px;
}
.admin-shop-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.admin-shop-icon {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    flex-shrink: 0;
}
.admin-shop-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.admin-shop-name {
    font-family: 'Minecraft', monospace;
    font-size: 14px;
    line-height: 18px;
    -webkit-font-smoothing: none;
}
.admin-shop-coords {
    font-size: 0.68rem;
    color: var(--p-text-muted);
    font-family: monospace;
}
.admin-shop-stats {
    display: flex;
    gap: 12px;
}
.admin-shop-stat {
    font-size: 0.78rem;
    color: var(--p-text-secondary);
    font-family: 'Silkscreen', monospace;
}
.admin-shop-card {
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.admin-shop-card:hover {
    background: var(--p-surface);
}
.admin-shop-card[data-expanded="true"] {
    background: var(--p-surface);
}
.admin-shop-detail {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--p-border);
}

/* ── Spawn Shop Analytics ───────────────────────────────── */

.spawn-shop-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    align-items: start;
    margin-bottom: 20px;
}
.spawn-shop-card {
    padding: 14px;
}
.spawn-shop-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.spawn-shop-card-name {
    font-family: 'Silkscreen', monospace;
    font-size: 0.9rem;
    color: var(--p-accent);
}
.spawn-shop-card-emeralds {
    font-family: 'Silkscreen', monospace;
    font-size: 0.85rem;
    color: #D4A65D;
}
.spawn-shop-card-stats {
    display: flex;
    gap: 12px;
    font-size: 0.78rem;
    color: var(--p-text-secondary);
    margin-bottom: 8px;
}
.spawn-shop-card-trades {
    font-size: 0.72rem;
    color: var(--p-text-muted);
    margin-bottom: 6px;
}
.spawn-shop-card-trades .trade-hot {
    color: #8FAA87;
}
.spawn-shop-card-trades .trade-cold {
    color: #C27B6B;
}
/* Card trade breakdown tooltip */
.spawn-shop-card {
    position: relative;
}
.card-tip {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: rgba(16, 0, 16, 0.94);
    border: 1px solid var(--p-border);
    border-radius: 4px;
    padding: 8px 10px;
    z-index: 20;
    font-size: 0.72rem;
    min-width: 240px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.spawn-shop-card:hover .card-tip {
    display: block;
}
.card-tip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    border-bottom: 1px solid rgba(58, 58, 64, 0.3);
}
.card-tip-row:last-child {
    border-bottom: none;
}
.card-tip-name {
    flex: 1;
    color: var(--p-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-tip-count {
    color: var(--p-text-secondary);
    white-space: nowrap;
    font-family: 'Silkscreen', monospace;
    font-size: 0.65rem;
}
.card-tip-detail {
    color: var(--p-text-muted);
    white-space: nowrap;
    font-size: 0.65rem;
}
.card-tip-emeralds {
    color: #D4A65D;
    white-space: nowrap;
    font-family: 'Silkscreen', monospace;
    font-size: 0.65rem;
}

.shop-util-bar {
    height: 4px;
    background: var(--p-border);
    border-radius: 2px;
    overflow: hidden;
}
.shop-util-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s;
}
.shop-util-label {
    font-size: 0.68rem;
    color: var(--p-text-muted);
    margin-top: 3px;
    text-align: right;
}
/* Sink Shop Cards */
.sink-shop-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    align-items: start;
}
.sink-shop-card {
    padding: 14px;
}
.sink-shop-items {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--p-border);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.sink-shop-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
}
.sink-shop-item-name {
    color: var(--p-text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    overflow: visible;
}
.sink-shop-arrow {
    color: var(--p-text-muted);
    font-size: 0.72rem;
}
.sink-shop-item-count {
    font-family: 'Silkscreen', monospace;
    font-size: 0.68rem;
    color: var(--p-text-secondary);
    white-space: nowrap;
}
.sink-shop-item-trades {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    color: var(--p-text-muted);
}

/* Utilization Legend */
.util-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 16px;
    font-size: 0.68rem;
    color: var(--p-text-muted);
    flex-wrap: wrap;
}
.util-legend-label {
    font-family: 'Silkscreen', monospace;
    font-size: 0.65rem;
    color: var(--p-text-secondary);
    margin-right: 2px;
}
.util-legend-swatch {
    width: 14px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
    border: 1px solid rgba(58, 58, 64, 0.4);
}
.util-legend-text {
    margin-right: 6px;
}
.spawn-analytics-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 16px 0;
}
.spawn-analytics-half {
    min-width: 0;
}
.spawn-section-title {
    font-family: 'Silkscreen', monospace;
    font-size: 0.85rem;
    color: var(--p-text-secondary);
    margin: 16px 0 8px;
}

/* Heatmap */
.spawn-heatmap-wrap {
    overflow: visible;
    margin-bottom: 16px;
}
.heatmap-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}
.heatmap-shop-label {
    font-family: 'Silkscreen', monospace;
    font-size: 0.7rem;
    color: var(--p-text-secondary);
    white-space: nowrap;
    min-width: 85px;
    flex-shrink: 0;
}
.heatmap-cells {
    display: flex;
    gap: 3px;
    flex-wrap: nowrap;
}
.heatmap-cell {
    width: 44px;
    height: 44px;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: default;
    border: 1px solid rgba(58, 58, 64, 0.4);
    transition: outline 0.1s;
    flex-shrink: 0;
}
.heatmap-cell:hover {
    outline: 2px solid var(--p-accent);
    z-index: 1;
}
.heatmap-icon {
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
}
.heatmap-cell-pct {
    font-size: 0.5rem;
    font-family: 'Silkscreen', monospace;
    color: rgba(242, 235, 215, 0.85);
    text-shadow: 1px 1px 0 rgba(0,0,0,0.7);
    margin-top: 1px;
    line-height: 1;
}
.heatmap-cell-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(16, 0, 16, 0.92);
    color: #f2ebd7;
    padding: 6px 10px;
    border-radius: 3px;
    font-size: 0.72rem;
    line-height: 1.5;
    white-space: nowrap;
    pointer-events: none;
    display: none;
    z-index: 10;
    border: 1px solid var(--p-border);
}
.heatmap-cell:hover .heatmap-cell-tooltip {
    display: block;
}
.heatmap-tip-name {
    font-weight: 600;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(58, 58, 64, 0.5);
}
.heatmap-tip-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 1px 0;
}
.heatmap-tip-label {
    color: var(--p-text-muted);
}
.heatmap-tip-value {
    font-family: 'Silkscreen', monospace;
    font-size: 0.68rem;
    color: var(--p-text);
}
.heatmap-tip-util {
    margin-top: 3px;
    padding-top: 3px;
    border-top: 1px solid rgba(58, 58, 64, 0.5);
}

/* Dead Trades */
.spawn-dead-trades {
    margin: 12px 0;
}
.dead-trade-banner {
    background: rgba(194, 123, 107, 0.12);
    border: 1px solid rgba(194, 123, 107, 0.35);
    color: var(--p-danger);
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 0.82rem;
    line-height: 1.5;
}
.dead-trade-icon {
    margin-right: 6px;
}

/* Spawn Trends */
.spawn-trends-wrap canvas {
    display: block;
}

@media (max-width: 768px) {
    .spawn-analytics-row {
        grid-template-columns: 1fr;
    }
    .spawn-shop-cards {
        grid-template-columns: 1fr;
    }
}

/* ── Player Economy Enhancements ────────────────────────── */

.player-rank-badge {
    display: inline-block;
    background: rgba(212, 166, 93, 0.15);
    color: #D4A65D;
    font-family: 'Silkscreen', monospace;
    font-size: 0.6rem;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
}
.player-econ-subtitle {
    margin: 12px 0 6px;
    font-size: 0.75rem;
    color: var(--p-text-secondary);
    font-family: 'Silkscreen', monospace;
}
.player-trade-sparkline {
    margin: 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.player-trade-sparkline svg {
    width: 200px;
    height: 30px;
    flex-shrink: 0;
}
.player-sparkline-range {
    font-size: 0.6rem;
    color: var(--p-text-muted);
    white-space: nowrap;
}
.player-shop-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.player-shop-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.player-shop-bar-name {
    font-size: 0.75rem;
    min-width: 80px;
    flex-shrink: 0;
    white-space: nowrap;
}
.player-shop-bar-outer {
    flex: 1;
    height: 12px;
    background: var(--p-border);
    border-radius: 3px;
    overflow: hidden;
}
.player-shop-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
    min-width: 2px;
}
.player-shop-bar-value {
    font-family: 'Silkscreen', monospace;
    font-size: 0.65rem;
    color: var(--p-text-muted);
    white-space: nowrap;
    min-width: 30px;
    text-align: right;
}
.player-emerald-flow {
    display: flex;
    gap: 16px;
    font-size: 0.78rem;
}
.player-flow-section {
    flex: 1;
}
.player-flow-header {
    font-family: 'Silkscreen', monospace;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 4px;
}
.player-flow-row {
    display: flex;
    justify-content: space-between;
    padding: 1px 0;
    color: var(--p-text-secondary);
}
.player-flow-value {
    font-family: 'Silkscreen', monospace;
    font-size: 0.7rem;
}
.player-smith-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.player-smith-bar-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.player-smith-bar-label {
    font-family: 'Silkscreen', monospace;
    font-size: 0.62rem;
    min-width: 100px;
    white-space: nowrap;
}
.player-smith-bar-outer {
    flex: 1;
    height: 10px;
    background: var(--p-border);
    border-radius: 3px;
    overflow: hidden;
}
.player-smith-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

/* ── Smith Analytics ────────────────────────────────────── */

.smith-page h2 {
    font-family: 'Silkscreen', monospace;
    font-size: 1rem;
    color: var(--p-text-secondary);
}

/* Tier Cards */
.smith-tier-cards {
    display: flex;
    gap: 12px;
}
.smith-tier-card {
    flex: 1;
    padding: 14px;
}
.smith-tier-header {
    font-family: 'Silkscreen', monospace;
    font-size: 0.85rem;
    margin-bottom: 8px;
}
.smith-tier-stats {
    display: flex;
    gap: 16px;
}
.smith-tier-stat {
    display: flex;
    flex-direction: column;
}
.smith-tier-value {
    font-family: 'Silkscreen', monospace;
    font-size: 0.9rem;
    color: var(--p-text);
}
.smith-tier-label {
    font-size: 0.68rem;
    color: var(--p-text-muted);
}

/* Funnel */
.smith-funnel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.smith-funnel-stage {
    display: flex;
    align-items: center;
    gap: 10px;
}
.smith-funnel-label {
    font-size: 0.8rem;
    color: var(--p-text-secondary);
    min-width: 160px;
    flex-shrink: 0;
}
.smith-funnel-bar-outer {
    flex: 1;
    height: 22px;
    background: var(--p-border);
    border-radius: 4px;
    overflow: hidden;
}
.smith-funnel-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s;
    min-width: 2px;
}
.smith-funnel-count {
    font-family: 'Silkscreen', monospace;
    font-size: 0.72rem;
    color: var(--p-text-muted);
    min-width: 70px;
    white-space: nowrap;
}

/* Bar Lists (item popularity, emerald sinks) */
.smith-bar-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.smith-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.smith-bar-name {
    font-size: 0.78rem;
    min-width: 130px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: visible;
    position: relative;
}
.smith-bar-outer {
    flex: 1;
    height: 14px;
    background: var(--p-border);
    border-radius: 3px;
    overflow: hidden;
}
.smith-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
    min-width: 2px;
}
.smith-bar-value {
    font-family: 'Silkscreen', monospace;
    font-size: 0.68rem;
    color: var(--p-text-muted);
    min-width: 40px;
    text-align: right;
    white-space: nowrap;
}

/* Category Legend */
.smith-category-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
    font-size: 0.72rem;
    color: var(--p-text-muted);
}
.smith-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}
.smith-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

/* Variant Choices */
.smith-variant-row {
    margin-bottom: 12px;
}
.smith-variant-label {
    font-size: 0.82rem;
    color: var(--p-text-secondary);
    margin-bottom: 4px;
}
.smith-variant-bar {
    display: flex;
    height: 24px;
    border-radius: 4px;
    overflow: hidden;
}
.smith-variant-fill {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-family: 'Silkscreen', monospace;
    color: #f2ebd7;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    transition: width 0.3s;
    min-width: 2px;
}
.smith-variant-a {
    background: #8FAA87;
}
.smith-variant-b {
    background: #89B5C9;
}
.smith-variant-counts {
    font-size: 0.68rem;
    color: var(--p-text-muted);
    margin-top: 2px;
}

/* Set Completion */
.smith-set-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.smith-set-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 12px;
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-radius: 4px;
}
.smith-set-player {
    min-width: 100px;
    flex-shrink: 0;
}
.smith-set-player a {
    color: #DDB67D;
    font-size: 0.85rem;
}
.smith-set-bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.smith-set-bar-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.smith-set-bar-label {
    font-family: 'Silkscreen', monospace;
    font-size: 0.62rem;
    min-width: 100px;
    white-space: nowrap;
}
.smith-set-bar-outer {
    flex: 1;
    height: 10px;
    background: var(--p-border);
    border-radius: 3px;
    overflow: hidden;
}
.smith-set-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

@media (max-width: 768px) {
    .smith-tier-cards {
        flex-direction: column;
    }
    .smith-funnel-label {
        min-width: 100px;
    }
    .smith-set-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── Emerald Concentration ──────────────────────────────── */

.emerald-concentration-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.emerald-conc-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.emerald-conc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
}
.emerald-conc-rank {
    font-family: 'Silkscreen', monospace;
    font-size: 0.72rem;
    color: var(--p-text-muted);
    width: 18px;
    text-align: right;
    flex-shrink: 0;
}
.emerald-conc-name {
    min-width: 80px;
    flex-shrink: 0;
}
.emerald-conc-name a {
    color: #DDB67D;
}
.emerald-conc-bar-outer {
    flex: 1;
    height: 16px;
    background: var(--p-border);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.emerald-conc-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}
.emerald-conc-value {
    font-family: 'Silkscreen', monospace;
    font-size: 0.72rem;
    color: #D4A65D;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 55px;
    text-align: right;
}
.emerald-conc-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.emerald-conc-stat {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    padding: 6px 0;
    border-bottom: 1px solid var(--p-border);
}
.emerald-conc-stat-label {
    color: var(--p-text-secondary);
}
.emerald-conc-stat-value {
    font-family: 'Silkscreen', monospace;
    font-size: 0.78rem;
    color: var(--p-text);
}
@media (max-width: 768px) {
    .emerald-concentration-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Activity Heatmap ──────────────────────────────────── */

.activity-heatmap-wrap {
    overflow: visible;
}
.activity-heatmap {
    display: grid;
    grid-template-columns: 50px repeat(24, 1fr);
    gap: 2px;
    min-width: 600px;
}
.activity-hm-label {
    font-size: 0.65rem;
    font-family: 'Silkscreen', monospace;
    color: var(--p-text-muted);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 6px;
}
.activity-hm-header {
    font-size: 0.55rem;
    color: var(--p-text-muted);
    text-align: center;
    padding-bottom: 2px;
}
.activity-hm-cell {
    height: 22px;
    border-radius: 2px;
    position: relative;
    cursor: default;
    transition: outline 0.1s;
}
.activity-hm-cell:hover {
    outline: 2px solid var(--p-accent);
    z-index: 1;
}
.activity-hm-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(16, 0, 16, 0.92);
    color: #f2ebd7;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 0.72rem;
    white-space: nowrap;
    pointer-events: none;
    display: none;
    z-index: 10;
    border: 1px solid var(--p-border);
}
.activity-hm-cell:hover .activity-hm-tooltip {
    display: block;
}
.activity-hm-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 0.65rem;
    color: var(--p-text-muted);
}
.activity-hm-legend-swatch {
    width: 14px;
    height: 10px;
    border-radius: 2px;
}

/* ── Trade Feed ──────────────────────────────────────────── */

.trade-feed {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.trade-feed-empty {
    color: var(--p-text-muted);
    font-style: italic;
    padding: 24px;
    text-align: center;
}
.trade-feed-status {
    font-size: 0.7rem;
    color: #8FAA87;
    font-family: 'Silkscreen', monospace;
}
.trade-entry {
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-radius: 4px;
    padding: 10px 14px;
    transition: background 0.3s;
}
.trade-entry.trade-new {
    animation: tradeFadeIn 0.5s ease-out;
    background: rgba(143, 170, 135, 0.08);
}
@keyframes tradeFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.trade-entry-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.82rem;
}
.trade-player {
    color: #DDB67D;
    text-decoration: none;
    font-weight: 600;
}
.trade-player:hover {
    text-decoration: underline;
}
.trade-badge {
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 3px;
    font-family: 'Silkscreen', monospace;
}
.trade-badge-admin {
    background: rgba(107, 122, 94, 0.2);
    color: #6B7A5E;
}
.trade-badge-player {
    background: rgba(221, 182, 125, 0.15);
    color: #DDB67D;
}
.trade-time {
    margin-left: auto;
    color: var(--p-text-muted);
    font-size: 0.72rem;
}
.trade-entry-body {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    flex-wrap: wrap;
}
.trade-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.trade-item-icon {
    width: 18px;
    height: 18px;
    image-rendering: pixelated;
    flex-shrink: 0;
}
.trade-arrow {
    color: var(--p-text-muted);
    font-size: 0.9rem;
}
.trade-gave, .trade-got {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

@media print {
    .portal-sidebar, .portal-topbar, .period-selector,
    .economy-search-wrap, .btn-export, .trade-feed,
    .anomaly-banner, .trade-feed-status { display: none !important; }
    .portal-main { margin-left: 0 !important; padding: 10px !important; }
    .economy-page { color: #000 !important; }
    .portal-card, .currency-card, .admin-shop-card, .trending-entry,
    .item-detail-stat { border-color: #ccc !important; }
    .mc-item-name { text-decoration: none !important; }
}

@media (max-width: 900px) {
    .currency-flow-grid {
        grid-template-columns: 1fr;
    }
    .economy-tables-row {
        grid-template-columns: 1fr;
    }
    .admin-shops-grid {
        grid-template-columns: 1fr;
    }
    .trending-entry {
        flex-wrap: wrap;
        gap: 6px;
    }
    .trending-item { flex-basis: 100%; }
    .trade-entry-body {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .trade-arrow { display: none; }
    .trade-gave::after { content: ' →'; color: var(--p-text-muted); }
    .item-detail-stats {
        grid-template-columns: 1fr;
    }
    .period-selector {
        flex-wrap: wrap;
    }
    .economy-page .portal-cards {
        flex-wrap: wrap;
    }
    .economy-page .portal-card {
        flex: 1 1 calc(50% - 8px);
        min-width: 120px;
    }
    .crate-roi-grid {
        grid-template-columns: 1fr;
    }
    .economy-search {
        width: 140px;
    }
    .economy-search-results {
        width: 250px;
    }
    .activity-bars {
        height: 60px;
    }
    .btn-export {
        display: none;
    }
}

/* Price alerts */
.price-alert-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(216, 155, 106, 0.1);
    border: 1px solid rgba(216, 155, 106, 0.3);
    border-radius: 6px;
    padding: 8px 14px;
    margin-bottom: 16px;
    font-size: 0.8rem;
    line-height: 1.5;
    flex-wrap: wrap;
}
.price-alert-item {
    white-space: nowrap;
    margin-right: 12px;
}

/* Price sparklines */
.price-sparkline {
    width: 80px;
    height: 24px;
    vertical-align: middle;
}
.price-sparkline-empty {
    color: var(--p-text-muted);
    font-size: 0.75rem;
}