/* ============================================
   BREAKPOINT — "DEEP CORE" THEME
   Version: 5.35
   Palette: Molten Orange / Deep Indigo / Industrial
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

/* ============================================
   CSS VARIABLES — DARK MODE (DEFAULT)
   ============================================ */
:root {
    /* Backgrounds */
    --bg-main:        #0a0a0f;
    --bg-gradient:    radial-gradient(ellipse at 80% 0%, rgba(255,107,43,0.06) 0%, transparent 55%),
                      radial-gradient(ellipse at 20% 100%, rgba(192,38,211,0.04) 0%, transparent 50%),
                      #0a0a0f;
    --bg-panel:       #12121c;
    --bg-card:        #1a1a28;
    --bg-input:       #0e0e18;
    --bg-input-focus: #1a1a28;

    /* Borders */
    --border-main:    rgba(255, 107, 43, 0.18);
    --border-subtle:  rgba(255, 255, 255, 0.06);

    /* Text */
    --text-main:      #e8e8f0;
    --text-muted:     #6b6b8a;
    --text-strong:    #ffffff;

    /* Accent */
    --accent:         #ff6b2b;
    --accent-dim:     rgba(255, 107, 43, 0.15);
    --accent-glow:    0 0 20px rgba(255, 107, 43, 0.3);
    --accent2:        #c026d3;
    --accent2-dim:    rgba(192, 38, 211, 0.12);

    /* Status */
    --success:        #22c55e;
    --danger:         #ef4444;
    --warning:        #f59e0b;

    /* Charts */
    --chart-grid:     rgba(255, 107, 43, 0.08);
    --chart-text:     #6b6b8a;

    /* Glow */
    --glow-text:      0 0 12px rgba(255, 107, 43, 0.4);

    /* Typography */
    --font-ui:        'Rajdhani', sans-serif;
    --font-tech:      'Share Tech Mono', monospace;

    /* Layout */
    --card-padding:   0.85rem;
    --radius:         6px;
    --radius-lg:      10px;
}

/* ============================================
   LIGHT MODE
   ============================================ */
[data-theme="light"] {
    --bg-main:        #f4f1ee;
    --bg-gradient:    radial-gradient(ellipse at 80% 0%, rgba(255,107,43,0.04) 0%, transparent 60%), #f4f1ee;
    --bg-panel:       #fdfcfb;
    --bg-card:        #f7f4f1;
    --bg-input:       #fdfcfb;
    --bg-input-focus: #f7f4f1;
    --border-main:    rgba(0, 0, 0, 0.09);
    --border-subtle:  rgba(0, 0, 0, 0.05);
    --text-main:      #1e1a16;
    --text-muted:     #7a7060;
    --text-strong:    #0f0c08;
    --accent:         #d95a1a;
    --accent-dim:     rgba(217, 90, 26, 0.1);
    --chart-grid:     rgba(0, 0, 0, 0.05);
    --chart-text:     #7a7060;
    --glow-text:      none;
}

/* ============================================
   BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; }

body {
    font-family: var(--font-ui);
    background: var(--bg-main);
    background-image: var(--bg-gradient);
    background-attachment: fixed;
    color: var(--text-main);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.5;
}

/* Noise texture overlay on body */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
}

/* ============================================
   TYPOGRAPHY SCALE
   ============================================ */
input, select, button { font-size: 0.9rem !important; font-family: var(--font-ui); }
.text-xs  { font-size: 0.8rem  !important; }
.text-sm  { font-size: 0.9rem  !important; }
.text-\[9px\]  { font-size: 0.72rem !important; }
.text-\[10px\] { font-size: 0.78rem !important; }
.text-\[11px\] { font-size: 0.82rem !important; }
.font-tech { font-family: var(--font-tech) !important; letter-spacing: 0.02em; }
.text-glow { text-shadow: var(--glow-text); }

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; opacity: 0.5; }
::-webkit-scrollbar-thumb:hover { background: #ff8c5a; }

/* ============================================
   LAYOUT
   ============================================ */
.main-container {
    max-width: 2400px;
    width: 98%;
    display: grid;
    gap: 1.25rem;
    margin: 0 auto;
    grid-template-columns: 1fr;
    align-items: start;
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .main-container { grid-template-columns: 1fr; }
    .col-span-1.lg\:col-span-4 { grid-column: span 1; }
}

@media (min-width: 1280px) {
    .main-container { grid-template-columns: 460px 1fr; }
    .col-span-1.lg\:col-span-4 { grid-column: span 2; }
}

@media (min-width: 1280px) {
    .sticky-column-wrapper {
        position: sticky;
        top: 1.25rem;
        border-radius: var(--radius-lg);
    }
    .vertical-column {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        height: 100%;
    }
}

/* ============================================
   PANELS
   ============================================ */
.glass-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border-main);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.03);
    position: relative;
}

/* Orange left-accent bar on panels */
.glass-panel::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--accent), transparent);
    border-radius: 0 2px 2px 0;
    opacity: 0.5;
}

.glass-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    transition: border-color 0.2s ease;
}

.card-pad { padding: var(--card-padding) !important; }

/* ============================================
   SECTION HEADERS
   ============================================ */
/* Override Tailwind heading colours to use accent system */
.glass-panel h2 {
    font-family: var(--font-ui);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.glass-panel h2::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--accent-dim), transparent);
    margin-left: 0.5rem;
    min-width: 20px;
}

/* ============================================
   INPUTS & SELECTS
   ============================================ */
input, select {
    background: var(--bg-input);
    border: 1px solid var(--border-main);
    color: var(--text-main);
    font-family: var(--font-tech);
    border-radius: var(--radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus, select:focus {
    background: var(--bg-input-focus);
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 107, 43, 0.15), 0 0 12px rgba(255, 107, 43, 0.1);
}

select option { background: #12121c; color: var(--text-main); }

/* ============================================
   BUTTONS
   ============================================ */
button {
    font-family: var(--font-ui);
    font-weight: 600;
    letter-spacing: 0.06em;
    transition: all 0.2s ease;
}

/* Primary deploy/action button — angular clip */
#deployBtn,
button[onclick="addShipLoadout()"] {
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
    clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
    border-radius: 0 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
}

#deployBtn:hover,
button[onclick="addShipLoadout()"]:hover {
    background: #ff8c5a !important;
    box-shadow: 0 0 16px rgba(255, 107, 43, 0.4) !important;
}

/* ============================================
   TITLE / LOGO TEXT
   ============================================ */
.text-laser {
    background: linear-gradient(135deg,
        #fff5e6 0%,
        #ff6b2b 25%,
        #ff3d00 45%,
        #ffb347 55%,
        #ff6b2b 75%,
        #fff5e6 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 16px rgba(255, 107, 43, 0.6))
            drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));
}

.text-chrome {
    background: linear-gradient(to bottom,
        #ffffff 0%,
        #c8c8d8 40%,
        #6b6b8a 50%,
        #e0e0f0 60%,
        #ffffff 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ============================================
   STATUS BANNERS
   ============================================ */
.animate-status {
    animation: statusPulse 2.5s infinite ease-in-out;
    position: relative;
    overflow: hidden;
}

.animate-status::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 8px,
        rgba(255,255,255,0.02) 8px,
        rgba(255,255,255,0.02) 16px
    );
    pointer-events: none;
}

@keyframes statusPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.1); }
    50%       { box-shadow: 0 0 24px 2px rgba(255,255,255,0.08); }
}

/* ============================================
   SHIP ARM CARDS
   ============================================ */
.ship-arm-card {
    border-left: 3px solid var(--accent) !important;
    border-radius: var(--radius) !important;
    background: var(--bg-card) !important;
    transition: border-color 0.2s ease;
}

/* Inactive head — grey left border */
.ship-arm-card:has(#[id$="-active"]:not(:checked)) {
    border-left-color: var(--text-muted) !important;
    opacity: 0.7;
}

.ship-arm-card select {
    font-size: 0.78rem !important;
    width: 100%;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-right: 1.2rem;
}

.ship-arm-card select option { font-size: 12px; background-color: #0e0e18; }

/* ============================================
   COMBO / BREAK METHOD CARDS
   ============================================ */
.combo-card {
    border-radius: var(--radius) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

.selected-combo {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent), 0 0 16px rgba(255, 107, 43, 0.25) !important;
}

/* Success combo — diagonal stripe bg */
.combo-card.bg-green-900\/20 {
    background: repeating-linear-gradient(
        -60deg,
        rgba(34, 197, 94, 0.03),
        rgba(34, 197, 94, 0.03) 4px,
        transparent 4px,
        transparent 12px
    ) !important;
}

/* ============================================
   ACCORDIONS (SHIP INSTANCES)
   ============================================ */
details.accordion {
    border: 1px solid var(--border-main);
    border-radius: var(--radius-lg);
    background: var(--bg-panel);
    padding: 0.65rem 0.85rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

details.accordion summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-strong);
    font-family: var(--font-ui);
}

