/* ====== PART 0: VARIABLES & BASE STYLES ====== */
:root {
    /* Color Palette */
    --color-background: #05080a;
    --color-panel-bg: rgba(10, 15, 20, 0.95); /* Slightly more opaque */
    /* color-sub-panel-bg REMOVED */
    --color-input-bg: rgba(5, 5, 10, 0.9); /* More opaque input */
    --color-text-primary: #e0e5eb;
    --color-text-secondary: #8899a6;
    --color-accent-cyan: #00e5ff;
    --color-accent-cyan-glow: rgba(0, 229, 255, 0.7);
    --color-accent-cyan-medium: rgba(0, 229, 255, 0.5);
    --color-accent-cyan-low: rgba(0, 229, 255, 0.3);
    --color-accent-red: #ff1744;
    --color-accent-red-glow: rgba(255, 23, 68, 0.8);
    --color-accent-green: #00ffaa;
    --color-accent-green-glow: rgba(0, 255, 170, 0.7);
    --color-accent-green-medium: rgba(0, 255, 170, 0.5);
    --color-neutral-glow: rgba(180, 190, 200, 0.6);
    --color-neutral-medium: rgba(180, 190, 200, 0.4);

    /* Fonts */
    --font-primary: 'Orbitron', sans-serif;
    --font-secondary: 'Roboto Mono', monospace;

    /* Geometry */
    --cut-corner-size-input: 6px;
    --button-height: 48px;
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --corner-bracket-size-panel: 18px;
}

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

body {
    font-family: var(--font-secondary); background-color: transparent;
    color: var(--color-text-primary); line-height: 1.6; overflow-x: hidden;
    position: relative; display: flex; justify-content: center; align-items: center;
    min-height: 100vh; padding: 1rem;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
/* ====== END PART 0: VARIABLES & BASE STYLES ====== */


/* ====== PART 0.5: BACKGROUND STYLES (Stars) ====== */
.stars-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
    perspective: 600px; overflow: hidden; background-color: var(--color-background);
}
#stars { position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; }
.star {
    position: absolute; width: 3px; height: 3px; background-color: #fff; border-radius: 50%;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5); animation: starAnimation linear infinite;
}
@keyframes starAnimation {
    from { transform: translateZ(0px) translateX(0px); opacity: 0; }
    10% { opacity: 1; } 90% { opacity: 1; }
    to { transform: translateZ(1200px) translateX(-80px); opacity: 0; }
}
/* ====== END PART 0.5: BACKGROUND STYLES (Stars) ====== */


/* ====== PART 1: BACKGROUND ELEMENTS (Optional: Grid/HUD) ====== */
/* Styles for optional background grid/HUD elements */
/* ====== END PART 1: BACKGROUND ELEMENTS ====== */


/* ====== PART 2: MAIN INTERFACE CONTAINER (Centering/Max-Width) ====== */
.cyber-container {
    max-width: 480px; width: 100%; margin: 20px auto; padding: 0;
    position: relative; z-index: 1;
}
/* ====== END PART 2: MAIN INTERFACE CONTAINER ====== */


/* ====== PART 3: CALCULATOR PANEL STYLES ====== */
.calculator-panel {
    background-color: var(--color-panel-bg);
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.01) 0%, rgba(0,0,0,0.02) 100%); /* Even subtler gradient */
    padding: 30px; border-radius: 0;
    box-shadow: inset 0 0 25px rgba(0,0,0,0.7); /* Darker inner shadow */
    position: relative; overflow: hidden; border: none;
}
.calculator-panel::before, .calculator-panel::after { /* Main Panel Corners */
    content: ''; position: absolute; width: var(--corner-bracket-size-panel); height: var(--corner-bracket-size-panel);
    border-color: var(--color-accent-cyan-medium); border-style: solid;
}
.calculator-panel::before { top: 0; left: 0; border-width: var(--border-width-medium) 0 0 var(--border-width-medium); }
.calculator-panel::after { bottom: 0; right: 0; border-width: 0 var(--border-width-medium) var(--border-width-medium) 0; }

.panel-title { /* Main Title */
    font-family: var(--font-primary); font-weight: 700; font-size: 1.6rem; color: var(--color-accent-cyan);
    margin: 0 0 30px 0; padding-bottom: 10px;
    border-bottom: var(--border-width-thin) solid var(--color-accent-cyan-low);
    letter-spacing: 2px; text-transform: uppercase; text-align: center;
    text-shadow: 0 0 8px var(--color-accent-cyan-glow);
}
/* ====== END PART 3: CALCULATOR PANEL STYLES ====== */


