/* ================================================
   Elite Dangerous Inspired Theme
   ================================================ */

:root {
    /* Core Elite colors */
    --ed-orange: #ff7100;
    --ed-orange-dim: #cc5a00;
    --ed-orange-glow: rgba(255, 113, 0, 0.4);
    --ed-blue: #0a9dff;
    --ed-blue-dim: #0077cc;
    --ed-blue-glow: rgba(10, 157, 255, 0.3);
    --ed-cyan: #00ffd5;
    --ed-red: #ff3333;
    --ed-green: #00ff66;
    --ed-yellow: #ffaa00;

    /* Backgrounds — warmer dark navy */
    --ed-bg-body: #0d1117;
    --ed-bg-body-grad: #141a22;
    --ed-bg-surface: #161b22;
    --ed-bg-elevated: #1c2129;
    --ed-bg-input: #222830;
    --ed-bg-hover: #282e38;
    --ed-bg-dark: #0d1117;
    --ed-bg-panel: rgba(22, 27, 34, 0.95);
    --ed-bg-panel-hover: rgba(28, 33, 41, 0.98);
    --ed-bg-header: rgba(255, 113, 0, 0.08);

    /* Borders — more visible */
    --ed-border-subtle: #2d333b;
    --ed-border: rgba(255, 113, 0, 0.25);
    --ed-border-bright: rgba(255, 113, 0, 0.5);
    --ed-border-blue: rgba(10, 157, 255, 0.3);
    --ed-border-strong: #444c56;

    /* Text — better hierarchy (WCAG AA compliant against ~#161b22) */
    --ed-text: #e6edf3;
    --ed-text-secondary: #b0b8c1;
    --ed-text-dim: #b0b8c1;
    --ed-text-muted: #95a0ab;
    --ed-text-faint: #95a0ab;
    --ed-text-orange: #ff9544;
}

* {
    box-sizing: border-box;
}

html {
    overflow-y: scroll;
}

html, body {
    margin: 0;
    font-family: 'Eurostile', 'Segoe UI', 'Arial', sans-serif;
    background: radial-gradient(ellipse at center, var(--ed-bg-body-grad) 0%, var(--ed-bg-body) 100%);
    background-attachment: fixed;
    color: var(--ed-text);
    min-height: 100vh;
}

/* Disable text selection only on interactive/UI chrome elements */
.btn, .badge, .nav-link, .navbar, .sidebar,
.panel-header, .stat-box, .power-chip, .tab-btn,
.rings-page-btn, .settlement-filter-clear,
.back-link, .live-badge, .header-count {
    -webkit-user-select: none;
    user-select: none;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    color: var(--ed-text);
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

h1 {
    font-size: 1.5rem;
    color: var(--ed-orange);
    text-shadow: 0 0 20px var(--ed-orange-glow);
}

/* Links */
a, .btn-link {
    color: var(--ed-blue);
    text-decoration: none;
    transition: all 0.2s;
}

a:hover {
    color: var(--ed-orange);
    text-shadow: 0 0 8px var(--ed-orange-glow);
}

/* ================================================
   Elite Panel System
   ================================================ */

.ed-panel {
    background: var(--ed-bg-panel);
    border: 1px solid var(--ed-border);
    position: relative;
    margin-bottom: 1rem;
}

/* Corner accents */
.ed-panel::before,
.ed-panel::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: var(--ed-orange);
    border-style: solid;
    border-width: 0;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.ed-panel::before {
    top: -1px;
    left: -1px;
    border-top-width: 2px;
    border-left-width: 2px;
}

.ed-panel::after {
    bottom: -1px;
    right: -1px;
    border-bottom-width: 2px;
    border-right-width: 2px;
}

.ed-panel:hover::before,
.ed-panel:hover::after {
    opacity: 1;
}

/* Panel header */
.ed-panel-header {
    background: var(--ed-bg-header);
    border-bottom: 1px solid var(--ed-border);
    padding: 0.6rem 1rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ed-orange);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ed-panel-body {
    padding: 1rem;
}

.ed-panel-body.no-padding {
    padding: 0;
}

/* ================================================
   Stats Display
   ================================================ */

.ed-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

.ed-stat {
    background: linear-gradient(180deg, rgba(255, 113, 0, 0.05) 0%, transparent 100%);
    border: 1px solid var(--ed-border);
    padding: 1rem;
    text-align: center;
    position: relative;
    transition: all 0.3s;
}

.ed-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--ed-orange), transparent);
    opacity: 0.5;
}

.ed-stat:hover {
    background: linear-gradient(180deg, rgba(255, 113, 0, 0.1) 0%, transparent 100%);
    border-color: var(--ed-border-bright);
}

.ed-stat-value {
    font-size: 1.75rem;
    font-weight: 300;
    color: var(--ed-orange);
    line-height: 1;
    margin-bottom: 0.25rem;
    text-shadow: 0 0 15px var(--ed-orange-glow);
}

.ed-stat-value.blue {
    color: var(--ed-blue);
    text-shadow: 0 0 15px var(--ed-blue-glow);
}

.ed-stat-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ed-text-dim);
}

/* ================================================
   Data Tables
   ================================================ */

.ed-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.ed-table thead {
    background: var(--ed-bg-header);
}

.ed-table th {
    padding: 0.6rem 0.75rem;
    text-align: left;
    font-weight: 400;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ed-text-dim);
    border-bottom: 1px solid var(--ed-border);
}

.ed-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(255, 113, 0, 0.1);
    transition: background 0.2s;
}

.ed-table tbody tr {
    cursor: pointer;
    transition: all 0.2s;
}

.ed-table tbody tr:hover {
    background: rgba(255, 113, 0, 0.08);
}

.ed-table tbody tr:hover td {
    color: var(--ed-text-orange);
}

.ed-table .text-end {
    text-align: right;
}

.ed-table .text-center {
    text-align: center;
}

/* Row highlight animation for new data */
.ed-table tbody tr.new-data {
    animation: row-highlight 2s ease-out;
}

@keyframes row-highlight {
    0% {
        background: rgba(255, 113, 0, 0.3);
        box-shadow: inset 0 0 20px var(--ed-orange-glow);
    }
    100% {
        background: transparent;
        box-shadow: none;
    }
}

/* ================================================
   State Badges
   ================================================ */

.ed-badge {
    display: inline-block;
    padding: 0.2em 0.5em;
    font-size: 0.65rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid;
    background: transparent;
}

.ed-badge-stronghold {
    color: #9b59b6;
    border-color: rgba(155, 89, 182, 0.5);
}

.ed-badge-fortified {
    color: #3498db;
    border-color: rgba(52, 152, 219, 0.5);
}

.ed-badge-exploited {
    color: #f07b05;
    border-color: rgba(240, 123, 5, 0.5);
}

.ed-badge-contested {
    color: #e74c3c;
    border-color: rgba(231, 76, 60, 0.5);
}

.ed-badge-turmoil {
    color: var(--ed-yellow);
    border-color: rgba(255, 170, 0, 0.5);
}

.ed-badge-unoccupied {
    color: #a0a8b0;
    border-color: rgba(160, 168, 176, 0.5);
}

.ed-badge-unknown {
    color: var(--ed-text-dim);
    border-color: rgba(136, 136, 153, 0.5);
}

/* ================================================
   Live Status Indicator
   ================================================ */

.ed-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 1rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.ed-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: relative;
}

.ed-live-dot.connected {
    background: var(--ed-green);
    box-shadow: 0 0 6px var(--ed-green);
    animation: live-pulse 2s ease-in-out infinite;
}

.ed-live-dot.connecting {
    background: var(--ed-yellow);
    animation: live-blink 0.6s ease-in-out infinite;
}

.ed-live-dot.offline {
    background: var(--ed-text-dim);
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--ed-green); }
    50% { opacity: 0.7; box-shadow: 0 0 12px var(--ed-green); }
}

@keyframes live-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.ed-live-text {
    color: var(--ed-text-dim);
}

.ed-live-text.connected {
    color: var(--ed-green);
}

/* ================================================
   Buttons
   ================================================ */

.ed-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid #f07b05;
    background: rgba(240, 123, 5, 0.15);
    color: #f07b05;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.ed-btn:hover {
    background: rgba(240, 123, 5, 0.3);
    color: #fff;
}

.ed-btn-blue {
    border-color: var(--ed-blue);
    color: var(--ed-blue);
}

.ed-btn-blue:hover {
    background: rgba(10, 157, 255, 0.15);
    box-shadow: 0 0 10px var(--ed-blue-glow);
    color: var(--ed-blue);
}

/* ================================================
   Alerts
   ================================================ */

.ed-alert {
    background: rgba(255, 51, 51, 0.1);
    border: 1px solid rgba(255, 51, 51, 0.3);
    border-left: 3px solid var(--ed-red);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

.ed-alert-warning {
    background: rgba(255, 170, 0, 0.1);
    border-color: rgba(255, 170, 0, 0.3);
    border-left-color: var(--ed-yellow);
}

.ed-alert strong {
    color: var(--ed-red);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.ed-alert-warning strong {
    color: var(--ed-yellow);
}

/* ================================================
   Forms
   ================================================ */

.ed-input, .ed-select {
    background: var(--ed-bg-input);
    border: 1px solid var(--ed-border);
    color: var(--ed-text);
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.ed-input:focus, .ed-select:focus {
    outline: none;
    border-color: var(--ed-orange);
    box-shadow: 0 0 10px var(--ed-orange-glow);
}

.ed-input::placeholder {
    color: var(--ed-text-dim);
}

.ed-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ed-text-dim);
    margin-bottom: 0.3rem;
}

/* ================================================
   Navigation
   ================================================ */

.ed-nav {
    background: var(--ed-bg-panel);
    border-right: 1px solid var(--ed-border);
}

.ed-nav-brand {
    padding: 1rem;
    border-bottom: 1px solid var(--ed-border);
    font-size: 1.1rem;
    letter-spacing: 0.1em;
}

.ed-nav-brand .ed {
    color: var(--ed-orange);
    font-weight: 600;
    text-shadow: 0 0 10px var(--ed-orange-glow);
}

.ed-nav-item {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--ed-text-dim);
    text-decoration: none;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-left: 2px solid transparent;
    transition: all 0.2s;
}

.ed-nav-item:hover {
    color: var(--ed-text);
    background: rgba(255, 113, 0, 0.05);
    border-left-color: var(--ed-orange);
}

.ed-nav-item.active {
    color: var(--ed-orange);
    background: rgba(255, 113, 0, 0.1);
    border-left-color: var(--ed-orange);
}

.ed-nav-icon {
    margin-right: 0.5rem;
    opacity: 0.7;
}

/* ================================================
   Layout Utilities
   ================================================ */

.ed-grid {
    display: grid;
    gap: 1rem;
}

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

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

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

.ed-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ed-col {
    flex: 1;
}

/* ================================================
   Scrollbars
   ================================================ */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--ed-bg-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--ed-border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ed-orange);
}

/* ================================================
   Loading
   ================================================ */

.ed-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem;
}

.ed-spinner {
    width: 40px;
    height: 40px;
    border: 2px solid var(--ed-border);
    border-top-color: var(--ed-orange);
    border-radius: 50%;
    animation: ed-spin 1s linear infinite;
}

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

/* ================================================
   Pagination
   ================================================ */

.ed-pagination {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 1rem;
}

.ed-page-btn {
    padding: 0.4rem 0.7rem;
    background: transparent;
    border: 1px solid var(--ed-border);
    color: var(--ed-text-dim);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.ed-page-btn:hover:not(:disabled) {
    border-color: var(--ed-orange);
    color: var(--ed-orange);
}

.ed-page-btn.active {
    background: var(--ed-orange);
    border-color: var(--ed-orange);
    color: #000;
}

.ed-page-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ================================================
   Text Utilities
   ================================================ */

.text-orange { color: #f07b05 !important; }
.text-blue { color: var(--ed-blue) !important; }
.text-green { color: #00ff88 !important; }
.text-red { color: #ff4444 !important; }
.text-yellow { color: #ffcc00 !important; }
.text-info { color: #3498db !important; }
.text-dim { color: var(--ed-text-dim) !important; }
.text-muted { color: var(--ed-text-muted) !important; }
.text-end { text-align: right; }
.text-center { text-align: center; }
.mono { font-family: 'Consolas', 'Monaco', monospace; }

/* ================================================
   Scanline Effect (subtle)
   ================================================ */

.ed-scanlines::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 4px
    );
    pointer-events: none;
    z-index: 9999;
}

/* ================================================
   Bootstrap Overrides
   ================================================ */

.btn-primary {
    background: var(--ed-orange);
    border-color: var(--ed-orange);
    color: #000;
}

.btn-primary:hover {
    background: var(--ed-orange-dim);
    border-color: var(--ed-orange-dim);
}

.btn-outline-primary {
    color: var(--ed-orange);
    border-color: var(--ed-orange);
    background: transparent;
}

.btn-outline-primary:hover {
    background: rgba(255, 113, 0, 0.15);
    border-color: var(--ed-orange);
    color: var(--ed-orange);
}

.btn-outline-danger {
    color: var(--ed-red);
    border-color: var(--ed-red);
}

.btn-sm {
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card {
    background: var(--ed-bg-panel);
    border: 1px solid var(--ed-border);
    border-radius: 0;
}

.card-header {
    background: var(--ed-bg-header);
    border-bottom: 1px solid var(--ed-border);
    color: var(--ed-orange);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.6rem 1rem;
}

.table {
    color: var(--ed-text);
    margin-bottom: 0;
}

.table-dark {
    --bs-table-bg: transparent;
    --bs-table-border-color: rgba(255, 113, 0, 0.1);
}

.table thead th {
    background: linear-gradient(90deg, rgba(255, 113, 0, 0.12) 0%, transparent 60%);
    font-weight: 400;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #f07b05;
    border-bottom: 1px solid var(--ed-border);
}

.table tbody tr {
    transition: background 0.2s;
    border-left: 2px solid transparent;
}

.table-hover tbody tr:hover {
    background: rgba(255, 113, 0, 0.08) !important;
    color: var(--ed-text-orange);
    border-left-color: #f07b05;
}

.form-control, .form-select {
    background: var(--ed-bg-input);
    border: 1px solid var(--ed-border);
    color: var(--ed-text);
    border-radius: 0;
}

.form-control:focus, .form-select:focus {
    background: var(--ed-bg-hover);
    border-color: var(--ed-orange);
    box-shadow: 0 0 0 2px var(--ed-orange-glow);
    color: var(--ed-text);
}

.form-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ed-text-dim);
}

.alert {
    border-radius: 0;
    border-left-width: 3px;
}

.alert-warning {
    background: rgba(255, 170, 0, 0.1);
    border-color: rgba(255, 170, 0, 0.3);
    border-left-color: var(--ed-yellow);
    color: var(--ed-text);
}

/* Global sharp edges for Bootstrap elements */
.btn {
    border-radius: 0;
}

.list-group-item {
    border-radius: 0;
}

.pagination .page-link {
    border-radius: 0;
    background: var(--ed-bg-surface);
    border-color: var(--ed-border);
    color: var(--ed-text-dim);
}

.pagination .page-link:hover {
    background: rgba(255, 113, 0, 0.15);
    border-color: var(--ed-orange);
    color: var(--ed-orange);
}

.pagination .page-item.active .page-link {
    background: var(--ed-orange);
    border-color: var(--ed-orange);
    color: #000;
}

.pagination .page-item.disabled .page-link {
    background: var(--ed-bg-panel);
    border-color: var(--ed-border);
    color: var(--ed-text-muted);
    opacity: 0.4;
}

.form-control-lg {
    border-radius: 0;
}

.input-group-text {
    border-radius: 0;
    background: var(--ed-bg-input);
    border-color: var(--ed-border);
    color: var(--ed-text-dim);
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

/* Breadcrumb dark theme */
.breadcrumb {
    --bs-breadcrumb-divider-color: var(--ed-text-muted);
    --bs-breadcrumb-item-active-color: var(--ed-text-secondary);
}

.breadcrumb-item a {
    color: var(--ed-text-muted);
}

.breadcrumb-item a:hover {
    color: var(--ed-orange);
}

.badge {
    font-weight: 400;
    border-radius: 0;
}

/* State badges */
.badge-state {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-sm {
    font-size: 0.6rem;
    padding: 1px 4px;
}

.badge-stronghold {
    background: rgba(155, 89, 182, 0.2);
    color: #9b59b6;
    border: 1px solid #9b59b6;
}

.badge-fortified {
    background: rgba(52, 152, 219, 0.2);
    color: #3498db;
    border: 1px solid #3498db;
}

.badge-exploited {
    background: rgba(240, 123, 5, 0.2);
    color: #f07b05;
    border: 1px solid #f07b05;
}

.badge-contested {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
    border: 1px solid #e74c3c;
}

.badge-turmoil {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
    border: 1px solid #e74c3c;
}

.badge-unoccupied {
    background: rgba(160, 168, 176, 0.15);
    color: #a0a8b0;
    border: 1px solid #a0a8b0;
}

.badge-unknown {
    background: rgba(160, 168, 176, 0.15);
    color: #a0a8b0;
    border: 1px solid #a0a8b0;
}

/* Stat cards */
.stat-card {
    background: linear-gradient(180deg, rgba(255, 113, 0, 0.05) 0%, transparent 100%);
    border: 1px solid var(--ed-border);
    padding: 1rem;
    text-align: center;
    position: relative;
    transition: all 0.3s;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--ed-orange), transparent);
    opacity: 0.5;
}

.stat-card:hover {
    background: linear-gradient(180deg, rgba(255, 113, 0, 0.1) 0%, transparent 100%);
    border-color: var(--ed-border-bright);
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 300;
    color: var(--ed-orange);
    line-height: 1;
    margin-bottom: 0.25rem;
    text-shadow: 0 0 15px var(--ed-orange-glow);
}

.stat-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ed-text-dim);
}

/* Live status dot */
.live-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 0.75rem;
    vertical-align: middle;
    cursor: help;
}

.live-status-dot.live {
    background: var(--ed-green);
    box-shadow: 0 0 6px var(--ed-green);
    animation: live-pulse 2s ease-in-out infinite;
}

.live-status-dot.connecting {
    background: var(--ed-yellow);
    animation: live-blink 0.6s ease-in-out infinite;
}

.live-status-dot.offline {
    background: var(--ed-text-dim);
}

/* New data row animation */
.activity-new {
    animation: row-highlight 2s ease-out;
}

/* Content area */
.content {
    padding-top: 1rem;
}

/* Error boundary */
.blazor-error-boundary {
    background: var(--ed-red);
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* Validation */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--ed-green);
}

.invalid {
    outline: 1px solid var(--ed-red);
}

.validation-message {
    color: var(--ed-red);
    font-size: 0.8rem;
}

/* Cascade cards */
.cascade-card {
    background: var(--ed-bg-panel);
    border: 1px solid var(--ed-border);
    padding: 1rem;
    margin-bottom: 1rem;
    transition: border-color 0.2s;
}

.cascade-card:hover {
    border-color: var(--ed-border-bright);
}