details.accordion summary::-webkit-details-marker { display: none; }
details.accordion[open] summary { color: var(--accent); }
details.accordion .chevron { opacity: 0.6; display: inline-flex; align-items: center; }

.ship-instance summary .chevron { transition: transform 0.2s ease; }
.ship-instance[open] summary .chevron { transform: rotate(180deg); }

/* ============================================
   HELP PANEL
   ============================================ */
.help-panel {
    position: fixed;
    top: 0;
    right: -480px;
    width: 480px;
    height: 100vh;
    background: var(--bg-panel);
    border-left: 1px solid var(--border-main);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.8);
    z-index: 1000;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.help-panel.active { right: 0; }

.help-panel-content {
    padding: 2rem;
    height: 100%;
    overflow-y: auto;
}

.help-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.help-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================
   DEPLOY BUTTON PULSE
   ============================================ */
@keyframes deployPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,43,0); }
    50%       { box-shadow: 0 0 20px 6px rgba(255,107,43,0.2); }
}

.deploy-pulse { animation: deployPulse 1.8s ease-in-out infinite; }
.pulse-once   { animation: deployPulse 1s ease-out 1; }

/* ============================================
   LOADING SPINNER
   ============================================ */
@keyframes spinner { to { transform: rotate(360deg); } }

.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    top: 50%; left: 50%;
    margin: -7px 0 0 -7px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spinner 0.6s linear infinite;
}

/* ============================================
   SANDBOX MODE
   ============================================ */
.sandbox-disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

.sandbox-label { transition: color 0.3s ease; }
.sandbox-label.disabled { color: var(--text-muted) !important; }

#sandboxToggle:focus + div {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 9999px;
}

/* Sandbox pill toggle */
.sandbox-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: var(--bg-input);
    border: 1px solid var(--border-main);
    border-radius: 6px;
}

.sandbox-pill button {
    padding: 3px 10px;
    font-size: 0.68rem !important;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 4px;
    border: none !important;
    background: transparent;
    color: var(--text-muted);
    transition: all 0.15s ease;
    min-height: unset !important;
    line-height: 1.4;
}

.sandbox-pill button.active-owned {
    background: var(--bg-card);
    color: var(--text-main);
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.sandbox-pill button.active-sandbox {
    background: rgba(16,185,129,0.18);
    color: #10b981;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ============================================
   BREAK METHODS PANEL
   ============================================ */
#configs {
    overflow-y: auto;
    padding-right: 0.4rem;
    flex-grow: 1;
    max-height: 80vh;
}

/* ============================================
   CUSTOM SCROLLBAR (debug panel)
   ============================================ */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,107,43,0.4); border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255,107,43,0.7); }

/* ============================================
   DROPDOWN WIDTHS
   ============================================ */
#multiShipContainer { width: 100%; max-width: 100%; overflow-x: hidden; }

/* ============================================
   GUIDE STEPS
   ============================================ */
.guide-step {
    border-color: rgba(255,255,255,0.08);
    color: var(--text-muted);
    opacity: 0.4;
    transition: all 0.3s ease;
}

.guide-step.guide-step-done {
    border-color: rgba(34,197,94,0.4);
    color: #86efac;
    background: rgba(34,197,94,0.06);
    opacity: 1;
}

.guide-step.guide-step-done .guide-step-icon {
    border-color: rgba(34,197,94,0.6) !important;
    background: rgba(34,197,94,0.15);
}

.guide-step.guide-step-active {
    border-color: rgba(255,107,43,0.5);
    color: #ffb38a;
    background: rgba(255,107,43,0.08);
    opacity: 1;
    animation: guidePulse 2.4s ease-in-out infinite;
}

.guide-step.guide-step-active .guide-step-icon {
    border-color: rgba(255,107,43,0.8) !important;
    background: rgba(255,107,43,0.2);
}

.guide-step.guide-step-pending { opacity: 0.35; }

@keyframes guidePulse {
    0%, 100% { border-color: rgba(255,107,43,0.4); }
    50%       { border-color: rgba(255,107,43,0.9); box-shadow: 0 0 10px rgba(255,107,43,0.2); }
}

/* ============================================
   ONBOARDING MODAL
   ============================================ */
#onboarding-modal .glass-panel {
    background: var(--bg-panel);
    border-color: rgba(255,107,43,0.25);
    box-shadow: 0 30px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,107,43,0.1);
}

#onboarding-modal .glass-panel::before { display: none; }

.onboarding-dot { transition: background-color 0.3s ease; }

/* ============================================
   MOBILE
   ============================================ */
@media (max-width: 1279px) {
    .glass-panel { width: 100% !important; margin-bottom: 1.25rem; min-height: auto; }
    /* fleet config panel is a fixed drawer on mobile — don't give it normal flow margin */
    #fleet-config-panel { margin-bottom: 0 !important; }
    .sticky-column-wrapper { position: relative !important; top: 0 !important; max-height: none !important; overflow: visible !important; }
    button, select, input { min-height: 48px !important; font-size: 16px !important; }
    /* exclude compact module selects from large touch target override */
    .ship-arm-card select { min-height: 36px !important; font-size: 14px !important; }
    /* fix iOS Safari background-attachment bug */
    body { background-attachment: scroll; }
    /* break methods + chosen loadout stack vertically */
    #break-methods-row { flex-direction: column; }
}

@media (max-width: 640px) {
    /* header: hide subtitle taglines, shrink title */
    .header-branding-sub { display: none !important; }
    .title-breakpoint { font-size: 1.5rem; }
    /* bump tiny text up slightly */
    .text-\[9px\]  { font-size: 0.78rem !important; }
    .text-\[10px\] { font-size: 0.82rem !important; }
    .text-\[8px\]  { font-size: 0.75rem !important; }
    /* results stat+chart row stacks vertically */
    .mobile-results-row { flex-direction: column; }
    .mobile-results-row > div[style*="flex:3"] { width: 100%; }
    /* ko-fi button smaller on phone */
    #kofi-float { bottom: 1rem; right: 1rem; }
    #kofi-float a { padding: 6px 10px; }
    #kofi-float .text-sm { font-size: 0.75rem !important; }
}

@media (max-width: 520px) {
    /* help panel full width on phone */
    .help-panel { width: 100%; right: -100%; }
}

/* Hide Edit Fleet button when drawer is open */
#fleet-config-panel.drawer-open ~ * #edit-fleet-btn,
.drawer-active #edit-fleet-btn { display: none !important; }

/* ============================================
   MOBILE FLEET DRAWER
   ============================================ */
.mobile-only { display: none; }

@media (max-width: 1279px) {
    .mobile-only { display: flex; }

    /* Hide fleet config panel in normal flow on mobile */
    #fleet-config-panel {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 501;
        max-height: 85vh;
        overflow-y: auto !important;
        border-radius: 1.25rem 1.25rem 0 0 !important;
        border-bottom: none !important;
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        margin: 0 !important;
        width: 100% !important;
        padding-top: 1.5rem !important;
        min-height: unset !important;
    }

    #fleet-config-panel.drawer-open {
        transform: translateY(0);
    }

    /* Drag handle visual at top of drawer */
    #fleet-config-panel::after {
        content: '';
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: var(--border-main);
        border-radius: 2px;
    }

    /* Overlay behind drawer */
    #fleet-drawer-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.7);
        z-index: 500;
    }
}

/* ============================================
   FEEDBACK PANEL
   ============================================ */
.feedback-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    height: 100vh;
    background: var(--bg-panel);
    border-left: 1px solid var(--border-main);
    box-shadow: -8px 0 40px rgba(0,0,0,0.8);
    z-index: 1000;
    transition: right 0.35s cubic-bezier(0.4,0,0.2,1);
    overflow: hidden;
}

.feedback-panel.active { right: 0; }

.feedback-panel-content {
    padding: 2rem;
    height: 100%;
    overflow-y: auto;
}

.feedback-type-btn:hover {
    border-color: rgba(255,107,43,0.4) !important;
    background: rgba(255,107,43,0.05);
}

.feedback-type-btn.active-bug {
    border-color: rgba(239,68,68,0.6) !important;
    background: rgba(239,68,68,0.08);
}

.feedback-type-btn.active-feature {
    border-color: rgba(255,107,43,0.6) !important;
    background: rgba(255,107,43,0.08);
}

#fb-submit:not(:disabled) {
    background: #ff6b2b !important;
    border-color: #ff6b2b !important;
    color: #fff !important;
    cursor: pointer;
}

#fb-submit:not(:disabled):hover {
    background: #ff8c5a !important;
}

@media (max-width: 520px) {
    .feedback-panel { width: 100%; right: -100%; }
}

/* ============================================
   KO-FI TOAST
   ============================================ */
@keyframes kofiSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes kofiSlideOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(12px); }
}

#kofi-toast.kofi-in  { animation: kofiSlideIn 0.35s ease forwards; }
#kofi-toast.kofi-out { animation: kofiSlideOut 0.3s ease forwards; }

#kofi-toast a:hover { color: #ff6b2b !important; }

@media (max-width: 1279px) {
    #kofi-float { bottom: 1rem; right: 1rem; }
}

/* ============================================
   LIGHT MODE OVERRIDES
   ============================================ */
[data-theme="light"] .glass-panel {
    box-shadow: 0 1px 8px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
}

[data-theme="light"] .glass-panel::before {
    background: linear-gradient(to bottom, transparent, rgba(217,90,26,0.25), transparent);
    opacity: 0.6;
}

[data-theme="light"] input, [data-theme="light"] select {
    background: #fdfcfb;
    border-color: rgba(0,0,0,0.1);
    color: var(--text-main);
}

[data-theme="light"] select option { background: #fdfcfb; color: #1e1a16; }
[data-theme="light"] .ship-arm-card select option { background: #fdfcfb; }

/* Header buttons — fix hardcoded dark backgrounds */
[data-theme="light"] .bg-\[\#1a1a28\] {
    background-color: #f0ece8 !important;
}
[data-theme="light"] .hover\:bg-\[\#252e3d\]:hover {
    background-color: #e8e2dc !important;
}
[data-theme="light"] .text-\[var\(--text-muted\)\] {
    color: #7a7060 !important;
}
[data-theme="light"] .hover\:text-\[var\(--text-main\)\]:hover {
    color: #1e1a16 !important;
}

/* bg-black utility overrides */
[data-theme="light"] .bg-black\/40,
[data-theme="light"] .bg-black\/30,
[data-theme="light"] .bg-black\/20,
[data-theme="light"] .bg-black\/10,
[data-theme="light"] #configs .bg-black\/40 {
    background-color: rgba(0,0,0,0.03) !important;
    border-color: rgba(0,0,0,0.07) !important;
}

/* Toggle switches and slate backgrounds */
[data-theme="light"] .bg-slate-700\/50 { background-color: rgba(0,0,0,0.07) !important; }
[data-theme="light"] .bg-slate-800 { background-color: #e8e2dc !important; }
[data-theme="light"] .bg-slate-800\/60 { background-color: rgba(220,210,200,0.6) !important; }

/* Text overrides */
[data-theme="light"] .text-gray-300,
[data-theme="light"] .text-gray-400,
[data-theme="light"] .text-gray-500 { color: #5a5040 !important; }
[data-theme="light"] .text-gray-600 { color: #7a7060 !important; }
[data-theme="light"] .text-gray-700 { color: #9a9080 !important; }
[data-theme="light"] .text-white { color: #1e1a16 !important; }

/* Border overrides */
[data-theme="light"] .border-gray-700\/50 { border-color: rgba(0,0,0,0.07) !important; }
[data-theme="light"] .border-gray-700 { border-color: rgba(0,0,0,0.09) !important; }

/* Empty state */
[data-theme="light"] #empty-state-msg {
    color: #7a7060 !important;
    border-color: rgba(0,0,0,0.1) !important;
    background: rgba(0,0,0,0.02) !important;
}

/* Ship arm cards */
[data-theme="light"] .ship-arm-card {
    background: #fdfcfb !important;
    border-color: rgba(0,0,0,0.1) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

[data-theme="light"] details.accordion {
    background: #f7f4f1;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Combo cards */
[data-theme="light"] .combo-card.bg-green-900\/20 { background: rgba(34,197,94,0.06) !important; }
[data-theme="light"] .combo-card.bg-red-900\/20   { background: rgba(239,68,68,0.05) !important; }
[data-theme="light"] .combo-card.bg-yellow-900\/20 { background: rgba(245,158,11,0.06) !important; }

/* Status banners — slightly desaturated for light bg */
[data-theme="light"] .bg-green-700  { background-color: #15803d !important; }
[data-theme="light"] .bg-red-800    { background-color: #b91c1c !important; }
[data-theme="light"] .bg-amber-600  { background-color: #b45309 !important; }
[data-theme="light"] .bg-yellow-600 { background-color: #a16207 !important; }

/* Ko-fi toast */
[data-theme="light"] #kofi-toast {
    background: #fdfcfb !important;
    border-color: rgba(217,90,26,0.25) !important;
}

/* Sandbox pill */
[data-theme="light"] .sandbox-pill {
    background: #f0ece8 !important;
    border-color: rgba(0,0,0,0.1) !important;
}
[data-theme="light"] .sandbox-pill button.active-owned {
    background: #fdfcfb !important;
    color: #1e1a16 !important;
}

/* #configs text overrides */
[data-theme="light"] #configs .text-green-400  { color: #15803d !important; }
[data-theme="light"] #configs .text-red-400    { color: #b91c1c !important; }
[data-theme="light"] #configs .text-blue-400   { color: #1d4ed8 !important; }
[data-theme="light"] #configs .text-indigo-400 { color: #3730a3 !important; }
[data-theme="light"] #configs .text-orange-400 { color: #c2410c !important; }
[data-theme="light"] #configs .text-gray-300,
[data-theme="light"] #configs .text-xs,
[data-theme="light"] #configs .font-mono { color: #1e1a16 !important; }
[data-theme="light"] #configs span.rounded {
    background-color: #f0ece8 !important;
    border-color: rgba(0,0,0,0.08) !important;
    color: #5a5040 !important;
}

[data-theme="light"] .text-laser {
    filter: drop-shadow(0 0 6px rgba(217,90,26,0.2)) drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

/* ============================================
   BREAKPOINT TITLE TREATMENT
   ============================================ */

.title-breakpoint {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 2.75rem);
    letter-spacing: -0.02em;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    position: relative;
}

/* Underline accent bar — fades right, sits under BREAK only */
.title-breakpoint::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 55%;
    height: 2px;
    background: linear-gradient(to right, #ff6b2b, rgba(255,107,43,0));
    border-radius: 1px;
}

/* BREAK — full orange-to-white laser gradient */
.title-break {
    background: linear-gradient(135deg,
        #fff5e6 0%,
        #ff6b2b 20%,
        #ff3d00 42%,
        #ffb347 54%,
        #ff6b2b 72%,
        #fff5e6 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 18px rgba(255, 107, 43, 0.65))
            drop-shadow(0 2px 4px rgba(0, 0, 0, 0.95));
}

/* | crack divider — pulses like the logo impact dot */
.title-crack {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.65em;
    font-weight: 400;
    color: #c026d3;
    margin: 0 2px;
    position: relative;
    top: -0.05em;
    text-shadow: 0 0 10px rgba(192, 38, 211, 0.8), 0 0 20px rgba(192, 38, 211, 0.4);
    animation: crackPulse 2s ease-in-out infinite;
    -webkit-text-fill-color: #c026d3;
}

/* POINT — cool white with faint magenta tint */
.title-point {
    color: #f0e8ff;
    -webkit-text-fill-color: #f0e8ff;
    filter: drop-shadow(0 0 8px rgba(192, 38, 211, 0.25))
            drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));
    letter-spacing: 0.01em;
}

@keyframes crackPulse {
    0%, 100% {
        opacity: 1;
        text-shadow: 0 0 10px rgba(192,38,211,0.8), 0 0 20px rgba(192,38,211,0.4);
    }
    50% {
        opacity: 0.5;
        text-shadow: 0 0 4px rgba(192,38,211,0.3);
    }
}

/* Light mode adjustments */
[data-theme="light"] .title-break {
    filter: drop-shadow(0 0 8px rgba(255,107,43,0.3)) drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}
[data-theme="light"] .title-point {
    color: #2a1a3e;
    -webkit-text-fill-color: #2a1a3e;
    filter: none;
}
[data-theme="light"] .title-crack {
    text-shadow: 0 0 6px rgba(192,38,211,0.5);
}
[data-theme="light"] .title-breakpoint::after {
    background: linear-gradient(to right, rgba(255,107,43,0.6), rgba(255,107,43,0));
}