/* ====== PART 4: INPUT SECTION & INPUTS ====== */
/* .input-panel is just a structural div now */
.input-panel { margin-bottom: 30px; }

.input-group { margin-bottom: 20px; }
.input-group:last-child { margin-bottom: 0; }

label {
    display: block; margin-bottom: 8px; color: var(--color-accent-cyan); opacity: 0.9;
    font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px;
    font-family: var(--font-primary); font-weight: 700;
}

.cyber-input {
    width: 100%; padding: 12px 15px; background-color: var(--color-input-bg);
    border: var(--border-width-thin) solid var(--color-neutral-medium); /* Use neutral border */
    border-radius: 0; color: var(--color-text-primary); font-size: 1.1rem;
    font-family: var(--font-secondary);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.6); /* More subtle inset */
    clip-path: polygon(
        0% var(--cut-corner-size-input), var(--cut-corner-size-input) 0%,
        calc(100% - var(--cut-corner-size-input)) 0%, 100% var(--cut-corner-size-input),
        100% calc(100% - var(--cut-corner-size-input)), calc(100% - var(--cut-corner-size-input)) 100%,
        var(--cut-corner-size-input) 100%, 0% calc(100% - var(--cut-corner-size-input))
    );
    overflow: hidden;
}

.cyber-input:focus {
    outline: none;
    background-color: rgba(10, 20, 25, 0.9); /* Slightly different BG on focus */
    border-color: var(--color-accent-green);
    box-shadow: inset 0 0 4px 1px var(--color-accent-green-medium),
                0 0 10px var(--color-accent-green-glow);
}

.cyber-input::placeholder { color: var(--color-text-secondary); opacity: 0.6; font-style: normal; }
.cyber-input::-webkit-outer-spin-button, .cyber-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cyber-input[type=number] { -moz-appearance: textfield; }

/* ====== END PART 4: INPUT SECTION & INPUTS ====== */


/* ====== PART 5: RESULTS SECTION & RESULTS ====== */
/* .results-panel is just a structural div */
.results-panel { margin-bottom: 35px; padding-top: 15px; /* Add padding top for space below divider */ }

.sub-panel-title { /* Title for results section (Acts as internal heading) */
    font-family: var(--font-primary); font-weight: 700; font-size: 1rem;
    color: var(--color-text-secondary); text-transform: uppercase;
    letter-spacing: 1.5px; margin-bottom: 20px; padding-bottom: 5px;
    /* Keep dashed border for internal section heading */
    border-bottom: 1px dashed var(--color-accent-cyan-low);
}

.result-item { display: flex; justify-content: space-between; align-items: baseline; /* Align text baseline */ margin-bottom: 12px; padding: 3px 0; /* Reduced padding */ }
.result-item:last-child { margin-bottom: 0; }
.result-label { color: var(--color-text-primary); opacity: 0.85; font-size: 0.9rem; flex-basis: 60%; text-align: left; font-family: var(--font-secondary); padding-right: 10px; }
.result-value { color: var(--color-text-primary); font-size: 1.1rem; font-weight: 700; text-align: right; flex-basis: 40%; font-family: var(--font-secondary); }
.data-field { /* Calculated values */
    color: var(--color-accent-cyan);
    text-shadow: 0 0 6px var(--color-accent-cyan-medium); /* Slightly stronger glow */
    background-color: rgba(0, 229, 255, 0.05); /* Very subtle background highlight */
    padding: 0 5px; /* Slight padding for highlight */
    display: inline-block; /* Needed for background */
}
.result-item.profit-highlight .result-label { color: var(--color-accent-cyan); opacity: 1; }
.result-item.profit-highlight .result-value { font-size: 1.3rem; color: var(--color-accent-cyan); text-shadow: 0 0 10px var(--color-accent-cyan-glow); }
.result-item.detail .result-label { font-size: 0.85rem; color: var(--color-text-secondary); opacity: 0.9; }
.result-item.detail .result-value { font-size: 1rem; font-weight: normal; color: var(--color-text-primary); text-shadow: none; background-color: transparent; padding: 0; } /* Reset detail value style */

.panel-divider { /* Divider between Break-Even/Profit and Details */
    border: none; height: var(--border-width-thin);
    /* Solid line divider */
    background-color: var(--color-accent-cyan-low);
    margin: 25px 5%; /* Indent divider slightly */
    width: 90%;
}
/* ====== END PART 5: RESULTS SECTION & RESULTS ====== */


/* ====== PART 6: ACTION BUTTON (Cyber Button Style) ====== */
.action-section { margin-top: 0; text-align: center; }

