:root {
    --bg0: #02040a;
    --bg1: #07111d;
    --panel: rgba(8, 18, 30, 0.74);
    --panel-strong: rgba(10, 24, 40, 0.90);
    --line: rgba(88, 221, 255, 0.20);
    --line-hot: rgba(88, 221, 255, 0.55);
    --text: #edfaff;
    --muted: #99b7c7;
    --cyan: #31e9ff;
    --blue: #6ca8ff;
    --violet: #a36bff;
    --amber: #ffb24d;
    --red: #ff6464;
    --green: #7dffb4;
    --shadow: 0 26px 90px rgba(0, 0, 0, 0.58);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    background:
        radial-gradient(circle at 12% 8%, rgba(49, 233, 255, 0.28), transparent 26rem),
        radial-gradient(circle at 82% 12%, rgba(163, 107, 255, 0.20), transparent 30rem),
        radial-gradient(circle at 60% 100%, rgba(255, 178, 77, 0.12), transparent 34rem),
        linear-gradient(135deg, var(--bg0) 0%, var(--bg1) 48%, #10131f 100%);
    overflow-x: hidden;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body::before {
    background-image:
        linear-gradient(rgba(49,233,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(49,233,255,0.045) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,.35) 62%, transparent 100%);
}

body::after {
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.055) 48%, transparent 52%);
    transform: translateX(-75%);
    animation: scanSweep 10s linear infinite;
    opacity: .42;
}

@keyframes scanSweep {
    0% { transform: translateX(-85%); }
    100% { transform: translateX(85%); }
}

.page-shell {
    width: min(1220px, calc(100% - 34px));
    margin: 0 auto;
    padding: 34px 0 54px;
    position: relative;
    z-index: 1;
}

.hero-card,
.tool-card,
.results-card {
    border: 1px solid var(--line);
    background: linear-gradient(145deg, rgba(10, 24, 40, 0.88), rgba(4, 11, 19, 0.72));
    border-radius: 28px;
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(18px);
    position: relative;
    overflow: hidden;
}

.hero-card::before,
.tool-card::before,
.results-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(49,233,255,.55), transparent 34%, rgba(255,178,77,.28), transparent 74%, rgba(163,107,255,.35));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.hero-card {
    min-height: 250px;
    padding: clamp(26px, 4vw, 46px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.hero-copy { max-width: 790px; position: relative; z-index: 2; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    color: var(--amber);
    text-transform: uppercase;
    letter-spacing: 0.17em;
    font-size: 0.76rem;
    font-weight: 900;
}

.eyebrow::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 18px var(--green);
}

h1, h2, h3 { margin: 0; line-height: 1.05; }
h1 {
    max-width: 850px;
    font-size: clamp(2.15rem, 5vw, 5.2rem);
    letter-spacing: -0.065em;
    text-shadow: 0 0 34px rgba(49,233,255,0.18);
}
h2 { font-size: 1.28rem; letter-spacing: -0.025em; }
h3 { color: var(--cyan); }

.subtext {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 1.08rem;
    max-width: 680px;
    line-height: 1.55;
}

.hero-orb {
    flex: 0 0 auto;
    width: clamp(190px, 23vw, 295px);
    height: clamp(190px, 23vw, 295px);
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 31%, rgba(255,255,255,.95) 0 .35rem, transparent .43rem),
        radial-gradient(circle at 50% 50%, rgba(49,233,255,.34), rgba(108,168,255,.13) 46%, transparent 67%),
        conic-gradient(from 90deg, rgba(49,233,255,.16), rgba(163,107,255,.22), rgba(255,178,77,.10), rgba(49,233,255,.16));
    border: 1px solid rgba(49,233,255,.34);
    box-shadow: 0 0 78px rgba(49,233,255,.24), inset 0 0 46px rgba(49,233,255,.12);
    position: relative;
}

.hero-orb::before,
.hero-orb::after {
    content: "";
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    border: 1px solid rgba(49,233,255,.34);
}
.hero-orb::after {
    inset: 34%;
    border-color: rgba(255,178,77,.28);
    box-shadow: 0 0 24px rgba(255,178,77,.18);
}

.tool-card,
.results-card { margin-top: 22px; padding: clamp(20px, 3vw, 28px); }

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.pill,
.muted {
    color: var(--muted);
    font-size: 0.88rem;
}

.pill {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 13px;
    color: var(--cyan);
    background: rgba(49, 233, 255, 0.075);
    box-shadow: inset 0 0 20px rgba(49,233,255,.04);
    white-space: nowrap;
}

.control-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1.7fr) minmax(190px, .65fr) minmax(150px, .55fr);
    gap: 16px;
    align-items: start;
    position: relative;
    z-index: 1;
}

.field { display: grid; gap: 9px; align-content: start; }
.field input,
.field select { align-self: start; }
.field span {
    color: #d8f5ff;
    font-size: .91rem;
    font-weight: 800;
    letter-spacing: .02em;
}

select,
input {
    width: 100%;
    min-height: 50px;
    border: 1px solid var(--line-hot);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.38);
    color: var(--text);
    padding: 0 15px;
    font-size: 1rem;
    outline: none;
    box-shadow: inset 0 0 24px rgba(49,233,255,.035);
}

select:focus,
input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 4px rgba(49, 233, 255, 0.13), inset 0 0 24px rgba(49,233,255,.06);
}

option { background: #0b1420; color: var(--text); }

.button-row {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.generated-url-field {
    grid-column: 1 / -1;
}

.generated-url-field input {
    font-family: Consolas, "Courier New", monospace;
    font-size: .9rem;
    color: var(--green);
}

.glass-button {
    border: 1px solid var(--line-hot);
    border-radius: 16px;
    padding: 13px 20px;
    background: linear-gradient(135deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025));
    color: var(--text);
    font-weight: 900;
    font-size: .96rem;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.glass-button.primary {
    background: linear-gradient(135deg, rgba(49,233,255,0.28), rgba(108,168,255,0.14) 55%, rgba(163,107,255,0.12));
    color: #ffffff;
    box-shadow: 0 0 30px rgba(49,233,255,0.12), inset 0 1px 0 rgba(255,255,255,.13);
}

.glass-button:hover {
    transform: translateY(-2px);
    border-color: var(--cyan);
    box-shadow: 0 0 26px rgba(49,233,255,0.22), inset 0 1px 0 rgba(255,255,255,.12);
}

.results-empty,
.loading {
    border: 1px dashed rgba(49,233,255,.28);
    border-radius: 18px;
    padding: 24px;
    color: var(--muted);
    background: rgba(0,0,0,.24);
    position: relative;
    z-index: 1;
}

.loading::before {
    content: "◌";
    display: inline-block;
    margin-right: 10px;
    color: var(--cyan);
    animation: spin 1.1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.notice {
    border-radius: 18px;
    padding: 15px 17px;
    margin-top: 18px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.06);
    position: relative;
    z-index: 1;
}
.notice.error {
    color: #ffe3e3;
    border-color: rgba(255,100,100,.48);
    background: rgba(255,100,100,.11);
}

#results,
#reactions { position: relative; z-index: 1; }

#results table,
#reactions table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid rgba(49,233,255,.15);
    border-radius: 18px;
    background: rgba(0, 0, 0, .27);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

#results th,
#results td,
#reactions th,
#reactions td {
    padding: 13px 15px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    text-align: left;
}

#results th,
#reactions th {
    color: var(--cyan);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    background: linear-gradient(135deg, rgba(49,233,255,.12), rgba(108,168,255,.055));
}

#results tr:last-child td,
#reactions tr:last-child td { border-bottom: 0; }
#results tr:hover td,
#reactions tr:hover td { background: rgba(49,233,255,.045); }

#results ul,
#reactions ul {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
#results li,
#reactions li {
    margin: 8px 0;
    padding: 10px 12px;
    border: 1px solid rgba(49,233,255,.13);
    border-radius: 14px;
    background: rgba(255,255,255,.035);
}

.raw-material {
    color: var(--amber);
    font-weight: 900;
    text-shadow: 0 0 12px rgba(255,178,77,.20);
}
.intermediate-product {
    color: var(--cyan);
    font-weight: 900;
    text-shadow: 0 0 12px rgba(49,233,255,.18);
}

a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }

@media (max-width: 860px) {
    .page-shell { width: min(100% - 20px, 1220px); padding-top: 18px; }
    .hero-card { padding: 24px; }
    .hero-orb { display: none; }
    .control-grid { grid-template-columns: 1fr; }
    .section-heading { align-items: flex-start; flex-direction: column; }
    .button-row { flex-direction: column; }
    .glass-button { width: 100%; }
}


