/* Advanced Math Solver — teal & navy theme */

.ams-wrap {
	--ams-navy-900: #0b1f3a;
	--ams-navy-800: #10294c;
	--ams-navy-700: #16345e;
	--ams-navy-600: #1e4276;
	--ams-teal-500: #14b8a6;
	--ams-teal-400: #2dd4bf;
	--ams-teal-300: #5eead4;
	--ams-teal-050: #ecfdfa;
	--ams-ink: #e8eef8;
	--ams-ink-dim: #9fb0c9;
	--ams-danger: #f87171;
	--ams-radius: 12px;
	--ams-font: 'Segoe UI', system-ui, -apple-system, sans-serif;
	--ams-mono: 'Cascadia Code', 'SF Mono', Consolas, monospace;

	font-family: var(--ams-font);
	max-width: 980px;
	margin: 2rem auto;
	background: var(--ams-navy-900);
	border-radius: calc(var(--ams-radius) + 4px);
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(11, 31, 58, 0.45);
	color: var(--ams-ink);
}

/* ---------- Header ---------- */
.ams-header {
	background: linear-gradient(135deg, var(--ams-navy-800) 0%, var(--ams-navy-600) 60%, #0f766e 130%);
	padding: 1.6rem 1.8rem;
	border-bottom: 3px solid var(--ams-teal-500);
}
.ams-logo { display: flex; align-items: center; gap: 1rem; }
.ams-logo-sigma {
	display: grid; place-items: center;
	width: 52px; height: 52px;
	background: var(--ams-teal-500);
	color: var(--ams-navy-900);
	font-size: 1.9rem; font-weight: 700;
	border-radius: 14px;
	box-shadow: 0 6px 16px rgba(20, 184, 166, 0.4);
}
.ams-title { margin: 0; font-size: 1.35rem; color: #fff; letter-spacing: 0.01em; }
.ams-subtitle { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--ams-teal-300); }

/* ---------- Layout ---------- */
.ams-body { display: grid; grid-template-columns: 1fr 320px; gap: 0; }
.ams-main { padding: 1.4rem 1.8rem 1.8rem; min-width: 0; }
@media (max-width: 820px) {
	.ams-body { grid-template-columns: 1fr; }
	.ams-history { border-left: none !important; border-top: 1px solid var(--ams-navy-600); }
}

/* ---------- Tabs ---------- */
.ams-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.2rem; }
.ams-tab {
	background: var(--ams-navy-700);
	color: var(--ams-ink-dim);
	border: 1px solid transparent;
	padding: 0.45rem 0.9rem;
	border-radius: 999px;
	font-size: 0.82rem;
	cursor: pointer;
	transition: all 0.18s ease;
	font-family: inherit;
}
.ams-tab:hover { color: var(--ams-teal-300); border-color: var(--ams-teal-500); }
.ams-tab.is-active {
	background: var(--ams-teal-500);
	color: var(--ams-navy-900);
	font-weight: 600;
	box-shadow: 0 4px 12px rgba(20, 184, 166, 0.35);
}
.ams-tab:focus-visible { outline: 2px solid var(--ams-teal-300); outline-offset: 2px; }

/* ---------- Inputs ---------- */
.ams-label { display: block; font-size: 0.78rem; color: var(--ams-teal-300); margin: 0.9rem 0 0.35rem; font-weight: 600; letter-spacing: 0.02em; }
.ams-input {
	width: 100%;
	box-sizing: border-box;
	background: var(--ams-navy-800);
	border: 1px solid var(--ams-navy-600);
	border-radius: var(--ams-radius);
	color: var(--ams-ink);
	padding: 0.7rem 0.9rem;
	font-size: 0.95rem;
	font-family: var(--ams-mono);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ams-input:focus { outline: none; border-color: var(--ams-teal-500); box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2); }