.cyber-button {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 25px; height: var(--button-height);
    text-decoration: none; font-family: var(--font-primary); font-weight: 700;
    font-size: 1rem; letter-spacing: 1.5px; color: var(--color-text-primary);
    background-color: rgba(5, 5, 10, 0.85); border: none;
    position: relative; cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.1s ease;
    overflow: hidden;
    clip-path: polygon(
        0% var(--cut-corner-size-input), var(--cut-corner-size-input) 0%,
        calc(100% - var(--cut-corner-size-input)) 0%, 100% var(--cut-corner-size-input),
        100% calc(100% - var(--cut-corner-size-input)), calc(100% - var(--cut-corner-size-input)) 100%,
        var(--cut-corner-size-input) 100%, 0% calc(100% - var(--cut-corner-size-input))
    );
    box-shadow: inset 0 0 0 var(--border-width-thin) var(--color-accent-cyan-glow), inset 0 0 6px var(--color-accent-cyan-low);
    z-index: 1; gap: 10px; width: 100%; max-width: 320px;
}

.cyber-button::before, .cyber-button::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    clip-path: polygon(
        0% var(--cut-corner-size-input), var(--cut-corner-size-input) 0%,
        calc(100% - var(--cut-corner-size-input)) 0%, 100% var(--cut-corner-size-input),
        100% calc(100% - var(--cut-corner-size-input)), calc(100% - var(--cut-corner-size-input)) 100%,
        var(--cut-corner-size-input) 100%, 0% calc(100% - var(--cut-corner-size-input))
    );
}
.cyber-button::before { /* Scan line */
    background: linear-gradient( to right, transparent 0%, var(--color-accent-cyan-medium) 50%, transparent 100% );
    width: 80%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; transform: translateX(-100%) skewX(-20deg);
}
.cyber-button::after { /* Corner accents */ border: var(--border-width-medium) solid transparent; opacity: 0; }
.cyber-button .button-icon { font-size: 1.1em; line-height: 1; color: currentColor; position: relative; z-index: 2; }
.cyber-button .button-text { position: relative; z-index: 2; }

.cyber-button[data-button-type="accent"]:hover, .cyber-button[data-button-type="accent"]:focus {
    color: var(--color-accent-red); background-color: rgba(30, 35, 50, 0.9); outline: none;
    box-shadow: inset 0 0 0 var(--border-width-medium) var(--color-accent-red-glow), inset 0 0 15px rgba(255, 23, 68, 0.5);
}
.cyber-button[data-button-type="accent"]:hover::before {
    background: linear-gradient( to right, transparent 0%, var(--color-accent-red-glow) 50%, transparent 100% );
    animation: buttonScanLine 0.7s ease-out forwards; opacity: 0.5;
}
.cyber-button[data-button-type="accent"]:hover::after { opacity: 1; border-color: var(--color-accent-red-glow); }

@keyframes buttonScanLine {
    0% { transform: translateX(-100%) skewX(-20deg); opacity: 0.3; } 50% { opacity: 0.7; }
    100% { transform: translateX(100%) skewX(-20deg); opacity: 0.3; }
}

.cyber-button:active { transform: scale(0.98); filter: brightness(0.9); }
/* ====== END PART 6: ACTION BUTTON ====== */


/* ====== PART 7: RESPONSIVE ADJUSTMENTS ====== */
@media (max-width: 600px) {
     :root {
        --corner-bracket-size-panel: 15px;
     }
    .cyber-container { margin: 15px auto; }
    .calculator-panel { padding: 20px; }
    .panel-title { font-size: 1.4rem; margin-bottom: 25px; }
    .input-panel { margin-bottom: 25px; }
    .results-panel { margin-bottom: 30px; padding-top: 10px; }
    label { font-size: 0.85rem; }
    .cyber-input { font-size: 1rem; padding: 10px 12px; }
    .result-label { font-size: 0.9rem; flex-basis: 55%; }
    .result-value { font-size: 1rem; flex-basis: 45%; }
    .result-item.profit-highlight .result-value { font-size: 1.1rem; }
    .panel-divider { margin: 15px 5%; }
    .cyber-button { font-size: 0.9rem; height: calc(var(--button-height) * 0.9); max-width: 280px; }
}
@media (max-width: 400px) {
    .calculator-panel { padding: 15px; }
    .panel-title { font-size: 1.3rem; }
    .sub-panel-title { font-size: 0.9rem; margin-top: 0; }
}
/* ====== END PART 7: RESPONSIVE ADJUSTMENTS ====== */