.results-actions {
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 18px;
    position: relative;
    z-index: 1;
}

.action-status {
    color: var(--muted);
    font-size: .9rem;
    min-height: 1.2em;
}

.error-text { color: var(--red) !important; }

.appraisal-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 12px;
    margin: 0 0 18px;
    position: relative;
    z-index: 1;
}

.appraisal-summary div {
    border: 1px solid rgba(49,233,255,.16);
    border-radius: 18px;
    background: rgba(0,0,0,.25);
    padding: 15px;
}

.appraisal-summary span {
    display: block;
    color: var(--muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    margin-bottom: 8px;
}

.appraisal-summary strong {
    color: var(--green);
    font-size: 1.05rem;
}

#appraisalPanel table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid rgba(49,233,255,.15);
    border-radius: 18px;
    background: rgba(0, 0, 0, .27);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

#appraisalPanel th,
#appraisalPanel td {
    padding: 13px 15px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    text-align: left;
}

#appraisalPanel th {
    color: var(--cyan);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    background: linear-gradient(135deg, rgba(49,233,255,.12), rgba(108,168,255,.055));
}

#appraisalPanel tr:last-child td { border-bottom: 0; }
#appraisalPanel tr:hover td { background: rgba(49,233,255,.045); }

@media (max-width: 860px) {
    .appraisal-summary { grid-template-columns: 1fr; }
}

.checkline {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    border: 1px solid var(--line-hot);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.38);
    color: var(--text);
    padding: 0 15px;
    font-weight: 800;
}

.checkline input {
    width: auto;
    min-height: auto;
    accent-color: var(--cyan);
}

.field-hint.matched { color: var(--green); }

.notice.warn {
    color: #fff3d6;
    border-color: rgba(255,178,77,.45);
    background: rgba(255,178,77,.10);
}

.build-context,
.industry-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin: 0 0 20px;
    position: relative;
    z-index: 1;
}

.build-context div,
.industry-summary div {
    border: 1px solid rgba(49,233,255,.16);
    border-radius: 18px;
    background: rgba(0,0,0,.25);
    padding: 14px 15px;
}

.build-context span,
.industry-summary span {
    display: block;
    color: var(--muted);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    margin-bottom: 8px;
}

.build-context strong,
.industry-summary strong {
    color: var(--green);
    font-size: 1rem;
}

.tiny-note {
    margin: -5px 0 18px;
    position: relative;
    z-index: 1;
}

.item-skill-panel,
.industry-location-panel,
.industry-bonus-panel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(49,233,255,.18);
    border-radius: 22px;
    background: rgba(0,0,0,.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

.mini-heading {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid rgba(49,233,255,.12);
    padding-bottom: 10px;
    margin-bottom: 2px;
}

.mini-heading strong {
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .78rem;
}

.mini-heading span {
    color: var(--muted);
    font-size: .86rem;
}

.item-skill-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 16px;
}

.item-skill-field {
    min-width: 0;
}

@media (max-width: 980px) {
    .item-skill-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 640px) {
    .item-skill-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .item-skill-panel,
    .industry-location-panel,
    .industry-bonus-panel {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 640px) {
    .item-skill-panel,
    .industry-location-panel,
    .industry-bonus-panel {
        grid-template-columns: 1fr;
    }

    .mini-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}


.reaction-tree {
    margin-top: 14px;
}

.reaction-node .reaction-heading {
    display: grid;
    gap: 5px;
    margin-bottom: 12px;
}

.reaction-price-inline {
    display: inline-block;
    color: var(--muted);
    font-size: .88rem;
}

.raw-reaction-material .reaction-price-inline {
    margin-left: 8px;
}

.reaction-price-table,
.reaction-summary-table {
    margin: 10px 0 12px;
}

.reaction-summary-block {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid rgba(49,233,255,.15);
    border-radius: 18px;
    background: rgba(255,255,255,.035);
}

.reaction-summary-block h3 {
    margin: 0 0 6px;
    color: var(--cyan);
}

.reaction-value-summary {
    margin-top: 14px;
}


.copy-source {
    position: fixed;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.reaction-copy-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 12px 0 14px;
}