:root {
    color-scheme: light;
    --bg: #f5f7fb;
    --panel: #ffffff;
    --text: #172033;
    --muted: #657086;
    --line: #d9e0ec;
    --accent: #2563eb;
    --accent-dark: #1d4ed8;
    --soft: #eaf1ff;
    --warn: #fff7ed;
    --shadow: 0 16px 42px rgba(31, 42, 68, 0.08);
}

* {
    box-sizing: border-box;
}

html {
    min-width: 0;
    overflow-x: hidden;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.75;
    overflow-x: hidden;
}

button,
input {
    font: inherit;
}

.calculator-shell {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: 32px 0 40px;
}

.calculator-hero {
    padding: 28px 0 18px;
}

.series-label,
.section-kicker,
.ad-label {
    margin: 0 0 8px;
    color: var(--accent-dark);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.calculator-hero h1 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.7rem);
    line-height: 1.14;
    letter-spacing: 0;
}

.hero-lead {
    max-width: 760px;
    margin: 14px 0 0;
    color: #334155;
    font-size: 1.05rem;
}

.privacy-note,
.tool-status {
    display: inline-block;
    margin: 14px 0 0;
    padding: 9px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: var(--soft);
    color: #1e3a8a;
    font-size: 0.94rem;
}

.calculator-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
    gap: 18px;
    align-items: start;
}

.calculator-panel,
.history-panel,
.panel,
.series-section,
.app-comment-section,
.ad-row {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.calculator-panel,
.history-panel,
.panel,
.series-section,
.app-comment-section {
    padding: 18px;
}

.display-card {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #0f172a;
    color: #f8fafc;
    padding: 16px;
    min-height: 156px;
}

.display-label {
    display: block;
    color: #93c5fd;
    font-size: 0.78rem;
    font-weight: 700;
}

.formula-display,
.result-display {
    min-height: 42px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.formula-display {
    margin: 4px 0 10px;
    color: #e2e8f0;
    font-size: clamp(1.5rem, 5vw, 2.4rem);
}

.result-display {
    color: #fef3c7;
    font-size: clamp(1.4rem, 5vw, 2.2rem);
    font-weight: 800;
}

.keypad {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.keypad button,
.history-actions button {
    min-height: 54px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #172033;
    cursor: pointer;
    font-weight: 800;
    touch-action: manipulation;
}

.keypad button:hover,
.history-actions button:hover {
    border-color: var(--accent);
    background: #eff6ff;
}

.keypad .operator {
    background: #eef2ff;
    color: #3730a3;
}

.keypad .equals-key {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}

.keypad .wide-key {
    grid-column: span 2;
}

.history-list {
    min-height: 230px;
    max-height: 420px;
    overflow: auto;
    margin: 0;
    padding-left: 22px;
}

.history-list li {
    padding: 8px 0;
    border-bottom: 1px solid #eef2f7;
    overflow-wrap: anywhere;
}

.empty-history {
    color: var(--muted);
}

.history-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.history-actions .quiet-button,
.keypad [data-action="reset"] {
    background: #fff7ed;
    color: #9a3412;
}

.ad-row {
    margin: 20px 0;
    padding: 14px;
    min-height: 250px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.panel h2,
.history-panel h2,
.series-section h2 {
    margin: 0 0 8px;
    font-size: 1.22rem;
    letter-spacing: 0;
}

.panel p,
.history-panel p {
    margin: 0 0 10px;
    color: #475569;
}

.feature-list,
.panel ol {
    margin: 8px 0 0;
    padding-left: 1.2em;
}

.series-section {
    margin-top: 18px;
}

.series-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.series-links a {
    display: inline-flex;
    max-width: 100%;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    color: #1d4ed8;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.series-links a:hover {
    border-color: var(--accent);
    background: #eff6ff;
}

.app-comment-section {
    margin-top: 18px;
}

.return-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.return-links a {
    display: block;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #ffffff;
    color: var(--text);
    text-decoration: none;
    padding: 14px;
}

.return-links strong,
.return-links span,
.return-links small {
    display: block;
}

.return-links span {
    color: #1d4ed8;
    font-weight: 700;
}

.return-links small {
    color: var(--muted);
}

.lab-footer {
    margin-top: 24px;
    color: var(--muted);
    font-size: 0.88rem;
    text-align: center;
}

@media (max-width: 860px) {
    .calculator-layout,
    .info-grid,
    .return-links {
        grid-template-columns: 1fr;
    }

    .calculator-shell {
        width: min(100% - 20px, 1120px);
        padding-top: 18px;
    }

    .keypad button {
        min-height: 58px;
    }
}

@media (max-width: 420px) {
    .calculator-panel,
    .history-panel,
    .panel,
    .series-section,
    .app-comment-section {
        padding: 14px;
    }

    .keypad {
        gap: 7px;
    }

    .keypad button,
    .history-actions button {
        min-height: 52px;
        padding: 0 4px;
    }

    .history-actions {
        grid-template-columns: 1fr;
    }
}