.ams-input::placeholder { color: #5a6d8a; }
.ams-input--small { width: auto; min-width: 140px; font-size: 0.85rem; padding: 0.5rem 0.7rem; }
select.ams-input { font-family: var(--ams-font); }
.ams-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.ams-hint { font-size: 0.75rem; color: var(--ams-ink-dim); margin: 0.4rem 0 0; }

/* ---------- Quick keys ---------- */
.ams-quickkeys { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }
.ams-quickkeys button {
	background: var(--ams-navy-700);
	border: 1px solid var(--ams-navy-600);
	color: var(--ams-teal-300);
	border-radius: 8px;
	min-width: 42px;
	padding: 0.35rem 0.5rem;
	font-family: var(--ams-mono);
	font-size: 0.85rem;
	cursor: pointer;
	transition: all 0.15s ease;
}
.ams-quickkeys button:hover { background: var(--ams-teal-500); color: var(--ams-navy-900); border-color: var(--ams-teal-500); }

/* ---------- Solve button ---------- */
.ams-solve {
	margin-top: 1.1rem;
	background: linear-gradient(135deg, var(--ams-teal-500), var(--ams-teal-400));
	color: var(--ams-navy-900);
	border: none;
	font-weight: 700;
	font-size: 0.95rem;
	padding: 0.7rem 1.8rem;
	border-radius: var(--ams-radius);
	cursor: pointer;
	font-family: inherit;
	letter-spacing: 0.02em;
	box-shadow: 0 6px 18px rgba(20, 184, 166, 0.35);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ams-solve:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(20, 184, 166, 0.45); }
.ams-solve:active { transform: translateY(0); }
.ams-solve:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Result ---------- */
.ams-result {
	margin-top: 1.4rem;
	background: var(--ams-navy-800);
	border: 1px solid var(--ams-teal-500);
	border-radius: var(--ams-radius);
	padding: 1rem 1.2rem 1.2rem;
	animation: ams-pop 0.25s ease;
}
@keyframes ams-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.ams-result { animation: none; }
	.ams-solve, .ams-tab, .ams-quickkeys button { transition: none; }
}
.ams-result-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; }
.ams-result-badge {
	background: var(--ams-teal-500);
	color: var(--ams-navy-900);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
}
.ams-copy {
	background: transparent;
	border: 1px solid var(--ams-navy-600);
	color: var(--ams-ink-dim);
	font-size: 0.75rem;
	border-radius: 8px;
	padding: 0.25rem 0.7rem;
	cursor: pointer;
	font-family: inherit;
}
.ams-copy:hover { color: var(--ams-teal-300); border-color: var(--ams-teal-500); }
.ams-result-steps { font-size: 0.85rem; color: var(--ams-ink-dim); font-family: var(--ams-mono); white-space: pre-wrap; }
.ams-result-steps:not(:empty) { margin-bottom: 0.7rem; padding-bottom: 0.7rem; border-bottom: 1px dashed var(--ams-navy-600); }
.ams-result-value {
	font-family: var(--ams-mono);
	font-size: 1.25rem;
	color: var(--ams-teal-300);
	word-break: break-word;
	white-space: pre-wrap;
}

.ams-error {
	margin-top: 1.2rem;
	background: rgba(248, 113, 113, 0.08);
	border: 1px solid rgba(248, 113, 113, 0.5);
	color: var(--ams-danger);
	border-radius: var(--ams-radius);
	padding: 0.8rem 1rem;
	font-size: 0.88rem;
}