.cascade-rank {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--ed-orange);
    min-width: 2.5rem;
    text-shadow: 0 0 10px var(--ed-orange-glow);
}

.dependent-count {
    font-size: 2rem;
    font-weight: 300;
    color: var(--ed-blue);
    text-shadow: 0 0 10px var(--ed-blue-glow);
}

/* Nav menu specifics */
.nav-badge {
    font-size: 0.6rem;
    padding: 0.15em 0.4em;
    margin-left: 0.5rem;
    background: var(--ed-red);
    color: white;
}

/* Vulnerable page specific */
.stat-card-red .stat-value {
    color: var(--ed-red);
    text-shadow: 0 0 15px rgba(255, 51, 51, 0.4);
}

.stat-card-yellow .stat-value {
    color: var(--ed-yellow);
    text-shadow: 0 0 15px rgba(255, 170, 0, 0.4);
}

.stat-card-green .stat-value {
    color: var(--ed-green);
    text-shadow: 0 0 15px rgba(0, 255, 102, 0.4);
}

.table-header-red {
    background: rgba(255, 51, 51, 0.15) !important;
    border-bottom: 2px solid var(--ed-red) !important;
}

.table-header-yellow {
    background: rgba(255, 170, 0, 0.15) !important;
    border-bottom: 2px solid var(--ed-yellow) !important;
}

.alert-vulnerable {
    background: rgba(255, 51, 51, 0.1);
    border: 1px solid rgba(255, 51, 51, 0.3);
    border-left: 3px solid var(--ed-red);
}

.alert-at-risk {
    background: rgba(255, 170, 0, 0.1);
    border: 1px solid rgba(255, 170, 0, 0.3);
    border-left: 3px solid var(--ed-yellow);
}

/* Pulse animation for alerts */
.ed-pulse {
    animation: alert-pulse 2s ease-in-out infinite;
}

@keyframes alert-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ================================================
   Top Navigation Bar
   ================================================ */

.ed-app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ────────────────────────────────────────────────────────────────────
   Cockpit-style 3-tier header (Galnet Wire variant).
   Tier 1: EDDN live ticker (SignalR-driven)
   Tier 2: brand · nav · search
   Tier 3: pledged power · territory snapshot · cycle countdown
   ──────────────────────────────────────────────────────────────────── */

.edhdr {
    position: sticky;
    top: 0;
    z-index: 1000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Tier 1 · live ticker ──────────────────────────────────────── */
.edhdr-ticker {
    position: relative;
    height: 26px;
    background: #05080d;
    border-bottom: 1px solid rgba(255, 113, 0, 0.18);
    overflow: hidden;
    display: flex;
    align-items: center;
}
.edhdr-ticker-badge {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 160px;
    z-index: 2;
    /* Almost-solid mask — items stay fully visible until they touch the
       vertical bar (right border), then get cleanly hidden. The last 3%
       fades only enough to avoid a hard pixel edge. */
    background: linear-gradient(90deg, #05080d 0%, #05080d 97%, transparent 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: #00ff66;
}
.edhdr-pulse {
    width: 5px;
    height: 5px;
    border-radius: 3px;
    background: #00ff66;
    box-shadow: 0 0 6px #00ff66;
    animation: edhdr-pulse 1.2s ease-in-out infinite;
}
.edhdr-pulse-orange {
    background: #ff7100;
    box-shadow: 0 0 6px #ff7100;
}
.edhdr-ticker-rail {
    display: flex;
    gap: 40px;
    /* Sits just past the badge's right edge so items emerge from the bar
       rather than from empty space. */
    padding-left: 168px;
    /* Scroll is driven by js/edhdr-marquee.js in px/sec so the speed stays
       stable as items are merged in or out — a percentage-based CSS animation
       was visibly jumping whenever the rail width changed. translate3d /
       backface-visibility / will-change together promote the rail onto a
       GPU compositor layer so the text doesn't re-rasterise at sub-pixel
       offsets every frame ("shaky text"). */
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    white-space: nowrap;
    will-change: transform;
}
.edhdr-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: #9aa4b2;
    letter-spacing: 0.03em;
}
.edhdr-ticker-item.is-clickable { cursor: pointer; }
.edhdr-ticker-item.is-clickable:hover .edhdr-ticker-text { color: #fff; }
.edhdr-ticker-tag {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.24em;
    color: #ff9033;
}
.edhdr-ticker-tag.is-alert { color: #ff3333; }
.edhdr-ticker-text { color: #b0b8c1; }
.edhdr-ticker-text.is-alert { color: #ff8c8c; }

@keyframes edhdr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
/* The scroll keyframes that used to live here are gone — the marquee is
   now driven by js/edhdr-marquee.js so the speed is stable across width
   changes. The .edhdr-pulse keyframe stays — it's just opacity, unaffected. */

/* ── Tier 2 · brand · nav · search ─────────────────────────────── */
.edhdr-tier2 {
    position: relative;
    height: 58px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 22px;
    background: linear-gradient(180deg, #11161e 0%, #0d1117 100%);
}

.edhdr-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}
.edhdr-brand-logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(255, 113, 0, 0.5));
}
.edhdr-brand-text {
    display: flex;
    align-items: baseline;
    gap: 2px;
    line-height: 1;
}
.edhdr-brand-ed {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #ff7100;
    text-shadow: 0 0 10px rgba(255, 113, 0, 0.5);
}
.edhdr-brand-pp {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: #fff;
}

.edhdr-nav {
    display: flex;
    gap: 0;
    margin-left: 10px;
}
.edhdr-nav-link {
    position: relative;
    padding: 10px 14px;
    font-size: 11px;
    letter-spacing: 0.2em;
    font-weight: 600;
    text-transform: uppercase;
    color: #9aa4b2;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: color 0.15s;
}
.edhdr-nav-link:hover { color: #fff; }
.edhdr-nav-icon { opacity: 0.55; display: inline-flex; }
.edhdr-nav-link.active { color: #fff; }
.edhdr-nav-link.active .edhdr-nav-icon { opacity: 1; }
.edhdr-nav-link.active::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    background: #ff7100;
    box-shadow: 0 0 10px #ff7100;
}

/* Vulnerable variant — red accent everywhere */
.edhdr-nav-link.is-alert { color: #ff8c8c; }
.edhdr-nav-link.is-alert .edhdr-nav-icon { color: #ff3333; opacity: 0.8; }
.edhdr-nav-link.is-alert:hover { color: #ff5555; }
.edhdr-nav-link.is-alert.active::after { background: #ff3333; box-shadow: 0 0 10px #ff3333; }
.edhdr-alert-badge {
    padding: 1px 5px;
    background: #ff3333;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: 0 0 6px rgba(255, 51, 51, 0.5);
    animation: edhdr-pulse 2.2s ease-in-out infinite;
}

.edhdr-spacer { flex: 1; }

/* Search */
.edhdr-search-container {
    position: relative;
}
.edhdr-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: 32px;
    width: 280px;
    background: #0f1419;
    border: 1px solid rgba(255, 113, 0, 0.22);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.edhdr-search:focus-within {
    border-color: #ff7100;
    box-shadow: 0 0 8px rgba(255, 113, 0, 0.4);
}
.edhdr-search-icon { color: #5f6a78; flex-shrink: 0; transition: color 0.15s; }
.edhdr-search:focus-within .edhdr-search-icon { color: #ff7100; }
.edhdr-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #e6edf3;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.04em;
}
.edhdr-search input::placeholder { color: #5f6a78; }
.edhdr-search-kbd {
    font-size: 9px;
    padding: 2px 5px;
    background: #181d24;
    color: #5f6a78;
    font-family: 'Consolas', 'Monaco', monospace;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}
.edhdr-search-clear {
    background: transparent;
    border: none;
    color: #5f6a78;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 14px;
    line-height: 1;
    font-family: inherit;
}
.edhdr-search-clear:hover { color: #ff7100; }

.edhdr-search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 280px;
    background: #0f1419;
    border: 1px solid rgba(255, 113, 0, 0.25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 2000;
    max-height: 360px;
    overflow-y: auto;
}
.edhdr-search-dropdown::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ff7100, transparent);
    opacity: 0.5;
}
.edhdr-search-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    color: #e6edf3;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    cursor: pointer;
}
.edhdr-search-result:hover {
    background: rgba(255, 113, 0, 0.08);
    border-left-color: #ff7100;
    color: #ff9544;
}
.edhdr-search-result + .edhdr-search-result {
    border-top: 1px solid rgba(255, 113, 0, 0.06);
}
.edhdr-search-result-name {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.edhdr-search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    color: #95a0ab;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.edhdr-search-empty {
    padding: 14px;
    text-align: center;
    color: #95a0ab;
    font-size: 12px;
    letter-spacing: 0.03em;
}

/* The .ed-spinner-sm spinner is shared with Vulnerable.razor, kept below. */

/* ── Tier 3 · pledged power · territory · cycle ────────────────── */
.edhdr-tier3 {
    position: relative;
    height: 36px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    /* Power-color tint stacked on top of a solid base — the previous
       gradient faded to fully transparent past 55%, which let the page
       content bleed through the right half of the strip. The first
       background paints on top; the comma-separated solid behind it
       guarantees there's always opaque pixels behind everything. */
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--power-color, #ff7100) 25%, transparent) 0%,
            color-mix(in srgb, var(--power-color, #ff7100) 4%, transparent) 30%,
            transparent 55%),
        linear-gradient(180deg, #0d1117 0%, #0a0e14 100%);
    border-top: 1px solid color-mix(in srgb, var(--power-color, #ff7100) 33%, transparent);
    border-bottom: 1px solid rgba(255, 113, 0, 0.18);
}

.edhdr-power-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 10px 3px 3px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    font-family: inherit;
}
.edhdr-power-emblem {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--power-color, #ff7100) 20%, transparent);
    border: 1px solid var(--power-color, #ff7100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.edhdr-power-emblem img { filter: brightness(0) invert(1); }
.edhdr-power-label {
    font-size: 10px;
    letter-spacing: 0.24em;
    color: #5f6a78;
}
.edhdr-power-name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--power-color, #ff7100);
    text-transform: uppercase;
}
.edhdr-chev {
    width: 10px;
    height: 10px;
    color: #5f6a78;
    margin-left: 2px;
    transition: transform 0.15s;
    flex-shrink: 0;
}
.edhdr-chev.open { transform: rotate(180deg); }

.edhdr-power-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 24px;
    width: 240px;
    background: var(--ed-bg-surface, #161b22);
    border: 1px solid rgba(240, 123, 5, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    z-index: 1100;
    max-height: 420px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(240, 123, 5, 0.3) transparent;
}
.edhdr-power-dropdown-header {
    padding: 8px 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ed-text-muted, #95a0ab);
    border-bottom: 1px solid rgba(240, 123, 5, 0.1);
}
.edhdr-power-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 12px;
    background: transparent;
    border: none;
    color: var(--ed-text-secondary, #b0b8c1);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-align: left;
}
.edhdr-power-dropdown-item img {
    filter: brightness(0) invert(1);
    opacity: 0.55;
    flex-shrink: 0;
}
.edhdr-power-dropdown-item:hover {
    background: rgba(240, 123, 5, 0.1);
    color: var(--ed-text, #e6edf3);
}
.edhdr-power-dropdown-item:hover img { opacity: 0.9; }
.edhdr-power-dropdown-item.active {
    background: rgba(240, 123, 5, 0.14);
    color: var(--ed-orange, #ff7100);
}
.edhdr-power-dropdown-item.active img { opacity: 1; }
.edhdr-power-dropdown-name { flex: 1; }
.edhdr-power-dropdown-check {
    margin-left: auto;
    color: var(--ed-orange, #ff7100);
    flex-shrink: 0;
}
.edhdr-power-dropdown-sep {
    height: 1px;
    background: rgba(240, 123, 5, 0.1);
    margin: 2px 0;
}
.edhdr-power-dropdown-clear {
    color: var(--ed-text-muted, #95a0ab);
    font-size: 11px;
}
.edhdr-power-dropdown-clear:hover {
    color: #ff4444;
    background: rgba(255, 68, 68, 0.08);
}

.edhdr-divider {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.08);
}

.edhdr-territory-label {
    font-size: 10px;
    letter-spacing: 0.24em;
    color: #5f6a78;
}
.edhdr-territory-chips {
    display: flex;
    align-items: center;
    gap: 2px;
}
.edhdr-territory-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    background: transparent;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    text-decoration: none;
}
.edhdr-territory-chip:last-child { border-right: none; }
.edhdr-territory-chip:hover { background: rgba(255, 255, 255, 0.04); }
.edhdr-dot {
    width: 5px;
    height: 5px;
    border-radius: 3px;
    flex-shrink: 0;
}
.edhdr-territory-key {
    font-size: 9px;
    letter-spacing: 0.22em;
    color: #7a8492;
}
.edhdr-territory-count {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    font-weight: 700;
    color: #e6edf3;
    letter-spacing: 0.04em;
}
.edhdr-territory-sep {
    font-size: 9px;
    letter-spacing: 0.22em;
    color: #5f6a78;
}
.edhdr-territory-total {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--power-color, #ff7100);
    letter-spacing: 0.04em;
}

.edhdr-cycle-label {
    font-size: 9px;
    letter-spacing: 0.28em;
    color: #5f6a78;
}
.edhdr-cycle-time {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    font-weight: 700;
    color: #ff9033;
    letter-spacing: 0.06em;
    text-shadow: 0 0 8px rgba(255, 113, 0, 0.4);
    font-variant-numeric: tabular-nums;
}

/* ── Spinner shared with Vulnerable.razor ───────────────────────── */
.ed-spinner-sm {
    width: 16px;
    height: 16px;
    border: 2px solid var(--ed-border);
    border-top-color: var(--ed-orange);
    border-radius: 50%;
    animation: ed-spin 0.8s linear infinite;
}

/* Main Content Area */
.ed-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ed-content {
    flex: 1;
    width: 100%;
}

/* ================================================
   Navigation Progress Bar
   ================================================ */
.nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 9999;
    overflow: visible;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}

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

.nav-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, transparent, #f07b05, #ff9933, #f07b05, transparent);
    width: 40%;
    animation: nav-progress-slide 0.8s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(240, 123, 5, 0.6), 0 0 20px rgba(240, 123, 5, 0.3);
}

@keyframes nav-progress-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* ================================================
   Staggered Page Animations
   ================================================ */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fade-in-up 0.3s ease-out both;
}

.fade-in-d1 {
    animation: fade-in-up 0.3s ease-out 0.05s both;
}

.fade-in-d2 {
    animation: fade-in-up 0.3s ease-out 0.1s both;
}

.fade-in-d3 {
    animation: fade-in-up 0.3s ease-out 0.15s both;
}

.fade-in-d4 {
    animation: fade-in-up 0.3s ease-out 0.2s both;
}

/* Mobile / narrow-viewport behaviour for the cockpit header.
   - < ~1200px: hide the tier-3 territory chips (least essential).
   - < ~900px:  drop the tier-1 ticker and compress nav. */
@media (max-width: 1200px) {
    .edhdr-territory-chips,
    .edhdr-territory-sep,
    .edhdr-territory-label,
    .edhdr-territory-total {
        display: none;
    }
}

@media (max-width: 900px) {
    .edhdr-ticker { display: none; }
    .edhdr-tier2 {
        height: auto;
        flex-wrap: wrap;
        padding: 8px 12px;
        gap: 10px;
    }
    .edhdr-nav {
        order: 3;
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
    }
    .edhdr-nav-link { padding: 8px 10px; font-size: 10px; }
    .edhdr-search-container { order: 2; flex: 1; min-width: 0; }
    .edhdr-search { width: 100%; }
    .edhdr-tier3 {
        height: auto;
        flex-wrap: wrap;
        padding: 6px 12px;
        gap: 10px;
    }
    .edhdr-power-name { font-size: 10px; }
    .edhdr-cycle-time { font-size: 12px; }
}

/* Remove old sidebar styles */
.page, .sidebar, .top-row, .nav-scrollable {
    all: unset;
}

.navbar-toggler {
    display: none;
}

/* ================================================
   Shared: Loading / Empty / Error States
   ================================================ */

.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--ed-bg-surface);
    border: 1px solid var(--ed-border-subtle);
    padding: 60px 20px;
    text-align: center;
    color: var(--ed-text-muted);
    gap: 8px;
}

.empty-state h4 {
    color: var(--ed-text-secondary);
    margin-bottom: 8px;
}

.empty-state p {
    color: var(--ed-text-muted);
    margin: 0;
}

.empty-state small {
    color: var(--ed-text-muted);
    font-size: 0.8rem;
}

.error-state {
    text-align: center;
    padding: 60px 20px;
    background: var(--ed-bg-surface);
    border: 1px solid var(--ed-border-subtle);
}

.error-state h4 {
    color: var(--ed-text-secondary);
    margin-bottom: 8px;
}

.error-state p {
    color: var(--ed-text-muted);
    margin-bottom: 16px;
}

.btn-retry {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid #f07b05;
    color: #f07b05;
    cursor: pointer;
    font-size: 0.85rem;
}

.btn-retry:hover {
    background: rgba(240, 123, 5, 0.1);
}

.btn-back {
    display: inline-block;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid #f07b05;
    color: #f07b05;
    text-decoration: none;
    font-size: 0.85rem;
}

.btn-back:hover {
    background: rgba(240, 123, 5, 0.1);
}

/* ================================================
   Shared: Filter Panel
   ================================================ */

.filter-panel {
    background: var(--ed-bg-surface);
    border: 1px solid rgba(255, 113, 0, 0.15);
    padding: 16px;
}

.filter-section {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ed-text-muted);
    font-weight: 600;
}

.filter-select {
    background: var(--ed-bg-input);
    border: 1px solid var(--ed-border-strong);
    color: var(--ed-text);
    font-size: 0.8rem;
    padding: 6px 10px;
    min-width: 140px;
}

.filter-select:focus {
    background: var(--ed-bg-input);
    border-color: #f07b05;
    box-shadow: none;
    color: #fff;
}

/* ================================================
   Shared: Stats Row + Stat Card
   ================================================ */

.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: linear-gradient(135deg, var(--ed-bg-surface) 0%, var(--ed-bg-elevated) 100%);
    border: 1px solid var(--ed-border-subtle);
    padding: 20px;
    text-align: center;
}

.stat-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #f07b05;
    line-height: 1.2;
}

.stat-card .stat-label {
    font-size: 0.75rem;
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.stat-card .stat-sublabel {
    font-size: 0.7rem;
    color: var(--ed-text-muted);
    margin-top: 4px;
}

/* ================================================
   Shared: Panel
   ================================================ */

.panel {
    background: var(--ed-bg-surface);
    border: 1px solid rgba(255, 113, 0, 0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.panel::before,
.panel::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-style: solid;
    border-color: rgba(255, 113, 0, 0.3);
    border-width: 0;
    transition: all 0.25s;
    z-index: 2;
}

.panel::before {
    top: -1px; left: -1px;
    border-top-width: 2px; border-left-width: 2px;
}

.panel::after {
    bottom: -1px; right: -1px;
    border-bottom-width: 2px; border-right-width: 2px;
}

.panel:hover::before,
.panel:hover::after {
    border-color: #f07b05;
    width: 22px;
    height: 22px;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(90deg, rgba(255, 113, 0, 0.12) 0%, transparent 60%);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #f07b05;
    border-bottom: 2px solid rgba(255, 113, 0, 0.2);
}

.panel-body {
    padding: 16px;
    flex: 1;
    min-height: 0;
}

.panel-body.no-pad {
    padding: 0;
}

.panel-badge {
    font-size: 0.65rem;
    padding: 2px 8px;
    background: rgba(240, 123, 5, 0.15);
    color: #f07b05;
    text-transform: none;
}

.panel-badge.badge-red { background: rgba(255, 68, 68, 0.2); color: #ff4444; }
.panel-badge.badge-green { background: rgba(0, 255, 136, 0.2); color: #00ff88; }
.panel-badge.badge-yellow { background: rgba(255, 204, 0, 0.2); color: #ffcc00; }

.panel-compact {
    margin-bottom: 12px;
}

.panel-warning .panel-header {
    border-bottom-color: rgba(255, 204, 0, 0.3);
}

.panel-danger .panel-header {
    border-bottom-color: rgba(255, 68, 68, 0.3);
}

/* ================================================
   Shared: Stat Box
   ================================================ */

.stat-box {
    background: var(--ed-bg-surface);
    border: 1px solid rgba(255, 113, 0, 0.15);
    border-top: 2px solid #f07b05;
    padding: 16px;
    text-align: center;
    position: relative;
}

.stat-box .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ed-text);
    line-height: 1.2;
    font-family: 'Consolas', 'Monaco', monospace;
}

.stat-box .stat-label {
    font-size: 0.7rem;
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.stat-box .stat-sublabel {
    font-size: 0.6rem;
    color: var(--ed-text-faint);
    margin-top: 2px;
}

.stat-box.stat-green .stat-value { color: #00ff88; }
.stat-box.stat-red .stat-value { color: #ff4444; }
.stat-box.stat-conflict .stat-value { color: #ffcc00; }

/* ================================================
   Shared: Back Link
   ================================================ */

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ed-text-muted);
    text-decoration: none;
    font-size: 0.8rem;
    margin-bottom: 12px;
    transition: color 0.15s;
}

.back-link:hover { color: #f07b05; }
.back-icon { font-size: 1rem; }

/* ================================================
   Shared: Detail Header + Grid
   ================================================ */

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.header-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.update-time {
    font-size: 0.75rem;
    color: var(--ed-text-muted);
}

/* ================================================
   Shared: Data Table
   ================================================ */

.ed-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8rem;
}

.ed-data-table thead {
    background-color: var(--ed-bg-elevated);
    background-image: linear-gradient(90deg, rgba(255, 113, 0, 0.12) 0%, transparent 60%);
}

.ed-data-table th {
    padding: 8px 12px;
    font-weight: 600;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #f07b05;
    border-bottom: none;
    box-shadow: inset 0 -2px 0 #f07b05;
}

.ed-data-table td {
    padding: 6px 12px;
    color: var(--ed-text-secondary);
    border-bottom: 1px solid rgba(255, 113, 0, 0.06);
}

.ed-data-table tbody tr {
    transition: all 0.15s;
    border-left: 2px solid transparent;
}

.ed-data-table tbody tr:hover {
    background: rgba(240, 123, 5, 0.08);
    border-left-color: #f07b05;
}

.ed-data-table tbody tr:last-child td {
    border-bottom: none;
}

.ed-data-table thead.sticky {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* ================================================
   Shared: Live Badge
   ================================================ */

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    background: rgba(0, 255, 136, 0.15);
    border: 1px solid rgba(0, 255, 136, 0.3);
    font-size: 0.65rem;
    font-weight: 600;
    color: #00ff88;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.live-dot {
    width: 6px;
    height: 6px;
    background: #00ff88;
    border-radius: 50%;
    animation: live-pulse 1.5s ease-in-out infinite;
}

/* ================================================
   Shared: Empty Message
   ================================================ */

.empty-message {
    padding: 16px;
    text-align: center;
    color: var(--ed-text-muted);
    font-size: 0.85rem;
}

/* ================================================
   Shared: ED Button Outline Variant
   ================================================ */

.ed-btn-outline {
    background: transparent;
    border-color: rgba(255, 113, 0, 0.3);
    color: var(--ed-text-secondary);
}

.ed-btn-outline:hover {
    border-color: #f07b05;
    color: #f07b05;
    background: rgba(240, 123, 5, 0.1);
}

/* ================================================
   Shared: Responsive Detail Layout
   ================================================ */

@media (max-width: 1024px) {
    .detail-grid { grid-template-columns: 1fr; }
    .detail-header { flex-direction: column; }
}

/* ================================================
   Shared: Results Header
   ================================================ */

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    color: var(--ed-text-secondary);
    font-size: 0.85rem;
}

.results-count strong {
    color: #f07b05;
}

/* ================================================
   Shared: Page Header
   ================================================ */

.page-header {
    margin-bottom: 24px;
}

.page-header h1 {
    margin-bottom: 4px;
}

.page-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    color: var(--ed-text);
}

.page-subtitle {
    color: var(--ed-text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.page-intro {
    position: relative;
    margin: 0 0 28px 0;
    padding: 18px 22px 18px 24px;
    background:
        linear-gradient(135deg, rgba(255, 113, 0, 0.05) 0%, rgba(255, 113, 0, 0.015) 55%, transparent 100%),
        var(--ed-bg-surface);
    border: 1px solid rgba(255, 113, 0, 0.15);
    border-left: 3px solid #f07b05;
    color: var(--ed-text-secondary);
    font-size: 0.925rem;
    line-height: 1.65;
    letter-spacing: 0.005em;
}
.page-intro::before,
.page-intro::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-style: solid;
    border-color: rgba(255, 113, 0, 0.45);
    border-width: 0;
    pointer-events: none;
}
.page-intro::before {
    top: -1px; right: -1px;
    border-top-width: 2px; border-right-width: 2px;
}
.page-intro::after {
    bottom: -1px; right: -1px;
    border-bottom-width: 2px; border-right-width: 2px;
}
.page-intro p { margin: 0 0 12px 0; }
.page-intro p:last-child { margin-bottom: 0; }
.page-intro strong {
    color: #f07b05;
    font-weight: 600;
    letter-spacing: 0.01em;
}

@media (max-width: 640px) {
    .page-intro {
        padding: 14px 16px 14px 18px;
        font-size: 0.88rem;
        line-height: 1.6;
    }
}

/* ================================================
   Shared: Small Utilities
   ================================================ */

.clickable-row {
    cursor: pointer;
}

/* Copy Button */
.btn-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    color: var(--ed-text-faint);
    cursor: pointer;
    transition: all 0.15s;
    vertical-align: middle;
    flex-shrink: 0;
}
.btn-copy:hover {
    color: #f07b05;
    border-color: rgba(240, 123, 5, 0.3);
    background: rgba(240, 123, 5, 0.1);
}
.btn-copy.copied {
    color: #00ff88;
    border-color: rgba(0, 255, 136, 0.3);
    background: rgba(0, 255, 136, 0.1);
}

/* ================================================
   Power Logos (from edassets.org)
   ================================================ */

.power-logo {
    display: inline-block;
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
    transition: filter 0.15s;
}
.power-logo:hover,
.power-card:hover .power-logo {
    filter: brightness(0) invert(0.7) sepia(1) saturate(5) hue-rotate(350deg);
}
.power-logo-sm { width: 16px; height: 16px; }
.power-logo-md { width: 24px; height: 24px; }
.power-logo-lg { width: 32px; height: 32px; }
.power-logo-xl { width: 40px; height: 40px; }

/* ================================================
   Vulnerable Systems Dashboard
   ================================================ */

/* Power risk strip */
.power-risk-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    align-items: center;
}

.power-risk-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 8px;
    background: var(--ed-bg-surface);
    border: 1px solid var(--ed-border-subtle);
    color: var(--ed-text-secondary);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.75rem;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.power-risk-pill:hover {
    border-color: rgba(255, 113, 0, 0.5);
    color: var(--ed-text);
}

.power-risk-pill.active {
    border-color: var(--ed-orange);
    background: rgba(240, 123, 5, 0.12);
    color: var(--ed-text);
}

.power-risk-logo {
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.7;
    flex-shrink: 0;
}

.power-risk-pill.active .power-risk-logo,
.power-risk-pill:hover .power-risk-logo {
    opacity: 1;
}

.power-risk-name {
    font-weight: 500;
    letter-spacing: 0.02em;
}

.power-risk-counts {
    display: inline-flex;
    gap: 4px;
    margin-left: 2px;
}

.risk-pip {
    display: inline-block;
    min-width: 22px;
    padding: 1px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
    font-family: 'Consolas', 'Monaco', monospace;
    line-height: 1.4;
}

.risk-pip-red {
    background: rgba(255, 51, 51, 0.18);
    color: #ff6666;
    border: 1px solid rgba(255, 51, 51, 0.35);
}

.risk-pip-yellow {
    background: rgba(255, 170, 0, 0.15);
    color: #ffcc44;
    border: 1px solid rgba(255, 170, 0, 0.35);
}

.power-risk-clear {
    padding: 5px 10px;
    background: transparent;
    border: 1px solid var(--ed-border-subtle);
    color: var(--ed-text-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color 0.15s, border-color 0.15s;
}

.power-risk-clear:hover {
    color: var(--ed-red);
    border-color: var(--ed-red);
}

/* Stats with delta */
.vuln-stats {
    grid-template-columns: repeat(3, 1fr);
}

.stat-card-head {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
}

.stat-delta {
    font-size: 0.72rem;
    font-weight: 600;
    font-family: 'Consolas', 'Monaco', monospace;
    letter-spacing: 0.02em;
    padding: 2px 6px;
}

.stat-delta.delta-bad {
    color: #ff6666;
    background: rgba(255, 51, 51, 0.12);
}

.stat-delta.delta-good {
    color: #5dd58f;
    background: rgba(0, 255, 102, 0.1);
}

.stat-delta.delta-flat {
    color: var(--ed-text-muted);
    background: rgba(160, 168, 176, 0.08);
}

.stat-card-red .stat-value {
    color: var(--ed-red);
    text-shadow: 0 0 15px rgba(255, 51, 51, 0.4);
}

.stat-card-yellow .stat-value {
    color: var(--ed-yellow);
    text-shadow: 0 0 15px rgba(255, 170, 0, 0.4);
}

.stat-card .stat-value.blue {
    color: var(--ed-blue);
    text-shadow: 0 0 15px var(--ed-blue-glow);
}

/* Tabs */
.vuln-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--ed-border-subtle);
}

.vuln-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--ed-text-muted);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}

.vuln-tab:hover {
    color: var(--ed-text);
}

.vuln-tab.active {
    color: var(--ed-orange);
    border-bottom-color: var(--ed-orange);
}

.vuln-tab-red.active {
    color: var(--ed-red);
    border-bottom-color: var(--ed-red);
}

.vuln-tab-yellow.active {
    color: var(--ed-yellow);
    border-bottom-color: var(--ed-yellow);
}

.vuln-tab-count {
    font-size: 0.72rem;
    padding: 1px 8px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--ed-text-muted);
    font-family: 'Consolas', 'Monaco', monospace;
    font-weight: 700;
}

.vuln-tab.active .vuln-tab-count {
    background: currentColor;
    color: var(--ed-bg-body);
}

/* Severity dots */
.severity-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.severity-vulnerable {
    background: var(--ed-red);
    box-shadow: 0 0 8px rgba(255, 51, 51, 0.5);
    animation: live-pulse 2.4s ease-in-out infinite;
}

.severity-atrisk {
    background: var(--ed-yellow);
    box-shadow: 0 0 6px rgba(255, 170, 0, 0.45);
}

/* Vulnerable table */
.vuln-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8rem;
}

.vuln-table thead {
    background: linear-gradient(90deg, rgba(255, 113, 0, 0.12) 0%, transparent 60%);
}

.vuln-table th {
    padding: 8px 12px;
    font-weight: 600;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #f07b05;
    text-align: left;
    box-shadow: inset 0 -2px 0 #f07b05;
    white-space: nowrap;
}

.vuln-table td {
    padding: 8px 12px;
    color: var(--ed-text-secondary);
    border-bottom: 1px solid rgba(255, 113, 0, 0.06);
    vertical-align: middle;
}

.vuln-table .col-sev { width: 24px; padding-left: 14px; padding-right: 4px; }
.vuln-table .col-system { min-width: 200px; }
.vuln-table .col-power { width: 180px; }
.vuln-table .col-cp { width: 130px; }
.vuln-table .col-ru { width: 110px; white-space: nowrap; }
.vuln-table .col-trend { width: 100px; }
.vuln-table .col-info { width: 60px; }
.vuln-table .col-reason { width: 200px; }
.vuln-table .col-updated { width: 90px; white-space: nowrap; }
.vuln-table .col-toggle { width: 28px; text-align: center; color: var(--ed-text-muted); }

.vuln-row {
    cursor: pointer;
    transition: background 0.15s, border-left-color 0.15s;
    border-left: 2px solid transparent;
}

.vuln-row.row-vulnerable {
    border-left-color: rgba(255, 51, 51, 0.45);
}

.vuln-row.row-atrisk {
    border-left-color: rgba(255, 170, 0, 0.4);
}

.vuln-row:hover {
    background: rgba(255, 113, 0, 0.06);
}

.vuln-row.row-vulnerable:hover {
    background: rgba(255, 51, 51, 0.08);
    border-left-color: var(--ed-red);
}

.vuln-row.row-atrisk:hover {
    background: rgba(255, 170, 0, 0.06);
    border-left-color: var(--ed-yellow);
}

.vuln-row.expanded {
    background: rgba(255, 113, 0, 0.05);
}

.vuln-table .system-name-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vuln-table .system-link {
    color: var(--ed-text);
    font-weight: 500;
    text-decoration: none;
}

.vuln-table .system-link:hover {
    color: var(--ed-orange);
}

.vuln-table .system-coords {
    display: block;
    margin-top: 2px;
    font-size: 0.68rem;
    color: var(--ed-text-muted);
    font-family: 'Consolas', 'Monaco', monospace;
}

.power-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.power-cell-name {
    color: var(--ed-text-secondary);
    font-size: 0.8rem;
}

/* CP cell w/ bar */
.cp-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 110px;
}

.cp-value {
    font-size: 0.85rem;
    color: var(--ed-text);
}

.cp-bar {
    display: block;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.cp-bar-fill {
    display: block;
    height: 100%;
    transition: width 0.3s;
}

.cp-bar-fill.fill-red    { background: linear-gradient(90deg, #ff3333, #ff6666); box-shadow: 0 0 6px rgba(255, 51, 51, 0.6); }
.cp-bar-fill.fill-yellow { background: linear-gradient(90deg, #ffaa00, #ffcc55); box-shadow: 0 0 6px rgba(255, 170, 0, 0.5); }
.cp-bar-fill.fill-green  { background: linear-gradient(90deg, #00ff66, #5dd58f); box-shadow: 0 0 6px rgba(0, 255, 102, 0.5); }

/* R/U */
.ru-r, .ru-u {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.78rem;
}

.ru-sep {
    color: var(--ed-text-muted);
    margin: 0 4px;
}

/* Sparkline */
.sparkline {
    width: 90px;
    height: 24px;
    display: block;
}

/* Risk tag */
.risk-tag {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.risk-tag-red {
    background: rgba(255, 51, 51, 0.12);
    color: #ff6666;
    border: 1px solid rgba(255, 51, 51, 0.3);
}

.risk-tag-yellow {
    background: rgba(255, 170, 0, 0.1);
    color: #ffcc44;
    border: 1px solid rgba(255, 170, 0, 0.3);
}

.toggle-icon {
    font-size: 0.65rem;
    color: var(--ed-text-muted);
    user-select: none;
}

.vuln-row:hover .toggle-icon {
    color: var(--ed-orange);
}

.vuln-row.expanded .toggle-icon {
    color: var(--ed-orange);
}

/* Detail row */
.vuln-detail-row td {
    padding: 0;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 113, 0, 0.15);
}

.vuln-detail-content {
    padding: 16px 20px;
    border-left: 2px solid var(--ed-orange);
    background: linear-gradient(90deg, rgba(255, 113, 0, 0.05), transparent 60%);
}

.vuln-detail-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
}

.vuln-detail-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ed-text-muted);
    font-size: 0.85rem;
    padding: 8px 0;
}

.detail-section-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--ed-orange);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 113, 0, 0.2);
}

/* Support list */
.support-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.support-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: var(--ed-bg-surface);
    border: 1px solid var(--ed-border-subtle);
    font-size: 0.8rem;
    position: relative;
}

.support-row.support-primary {
    border-color: rgba(255, 113, 0, 0.4);
    background: rgba(255, 113, 0, 0.05);
}

.support-row .system-link {
    color: var(--ed-text);
    text-decoration: none;
}

.support-row .system-link:hover {
    color: var(--ed-orange);
}

.support-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--ed-text-secondary);
}

.support-primary-tag {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ed-orange);
    background: rgba(255, 113, 0, 0.15);
    padding: 2px 6px;
}

.support-bar {
    grid-column: 1 / -1;
    display: block;
    height: 3px;
    background: rgba(255, 255, 255, 0.05);
    margin-top: 4px;
    position: relative;
    overflow: hidden;
}

.support-bar-fill {
    display: block;
    height: 100%;
}

.support-bar-fill.fill-red    { background: #ff3333; }
.support-bar-fill.fill-yellow { background: #ffaa00; }
.support-bar-fill.fill-green  { background: #00ff66; }

/* KV grid */
.kv-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.kv {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 10px;
    background: var(--ed-bg-surface);
    border: 1px solid var(--ed-border-subtle);
    font-size: 0.8rem;
}

.kv-k {
    color: var(--ed-text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.kv-v {
    color: var(--ed-text);
    font-weight: 500;
}

/* Icons */
.ed-icon {
    display: inline-block;
    vertical-align: middle;
    filter: brightness(0) invert(0.7);
    opacity: 0.7;
}

.ed-icon + .ed-icon { margin-left: 4px; }

.vuln-row:hover .ed-icon {
    filter: brightness(0) invert(0.55) sepia(1) saturate(5) hue-rotate(10deg);
    opacity: 1;
}

/* Responsive */
@media (max-width: 1100px) {
    .vuln-table .col-trend,
    .vuln-table .col-info {
        display: none;
    }
}

@media (max-width: 900px) {
    .vuln-stats {
        grid-template-columns: 1fr;
    }
    .vuln-detail-grid {
        grid-template-columns: 1fr;
    }
    .vuln-table .col-updated {
        display: none;
    }
}
/* ================================================
   Dashboard v1.2 additions
   Append this to the end of wwwroot/app.css
   Uses existing --ed-* tokens already defined there.
   ================================================ */

/* ─── Cycle strip ────────────────────────────────────────── */

.cycle-strip {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 12px 28px 14px;
    border-bottom: 1px solid var(--ed-border);
    background: linear-gradient(90deg, rgba(255,113,0,0.08), rgba(255,113,0,0) 70%);
    margin-bottom: 14px;
}
.cycle-title-block { display: flex; flex-direction: column; gap: 3px; min-width: 240px; }
.cycle-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    text-shadow: none;
}
.cycle-tagline {
    margin: 0;
    font-size: 10px;
    color: var(--ed-text-muted);
    font-style: italic;
    letter-spacing: 0.02em;
}
.cycle-divider { color: var(--ed-border-subtle); }

.cycle-progress-block { flex: 1; max-width: 460px; }
.cycle-progress-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 4px;
}
.cycle-label {
    font-size: 10px; color: var(--ed-orange);
    letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700;
}
.cycle-reset {
    font-size: 9px; color: var(--ed-text-muted);
    font-family: 'Consolas', 'Monaco', monospace;
    letter-spacing: 0.06em;
}
.cycle-bar {
    height: 4px; position: relative;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--ed-border-subtle);
}
.cycle-bar-fill {
    height: 100%;
    background: var(--ed-orange);
    box-shadow: 0 0 8px var(--ed-orange-glow);
}
.cycle-bar-marker {
    position: absolute; top: -3px; bottom: -3px;
    width: 1px;
    background: var(--ed-text); opacity: 0.6;
}
.cycle-bar-labels {
    display: flex; justify-content: space-between;
    font-size: 9px; color: var(--ed-text-muted);
    font-family: 'Consolas', 'Monaco', monospace;
    margin-top: 3px;
}
.cycle-bar-labels .text-now { color: var(--ed-text); }

/* ─── Galaxy trends ──────────────────────────────────────── */

.trends { display: flex; flex-direction: column; }
.trends-label {
    font-size: 9px; color: var(--ed-text-muted);
    letter-spacing: 0.16em; text-transform: uppercase;
    margin-bottom: 4px;
}
.trends-body { display: flex; align-items: center; gap: 12px; }
.trends-svg { display: block; }
.trends-legend {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 3px 14px;
    line-height: 1.2;
}
.trends-legend-item {
    display: flex; align-items: center; gap: 5px;
    font-size: 9px;
}
.trends-legend-dim { opacity: 0.6; }
.trends-swatch { width: 10px; height: 1.5px; flex-shrink: 0; }
.trends-name { min-width: 56px; }
.trends-delta {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 8px;
}
.trends-delta-up   { color: var(--ed-green); }
.trends-delta-down { color: var(--ed-red); }

/* ─── Stats row (refined — no last-cycle delta) ──────────── */

.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 0 28px 14px;
}
.stat-box {
    position: relative;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(255,113,0,0.04), transparent);
    border: 1px solid var(--ed-border);
}
.stat-box::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--ed-orange), transparent);
    opacity: 0.45;
}
.stat-box-inner { display: flex; justify-content: space-between; align-items: flex-end; }
.stat-label {
    font-size: 9px; color: var(--ed-text-muted);
    letter-spacing: 0.18em; text-transform: uppercase;
    margin-bottom: 4px;
}
.stat-value {
    font-size: 26px; font-weight: 300; color: var(--ed-orange);
    line-height: 1;
    text-shadow: 0 0 14px var(--ed-orange-glow);
    font-family: 'Consolas', 'Monaco', monospace;
}

/* ─── Top Movers strip ───────────────────────────────────── */

.movers-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 0 28px 14px;
}
.movers-group {
    padding: 10px 14px;
    border: 1px solid var(--ed-border-subtle);
    background: rgba(22, 27, 34, 0.7);
    display: flex; align-items: center; gap: 16px;
}
.movers-group-title {
    font-size: 9px; color: var(--ed-text-muted);
    letter-spacing: 0.18em; text-transform: uppercase;
    min-width: 116px;
}
.movers-rows { display: flex; gap: 22px; flex: 1; }
.mover-row { display: flex; align-items: center; gap: 9px; flex: 1; }
.mover-power-names { line-height: 1.25; flex: 1; min-width: 0; }
.mover-shortname {
    font-weight: 600; font-size: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mover-sub {
    font-size: 10px; color: var(--ed-text-muted);
    font-family: 'Consolas', 'Monaco', monospace;
}
.mover-delta-big {
    font-size: 16px; font-weight: 600;
    font-family: 'Consolas', 'Monaco', monospace;
    text-align: right;
}
.mover-delta-up   { color: var(--ed-green); }
.mover-delta-down { color: var(--ed-red); }

/* ─── Priority Split ─────────────────────────────────────── */

.priority-split {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin: 0 28px 14px;
}
.ps-col {
    border: 1px solid var(--ed-border);
    background: rgba(22, 27, 34, 0.85);
    display: flex; flex-direction: column;
    border-top: 2px solid var(--ed-orange);
}
.ps-col-acquisition { border-top-color: var(--ed-cyan); }
.ps-col-defensive   { border-top-color: var(--ps-accent, var(--ed-text-muted)); }

.ps-col-header {
    padding: 7px 10px;
    border-bottom: 1px solid var(--ed-border);
    display: flex; align-items: center; gap: 8px;
    background: rgba(255, 113, 0, 0.06);
    min-height: 36px;
}
.ps-col-acquisition .ps-col-header { background: rgba(0, 255, 213, 0.06); }
.ps-col-defensive   .ps-col-header { background: color-mix(in srgb, var(--ps-accent, var(--ed-text-muted)) 10%, transparent); }

.ps-side {
    font-size: 8px; font-weight: 700; letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 1px 6px;
    color: var(--ed-orange);
    border: 1px solid rgba(255,113,0,0.4);
    background: rgba(255,113,0,0.15);
}
.ps-side-acquisition { color: var(--ed-cyan); border-color: rgba(0,255,213,0.4); background: rgba(0,255,213,0.15); }
.ps-side-defensive   { color: var(--ps-accent, var(--ed-text-muted)); border-color: color-mix(in srgb, var(--ps-accent, var(--ed-text-muted)) 40%, transparent); background: color-mix(in srgb, var(--ps-accent, var(--ed-text-muted)) 15%, transparent); }
.ps-side-muted       { color: var(--ed-text-muted); border-color: var(--ed-border-subtle); background: transparent; }
.ps-side-offensive   { /* default */ }

.ps-col-title { line-height: 1.2; min-width: 0; flex: 1; }
.ps-col-title > div:first-child {
    font-size: 11px; font-weight: 700; color: var(--ed-text);
    letter-spacing: 0.06em; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ps-col-hint {
    font-size: 9px; color: var(--ed-text-muted);
    font-style: italic;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ps-col-body { display: flex; flex-direction: column; }
.ps-empty-mini {
    padding: 20px 16px;
    text-align: center;
    font-size: 10px; color: var(--ed-text-muted);
}

.ps-row {
    display: grid;
    grid-template-columns: 1fr auto auto 12px;
    align-items: center; gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid rgba(255,113,0,0.06);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}
.ps-row:hover { background: rgba(255, 113, 0, 0.08); }
.ps-row:hover .ps-go { color: var(--ed-orange); opacity: 1; transform: translateX(2px); }
.ps-row-left { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ps-row-name {
    color: var(--ed-text); font-weight: 600; font-size: 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ps-row-meta {
    font-size: 9px; color: var(--ed-text-muted);
    font-family: 'Consolas', 'Monaco', monospace;
}
.ps-meta-warn { color: var(--ed-yellow); }
.ps-meta-bad  { color: var(--ed-red); }

.ps-row-mid { display: flex; align-items: center; gap: 4px; }
.ps-row-bar { display: flex; align-items: center; gap: 5px; }
.ps-bar {
    width: 50px; height: 4px;
    background: rgba(255,255,255,0.05);
    position: relative;
}
.ps-bar > div { position: absolute; inset: 0; }
.ps-row-pct {
    font-size: 9px; font-family: 'Consolas', 'Monaco', monospace;
    color: var(--ed-text-secondary);
    min-width: 26px; text-align: right;
}

.ps-go {
    display: inline-block;
    opacity: 0.25;
    transition: all 0.15s ease;
    color: var(--ed-text-muted);
    font-family: 'Consolas', 'Monaco', monospace;
    text-align: right;
}

.ps-kind {
    font-size: 8px; font-weight: 700; letter-spacing: 0.08em;
    padding: 1px 4px;
}
.ps-kind-vul {
    color: var(--ed-yellow);
    background: rgba(255,170,0,0.08);
    border: 1px solid rgba(255,170,0,0.4);
}

/* Locked CTA (no power tracked) */
.ps-locked {
    grid-column: span 2;
    border: 1px solid var(--ed-border);
    background: rgba(22, 27, 34, 0.85);
    border-top: 2px solid var(--ed-text-muted);
    padding: 28px 32px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px; text-align: center;
}
.ps-locked-badges { display: flex; gap: 8px; }
.ps-locked-icon {
    width: 40px; height: 40px;
    border: 1px solid var(--ed-border-subtle);
    display: flex; align-items: center; justify-content: center;
    color: var(--ed-text-muted); font-size: 20px;
}
.ps-locked-title {
    color: var(--ed-text); font-size: 13px; font-weight: 600;
    letter-spacing: 0.04em;
}
.ps-locked-body {
    color: var(--ed-text-muted); font-size: 11px;
    max-width: 440px; line-height: 1.5;
}

/* Picker button */
.ps-picker-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 3px 8px;
    font-size: 9px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    background: color-mix(in srgb, var(--ps-accent, var(--ed-orange)) 15%, transparent);
    color: var(--ps-accent, var(--ed-orange));
    border: 1px solid color-mix(in srgb, var(--ps-accent, var(--ed-orange)) 40%, transparent);
    cursor: pointer; font-family: inherit;
}
.ps-picker-btn-lg { padding: 8px 14px; font-size: 11px; }
.ps-picker-caret { opacity: 0.7; margin-left: 2px; }

/* Picker dropdown — absolute so it floats over content */
.priority-split { position: relative; }
.ps-picker-pop {
    position: absolute;
    top: 50px; right: 28px;
    min-width: 220px; max-height: 320px; overflow: auto;
    background: var(--ed-bg-elevated);
    border: 1px solid var(--ed-border);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    z-index: 20;
}
.ps-picker-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 6px 12px;
    background: transparent; border: none; cursor: pointer;
    text-align: left; font-family: inherit;
    color: var(--ed-text);
}
.ps-picker-item:hover { background: var(--ed-bg-hover); }
.ps-picker-clear {
    color: var(--ed-text-muted);
    border-bottom: 1px solid var(--ed-border-subtle) !important;
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
}

/* ─── State composition bar in Powers Overview ───────────── */

.composition-legend {
    display: flex; gap: 12px;
    font-size: 9px; color: var(--ed-text-muted);
    letter-spacing: 0.1em; text-transform: uppercase;
}
.composition-legend span { display: inline-flex; align-items: center; gap: 4px; }
.swatch { width: 9px; height: 9px; display: inline-block; }
.swatch-stronghold { background: #b264ff; }
.swatch-fortified  { background: #5ab8ff; }
.swatch-exploited  { background: var(--ed-orange); }

.state-mix-bar {
    display: flex; height: 8px; width: 160px;
    background: rgba(255,255,255,0.04);
}
.state-mix-counts {
    display: flex; gap: 8px; margin-top: 3px;
    font-size: 9px; color: var(--ed-text-muted);
    font-family: 'Consolas', 'Monaco', monospace;
}

.row-mine { background: color-mix(in srgb, currentColor 6%, transparent); }

/* ─── 24h pulse mini-chart in Live Activity ──────────────── */

.pulse-block {
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--ed-border-subtle);
}
.pulse-head {
    display: flex; justify-content: space-between;
    margin-bottom: 5px;
}
.pulse-label {
    font-size: 9px; color: var(--ed-text-muted);
    letter-spacing: 0.14em; text-transform: uppercase;
}
.pulse-peak {
    font-size: 9px; color: var(--ed-orange);
    font-family: 'Consolas', 'Monaco', monospace;
}
.pulse-bars {
    display: flex; align-items: flex-end; gap: 2px;
    height: 36px;
}
.pulse-bar {
    flex: 1; min-height: 2px;
    background: rgba(255, 113, 0, 0.35);
}
.pulse-bar-recent {
    background: var(--ed-orange);
    box-shadow: 0 0 4px var(--ed-orange-glow);
}
.pulse-axis {
    display: flex; justify-content: space-between;
    font-size: 8px; color: var(--ed-text-muted);
    margin-top: 3px;
    font-family: 'Consolas', 'Monaco', monospace;
}

/* ─── Feed row enhancements ──────────────────────────────── */

.activity-mine {
    background: color-mix(in srgb, var(--row-accent, var(--ed-orange)) 10%, var(--ed-bg-elevated));
    border-left: 3px solid var(--row-accent, var(--ed-orange));
}
.chip {
    padding: 3px 9px; font-size: 9px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    background: transparent;
    color: var(--ed-text-muted);
    border: 1px solid var(--ed-border-subtle);
    cursor: pointer; font-family: inherit;
}
.chip-active {
    background: rgba(255,113,0,0.18);
    color: var(--ed-orange);
    border-color: var(--ed-orange);
}

/* ─── Dashboard grid (existing — keep as is) ─────────────── */
/* .dashboard-grid is already styled in your Home.razor's <style> block.
   Reuse that.  If you moved it here: */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 14px;
    margin: 0 28px 20px;
    align-items: start;
}
@media (max-width: 1024px) {
    .stats-row,
    .priority-split,
    .movers-strip { grid-template-columns: 1fr; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .cycle-strip { flex-direction: column; align-items: stretch; }
}

/* State composition bar segment colors — match .swatch-* classes above */
.state-mix-stronghold { background: #b264ff; }
.state-mix-fortified  { background: #5ab8ff; }
.state-mix-exploited  { background: var(--ed-orange); }

/* Defensive: never let priority-target bars blast past their container */
.ps-bar { overflow: hidden; }

/* Dashboard credits footer (was in old Home.razor's <style> block) */
.credits {
    margin-top: 48px;
    padding: 24px 16px;
    border-top: 1px solid rgba(240, 123, 5, 0.18);
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
}
.credits p { margin: 0 0 6px 0; }
.credits p:last-child { margin-bottom: 0; }
.credits a {
    color: var(--ed-orange);
    text-decoration: none;
    border-bottom: 1px dotted rgba(240, 123, 5, 0.4);
    transition: border-color 0.15s ease;
}
.credits a:hover { border-bottom-color: var(--ed-orange); }
.credits-muted {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 8px !important;
}

/* Dashboard SEO / explainer section — gives Google and first-time visitors
   actual prose about what Powerplay 2.0 is and what the tool does. */
.page-explainer {
    margin-top: 56px;
    padding: 28px 24px 8px;
    border-top: 1px solid rgba(240, 123, 5, 0.18);
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.65;
    font-size: 0.92rem;
}
.page-explainer > p,
.page-explainer > h2,
.page-explainer > h3 { max-width: 100%; }
.explainer-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px 18px;
}
.page-explainer h2 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ed-orange);
    margin: 0 0 14px 0;
}
.page-explainer h3 {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    margin: 26px 0 10px 0;
}
.page-explainer p { margin: 0 0 12px 0; }
.page-explainer a {
    color: var(--ed-orange);
    text-decoration: none;
    border-bottom: 1px dotted rgba(240, 123, 5, 0.4);
    transition: border-color 0.15s ease;
}
.page-explainer a:hover { border-bottom-color: var(--ed-orange); }
.page-explainer code {
    font-size: 0.85em;
    padding: 1px 5px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.85);
}
.explainer-list li {
    padding: 8px 0 8px 16px;
    border-left: 2px solid rgba(240, 123, 5, 0.25);
    margin-bottom: 8px;
}
.explainer-list li strong { color: rgba(255, 255, 255, 0.95); }

/* Winning/Losing chip in Acquisition rows */
.ps-kind-win {
    color: var(--ed-green);
    background: rgba(0, 255, 102, 0.08);
    border: 1px solid rgba(0, 255, 102, 0.4);
}
.ps-kind-lose {
    color: var(--ed-red);
    background: rgba(255, 51, 51, 0.08);
    border: 1px solid rgba(255, 51, 51, 0.4);
}

/* Δ Cycle column: dual ▲ acquired / ▼ lost readout */
.cycle-delta-cell {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    align-items: baseline;
}
.cycle-delta-up   { color: var(--ed-green); }
.cycle-delta-down { color: var(--ed-red); }
.cycle-delta-dim  { opacity: 0.3; }

/* Power row pulse on SignalR update (uses pre-existing row-highlight keyframes) */
.ed-data-table tbody tr.row-updated {
    animation: row-highlight 2s ease-out;
}

/* CP readout in priority rows — keeps number and "CP" on the same baseline. */
.ps-row-gap {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px;
    min-width: 110px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11px;
    color: var(--ed-text-muted);
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.ps-row-gap .mono {
    color: var(--ed-text);
    font-weight: 600;
}

/* Empty-state placeholder inside Top Gainers/Losers strip */
.mover-empty {
    color: var(--ed-text-muted);
    font-size: 11px;
    font-style: italic;
    padding: 4px 0;
}

/* Dashboard-only: edge-to-edge layout. Scoped via :has() so other pages
   (Systems / Powers / Cascade / etc.) keep the standard centered article.
   !important needed to beat MainLayout.razor.css's `article { padding: ... !important }`. */
.ed-content:has(.cycle-strip) {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Dashboard sections get a light horizontal inset so their content is not
   flush against the viewport edge. Cycle-strip uses padding (so its tinted
   background still spans edge-to-edge), grids use margin (no background). */
.ed-content:has(.cycle-strip) .stats-row,
.ed-content:has(.cycle-strip) .movers-strip,
.ed-content:has(.cycle-strip) .priority-split,
.ed-content:has(.cycle-strip) .dashboard-grid {
    margin-left: 1rem;
    margin-right: 1rem;
}
.ed-content:has(.cycle-strip) .cycle-strip {
    padding-left: 1rem;
    padding-right: 1rem;
}
/* Force the Powers Overview / Live Activity columns to be exactly 50/50.
   Use calc() with an explicit gap subtraction so neither column can win on
   intrinsic min-content. Both panels are also forced to min-width:0 so grid
   items don't get the default min-width:auto that lets them push outward. */
.ed-content:has(.cycle-strip) .dashboard-grid {
    grid-template-columns: calc(50% - 7px) calc(50% - 7px) !important;
}
.ed-content:has(.cycle-strip) .dashboard-grid > .panel {
    min-width: 0;
    overflow: hidden;
}
/* Let the system-name link ellipsis-truncate instead of pushing the row wider. */
.ed-content:has(.cycle-strip) .activity-item { min-width: 0; }
.ed-content:has(.cycle-strip) .activity-system { min-width: 0; }

/* ─── Live activity feed row styling (rescued from previous Home.razor's <style> block) ─── */

.activity-feed {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    padding: 9px;
    flex: 1;
    min-height: 0;
}
.activity-item {
    display: grid;
    grid-template-columns: 60px 40px 1fr auto auto auto;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--ed-bg-elevated);
    font-size: 0.8rem;
    border-left: 2px solid transparent;
    transition: border-left-color 0.2s ease;
}
.activity-item:hover { border-left-color: var(--ed-orange); }

.activity-time {
    color: var(--ed-text-muted);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.75rem;
}
.activity-type {
    padding: 2px 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.04em;
}
.type-new {
    background: rgba(0, 255, 102, 0.18);
    color: var(--ed-green);
}
.type-update {
    background: rgba(255, 113, 0, 0.18);
    color: var(--ed-orange);
}
.activity-system {
    color: var(--ed-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}
.activity-system:hover { color: var(--ed-orange); }

.activity-power {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ed-orange);
    font-size: 0.75rem;
    min-width: 90px;
    justify-content: flex-end;
}
.activity-cp {
    color: var(--ed-text-secondary);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.75rem;
    text-align: right;
    min-width: 84px;
}


/* ════════════════════════════════════════════════════════════════════════
   systems-additions.css
   Append to the end of wwwroot/app.css.
   All selectors are namespaced with .sys- to avoid colliding with existing styles.
   Uses the existing --ed-* color tokens from app.css.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Page shell ── */
/* Systems page owns its own padding/scroll. Pin the whole layout chain to the
   viewport so internal panes can scroll independently and no outer scrollbar appears.
   Each link in the chain uses flex + min-height:0 so the clamp is deterministic
   (percentage heights through flex items are unreliable). */
.ed-app:has(.sys-page) {
    height: 100vh;
    overflow: hidden;
}
.ed-app:has(.sys-page) .ed-main {
    min-height: 0;
}
.ed-content:has(.sys-page) {
    padding: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.sys-page {
    display: flex;
    flex: 1;
    min-height: 0;
    margin: 0;
    background: var(--ed-bg-body, #0d1117);
    color: var(--ed-text, #e6edf3);
    font-family: 'Eurostile', 'Segoe UI', Arial, sans-serif;
}

/* ── Rail ── */
.sys-rail {
    width: 304px;
    flex-shrink: 0;
    border-right: 1px solid rgba(255, 113, 0, 0.25);
    background: rgba(13, 17, 23, 0.78);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sys-rail-head {
    padding: 12px 16px 10px;
    border-bottom: 1px solid #2d333b;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sys-rail-head-title {
    font-size: 10px; color: var(--ed-orange, #ff7100);
    letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700;
}
.sys-rail-clearmini {
    background: transparent; border: none; cursor: pointer;
    color: var(--ed-text-muted, #95a0ab);
    font-family: inherit;
    font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
}
.sys-rail-clearmini:hover { color: var(--ed-orange); }

.sys-rail-search { padding: 12px 16px; border-bottom: 1px solid #2d333b; }
.sys-search-hint {
    display: flex; justify-content: space-between; margin-top: 6px;
    font-size: 9px; color: var(--ed-text-muted); letter-spacing: 0.06em;
}
.sys-search-hint kbd {
    display: inline-block; padding: 0 4px;
    font-family: 'Consolas', monospace; font-size: 9px;
    border: 1px solid #2d333b; background: rgba(0,0,0,0.3); color: var(--ed-text-muted);
}

.sys-rail-stack { flex: 1; min-height: 0; overflow-y: auto; }

.sys-rail-foot {
    padding: 10px 14px; border-top: 1px solid rgba(255,113,0,0.25);
    display: flex; gap: 6px; background: rgba(0,0,0,0.35);
}
.sys-rail-foot-btn {
    flex: 1; padding: 7px 9px;
    background: transparent; border: 1px solid #2d333b;
    color: var(--ed-text-muted); font-family: inherit;
    font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    cursor: pointer; transition: all 0.14s;
}
.sys-rail-foot-btn:hover { transform: translateY(-1px); color: var(--ed-orange); border-color: var(--ed-orange); }
.sys-rail-foot-btn.primary {
    flex: 1.2; background: rgba(255,113,0,0.16); border-color: var(--ed-orange); color: var(--ed-orange);
    font-weight: 700; box-shadow: 0 0 8px rgba(255,113,0,0.4);
}

/* ── RailSection accordion ── */
.sys-rail-section { border-bottom: 1px solid #2d333b; }
.sys-rail-section-head {
    width: 100%; background: transparent; border: none;
    padding: 10px 16px 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    color: var(--ed-orange); font-family: inherit;
    font-size: 10px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase;
}
.sys-rail-section-head-l { display: inline-flex; align-items: center; gap: 8px; }
.sys-rail-section-diamond {
    width: 6px; height: 6px; transform: rotate(45deg);
    border: 1px solid var(--ed-orange); background: transparent;
    transition: all 0.14s;
}
.sys-rail-section-diamond.lit {
    background: var(--ed-orange); box-shadow: 0 0 6px rgba(255,113,0,0.4);
}
.sys-rail-section-count {
    padding: 0 5px; font-size: 9px; font-family: 'Consolas', monospace; font-weight: 700;
    background: rgba(255,113,0,0.20); color: var(--ed-orange);
    border: 1px solid rgba(255,113,0,0.3);
}
.sys-rail-section-caret { font-size: 9px; color: var(--ed-text-muted); transform: rotate(-90deg); transition: transform 0.18s; }
.sys-rail-section-caret.open { transform: rotate(0deg); }
.sys-rail-section-body { max-height: 0; overflow: hidden; transition: max-height 0.22s ease; }
.sys-rail-section-body.open { max-height: 600px; }
.sys-rail-section-body-inner { padding: 0 14px 12px; }

/* ── Preset rows ── */
.sys-preset-list { display: flex; flex-direction: column; gap: 3px; }
.sys-preset {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px;
    background: rgba(0,0,0,0.2);
    border: 1px solid transparent; border-left: 3px solid transparent;
    color: var(--ed-text-secondary, #b0b8c1);
    font-family: inherit; font-size: 11px; text-align: left;
    transition: background 0.16s, border-color 0.16s;
}
.sys-preset:hover { background: rgba(255,113,0,0.10); border-color: rgba(255,113,0,0.4); }
.sys-preset.active {
    background: rgba(255,113,0,0.14); border-color: var(--ed-orange); border-left-color: var(--ed-orange);
    color: var(--ed-orange); box-shadow: 0 0 10px rgba(255,113,0,0.4);
}
.sys-preset-icon { width: 14px; font-size: 10px; color: var(--ed-text-muted); text-align: center; }
.sys-preset.active .sys-preset-icon { color: var(--ed-orange); }
.sys-preset-text { flex: 1; min-width: 0; line-height: 1.2; }
.sys-preset-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sys-preset-hint { font-size: 9px; color: var(--ed-text-muted); font-style: italic; margin-top: 1px; }
.sys-preset-star { font-size: 10px; color: rgba(255,113,0,0.6); }
.sys-preset.active .sys-preset-star { color: var(--ed-orange); }
.sys-preset-save {
    padding: 6px 9px; margin-top: 3px;
    background: transparent; border: 1px dashed rgba(255,113,0,0.3);
    color: var(--ed-text-muted); cursor: pointer; font-family: inherit;
    font-size: 10px; text-align: left; letter-spacing: 0.04em;
    display: inline-flex; align-items: center; gap: 6px; transition: all 0.16s;
}
.sys-preset-save:hover { border-color: var(--ed-orange); color: var(--ed-orange); }

/* Main click target inside .sys-preset (the row is a div, click region is a button) */
.sys-preset-main {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 8px;
    background: transparent; border: none; padding: 0;
    color: inherit; cursor: pointer; font-family: inherit; font-size: inherit;
    text-align: left;
}

/* Row-level actions: rename / delete */
.sys-preset-actions {
    display: flex; gap: 3px;
    opacity: 0; transition: opacity 0.14s;
}
.sys-preset:hover .sys-preset-actions { opacity: 1; }
.sys-preset-action {
    width: 20px; height: 20px;
    background: rgba(0,0,0,0.3); border: 1px solid #2d333b;
    color: var(--ed-text-secondary); cursor: pointer;
    font-family: inherit; font-size: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; transition: all 0.12s;
}
.sys-preset-action:hover { color: var(--ed-orange); border-color: var(--ed-orange); }
.sys-preset-action.danger:hover { color: #ff5544; border-color: #ff5544; }

/* Inline edit row for new preset / rename */
.sys-preset-edit {
    display: flex; align-items: center; gap: 4px;
    padding: 4px 6px;
    background: rgba(255,113,0,0.06);
    border: 1px solid rgba(255,113,0,0.4); border-left: 3px solid var(--ed-orange);
}
.sys-preset-edit-input {
    flex: 1; min-width: 0; height: 24px;
    background: rgba(0,0,0,0.35); border: 1px solid #2d333b;
    color: var(--ed-text); padding: 0 8px;
    font-family: inherit; font-size: 11px; outline: none;
}
.sys-preset-edit-input:focus { border-color: var(--ed-orange); }
.sys-preset-edit-btn {
    width: 24px; height: 24px;
    background: rgba(0,0,0,0.3); border: 1px solid #2d333b;
    color: var(--ed-text-secondary); cursor: pointer;
    font-family: inherit; font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; transition: all 0.12s;
}
.sys-preset-edit-btn.ok { background: rgba(255,113,0,0.18); border-color: var(--ed-orange); color: var(--ed-orange); }
.sys-preset-edit-btn.ok:hover { box-shadow: 0 0 8px rgba(255,113,0,0.4); }
.sys-preset-edit-btn.cancel:hover { color: #ff5544; border-color: #ff5544; }

/* ── Power group chips + grid ── */
.sys-group-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 6px; }
.sys-group-chip {
    padding: 3px 7px; font-size: 9px; font-weight: 600; letter-spacing: 0.04em;
    background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.06);
    color: var(--ed-text-muted); cursor: pointer; font-family: inherit;
    transition: all 0.14s;
}
.sys-group-chip:hover { transform: translateY(-1px); color: var(--c); border-color: var(--c); }
.sys-group-chip.active {
    background: color-mix(in srgb, var(--c) 13%, transparent);
    border-color: var(--c); color: var(--c); box-shadow: 0 0 6px color-mix(in srgb, var(--c) 33%, transparent);
}

.sys-power-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.sys-power-grid-dashed .sys-power-cell:not(.active) { border-style: dashed; }
.sys-power-cell {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 7px;
    background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.05);
    color: var(--ed-text-secondary); cursor: pointer; font-family: inherit;
    font-size: 10.5px; font-weight: 500; text-align: left;
    transition: all 0.14s;
}
.sys-power-cell:hover { transform: translateY(-1px); }
.sys-power-cell.active {
    background: color-mix(in srgb, var(--c) 10%, transparent);
    border-color: var(--c); color: var(--c);
    box-shadow: 0 0 6px color-mix(in srgb, var(--c) 25%, transparent);
}
.sys-power-cell-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── State + segment chips ── */
.sys-state-chips, .sys-segment-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.sys-segment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.sys-segment-grid-mono { display: flex; flex-wrap: wrap; gap: 3px; }
.sys-segment-cell {
    padding: 4px 9px; font-size: 10px; font-weight: 600;
    background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.06);
    color: var(--ed-text-secondary); cursor: pointer; font-family: inherit;
    transition: all 0.14s;
}
.sys-segment-cell:hover { transform: translateY(-1px); }
.sys-segment-cell.active {
    background: color-mix(in srgb, var(--c, var(--ed-orange)) 13%, transparent);
    border-color: var(--c, var(--ed-orange));
    color: var(--c, var(--ed-orange));
    box-shadow: 0 0 6px color-mix(in srgb, var(--c, var(--ed-orange)) 33%, transparent);
}
.sys-segment-grid-mono .sys-segment-cell { font-family: 'Consolas', monospace; }

.sys-state-chip {
    padding: 4px 9px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
    background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.06);
    color: var(--ed-text-secondary); cursor: pointer; font-family: inherit;
    transition: all 0.14s;
}
.sys-state-chip:hover { transform: translateY(-1px); }
.state-stronghold-chip { --c: #b264ff; }
.state-fortified-chip { --c: #5ab8ff; }
.state-exploited-chip { --c: #ff7100; }
.state-contested-chip { --c: #ff5544; }
.state-unoccupied-chip { --c: #a0a8b0; }
.sys-state-chip.active {
    background: color-mix(in srgb, var(--c) 13%, transparent);
    border-color: var(--c); color: var(--c);
    box-shadow: 0 0 6px color-mix(in srgb, var(--c) 33%, transparent);
}

/* ── Range fields ── */
.sys-range-row { display: flex; gap: 6px; }
.sys-range-field { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.sys-range-field label {
    font-size: 8.5px; color: var(--ed-text-muted);
    letter-spacing: 0.16em; text-transform: uppercase;
}
.sys-range-field input {
    height: 26px; background: rgba(0,0,0,0.35);
    border: 1px solid #2d333b; color: var(--ed-text);
    padding: 0 8px; font-size: 11px; font-family: 'Consolas', monospace; outline: none;
    border-radius: 0;
}
.sys-range-field input:focus { border-color: var(--ed-orange); box-shadow: 0 0 8px rgba(255,113,0,0.15); }

.sys-eyebrow {
    font-size: 8.5px; color: var(--ed-text-muted);
    letter-spacing: 0.20em; text-transform: uppercase; font-weight: 600;
    margin-bottom: 4px;
}

/* ── Faction / search input ── */
.sys-search {
    position: relative;
    display: flex; align-items: center; height: 34px;
    background: rgba(0,0,0,0.35); border: 1px solid #2d333b;
    transition: all 0.14s;
}
.sys-search-small { height: 28px; }
.sys-search:focus-within { border-color: var(--ed-orange); box-shadow: 0 0 0 1px var(--ed-orange), 0 0 12px rgba(255,113,0,0.4); }
.sys-search-icon {
    width: 34px; display: flex; align-items: center; justify-content: center;
    color: var(--ed-text-muted); border-right: 1px solid #2d333b;
}
.sys-search-small .sys-search-icon { width: 28px; }
.sys-search input {
    flex: 1; background: transparent; border: none; outline: none;
    padding: 0 10px; color: var(--ed-text); font-size: 12.5px; font-family: inherit;
}
.sys-search-small input { font-size: 11px; }
.sys-search-clear {
    width: 30px; background: transparent; border: none; cursor: pointer;
    color: var(--ed-text-muted); font-size: 13px;
}
.sys-suggest {
    position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 1000;
    background: var(--ed-bg-surface, #161b22);
    border: 1px solid rgba(255,113,0,0.25);
    max-height: 240px; overflow-y: auto;
    box-shadow: 0 6px 16px rgba(0,0,0,0.45);
}
.sys-suggest-item {
    padding: 7px 10px; cursor: pointer;
    border-bottom: 1px solid rgba(255,113,0,0.05);
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 11px;
}
.sys-suggest-item:hover, .sys-suggest-item.selected { background: rgba(255,113,0,0.10); color: var(--ed-orange); }

/* ── Features ── */
.sys-feature-list { display: flex; flex-direction: column; gap: 4px; }
.sys-feature {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 8px;
    background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.05);
    color: var(--ed-text-secondary); cursor: pointer; font-family: inherit;
    font-size: 11px; text-align: left; transition: all 0.14s;
}
.sys-feature:hover { background: rgba(255,113,0,0.08); }
.sys-feature.active { background: rgba(255,113,0,0.10); border-color: rgba(255,113,0,0.5); color: var(--ed-orange); }
.sys-feature-check {
    width: 13px; height: 13px; flex-shrink: 0;
    border: 1px solid #2d333b; background: transparent;
    display: inline-flex; align-items: center; justify-content: center;
    color: #000; font-size: 9px; font-weight: 800;
}
.sys-feature.active .sys-feature-check { background: var(--ed-orange); border-color: var(--ed-orange); }
.sys-feature-label { font-weight: 600; }
.sys-feature-sub { font-size: 9px; color: var(--ed-text-muted); font-style: italic; }


/* ════════════════════════════════════════════════════════════════════════
   ── MAIN PANE ──
   ════════════════════════════════════════════════════════════════════════ */
.sys-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

/* Identity strip */
.sys-identity-strip {
    padding: 18px 28px 16px;
    background: linear-gradient(90deg, rgba(255,113,0,0.10), rgba(255,113,0,0) 60%);
    border-bottom: 1px solid rgba(255,113,0,0.25);
    position: relative;
    display: flex; align-items: center; gap: 28px;
}
.sys-identity-strip::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.012) 3px, rgba(255,255,255,0.012) 4px);
}
.sys-title-block { position: relative; padding-left: 14px; z-index: 1; }
.sys-title-block::before {
    content: ''; position: absolute; left: 0; top: 2px; width: 5px; height: 14px;
    border-left: 2px solid var(--ed-orange); border-top: 2px solid var(--ed-orange);
}
.sys-title-block::after {
    content: ''; position: absolute; left: 0; bottom: 2px; width: 5px; height: 14px;
    border-left: 2px solid var(--ed-orange); border-bottom: 2px solid var(--ed-orange);
}
.sys-title {
    margin: 0; font-size: 24px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; line-height: 1;
}
.sys-title-orange { color: var(--ed-orange); text-shadow: 0 0 16px rgba(255,113,0,0.4); }
.sys-title-white { color: var(--ed-text); margin-left: 10px; }
.sys-tagline {
    display: block; margin-top: 5px;
    font-size: 10.5px; color: var(--ed-text-muted);
    letter-spacing: 0.04em; font-style: italic;
}

.sys-hero-metric {
    position: relative; padding: 4px 18px 4px 22px;
    margin-left: auto; z-index: 1;
    display: flex; align-items: baseline; gap: 12px;
}
.sys-hero-metric::before, .sys-hero-metric::after,
.sys-hero-metric > .sys-hero-corner-tl, .sys-hero-metric > .sys-hero-corner-br {
    content: ''; position: absolute; width: 10px; height: 10px; border-style: solid; border-color: var(--ed-orange); border-width: 0;
}
.sys-hero-metric::before { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.sys-hero-metric::after  { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.sys-hero-metric > .sys-hero-corner-tl { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.sys-hero-metric > .sys-hero-corner-br { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.sys-hero-number {
    font-size: 38px; font-family: 'Consolas', 'Monaco', monospace;
    font-weight: 300; color: var(--ed-orange); line-height: 0.9;
    text-shadow: 0 0 18px rgba(255,113,0,0.4); letter-spacing: -0.01em;
}
.sys-hero-labels { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.sys-hero-label { font-size: 9px; color: var(--ed-text-muted); letter-spacing: 0.20em; text-transform: uppercase; font-weight: 600; }
.sys-hero-sub { font-size: 10px; color: var(--ed-text-secondary); font-family: 'Consolas', monospace; }
.sys-hero-sub strong { color: var(--ed-text); }

/* Stats strip */
.sys-stats-strip {
    padding: 11px 28px; border-bottom: 1px solid #2d333b;
    background: rgba(13,17,23,0.55);
    display: flex; align-items: center; gap: 22px;
}
.sys-divider { color: #2d333b; }
.sys-state-mix { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; max-width: 520px; }
.sys-state-mix-head { display: flex; align-items: baseline; justify-content: space-between; }
.sys-state-bar { display: flex; height: 6px; background: rgba(255,255,255,0.04); border: 1px solid #2d333b; }
.sys-state-bar-seg { box-shadow: inset 0 0 4px currentColor; }
.sys-state-bar-seg.state-stronghold { background: #b264ff; color: #b264ff; }
.sys-state-bar-seg.state-fortified  { background: #5ab8ff; color: #5ab8ff; }
.sys-state-bar-seg.state-exploited  { background: #ff7100; color: #ff7100; }
.sys-state-bar-seg.state-contested  { background: #ff5544; color: #ff5544; }
.sys-state-bar-seg.state-unoccupied { background: #a0a8b0; color: #a0a8b0; }
.sys-state-legend { display: flex; gap: 10px; font-size: 9.5px; font-family: 'Consolas', monospace; flex-wrap: wrap; }
.sys-state-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.sys-state-dot { width: 6px; height: 6px; }
.sys-state-dot.state-stronghold { background: #b264ff; box-shadow: 0 0 4px #b264ff; }
.sys-state-dot.state-fortified  { background: #5ab8ff; box-shadow: 0 0 4px #5ab8ff; }
.sys-state-dot.state-exploited  { background: #ff7100; box-shadow: 0 0 4px #ff7100; }
.sys-state-dot.state-contested  { background: #ff5544; box-shadow: 0 0 4px #ff5544; }
.sys-state-dot.state-unoccupied { background: #a0a8b0; box-shadow: 0 0 4px #a0a8b0; }
.sys-state-count { font-weight: 600; }
.sys-state-count.state-stronghold { color: #b264ff; }
.sys-state-count.state-fortified  { color: #5ab8ff; }
.sys-state-count.state-exploited  { color: #ff7100; }
.sys-state-count.state-contested  { color: #ff5544; }
.sys-state-count.state-unoccupied { color: #a0a8b0; }
.sys-mono-muted { font-family: 'Consolas', monospace; color: var(--ed-text-muted); font-size: 9.5px; }
.sys-mono { font-family: 'Consolas', monospace; font-size: 11px; }

/* KPIs */
.sys-kpi { display: flex; flex-direction: column; gap: 2px; padding: 0 14px; border-left: 1px solid #2d333b; min-width: 110px; }
.sys-kpi-value {
    font-size: 18px; font-family: 'Consolas', 'Monaco', monospace; font-weight: 600;
    color: var(--ed-text); line-height: 1;
}
.sys-kpi-value.kpi-pos { color: #00ff66; text-shadow: 0 0 8px rgba(0,255,102,0.4); }
.sys-kpi-value.kpi-neg { color: #ff3333; text-shadow: 0 0 8px rgba(255,51,51,0.4); }
.sys-kpi-with-icon { display: flex; align-items: center; gap: 6px; }
.sys-kpi-sub { font-size: 9px; color: var(--ed-text-muted); font-family: 'Consolas', monospace; font-style: italic; letter-spacing: 0.04em; }

/* Active filter strip */
.sys-active-strip {
    padding: 8px 28px; background: rgba(255,113,0,0.05);
    border-bottom: 1px solid #2d333b;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.sys-active-label {
    font-size: 9px; color: var(--ed-orange); letter-spacing: 0.22em;
    text-transform: uppercase; font-weight: 700;
    display: inline-flex; align-items: center; gap: 6px;
}
.sys-active-pulse {
    width: 5px; height: 5px; background: var(--ed-orange);
    box-shadow: 0 0 6px rgba(255,113,0,0.4); animation: sys-pulse 2s infinite;
}
@keyframes sys-pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }
.sys-active-count { padding: 0 5px; font-size: 9px; font-family: 'Consolas', monospace; font-weight: 700; background: var(--ed-orange); color: #000; }
.sys-active-pills { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.sys-pill {
    padding: 2px 7px; font-size: 9.5px; font-weight: 600;
    background: color-mix(in srgb, var(--c, var(--ed-orange)) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--c, var(--ed-orange)) 40%, transparent);
    color: var(--c, var(--ed-orange));
    font-family: inherit; cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
}
.sys-pill-x { opacity: 0.7; font-size: 11px; line-height: 0.8; }
.sys-clear-all {
    background: transparent; border: 1px solid rgba(255,113,0,0.35);
    color: var(--ed-orange); font-family: inherit;
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    padding: 4px 10px; cursor: pointer; transition: all 0.14s;
}
.sys-clear-all:hover { background: rgba(255,113,0,0.14); box-shadow: 0 0 8px rgba(255,113,0,0.4); }

/* ── Table ── */
.sys-table-wrap { flex: 1; min-height: 0; overflow-y: auto; position: relative; background: var(--ed-bg-body, #0d1117); }
.sys-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.sys-table thead { position: sticky; top: 0; z-index: 2; }
.sys-table thead tr.sys-group-row th {
    padding: 6px 14px 4px; text-align: left;
    font-size: 8px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
    color: rgba(255,113,0,0.55); background: rgba(13,17,23,0.98);
    border-right: 1px solid rgba(255,113,0,0.06); white-space: nowrap;
}
.sys-table thead tr.sys-group-row th:last-child { border-right: none; }
.sys-table thead tr.sys-head-row th {
    padding: 4px 14px 10px;
    font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ed-text-muted); background: rgba(13,17,23,0.98);
    border-bottom: 1px solid rgba(255,113,0,0.25);
    border-right: 1px solid rgba(255,113,0,0.06);
    white-space: nowrap; user-select: none;
    transition: color 0.12s, background 0.12s;
}
.sys-table thead tr.sys-head-row th:last-child { border-right: none; }
.sys-table thead tr.sys-head-row th.sortable { cursor: pointer; }
.sys-table thead tr.sys-head-row th.sortable:hover { color: var(--ed-text); background: rgba(255,113,0,0.06); }
.sys-table thead tr.sys-head-row th.sorted { color: var(--ed-orange); border-bottom: 2px solid var(--ed-orange); }
.sort-arrow { margin-left: 5px; opacity: 0.3; font-size: 8px; }
.sort-arrow.active { opacity: 1; color: var(--ed-orange); }
.sys-table thead tr.sys-head-row th.sortable:hover .sort-arrow { opacity: 0.85; color: var(--ed-orange); }

.sys-row {
    border-bottom: 1px solid rgba(255,113,0,0.05);
    border-left: 3px solid transparent;
    cursor: pointer; transition: background 0.14s, border-left-color 0.14s;
}
.sys-row:nth-child(even) { background: rgba(255,255,255,0.012); }
.sys-row:hover { background: rgba(255,113,0,0.07) !important; border-left-color: var(--ed-orange); }
.sys-row td { padding: 11px 14px; border-right: 1px solid rgba(255,113,0,0.05); }
.sys-row td:last-child { border-right: none; }

.sys-cell-identity { display: flex; align-items: flex-start; gap: 10px; }
.sys-cell-identity-text { flex: 1; min-width: 0; }
.sys-name-row { display: flex; align-items: center; gap: 7px; }
.sys-name { color: var(--ed-text); font-weight: 700; font-size: 13px; letter-spacing: 0.01em; transition: color 0.14s; }
.sys-row:hover .sys-name { color: var(--ed-orange); }
.sys-faction {
    font-size: 10px; color: var(--ed-text-muted); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic;
}
.sys-distance {
    font-size: 9px; color: var(--ed-text-muted); font-family: 'Consolas', monospace;
    background: rgba(0,0,0,0.3); padding: 1px 6px;
    border: 1px solid rgba(255,255,255,0.05); flex-shrink: 0;
}

.sys-cell-powers { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sys-ctrl-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 6px 2px 4px;
    background: color-mix(in srgb, var(--c) 13%, transparent);
    border: 1px solid var(--c); color: var(--c);
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
    flex-shrink: 0;
}
.sys-unclaimed {
    padding: 2px 6px; font-size: 9px; letter-spacing: 0.12em;
    color: var(--ed-text-muted); border: 1px dashed #2d333b;
}
.sys-pip { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

.sys-cell-cstate { display: flex; align-items: center; gap: 10px; }
.sys-cell-cstate-bar { flex: 1; min-width: 0; }
.sys-cell-cstate-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sys-progress { margin-top: 4px; height: 4px; background: rgba(255,255,255,0.05); position: relative; }
.sys-progress-fill { height: 100%; transition: width 0.3s; }
.sys-progress-fill.state-stronghold-bg { background: #b264ff; box-shadow: 0 0 5px rgba(178,100,255,0.7); }
.sys-progress-fill.state-fortified-bg  { background: #5ab8ff; box-shadow: 0 0 5px rgba(90,184,255,0.7); }
.sys-progress-fill.state-exploited-bg  { background: #ff7100; box-shadow: 0 0 5px rgba(255,113,0,0.7); }
.sys-progress-fill.state-contested-bg  { background: #ff5544; box-shadow: 0 0 5px rgba(255,85,68,0.7); }
.sys-progress-fill.state-unoccupied-bg { background: #a0a8b0; box-shadow: 0 0 5px rgba(160,168,176,0.7); }
.state-stronghold-text { color: #b264ff !important; }
.state-fortified-text  { color: #5ab8ff !important; }
.state-exploited-text  { color: #ff7100 !important; }
.state-contested-text  { color: #ff5544 !important; }
.state-unoccupied-text { color: #a0a8b0 !important; }

.sys-heat-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ru-heat-strip { display: block; }
.sys-heat-net { font-size: 8.5px; font-family: 'Consolas', monospace; letter-spacing: 0.06em; font-weight: 600; }
.sys-heat-net.kpi-pos { color: #00ff66; }
.sys-heat-net.kpi-neg { color: #ff3333; }

.sys-cell-ru { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-family: 'Consolas', monospace; }
.sys-cell-ru .sys-mono { font-size: 11px; }
.sys-cell-ru .kpi-pos { color: #00ff66; }
.sys-cell-ru .kpi-neg { color: #ff3333; }

.sys-cell-updated { position: relative; min-height: 22px; display: flex; align-items: center; justify-content: flex-end; }
.sys-updated-time {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: 'Consolas', monospace; font-size: 10px; color: var(--ed-text-muted);
    transition: opacity 0.14s;
}
.sys-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #00ff66; box-shadow: 0 0 4px #00ff66; opacity: 0.7; }
.sys-row-actions {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    display: flex; gap: 4px;
    opacity: 0; transition: opacity 0.14s; pointer-events: none;
}
.sys-row:hover .sys-row-actions { opacity: 1; pointer-events: auto; }
.sys-row:hover .sys-updated-time { opacity: 0; }
.sys-row-act {
    width: 22px; height: 22px; background: rgba(0,0,0,0.3);
    border: 1px solid #2d333b; color: var(--ed-text-secondary);
    cursor: pointer; font-family: inherit; font-size: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; padding: 0; transition: all 0.12s;
}
.sys-row-act:hover { color: var(--ed-orange); border-color: var(--ed-orange); }
.sys-row-act.sys-row-act-primary { background: rgba(255,113,0,0.18); border-color: var(--ed-orange); color: var(--ed-orange); }

/* Empty + loading */
.sys-empty { padding: 40px 24px; text-align: center; color: var(--ed-text-muted); font-size: 12px; letter-spacing: 0.04em; }
.sys-empty-glyph { font-size: 22px; opacity: 0.4; margin-bottom: 8px; }
.sys-empty-btn {
    padding: 6px 12px; background: transparent;
    border: 1px solid var(--ed-orange); color: var(--ed-orange);
    font-family: inherit; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
    cursor: pointer; margin-top: 10px;
}

/* Pagination */
.sys-pager {
    padding: 10px 24px; border-top: 1px solid rgba(255,113,0,0.25);
    background: rgba(13,17,23,0.7);
    display: flex; align-items: center; gap: 14px; font-size: 10.5px;
}
.sys-pager strong { color: var(--ed-text); font-family: 'Consolas', monospace; }
.sys-pager-btns { display: flex; gap: 2px; }
.sys-pager-btn {
    padding: 4px 10px; min-width: 28px;
    background: rgba(0,0,0,0.25); border: 1px solid #2d333b;
    color: var(--ed-text-secondary); cursor: pointer;
    font-family: inherit; font-size: 10.5px; transition: all 0.12s;
}
.sys-pager-btn:hover:not(:disabled) { border-color: var(--ed-orange); color: var(--ed-orange); }
.sys-pager-btn.active { background: rgba(255,113,0,0.18); border-color: var(--ed-orange); color: var(--ed-orange); box-shadow: 0 0 8px rgba(255,113,0,0.4); }
.sys-pager-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* PowerLogo CSS-mask base */
.power-logo-mask {
    display: inline-block; flex-shrink: 0;
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
}
/* ───────────────────────────────────────────────────────────────────────────
   System Detail page — additions
   Append to wwwroot/app.css. All selectors are `.sd-*`-namespaced and
   reuse existing `--ed-*` tokens and `.badge-state` colors from app.css.
   ─────────────────────────────────────────────────────────────────────────── */

.sd-page {
    padding: 0 28px 32px;
    display: flex;
    flex-direction: column;
}

.sd-loading,
.sd-error {
    padding: 60px 28px;
    text-align: center;
    color: var(--ed-text-muted);
}

.sd-back-link {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 16px;
    color: #f07b05;
    border: 1px solid #f07b05;
    text-decoration: none;
}
.sd-back-link:hover { background: rgba(240,123,5,0.10); }

/* ── Identity bar ─────────────────────────────────────────────────────── */
.sd-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 0 14px;
    border-bottom: 1px solid rgba(255,113,0,0.12);
    margin-bottom: 18px;
}
.sd-back {
    font-size: 10.5px;
    color: #f07b05;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
}
.sd-back:hover { text-shadow: 0 0 8px rgba(255,113,0,0.4); }
.sd-sep { color: rgba(149,160,171,0.55); }
.sd-name {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ed-text);
    text-shadow: 0 0 18px rgba(255,113,0,0.4);
}
.sd-power {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.sd-coords {
    font-size: 11px;
    color: var(--ed-text-muted);
    font-family: 'Consolas', 'Monaco', monospace;
}
.sd-spacer { flex: 1; }
.sd-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #00ff66;
    background: rgba(0,255,102,0.10);
    border: 1px solid rgba(0,255,102,0.4);
}
.sd-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00ff66;
    box-shadow: 0 0 6px #00ff66;
    animation: edpulse 2s ease-in-out infinite;
}
.sd-updated {
    font-size: 10.5px;
    color: var(--ed-text-muted);
    letter-spacing: 0.08em;
}
.sd-ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid rgba(255,113,0,0.20);
    color: var(--ed-text-secondary);
    cursor: pointer;
    font-family: inherit;
}
.sd-ghost-btn:hover { border-color: #f07b05; color: #f07b05; }
.sd-ghost-icon { font-size: 12px; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.sd-hero {
    position: relative;
    background: linear-gradient(135deg, rgba(22,27,34,0.92) 0%, rgba(17,21,28,0.92) 100%);
    border: 1px solid rgba(255,113,0,0.45);
    border-left-width: 3px;
}
.sd-hero-red    { border-left-color: #ff3333; }
.sd-hero-green  { border-left-color: #00ff66; }
.sd-hero-yellow { border-left-color: #ffaa00; }

.sd-hero-corner {
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: #ff7100;
    border-style: solid;
    border-width: 0;
    opacity: 0.85;
}
.sd-tl { top: -1px; left:  -1px; border-top-width: 2px; border-left-width: 2px; }
.sd-tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.sd-bl { bottom: -1px; left:  -1px; border-bottom-width: 2px; border-left-width: 2px; }
.sd-br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

.sd-hero-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 14px 22px 8px;
    flex-wrap: wrap;
}
.sd-verdict {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: inherit;
}
.sd-hero-red    .sd-verdict { color: #ff3333; }
.sd-hero-green  .sd-verdict { color: #00ff66; }
.sd-hero-yellow .sd-verdict { color: #ffaa00; }

.sd-hero-sep { color: rgba(149,160,171,0.55); }
.sd-verdict-detail { font-size: 13px; color: var(--ed-text); }
.sd-band-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
}
.sd-band-state { font-size: 10px; color: var(--ed-text-muted); letter-spacing: 0.10em; }
.sd-band-pct { font-size: 12px; font-weight: 700; font-family: 'Consolas', 'Monaco', monospace; color: #5ab8ff; }
.sd-band-cp { font-size: 10px; color: var(--ed-text-muted); }

.sd-hero-chart { padding: 0 22px; }
.sd-chart-svg { display: block; width: 100%; }

.sd-chart-host { position: relative; }
.sd-chart-tooltip {
    position: absolute;
    top: 10px;
    transform: translateX(12px);
    z-index: 5;
    pointer-events: none;
    min-width: 150px;
    padding: 9px 11px;
    background: linear-gradient(135deg, rgba(13,17,23,0.96) 0%, rgba(22,27,34,0.96) 100%);
    border: 1px solid rgba(255,113,0,0.55);
    border-left: 3px solid #ff7100;
    box-shadow: 0 10px 22px rgba(0,0,0,0.55);
    font-size: 11px;
    color: var(--ed-text);
    animation: sdCttFade 0.10s ease-out;
}
.sd-chart-tooltip-right {
    transform: translateX(-12px) translateX(-100%);
    border-left: 1px solid rgba(255,113,0,0.55);
    border-right: 3px solid #ff7100;
}
@keyframes sdCttFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.sd-ctt-time {
    font-size: 10px;
    color: var(--ed-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255,113,0,0.18);
    padding-bottom: 4px;
}
.sd-ctt-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 2px 0;
}
.sd-ctt-k {
    font-size: 10px;
    letter-spacing: 0.10em;
    color: var(--ed-text-muted);
    text-transform: uppercase;
}
.sd-ctt-v { font-size: 12px; font-weight: 700; }
.sd-ctt-state {
    margin-top: 5px;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ed-text-muted);
}

.sd-cycle-row {
    margin: 14px 22px 18px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    gap: 18px;
}
.sd-cycle-label {
    font-size: 10px;
    color: var(--ed-text-muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.sd-cycle-r { font-size: 14px; font-family: 'Consolas', 'Monaco', monospace; color: #00ff66; font-weight: 700; min-width: 90px; text-align: right; }
.sd-cycle-u { font-size: 14px; font-family: 'Consolas', 'Monaco', monospace; color: #ff3333; font-weight: 700; min-width: 90px; }
.sd-cycle-bar {
    flex: 1;
    height: 16px;
    display: flex;
    gap: 1px;
    background: rgba(255,255,255,0.04);
}
.sd-cycle-bar-r { background: linear-gradient(90deg, #00ff66 0%, rgba(0,255,102,0.8) 100%); box-shadow: inset 0 0 6px rgba(0,255,102,0.5); }
.sd-cycle-bar-u { background: linear-gradient(90deg, rgba(255,51,51,0.8) 0%, #ff3333 100%); box-shadow: inset 0 0 6px rgba(255,51,51,0.5); }
.sd-cycle-divider { width: 1px; height: 28px; background: rgba(255,255,255,0.06); }
.sd-net { display: flex; flex-direction: column; align-items: flex-end; min-width: 130px; }
.sd-net-label { font-size: 9.5px; color: var(--ed-text-muted); letter-spacing: 0.14em; text-transform: uppercase; }
.sd-net-value { font-size: 22px; font-family: 'Consolas', 'Monaco', monospace; font-weight: 700; line-height: 1.1; }

.sd-standings {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}
.sd-standing {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--p-color) 12%, transparent) 0%, transparent 100%);
    border: 1px solid color-mix(in srgb, var(--p-color) 35%, transparent);
    border-left: 3px solid var(--p-color);
}
.sd-standing-rank { font-size: 9px; color: var(--ed-text-muted); letter-spacing: 0.12em; text-transform: uppercase; min-width: 22px; }
.sd-standing-name { flex: 1; font-size: 12px; color: var(--p-color); font-weight: 600; }
.sd-standing-pct  { font-size: 16px; font-family: 'Consolas', 'Monaco', monospace; color: var(--p-color); font-weight: 700; }

/* ── Body grid ────────────────────────────────────────────────────────── */
.sd-body {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 18px;
    margin-top: 18px;
}
@media (max-width: 1100px) {
    .sd-body { grid-template-columns: 1fr; }
}

/* ── Generic card chrome ─────────────────────────────────────────────── */
.sd-card {
    background: rgba(22,27,34,0.45);
    border: 1px solid rgba(255,255,255,0.06);
}
.sd-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #f07b05;
}
.sd-card-title { color: #f07b05; }
.sd-card-badge { color: var(--ed-text-muted); }

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.sd-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(255,113,0,0.12);
    overflow-x: auto;
}
.sd-tab {
    padding: 11px 16px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: transparent;
    color: var(--ed-text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.sd-tab:hover { color: var(--ed-text-secondary); }
.sd-tab-active { color: #f07b05; border-bottom-color: #f07b05; }
.sd-tab-count {
    font-size: 9.5px;
    padding: 1px 6px;
    background: rgba(255,255,255,0.06);
    color: var(--ed-text-muted);
    font-family: 'Consolas', 'Monaco', monospace;
    font-weight: 700;
}
.sd-tab-count-on { background: #f07b05; color: #0d1117; }
.sd-tab-body { padding: 18px; }

/* ── Profile tab ─────────────────────────────────────────────────────── */
.sd-profile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 720px) { .sd-profile { grid-template-columns: 1fr; } }

.sd-section-label {
    font-size: 10px;
    color: var(--ed-text-muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.sd-section-label-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}
.sd-mt-18 { margin-top: 18px; }
.sd-mb-6  { margin-bottom: 6px; }
.sd-mb-8  { margin-bottom: 8px; }
.sd-pv-4  { padding: 4px 0; }
.sd-pv-8  { padding: 8px 0; }
.sd-pv-14 { padding: 14px 0; }

.sd-facts { display: flex; flex-direction: column; }
.sd-fact {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sd-fact-last { border-bottom: none; }
.sd-fact-k {
    font-size: 10.5px;
    color: var(--ed-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    min-width: 110px;
}
.sd-fact-v { font-size: 12px; color: var(--ed-text); }
.sd-mono { font-family: 'Consolas', 'Monaco', monospace; }
.sd-mute  { color: var(--ed-text-muted); }
.sd-faint { color: rgba(149,160,171,0.55); font-size: 11px; }
.sd-text  { color: var(--ed-text); font-size: 11px; }
.sd-text-orange        { color: #f07b05; }
.sd-text-orange-strong { color: #f07b05; font-weight: 600; }
.sd-text-green         { color: #00ff66; }
.sd-text-red           { color: #ff3333; }

.sd-pill {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border: 1px solid currentColor;
}
.sd-pill-federation  { color: #5ab8ff; background: rgba(90,184,255,0.12); }
.sd-pill-empire      { color: #b264ff; background: rgba(178,100,255,0.12); }
.sd-pill-alliance    { color: #5ad17f; background: rgba(90,209,127,0.12); }
.sd-pill-independent { color: var(--ed-text-muted); background: rgba(149,160,171,0.10); }
.sd-pill-green       { color: #00ff66; background: rgba(0,255,102,0.12); }
.sd-pill-yellow      { color: #ffaa00; background: rgba(255,170,0,0.12); }
.sd-pill-orange      { color: #ffa500; background: rgba(255,165,0,0.12); }
.sd-pill-red         { color: #ff3333; background: rgba(255,51,51,0.12); }
.sd-pill-muted       { color: var(--ed-text-muted); background: rgba(149,160,171,0.10); }
.sd-pill-faint       { color: rgba(149,160,171,0.55); background: rgba(149,160,171,0.06); }
.sd-pill-default     { color: var(--ed-text-muted); background: rgba(149,160,171,0.10); }

.sd-signal-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-signal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 11px;
    border: 1px solid currentColor;
    letter-spacing: 0.04em;
}
.sd-signal-blue { color: #3498db; background: rgba(52,152,219,0.12); }
.sd-signal-red  { color: #ff3333; background: rgba(255,51,51,0.12); }

.sd-activity-box {
    padding: 12px 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 18px;
}
.sd-activity-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}
.sd-activity-total {
    font-size: 24px;
    font-weight: 700;
    color: var(--ed-text);
    font-family: 'Consolas', 'Monaco', monospace;
    line-height: 1.1;
}
.sd-activity-bar {
    display: flex;
    height: 8px;
    gap: 1px;
    margin-bottom: 8px;
}
.sd-activity-bar-r { background: #00ff66; box-shadow: inset 0 0 4px rgba(0,255,102,0.5); }
.sd-activity-bar-u { background: #ff3333; box-shadow: inset 0 0 4px rgba(255,51,51,0.5); }
.sd-activity-legend {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-family: 'Consolas', 'Monaco', monospace;
}

.sd-support-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    background: rgba(255,255,255,0.02);
    border-left: 3px solid transparent;
    margin-bottom: 4px;
    text-decoration: none;
    color: var(--ed-text);
}
.sd-support-row:hover { background: rgba(255,113,0,0.06); }
.sd-support-primary { border-left-color: #f07b05; }
.sd-support-anchor  { border-left-color: #b264ff; }
.sd-support-name { font-size: 12px; color: var(--ed-text); font-weight: 600; }
.sd-support-flag { font-size: 9px; color: #f07b05; letter-spacing: 0.12em; text-transform: uppercase; }

/* ── Factions tab ────────────────────────────────────────────────────── */
.sd-faction-list { display: flex; flex-direction: column; }
.sd-faction-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sd-faction-row:last-child { border-bottom: none; }
.sd-faction-tick { width: 4px; height: 40px; background: rgba(255,255,255,0.06); }
.sd-faction-tick-on { background: #f07b05; }
.sd-faction-main { flex: 1; min-width: 0; }
.sd-faction-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sd-faction-name { font-size: 13px; font-weight: 500; color: var(--ed-text); }
.sd-faction-controls { font-size: 9px; color: #f07b05; letter-spacing: 0.16em; text-transform: uppercase; }
.sd-faction-state {
    font-size: 9.5px;
    padding: 1px 6px;
    background: rgba(52,152,219,0.12);
    border: 1px solid rgba(52,152,219,0.3);
    color: #3498db;
    letter-spacing: 0.04em;
}
.sd-faction-influence {
    margin-top: 6px;
    height: 4px;
    background: rgba(255,255,255,0.05);
    position: relative;
}
.sd-faction-influence-fill {
    position: absolute;
    inset: 0;
    background: rgba(149,160,171,0.6);
}
.sd-influence-on { background: #f07b05; }
.sd-faction-pct { font-size: 14px; font-weight: 600; color: var(--ed-text-secondary); min-width: 56px; text-align: right; }

/* ── Settlements tab ─────────────────────────────────────────────────── */
.sd-settlements-filters {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 10px;
}
.sd-input, .sd-select {
    padding: 6px 10px;
    font-size: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    color: var(--ed-text);
    outline: none;
    font-family: inherit;
}
.sd-input { flex: 1; min-width: 160px; }
.sd-select { cursor: pointer; }
.sd-flex-1 { flex: 1; }

.sd-settlements-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.sd-settlement {
    display: flex;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.02);
    border-left: 3px solid rgba(52,152,219,0.5);
}
.sd-settlement-ctrl { border-left-color: #f07b05; }
.sd-settlement-main { flex: 1; min-width: 0; }
.sd-settlement-name { font-size: 12px; font-weight: 500; color: var(--ed-text); }
.sd-settlement-faction { font-size: 10px; color: var(--ed-text-muted); margin-top: 2px; }
.sd-settlement-econ-bar { margin-top: 5px; height: 3px; background: rgba(255,255,255,0.05); }
.sd-settlement-econ-fill { height: 100%; background: #3498db; }
.sd-settlement-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sd-settlement-gov     { font-size: 9px; color: var(--ed-text-muted); letter-spacing: 0.06em; }
.sd-settlement-economy { font-size: 9px; color: #3498db; letter-spacing: 0.06em; }
.sd-settlement-time    { font-size: 9px; color: rgba(149,160,171,0.55); margin-top: auto; }

/* ── Stations tab ────────────────────────────────────────────────────── */
.sd-stations { display: flex; flex-direction: column; gap: 4px; }
.sd-stations-head,
.sd-station {
    display: grid;
    grid-template-columns: 1.6fr 0.9fr 0.9fr 110px;
    gap: 10px;
    align-items: center;
    padding: 9px 10px;
}
.sd-stations-head {
    font-size: 10px;
    color: var(--ed-text-muted);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-bottom: 8px;
}
.sd-station {
    background: rgba(255,255,255,0.02);
    border-left: 3px solid #95a0ab;
}
.sd-station-name { font-size: 12.5px; font-weight: 600; color: var(--ed-text); }
.sd-right { text-align: right; }
.sd-center { text-align: center; }
.sd-market-btn {
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(255,113,0,0.10);
    border: 1px solid #f07b05;
    color: #f07b05;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
}
.sd-market-btn:hover { background: rgba(255,113,0,0.25); }

/* ── Rings tab ───────────────────────────────────────────────────────── */
.sd-rings { display: flex; flex-direction: column; gap: 4px; }
.sd-ring {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.02);
    border-left: 3px solid #888;
}
.sd-ring-metallic   { border-left-color: #ffcc00; }
.sd-ring-metal-rich { border-left-color: #ffa500; }
.sd-ring-icy        { border-left-color: #64c8ff; }
.sd-ring-rocky      { border-left-color: #c09060; }
.sd-ring-rocky-ice  { border-left-color: #9080a0; }

.sd-ring-name { min-width: 150px; }
.sd-ring-body { font-size: 9.5px; color: rgba(149,160,171,0.55); margin-top: 2px; }
.sd-ring-class,
.sd-ring-reserve,
.sd-hotspot {
    font-size: 10px;
    padding: 2px 7px;
    border: 1px solid currentColor;
    letter-spacing: 0.06em;
}
.sd-ring-class            { color: #888; background: rgba(255,255,255,0.04); }
.sd-ring-reserve-pristine { color: #00ff66; background: rgba(0,255,102,0.12); }
.sd-ring-reserve-major    { color: #3498db; background: rgba(52,152,219,0.12); }
.sd-ring-reserve-common   { color: var(--ed-text-muted); background: rgba(149,160,171,0.10); }
.sd-ring-reserve-low      { color: #ffa500; background: rgba(255,165,0,0.12); }
.sd-ring-reserve-depleted { color: #ff3333; background: rgba(255,51,51,0.12); }
.sd-ring-hotspots { flex: 1; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.sd-hotspot { color: #bb6edd; background: rgba(187,110,221,0.12); border-color: rgba(187,110,221,0.3); }
.sd-ring-time { font-size: 9.5px; color: rgba(149,160,171,0.55); min-width: 56px; text-align: right; }

/* ── Powers tab ──────────────────────────────────────────────────────── */
.sd-powers { display: flex; flex-direction: column; gap: 6px; }
.sd-power-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.02);
    border-left: 3px solid transparent;
}
.sd-power-controlling {
    background: linear-gradient(90deg, color-mix(in srgb, var(--p-color) 18%, transparent) 0%, transparent 100%);
    border-left-color: var(--p-color);
}
.sd-power-info { flex: 1; }
.sd-power-name { font-size: 14px; font-weight: 600; color: var(--ed-text); }
.sd-power-controlling .sd-power-name { color: var(--p-color); }
.sd-power-sub { font-size: 10.5px; color: var(--ed-text-muted); margin-top: 2px; letter-spacing: 0.04em; }
.sd-power-controls {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--p-color);
}

/* ── Nearby panel ────────────────────────────────────────────────────── */
.sd-nearby .sd-card-head { border-bottom: 1px solid rgba(255,113,0,0.12); }
.sd-nearby-filters {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid rgba(255,113,0,0.12);
}
.sd-filter-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.sd-filter-label {
    font-size: 9.5px;
    color: var(--ed-text-muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    min-width: 50px;
    padding-top: 5px;
}
.sd-state-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    flex: 1;
}
.sd-state-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    font-size: 10.5px;
    font-weight: 600;
    background: transparent;
    color: var(--ed-text-muted);
    border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.sd-state-chip-n {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 9.5px;
    opacity: 0.7;
    font-weight: 500;
}
.sd-state-chip-on { background: rgba(255,113,0,0.13); }
.sd-state-chip-stronghold.sd-state-chip-on { color: #b264ff; border-color: #b264ff; background: rgba(178,100,255,0.13); }
.sd-state-chip-fortified.sd-state-chip-on  { color: #5ab8ff; border-color: #5ab8ff; background: rgba(90,184,255,0.13); }
.sd-state-chip-exploited.sd-state-chip-on  { color: #ff7100; border-color: #ff7100; background: rgba(255,113,0,0.13); }
.sd-state-chip-unoccupied.sd-state-chip-on { color: #a0a8b0; border-color: #a0a8b0; background: rgba(160,168,176,0.13); }
.sd-state-chip-contested.sd-state-chip-on  { color: #ff5544; border-color: #ff5544; background: rgba(255,85,68,0.13); }
.sd-state-chip-clear {
    padding: 4px 9px;
    font-size: 10.5px;
    background: transparent;
    color: var(--ed-text-muted);
    border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.06em;
}

.sd-nearby-list {
    display: flex;
    flex-direction: column;
    max-height: 360px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,113,0,0.4) transparent;
}
.sd-nearby-list::-webkit-scrollbar { width: 8px; }
.sd-nearby-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
.sd-nearby-list::-webkit-scrollbar-thumb { background: rgba(255,113,0,0.4); }
.sd-nearby-list::-webkit-scrollbar-thumb:hover { background: rgba(255,113,0,0.7); }

.sd-nearby-empty { padding: 24px; text-align: center; color: var(--ed-text-muted); font-size: 12px; }
.sd-nearby-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid transparent;
    text-decoration: none;
    color: var(--ed-text);
    flex-shrink: 0;
}
.sd-nearby-row:last-child { border-bottom: none; }
.sd-nearby-pledged { border-left-color: var(--p-color); }
.sd-nearby-row:hover { background: rgba(255,113,0,0.06); }
.sd-nearby-main { flex: 1; min-width: 0; }
.sd-nearby-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sd-nearby-name { font-size: 13px; font-weight: 600; color: var(--ed-text); }
.sd-nearby-sub  { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 10.5px; color: var(--ed-text-muted); }
.sd-nearby-power { display: inline-flex; align-items: center; gap: 4px; }
.sd-nearby-net { font-family: 'Consolas', 'Monaco', monospace; font-size: 10px; }
.sd-nearby-dist { font-size: 13px; font-family: 'Consolas', 'Monaco', monospace; color: var(--ed-text-secondary); font-weight: 600; }
.sd-nearby-arrow { font-size: 14px; color: var(--ed-text-muted); padding-left: 4px; }

/* ── Activity & history (collapsible log) ────────────────────────────── */
.sd-log { margin-top: 18px; }
.sd-log-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.sd-log-caret {
    font-size: 12px;
    color: var(--ed-text-muted);
    transition: transform 0.15s;
}
.sd-log-open .sd-log-caret { color: #f07b05; transform: rotate(90deg); }
.sd-log-title {
    font-size: 11px;
    color: #f07b05;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
}
.sd-log-body {
    padding: 8px 14px 10px;
    border-top: 1px solid rgba(255,113,0,0.12);
}
.sd-log-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
    font-size: 10px;
}
.sd-log-meta .sd-section-label { margin-bottom: 0; }
.sd-log-scroll {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,0.05);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,113,0,0.4) transparent;
}
.sd-log-table {
    font-size: 10.5px;
}
.sd-log-table th { padding: 4px 10px; font-size: 9.5px; }
.sd-log-table td { padding: 2.5px 10px; }
.sd-log-scroll::-webkit-scrollbar { width: 8px; }
.sd-log-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
.sd-log-scroll::-webkit-scrollbar-thumb { background: rgba(255,113,0,0.4); }
.sd-log-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,113,0,0.7); }

.sd-log-table thead {
    position: sticky;
    top: 0;
    background: rgba(22,27,34,0.96);
    background-image: linear-gradient(90deg, rgba(255,113,0,0.10) 0%, transparent 60%);
    z-index: 1;
}
.sd-log-table th {
    box-shadow: inset 0 -1px 0 rgba(255,113,0,0.35);
}

.sd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.sd-table th {
    padding: 6px 10px;
    text-align: left;
    color: #f07b05;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 600;
}
.sd-table td {
    padding: 6px 10px;
    color: var(--ed-text-secondary);
    border-top: 1px solid rgba(255,255,255,0.06);
}
.sd-table th.sd-right, .sd-table td.sd-right { text-align: right; }
.sd-ledger-now {
    margin-left: 6px;
    font-size: 9px;
    color: #f07b05;
    letter-spacing: 0.12em;
}

/* Activity log nested inside the hero */
.sd-hero .sd-log {
    margin: 0 22px 14px;
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(255,113,0,0.18);
}
.sd-hero .sd-log .sd-log-toggle { padding: 7px 12px; }
.sd-hero .sd-log .sd-log-title { font-size: 10px; letter-spacing: 0.14em; }

.sd-log-row { transition: background 0.10s, box-shadow 0.10s; }
.sd-log-row-hov {
    background: rgba(255,113,0,0.14);
    box-shadow: inset 3px 0 0 #ff7100;
}
.sd-log-row-hov td { color: var(--ed-text); }

/* ── Power dropdown (custom themed select) ───────────────────────────── */
.sd-pdd {
    position: relative;
    flex: 1;
    min-width: 0;
}
.sd-pdd-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 11px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--ed-text);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    text-align: left;
    letter-spacing: 0.02em;
    transition: border-color 0.12s, background 0.12s;
}
.sd-pdd-btn:hover {
    border-color: rgba(255,113,0,0.5);
    background: rgba(255,113,0,0.06);
}
.sd-pdd-open .sd-pdd-btn {
    border-color: #f07b05;
    background: rgba(255,113,0,0.10);
    box-shadow: 0 0 0 1px rgba(255,113,0,0.25) inset;
}
.sd-pdd-btn-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sd-pdd-caret {
    font-size: 10px;
    color: var(--ed-text-muted);
    transition: transform 0.15s, color 0.12s;
}
.sd-pdd-open .sd-pdd-caret {
    color: #f07b05;
    transform: rotate(180deg);
}
.sd-pdd-glyph {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sd-pdd-glyph-any {
    font-size: 13px;
    line-height: 1;
    color: var(--ed-text-muted);
    letter-spacing: 0;
}
.sd-pdd-opt-on .sd-pdd-glyph-any,
.sd-pdd-btn:hover .sd-pdd-glyph-any { color: #f07b05; }
.sd-pdd-swatch-empty {
    width: 12px;
    height: 12px;
    border: 1px dashed rgba(149,160,171,0.5);
    box-sizing: border-box;
}

.sd-pdd-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: transparent;
}
.sd-pdd-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 100;
    background: linear-gradient(135deg, rgba(22,27,34,0.98) 0%, rgba(17,21,28,0.98) 100%);
    border: 1px solid rgba(255,113,0,0.45);
    border-left-width: 3px;
    border-left-color: #f07b05;
    max-height: 320px;
    overflow-y: auto;
    box-shadow: 0 16px 36px rgba(0,0,0,0.55);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,113,0,0.4) transparent;
    animation: sdPddOpen 0.12s ease-out;
}
@keyframes sdPddOpen {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.sd-pdd-panel::-webkit-scrollbar { width: 8px; }
.sd-pdd-panel::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
.sd-pdd-panel::-webkit-scrollbar-thumb { background: rgba(255,113,0,0.4); }
.sd-pdd-panel::-webkit-scrollbar-thumb:hover { background: rgba(255,113,0,0.7); }

.sd-pdd-opt {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    color: var(--ed-text-secondary);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    text-align: left;
    letter-spacing: 0.02em;
    transition: background 0.10s, color 0.10s, border-color 0.10s;
}
.sd-pdd-opt:hover {
    background: rgba(255,113,0,0.08);
    color: var(--ed-text);
    border-left-color: rgba(255,113,0,0.6);
}
.sd-pdd-opt-on {
    background: rgba(255,113,0,0.14);
    color: var(--ed-text);
    border-left-color: #f07b05;
}
.sd-pdd-opt-on .sd-pdd-opt-label {
    color: #f07b05;
    font-weight: 600;
}
.sd-pdd-opt[style*="--p-color"]:hover {
    background: linear-gradient(90deg, color-mix(in srgb, var(--p-color) 14%, transparent) 0%, transparent 70%);
    border-left-color: var(--p-color);
}
.sd-pdd-opt[style*="--p-color"].sd-pdd-opt-on {
    background: linear-gradient(90deg, color-mix(in srgb, var(--p-color) 22%, transparent) 0%, transparent 70%);
    border-left-color: var(--p-color);
}
.sd-pdd-opt[style*="--p-color"].sd-pdd-opt-on .sd-pdd-opt-label {
    color: var(--p-color);
}
.sd-pdd-opt-label {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sd-pdd-opt-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--p-color);
    border: 1px solid color-mix(in srgb, var(--p-color) 55%, transparent);
    background: color-mix(in srgb, var(--p-color) 12%, transparent);
    vertical-align: middle;
}
.sd-pdd-opt-n {
    flex-shrink: 0;
    font-size: 10px;
    color: var(--ed-text-muted);
    padding: 1px 7px;
    background: rgba(255,255,255,0.05);
    min-width: 28px;
    text-align: center;
}
.sd-pdd-opt-on .sd-pdd-opt-n {
    background: #f07b05;
    color: #0d1117;
    font-weight: 700;
}
.sd-pdd-opt[style*="--p-color"].sd-pdd-opt-on .sd-pdd-opt-n {
    background: var(--p-color);
    color: #0d1117;
}
.sd-pdd-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,113,0,0.18) 30%, rgba(255,113,0,0.18) 70%, transparent 100%);
    margin: 4px 0;
}

/* ── Market modal ─────────────────────────────────────────────────────── */
button.sd-market-btn {
    cursor: pointer;
    font-family: inherit;
}

.sd-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(5, 8, 12, 0.72);
    backdrop-filter: blur(2px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.sd-modal {
    background: linear-gradient(135deg, rgba(22,27,34,0.98) 0%, rgba(17,21,28,0.98) 100%);
    border: 1px solid rgba(255,113,0,0.45);
    border-left-width: 3px;
    border-left-color: #f07b05;
    width: min(1100px, 100%);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55);
    position: relative;
}
.sd-modal::before,
.sd-modal::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid #f07b05;
    opacity: 0.85;
}
.sd-modal::before {
    top: -1px;
    left: -1px;
    border-right: none;
    border-bottom: none;
}
.sd-modal::after {
    bottom: -1px;
    right: -1px;
    border-left: none;
    border-top: none;
}

.sd-modal-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,113,0,0.18);
}
.sd-modal-title-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.sd-modal-eyebrow {
    font-size: 10px;
    color: var(--ed-text-muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.sd-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ed-text);
    letter-spacing: 0.03em;
    text-shadow: 0 0 12px rgba(255,113,0,0.3);
}
.sd-modal-meta {
    font-size: 11px;
    color: var(--ed-text-muted);
    letter-spacing: 0.06em;
}
.sd-modal-close {
    width: 30px;
    height: 30px;
    background: transparent;
    border: 1px solid rgba(255,113,0,0.25);
    color: var(--ed-text-secondary);
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    line-height: 1;
}
.sd-modal-close:hover {
    color: #f07b05;
    border-color: #f07b05;
    background: rgba(255,113,0,0.08);
}

.sd-modal-empty { padding: 30px 18px; text-align: center; }

.sd-modal-filter {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sd-modal-filter .sd-input {
    flex: 0 0 320px;
    min-width: 0;
}

.sd-modal-table-wrap {
    flex: 1;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,113,0,0.4) transparent;
}
.sd-modal-table-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
.sd-modal-table-wrap::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
.sd-modal-table-wrap::-webkit-scrollbar-thumb { background: rgba(255,113,0,0.4); }
.sd-modal-table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(255,113,0,0.7); }

.sd-commodity-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}
.sd-commodity-table thead {
    position: sticky;
    top: 0;
    background: rgba(22,27,34,0.98);
    background-image: linear-gradient(90deg, rgba(255,113,0,0.12) 0%, transparent 60%);
    z-index: 1;
}
.sd-commodity-table th {
    padding: 10px 14px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #f07b05;
    text-align: left;
    box-shadow: inset 0 -2px 0 #f07b05;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.sd-commodity-table th.sd-right { text-align: right; }
.sd-commodity-table th:hover { background: rgba(255,113,0,0.10); }
.sd-commodity-table td {
    padding: 8px 14px;
    color: var(--ed-text-secondary);
    border-bottom: 1px solid rgba(255,113,0,0.06);
    white-space: nowrap;
}
.sd-commodity-table tbody tr {
    border-left: 2px solid transparent;
    transition: background 0.12s, border-color 0.12s;
}
.sd-commodity-table tbody tr:hover {
    background: rgba(255,113,0,0.08);
    border-left-color: #f07b05;
}
.sd-commodity-table tbody tr:last-child td { border-bottom: none; }
.sd-ct-name { min-width: 180px; }
.sd-sort-icon { font-size: 9px; margin-left: 4px; }

@media (max-width: 720px) {
    .sd-modal-filter { flex-direction: column; align-items: stretch; }
    .sd-modal-filter .sd-input { flex: 1; }
}
/* ================================================================
   Powers List — refined card grid (v2)
   Append to the end of wwwroot/app.css.

   Namespace: .pl-*  (avoids clashes with the original .power-card / .powers-grid
   rules — those can stay in app.css as-is; the new Powers.razor doesn't use them).

   Reuses existing tokens:
     --ed-orange / --ed-orange-glow / --ed-bg-surface / --ed-text /
     --ed-text-secondary / --ed-text-muted / --ed-green / --ed-red
   ================================================================ */

/* ── Page header ───────────────────────────────────────────────── */
.pl-page-header {
    padding: 14px 24px 4px;
}
.pl-page-header__kicker {
    font-size: 0.62rem;
    color: var(--ed-orange);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2px;
}
.pl-page-header__title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.005em;
    color: var(--ed-text);
}
.pl-page-header__title .text-orange {
    text-shadow: 0 0 12px var(--ed-orange-glow);
}
.pl-page-header__lead {
    margin: 4px 0 0;
    font-size: 0.78rem;
    color: var(--ed-text-secondary);
    max-width: 720px;
    line-height: 1.45;
}

/* ── Section header (title · Σ · sort chips) ───────────────────── */
.pl-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px 12px;
    flex-wrap: wrap;
}
.pl-section-head__title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ed-orange);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.pl-section-head__rule {
    flex: 1;
    min-width: 80px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,113,0,0.20) 0%, transparent 80%);
}
.pl-section-head__sigma {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.69rem;
    color: var(--ed-text-muted);
    font-family: 'Consolas', 'Monaco', monospace;
}
.pl-section-head__sigma .u {
    color: rgba(149,160,171,0.55);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.pl-section-head__sigma .div { color: rgba(255,255,255,0.12); }
.pl-section-head__sigma .up   { color: var(--ed-green); }
.pl-section-head__sigma .down { color: var(--ed-red); }

/* Sort chip group */
.pl-sort { display: inline-flex; }
.pl-sort__chip {
    padding: 5px 11px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ed-text-muted);
    background: transparent;
    border: 1px solid rgba(255,255,255,0.06);
    border-right: none;
    cursor: pointer;
    font-family: inherit;
    transition: color .15s, background .15s, border-color .15s;
}
.pl-sort__chip:last-child { border-right: 1px solid rgba(255,255,255,0.06); }
.pl-sort__chip:hover { color: var(--ed-text-secondary); }
.pl-sort__chip.is-active {
    color: var(--ed-orange);
    background: rgba(255,113,0,0.10);
    border-color: rgba(255,113,0,0.22);
}
.pl-sort__chip.is-active + .pl-sort__chip { border-left: none; }

/* ── Grid ──────────────────────────────────────────────────────── */
.pl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px;
    padding: 0 24px 24px;
}

/* ── Card ──────────────────────────────────────────────────────── */
.pl-card {
    position: relative;
    background: rgba(22,27,34,0.72);
    border-top:    none;
    border-right:  1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    border-left:   3px solid rgba(255,113,0,0.45);
    cursor: pointer;
    overflow: hidden;
    transition: background .2s, border-color .2s, box-shadow .2s;
}
.pl-card:hover {
    background: linear-gradient(180deg, rgba(255,113,0,0.07) 0%, rgba(22,27,34,0.72) 55%);
    border-right-color:  rgba(255,113,0,0.22);
    border-bottom-color: rgba(255,113,0,0.22);
    border-left-color:   var(--ed-orange);
    box-shadow: 0 0 32px rgba(255,113,0,0.10);
}

/* Leader hairline (top edge). Brighter for top-3. */
.pl-card__leader-line {
    position: absolute; left: 0; right: 0; top: 0;
    height: 1px;
    background: rgba(255,255,255,0.06);
    pointer-events: none;
}
.pl-card--top3 .pl-card__leader-line {
    height: 2px;
    background: linear-gradient(90deg, var(--ed-orange) 0%, rgba(255,113,0,0.33) 40%, transparent 90%);
    box-shadow: 0 0 8px var(--ed-orange-glow);
}

/* Watermark logo */
.pl-card__watermark {
    position: absolute; right: -18px; bottom: -28px;
    width: 170px; height: 170px;
    opacity: 0.045;
    filter: brightness(0) invert(1);
    pointer-events: none;
    transition: opacity .2s;
    z-index: 0;
}
.pl-card:hover .pl-card__watermark { opacity: 0.085; }

/* ── Top rail ── */
.pl-card__top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.pl-card__rank {
    font-size: 0.62rem;
    font-weight: 700;
    font-family: 'Consolas', 'Monaco', monospace;
    letter-spacing: 0.08em;
    color: var(--ed-text-muted);
    padding: 2px 7px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    line-height: 1.3;
}
.pl-card--top3 .pl-card__rank {
    color: var(--ed-orange);
    background: rgba(255,113,0,0.10);
    border-color: rgba(255,113,0,0.22);
}
.pl-card__count {
    font-size: 0.62rem;
    color: var(--ed-text-muted);
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.pl-card__pledged {
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ed-green);
    padding: 2px 6px;
    background: rgba(0,255,102,0.08);
    border: 1px solid rgba(0,255,102,0.35);
    line-height: 1.3;
}
.pl-card__spacer { flex: 1; }
.pl-card__last {
    font-size: 0.56rem;
    color: rgba(149,160,171,0.55);
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.pl-card__delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.69rem;
    font-family: 'Consolas', 'Monaco', monospace;
    font-weight: 700;
    min-width: 48px;
    justify-content: flex-end;
}
.pl-card__delta.is-up   { color: var(--ed-green); }
.pl-card__delta.is-down { color: var(--ed-red); }
.pl-card__delta-arrow { font-size: 0.62rem; }

/* ── Body (identity + CP) ── */
.pl-card__body {
    position: relative;
    z-index: 1;
    padding: 14px 14px 12px;
}
.pl-card__identity {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pl-card__logo {
    flex-shrink: 0;
    transition: filter .2s;
}
.pl-card__names { min-width: 0; flex: 1; }
.pl-card__name {
    font-size: 1.06rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--ed-text);
    letter-spacing: 0.015em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .15s;
}
.pl-card:hover .pl-card__name { color: var(--ed-orange); }
.pl-card__short {
    font-size: 0.66rem;
    color: var(--ed-text-muted);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 4px;
}

.pl-card__cp {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 14px;
}
.pl-card__cp-value {
    font-size: 1.6rem;
    font-weight: 700;
    font-family: 'Consolas', 'Monaco', monospace;
    color: var(--ed-text);
    line-height: 1;
    transition: text-shadow .15s;
}
.pl-card:hover .pl-card__cp-value { text-shadow: 0 0 12px rgba(255,113,0,0.25); }
.pl-card__cp-label {
    font-size: 0.59rem;
    color: var(--ed-text-muted);
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.pl-card__cp-delta {
    font-size: 0.69rem;
    font-family: 'Consolas', 'Monaco', monospace;
    font-weight: 700;
}
.pl-card__cp-delta.is-up   { color: var(--ed-green); }
.pl-card__cp-delta.is-down { color: var(--ed-red); }

/* Sparkline + caption */
.pl-trend-wrap { margin-top: 12px; height: 30px; }
.pl-trend-svg  { display: block; overflow: visible; }
.pl-card__trend-cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.56rem;
    color: rgba(149,160,171,0.55);
    font-family: 'Consolas', 'Monaco', monospace;
    letter-spacing: 0.04em;
    margin-top: 4px;
}
.pl-card__trend-cap .t-low  { color: var(--ed-red); }
.pl-card__trend-cap .t-high { color: var(--ed-green); }
.pl-card__trend-cap .t-now  { color: var(--ed-orange); font-weight: 700; }
.pl-card__trend-cap .t-sep  { color: rgba(149,160,171,0.55); padding: 0 6px; }

/* ── States ── */
.pl-card__states {
    position: relative;
    z-index: 1;
    padding: 0 14px 12px;
}
.pl-card__state-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 6px;
    background: rgba(0,0,0,0.25);
    margin-bottom: 8px;
}
.pl-card__state-bar .seg { height: 100%; }
.pl-card__state-bar .seg--stronghold { background: #9b59b6; box-shadow: inset 0 0 4px rgba(155,89,182,0.66); }
.pl-card__state-bar .seg--fortified  { background: #3498db; box-shadow: inset 0 0 4px rgba(52,152,219,0.66); }
.pl-card__state-bar .seg--exploited  { background: #f07b05; box-shadow: inset 0 0 4px rgba(240,123,5,0.66); }

.pl-card__state-row {
    display: flex;
    gap: 16px;
    font-size: 0.66rem;
}
.pl-card__state-row .chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.pl-card__state-row .chip .dot { width: 5px; height: 5px; }
.pl-card__state-row .chip .n {
    color: var(--ed-text);
    font-family: 'Consolas', 'Monaco', monospace;
    font-weight: 700;
}
.pl-card__state-row .chip .l {
    color: var(--ed-text-muted);
    letter-spacing: 0.08em;
}
.pl-card__state-row .chip--stronghold .dot { background: #9b59b6; box-shadow: 0 0 4px #9b59b6; }
.pl-card__state-row .chip--fortified  .dot { background: #3498db; box-shadow: 0 0 4px #3498db; }
.pl-card__state-row .chip--exploited  .dot { background: #f07b05; box-shadow: 0 0 4px #f07b05; }

/* ── Bottom flow strip ── */
.pl-card__flow {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    padding: 11px 14px 12px;
    background: rgba(0,0,0,0.22);
    border-top: 1px solid rgba(255,255,255,0.04);
}
.pl-flow__cell { display: flex; flex-direction: column; gap: 2px; }
.pl-flow__cell--mid {
    border-left: 1px solid rgba(255,255,255,0.04);
    padding-left: 12px;
}
.pl-flow__cell--net {
    border-left: 1px solid rgba(255,113,0,0.22);
    padding-left: 14px;
    margin-left: 12px;
    align-items: flex-end;
}
.pl-flow__label {
    font-size: 0.56rem;
    color: var(--ed-text-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
}
.pl-flow__cell--net .pl-flow__label {
    color: var(--ed-orange);
    letter-spacing: 0.14em;
    font-weight: 700;
}
.pl-flow__val {
    font-size: 0.75rem;
    font-family: 'Consolas', 'Monaco', monospace;
    font-weight: 700;
    line-height: 1;
}
.pl-flow__val--lg { font-size: 0.88rem; font-weight: 800; }
.pl-flow__val.is-up   { color: var(--ed-green); }
.pl-flow__val.is-down { color: var(--ed-red); }
.pl-flow__cell--net .pl-flow__val--lg.is-up   { text-shadow: 0 0 8px rgba(0,255,102,0.20); }
.pl-flow__cell--net .pl-flow__val--lg.is-down { text-shadow: 0 0 8px rgba(255,68,68,0.20); }

/* Hover behaviour for the .power-logo (already defined in app.css) is reused
   verbatim — white by default, orange on .pl-card:hover.
   The selector below mirrors the original .power-card:hover .power-logo rule
   so logos tint orange when hovering a card.                                  */
.pl-card:hover .power-logo {
    filter: brightness(0) invert(0.7) sepia(1) saturate(5) hue-rotate(350deg);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .pl-page-header { padding: 20px 14px 12px; }
    .pl-section-head { padding: 18px 14px 14px; gap: 8px; }
    .pl-grid { grid-template-columns: 1fr; padding: 0 14px 18px; }
    .pl-section-head__sigma { display: none; }
}