/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    --bg-base:           #0d0f0e;
    --bg-surface:        #141816;
    --bg-raised:         #1c201d;
    --bg-overlay:        #252a26;

    --border-subtle:     #2a302b;
    --border-strong:     #3a4a3b;

    --accent-red:        #cc1a1a;
    --accent-red-dim:    #7a1010;
    --accent-red-glow:   rgba(204, 26, 26, 0.35);

    --accent-amber:      #d4a820;
    --accent-amber-glow: rgba(212, 168, 32, 0.3);

    --accent-green:      #4caf6e;

    --text-primary:      #dce8dc;
    --text-secondary:    #8a9e8b;
    --text-muted:        #546055;

    --gold-border:       #c8a830;
    --gold-glow:         rgba(200, 168, 48, 0.45);
    --orange-border:     #e05010;
    --orange-glow:       rgba(224, 80, 16, 0.45);
}

/* ============================================================
   BASE
   ============================================================ */
@media (min-width: 1025px) {
    html {
        font-size: 18px;
    }
}

body {
    font-family: "Saira Condensed", "Saira", sans-serif;
    background: radial-gradient(ellipse at 50% 0%, #161a16 0%, var(--bg-base) 70%);
    background-attachment: fixed;
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: 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;
}

h3 {
    margin-top: 0;
    margin-bottom: 0;
    color: var(--text-secondary);
    font-size: 0.7em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    display: flex;
}

h4 {
    color: var(--accent-red);
    text-transform: uppercase;
    font-size: 0.7em;
    margin-bottom: 0.5em;
    letter-spacing: 0.1em;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
    display: flex;
    flex-direction: column;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 2em 3em;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5em;
    padding: 2em 0 1.5em;
    border-bottom: 1px solid var(--border-strong);
    margin-bottom: 2em;
    position: relative;
}

.site-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 120px;
    height: 2px;
    background: var(--accent-red);
}

h1 {
    color: var(--text-primary);
    font-size: 2.2em;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0 0 0.2em;
}

.site-tagline {
    color: var(--text-secondary);
    font-size: 0.85em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 300;
    margin: 0;
}

.site-credit {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5em;
    color: var(--text-secondary);
    font-size: 0.85em;
    text-align: right;
}

.site-credit strong {
    display: block;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.site-credit span {
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

.credit-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6em;
}

.credit-links a {
    color: var(--accent-amber);
    border: 1px solid var(--border-strong);
    background: var(--bg-raised);
    border-radius: 4px;
    padding: 0.45em 0.8em;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.85em;
    font-weight: 700;
    letter-spacing: 0.08em;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.credit-links a:hover {
    border-color: var(--accent-amber);
    color: var(--text-primary);
}

.credit-links .report-issues-link {
    background: var(--accent-red-dim);
    border-color: var(--accent-red);
    color: var(--text-primary);
}

.credit-links .report-issues-link:hover {
    background: var(--accent-red);
    box-shadow: 0 0 10px var(--accent-red-glow);
}

/* ============================================================
   CONTROL PANEL
   ============================================================ */
.top-section {
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-top: 2px solid var(--accent-red);
    border-radius: 0 0 6px 6px;
    padding: 1.5em;
    margin-bottom: 2em;
}

#build-form {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    width: 100%;
}

/* ============================================================
   SHARED WARERA API KEY
   ============================================================ */
.api-key-card {
    margin-bottom: 0.4em;
    padding: 0.9em;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-left: 2px solid var(--accent-amber);
    border-radius: 4px;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.api-key-card[data-state="saved"] {
    border-left-color: var(--accent-green);
    box-shadow: inset 12px 0 28px -28px var(--accent-green);
}

.api-key-card[data-state="error"],
.api-key-card[data-state="conflict"] {
    border-left-color: var(--accent-red);
}

.api-key-card-head,
.api-key-card-title,
.api-key-input-row {
    display: flex;
    align-items: center;
}

.api-key-card-head {
    justify-content: space-between;
    gap: 1em;
}

.api-key-card-title {
    min-width: 0;
    gap: 0.65em;
}

.api-key-icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: var(--bg-raised);
    color: var(--accent-amber);
}

.api-key-card[data-state="saved"] .api-key-icon {
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.api-key-icon svg {
    width: 21px;
    height: 21px;
}

.api-key-card h2 {
    margin: 0 0 0.1em;
    color: var(--text-primary);
    font-size: 0.9em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.api-key-card-head p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.76em;
    line-height: 1.35;
}

.api-key-badge {
    flex: 0 0 auto;
    padding: 0.25em 0.55em;
    border: 1px solid rgba(212, 168, 32, 0.55);
    border-radius: 999px;
    background: rgba(212, 168, 32, 0.08);
    color: var(--accent-amber);
    font-size: 0.66em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.api-key-controls {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto auto;
    align-items: end;
    gap: 0.55em;
    margin-top: 0.7em;
}

.api-key-field {
    display: grid;
    gap: 0.25em;
    color: var(--text-secondary);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.api-key-input-row {
    min-width: 0;
}

.api-key-input-row input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 0.65em;
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    border-right: 0;
    border-radius: 4px 0 0 4px;
    color: var(--text-primary);
    font-family: "Share Tech Mono", "Courier New", monospace;
    font-size: 1.08em;
    letter-spacing: 0.03em;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.api-key-input-row input:focus {
    border-color: var(--accent-red);
    box-shadow: 0 0 0 2px var(--accent-red-glow);
}

.api-key-save-btn,
.api-key-quiet-btn {
    min-height: 40px;
    padding: 0.45em 0.85em;
    font-size: 0.74em;
    font-weight: 700;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.api-key-save-btn {
    background: var(--accent-red-dim);
}

.api-key-save-btn:hover {
    background: var(--accent-red);
    box-shadow: 0 0 10px var(--accent-red-glow);
}

.api-key-quiet-btn {
    background: var(--bg-raised);
    border-color: var(--border-strong);
    color: var(--text-secondary);
}

.api-key-input-row .api-key-quiet-btn {
    min-width: 62px;
    border-radius: 0 4px 4px 0;
}

.api-key-quiet-btn:hover {
    border-color: var(--accent-amber);
    color: var(--text-primary);
}

.api-key-status,
.api-key-privacy {
    margin: 0.5em 0 0;
    color: var(--text-secondary);
    font-size: 0.74em;
    line-height: 1.4;
}

.api-key-status::before {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 0.45em;
    border-radius: 50%;
    background: var(--accent-amber);
    content: "";
    vertical-align: 0.05em;
}

.api-key-card[data-state="saved"] .api-key-status {
    color: var(--accent-green);
}

.api-key-card[data-state="saved"] .api-key-status::before {
    background: var(--accent-green);
    box-shadow: 0 0 8px rgba(76, 175, 110, 0.45);
}

.api-key-card[data-state="error"] .api-key-status,
.api-key-card[data-state="conflict"] .api-key-status {
    color: #ef8b8b;
}

.api-key-card[data-state="error"] .api-key-status::before,
.api-key-card[data-state="conflict"] .api-key-status::before {
    background: var(--accent-red);
}

.api-key-privacy {
    color: var(--text-muted);
    font-size: 0.67em;
}

.api-key-privacy code {
    color: var(--text-secondary);
    font-family: "Share Tech Mono", "Courier New", monospace;
}

.campaign-panel {
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-left: 2px solid var(--accent-amber);
    border-radius: 4px;
    padding: 0.9em;
    margin-bottom: 0.4em;
}

.campaign-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1em;
    margin-bottom: 0.8em;
}

.campaign-header h2 {
    margin: 0 0 0.25em;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 1em;
}

.campaign-header p,
.campaign-status {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82em;
    line-height: 1.45;
}

.campaign-link {
    flex: 0 0 auto;
    color: var(--accent-amber);
    border: 1px solid var(--border-strong);
    background: var(--bg-raised);
    border-radius: 4px;
    padding: 0.45em 0.8em;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.campaign-link:hover {
    border-color: var(--accent-amber);
    color: var(--text-primary);
}

.eco-profile-card {
    display: flex;
    align-items: center;
    gap: 0.8em;
    margin: 0 0 0.7em;
    padding: 0.75em;
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    border-left: 2px solid var(--accent-green);
    border-radius: 4px;
}

.eco-profile-card[hidden],
.war-economy-controls[hidden],
.war-custom-skills[hidden] {
    display: none;
}

.eco-profile-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid var(--accent-green);
    border-radius: 50%;
    background: var(--bg-base);
    color: var(--accent-green);
    font-family: "Share Tech Mono", monospace;
    font-size: 1.15em;
}

.eco-profile-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.eco-profile-copy small {
    color: var(--text-muted);
    font-size: 0.67em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.eco-profile-copy strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 1em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eco-profile-copy span {
    color: var(--text-secondary);
    font-size: 0.78em;
}

.profile-action-btn {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0.45em 0.8em;
    background: var(--bg-overlay);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.74em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.profile-action-btn:hover {
    border-color: var(--accent-green);
}

.war-economy-controls {
    margin: 0.9em 0 0.7em;
    padding: 0.8em;
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
}

.war-economy-heading h3 {
    margin: 0 0 0.2em;
    color: var(--text-primary);
    font-size: 0.8em;
}

.war-economy-heading p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.78em;
    line-height: 1.4;
}

.war-mode-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65em;
    margin: 0.8em 0;
    padding: 0;
    border: 0;
}

.war-mode-picker legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.war-mode-option {
    display: flex;
    align-items: flex-start;
    gap: 0.55em;
    padding: 0.65em;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: var(--bg-base);
    cursor: pointer;
}

.war-mode-option:has(input:checked) {
    border-color: var(--accent-amber);
    box-shadow: inset 0 0 0 1px rgba(212, 168, 32, 0.15);
}

.war-mode-option input {
    margin: 0.2em 0 0;
    accent-color: var(--accent-amber);
}

.war-mode-option span,
.war-mode-option b,
.war-mode-option small {
    display: block;
}

.war-mode-option b {
    color: var(--text-primary);
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.war-mode-option small {
    margin-top: 0.15em;
    color: var(--text-muted);
    font-size: 0.7em;
    line-height: 1.3;
}

.war-custom-skills {
    display: grid;
    grid-template-columns: repeat(5, minmax(100px, 1fr));
    gap: 0.6em;
    margin-bottom: 0.8em;
}

.war-custom-skills label {
    color: var(--text-secondary);
    font-size: 0.7em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.war-custom-skills input,
.war-company-toolbar input[type="number"] {
    width: 100%;
    height: 34px;
    margin-top: 0.25em;
    padding: 0 0.55em;
    box-sizing: border-box;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: "Share Tech Mono", monospace;
}

.war-company-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 1em;
    margin-bottom: 0.65em;
}

.war-company-toolbar .input-group {
    flex: 0 0 190px;
}

.worker-policy-control {
    min-height: 34px;
}

.war-company-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.5em;
}

.war-company-option {
    display: flex;
    align-items: center;
    gap: 0.55em;
    min-width: 0;
    padding: 0.55em 0.65em;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    background: var(--bg-base);
    cursor: pointer;
}

.war-company-option:has(input:checked) {
    border-color: var(--border-strong);
}

.war-company-option input {
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--accent-green);
}

.war-company-option span {
    min-width: 0;
}

.war-company-option b,
.war-company-option small {
    display: block;
}

.war-company-option b {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.78em;
    text-overflow: ellipsis;
    text-transform: capitalize;
    white-space: nowrap;
}

.war-company-option small {
    color: var(--text-muted);
    font-size: 0.67em;
}

.campaign-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.8em;
    margin: 0.8em 0 0.6em;
}

.earnings-panel {
    margin: 0.9em 0 0.6em;
    padding: 0.8em;
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    position: relative;
}

.earnings-panel h3 {
    margin: 0 0 0.65em;
    color: var(--text-secondary);
    font-size: 0.75em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.earnings-panel h3 .tooltip {
    font-size: 1em;
    text-transform: none;
}

.earnings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 0.65em 1em;
    align-items: center;
}

.earning-control {
    min-height: 34px;
}

.earning-control small {
    color: var(--text-muted);
    font-size: 0.82em;
    font-weight: 400;
}

.bounty-earning {
    display: flex;
    gap: 0.55em;
    align-items: center;
}

.bounty-earning .checkbox-wrapper {
    min-width: 58px;
}

.bounty-earning input[type="number"] {
    width: 96px;
    height: 30px;
    min-width: 0;
    padding: 0 0.55em;
    background-color: var(--bg-base);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    box-sizing: border-box;
    color: var(--text-primary);
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    font-size: 0.9em;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.bounty-earning input[type="number"]:focus {
    outline: none;
    border-color: var(--accent-red);
    box-shadow: 0 0 0 2px var(--accent-red-glow);
}

.earnings-panel .checkbox-wrapper label {
    gap: 0.25em;
    font-size: 0.78em;
    line-height: 1.1;
}

.earnings-panel .checkbox-wrapper label::after {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    line-height: 24px;
    font-size: 0.95em;
}

.earnings-panel:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

.imported-economy-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.7em;
    margin: 0.8em 0;
}

.imported-economy-summary span {
    display: block;
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: 0.55em 0.7em;
}

.imported-economy-summary b {
    display: block;
    color: var(--text-primary);
    font-family: "Share Tech Mono", monospace;
    font-size: 1.05em;
    font-weight: 400;
}

#imported-war-profit-delta.negative {
    color: var(--accent-red);
}

#imported-war-profit-delta.positive {
    color: var(--accent-green);
}

.imported-economy-summary small {
    display: block;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.68em;
}

.imported-economy-summary.imported span {
    border-color: var(--border-strong);
}

.imported-economy-summary.imported b {
    color: var(--accent-green);
}

#eco-import-status.imported,
#war-skill-summary.imported {
    color: var(--accent-green);
}

.trends {
    width: 68%;
    display: flex;
    flex-direction: row;
    gap: 1em;
}

#results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 1.2em;
}

.campaign-results {
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-top: 2px solid var(--accent-amber);
    border-radius: 0 0 6px 6px;
    padding: 0.9em 1.1em;
    margin-bottom: 1em;
}

.campaign-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.7em;
}

.campaign-results-label {
    display: block;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.72em;
}

.campaign-results-value {
    display: block;
    color: var(--text-primary);
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    font-size: 1em;
    margin-top: 0.15em;
}

.campaign-results-value.over-budget,
.budget-failure.over-budget {
    color: var(--accent-red);
}

/* ============================================================
   CARDS
   ============================================================ */
@keyframes card-enter {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-top: 2px solid var(--accent-red);
    border-radius: 0 0 6px 6px;
    padding: 0;
    display: flex;
    flex-direction: column;
    animation: card-enter 0.25s ease both;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.card:hover {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.card:nth-child(1)  { animation-delay: 0.00s; }
.card:nth-child(2)  { animation-delay: 0.04s; }
.card:nth-child(3)  { animation-delay: 0.08s; }
.card:nth-child(4)  { animation-delay: 0.12s; }
.card:nth-child(5)  { animation-delay: 0.16s; }
.card:nth-child(6)  { animation-delay: 0.20s; }
.card:nth-child(7)  { animation-delay: 0.24s; }
.card:nth-child(8)  { animation-delay: 0.28s; }
.card:nth-child(9)  { animation-delay: 0.32s; }
.card:nth-child(10) { animation-delay: 0.36s; }
.card:nth-child(11) { animation-delay: 0.40s; }
.card:nth-child(12) { animation-delay: 0.44s; }

.card-header {
    display: flex;
    justify-content: space-between;
    padding: 1em;
}

.card-content {
    padding: 1em;
    flex-grow: 1;
}

/* ============================================================
   CARD SECTIONS
   ============================================================ */
.card-damage {
    position: relative;
    padding: 1.2em 1.5em 0.8em;
    font-size: 2em;
    font-weight: 700;
    color: var(--accent-red);
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    letter-spacing: -0.01em;
}

.card-damage::before {
    content: '◆';
    font-size: 0.45em;
    vertical-align: middle;
    margin-right: 0.3em;
    color: var(--accent-red);
    opacity: 0.7;
}

.card-damage .damage-label {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s;
    position: absolute;
    bottom: calc(100% - 0.5em);
    left: 30%;
    transform: translateX(-50%);
    background-color: var(--bg-overlay);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    padding: 0.5em 0.7em;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 1;
    font-size: 0.4em;
    font-weight: normal;
    font-family: 'Saira Condensed', sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.05em;
}

.card-damage:hover .damage-label {
    opacity: 1;
    visibility: visible;
}

.damage-secondary {
    display: block;
    font-size: 0.55em;
    opacity: 0.7;
    font-weight: normal;
    position: relative;
}

.card-cost {
    position: relative;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7em 1.5em;
    border-top: 1px solid var(--border-subtle);
    font-size: 1.1em;
    color: var(--accent-amber);
    font-family: 'Share Tech Mono', 'Courier New', monospace;
}

.card-cost .cost-label {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s;
    position: absolute;
    bottom: 100%;
    left: 20%;
    transform: translateX(-50%);
    background-color: var(--bg-overlay);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    padding: 0.5em 0.7em;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 10;
    font-size: 0.75em;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    font-family: 'Saira Condensed', sans-serif;
    font-weight: normal;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.03em;
}

.card-cost:hover .cost-label {
    opacity: 1;
    visibility: visible;
}

.net-cost-value {
    margin-left: 0.3em;
}

.cost-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    font-size: 0.9em;
    font-weight: normal;
    opacity: 0.85;
    border-top: 1px solid var(--border-subtle);
    padding-top: 0.3em;
}

.cost-line.positive {
    color: var(--accent-green);
}

.cost-line.negative {
    color: #c05050;
}

.card-efficiency {
    font-size: 1em;
    color: var(--accent-amber);
    font-weight: 600;
    position: relative;
    font-family: 'Share Tech Mono', 'Courier New', monospace;
}

.card-efficiency .efficiency-label {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s;
    position: absolute;
    bottom: 100%;
    right: 0;
    background-color: var(--bg-overlay);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    padding: 0.4em 0.6em;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 1;
    font-size: 0.75em;
    font-weight: normal;
    font-family: 'Saira Condensed', sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.03em;
}

.card-efficiency:hover .efficiency-label {
    opacity: 1;
    visibility: visible;
}

.card-skills {
    padding: 1em 1.5em;
    border-top: 1px solid var(--border-subtle);
}

.card-skills h3 {
    margin-bottom: 0.7em;
}

.card-items {
    padding: 1em 1.5em 1.5em;
    border-top: 1px solid var(--border-subtle);
}

.card-items h3 {
    margin-bottom: 0.7em;
}

.card-campaign {
    padding: 1em 1.5em;
    border-top: 1px solid var(--border-subtle);
    background: rgba(76, 175, 110, 0.08);
}

.card-campaign.unsustainable {
    background: rgba(204, 26, 26, 0.08);
}

.card-campaign h3 {
    margin-bottom: 0.7em;
}

.campaign-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55em;
}

.campaign-card-grid span {
    display: grid;
    gap: 0.1em;
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: 3px;
    padding: 0.45em 0.55em;
}

.campaign-card-grid b {
    color: var(--text-primary);
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    font-size: 0.9em;
}

.campaign-card-grid small {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.68em;
}

/* ============================================================
   SKILLS GRID
   ============================================================ */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6em;
    margin-bottom: 0;
}

.skill {
    display: flex;
    align-items: center;
    position: relative;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95em;
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: 3px;
    padding: 0.4em 0.6em;
    gap: 0.3em;
    transition: border-color 0.15s;
}

.skill:hover {
    border-color: var(--border-strong);
}

.skill svg {
    width: 1.4em;
    height: 1.4em;
    flex-shrink: 0;
}

.skill .skill-name {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--bg-overlay);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    padding: 0.4em 0.6em;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 1;
    font-weight: 600;
    font-size: 0.85em;
    font-family: 'Saira Condensed', sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.03em;
}

.trends-grid .skill .skill-name {
    left: 20%;
}

.skill:hover .skill-name {
    opacity: 1;
    visibility: visible;
}

/* ============================================================
   ITEMS GRID
   ============================================================ */
.items-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8em;
}

.gear-item, .consumable-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.3em;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    transition: transform 0.15s;
}

.gear-item:hover, .consumable-item:hover {
    transform: scale(1.05);
}

.quantity-label {
    font-size: 0.7em;
    font-weight: bold;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.65);
    padding: 2px 4px;
    border-radius: 3px;
    margin-top: 2px;
    white-space: nowrap;
}

.gear-item img, .consumable-item img {
    width: 90%;
    height: auto;
}

/* ============================================================
   TOOLTIP (global)
   ============================================================ */
.tooltip {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s;
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--bg-overlay);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    padding: 0.4em 0.6em;
    border-radius: 4px;
    white-space: normal;
    word-wrap: break-word;
    max-width: 220px;
    width: max-content;
    z-index: 10;
    font-size: 0.75em;
    font-weight: normal;
    pointer-events: none;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    font-family: 'Saira Condensed', sans-serif;
    letter-spacing: 0.03em;
}

.input-group:hover .tooltip,
.checkbox-wrapper:hover .tooltip,
.pill-wrapper:hover .tooltip,
.slider-container:hover .tooltip,
.filter-tab:hover .tooltip,
.optimize-btn:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

/* ============================================================
   MISC
   ============================================================ */
.subtitle {
    margin-top: 0.2em;
    color: var(--text-secondary);
    font-size: 0.7em;
}

.trend-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--accent-red);
    border-top: 2px solid var(--accent-red);
    border-radius: 0 0 5px 5px;
    padding: 1em;
    width: 33%;
}

.trends-grid {
    margin-top: 0.5em;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 1em;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1em;
}

th, td {
    border: 1px solid var(--border-strong);
    padding: 0.5em;
    text-align: left;
}

/* ============================================================
   FORM ROWS
   ============================================================ */
.build-parameters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    margin-top: 0.45em;
    padding: 0.75em 0 0.35em;
    border-bottom: 1px solid var(--border-subtle);
}

.build-parameters-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.build-parameters-header p {
    margin: 0.2em 0 0;
    color: var(--text-muted);
    font-size: 0.78em;
}

.import-profile-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.5em;
    background: var(--accent-red-dim);
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: background 0.15s, box-shadow 0.15s;
}

.import-profile-btn svg {
    width: 1.15em;
    height: 1.15em;
}

.import-profile-btn:hover {
    background: var(--accent-red);
    box-shadow: 0 0 10px var(--accent-red-glow);
}

.form-sliders-row {
    display: flex;
    gap: 0.8em;
    align-items: flex-end;
    margin-top: 0.5em;
}

.form-sliders-row .slider-container {
    flex: 1 1 180px;
    min-width: 150px;
}

/* ============================================================
   WARERA PROFILE IMPORT
   ============================================================ */
.profile-import-dialog {
    width: min(680px, calc(100% - 2em));
    max-height: min(88vh, 820px);
    padding: 0;
    overflow: hidden;
    background: var(--bg-overlay);
    border: 1px solid var(--border-strong);
    border-top: 2px solid var(--accent-red);
    border-radius: 0 0 6px 6px;
    color: var(--text-primary);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.72);
}

.profile-import-dialog::backdrop {
    background: rgba(4, 6, 5, 0.82);
    backdrop-filter: blur(3px);
}

.profile-import-shell {
    box-sizing: border-box;
    max-height: min(88vh, 820px);
    padding: 1.1em 1.2em 1.2em;
    overflow-y: auto;
}

.profile-import-header {
    display: flex;
    align-items: center;
    gap: 0.7em;
    padding-bottom: 0.8em;
    border-bottom: 1px solid var(--border-subtle);
}

.profile-import-header h2 {
    flex: 1 1 auto;
    margin: 0;
    color: var(--text-primary);
    font-size: 0.95em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.profile-import-back,
.profile-import-close {
    flex: 0 0 auto;
    padding: 0.35em 0.6em;
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text-secondary);
    font-size: 0.72em;
}

.profile-import-close {
    min-width: 32px;
    padding-inline: 0.4em;
    font-size: 0.85em;
}

.profile-import-back:hover,
.profile-import-close:hover {
    border-color: var(--accent-red);
    color: var(--text-primary);
}

.profile-import-intro,
.profile-import-always {
    margin: 0.85em 0;
    color: var(--text-secondary);
    font-size: 0.83em;
    line-height: 1.45;
}

.profile-import-always {
    margin: 0.75em 0;
    padding: 0.55em 0.7em;
    background: var(--bg-surface);
    border-left: 2px solid var(--accent-amber);
}

.profile-import-always strong {
    color: var(--text-primary);
}

.profile-import-search-label {
    display: block;
    margin-bottom: 0.3em;
    color: var(--text-secondary);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.profile-import-search {
    box-sizing: border-box;
    width: 100%;
    padding: 0.65em 0.75em;
    background: var(--bg-base);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    font-size: 0.85em;
    outline: none;
}

.profile-import-search:focus {
    border-color: var(--accent-red);
    box-shadow: 0 0 0 2px var(--accent-red-glow);
}

.profile-import-status {
    min-height: 1.2em;
    margin: 0.55em 0;
    color: var(--text-muted);
    font-size: 0.76em;
    line-height: 1.35;
}

.profile-import-error {
    color: #ef8b8b;
}

.profile-import-results {
    display: grid;
    gap: 0.35em;
    max-height: 330px;
    overflow-y: auto;
}

.profile-import-recent-label {
    margin: 0.35em 0 0.1em;
    color: var(--text-muted);
    font-size: 0.65em;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.profile-import-result {
    display: flex;
    align-items: center;
    gap: 0.7em;
    width: 100%;
    padding: 0.55em 0.65em;
    background: var(--bg-surface);
    border-color: var(--border-subtle);
    text-align: left;
    text-transform: none;
    transition: border-color 0.15s, background 0.15s;
}

.profile-import-result:hover,
.profile-import-result:focus-visible {
    background: var(--bg-raised);
    border-color: var(--accent-red);
}

.profile-import-result-avatar,
.profile-import-result-placeholder {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    object-fit: cover;
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
}

.profile-import-result-placeholder {
    display: grid;
    place-items: center;
    color: var(--text-muted);
    font-weight: 700;
}

.profile-import-result-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-import-result-level {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    font-size: 0.78em;
}

.profile-import-player {
    display: flex;
    align-items: center;
    gap: 0.75em;
    margin: 0.95em 0 0.75em;
}

.profile-import-avatar,
.profile-import-avatar-placeholder {
    width: 48px;
    height: 48px;
    object-fit: cover;
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
}

.profile-import-avatar-placeholder {
    display: grid;
    place-items: center;
    color: var(--accent-amber);
    font-size: 1.2em;
    font-weight: 700;
}

.profile-import-result-avatar[hidden],
.profile-import-result-placeholder[hidden],
.profile-import-avatar[hidden],
.profile-import-avatar-placeholder[hidden] {
    display: none !important;
}

.profile-import-player-copy {
    display: grid;
    gap: 0.15em;
}

.profile-import-player-copy strong {
    font-size: 1.05em;
    letter-spacing: 0.05em;
}

.profile-import-player-copy span {
    color: var(--text-muted);
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    font-size: 0.75em;
}

.profile-import-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5em;
}

.profile-import-summary span {
    display: grid;
    gap: 0.15em;
    padding: 0.65em 0.75em;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
}

.profile-import-summary small {
    color: var(--text-muted);
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.profile-import-summary b {
    color: var(--accent-green);
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    font-size: 1em;
}

.profile-import-options {
    display: grid;
    gap: 0.55em;
}

.profile-import-option {
    display: flex;
    align-items: flex-start;
    gap: 0.65em;
    padding: 0.65em 0.7em;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
}

.profile-import-option:has(input:checked) {
    border-color: var(--accent-amber);
}

.profile-import-option:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.55;
}

.profile-import-option input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0.15em 0 0;
    accent-color: var(--accent-red);
}

.profile-import-option span {
    display: grid;
    gap: 0.12em;
}

.profile-import-option b {
    color: var(--text-primary);
    font-size: 0.82em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.profile-import-option small {
    color: var(--text-muted);
    font-size: 0.74em;
    line-height: 1.3;
}

.profile-import-skills,
.profile-import-loadout {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0.3em;
    padding: 0.55em;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
}

.profile-import-skills[hidden],
.profile-import-loadout[hidden] {
    display: none;
}

.profile-import-loadout {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.profile-import-skill,
.profile-import-item {
    display: grid;
    min-width: 0;
    justify-items: center;
    gap: 0.25em;
}

.profile-import-skill small,
.profile-import-item small {
    max-width: 100%;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.58em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.profile-import-skill-visual,
.profile-import-item-visual {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 50px;
    padding: 0.25em;
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    font-size: 0.72em;
    font-weight: 700;
}

.profile-import-skill-visual svg {
    width: 1.55em;
    height: 1.55em;
}

.profile-import-item-visual img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.profile-import-item-visual.is-unknown {
    color: var(--text-muted);
    font-size: 1.1em;
}

.profile-import-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5em;
    margin-top: 0.85em;
}

.profile-import-cancel {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text-secondary);
}

.profile-import-apply {
    background: var(--accent-red-dim);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.profile-import-cancel:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.profile-import-apply:hover {
    background: var(--accent-red);
    box-shadow: 0 0 10px var(--accent-red-glow);
}

.form-controls-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8em;
    align-items: flex-start;
    margin-top: 0.8em;
}

.form-controls-row .input-group {
    flex: 0 0 120px;
    min-width: 100px;
}

.form-controls-row .checkbox-wrapper {
    flex: 0 0 auto;
}

.form-controls-row .pill-wrapper {
    flex: 1 1 160px;
    min-width: 150px;
    max-width: 260px;
}

.advanced-config {
    margin-top: 0.6em;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    background: var(--bg-base);
}

.advanced-config summary {
    cursor: pointer;
    padding: 0.65em 0.8em;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.85em;
    letter-spacing: 0.1em;
    user-select: none;
}

.advanced-config summary:hover {
    color: var(--text-primary);
}

.advanced-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8em;
    padding: 0 0.8em 0.8em;
    border-top: 1px solid var(--border-subtle);
}

.advanced-controls .input-group {
    flex: 0 0 180px;
    min-width: 160px;
}

/* ============================================================
   PINNED BUILD CONSTRAINTS
   ============================================================ */
.constraints-panel {
    display: grid;
    gap: 0.8em;
    margin-top: 0.7em;
    padding: 0.9em;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-left: 2px solid var(--accent-amber);
    border-radius: 4px;
}

.constraints-section {
    min-width: 0;
    padding: 0.8em;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
}

.constraints-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8em;
    margin-bottom: 0.75em;
}

.constraints-header h3 {
    align-items: baseline;
    gap: 0.55em;
    margin: 0;
    color: var(--text-primary);
    font-size: 0.8em;
}

.constraints-header p {
    margin: 0.3em 0 0;
    color: var(--text-muted);
    font-size: 0.78em;
    line-height: 1.35;
}

.constraints-header p strong {
    color: var(--text-secondary);
}

.skill-pin-budget {
    color: var(--accent-green);
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    font-size: 0.9em;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.skill-pin-budget.over {
    color: var(--accent-red);
}

.constraint-skills-grid,
.constraint-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
    gap: 0.55em;
}

.pin-slot {
    display: grid;
    gap: 0.3em;
    min-width: 0;
}

.pin-slot-label {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.1;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.pin-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 62px;
    overflow: hidden;
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.pin-tile:hover,
.pin-tile:focus-within {
    border-color: var(--accent-amber);
    box-shadow: 0 0 0 2px var(--accent-amber-glow);
}

.pin-tile.is-pinned {
    background: var(--bg-overlay);
    border-color: var(--accent-amber);
}

.pin-tile select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.pin-tile-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.18em;
    width: 100%;
    height: 100%;
    padding: 0.35em;
    box-sizing: border-box;
    pointer-events: none;
}

.pin-tile-display svg {
    width: 1.65em;
    height: 1.65em;
}

.pin-tile-display img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.pin-empty-icon {
    color: var(--text-muted);
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    font-size: 1.45em;
    line-height: 1;
}

.pin-tile-value {
    max-width: 100%;
    overflow: hidden;
    color: var(--text-primary);
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    font-size: 0.72em;
    font-weight: 700;
    line-height: 1.1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.pin-tile:not(.is-pinned) .pin-tile-value {
    color: var(--text-muted);
}

.reset-pins-btn,
.pin-preset-controls button,
.pin-preset-controls select {
    min-height: 30px;
    padding: 0.3em 0.65em;
    background: var(--bg-raised);
    border-color: var(--border-strong);
    color: var(--text-secondary);
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.reset-pins-btn {
    margin-top: 0.65em;
}

.reset-pins-btn:hover,
.pin-preset-controls button:hover,
.pin-preset-controls select:hover {
    border-color: var(--accent-red);
    color: var(--text-primary);
}

.pin-preset-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35em;
}

.pin-preset-controls select {
    max-width: 130px;
    text-transform: none;
}

.pin-preset-delete {
    padding-inline: 0.55em !important;
}

.pin-status {
    display: none;
    grid-column: 1 / -1;
    margin: 0;
    color: var(--accent-green);
    font-size: 0.78em;
    letter-spacing: 0.04em;
}

.pin-status.visible {
    display: block;
}

.pin-status.error {
    color: var(--accent-red);
}

.pin-full-build-btn {
    width: 100%;
    padding: 0.7em 1em;
    background: var(--bg-raised);
    border: 0;
    border-top: 1px solid var(--border-strong);
    border-radius: 0 0 4px 4px;
    color: var(--text-secondary);
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.12em;
    position: relative;
}

.pin-full-build-btn:hover {
    background: var(--accent-red-dim);
    color: var(--text-primary);
}

@media (min-width: 1600px) {
    .constraints-panel {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* ============================================================
   DEV MODE
   ============================================================ */
#dev-mode-wrapper {
    flex: 1 1 100%;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-left: 2px solid var(--accent-red-dim);
    border-radius: 4px;
    padding: 0.7em 0.9em;
}

.dev-mode-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5em;
}

.dev-mode-title {
    color: var(--accent-red);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1em;
    letter-spacing: 0.1em;
}

.dev-toggle {
    position: relative;
    width: 38px;
    height: 22px;
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    border-radius: 11px;
    cursor: pointer;
    transition: background 0.25s;
    flex-shrink: 0;
}

.dev-toggle.active {
    background: var(--accent-red);
    border-color: var(--accent-red);
}

.dev-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    background: var(--text-secondary);
    border-radius: 50%;
    transition: left 0.25s;
}

.dev-toggle.active .dev-toggle-knob {
    left: 19px;
    background: #fff;
}

.dev-mode-desc {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.dev-mode-desc b {
    color: var(--text-secondary);
}

.dev-mode-desc code {
    font-family: 'Share Tech Mono', monospace;
    color: var(--accent-green);
    background: var(--bg-base);
    padding: 0 3px;
    border-radius: 2px;
    border: 1px solid var(--border-subtle);
}

/* ============================================================
   INPUT GROUP
   ============================================================ */
.input-group {
    display: flex;
    flex-direction: column;
    position: relative;
}

.input-group label {
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.85em;
    font-weight: 600;
    margin-bottom: 0.3em;
    letter-spacing: 0.1em;
}

.input-group select,
.input-group input[type="password"],
.input-group input[type="number"],
.input-group textarea {
    background-color: var(--bg-raised);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    padding: 0 0.5em;
    cursor: pointer;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 1em;
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-group select:focus,
.input-group input[type="password"]:focus,
.input-group input[type="number"]:focus,
.input-group textarea:focus {
    outline: none;
    border-color: var(--accent-red);
    box-shadow: 0 0 0 2px var(--accent-red-glow);
}

.input-group input[type="password"],
.input-group input[type="number"],
.input-group textarea {
    cursor: text;
    text-transform: none;
}

.input-group textarea {
    height: 78px;
    padding: 0.55em 0.65em;
    resize: vertical;
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    font-size: 0.82em;
    line-height: 1.35;
}

/* ============================================================
   PILL TOGGLE
   ============================================================ */
.pill-wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
}

.pill-wrapper label {
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.85em;
    font-weight: 600;
    margin-bottom: 0.3em;
    letter-spacing: 0.1em;
}

.pill-toggle {
    position: relative;
    width: 100%;
    height: 40px;
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    overflow: hidden;
}

.pill-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(50% - 4px);
    height: 34px;
    background: var(--bg-overlay);
    border-radius: 3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.pill-toggle.active .pill-slider {
    left: calc(50% + 2px);
    background: var(--accent-red-dim);
    box-shadow: 0 0 8px var(--accent-red-glow);
}

.pill-label {
    flex: 1;
    text-align: center;
    font-size: 0.9em;
    font-weight: 700;
    z-index: 2;
    transition: color 0.3s;
    pointer-events: none;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pill-toggle.active .pill-label.off {
    color: var(--text-muted);
}

.pill-toggle:not(.active) .pill-label.on {
    color: var(--text-muted);
}

/* ============================================================
   BUTTONS (global)
   ============================================================ */
select, button {
    background-color: var(--bg-raised);
    border: 1px solid var(--accent-red);
    color: var(--text-primary);
    padding: 0.5em 1em;
    cursor: pointer;
    border-radius: 4px;
    text-transform: uppercase;
    margin: 0;
    font-family: 'Saira Condensed', sans-serif;
}

/* ============================================================
   OPTIMIZE BUTTONS
   ============================================================ */
.optimize-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    flex: 1;
    background: var(--accent-red-dim);
    border: 1px solid var(--accent-red);
    color: var(--text-primary);
    font-family: 'Saira Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.1em;
    letter-spacing: 0.15em;
    padding: 0.9em 2em;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}

.optimize-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
    pointer-events: none;
}

.optimize-btn:hover {
    background: var(--accent-red);
    box-shadow: 0 0 16px var(--accent-red-glow);
}

.optimize-btn:active {
    transform: scale(0.98);
}

.optimize-btn:disabled {
    background: var(--bg-raised);
    border-color: var(--border-strong);
    color: var(--text-muted);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* ============================================================
   OVERFLOW MULT / STEP INPUTS
   ============================================================ */
#overflow-mult-wrapper {
    display: flex;
    gap: 0.5em;
    align-items: flex-end;
}

.step-input {
    width: 3.5em;
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    border-radius: 4px;
    padding: 0.2em 0.4em;
    text-align: center;
    font-family: 'Share Tech Mono', monospace;
    font-size: 1em;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.step-input::-webkit-outer-spin-button,
.step-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.step-input[type=number] { -moz-appearance: textfield; }

.step-input:focus {
    outline: none;
    border-color: var(--accent-red);
    box-shadow: 0 0 0 2px var(--accent-red-glow);
}

.step-input-row {
    display: flex;
    gap: 0.5em;
    align-items: center;
    margin-top: 0.3em;
}

.step-input-row:first-child { margin-top: 0; }

.step-input-label {
    font-size: 0.85em;
    color: var(--text-secondary);
    white-space: nowrap;
}

.dev-steps-panel {
    display: none;
    margin-top: 0.4em;
}

/* ============================================================
   FILTER ROW
   ============================================================ */
.filter-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.8em;
    align-items: flex-end;
    margin-top: 0.5em;
}

.filter-tabs-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    flex: 0 0 auto;
}

.filter-section-label {
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.85em;
    letter-spacing: 0.1em;
}

.filter-tabs {
    display: flex;
    gap: 0.4em;
    flex-wrap: wrap;
}

.filter-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.5em;
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.85em;
    cursor: pointer;
    margin: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    position: relative;
    overflow: visible;
    font-family: 'Saira Condensed', sans-serif;
    letter-spacing: 0.08em;
}

.filter-tab.active {
    background: var(--accent-red-dim);
    border-color: var(--accent-red);
    color: var(--text-primary);
}

.filter-tab:hover:not(.active) {
    border-color: var(--accent-red);
    color: var(--text-primary);
}

.filter-apply-btn {
    flex: 0 0 auto;
    align-self: flex-end;
    padding: 0.5em 1.2em;
    background: var(--accent-red-dim);
    border: 1px solid var(--accent-red);
    color: var(--text-primary);
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.9em;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    font-family: 'Saira Condensed', sans-serif;
}

.filter-apply-btn:hover {
    background: var(--accent-red);
    box-shadow: 0 0 10px var(--accent-red-glow);
}

.filter-slider-wrapper {
    flex: 0 1 220px;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}

.filter-display {
    min-width: 60px;
    cursor: default;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .form-controls-row .pill-wrapper { flex: 1 1 140px; max-width: none; }
    .filter-row { flex-wrap: wrap; }
    .filter-tabs { flex-wrap: wrap; }
}

@media (max-width: 768px) {
    .container { padding: 0 0.75em 2em; }
    .site-header { flex-direction: column; padding: 1.5em 0 1em; }
    .site-credit { align-items: stretch; text-align: left; width: 100%; }
    h1 { font-size: 1.6em; }

    .top-section {
        flex-direction: column;
        gap: 1em;
    }

    .trends {
        width: 100%;
        flex-direction: column;
    }

    .trend-card {
        width: 95%;
    }

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

    .form-sliders-row { flex-direction: column; align-items: stretch; }
    .api-key-controls { grid-template-columns: 1fr 1fr; }
    .api-key-field { grid-column: 1 / -1; }
    .form-sliders-row .slider-container { flex: 1 1 auto; min-width: 0; }
    .build-parameters-header { align-items: flex-start; }
    .profile-import-skills { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .profile-import-loadout { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .campaign-header { flex-direction: column; align-items: stretch; }
    .campaign-link { flex: 1 1 auto; width: 100%; box-sizing: border-box; text-align: center; }
    .eco-profile-card { flex-wrap: wrap; }
    .eco-profile-copy { min-width: calc(100% - 58px); }
    .profile-action-btn { flex: 1 1 100%; }
    .war-mode-picker { grid-template-columns: 1fr; }
    .war-custom-skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .war-company-toolbar { flex-direction: column; align-items: stretch; }
    .war-company-toolbar .input-group { flex: 1 1 auto; }
    .form-controls-row .pill-wrapper { flex: 1 1 100%; max-width: none; }
    .advanced-controls .input-group { flex: 1 1 100%; }
    .constraints-header { flex-direction: column; }
    .pin-preset-controls { justify-content: flex-start; width: 100%; }
    .constraint-skills-grid,
    .constraint-items-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .filter-slider-wrapper { flex: 1 1 100%; }
    .credit-links { justify-content: stretch; }
    .credit-links a { flex: 1 1 auto; text-align: center; }
    #results { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

@media (max-width: 480px) {
    .api-key-card-head { align-items: flex-start; }
    .api-key-card-title { align-items: flex-start; }
    .build-parameters-header { flex-direction: column; }
    .import-profile-btn { width: 100%; justify-content: center; }
    .profile-import-dialog { width: calc(100% - 1em); }
    .profile-import-shell { padding: 0.9em; }
    .profile-import-header { align-items: flex-start; }
    .profile-import-summary { grid-template-columns: 1fr; }
    .profile-import-skills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .profile-import-loadout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .profile-import-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .form-sliders-row .slider-container { flex: 1 1 100%; }
    .form-controls-row .input-group,
    .form-controls-row .checkbox-wrapper,
    .form-controls-row .pill-wrapper { flex: 1 1 100%; }
    .filter-tab { flex: 1 1 40%; }
    #results { grid-template-columns: 1fr; }
    .btn-row { flex-direction: column; }
    .credit-links { flex-direction: column; }
    .constraint-skills-grid,
    .constraint-items-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .war-custom-skills,
    .war-company-list { grid-template-columns: 1fr; }
}

/* ============================================================
   OPTIMIZER PROGRESS
   ============================================================ */
.optimizer-progress {
    grid-column: 1 / -1;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-top: 2px solid var(--accent-red);
    border-radius: 0 0 6px 6px;
    padding: 1em 1.2em;
}

.progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    color: var(--text-secondary);
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    font-size: 0.9em;
    text-transform: uppercase;
}

.progress-track {
    height: 8px;
    margin-top: 0.8em;
    overflow: hidden;
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-red-dim), var(--accent-red), var(--accent-amber));
    transition: width 0.18s ease;
}

.progress-fill.indeterminate {
    width: 35%;
    animation: progress-slide 1s ease-in-out infinite alternate;
}

.progress-note {
    margin-top: 0.5em;
    color: var(--text-muted);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

@keyframes progress-slide {
    from { transform: translateX(-60%); }
    to { transform: translateX(230%); }
}

/* ============================================================
   SPINNER
   ============================================================ */
.spinner {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spinner-border 0.7s linear infinite;
    vertical-align: middle;
}

@keyframes spinner-border {
    to { transform: rotate(360deg); }
}

/* ============================================================
   SKILL SVG COLORS
   ============================================================ */
#skill-svg-1 { color: #edb59e; }
#skill-svg-2 { color: #edb59e; }
#skill-svg-3 { color: #ed8b8b; }
#skill-svg-4 { color: #ed8b8b; }
#skill-svg-5 { color: #9dadbb; }
#skill-svg-6 { color: #9dadbb; }
#skill-svg-7 { color: #2f804d; }
#skill-svg-8 { color: #974035; }
#skill-svg-9 { color: #f0c040; }

/* ============================================================
   SLIDERS
   ============================================================ */
.slider-container {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    position: relative;
}

.slider-container.small .slider-label {
    font-size: 0.9em;
}

.slider-container.small .slider-input {
    width: 50px;
    margin-left: 0.5em;
    padding: 0.1em;
    font-size: 0.9em;
}

.slider-label {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0.2em;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.slider-input {
    width: 80px;
    background-color: var(--bg-raised);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    border-radius: 4px;
    padding: 0.25em;
    text-align: center;
    font-size: 1em;
    font-weight: bold;
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    margin-left: 0.8em;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: linear-gradient(to right, var(--accent-red) 0%, var(--bg-raised) 0%);
    outline: none;
    opacity: 1;
    transition: opacity 0.2s;
    border-radius: 3px;
    border: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--accent-red);
    cursor: pointer;
    border-radius: 50%;
    transition: box-shadow 0.15s;
}

.slider::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 4px var(--accent-red-glow);
}

.slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--accent-red);
    cursor: pointer;
    border-radius: 50%;
    border: none;
    transition: box-shadow 0.15s;
}

.slider-input::-webkit-outer-spin-button,
.slider-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.slider-input[type=number] {
    -moz-appearance: textfield;
}

.slider-input:focus {
    outline: none;
    border-color: var(--accent-red);
    box-shadow: 0 0 0 2px var(--accent-red-glow);
}

/* ============================================================
   CUSTOM CHECKBOX
   ============================================================ */
.checkbox-wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
}

.checkbox-wrapper input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox-wrapper label {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0.3em;
    cursor: pointer;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.85em;
    font-weight: 600;
    user-select: none;
    letter-spacing: 0.1em;
}

.checkbox-wrapper label::after {
    content: '';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    text-align: center;
    line-height: 40px;
    font-size: 1.4em;
    box-sizing: border-box;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.checkbox-wrapper input[type="checkbox"]:checked + label::after {
    content: '✓';
    background: var(--accent-red-dim);
    border-color: var(--accent-red);
    color: #fff;
    box-shadow: 0 0 8px var(--accent-red-glow);
}

/* ============================================================
   BUTTON ROW
   ============================================================ */
.btn-row {
    display: flex;
    gap: 0.8em;
    margin-top: 0.5em;
}

/* ============================================================
   SPECIAL CARD STATES
   ============================================================ */
.max-damage-card {
    border-color: var(--gold-border);
    border-top-color: var(--gold-border);
    box-shadow: 0 0 0 1px var(--gold-border), 0 0 20px var(--gold-glow);
}

.highest-damage-card {
    border-color: var(--orange-border);
    border-top-color: var(--orange-border);
    box-shadow: 0 0 0 1px var(--orange-border), 0 0 20px var(--orange-glow);
}

.recommended-card {
    border-color: var(--accent-green);
    border-top-color: var(--accent-green);
    box-shadow: 0 0 0 1px rgba(76, 175, 110, 0.65), 0 0 20px rgba(76, 175, 110, 0.25);
}

/* ============================================================
   VIEW TOGGLE
   ============================================================ */
#view-controls {
    display: flex;
    gap: 0;
    margin-bottom: 1.2em;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    width: fit-content;
    overflow: hidden;
}

.view-btn {
    font-size: 0.8em;
    padding: 0.4em 1.2em;
    margin: 0;
    opacity: 1;
    border: none;
    border-radius: 0;
    background: var(--bg-surface);
    color: var(--text-secondary);
    letter-spacing: 0.1em;
    transition: background 0.15s, color 0.15s;
    font-family: 'Saira Condensed', sans-serif;
    font-weight: 600;
}

.view-btn + .view-btn {
    border-left: 1px solid var(--border-strong);
}

.view-btn.active {
    background: var(--accent-red);
    color: var(--text-primary);
}

.view-btn:hover:not(.active) {
    background: var(--bg-raised);
    color: var(--text-primary);
}

/* ============================================================
   TABLE VIEW
   ============================================================ */
.table-wrapper {
    overflow-x: auto;
    grid-column: 1 / -1;
}

.builds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em;
}

.builds-table th {
    background-color: var(--bg-base);
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.72em;
    padding: 0.5em 0.6em;
    white-space: nowrap;
    border: 1px solid var(--border-subtle);
    letter-spacing: 0.1em;
}

.sortable-th {
    cursor: pointer;
    user-select: none;
}

.sortable-th:hover {
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

.sort-indicator {
    margin-left: 0.3em;
    font-size: 0.75em;
    opacity: 0;
}

.sort-indicator-visible {
    opacity: 1;
}

.sort-active {
    background-color: var(--bg-surface);
    color: var(--accent-red);
}

.builds-table td {
    padding: 0.4em 0.6em;
    border: 1px solid var(--border-subtle);
    text-align: center;
    white-space: nowrap;
}

.builds-table .td-damage {
    color: var(--accent-red);
    font-weight: bold;
    font-family: 'Share Tech Mono', monospace;
}

.builds-table .td-cost,
.builds-table .td-eff,
.builds-table .td-campaign {
    color: var(--accent-amber);
    font-weight: bold;
    font-family: 'Share Tech Mono', monospace;
}

.builds-table .td-campaign.over-budget {
    color: var(--accent-red);
    background-color: rgba(230, 57, 70, 0.14);
}

.builds-table .td-daily-budget {
    min-width: 18rem;
    max-width: 30rem;
    white-space: normal;
}

.daily-budget-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: center;
}

.daily-budget-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    min-width: 4.8rem;
    padding: 0.25rem 0.35rem;
    border: 1px solid rgba(67, 160, 71, 0.55);
    background: rgba(67, 160, 71, 0.12);
    color: var(--accent-green);
    border-radius: 4px;
    font-size: 0.82em;
    line-height: 1.15;
}

.daily-budget-chip small {
    color: var(--text-secondary);
    font-size: 0.78em;
}

.daily-budget-chip.over-budget {
    border-color: rgba(230, 57, 70, 0.7);
    background: rgba(230, 57, 70, 0.16);
    color: var(--accent-red);
}

.builds-table .td-gear {
    font-size: 0.8em;
    color: #fff;
}

.builds-table tr:hover td {
    background-color: var(--bg-raised);
}

.builds-table tr:hover td.over-budget {
    background-color: rgba(230, 57, 70, 0.18);
}

.builds-table tr.max-damage-card td {
    border-color: var(--gold-border);
}

.builds-table tr.highest-damage-card td {
    border-color: var(--orange-border);
}

.builds-table tr.recommended-card td {
    border-color: var(--accent-green);
}