/* ---------- History ---------- */
.ams-history {
	background: var(--ams-navy-800);
	border-left: 1px solid var(--ams-navy-600);
	padding: 1.4rem 1.2rem;
	display: flex;
	flex-direction: column;
	max-height: 720px;
}
.ams-history-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.ams-history-head h3 { margin: 0; font-size: 1rem; color: #fff; }
.ams-history-count {
	background: var(--ams-navy-600);
	color: var(--ams-teal-300);
	font-size: 0.72rem;
	font-weight: 700;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
}
.ams-history-tools { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.8rem; }
.ams-history-tools .ams-input--small { width: 100%; min-width: 0; }

.ams-history-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.ams-history-item {
	background: var(--ams-navy-700);
	border: 1px solid var(--ams-navy-600);
	border-radius: 10px;
	padding: 0.6rem 0.7rem;
	margin-bottom: 0.55rem;
	cursor: pointer;
	transition: border-color 0.15s ease;
	position: relative;
}
.ams-history-item:hover { border-color: var(--ams-teal-500); }
.ams-history-item-mode {
	font-size: 0.62rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--ams-teal-400);
	font-weight: 700;
}
.ams-history-item-expr { font-family: var(--ams-mono); font-size: 0.8rem; color: var(--ams-ink); margin: 0.15rem 0; word-break: break-all; }
.ams-history-item-result { font-family: var(--ams-mono); font-size: 0.78rem; color: var(--ams-teal-300); word-break: break-all; }
.ams-history-item-time { font-size: 0.65rem; color: var(--ams-ink-dim); margin-top: 0.2rem; }
.ams-history-item-delete {
	position: absolute; top: 0.4rem; right: 0.4rem;
	background: transparent; border: none;
	color: var(--ams-ink-dim);
	font-size: 0.9rem; line-height: 1;
	cursor: pointer; padding: 0.15rem 0.3rem; border-radius: 6px;
}
.ams-history-item-delete:hover { color: var(--ams-danger); background: rgba(248,113,113,0.12); }
.ams-history-empty { font-size: 0.8rem; color: var(--ams-ink-dim); text-align: center; padding: 1.5rem 0.5rem; }

/* ---------- Export ---------- */
.ams-export { border-top: 1px solid var(--ams-navy-600); padding-top: 0.9rem; margin-top: 0.9rem; }
.ams-export-label { display: block; font-size: 0.72rem; font-weight: 700; color: var(--ams-teal-300); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 0.5rem; }
.ams-export-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.ams-export-buttons button {
	background: var(--ams-navy-700);
	border: 1px solid var(--ams-navy-600);
	color: var(--ams-ink);
	font-size: 0.72rem;
	font-weight: 600;
	padding: 0.45rem 0.2rem;
	border-radius: 8px;
	cursor: pointer;
	font-family: inherit;
	transition: all 0.15s ease;
}
.ams-export-buttons button:hover { background: var(--ams-teal-500); color: var(--ams-navy-900); border-color: var(--ams-teal-500); }
.ams-clear {
	width: 100%;
	margin-top: 0.6rem;
	background: transparent;
	border: 1px solid rgba(248, 113, 113, 0.4);
	color: var(--ams-danger);
	font-size: 0.75rem;
	padding: 0.45rem;
	border-radius: 8px;
	cursor: pointer;
	font-family: inherit;
}
.ams-clear:hover { background: rgba(248, 113, 113, 0.1); }

/* ---------- Clickable examples ---------- */
.ams-examples {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 0.35rem; margin-top: 0.7rem;
}
.ams-examples span { font-size: 0.72rem; color: var(--ams-ink-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-right: 0.15rem; }
.ams-examples button {
	background: transparent;
	border: 1px dashed var(--ams-navy-600);
	color: var(--ams-teal-300);
	border-radius: 999px;
	padding: 0.28rem 0.7rem;
	font-family: var(--ams-mono);
	font-size: 0.75rem;
	cursor: pointer;
	transition: all 0.15s ease;
}
.ams-examples button:hover { border-color: var(--ams-teal-500); border-style: solid; background: rgba(20, 184, 166, 0.12); }
.ams-examples button:focus-visible { outline: 2px solid var(--ams-teal-300); outline-offset: 2px; }

/* ---------- Graph canvas ---------- */
.ams-canvas {
	display: block;
	width: 100%;
	height: auto;
	margin-top: 1.2rem;
	background: var(--ams-navy-800);
	border: 1px solid var(--ams-navy-600);
	border-radius: var(--ams-radius);
}

/* ---------- Step-by-step block ---------- */
.ams-result-steps .ams-step-title { color: var(--ams-teal-400); font-weight: 700; }