/**
 * Integral Calculator - page-specific styles
 * Loaded by integral-calculator.jsp
 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:1rem;line-height:1.5;color:#0f172a;background:#fff}
*:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

:root,:root[data-theme="light"]{
--primary:#6366f1;--primary-dark:#4f46e5;--primary-light:#818cf8;--primary-50:#eef2ff;--primary-100:#e0e7ff;
--bg-primary:#fff;--bg-secondary:#f8fafc;--bg-tertiary:#f1f5f9;--bg-hover:#f8fafc;
--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#94a3b8;--text-inverse:#fff;
--border:#e2e8f0;--border-light:#f1f5f9;--border-dark:#cbd5e1;
--success:#10b981;--warning:#f59e0b;--error:#ef4444;--info:#3b82f6;
--font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
--font-mono:'JetBrains Mono','Fira Code','SF Mono',Consolas,monospace;
--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;
--leading-tight:1.25;--leading-normal:1.5;
--font-normal:400;--font-medium:500;--font-semibold:600;--font-bold:700;
--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;
--shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -4px rgba(0,0,0,0.1);
--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-full:9999px;
--z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-modal-backdrop:1040;--z-modal:1050;
--transition-fast:150ms ease-in-out;--transition-base:200ms ease-in-out;--transition-slow:300ms ease-in-out;
--header-height-mobile:64px;--header-height-desktop:72px;--container-max-width:1280px;
--tool-primary:#4f46e5;--tool-primary-dark:#4338ca;--tool-gradient:linear-gradient(135deg,#4f46e5 0%,#6366f1 100%);--tool-light:#eef2ff
}
@media(prefers-color-scheme:dark){
:root{--bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-tertiary:#334155;--bg-hover:#1e293b;--text-primary:#f1f5f9;--text-secondary:#cbd5e1;--text-muted:#94a3b8;--border:#334155;--border-light:#475569;--border-dark:#64748b}
}
[data-theme="dark"]{--bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-tertiary:#334155;--bg-hover:#1e293b;--text-primary:#f1f5f9;--text-secondary:#cbd5e1;--text-muted:#94a3b8;--border:#334155;--border-light:#475569;--border-dark:#64748b;--tool-light:rgba(79,70,229,0.15)}
[data-theme="dark"] body{background-color:var(--bg-primary);color:var(--text-primary)}
@media(min-width:768px){:root{--header-height-mobile:72px}}

/* Nav header */
.modern-nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-fixed,1030);background:var(--bg-primary,#fff);border-bottom:1px solid var(--border,#e2e8f0);box-shadow:var(--shadow-sm);height:var(--header-height-desktop,72px)}
.nav-container{max-width:1400px;margin:0 auto;padding:0 var(--space-4,1rem);display:flex;align-items:center;justify-content:space-between;height:100%}
.nav-logo{display:flex;align-items:center;gap:var(--space-3,0.75rem);text-decoration:none;font-weight:700;font-size:var(--text-lg,1.125rem)}
.nav-logo img{width:32px;height:32px;border-radius:var(--radius-md,0.5rem)}
.nav-logo span{background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#ec4899 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;letter-spacing:-0.02em}
[data-theme="dark"] .nav-logo span{background:linear-gradient(135deg,#818cf8 0%,#a78bfa 50%,#f472b6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-items{display:flex;align-items:center;gap:var(--space-6,1.5rem);list-style:none;margin:0;padding:0}
.nav-link{color:var(--text-secondary,#475569);text-decoration:none;font-weight:500;font-size:var(--text-base,1rem);padding:var(--space-2,0.5rem) var(--space-3,0.75rem);border-radius:var(--radius-md,0.5rem);display:flex;align-items:center;gap:var(--space-2,0.5rem)}
.nav-actions{display:flex;align-items:center;gap:var(--space-3,0.75rem)}
.btn-nav{padding:var(--space-2,0.5rem) var(--space-4,1rem);border-radius:var(--radius-md,0.5rem);font-size:var(--text-sm,0.875rem);font-weight:500;text-decoration:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-2,0.5rem);font-family:var(--font-sans)}
.btn-nav-primary{background:var(--primary,#6366f1);color:#fff}
.btn-nav-secondary{background:var(--bg-secondary,#f8fafc);color:var(--text-secondary,#475569);border:1px solid var(--border,#e2e8f0)}
.mobile-menu-toggle,.mobile-search-toggle{display:none;background:none;border:none;padding:var(--space-2,0.5rem);cursor:pointer;color:var(--text-primary)}
.mobile-menu-toggle{font-size:var(--text-xl,1.25rem);width:40px;height:40px;align-items:center;justify-content:center;border-radius:var(--radius-md,0.5rem)}
.nav-search{position:relative;flex:1;max-width:500px;margin:0 var(--space-6,1.5rem)}
.search-input{width:100%;padding:var(--space-2,0.5rem) var(--space-10,2.5rem) var(--space-2,0.5rem) var(--space-4,1rem);border:2px solid var(--border,#e2e8f0);border-radius:var(--radius-full,9999px);font-size:var(--text-sm,0.875rem);background:var(--bg-secondary,#f8fafc);font-family:var(--font-sans)}
.search-icon{position:absolute;right:var(--space-4,1rem);top:50%;transform:translateY(-50%);color:var(--text-muted,#94a3b8);pointer-events:none}
@media(max-width:991px){
.modern-nav{height:var(--header-height-mobile,64px)}
.nav-container{padding:0 var(--space-3,0.75rem)}
.nav-search,.nav-items{display:none}
.nav-actions{gap:var(--space-2,0.5rem)}
.btn-nav{padding:var(--space-2,0.5rem) var(--space-3,0.75rem);font-size:var(--text-xs,0.75rem)}
.mobile-menu-toggle,.mobile-search-toggle{display:flex}
.btn-nav .nav-text{display:none}
}

/* Page header + breadcrumbs */
.tool-page-header{background:var(--bg-primary,#fff);border-bottom:1px solid var(--border,#e2e8f0);padding:1.25rem 1.5rem;margin-top:72px}
.tool-page-header-inner{max-width:1600px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.tool-page-title{font-size:1.5rem;font-weight:700;color:var(--text-primary,#0f172a);margin:0}
.tool-page-badges{display:flex;gap:0.5rem;flex-wrap:wrap}
.tool-badge{display:inline-flex;align-items:center;gap:0.25rem;padding:0.25rem 0.625rem;font-size:0.6875rem;font-weight:500;border-radius:9999px;background:var(--tool-light);color:var(--tool-primary)}
.tool-breadcrumbs{font-size:0.8125rem;color:var(--text-secondary,#475569);margin-top:0.5rem}
.tool-breadcrumbs a{color:var(--text-secondary,#475569);text-decoration:none}

/* Description section */
.tool-description-section{background:var(--tool-light);border-bottom:1px solid var(--border,#e2e8f0);padding:1.25rem 1.5rem}
.tool-description-inner{max-width:1600px;margin:0 auto;display:flex;align-items:center;gap:2rem}
.tool-description-content{flex:1}
.tool-description-content p{margin:0;font-size:0.9375rem;line-height:1.6;color:var(--text-secondary,#475569)}
@media(max-width:767px){.tool-description-section{padding:1rem}.tool-description-content p{font-size:0.875rem}}

/* Three-column grid */
.tool-page-container{display:grid;grid-template-columns:minmax(320px,400px) minmax(0,1fr) 300px;gap:1.5rem;max-width:1600px;margin:0 auto;padding:1.5rem;min-height:calc(100vh - 180px)}
@media(max-width:1024px){.tool-page-container{grid-template-columns:minmax(300px,380px) minmax(0,1fr)}.tool-ads-column{display:none}}
@media(max-width:900px){.tool-page-container{grid-template-columns:1fr;gap:1rem;display:flex;flex-direction:column}.tool-input-column{position:relative;top:auto;max-height:none;overflow-y:visible;order:1}.tool-output-column{min-width:0;display:flex!important;min-height:350px;order:2}.tool-ads-column{order:3}}
.tool-input-column{position:sticky;top:90px;height:fit-content;max-height:calc(100vh - 110px);overflow-y:auto}
.tool-output-column{min-width:0;display:flex;flex-direction:column;gap:1rem}
.tool-ads-column{height:fit-content}

/* Card + form */
.tool-card{background:var(--bg-primary,#fff);border:1px solid var(--border,#e2e8f0);border-radius:0.75rem;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.tool-card-header{background:var(--tool-gradient);color:#fff;padding:0.875rem 1rem;font-weight:600;font-size:0.9375rem;display:flex;align-items:center;gap:0.5rem}
.tool-card-body{padding:1rem}
.tool-form-group{margin-bottom:0.875rem}
.tool-form-label{display:block;font-weight:500;margin-bottom:0.375rem;color:var(--text-primary,#0f172a);font-size:0.8125rem}
.tool-form-hint{font-size:0.6875rem;color:var(--text-secondary,#475569);margin-top:0.25rem}
.tool-action-btn{width:100%;padding:0.75rem;font-weight:600;font-size:0.875rem;border:none;border-radius:0.5rem;cursor:pointer;background:var(--tool-gradient);color:#fff;margin-top:1rem;transition:opacity .15s,transform .15s}

/* Result card */
.tool-result-card{min-width:0;overflow:hidden;display:flex;flex-direction:column;height:100%}
.tool-result-header{display:flex;align-items:center;gap:0.5rem;padding:1rem 1.25rem;background:var(--bg-secondary,#f8fafc);border-bottom:1px solid var(--border,#e2e8f0);border-radius:0.75rem 0.75rem 0 0}
.tool-result-header h4{margin:0;font-size:0.95rem;font-weight:600;color:var(--text-primary,#0f172a);flex:1}
.tool-result-content{min-width:0;flex:1;padding:1.25rem;min-height:300px;overflow-y:auto}
.tool-result-actions{display:none;gap:0.5rem;padding:1rem 1.25rem;border-top:1px solid var(--border,#e2e8f0);background:var(--bg-secondary,#f8fafc);border-radius:0 0 0.75rem 0.75rem;flex-wrap:wrap}
.tool-result-actions.visible{display:flex}
.tool-result-actions .tool-action-btn{flex:1;min-width:90px;margin-top:0}

/* Empty state */
.tool-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:3rem 1.5rem;color:var(--text-muted,#94a3b8)}
.tool-empty-state h3{font-size:1rem;font-weight:600;margin-bottom:0.5rem;color:var(--text-secondary,#475569)}
.tool-empty-state p{font-size:0.875rem;max-width:280px}

/* Dark mode above-fold */
[data-theme="dark"] .tool-page-header{background:var(--bg-secondary,#1e293b);border-bottom-color:var(--border,#334155)}
[data-theme="dark"] .tool-page-title{color:var(--text-primary,#f1f5f9)}
[data-theme="dark"] .tool-breadcrumbs,[data-theme="dark"] .tool-breadcrumbs a{color:var(--text-secondary,#94a3b8)}
[data-theme="dark"] .tool-badge{background:var(--tool-light);color:var(--tool-primary)}
[data-theme="dark"] .tool-description-section{background:var(--bg-secondary,#1e293b);border-bottom-color:var(--border,#334155)}
[data-theme="dark"] .tool-description-content p{color:var(--text-secondary,#cbd5e1)}
[data-theme="dark"] .tool-card{background:var(--bg-secondary,#1e293b);border-color:var(--border,#334155)}
[data-theme="dark"] .tool-form-label{color:var(--text-primary,#f1f5f9)}
[data-theme="dark"] .tool-action-btn{box-shadow:0 4px 12px rgba(79,70,229,0.3)}
.tool-input {
width: 100%;
padding: 0.625rem 0.75rem;
border: 1.5px solid var(--border, #e2e8f0);
border-radius: var(--radius-md, 0.5rem);
font-size: 0.875rem;
font-family: var(--font-sans);
background: var(--bg-primary, #fff);
color: var(--text-primary, #0f172a);
transition: border-color var(--transition-fast);
}
.tool-input:focus {
outline: none;
border-color: var(--tool-primary);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.tool-input-mono {
font-family: var(--font-mono);
font-size: 0.9375rem;
letter-spacing: -0.02em;
}
.tool-select {
width: 100%;
padding: 0.5rem 0.75rem;
border: 1.5px solid var(--border, #e2e8f0);
border-radius: var(--radius-md, 0.5rem);
font-size: 0.8125rem;
font-family: var(--font-sans);
background: var(--bg-primary, #fff);
color: var(--text-primary, #0f172a);
cursor: pointer;
}
[data-theme="dark"] .tool-input,
[data-theme="dark"] .tool-select {
background: var(--bg-tertiary);
border-color: var(--border);
color: var(--text-primary);
}
[data-theme="dark"] .tool-input:focus {
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25);
}

/* ===== Mode toggle ===== */
.ic-mode-toggle {
display: flex;
border: 1.5px solid var(--border, #e2e8f0);
border-radius: var(--radius-md, 0.5rem);
overflow: hidden;
margin-bottom: 0.875rem;
}
.ic-mode-btn {
flex: 1;
padding: 0.5rem;
font-weight: 600;
font-size: 0.8125rem;
border: none;
cursor: pointer;
background: var(--bg-secondary);
color: var(--text-secondary);
transition: all 0.15s;
font-family: var(--font-sans);
text-align: center;
}
.ic-mode-btn.active {
background: var(--tool-gradient);
color: #fff;
}
.ic-mode-btn:hover:not(.active) {
background: var(--bg-tertiary);
}
[data-theme="dark"] .ic-mode-btn { background: var(--bg-tertiary); }
[data-theme="dark"] .ic-mode-btn.active { background: var(--tool-gradient); color: #fff; }
[data-theme="dark"] .ic-mode-btn:hover:not(.active) { background: rgba(255,255,255,0.08); }

/* ===== Inline label row (label + Visual/Text toggle + Scan button) ===== */
.ic-expr-label-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.375rem;
flex-wrap: wrap;
}
.ic-expr-label-row .ic-expr-label {
margin: 0;
flex: 0 0 auto;
}
.ic-expr-label-actions {
display: inline-flex;
align-items: center;
gap: 0.375rem;
}

/* ===== Visual / Text compact pill toggle (inline with label) ===== */
.ic-input-mode-toggle {
display: inline-flex;
gap: 2px;
padding: 2px;
background: var(--bg-secondary, #f8fafc);
border: 1px solid var(--border, #e2e8f0);
border-radius: var(--radius-full, 9999px);
}
.ic-input-mode-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
padding: 0.25rem 0.625rem;
font-size: 0.6875rem; font-weight: 600;
color: var(--text-secondary, #475569);
background: transparent;
border: none;
border-radius: var(--radius-full, 9999px);
cursor: pointer;
transition: all 0.15s;
font-family: var(--font-sans);
line-height: 1;
}
.ic-input-mode-btn:hover:not(.active):not(:disabled) {
color: var(--text-primary);
}
.ic-input-mode-btn.active {
background: var(--bg-primary, #fff);
color: var(--tool-primary, #4f46e5);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(79, 70, 229, 0.2);
}
.ic-input-mode-btn > span:first-child { font-size: 0.95em; opacity: 0.9; }
[data-theme="dark"] .ic-input-mode-toggle {
background: var(--bg-tertiary);
border-color: var(--border);
}
[data-theme="dark"] .ic-input-mode-btn { color: var(--text-secondary); }
[data-theme="dark"] .ic-input-mode-btn.active {
background: var(--bg-secondary);
color: var(--primary-light, #818cf8);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(129, 140, 248, 0.3);
}
[data-theme="dark"] .ic-input-mode-btn:hover:not(.active):not(:disabled) {
color: var(--text-primary);
}
/* Drop the "Visual"/"Text" word on very narrow screens — keep the glyph. */
@media (max-width: 380px) {
.ic-mode-label { display: none; }
.ic-input-mode-btn { padding: 0.25rem 0.5rem; }
}

/* ===== MathLive <math-field> ===== */
.ic-mathfield {
display: block;
width: 100%;
min-height: 48px;
padding: 0.625rem 0.75rem;
background: var(--bg-primary, #fff);
color: var(--text-primary, #0f172a);
border: 1.5px solid var(--border, #e2e8f0);
border-radius: var(--radius-md, 0.5rem);
font-size: 1.0625rem;
line-height: 1.4;
transition: border-color 0.15s, box-shadow 0.15s;
/* MathLive-specific CSS variables */
--selection-background-color: rgba(79, 70, 229, 0.25);
--selection-color: var(--text-primary, #0f172a);
--caret-color: var(--tool-primary, #4f46e5);
--contains-highlight-background-color: rgba(79, 70, 229, 0.08);
}
.ic-mathfield:focus,
.ic-mathfield:focus-within {
outline: none;
border-color: var(--tool-primary, #4f46e5);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
.ic-mathfield:not(:defined) {
/* Custom element not yet upgraded — show a skeleton that matches the input. */
min-height: 48px;
background: var(--bg-secondary, #f8fafc);
color: transparent;
}
[data-theme="dark"] .ic-mathfield {
background: var(--bg-tertiary);
border-color: var(--border);
color: var(--text-primary);
--selection-background-color: rgba(129, 140, 248, 0.28);
--caret-color: var(--primary-light, #818cf8);
--contains-highlight-background-color: rgba(129, 140, 248, 0.12);
}
[data-theme="dark"] .ic-mathfield:focus,
[data-theme="dark"] .ic-mathfield:focus-within {
border-color: var(--primary-light, #818cf8);
box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
}

/* ===== Input mode visibility =====
   Mode is written to .ic-expr-wrap (input block) and .tool-card-body
   (so sibling groups like Live Preview can respond). Absence of the
   attribute is treated as "visual" to avoid FOUC before JS runs. */

/* Visual mode — show math-field, hide plain text input + autocomplete. */
.ic-expr-wrap[data-input-mode="visual"] #ic-expr,
.ic-expr-wrap[data-input-mode="visual"] #ic-autocomplete,
.ic-expr-wrap:not([data-input-mode]) #ic-expr,
.ic-expr-wrap:not([data-input-mode]) #ic-autocomplete {
display: none;
}

/* Text mode — hide the math-field. */
.ic-expr-wrap[data-input-mode="text"] #ic-mathfield {
display: none;
}

/* Single morphing hint: show the slot that matches the active mode. */
.ic-expr-wrap .ic-expr-hint {
display: block;
margin-top: 0.375rem;
font-size: 0.6875rem;
color: var(--text-secondary, #475569);
line-height: 1.4;
}
.ic-expr-wrap .ic-expr-hint > span { display: none; }
.ic-expr-wrap[data-input-mode="visual"] .ic-expr-hint .ic-hint-visual,
.ic-expr-wrap:not([data-input-mode]) .ic-expr-hint .ic-hint-visual,
.ic-expr-wrap[data-input-mode="text"] .ic-expr-hint .ic-hint-text {
display: inline;
}
.ic-expr-wrap .ic-expr-hint code {
font-family: var(--font-mono);
background: var(--bg-secondary, #f8fafc);
border: 1px solid var(--border, #e2e8f0);
border-radius: 3px;
padding: 1px 4px;
font-size: 0.95em;
}
[data-theme="dark"] .ic-expr-wrap .ic-expr-hint code {
background: var(--bg-tertiary);
border-color: var(--border);
}

/* In Visual mode the <math-field> IS the live preview, so hide the
   separate KaTeX preview (and its label). In Text mode the preview
   below the input stays visible as a parsing sanity-check. */
.tool-card-body[data-input-mode="visual"] .tool-form-group:has(> #ic-preview),
.tool-card-body:not([data-input-mode]) .tool-form-group:has(> #ic-preview) {
display: none;
}

/* ===== Live preview ===== */
.ic-preview {
background: var(--bg-secondary, #f8fafc);
border: 1px solid var(--border, #e2e8f0);
border-radius: var(--radius-md, 0.5rem);
padding: 0.75rem 1rem;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
overflow-x: auto;
font-size: 1.1rem;
}
.ic-preview .katex-display { margin: 0; }
[data-theme="dark"] .ic-preview {
background: var(--bg-tertiary);
border-color: var(--border);
}

/* ===== Bounds section ===== */
.ic-bounds {
display: none;
gap: 0.75rem;
padding-top: 0.5rem;
}
.ic-bounds.visible {
display: grid;
grid-template-columns: 1fr 1fr;
}

/* ===== Quick examples ===== */
.ic-examples {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
}
.ic-example-chip {
padding: 0.3rem 0.625rem;
font-size: 0.75rem;
font-family: var(--font-mono);
background: var(--bg-secondary, #f8fafc);
border: 1px solid var(--border, #e2e8f0);
border-radius: var(--radius-full, 9999px);
cursor: pointer;
transition: all 0.15s;
color: var(--text-secondary);
white-space: nowrap;
}
.ic-example-chip:hover {
background: var(--tool-primary);
color: #fff;
border-color: var(--tool-primary);
}
[data-theme="dark"] .ic-example-chip {
background: var(--bg-tertiary);
border-color: var(--border);
color: var(--text-secondary);
}
[data-theme="dark"] .ic-example-chip:hover {
background: var(--tool-primary);
color: #fff;
}

/* ===== Autocomplete ===== */
.ic-expr-wrap { position: relative; }
.ic-image-btn {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px;
    background: rgba(99, 102, 241, 0.08); color: var(--primary, #6366f1);
    border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 4px;
    font-size: 0.6875rem; font-weight: 500; cursor: pointer;
    transition: all 0.12s; vertical-align: middle;
    line-height: 1.2;
}
.ic-image-btn:hover { background: rgba(99, 102, 241, 0.15); border-color: rgba(99, 102, 241, 0.4); }
.ic-autocomplete {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: var(--z-dropdown, 1000);
    background: var(--bg-primary, #fff);
    border: 1.5px solid var(--border, #e2e8f0);
    border-top: none;
    border-radius: 0 0 var(--radius-md, 0.5rem) var(--radius-md, 0.5rem);
    box-shadow: var(--shadow-lg);
    max-height: 260px;
    overflow-y: auto;
}
.ic-autocomplete.active { display: block; }
.ic-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text-primary, #0f172a);
    transition: background 0.1s;
}
.ic-autocomplete-item:hover,
.ic-autocomplete-item.selected {
    background: var(--tool-light, #eef2ff);
}
.ic-autocomplete-cat {
    margin-left: auto;
    flex-shrink: 0;
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
[data-theme="dark"] .ic-autocomplete {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border, #334155);
}
[data-theme="dark"] .ic-autocomplete-item:hover,
[data-theme="dark"] .ic-autocomplete-item.selected {
    background: var(--tool-light);
}
[data-theme="dark"] .ic-autocomplete-cat {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

/* ===== Syntax help ===== */
.ic-syntax-toggle {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding: 0.5rem 0;
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-secondary);
border: none;
background: none;
width: 100%;
font-family: var(--font-sans);
}
.ic-syntax-content {
display: none;
font-size: 0.75rem;
font-family: var(--font-mono);
color: var(--text-secondary);
line-height: 1.8;
padding-bottom: 0.5rem;
}
.ic-syntax-content.open { display: block; }
.ic-syntax-chevron {
transition: transform 0.2s;
width: 14px;
height: 14px;
flex-shrink: 0;
}
.ic-syntax-content.open ~ .ic-syntax-toggle .ic-syntax-chevron,
.open > .ic-syntax-toggle .ic-syntax-chevron {
transform: rotate(180deg);
}

/* ===== Output tabs ===== */
.ic-output-tabs {
display: flex;
border: 1.5px solid var(--border, #e2e8f0);
border-radius: var(--radius-md, 0.5rem);
overflow: hidden;
}
.ic-output-tab {
flex: 1;
padding: 0.5rem;
font-weight: 600;
font-size: 0.8125rem;
border: none;
cursor: pointer;
background: var(--bg-secondary);
color: var(--text-secondary);
transition: all 0.15s;
font-family: var(--font-sans);
text-align: center;
}
.ic-output-tab.active {
background: var(--tool-gradient);
color: #fff;
}
.ic-output-tab:hover:not(.active) {
background: var(--bg-tertiary);
}
[data-theme="dark"] .ic-output-tab { background: var(--bg-tertiary); }
[data-theme="dark"] .ic-output-tab.active { background: var(--tool-gradient); color: #fff; }
[data-theme="dark"] .ic-output-tab:hover:not(.active) { background: rgba(255,255,255,0.08); }

.ic-panel { display: none; flex: 1; min-height: 0; }
.ic-panel.active { display: flex; flex-direction: column; }
#ic-panel-result .tool-result-card { flex: 1; }
#ic-panel-graph { min-height: 480px; }
#ic-panel-python { min-height: 540px; }

/* ===== Result display ===== */
.ic-result-math {
padding: 1.5rem; overflow-x: auto; max-width: 100%;
text-align: center;
}
.ic-result-math .katex-display { margin: 0.5rem 0; overflow-x: auto; overflow-y: hidden; }
.ic-result-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
margin-bottom: 0.25rem;
}
.ic-result-main {
font-size: 1.3rem;
padding: 1rem 0;
}
.ic-result-numeric {
background: var(--tool-gradient);
color: #fff;
padding: 1rem;
border-radius: var(--radius-md);
text-align: center;
font-size: 1.25rem;
font-weight: 700;
margin: 0.75rem 0;
}
.ic-result-detail {
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 0.75rem 1rem;
margin-top: 0.75rem;
font-size: 0.8125rem;
color: var(--text-secondary);
}
[data-theme="dark"] .ic-result-detail {
background: var(--bg-tertiary);
border-color: var(--border);
}
.ic-method-badge {
display: inline-block;
background: var(--tool-light);
color: var(--tool-primary);
padding: 0.2rem 0.625rem;
border-radius: 9999px;
font-size: 0.6875rem;
font-weight: 600;
}

/* Error state */
.ic-error {
background: #fef3c7;
border: 1px solid #fbbf24;
border-radius: var(--radius-md);
padding: 1.25rem;
color: #92400e;
}
.ic-error h4 {
margin: 0 0 0.5rem;
font-size: 0.9375rem;
font-weight: 700;
}
.ic-error ul {
margin: 0.5rem 0 0;
padding-left: 1.25rem;
font-size: 0.8125rem;
line-height: 1.7;
}
[data-theme="dark"] .ic-error {
background: rgba(251, 191, 36, 0.15);
border-color: rgba(251, 191, 36, 0.3);
color: #fbbf24;
}

/* ===== Graph ===== */
#ic-graph-container {
width: 100%;
min-height: 440px;
border-radius: var(--radius-md);
}
.js-plotly-plot .plotly .modebar { top: 4px !important; right: 4px !important; }

/* ===== Separator ===== */
.ic-sep {
border: none;
border-top: 1px solid var(--border, #e2e8f0);
margin: 0.75rem 0;
}

/* ===== Below-fold educational cards ===== */
.ic-edu-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.ic-edu-card {
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 1.25rem;
}
.ic-edu-card h4 {
font-size: 0.875rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.375rem;
}
.ic-edu-card p {
font-size: 0.8125rem;
color: var(--text-secondary);
line-height: 1.6;
margin: 0;
}
[data-theme="dark"] .ic-edu-card {
background: var(--bg-tertiary);
border-color: var(--border);
}
.ic-rules-table {
width: 100%;
border-collapse: collapse;
font-size: 0.8125rem;
margin-top: 0.75rem;
}
.ic-rules-table th, .ic-rules-table td {
padding: 0.5rem 0.75rem;
text-align: left;
border-bottom: 1px solid var(--border);
}
.ic-rules-table th {
font-weight: 600;
color: var(--text-primary);
background: var(--bg-secondary);
}
.ic-rules-table td {
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 0.75rem;
}
[data-theme="dark"] .ic-rules-table th {
background: var(--bg-tertiary);
}

/* SVG diagram */
.ic-diagram {
max-width: 100%;
height: auto;
display: block;
margin: 1rem auto;
}

/* ===== Steps ===== */
.ic-steps-btn {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.5rem 1rem;
font-size: 0.8125rem;
font-weight: 600;
font-family: var(--font-sans);
border: 1.5px solid var(--tool-primary);
border-radius: var(--radius-full);
background: transparent;
color: var(--tool-primary);
cursor: pointer;
transition: all 0.15s;
margin-top: 0.75rem;
}
.ic-steps-btn:hover {
background: var(--tool-primary);
color: #fff;
}
.ic-steps-btn.loading {
opacity: 0.7;
pointer-events: none;
}
.ic-steps-container {
margin-top: 1rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
}
.ic-steps-header {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1rem;
background: var(--tool-light);
border-bottom: 1px solid var(--border);
font-size: 0.8125rem;
font-weight: 600;
color: var(--tool-primary);
}
.ic-step {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border-light);
display: flex;
gap: 0.75rem;
align-items: flex-start;
}
.ic-step:last-child { border-bottom: none; }
.ic-step-num {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--tool-gradient);
color: #fff;
font-size: 0.6875rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.ic-step-body { flex: 1; min-width: 0; }
.ic-step-title {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 0.25rem;
}
.ic-step-math {
font-size: 1rem;
overflow-x: auto;
overflow-y: hidden;
}
.ic-step-math .katex-display {
margin: 0;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
display: inline-block;
min-width: min-content;
}
[data-theme="dark"] .ic-steps-container { border-color: var(--border); }
[data-theme="dark"] .ic-steps-header { background: var(--tool-light); border-bottom-color: var(--border); }
[data-theme="dark"] .ic-step { border-bottom-color: var(--border); }
.ic-steps-ai-badge, .ic-steps-cas-badge {
font-size: 0.625rem;
font-weight: 500;
padding: 0.125rem 0.5rem;
border-radius: 9999px;
background: var(--bg-secondary);
color: var(--text-muted);
margin-left: auto;
}
.ic-steps-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
padding: 0.5rem 1rem;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-light);
}
.ic-step-tab {
font-size: 0.75rem;
font-weight: 500;
padding: 0.25rem 0.625rem;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-primary);
color: var(--text-secondary);
cursor: pointer;
}
.ic-step-tab:hover { background: var(--bg-hover); color: var(--text-primary); }
.ic-step-tab.active {
background: var(--tool-gradient);
color: #fff;
border-color: transparent;
}
.ic-steps-panel { display: none; }
.ic-steps-panel.active { display: block; }
/* Scrollable steps area when many steps */
.ic-steps-scroll {
max-height: 600px;
overflow-y: auto;
scroll-behavior: smooth;
}
/* Collapsed state: hide middle steps */
.ic-steps-scroll.collapsed .ic-step.ic-step-hidden { display: none; }
.ic-steps-expand-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
width: 100%;
padding: 0.5rem 1rem;
border: none;
border-bottom: 1px solid var(--border-light);
background: var(--bg-secondary);
color: var(--tool-primary);
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
}
.ic-steps-expand-btn:hover { background: var(--tool-light); }
.ic-steps-expand-btn svg { width: 14px; height: 14px; transition: transform 0.2s; }
.ic-steps-scroll:not(.collapsed) .ic-steps-expand-btn svg { transform: rotate(180deg); }
[data-theme="dark"] .ic-steps-expand-btn { background: var(--bg-secondary); }
[data-theme="dark"] .ic-steps-expand-btn:hover { background: var(--tool-light); }
@keyframes ic-spin {
to { transform: rotate(360deg); }
}
.ic-spinner {
width: 14px;
height: 14px;
border: 2px solid var(--border);
border-top-color: var(--tool-primary);
border-radius: 50%;
animation: ic-spin 0.6s linear infinite;
}

/* ===== FAQ ===== */
.faq-item { border-bottom: 1px solid var(--border, #e2e8f0); }
.faq-item:last-child { border-bottom: none; }
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.875rem 0;
background: none;
border: none;
font-size: 0.875rem;
font-weight: 600;
color: var(--text-primary, #0f172a);
cursor: pointer;
text-align: left;
font-family: var(--font-sans);
gap: 0.75rem;
}
.faq-answer {
display: none;
padding: 0 0 0.875rem;
font-size: 0.8125rem;
line-height: 1.7;
color: var(--text-secondary);
}
.faq-item.open .faq-answer { display: block; }
.faq-chevron { transition: transform 0.2s; flex-shrink: 0; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }