:root {
    --allmath-ink: #172331;
    --allmath-navy: #18364d;
    --allmath-blue: #276a91;
    --allmath-pale: #e9f0f3;
    --allmath-line: #aebcc5;
    --allmath-paper: #f8faf9;
    --allmath-lcd: #d9e6c4;
    --allmath-red: #9b2c2c;
    --allmath-amber: #f0a52b;
    --allmath-muted: #52616b;
    --allmath-shadow: 0 18px 45px rgba(23, 35, 49, 0.12);
    --bs-primary: #276a91;
    --bs-primary-rgb: 39, 106, 145;
    --bs-body-color: #172331;
    --bs-body-bg: #e9f0f3;
}

html { scroll-behavior: smooth; }

body {
    background: var(--allmath-pale);
    color: var(--allmath-ink);
    font-family: Arial, Helvetica, sans-serif;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--allmath-amber) !important;
    outline-offset: 3px;
}

.lab-container { max-width: 2240px; }

.appbar {
    min-height: 76px;
    background: var(--allmath-navy);
    border-bottom: 4px solid var(--allmath-amber);
}

.brand { color: white; letter-spacing: 0.12em; }
.brand:hover { color: white; }
.brand strong { font-size: 1.1rem; }
.brand small { color: #d9e6ec; font-size: 0.67rem; text-transform: uppercase; }

.brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50% 50% 50% 12%;
    background: var(--allmath-amber);
    color: var(--allmath-navy);
    font: 700 1.45rem Georgia, serif;
    transform: rotate(-6deg);
}

.app-status { color: #e9f0f3; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--allmath-lcd); box-shadow: 0 0 0 4px rgba(217, 230, 196, 0.15); }

.hero {
    background: linear-gradient(125deg, var(--allmath-paper) 0 66%, #d6e3e8 66%);
    border-bottom: 1px solid var(--allmath-line);
}

.hero h1,
.calculator-title h1,
.tool-group h2,
.section-heading h2 { font-family: Georgia, "Times New Roman", serif; }
.hero h1 { max-width: 900px; color: var(--allmath-navy); }
.hero h1 em { color: var(--allmath-blue); font-weight: inherit; }
.hero .lead { color: var(--allmath-muted); }
.eyebrow { color: var(--allmath-blue); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; }

.hero-symbol {
    position: absolute;
    color: rgba(39, 106, 145, 0.07);
    font: 700 12rem Georgia, serif;
    line-height: 1;
    pointer-events: none;
}
.hero-symbol-one { left: 43%; top: -35px; transform: rotate(12deg); }
.hero-symbol-two { left: 6%; bottom: -110px; }

.formula-orbit { position: relative; width: 300px; height: 230px; }
.formula-orbit::before {
    content: "";
    position: absolute;
    inset: 15px 40px;
    border: 2px dashed rgba(39, 106, 145, 0.35);
    border-radius: 50%;
    transform: rotate(-12deg);
}
.orbit-center {
    position: absolute;
    inset: 50% auto auto 50%;
    display: grid;
    width: 128px;
    height: 128px;
    place-content: center;
    border-radius: 50% 50% 42% 58%;
    background: var(--allmath-navy);
    color: white;
    text-align: center;
    transform: translate(-50%, -50%) rotate(5deg);
    box-shadow: var(--allmath-shadow);
}
.orbit-center > * { transform: rotate(-5deg); }
.orbit-center i { color: var(--allmath-amber); font-size: 1.5rem; }
.orbit-center strong { font: 700 1.3rem Georgia, serif; }
.orbit-center small { color: var(--allmath-lcd); }
.orbit-chip { position: absolute; z-index: 2; padding: 0.55rem 0.9rem; border-radius: 2rem; background: white; color: var(--allmath-blue); font: 600 1rem Georgia, serif; box-shadow: 0 8px 20px rgba(23, 35, 49, 0.13); }
.chip-a { left: 0; top: 38px; transform: rotate(-7deg); }
.chip-b { right: 5px; bottom: 30px; transform: rotate(8deg); }

.lab-button { background: var(--allmath-blue); border-color: var(--allmath-blue); border-radius: 2rem; padding-inline: 1.5rem; font-weight: 700; box-shadow: 0 8px 18px rgba(39, 106, 145, 0.2); transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.lab-button:hover { background: var(--allmath-navy); border-color: var(--allmath-navy); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(23, 54, 77, 0.24); }

.category-index { scrollbar-width: thin; }
.category-pill { flex: 0 0 auto; padding: 0.72rem 1rem; border-radius: 2rem; background: white; color: var(--allmath-navy); font-weight: 700; box-shadow: 0 3px 10px rgba(23, 35, 49, 0.07); transition: transform 150ms ease, color 150ms ease; }
.category-pill i { color: var(--allmath-blue); }
.category-pill:hover { color: var(--allmath-blue); transform: translateY(-2px) rotate(-1deg); }

.tool-group { scroll-margin-top: 1rem; }
.tool-group header { border-bottom: 3px solid var(--allmath-navy); padding-bottom: 0.9rem; }
.tool-group h2 i { color: var(--allmath-blue); }
.group-symbol { position: absolute; right: 2%; top: -30px; color: rgba(39, 106, 145, 0.06); font: 700 8rem Georgia, serif; pointer-events: none; }
.tool-link { position: relative; min-height: 106px; padding: 1rem 0.75rem; color: var(--allmath-ink); border-bottom: 1px solid var(--allmath-line); transition: transform 160ms ease, background 160ms ease, padding 160ms ease; }
.tool-link::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 0; height: 3px; background: var(--allmath-amber); transition: width 180ms ease; }
.tool-link:hover { padding-left: 1rem; border-radius: 1rem 1rem 0 0; background: rgba(248, 250, 249, 0.8); color: var(--allmath-blue); transform: translateY(-2px); }
.tool-link:hover::after { width: 100%; }
.tool-number { display: grid; flex: 0 0 auto; width: 44px; height: 44px; place-items: center; border-radius: 50% 50% 50% 12%; background: var(--allmath-navy); color: white; font: 700 0.85rem Consolas, monospace; }
.tool-copy strong { line-height: 1.25; }
.tool-copy small { color: var(--allmath-muted); line-height: 1.35; }
.open-arrow { color: var(--allmath-blue); transition: transform 150ms ease; }
.tool-link:hover .open-arrow { transform: translate(3px, -3px); }

.calculator-page { background-image: radial-gradient(circle at 92% 18%, rgba(39, 106, 145, 0.09) 0 2px, transparent 3px); background-size: 28px 28px; }
.menu-link { color: var(--allmath-blue); text-underline-offset: 4px; }
.calculator-title { border-bottom: 3px solid var(--allmath-navy); }
.title-number { display: grid; flex: 0 0 auto; width: 66px; height: 66px; place-items: center; border-radius: 50% 50% 50% 15%; background: var(--allmath-navy); color: white; font: 700 1.35rem Consolas, monospace; box-shadow: 7px 7px 0 var(--allmath-amber); }
.title-symbol { position: absolute; right: 5%; bottom: -20px; color: rgba(39, 106, 145, 0.12); font: 700 7rem Georgia, serif; transform: rotate(-6deg); }
.step-icon { display: grid; flex: 0 0 auto; width: 46px; height: 46px; place-items: center; border-radius: 50%; background: var(--allmath-blue); color: white; font-size: 1.2rem; }

.input-zone { padding: 1rem 1.5rem 1rem 0.75rem; }
.formula-zone { padding: 1.5rem; border-radius: 3rem 0.75rem 3rem 0.75rem; background: rgba(248, 250, 249, 0.88); box-shadow: var(--allmath-shadow); }
.equation-stage { display: flex; min-height: 210px; align-items: center; justify-content: center; padding: 2rem; border-radius: 4rem 1rem 4rem 1rem; background: linear-gradient(135deg, white, #eef3f5); box-shadow: inset 0 -4px 0 rgba(39, 106, 145, 0.15); }
.equation { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.3em; max-width: 100%; text-align: center; font: 500 clamp(1.4rem, 2.1vw, 2.2rem)/1.8 Georgia, serif; }
.equation sup, .formula-display sup { font-size: 0.62em; }
.fraction { display: inline-grid; grid-template-rows: auto auto; text-align: center; vertical-align: middle; line-height: 1.2; }
.fraction > span:first-child { padding: 0 0.35em 0.15em; border-bottom: 2px solid currentColor; }
.fraction > span:last-child { padding: 0.15em 0.35em 0; }
.radical { white-space: nowrap; }
.radical::before { content: "√"; font-size: 1.25em; }
.radicand { padding: 0.08em 0.2em 0; border-top: 2px solid; }

.math-field { display: inline-flex; position: relative; margin: 0.1em; vertical-align: middle; }
.math-field label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.math-field input { width: 96px; min-width: 72px; min-height: 48px; padding: 0.45rem; border: 0; border-bottom: 3px solid var(--allmath-blue); border-radius: 0.5rem 0.5rem 0 0; background: white; color: var(--allmath-ink); text-align: center; font: 600 1.25rem Consolas, monospace; }
.math-field input::placeholder { color: #8798a1; font-weight: 400; }

.parameter-grid { display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.control-field { display: block; margin: 0; color: var(--allmath-muted); font-size: 0.82rem; font-weight: 700; }
.control-field input, .control-field select, .control-field textarea { display: block; width: 100%; min-height: 48px; margin-top: 0.35rem; padding: 0.65rem 0.75rem; border: 1px solid #8496a0; border-radius: var(--bs-border-radius); background: white; color: var(--allmath-ink); }
.control-field textarea { min-height: 92px; resize: vertical; }
.wide-field { grid-column: 1 / -1; }
.formula-display { display: flex; min-height: 150px; align-items: center; justify-content: center; padding: 1.5rem 0.5rem; color: var(--allmath-navy); text-align: center; overflow-wrap: anywhere; font: 500 clamp(1.4rem, 1.8vw, 2rem)/1.5 Georgia, serif; }

.solution { overflow: hidden; border-top: 4px solid var(--allmath-blue); border-radius: 0 3rem 0 3rem; background: var(--allmath-paper); box-shadow: var(--allmath-shadow); }
.answer-block { background: linear-gradient(135deg, #f2f8fb, var(--allmath-lcd)); }
#answer { color: var(--allmath-navy); overflow-wrap: anywhere; font: 600 clamp(1.5rem, 2.2vw, 2.3rem)/1.35 Georgia, serif; }
.math-output { white-space: pre-wrap; overflow-wrap: anywhere; font: 1rem/1.7 Consolas, monospace; }
.muted { color: #66747c; }
footer { background: #cdd8dc; color: var(--allmath-muted); border-top: 1px solid var(--allmath-line); font-size: 0.82rem; }

@media (min-width: 992px) {
    .py-lg-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
    .mb-lg-6 { margin-bottom: 5rem !important; }
}

@media (max-width: 991.98px) {
    .hero { background: linear-gradient(155deg, var(--allmath-paper) 0 75%, #d6e3e8 75%); }
    .formula-orbit { height: 195px; }
    .input-zone { padding: 0; }
    .formula-zone { margin-top: 0.5rem; }
    .solution .answer-block { border-bottom: 1px solid var(--allmath-line); }
}

@media (max-width: 575.98px) {
    .hero .display-3 { font-size: 2.6rem; }
    .hero-symbol { font-size: 8rem; }
    .formula-orbit { width: 270px; }
    .calculator-title h1 { font-size: 2rem; }
    .title-number { width: 52px; height: 52px; font-size: 1rem; box-shadow: 5px 5px 0 var(--allmath-amber); }
    .title-symbol { font-size: 4.5rem; }
    .equation-stage { min-height: 180px; padding: 1.4rem 0.75rem; border-radius: 2.5rem 0.75rem 2.5rem 0.75rem; }
    .equation { gap: 0.18em; font-size: 1.35rem; }
    .math-field input { width: 78px; min-width: 68px; font-size: 1.05rem; }
    .parameter-grid { grid-template-columns: 1fr; }
    .formula-zone { padding: 1.25rem; border-radius: 2rem 0.5rem 2rem 0.5rem; }
    .actions .btn { width: 100%; min-height: 50px; }
    .solution { border-radius: 0 2rem 0 2rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms !important; }
}

.hero-detail { color: var(--allmath-muted); line-height: 1.7; }
.breadcrumb-nav { font-size: 0.82rem; }
.breadcrumb-nav a { color: var(--allmath-blue); text-underline-offset: 3px; }
.calculator-guide { padding: clamp(1.5rem, 3vw, 3rem); border-top: 3px solid var(--allmath-navy); background: rgba(248, 250, 249, 0.72); }
.calculator-guide h2, .related-tools h2 { color: var(--allmath-navy); font-family: Georgia, "Times New Roman", serif; }
.indexable-formula { padding: 1.25rem; border-left: 5px solid var(--allmath-amber); background: white; color: var(--allmath-navy); overflow-wrap: anywhere; font: 500 clamp(1.2rem, 2vw, 1.65rem)/1.55 Georgia, serif; }
.guide-steps { padding-left: 1.25rem; }
.guide-steps li { margin-bottom: 0.75rem; padding-left: 0.35rem; }
.related-link { min-height: 72px; padding: 1rem; border-bottom: 1px solid var(--allmath-line); color: var(--allmath-ink); text-decoration: none; transition: padding 160ms ease, color 160ms ease, background 160ms ease; }
.related-link:hover { padding-left: 1.25rem; background: rgba(248, 250, 249, 0.8); color: var(--allmath-blue); }

/* Calculator discovery cards and Bootstrap color modes */
.category-index { overflow: visible; }
.category-pill { min-height: 58px; white-space: normal; overflow-wrap: anywhere; }
.category-pill span { line-height: 1.25; }
.calculator-card { position: relative; overflow: hidden; border: 1px solid var(--allmath-line); border-top: 4px solid var(--allmath-blue); border-radius: 1rem; background: var(--allmath-paper); transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.calculator-card:hover, .calculator-card:focus-within { transform: translateY(-3px); border-color: var(--allmath-blue); box-shadow: 0 14px 30px rgba(23,35,49,.16) !important; }
.tool-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: .85rem; background: rgba(39,106,145,.12); color: var(--allmath-blue); font-size: 1.35rem; }
.formula-preview { padding: .65rem .75rem; border-radius: .55rem; background: rgba(39,106,145,.08); color: var(--allmath-navy); overflow-wrap: anywhere; font-family: Georgia, serif; }
.calculator-card .stretched-link:focus-visible { border-radius: .25rem; }

[data-bs-theme="dark"] {
    color-scheme: dark;
    --allmath-ink: #edf2f4; --allmath-navy: #9ed4f2; --allmath-blue: #71b9e3;
    --allmath-pale: #101c28; --allmath-line: #405364; --allmath-paper: #192a38;
    --allmath-lcd: #b9d49b; --allmath-red: #ff8f8f; --allmath-amber: #ffc15a;
    --allmath-muted: #b8c7d1; --allmath-shadow: 0 18px 45px rgba(3,9,15,.35);
    --bs-body-color: #edf2f4; --bs-body-color-rgb: 237,242,244; --bs-body-bg: #101c28;
    --bs-body-bg-rgb: 16,28,40; --bs-secondary-color: #b8c7d1; --bs-border-color: #405364;
    --bs-primary: #71b9e3; --bs-primary-rgb: 113,185,227; --bs-link-color: #82c8ef;
    --bs-link-hover-color: #b9def3; --bs-tertiary-bg: #223646; --bs-secondary-bg: #192a38;
}
[data-bs-theme="dark"] .appbar { background: #132b3c; }
[data-bs-theme="dark"] .hero { background: linear-gradient(125deg,#162633 0 66%,#1e3342 66%); }
[data-bs-theme="dark"] .hero h1, [data-bs-theme="dark"] .formula-display, [data-bs-theme="dark"] #answer { color: #edf2f4; }
[data-bs-theme="dark"] .category-pill, [data-bs-theme="dark"] .calculator-card, [data-bs-theme="dark"] .orbit-chip,
[data-bs-theme="dark"] .formula-zone, [data-bs-theme="dark"] .solution, [data-bs-theme="dark"] .calculator-guide,
[data-bs-theme="dark"] .indexable-formula, [data-bs-theme="dark"] .dropdown-menu, [data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .popover, [data-bs-theme="dark"] .accordion-item { background-color: #192a38; color: #edf2f4; }
[data-bs-theme="dark"] .equation-stage { background: linear-gradient(135deg,#1b2e3d,#223846); }
[data-bs-theme="dark"] .answer-block { background: linear-gradient(135deg,#1d3545,#2a443d); }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] .control-field input,
[data-bs-theme="dark"] .control-field select, [data-bs-theme="dark"] .control-field textarea, [data-bs-theme="dark"] .math-field input {
    background-color: #172937; border-color: #607486; color: #edf2f4;
}
[data-bs-theme="dark"] input::placeholder, [data-bs-theme="dark"] textarea::placeholder { color: #a9bac5; opacity: 1; }
[data-bs-theme="dark"] .text-bg-light, [data-bs-theme="dark"] .formula-preview { background: #263c4b !important; color: #dce8ee !important; }
[data-bs-theme="dark"] footer { background: #132330; color: #b8c7d1; }
[data-bs-theme="dark"] pre, [data-bs-theme="dark"] code { color: #f2cf83; }
[data-bs-theme="dark"] .table { --bs-table-bg: #192a38; --bs-table-color: #edf2f4; --bs-table-border-color: #405364; }