:root {
  --ink: #1e2420;
  --muted: #5c675e;
  --paper: #f4f0e8;
  --card: #fbfaf6;
  --line: #dcdbd0;
  --accent: #e36d3f;
  --accent-dark: #b84d27;
  --mint: #d9ecdf;
  --shadow: 0 20px 50px rgba(43, 50, 39, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: radial-gradient(1100px 520px at 78% -6%, #fbf2e7 0%, var(--paper) 58%) var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid rgba(227, 109, 63, 0.7); outline-offset: 2px; }
.shell { width: min(1080px, calc(100% - 40px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  width: 100%;
  padding: 16px max(20px, calc((100% - 1160px) / 2));
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 1px solid rgba(220, 219, 208, 0.75);
  background: rgba(246, 242, 234, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.brand { display: inline-flex; gap: 10px; align-items: center; color: var(--ink); text-decoration: none; font-weight: 760; letter-spacing: -0.02em; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #fff8f1; background: #a74f45; font-size: 12px; font-weight: 800; letter-spacing: .03em; box-shadow: 0 4px 10px rgba(167, 79, 69, 0.28); }
.brand-mark svg { width: 16px; height: 16px; }
.header-note { color: var(--muted); font-size: 13px; }
.header-note { margin-left: auto; }
.header-nav { display: flex; gap: 20px; margin-left: 28px; }
.header-nav a { color: var(--muted); font-size: 13px; text-decoration: none; }
.header-nav a:hover { color: var(--accent-dark); }

.hero { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); gap: 54px; align-items: center; padding: 74px 0 58px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.hero-chips span { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: rgba(251, 250, 246, 0.85); color: var(--muted); font-size: 12px; font-weight: 700; }
.hero-art { position: relative; }
.hero-art img { display: block; width: 100%; height: auto; border-radius: 28px; box-shadow: var(--shadow); }
.eyebrow { color: var(--accent-dark); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 760px; margin: 15px 0 24px; font-size: clamp(40px, 5.4vw, 74px); line-height: .98; letter-spacing: -.06em; font-weight: 760; }
h1 em, h2 em { color: var(--accent); font-family: Georgia, serif; font-weight: 500; }
.hero-copy { max-width: 560px; color: var(--muted); font-size: 18px; }

.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 28px; align-items: start; }
.tool-card { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: var(--shadow); }
.tool-topline { display: flex; align-items: center; gap: 8px; padding: 16px 22px; color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--line); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #55a16b; box-shadow: 0 0 0 4px var(--mint); }
.topline-spacer { flex: 1; }
.file-limit { font-size: 11px; }
.mode-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 13px 22px 0; border-bottom: 1px solid var(--line); }
.mode-tab { padding: 8px 11px 13px; color: var(--muted); border: 0; border-bottom: 2px solid transparent; background: transparent; font-size: 13px; font-weight: 740; }
.mode-tab:hover, .mode-tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.tab-index { margin-right: 6px; color: var(--accent-dark); font-size: 10px; letter-spacing: .08em; }
.drop-zone { min-height: 280px; margin: 20px; padding: 45px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1.5px dashed #bfc1b4; border-radius: 15px; background: #f7f6f0; transition: border-color .2s, background .2s, transform .2s; }
.drop-zone:hover, .drop-zone.dragging, .drop-zone:focus-visible { border-color: var(--accent); background: #fff9f0; outline: none; transform: translateY(-2px); }
.drop-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 16px; border-radius: 50%; color: var(--accent-dark); background: #f6ddd1; font-size: 28px; line-height: 1; }
.drop-title { font-size: 21px; font-weight: 720; letter-spacing: -.02em; }
.drop-subtitle { margin-top: 6px; color: var(--muted); font-size: 14px; }
.drop-subtitle u { color: var(--accent-dark); text-underline-offset: 3px; }

.controls { display: grid; grid-template-columns: 1fr 1.25fr auto; gap: 18px; align-items: end; padding: 0 22px 22px; }
.controls[hidden], .results[hidden] { display: none; }
.resize-fields[hidden], .preset-row[hidden] { display: none; }
.control-group { display: grid; gap: 8px; }
.control-group label { color: var(--muted); font-size: 12px; font-weight: 700; }
select { min-height: 44px; padding: 0 12px; color: var(--ink); border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.label-row { display: flex; justify-content: space-between; align-items: center; }
output { color: var(--accent-dark); font-size: 12px; font-weight: 800; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.resize-fields { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 44px 1fr 44px auto; gap: 8px; align-items: center; }
.resize-fields input[type="number"] { width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.field-unit { color: #969b92; font-size: 11px; }
.check-label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.check-label input { accent-color: var(--accent); }
.range-hints { display: flex; justify-content: space-between; color: #969b92; font-size: 10px; }
.button { min-height: 44px; padding: 0 17px; border: 0; border-radius: 9px; font-weight: 750; white-space: nowrap; }
.button span { margin-left: 6px; font-size: 17px; }
.primary { color: #fff; background: var(--ink); }
.primary:hover { background: #3c473e; }
.secondary { color: var(--ink); background: #ecebe2; }
.secondary:hover { background: #e0dfd4; }

.file-list { display: grid; gap: 9px; padding: 0 22px 22px; }
.file-row, .result-row { display: flex; gap: 12px; align-items: center; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.file-icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 7px; background: #edf0e9; color: #55705c; font-size: 12px; font-weight: 800; }
.file-meta { min-width: 0; flex: 1; }
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }
.file-size { color: var(--muted); font-size: 11px; }
.file-remove { border: 0; color: #90958d; background: transparent; font-size: 18px; }
.file-remove:hover { color: var(--accent-dark); }
.results { padding: 23px 22px 22px; border-top: 1px solid var(--line); background: #f2f3ec; }
.results-heading { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.results-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.results-summary { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.results h3 { margin: 5px 0 0; font-size: 22px; letter-spacing: -.03em; }
#result-list { display: grid; gap: 9px; }
.result-row { background: var(--card); }
.savings { color: #32814e; font-size: 11px; font-weight: 800; }
.download-one { min-height: 34px; padding: 0 11px; font-size: 12px; }
.error-note { margin: 0 22px 22px; padding: 12px 14px; color: #9a4028; border-radius: 8px; background: #fbe7de; font-size: 13px; }
.larger { color: #b05b38; }
.neutral { color: var(--muted); }
.preset-row { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; padding: 0 22px 22px; }
.preset-label { margin-right: 3px; color: var(--muted); font-size: 11px; font-weight: 720; }
.preset-row button { padding: 7px 9px; color: var(--muted); border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 11px; }
.preset-row button[hidden] { display: none; }
.preset-row button:hover, .preset-row button.active { color: var(--accent-dark); border-color: #e2a28a; background: #fff7f0; }
.ad-slot { min-height: 250px; display: grid; place-items: center; color: #a4a89e; border: 1px dashed #cfd0c5; border-radius: 14px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

.tool-directory { padding: 120px 0 20px; }
.directory-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; }
.directory-heading h2, .guide h2 { margin: 14px 0 0; font-size: clamp(34px, 4vw, 54px); line-height: 1.03; letter-spacing: -.06em; }
.directory-heading p { max-width: 360px; margin: 0 0 5px; color: var(--muted); font-size: 15px; }
.tool-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 42px; }
.tool-card-link { position: relative; overflow: hidden; min-height: 178px; padding: 20px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: rgba(251, 250, 246, 0.55); color: var(--ink); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.tool-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity .25s ease; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(227, 109, 63, 0.10), transparent 62%); }
.tool-card-link:hover::after { opacity: 1; }
.card-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.card-icon { display: block; width: 44px; height: 44px; border-radius: 12px; transition: transform .22s ease; }
.tool-card-link:hover .card-icon { transform: scale(1.08) rotate(-4deg); }
.tool-card-link:hover, .tool-card-link.selected { border-color: #dc9c83; background: #fff8f1; transform: translateY(-4px); box-shadow: 0 16px 34px rgba(43, 50, 39, 0.12); }
.tool-card-link .card-number { display: inline-grid; place-items: center; height: 24px; min-width: 30px; padding: 0 8px; border-radius: 999px; color: #a74f45; background: #f6ddd1; font-size: 11px; font-weight: 800; letter-spacing: .05em; }
.tool-card-link strong { margin-top: 16px; font-size: 16.5px; letter-spacing: -.02em; }
.tool-card-link span:not(.card-number) { margin-top: 8px; color: var(--muted); font-size: 13px; }
.tool-card-link b { margin-top: auto; color: var(--accent-dark); font-size: 12px; transition: transform .18s ease; }
.tool-card-link:hover b { transform: translateX(4px); }

.details { padding: 130px 0 100px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; }
.details h2 { margin: 15px 0 0; font-size: clamp(34px, 4vw, 54px); line-height: 1.03; letter-spacing: -.06em; }
.detail-grid { display: grid; gap: 28px; }
.detail-grid article { display: grid; grid-template-columns: 40px 1fr; column-gap: 15px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.detail-grid .number { color: var(--accent-dark); font-size: 12px; font-weight: 800; }
.detail-grid h3 { margin-bottom: 5px; font-size: 17px; }
.detail-grid p { grid-column: 2; margin: 0; color: var(--muted); font-size: 14px; }
.faq { max-width: 760px; padding-bottom: 100px; }
.faq details { padding: 20px 0; border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 720; }
.faq p { max-width: 620px; margin: 14px 0 0; color: var(--muted); font-size: 14px; }
.guide { padding: 40px 0 110px; }
.format-table { margin-top: 35px; border-top: 1px solid var(--line); }
.format-row { display: grid; grid-template-columns: .7fr 1.3fr 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.format-row strong { color: var(--ink); }
.format-head { color: #92978f; font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.guide-copy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 35px; }
.guide-copy p { margin: 0; color: var(--muted); font-size: 13px; }
.guide-copy strong { color: var(--ink); }

.standalone-main { padding: 65px 0 110px; }
.standalone-hero { max-width: 700px; padding-bottom: 35px; }
.standalone-hero h1 { font-size: clamp(42px, 6vw, 68px); }
.standalone-hero p { max-width: 570px; color: var(--muted); font-size: 17px; }
.standalone-card { max-width: 860px; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--shadow); }
.standalone-picker { min-height: 180px; }
.standalone-result { margin-top: 18px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.standalone-result[hidden] { display: none; }
.standalone-result h2 { margin: 0 0 17px; font-size: 20px; letter-spacing: -.03em; }
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.info-item { padding: 14px; border-radius: 9px; background: #fff; }
.info-item span { display: block; color: var(--muted); font-size: 11px; }
.info-item strong { display: block; margin-top: 5px; font-size: 17px; }
.palette-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.swatch { min-height: 130px; padding: 10px; display: flex; align-items: flex-end; border-radius: 9px; color: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.swatch span { width: 100%; padding: 5px 6px; border-radius: 5px; background: rgba(0,0,0,.48); font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.base64-output { width: 100%; min-height: 160px; padding: 13px; resize: vertical; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.standalone-actions { display: flex; gap: 8px; margin-top: 13px; }
.standalone-note { margin-top: 16px; color: var(--muted); font-size: 12px; }
.standalone-faq { max-width: 860px; margin-top: 60px; }
.preview-canvas { display: block; width: 100%; max-height: 560px; object-fit: contain; border: 1px solid var(--line); border-radius: 10px; background: repeating-conic-gradient(#f0f0eb 0 25%, #fff 0 50%) 50% / 18px 18px; }
.standalone-controls { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 14px; align-items: end; margin-top: 18px; }
.standalone-controls .control-group { display: grid; gap: 8px; }
.standalone-controls label { color: var(--muted); font-size: 12px; font-weight: 700; }
.standalone-controls select, .standalone-controls input[type="text"], .standalone-controls input[type="number"] { min-height: 42px; width: 100%; padding: 0 11px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.standalone-controls input[type="range"] { width: 100%; accent-color: var(--accent); }
.standalone-controls[hidden] { display: none; }
.tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tile-card { min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.tile-card canvas { display: block; width: 100%; height: auto; border-radius: 5px; background: #f2f3ec; }
.tile-card strong { display: block; margin: 8px 0; font-size: 12px; }
.tile-card .button { width: 100%; min-height: 34px; padding: 0 8px; font-size: 11px; }
.watermark-preview { position: relative; }
.watermark-preview .preview-canvas { position: relative; z-index: 1; }
.control-hint { color: #969b92; font-size: 10px; }
.color-picker-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 18px; align-items: start; }
.color-sample { min-height: 220px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.color-sample-chip { width: 100%; height: 96px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.color-sample strong { display: block; margin-top: 14px; font: 700 18px ui-monospace, SFMono-Regular, Menlo, monospace; }
.color-sample span { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.calculator-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.three-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.commerce-form { gap: 16px; }
.commerce-form .control-group { min-width: 0; }
.commerce-result { margin-top: 0; }
.commerce-form .check-label { min-height: 42px; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.commerce-form .check-label input { accent-color: var(--accent); }
.calculator-grid .control-group { display: grid; gap: 7px; }
.calculator-grid label { color: var(--muted); font-size: 12px; font-weight: 700; }
.calculator-grid input, .calculator-grid select { min-height: 42px; width: 100%; padding: 0 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.calculator-result { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.calculator-result .info-item { background: #f2f3ec; }
.tool-textarea { width: 100%; min-height: 220px; padding: 14px; resize: vertical; color: var(--ink); border: 1px solid var(--line); border-radius: 9px; background: #fff; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.tool-textarea:focus, .simple-tool-form input:focus, .simple-tool-form select:focus { outline: 2px solid #e9b49e; outline-offset: 1px; }
.simple-tool-form { display: grid; gap: 13px; }
.simple-tool-form .control-group { display: grid; gap: 7px; }
.simple-tool-form label { color: var(--muted); font-size: 12px; font-weight: 700; }
.simple-tool-form input, .simple-tool-form select { min-height: 43px; width: 100%; padding: 0 11px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.simple-tool-form .two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tool-output { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #f2f3ec; }
.tool-output code { display: block; overflow-wrap: anywhere; color: var(--ink); font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.hashtag-output { display: grid; gap: 9px; }
.hashtag-output p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; }
.hashtag-output code { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.tool-output[hidden] { display: none; }
.dev-output { min-height: 150px; }
.dev-output-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dev-output-grid > div, .regex-replacement { display: grid; gap: 7px; }
.dev-output-grid label, .regex-replacement strong { color: var(--muted); font-size: 12px; font-weight: 700; }
.dev-claim-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.dev-chip { display: inline-flex; gap: 7px; align-items: baseline; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); font-size: 11px; }
.dev-chip strong { color: var(--ink); }
.dev-muted { color: var(--muted); font-size: 12px; }
.regex-table-wrap { margin-top: 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.regex-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.regex-table th { padding: 9px 10px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 10px; text-align: left; text-transform: uppercase; }
.regex-table td { padding: 9px 10px; border-bottom: 1px solid #ecebe3; vertical-align: top; }
.regex-table td:first-child, .regex-table td:nth-child(3) { width: 70px; color: var(--muted); }
.regex-table code, .regex-replacement code { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.regex-replacement { margin-top: 16px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.markdown-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.markdown-layout > div { min-width: 0; }
.markdown-layout label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.markdown-input { min-height: 430px; }
.markdown-preview { min-height: 430px; padding: 18px; overflow: auto; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); line-height: 1.6; }
.markdown-preview h1, .markdown-preview h2, .markdown-preview h3, .markdown-preview h4, .markdown-preview h5, .markdown-preview h6 { margin: 0 0 12px; letter-spacing: -.03em; }
.markdown-preview p, .markdown-preview ul, .markdown-preview ol, .markdown-preview blockquote, .markdown-preview pre { margin: 0 0 13px; }
.markdown-preview ul, .markdown-preview ol { padding-left: 22px; }
.markdown-preview blockquote { padding-left: 12px; color: var(--muted); border-left: 3px solid #e2a28a; }
.markdown-preview code { padding: 2px 4px; border-radius: 4px; background: #f2f3ec; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.markdown-preview pre { padding: 13px; overflow: auto; border-radius: 8px; background: #26312f; color: #f5f4ec; }
.markdown-preview pre code { padding: 0; background: transparent; color: inherit; }
.markdown-preview a { color: var(--accent-dark); }
.markdown-html { min-height: 120px; margin-top: 16px; }
.cron-fields { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cron-output h3 { margin: 22px 0 10px; font-size: 16px; }
.cron-runs { margin: 0; padding-left: 20px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.subnet-details { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin-top: 16px; color: var(--muted); font-size: 12px; }
.subnet-details p { margin: 0; }
.subnet-details strong { color: var(--ink); }
.pdf-toolbar { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; color: var(--muted); font-size: 12px; }
.pdf-file-list { display: grid; gap: 8px; margin-top: 12px; }
.pdf-file-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 30px 30px 30px; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.pdf-file-row strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.pdf-file-index, .pdf-file-size { color: var(--muted); font-size: 11px; }
.pdf-file-size { text-align: right; }
.pdf-action { width: 30px; min-height: 30px; padding: 0; }
.pdf-error { color: #a84e3a; background: #fff2ed; }
.choice-row { display: flex; flex-wrap: wrap; gap: 12px 18px; color: var(--muted); font-size: 12px; }
.choice-row label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.choice-row input { accent-color: var(--accent); }
.password-output { min-height: 50px; resize: none; font-size: 16px; letter-spacing: .04em; }
.counter-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.counter-metrics .info-item { background: #f2f3ec; }
.timezone-list { display: grid; gap: 9px; margin-top: 18px; }
.timezone-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.timezone-row strong { font-size: 13px; }
.timezone-row span { color: var(--muted); font-size: 12px; }
.target-result { margin-top: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #f2f3ec; }
.target-result[hidden] { display: none; }
.target-result h2 { margin: 0 0 12px; font-size: 18px; }
.target-result .info-grid { margin-top: 14px; }
.qr-preview { display: grid; place-items: center; min-height: 300px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: #f2f3ec; }
.qr-preview canvas { display: block; max-width: min(100%, 420px); height: auto; image-rendering: pixelated; background: #fff; }
.barcode-preview { display: grid; place-items: center; min-height: 220px; padding: 20px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: #f2f3ec; }
.barcode-preview canvas { display: block; max-width: 100%; height: auto; background: #fff; }
.invoice-layout { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: 18px; align-items: start; }
.invoice-form { display: grid; gap: 12px; }
.invoice-preview { min-width: 0; padding: 25px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.invoice-preview header { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 22px; border-bottom: 2px solid var(--ink); }
.invoice-preview header strong { font-size: 20px; letter-spacing: -.04em; }
.invoice-preview header span { color: var(--muted); font-size: 12px; text-align: right; }
.invoice-preview h2 { margin: 24px 0 4px; font-size: 27px; letter-spacing: -.05em; }
.invoice-preview .bill-to { color: var(--muted); font-size: 12px; }
.invoice-items { width: 100%; margin-top: 25px; border-collapse: collapse; font-size: 12px; }
.invoice-items th { padding: 8px 0; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 10px; text-align: left; text-transform: uppercase; }
.invoice-items td { padding: 10px 0; border-bottom: 1px solid #ecebe3; }
.invoice-items th:not(:first-child), .invoice-items td:not(:first-child) { text-align: right; }
.invoice-totals { display: grid; gap: 7px; max-width: 230px; margin: 18px 0 0 auto; font-size: 12px; }
.invoice-total-row { display: flex; justify-content: space-between; gap: 18px; }
.invoice-total-row.total { padding-top: 9px; border-top: 2px solid var(--ink); font-weight: 800; font-size: 15px; }
.invoice-item-editor { display: grid; grid-template-columns: minmax(0, 1.5fr) 70px 90px 34px; gap: 7px; align-items: center; }
.invoice-item-editor input { min-height: 38px; width: 100%; padding: 0 8px; color: var(--ink); border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.invoice-item-editor button { min-height: 34px; border: 0; border-radius: 7px; color: var(--accent-dark); background: #f6ddd1; font-size: 17px; }
.invoice-items-editor { display: grid; gap: 7px; }
.invoice-form .button { justify-self: start; }
.expense-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.expense-table-wrap { margin-top: 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.expense-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 12px; }
.expense-table th { padding: 10px 12px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 10px; text-align: left; text-transform: uppercase; }
.expense-table td { padding: 11px 12px; border-bottom: 1px solid #ecebe3; }
.expense-table td:nth-child(4), .expense-table th:nth-child(4) { text-align: right; }
.expense-table td:last-child, .expense-table th:last-child { width: 44px; text-align: center; }
.empty-row { color: var(--muted); text-align: center !important; }
.table-remove { width: 28px; height: 28px; border: 0; border-radius: 6px; color: var(--accent-dark); background: #f6ddd1; font-size: 16px; }
.inventory-status { display: inline-block; padding: 4px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.inventory-status.ok { color: #34734a; background: #e2f0e5; }
.inventory-status.low { color: #9a4028; background: #fbe7de; }
.inventory-columns { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #f2f3ec; }
.expense-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.expense-summary .info-item { background: #f2f3ec; }
.timesheet-controls { grid-template-columns: 1fr 1fr 1fr; }
.timesheet-table-wrap { margin-top: 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.timesheet-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 12px; }
.timesheet-table th { padding: 10px 12px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 10px; text-align: left; text-transform: uppercase; }
.timesheet-table td { padding: 10px 12px; border-bottom: 1px solid #ecebe3; vertical-align: middle; }
.timesheet-table td:first-child { width: 150px; }
.timesheet-table td:first-child strong, .timesheet-table td:first-child span { display: block; }
.timesheet-table td:first-child span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.timesheet-table input[type="text"], .timesheet-table input[type="number"] { min-height: 38px; width: 100%; padding: 0 9px; color: var(--ink); border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.timesheet-table input[type="number"] { width: 100px; }
.cluster-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.cluster-summary .info-item { background: #f2f3ec; }
.cluster-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; }
.cluster-card { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.cluster-card header { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.cluster-card header strong { font-size: 16px; }
.cluster-card header span { color: var(--muted); font-size: 11px; }
.cluster-card ul { min-height: 76px; margin: 12px 0; padding-left: 18px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.cluster-card .button { min-height: 34px; padding: 0 10px; font-size: 11px; }
.checklist-editor { display: grid; gap: 18px; margin-top: 20px; }
.checklist-group { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.checklist-group h3 { margin: 0 0 12px; font-size: 15px; }
.checklist-item { display: flex; gap: 9px; align-items: flex-start; padding: 9px 0; color: var(--muted); border-top: 1px solid #ecebe3; font-size: 13px; line-height: 1.45; }
.checklist-item:first-of-type { border-top: 0; }
.checklist-item input { margin-top: 3px; accent-color: var(--accent); }
.inline-input { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.checklist-output { margin-top: 18px; padding: 16px; overflow: auto; white-space: pre-wrap; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; background: #f2f3ec; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.template-output { margin-top: 18px; padding: 20px; overflow: auto; white-space: pre-wrap; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; background: #f2f3ec; font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; }
.template-output:empty { display: none; }
.template-help { margin-top: 12px; color: var(--muted); font-size: 12px; }
.serp-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.serp-metric { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #f2f3ec; }
.serp-metric span, .serp-metric small { display: block; color: var(--muted); font-size: 11px; }
.serp-metric strong { display: block; margin: 5px 0; font-size: 14px; }
.serp-previews { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.serp-preview-panel { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.preview-label { margin-bottom: 11px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.google-result { min-height: 138px; font-family: Arial, sans-serif; }
.google-url { overflow: hidden; color: #202124; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.google-url span { color: #5f6368; }
.google-title { overflow: hidden; margin: 4px 0; color: #1a0dab; font-size: 20px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.google-description { display: -webkit-box; overflow: hidden; color: #4d5156; font-size: 14px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.mobile-result .google-title { font-size: 18px; }
.mobile-result .google-description { font-size: 13px; -webkit-line-clamp: 2; }
.svg-controls { grid-template-columns: 1fr 1fr 1fr auto; margin-top: 20px; }
.svg-controls input[type="color"] { width: 100%; height: 44px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.svg-status { margin-top: 18px; padding: 12px 14px; color: var(--muted); border-radius: 9px; background: #f2f3ec; font-size: 13px; }
.svg-preview { min-height: 240px; margin-top: 14px; display: grid; place-items: center; overflow: auto; padding: 18px; border: 1px dashed #bfc1b4; border-radius: 12px; background: repeating-conic-gradient(#f2f2ec 0 25%, #fff 0 50%) 50% / 18px 18px; }
.svg-preview > span { color: var(--muted); font-size: 13px; }
.svg-canvas { display: block; max-height: 520px; box-shadow: 0 12px 25px rgba(43, 50, 39, .1); }
.html-md-layout { margin-top: 6px; }
.html-md-layout .markdown-input { min-height: 330px; }
.favicon-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.favicon-card { display: grid; gap: 10px; justify-items: center; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-align: center; }
.favicon-card strong { font-size: 12px; }
.favicon-card .button { min-height: 34px; padding: 0 11px; font-size: 11px; }
.favicon-preview { width: 96px; height: 96px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: repeating-conic-gradient(#f0f0eb 0 25%, #fff 0 50%) 50% / 14px 14px; image-rendering: auto; }
.schema-output { max-height: 560px; overflow: auto; }
.schema-faq-fields { display: grid; gap: 12px; }
.privacy-card { display: grid; gap: 0; }
.privacy-card article { padding: 20px 0; border-bottom: 1px solid var(--line); }
.privacy-card article:first-child { padding-top: 0; }
.privacy-card article:last-child { border-bottom: 0; padding-bottom: 0; }
.privacy-card h2 { margin: 0 0 8px; font-size: 19px; letter-spacing: -.03em; }
.privacy-card p { max-width: 700px; margin: 0; color: var(--muted); font-size: 14px; }
.site-footer a { color: var(--accent-dark); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.og-editor { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px; align-items: start; }
.og-preview-wrap { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.og-canvas { display: block; width: 100%; height: auto; border-radius: 9px; box-shadow: 0 14px 30px rgba(43, 50, 39, .15); }
.og-editor input[type="color"] { height: 43px; padding: 4px; }
.json-validator-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.json-validator-layout .tool-textarea { min-height: 340px; }
.json-validator-result { min-height: 340px; padding: 14px; overflow: auto; border: 1px solid var(--line); border-radius: 9px; background: #f2f3ec; }
.json-state { display: grid; gap: 5px; padding: 13px; border-radius: 9px; }
.json-state strong { font-size: 15px; }
.json-state span { color: var(--muted); font-size: 12px; }
.valid-state { color: #2f7448; background: #e2f0e5; }
.invalid-state { color: #9a4028; background: #fbe7de; }
.neutral-state { color: var(--muted); background: #ecebe2; }
.json-formatted { margin: 14px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.schema-validator-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.schema-validator-layout .tool-textarea { min-height: 370px; }
.schema-validator-result { margin-top: 18px; min-height: 86px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: #f2f3ec; }
.schema-errors { margin: 14px 0 0; padding-left: 20px; color: #9a4028; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.reminder-output { display: grid; gap: 18px; }
.reminder-subject { display: grid; gap: 7px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.reminder-subject span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.reminder-subject strong { font-size: 16px; }
.reminder-body { white-space: pre-wrap; color: var(--ink); font-size: 14px; line-height: 1.65; }
.back-link { display: inline-flex; margin-bottom: 30px; color: var(--accent-dark); font-size: 13px; text-decoration: none; }
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 30px 0 44px; margin-top: 30px; color: var(--muted); border-top: 1px solid var(--line); font-size: 12px; }

@media (max-width: 800px) {
  .workspace, .details { grid-template-columns: 1fr; }
  .ad-slot { min-height: 90px; }
  .details { gap: 40px; padding-top: 85px; }
  .directory-heading { grid-template-columns: 1fr; gap: 20px; }
  .tool-cards, .guide-copy { grid-template-columns: 1fr; }
  .tool-card-link { min-height: 170px; }
  .palette-grid { grid-template-columns: repeat(3, 1fr); }
  .tile-grid { grid-template-columns: repeat(3, 1fr); }
  .color-picker-layout { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .shell, .site-header { width: min(100% - 28px, 1080px); }
  .site-header { padding: 18px 0; }
  .header-note { display: none; }
  .header-nav { margin-left: auto; gap: 12px; }
  .hero { padding: 58px 0 42px; }
  h1 { font-size: 52px; }
  .controls { grid-template-columns: 1fr; }
  .resize-fields { grid-template-columns: 1fr 34px; }
  .resize-fields .check-label { grid-column: 1 / -1; }
  .resize-fields label:nth-of-type(2), .resize-fields label:nth-of-type(2) + .field-unit { margin-top: 8px; }
  .resize-fields input:nth-of-type(2) { margin-top: 8px; }
  .results-heading { align-items: flex-start; flex-direction: column; }
  .site-footer { flex-direction: column; }
  .format-row { grid-template-columns: 1fr 1fr; }
  .format-row span:last-child { grid-column: 2; }
  .format-head { display: none; }
  .info-grid { grid-template-columns: repeat(2, 1fr); }
  .palette-grid { grid-template-columns: repeat(2, 1fr); }
  .standalone-controls { grid-template-columns: 1fr; }
  .dev-output-grid { grid-template-columns: 1fr; }
  .markdown-layout { grid-template-columns: 1fr; }
  .markdown-input, .markdown-preview { min-height: 260px; }
  .subnet-details { grid-template-columns: 1fr; }
  .pdf-toolbar { align-items: flex-start; flex-direction: column; }
  .pdf-file-row { grid-template-columns: 24px minmax(0, 1fr) 30px 30px 30px; }
  .pdf-file-size { display: none; }
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .calculator-grid, .calculator-result { grid-template-columns: 1fr 1fr; }
  .three-columns { grid-template-columns: 1fr 1fr; }
  .simple-tool-form .two-columns { grid-template-columns: 1fr; }
  .counter-metrics { grid-template-columns: 1fr 1fr; }
  .expense-summary { grid-template-columns: 1fr 1fr; }
  .timesheet-controls, .cluster-results { grid-template-columns: 1fr; }
  .cluster-summary { grid-template-columns: 1fr 1fr; }
  .inline-input { grid-template-columns: 1fr; }
  .timezone-row { grid-template-columns: 1fr 1fr; }
  .invoice-layout { grid-template-columns: 1fr; }
  .serp-metrics, .serp-previews, .svg-controls { grid-template-columns: 1fr; }
  .favicon-results { grid-template-columns: repeat(2, 1fr); }
  .og-editor { grid-template-columns: 1fr; }
  .json-validator-layout { grid-template-columns: 1fr; }
  .json-validator-layout .tool-textarea, .json-validator-result { min-height: 260px; }
  .schema-validator-layout { grid-template-columns: 1fr; }
  .schema-validator-layout .tool-textarea { min-height: 260px; }
}

@media print {
  body { background: #fff; }
  .site-header, .standalone-hero, .standalone-card > :not(.invoice-layout), .ad-slot, .standalone-faq, .site-footer, .back-link { display: none !important; }
  .standalone-main, .invoice-layout, .invoice-preview { padding: 0; margin: 0; border: 0; box-shadow: none; }
  .invoice-layout { display: block; }
  .invoice-preview { display: block; }
}

.ratio-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(230px, .8fr); gap: 22px; margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--line); }
.ratio-layout h3 { margin: 7px 0 5px; font-size: 22px; letter-spacing: -.035em; }
.ratio-controls { display: grid; grid-template-columns: 1.25fr .8fr .8fr; gap: 12px; margin-top: 17px; }
.ratio-controls .control-group, .custom-ratio-fields .control-group { display: grid; gap: 7px; }
.ratio-controls label, .custom-ratio-fields label { color: var(--muted); font-size: 12px; font-weight: 700; }
.ratio-controls input, .ratio-controls select, .custom-ratio-fields input { min-height: 42px; width: 100%; padding: 0 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.custom-ratio-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.custom-ratio-fields[hidden] { display: none; }
.ratio-output { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-top: 18px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: #f2f3ec; }
.ratio-output span { color: var(--muted); font-size: 12px; }
.ratio-output strong { font-size: 20px; letter-spacing: -.03em; }
.ratio-output .button { margin-left: auto; min-height: 34px; padding: 0 11px; font-size: 11px; }
.ratio-preview-wrap { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.ratio-preview { display: grid; min-height: 230px; place-items: center; padding: 18px; border: 1px dashed #bfc1b4; border-radius: 9px; background: repeating-conic-gradient(#f2f2ec 0 25%, #fff 0 50%) 50% / 18px 18px; }
.ratio-preview-shape { width: min(100%, 280px); max-height: 230px; display: grid; place-items: center; overflow: hidden; border: 2px solid var(--accent-dark); border-radius: 8px; background: linear-gradient(135deg, rgba(235,132,94,.82), rgba(89,130,121,.82)); box-shadow: 0 12px 25px rgba(43, 50, 39, .12); transition: aspect-ratio .15s ease; }
.ratio-preview-shape span { padding: 7px 10px; border-radius: 999px; color: #fff; background: rgba(25, 40, 35, .72); font: 700 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.ratio-input-grid input[readonly] { color: var(--muted); background: #f2f3ec; }

@media (max-width: 620px) {
  .ratio-layout { grid-template-columns: 1fr; }
  .ratio-controls { grid-template-columns: 1fr 1fr; }
  .ratio-controls .control-group:first-child { grid-column: 1 / -1; }
  .ratio-output { align-items: flex-start; flex-direction: column; }
  .ratio-output .button { margin-left: 0; }
}

.yt-seeds { min-height: 130px; }
.yt-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.yt-options .control-group { display: grid; gap: 7px; }
.yt-options label { color: var(--muted); font-size: 12px; font-weight: 700; }
.yt-options input[type="number"] { min-height: 42px; width: 100%; padding: 0 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.yt-check { min-height: 42px; display: flex; align-items: center; gap: 8px; }
.yt-check input { accent-color: var(--accent); }
.yt-status { min-height: 18px; margin-top: 13px; color: var(--muted); font-size: 12px; }
.yt-status.yt-warning { color: #9a4028; }
.yt-output { margin-top: 17px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.yt-output[hidden] { display: none; }
.yt-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; }
.yt-summary strong { color: var(--ink); font-size: 15px; }
.yt-summary .yt-over { color: #9a4028; }
.yt-progress { height: 7px; margin: 12px 0 15px; overflow: hidden; border-radius: 999px; background: #dedfd5; }
.yt-progress span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent-dark); transition: width .15s ease; }
.yt-progress span.yt-over-bar { background: #b34c30; }
.yt-tag-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.yt-tag-option { min-width: 0; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.yt-tag-option:has(input:checked) { border-color: #d8896a; background: #fffaf7; }
.yt-tag-option input { accent-color: var(--accent); }
.yt-tag-option span { overflow-wrap: anywhere; color: var(--ink); font-size: 12px; }
.yt-tag-option small { color: #92978f; font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
.yt-final { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.yt-final .tool-textarea { min-height: 90px; }

@media (max-width: 620px) {
  .yt-options, .yt-tag-list { grid-template-columns: 1fr; }
  .yt-tag-option { grid-template-columns: 16px minmax(0, 1fr) auto; }
}

.signature-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.signature-editor, .signature-preview-wrap { min-width: 0; }
.signature-options { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 12px; }
.signature-options .control-group { display: grid; gap: 7px; }
.signature-options label { color: var(--muted); font-size: 12px; font-weight: 700; }
.signature-options input[type="color"] { width: 100%; height: 43px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.signature-preview-wrap { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.signature-preview { min-height: 175px; display: grid; place-items: center; overflow: auto; padding: 20px; border: 1px dashed #bfc1b4; border-radius: 9px; background: #fff; }
.signature-preview > table { max-width: 100%; }
.signature-preview-note { margin-top: 11px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.signature-actions { flex-wrap: wrap; }
.signature-code-wrap { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.signature-code { min-height: 190px; font-size: 11px; }

@media (max-width: 800px) {
  .signature-layout { grid-template-columns: 1fr; }
}

.gradient-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 22px; align-items: start; }
.gradient-controls { min-width: 0; }
.gradient-controls .two-columns { align-items: end; }
.gradient-controls .control-group { display: grid; gap: 7px; }
.gradient-controls label { color: var(--muted); font-size: 12px; font-weight: 700; }
.gradient-controls input[type="number"], .gradient-controls input[type="text"], .gradient-controls select { min-height: 42px; width: 100%; padding: 0 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.gradient-controls input[type="color"] { width: 44px; height: 42px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.gradient-radial-only[hidden] { display: none; }
.gradient-stop-label { margin-top: 23px; }
.gradient-stop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 10px; }
.gradient-stop-card { min-width: 0; display: grid; gap: 7px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.gradient-stop-card label { font-size: 10px; }
.gradient-stop-card input[type="number"] { min-height: 35px; font-size: 12px; }
.gradient-stop-heading { display: flex; justify-content: space-between; align-items: center; color: var(--ink); font-size: 12px; font-weight: 800; }
.gradient-stop-role { color: #92978f; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.gradient-stop-toggle { display: flex; align-items: center; gap: 4px; color: var(--muted) !important; font-size: 10px !important; font-weight: 700 !important; }
.gradient-stop-toggle input { accent-color: var(--accent); }
.color-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 7px; align-items: center; }
.color-row input[type="text"] { min-height: 35px; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.gradient-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.gradient-actions .button { min-height: 36px; padding: 0 12px; font-size: 11px; }
.gradient-preview-wrap { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.gradient-preview { min-height: 285px; border: 1px dashed #bfc1b4; border-radius: 10px; background: linear-gradient(135deg, #fb7185, #8b5cf6, #22d3ee); box-shadow: 0 12px 25px rgba(43, 50, 39, .12); }
.gradient-contrast { margin-top: 11px; padding: 10px 12px; border-radius: 8px; color: var(--muted); background: #fff; font-size: 11px; line-height: 1.4; }
.gradient-contrast strong { color: var(--ink); font-size: 14px; }
.gradient-good { border-left: 3px solid #398054; }
.gradient-medium { border-left: 3px solid #bd8124; }
.gradient-low { border-left: 3px solid #b34c30; }
.gradient-code-label { display: block; margin-top: 17px; }
.gradient-css { min-height: 82px; font-size: 11px; }

@media (max-width: 800px) {
  .gradient-layout { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .gradient-stop-grid { grid-template-columns: 1fr; }
}

.simulator-layout { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 22px; align-items: start; }
.simulator-controls, .simulator-preview-wrap { min-width: 0; }
.simulator-sample { width: 100%; margin-top: 10px; }
.simulator-field { display: grid; gap: 7px; margin-top: 18px; }
.simulator-field > label, .simulator-range-label label { color: var(--muted); font-size: 12px; font-weight: 700; }
.simulator-field select { min-height: 43px; width: 100%; padding: 0 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.simulator-range-label { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.simulator-range-label output { color: var(--ink); font: 800 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.simulator-field input[type="range"] { width: 100%; accent-color: var(--accent); }
.simulator-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.simulator-actions .button { width: 100%; }
.simulator-status { min-height: 18px; margin: 13px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.simulator-preview-wrap { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.simulator-current-heading { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 12px; }
.simulator-current-heading h2 { margin: 5px 0 0; font-size: clamp(20px, 3vw, 28px); }
.simulator-model { color: #92978f; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
#cvd-preview { display: block; width: 100%; height: auto; border: 1px dashed #bfc1b4; border-radius: 10px; background: #fff; box-shadow: 0 12px 25px rgba(43, 50, 39, .12); }
.simulator-caption { margin-top: 11px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.simulator-comparison { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.simulator-comparison .results-heading { align-items: end; }
.simulator-comparison .results-heading h2 { margin-bottom: 0; }
.simulator-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.simulator-tile { min-width: 0; padding: 8px; color: var(--ink); text-align: left; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.simulator-tile:hover { transform: translateY(-1px); }
.simulator-tile.is-selected { border-color: #d8896a; box-shadow: 0 0 0 2px rgba(216, 137, 106, .18); }
.simulator-tile-label { display: block; margin: 2px 2px 8px; font-size: 11px; font-weight: 800; }
.simulator-tile canvas { display: block; width: 100%; height: auto; border-radius: 6px; background: #f2f3ec; }
@media (max-width: 800px) {
  .simulator-layout { grid-template-columns: 1fr; }
  .simulator-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .simulator-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.color-converter-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 22px; align-items: start; }
.color-converter-controls, .color-converter-preview-wrap { min-width: 0; }
.color-picker-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0 16px; color: var(--muted); font-size: 12px; font-weight: 700; }
.color-picker-row input[type="color"] { width: 58px; height: 42px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.color-input-block { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); }
.color-block-heading { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.color-block-heading span:last-child { color: #92978f; font-size: 9px; font-weight: 600; letter-spacing: 0; }
.color-wide-input, .color-number-grid input { min-height: 40px; width: 100%; padding: 0 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.color-wide-input:focus, .color-number-grid input:focus { outline: 2px solid rgba(216, 137, 106, .3); border-color: #d8896a; }
.color-number-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.color-number-grid label { display: grid; gap: 5px; color: #92978f; font-size: 10px; font-weight: 800; }
.color-converter-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.color-converter-actions .button { min-height: 36px; padding: 0 12px; font-size: 11px; }
.color-error { margin: 11px 0 0; color: #a34f35; font-size: 11px; }
.color-error[hidden] { display: none; }
.color-converter-preview-wrap { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.color-swatch-large { min-height: 205px; border: 1px dashed #bfc1b4; border-radius: 10px; background: #4F46E5; box-shadow: 0 12px 25px rgba(43, 50, 39, .12); }
.color-preview-meta { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin: 13px 0 12px; }
.color-preview-meta strong { color: var(--ink); font: 800 16px ui-monospace, SFMono-Regular, Menlo, monospace; }
.color-output-list { display: grid; gap: 8px; }
.color-output-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.color-output-row > div { min-width: 0; display: grid; gap: 5px; }
.color-output-label { color: #92978f; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.color-output-row code { overflow-wrap: anywhere; color: var(--ink); font-size: 12px; }
.color-output-row .button { flex: 0 0 auto; min-height: 30px; padding: 0 9px; font-size: 10px; }
.color-contrast-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(185px, .55fr); gap: 18px; align-items: center; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.color-contrast-panel h2 { margin: 5px 0 4px; font-size: 20px; }
.color-contrast-panel p { max-width: 430px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.color-contrast-controls { display: grid; grid-template-columns: auto 48px; gap: 7px 9px; align-items: center; color: var(--muted); font-size: 10px; font-weight: 800; }
.color-contrast-controls input[type="color"] { grid-column: 2; width: 48px; height: 38px; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: #fff; cursor: pointer; }
.color-contrast-controls code { grid-column: 1 / -1; color: var(--ink); font-size: 11px; text-align: right; }
.color-contrast-result { min-width: 0; padding: 12px 14px; border-left: 3px solid #398054; border-radius: 7px; background: #fff; }
.color-contrast-result strong { display: block; color: var(--ink); font-size: 22px; }
.color-contrast-result span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.color-contrast-result.contrast-medium { border-left-color: #bd8124; }
.color-contrast-result.contrast-low { border-left-color: #b34c30; }
.color-related-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 17px; }
.color-related-links a { color: var(--accent-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.color-related-links a:hover { text-decoration: underline; }
@media (max-width: 800px) {
  .color-converter-layout { grid-template-columns: 1fr; }
  .color-contrast-panel { grid-template-columns: 1fr 1fr; }
  .color-contrast-panel > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .color-contrast-panel { grid-template-columns: 1fr; }
  .color-contrast-controls { justify-self: start; }
  .color-contrast-result { width: 100%; }
}

.formatter-toolbar { display: flex; flex-wrap: wrap; gap: 13px 18px; align-items: end; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.formatter-field { display: grid; gap: 6px; min-width: 150px; }
.formatter-field label, .formatter-pane-heading label { color: var(--muted); font-size: 12px; font-weight: 700; }
.formatter-field select { min-height: 40px; }
.formatter-check { display: flex; align-items: center; gap: 7px; min-height: 40px; color: var(--muted); font-size: 11px; font-weight: 700; }
.formatter-check input { accent-color: var(--accent); }
.formatter-stats { margin-left: auto; color: #92978f; font-size: 11px; }
.formatter-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 15px; margin-top: 18px; }
.formatter-pane { min-width: 0; }
.formatter-pane-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.formatter-readonly { color: #92978f; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.formatter-small { min-height: 31px; padding: 0 9px; font-size: 10px; }
.formatter-textarea { min-height: 390px; width: 100%; resize: vertical; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 2; }
.formatter-actions { flex-wrap: wrap; }
.formatter-actions .button { min-height: 39px; }
.formatter-related-links { display: flex; flex-wrap: wrap; gap: 8px 17px; margin-top: 16px; }
.formatter-related-links a { color: var(--accent-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.formatter-related-links a:hover { text-decoration: underline; }
@media (max-width: 800px) {
  .formatter-layout { grid-template-columns: 1fr; }
  .formatter-textarea { min-height: 260px; }
  .formatter-stats { width: 100%; margin-left: 0; }
}

.unit-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 16px; }
.unit-section-heading h2 { margin: 5px 0 0; font-size: 21px; letter-spacing: -.035em; }
.unit-local-note { color: #92978f; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.unit-converter-layout { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 22px; align-items: start; }
.unit-converter-controls, .unit-preview-wrap { min-width: 0; }
.unit-control-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.unit-control-row label { color: var(--muted); font-size: 12px; font-weight: 700; }
.unit-input-with-suffix { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: center; }
.unit-input-with-suffix input, .unit-clamp-grid input, .unit-clamp-grid select { min-height: 40px; width: 100%; padding: 0 9px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.unit-input-with-suffix span { color: #92978f; font-size: 11px; }
.unit-input-with-suffix input:focus, .unit-clamp-grid input:focus, .unit-clamp-grid select:focus { outline: 2px solid rgba(216, 137, 106, .3); border-color: #d8896a; }
.unit-help { margin: 12px 0 2px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.unit-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.unit-actions .button { min-height: 35px; padding: 0 11px; font-size: 11px; }
.unit-preview-wrap { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.unit-preview-card { min-height: 130px; display: grid; align-content: center; gap: 8px; padding: 20px; border: 1px dashed #bfc1b4; border-radius: 9px; background: #fff; }
.unit-preview-card code { color: var(--ink); font: 800 clamp(20px, 3vw, 28px) ui-monospace, SFMono-Regular, Menlo, monospace; }
.unit-preview-card p { margin: 0; color: var(--muted); font-size: 11px; }
.unit-output-list { display: grid; gap: 8px; margin-top: 12px; }
.unit-output-list > div { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.unit-output-list span { color: #92978f; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.unit-output-list code { color: var(--ink); font-size: 12px; }
.unit-output-list .button { min-height: 29px; padding: 0 8px; font-size: 10px; }
.unit-bulk-block { margin-top: 25px; padding-top: 23px; border-top: 1px solid var(--line); }
.unit-bulk-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.unit-text-label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 700; }
.unit-code-textarea { min-height: 170px; width: 100%; resize: vertical; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.unit-bulk-actions { flex-wrap: wrap; }
.unit-bulk-actions .button { min-height: 37px; }
.unit-bulk-status { min-height: 18px; margin: 11px 0 0; color: var(--muted); font-size: 11px; }
.unit-clamp-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.unit-clamp-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 800; }
.unit-clamp-grid label > span { margin-top: -26px; margin-right: 9px; color: #92978f; font-size: 10px; text-align: right; pointer-events: none; }
.unit-clamp-grid select { font-family: inherit; font-size: 11px; }
.unit-clamp-output { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 15px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.unit-clamp-output code { overflow-wrap: anywhere; color: var(--ink); font-size: 12px; }
.unit-clamp-output .button { flex: 0 0 auto; min-height: 33px; padding: 0 10px; font-size: 10px; }
.unit-related-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 17px; }
.unit-related-links a { color: var(--accent-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.unit-related-links a:hover { text-decoration: underline; }
@media (max-width: 800px) {
  .unit-converter-layout, .unit-bulk-layout { grid-template-columns: 1fr; }
  .unit-clamp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .unit-section-heading { align-items: start; flex-direction: column; }
  .unit-control-row { grid-template-columns: 1fr; gap: 7px; }
  .unit-clamp-grid { grid-template-columns: 1fr; }
  .unit-clamp-output { align-items: start; flex-direction: column; }
}

.meme-layout { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 22px; align-items: start; }
.meme-controls, .meme-preview-wrap { min-width: 0; }
.meme-picker { min-height: 190px; margin: 0; padding: 25px 18px; }
.meme-picker .upload-icon { width: 44px; height: 44px; margin-bottom: 10px; font-size: 22px; }
.meme-picker .drop-title { font-size: 17px; }
.meme-picker .drop-subtitle { font-size: 12px; }
.meme-sample { width: 100%; margin-top: 9px; min-height: 37px; font-size: 11px; }
.meme-field { display: grid; gap: 7px; margin-top: 15px; }
.meme-field > label, .meme-range-label label { color: var(--muted); font-size: 12px; font-weight: 700; }
.meme-field input[type="text"], .meme-field select { min-height: 41px; width: 100%; padding: 0 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.meme-field input[type="text"] { font-size: 12px; }
.meme-two-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.meme-range-label { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.meme-range-label output { color: var(--ink); font: 800 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.meme-field input[type="range"] { width: 100%; accent-color: var(--accent); }
.meme-color-row { margin-top: 15px; }
.meme-color-field { display: grid; grid-template-columns: 1fr 42px; gap: 7px; align-items: center; color: var(--muted); font-size: 11px; font-weight: 700; }
.meme-color-field input[type="color"] { width: 42px; height: 36px; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: #fff; cursor: pointer; }
.meme-check { display: flex; align-items: center; gap: 7px; margin-top: 15px; color: var(--muted); font-size: 11px; font-weight: 700; }
.meme-check input { accent-color: var(--accent); }
.meme-actions { margin-top: 17px; }
.meme-actions .button { width: 100%; }
.meme-status { min-height: 18px; margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.meme-preview-wrap { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.meme-preview-heading { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 12px; }
.meme-preview-heading h2 { margin: 5px 0 0; font-size: 24px; letter-spacing: -.04em; }
.meme-model { color: #92978f; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
#meme-canvas { display: block; width: 100%; height: auto; border: 1px dashed #bfc1b4; border-radius: 9px; background: #fff; box-shadow: 0 12px 25px rgba(43, 50, 39, .12); }
@media (max-width: 800px) { .meme-layout { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .meme-two-columns { grid-template-columns: 1fr; } }

.timer-tabs { display: flex; gap: 5px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.timer-tab { padding: 8px 12px 12px; color: var(--muted); border: 0; border-bottom: 2px solid transparent; background: transparent; font-size: 13px; font-weight: 800; }
.timer-tab:hover, .timer-tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.timer-layout { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 22px; align-items: start; padding-top: 20px; }
.timer-controls, .timer-display-wrap { min-width: 0; }
.timer-field { display: grid; gap: 8px; margin-bottom: 17px; }
.timer-field > label { color: var(--muted); font-size: 12px; font-weight: 700; }
.timer-presets { display: flex; flex-wrap: wrap; gap: 7px; }
.timer-presets button { min-height: 32px; padding: 0 9px; color: var(--muted); border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 11px; font-weight: 700; }
.timer-presets button:hover { color: var(--accent-dark); border-color: #e2a28a; background: #fff7f0; }
.timer-number-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.timer-number-grid label { display: grid; gap: 5px; color: #92978f; font-size: 10px; font-weight: 800; }
.timer-number-grid input { min-height: 39px; width: 100%; padding: 0 9px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.timer-check { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 700; }
.timer-check input { accent-color: var(--accent); }
.timer-fullscreen { min-height: 35px; margin-top: 10px; padding: 0 11px; font-size: 11px; }
.timer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.timer-actions .button { flex: 1 1 130px; min-height: 40px; }
.timer-status { min-height: 18px; margin: 12px 0 0; color: var(--muted); font-size: 11px; }
.timer-display-wrap { min-height: 410px; display: grid; justify-items: center; align-content: center; padding: 28px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; text-align: center; }
.timer-display-eyebrow { color: var(--accent-dark); font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.timer-ring { --timer-progress: 0deg; width: min(290px, 70vw); aspect-ratio: 1; display: grid; place-items: center; margin: 15px 0 17px; border-radius: 50%; background: conic-gradient(var(--accent) var(--timer-progress), #dfe0d7 0deg); box-shadow: 0 14px 30px rgba(43, 50, 39, .1); }
.timer-ring::before { content: ''; position: absolute; width: min(250px, 61vw); aspect-ratio: 1; border-radius: 50%; background: var(--card); }
.timer-display { position: relative; z-index: 1; color: var(--ink); font: 800 clamp(38px, 7vw, 64px) ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.07em; }
.timer-display-sub { max-width: 360px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.stopwatch-lap-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 15px; }
.stopwatch-lap-actions .button { min-height: 34px; padding: 0 10px; font-size: 10px; }
.lap-list { width: min(360px, 100%); max-height: 150px; margin: 14px 0 0; padding: 0 5px 0 26px; overflow: auto; text-align: left; }
.lap-list[hidden], .stopwatch-lap-actions[hidden], #countdown-controls[hidden] { display: none; }
.lap-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 6px 0; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 11px; }
.lap-list strong { color: var(--ink); font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.lap-list small { color: #92978f; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
@media (max-width: 800px) { .timer-layout { grid-template-columns: 1fr; } .timer-display-wrap { min-height: 350px; } }
@media (max-width: 520px) { .timer-number-grid { grid-template-columns: 1fr; } .timer-display-wrap { padding: 20px 10px; } }
.timer-ring { position: relative; }
.timer-ring::before { inset: 17px; width: auto; height: auto; aspect-ratio: auto; }

.percent-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 22px; align-items: start; }
.percent-controls, .percent-result-wrap { min-width: 0; }
.percent-field { display: grid; gap: 7px; }
.percent-field > label { color: var(--muted); font-size: 12px; font-weight: 700; }
.percent-field select { min-height: 43px; }
.percent-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.percent-fields label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.percent-fields input, .percent-fields select { min-height: 41px; width: 100%; padding: 0 9px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.percent-fields select { font: 11px ui-sans-serif, system-ui, sans-serif; }
.percent-fields input:focus, .percent-fields select:focus { outline: 2px solid rgba(216, 137, 106, .3); border-color: #d8896a; }
.percent-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.percent-actions .button { min-height: 38px; padding: 0 12px; font-size: 11px; }
.percent-status { min-height: 18px; margin: 12px 0 0; color: var(--muted); font-size: 11px; }
.percent-result-wrap { min-height: 300px; display: grid; align-content: center; padding: 25px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.percent-result { margin-top: 8px; color: var(--ink); font: 800 clamp(40px, 7vw, 72px) ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.08em; overflow-wrap: anywhere; }
.percent-formula { margin: 12px 0 0; color: var(--muted); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.percent-result-note { margin-top: 14px; color: var(--ink); font-size: 13px; line-height: 1.5; }
@media (max-width: 800px) { .percent-layout { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .percent-fields { grid-template-columns: 1fr; } .percent-result-wrap { min-height: 240px; } }

/* Unit converter */
.converter-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 18px; }
.converter-heading h2 { margin: 5px 0 0; font-size: 21px; letter-spacing: -.035em; }
.converter-local-note, .converter-table-note { color: #92978f; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.converter-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.converter-toolbar label, .converter-controls > label, .converter-unit-row label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 800; }
.converter-toolbar select, .converter-controls input, .converter-unit-row select { min-height: 42px; width: 100%; padding: 0 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 12px ui-sans-serif, system-ui, sans-serif; }
.converter-toolbar select { min-width: 220px; }
.converter-toolbar select:focus, .converter-controls input:focus, .converter-unit-row select:focus { outline: 2px solid rgba(216, 137, 106, .3); border-color: #d8896a; }
.converter-status { min-height: 18px; margin: 0 0 2px; color: var(--muted); font-size: 11px; text-align: right; }
.converter-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 22px; align-items: start; margin-top: 21px; }
.converter-controls, .converter-result-wrap { min-width: 0; }
.converter-unit-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: end; margin-top: 15px; }
.converter-swap { min-height: 42px; padding: 0 10px; font-size: 16px; }
.converter-swap span { display: none; }
.converter-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.converter-actions .button { min-height: 37px; padding: 0 12px; font-size: 11px; }
.converter-result-wrap { min-height: 248px; display: grid; align-content: center; padding: 25px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.converter-result { margin-top: 8px; color: var(--ink); font: 800 clamp(36px, 6vw, 62px) ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.08em; overflow-wrap: anywhere; }
.converter-equation { margin: 12px 0 0; color: var(--ink); font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.converter-factor { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.converter-equivalents { margin-top: 26px; padding-top: 23px; border-top: 1px solid var(--line); }
.converter-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.converter-section-heading h2 { margin: 5px 0 0; font-size: 18px; letter-spacing: -.03em; }
.converter-table { display: grid; gap: 7px; }
.converter-table-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr) auto; gap: 10px; align-items: center; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.converter-table-row.selected { border-color: #d9a18b; background: #fff8f1; }
.converter-table-row span { color: var(--muted); font-size: 11px; }
.converter-table-row code { color: var(--ink); font-size: 12px; overflow-wrap: anywhere; }
.converter-table-row .button { min-height: 29px; padding: 0 9px; font-size: 10px; }
.converter-related-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 17px; }
.converter-related-links a { color: var(--accent-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.converter-related-links a:hover { text-decoration: underline; }
@media (max-width: 800px) { .converter-layout { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .converter-heading, .converter-toolbar, .converter-section-heading { align-items: start; flex-direction: column; } .converter-toolbar select { min-width: 0; } .converter-status { margin: 0; text-align: left; } .converter-unit-row { grid-template-columns: 1fr; } .converter-swap { justify-self: start; } .converter-table-row { grid-template-columns: minmax(0, 1fr) auto; } .converter-table-row code { grid-column: 1 / 2; grid-row: 2; } .converter-table-row .button { grid-column: 2; grid-row: 1 / span 2; } .converter-local-note, .converter-table-note { white-space: normal; } }

/* Scientific calculator */
.scientific-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr); gap: 22px; align-items: start; }
.scientific-main, .scientific-history { min-width: 0; }
.scientific-display-wrap { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.scientific-display-top { display: flex; justify-content: space-between; gap: 14px; align-items: end; }
.scientific-display-top label, .scientific-angle { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 800; }
.scientific-angle { text-align: right; }
.scientific-angle select { min-height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); font: 11px ui-sans-serif, system-ui, sans-serif; }
.scientific-expression { box-sizing: border-box; width: 100%; min-height: 52px; margin-top: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font: 16px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
.scientific-expression:focus, .scientific-angle select:focus { outline: 2px solid rgba(216, 137, 106, .3); border-color: #d8896a; }
.scientific-result-line { display: grid; gap: 4px; margin-top: 17px; }
.scientific-result-line output { min-height: 48px; color: var(--ink); font: 800 clamp(34px, 6vw, 58px)/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.07em; overflow-wrap: anywhere; }
.scientific-status { min-height: 18px; margin: 9px 0 0; color: var(--muted); font-size: 11px; }
.scientific-keypad { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; margin-top: 14px; }
.scientific-key { min-height: 42px; padding: 0 5px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font: 700 13px ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; transition: transform .12s ease, border-color .12s ease, background .12s ease; }
.scientific-key:hover { transform: translateY(-1px); border-color: #d9a18b; background: #fff8f1; }
.scientific-key.function { color: var(--accent-dark); font-size: 11px; }
.scientific-key.operator { background: #f3eee7; color: var(--accent-dark); font-size: 17px; }
.scientific-key.control { background: #ecece5; color: var(--muted); font-size: 10px; letter-spacing: .04em; }
.scientific-key.primary { grid-column: span 2; background: var(--ink); color: #fff; font-size: 19px; }
.scientific-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.scientific-actions .button { min-height: 36px; padding: 0 11px; font-size: 11px; }
.scientific-history { padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.scientific-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.scientific-section-heading h2 { margin: 5px 0 0; font-size: 18px; letter-spacing: -.03em; }
.scientific-section-heading .button { min-height: 29px; padding: 0 8px; font-size: 10px; }
.scientific-history-list { display: grid; gap: 7px; margin-top: 15px; }
.scientific-empty { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.scientific-history-item { display: grid; gap: 4px; width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fafaf7; color: var(--ink); text-align: left; cursor: pointer; }
.scientific-history-item:hover { border-color: #d9a18b; background: #fff8f1; }
.scientific-history-item span { color: var(--muted); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.scientific-history-item strong { font: 700 13px ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.scientific-related-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 17px; }
.scientific-related-links a { color: var(--accent-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.scientific-related-links a:hover { text-decoration: underline; }
@media (max-width: 800px) { .scientific-layout { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .scientific-display-top { align-items: start; flex-direction: column; } .scientific-angle { text-align: left; } .scientific-keypad { gap: 5px; } .scientific-key { min-height: 39px; font-size: 12px; } .scientific-key.function { font-size: 10px; } }

/* Mortgage calculator */
.mortgage-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 22px; align-items: start; }
.mortgage-inputs, .mortgage-results { min-width: 0; }
.mortgage-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 15px; }
.mortgage-section-heading h2 { margin: 5px 0 0; font-size: 21px; letter-spacing: -.035em; }
.mortgage-local-note, .mortgage-table-note { color: #92978f; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.mortgage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 10px; }
.mortgage-grid label { position: relative; display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 800; }
.mortgage-grid input, .mortgage-grid select { box-sizing: border-box; min-height: 40px; width: 100%; padding: 0 9px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.mortgage-grid select { font-family: ui-sans-serif, system-ui, sans-serif; }
.mortgage-grid input:focus, .mortgage-grid select:focus { outline: 2px solid rgba(216, 137, 106, .3); border-color: #d8896a; }
.mortgage-suffix { margin-top: -25px; margin-right: 9px; color: #92978f; font-size: 9px; text-align: right; pointer-events: none; }
.mortgage-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.mortgage-actions .button { min-height: 37px; padding: 0 11px; font-size: 11px; }
.mortgage-status { min-height: 18px; margin: 11px 0 0; color: var(--muted); font-size: 11px; }
.mortgage-result-main { min-height: 157px; display: grid; align-content: center; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.mortgage-result-main output { margin-top: 7px; color: var(--ink); font: 800 clamp(32px, 5.5vw, 55px)/1.05 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.08em; overflow-wrap: anywhere; }
.mortgage-result-main p { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.mortgage-result-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.mortgage-result-cards > div { display: grid; gap: 5px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.mortgage-result-cards span { color: var(--muted); font-size: 10px; }
.mortgage-result-cards strong { color: var(--ink); font: 700 13px ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.mortgage-breakdown { display: grid; gap: 6px; margin-top: 13px; }
.mortgage-breakdown > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; border-bottom: 1px solid var(--line); }
.mortgage-breakdown span { color: var(--muted); font-size: 11px; }
.mortgage-breakdown strong { color: var(--ink); font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.mortgage-schedule-block { margin-top: 26px; padding-top: 23px; border-top: 1px solid var(--line); }
.mortgage-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 9px; }
.mortgage-table { width: 100%; border-collapse: collapse; min-width: 460px; background: #fff; }
.mortgage-table th, .mortgage-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: right; font-size: 11px; }
.mortgage-table th { color: var(--muted); background: #f6f6f0; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.mortgage-table th:first-child, .mortgage-table td:first-child { text-align: left; }
.mortgage-table td { color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.mortgage-table tr:last-child td { border-bottom: 0; }
.mortgage-schedule-note { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.mortgage-related-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 17px; }
.mortgage-related-links a { color: var(--accent-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.mortgage-related-links a:hover { text-decoration: underline; }
@media (max-width: 800px) { .mortgage-layout { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .mortgage-section-heading { align-items: start; flex-direction: column; } .mortgage-local-note, .mortgage-table-note { white-space: normal; } .mortgage-grid { grid-template-columns: 1fr; } }

/* Age calculator */
.age-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 22px; align-items: start; }
.age-controls, .age-result-wrap { min-width: 0; }
.age-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 17px; }
.age-section-heading h2 { margin: 5px 0 0; font-size: 21px; letter-spacing: -.035em; }
.age-local-note { color: #92978f; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.age-date-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.age-date-grid label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 800; }
.age-date-grid input { box-sizing: border-box; min-height: 42px; width: 100%; padding: 0 9px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.age-date-grid input:focus { outline: 2px solid rgba(216, 137, 106, .3); border-color: #d8896a; }
.age-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.age-actions .button { min-height: 37px; padding: 0 11px; font-size: 11px; }
.age-status { min-height: 18px; margin: 11px 0 0; color: var(--muted); font-size: 11px; }
.age-result-wrap { min-height: 234px; display: grid; align-content: center; padding: 25px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.age-result-wrap output { margin-top: 9px; color: var(--ink); font: 800 clamp(30px, 5vw, 52px)/1.08 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.08em; overflow-wrap: anywhere; }
.age-result-wrap p { margin: 13px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.age-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.age-facts > div { display: grid; gap: 5px; min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.age-facts span { color: var(--muted); font-size: 10px; }
.age-facts strong { color: var(--ink); font: 700 13px ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.age-birthday-note { min-height: 18px; margin: 12px 0 0; color: var(--accent-dark); font-size: 11px; font-weight: 800; }
.age-related-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 17px; }
.age-related-links a { color: var(--accent-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.age-related-links a:hover { text-decoration: underline; }
@media (max-width: 800px) { .age-layout { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .age-section-heading { align-items: start; flex-direction: column; } .age-local-note { white-space: normal; } .age-date-grid, .age-facts { grid-template-columns: 1fr; } }

/* Fraction calculator */
.fraction-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 17px; }
.fraction-section-heading h2 { margin: 5px 0 0; font-size: 21px; letter-spacing: -.035em; }
.fraction-local-note { color: #92978f; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.fraction-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 22px; align-items: start; }
.fraction-controls, .fraction-result-wrap { min-width: 0; }
.fraction-operation label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 800; }
.fraction-operation select { min-height: 42px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font: 12px ui-sans-serif, system-ui, sans-serif; }
.fraction-operation select:focus, .fraction-input-grid input:focus { outline: 2px solid rgba(216, 137, 106, .3); border-color: #d8896a; }
.fraction-input-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 15px; }
.fraction-input-grid fieldset { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; }
.fraction-input-grid legend { padding: 0 5px; color: var(--accent-dark); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.fraction-input-grid label { display: grid; gap: 6px; margin-top: 9px; color: var(--muted); font-size: 10px; font-weight: 800; }
.fraction-input-grid input { box-sizing: border-box; min-height: 38px; width: 100%; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.fraction-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.fraction-actions .button { min-height: 37px; padding: 0 11px; font-size: 11px; }
.fraction-status { min-height: 18px; margin: 11px 0 0; color: var(--muted); font-size: 11px; }
.fraction-result-wrap { min-height: 254px; display: grid; align-content: center; padding: 25px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.fraction-result-wrap output { margin-top: 9px; color: var(--ink); font: 800 clamp(40px, 7vw, 72px)/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.08em; overflow-wrap: anywhere; }
.fraction-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.fraction-result-grid > div { display: grid; gap: 5px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.fraction-result-grid span { color: var(--muted); font-size: 10px; }
.fraction-result-grid strong { color: var(--ink); font: 700 12px ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.fraction-steps { margin-top: 26px; padding-top: 23px; border-top: 1px solid var(--line); }
.fraction-steps p { margin: 12px 0 0; padding: 14px; border: 1px dashed #bfc1b4; border-radius: 8px; background: #fff; color: var(--ink); font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.fraction-related-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 17px; }
.fraction-related-links a { color: var(--accent-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.fraction-related-links a:hover { text-decoration: underline; }
@media (max-width: 800px) { .fraction-layout { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .fraction-section-heading { align-items: start; flex-direction: column; } .fraction-local-note { white-space: normal; } .fraction-input-grid, .fraction-result-grid { grid-template-columns: 1fr; } }

/* Tip calculator */
.tip-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 17px; }
.tip-section-heading h2 { margin: 5px 0 0; font-size: 21px; letter-spacing: -.035em; }
.tip-local-note { color: #92978f; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.tip-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 22px; align-items: start; }
.tip-controls, .tip-result-wrap { min-width: 0; }
.tip-grid, .tip-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 10px; }
.tip-grid label, .tip-option-grid label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 800; }
.tip-grid label span { color: #92978f; font-weight: 500; }
.tip-grid input, .tip-grid select, .tip-option-grid input, .tip-option-grid select { box-sizing: border-box; min-height: 41px; width: 100%; padding: 0 9px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.tip-grid select, .tip-option-grid select { font-family: ui-sans-serif, system-ui, sans-serif; }
.tip-grid input:focus, .tip-grid select:focus, .tip-option-grid input:focus, .tip-option-grid select:focus { outline: 2px solid rgba(216, 137, 106, .3); border-color: #d8896a; }
.tip-option-grid { margin-top: 12px; }
.tip-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 15px; }
.tip-presets > span { margin-right: 3px; color: var(--muted); font-size: 10px; font-weight: 800; }
.tip-presets button { min-height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--accent-dark); font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; }
.tip-presets button:hover { border-color: #d9a18b; background: #fff8f1; }
.tip-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.tip-actions .button { min-height: 37px; padding: 0 11px; font-size: 11px; }
.tip-status { min-height: 18px; margin: 11px 0 0; color: var(--muted); font-size: 11px; }
.tip-result-wrap { min-height: 254px; display: grid; align-content: center; padding: 25px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.tip-result-wrap output { margin-top: 9px; color: var(--ink); font: 800 clamp(34px, 6vw, 62px)/1.05 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.08em; overflow-wrap: anywhere; }
.tip-result-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.tip-result-cards > div { display: grid; gap: 5px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.tip-result-cards span { color: var(--muted); font-size: 10px; }
.tip-result-cards strong { color: var(--ink); font: 700 13px ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.tip-result-wrap > p { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.tip-steps { margin-top: 26px; padding-top: 23px; border-top: 1px solid var(--line); }
.tip-steps p { margin: 12px 0 0; padding: 14px; border: 1px dashed #bfc1b4; border-radius: 8px; background: #fff; color: var(--ink); font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.tip-related-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 17px; }
.tip-related-links a { color: var(--accent-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.tip-related-links a:hover { text-decoration: underline; }
@media (max-width: 800px) { .tip-layout { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .tip-section-heading { align-items: start; flex-direction: column; } .tip-local-note { white-space: normal; } .tip-grid, .tip-option-grid, .tip-result-cards { grid-template-columns: 1fr; } }

/* GPA calculator */
.gpa-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 17px; }
.gpa-section-heading h2 { margin: 5px 0 0; font-size: 21px; letter-spacing: -.035em; }
.gpa-local-note { color: #92978f; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.gpa-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 9px; margin-bottom: 14px; }
.gpa-toolbar label, .gpa-history-grid label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 800; }
.gpa-toolbar label { min-width: min(100%, 260px); flex: 1 1 250px; }
.gpa-toolbar select, .gpa-history-grid input { box-sizing: border-box; min-height: 40px; width: 100%; padding: 0 9px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 12px ui-sans-serif, system-ui, sans-serif; }
.gpa-toolbar select:focus, .gpa-history-grid input:focus, .gpa-course-row input:focus, .gpa-course-row select:focus { outline: 2px solid rgba(216, 137, 106, .3); border-color: #d8896a; }
.gpa-toolbar .button { min-height: 40px; padding: 0 11px; font-size: 11px; }
.gpa-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 9px; }
.gpa-course-list { min-width: 730px; background: #fff; }
.gpa-course-row { display: grid; grid-template-columns: minmax(150px, 1.6fr) 74px 95px 116px 82px 78px 30px; gap: 8px; align-items: end; padding: 10px; border-bottom: 1px solid var(--line); }
.gpa-course-row:last-child { border-bottom: 0; }
.gpa-course-row label { display: grid; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 800; }
.gpa-course-row input, .gpa-course-row select { box-sizing: border-box; min-height: 36px; width: 100%; padding: 0 7px; color: var(--ink); border: 1px solid var(--line); border-radius: 7px; background: #fff; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.gpa-course-row select { font-family: ui-sans-serif, system-ui, sans-serif; }
.gpa-course-row input:disabled { background: #f1f2ec; color: #a6a9a0; }
.gpa-course-row output { display: block; min-height: 36px; padding: 10px 5px 0; box-sizing: border-box; color: var(--ink); font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.gpa-remove { min-height: 30px; width: 30px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.gpa-remove:hover { border-color: #d9a18b; color: var(--accent-dark); background: #fff8f1; }
.gpa-history-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.4fr); gap: 10px; align-items: end; margin-top: 14px; }
.gpa-history-grid label span { color: #92978f; font-weight: 500; }
.gpa-history-grid p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.gpa-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.gpa-actions .button { min-height: 37px; padding: 0 11px; font-size: 11px; }
.gpa-status { min-height: 18px; margin: 11px 0 0; color: var(--muted); font-size: 11px; }
.gpa-result-wrap { margin-top: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.gpa-primary-results { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 18px; align-items: end; }
.gpa-primary-results output { display: block; margin-top: 8px; color: var(--ink); font: 800 clamp(40px, 7vw, 70px)/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.08em; }
.gpa-primary-results strong { display: block; margin-top: 15px; color: var(--ink); font: 800 clamp(24px, 4vw, 40px)/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.07em; }
.gpa-result-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.gpa-result-cards > div { display: grid; gap: 5px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.gpa-result-cards span { color: var(--muted); font-size: 10px; }
.gpa-result-cards strong { color: var(--ink); font: 700 13px ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.gpa-steps { margin-top: 26px; padding-top: 23px; border-top: 1px solid var(--line); }
.gpa-steps p { margin: 12px 0 0; padding: 14px; border: 1px dashed #bfc1b4; border-radius: 8px; background: #fff; color: var(--ink); font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.gpa-related-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 17px; }
.gpa-related-links a { color: var(--accent-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.gpa-related-links a:hover { text-decoration: underline; }
@media (max-width: 800px) { .gpa-history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gpa-history-grid p { grid-column: 1 / -1; } }
@media (max-width: 520px) { .gpa-section-heading { align-items: start; flex-direction: column; } .gpa-local-note { white-space: normal; } .gpa-history-grid, .gpa-primary-results { grid-template-columns: 1fr; } .gpa-result-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Discount calculator */
.discount-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 17px; }
.discount-section-heading h2 { margin: 5px 0 0; font-size: 21px; letter-spacing: -.035em; }
.discount-local-note { color: #92978f; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.discount-toolbar { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 10px; margin-bottom: 13px; }
.discount-toolbar label, .discount-input-grid label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 800; }
.discount-toolbar select, .discount-input-grid input { box-sizing: border-box; min-height: 41px; width: 100%; padding: 0 9px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 12px ui-sans-serif, system-ui, sans-serif; }
.discount-input-grid input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.discount-toolbar select:focus, .discount-input-grid input:focus { outline: 2px solid rgba(216, 137, 106, .3); border-color: #d8896a; }
.discount-input-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px 10px; }
.discount-input-grid label span { color: #92978f; font-weight: 500; }
.discount-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 15px; }
.discount-presets > span { margin-right: 3px; color: var(--muted); font-size: 10px; font-weight: 800; }
.discount-presets button { min-height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--accent-dark); font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; }
.discount-presets button:hover { border-color: #d9a18b; background: #fff8f1; }
.discount-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.discount-actions .button { min-height: 37px; padding: 0 11px; font-size: 11px; }
.discount-status { min-height: 18px; margin: 11px 0 0; color: var(--muted); font-size: 11px; }
.discount-result-wrap { margin-top: 14px; padding: 22px 25px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.discount-result-wrap output { display: block; margin-top: 9px; color: var(--ink); font: 800 clamp(36px, 6vw, 64px)/1.05 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.08em; overflow-wrap: anywhere; }
.discount-result-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.discount-result-cards > div { display: grid; gap: 5px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.discount-result-cards span { color: var(--muted); font-size: 10px; }
.discount-result-cards strong { color: var(--ink); font: 700 13px ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.discount-result-wrap > p { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.discount-steps { margin-top: 26px; padding-top: 23px; border-top: 1px solid var(--line); }
.discount-steps p { margin: 12px 0 0; padding: 14px; border: 1px dashed #bfc1b4; border-radius: 8px; background: #fff; color: var(--ink); font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.discount-related-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 17px; }
.discount-related-links a { color: var(--accent-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.discount-related-links a:hover { text-decoration: underline; }
@media (max-width: 800px) { .discount-input-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .discount-result-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .discount-section-heading { align-items: start; flex-direction: column; } .discount-local-note { white-space: normal; } .discount-toolbar, .discount-input-grid, .discount-result-cards { grid-template-columns: 1fr; } }

/* Loan calculator */
.loan-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 17px; }
.loan-section-heading h2 { margin: 5px 0 0; font-size: 21px; letter-spacing: -.035em; }
.loan-local-note, .loan-table-note { color: #92978f; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.loan-input-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px 10px; }
.loan-input-grid label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 800; }
.loan-input-grid label span { color: #92978f; font-weight: 500; }
.loan-input-grid input, .loan-input-grid select { box-sizing: border-box; min-height: 41px; width: 100%; padding: 0 9px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.loan-input-grid select { font-family: ui-sans-serif, system-ui, sans-serif; }
.loan-input-grid input:focus, .loan-input-grid select:focus { outline: 2px solid rgba(216, 137, 106, .3); border-color: #d8896a; }
.loan-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.loan-actions .button { min-height: 37px; padding: 0 11px; font-size: 11px; }
.loan-status { min-height: 18px; margin: 11px 0 0; color: var(--muted); font-size: 11px; }
.loan-result-wrap { margin-top: 14px; padding: 22px 25px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.loan-primary-results { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 18px; align-items: end; }
.loan-primary-results output { display: block; margin-top: 9px; color: var(--ink); font: 800 clamp(34px, 6vw, 64px)/1.05 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.08em; overflow-wrap: anywhere; }
.loan-primary-results strong { display: block; margin-top: 15px; color: var(--ink); font: 800 clamp(24px, 4vw, 40px)/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.07em; }
.loan-primary-results p { margin: 9px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.loan-result-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.loan-result-cards > div { display: grid; gap: 5px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.loan-result-cards span { color: var(--muted); font-size: 10px; }
.loan-result-cards strong { color: var(--ink); font: 700 13px ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.loan-summary { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.loan-schedule-block { margin-top: 26px; padding-top: 23px; border-top: 1px solid var(--line); }
.loan-table-wrap { overflow-x: auto; margin-top: 13px; border: 1px solid var(--line); border-radius: 9px; }
.loan-table { width: 100%; min-width: 540px; border-collapse: collapse; background: #fff; }
.loan-table th, .loan-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: right; font-size: 11px; }
.loan-table th { color: var(--muted); background: #f6f6f0; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.loan-table th:first-child, .loan-table td:first-child { text-align: left; }
.loan-table td { color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.loan-table tr:last-child td { border-bottom: 0; }
.loan-schedule-note { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.loan-related-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 17px; }
.loan-related-links a { color: var(--accent-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.loan-related-links a:hover { text-decoration: underline; }
@media (max-width: 800px) { .loan-input-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .loan-result-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .loan-section-heading { align-items: start; flex-direction: column; } .loan-local-note, .loan-table-note { white-space: normal; } .loan-input-grid, .loan-primary-results, .loan-result-cards { grid-template-columns: 1fr; } }

/* BMI calculator */
.bmi-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 17px; }
.bmi-section-heading h2 { margin: 5px 0 0; font-size: 21px; letter-spacing: -.035em; }
.bmi-local-note { color: #92978f; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.bmi-unit-toggle { display: inline-flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: #f2f3ec; }
.bmi-unit-toggle label { position: relative; display: block; padding: 8px 11px; border-radius: 6px; color: var(--muted); font-size: 11px; font-weight: 800; cursor: pointer; }
.bmi-unit-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.bmi-unit-toggle label:has(input:checked) { background: var(--ink); color: #fff; }
.bmi-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 10px; }
.bmi-fields[hidden] { display: none; }
.bmi-fields#bmi-imperial-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bmi-fields label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 800; }
.bmi-fields input { box-sizing: border-box; min-height: 41px; width: 100%; padding: 0 9px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.bmi-fields input:focus { outline: 2px solid rgba(216, 137, 106, .3); border-color: #d8896a; }
.bmi-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.bmi-actions .button { min-height: 37px; padding: 0 11px; font-size: 11px; }
.bmi-status { min-height: 18px; margin: 11px 0 0; color: var(--muted); font-size: 11px; }
.bmi-result-wrap { margin-top: 14px; padding: 23px 25px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.bmi-result-wrap output { display: block; margin-top: 8px; color: var(--ink); font: 800 clamp(42px, 7vw, 74px)/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.08em; }
.bmi-result-wrap > strong { display: block; margin-top: 8px; color: var(--accent-dark); font: 800 19px/1.2 ui-sans-serif, system-ui, sans-serif; }
.bmi-result-wrap > strong.bmi-under { color: #5c7691; }
.bmi-result-wrap > strong.bmi-healthy { color: #48735e; }
.bmi-result-wrap > strong.bmi-over { color: #a56b35; }
.bmi-result-wrap > strong.bmi-obese { color: #a74f45; }
.bmi-result-wrap > p { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.bmi-result-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.bmi-result-cards > div { display: grid; gap: 5px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.bmi-result-cards span { color: var(--muted); font-size: 10px; }
.bmi-result-cards strong { color: var(--ink); font: 700 13px ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.bmi-scale { margin-top: 25px; padding-top: 22px; border-top: 1px solid var(--line); }
.bmi-scale-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 11px; }
.bmi-scale-bar { display: grid; grid-template-columns: 1fr 1.35fr 1fr 1fr; gap: 4px; margin-top: 11px; }
.bmi-segment { min-height: 45px; padding: 8px 7px; border-radius: 7px; color: #fff; font-size: 9px; line-height: 1.35; text-align: center; }
.bmi-segment b { font-size: 10px; }
.bmi-under { background: #7592ab; }
.bmi-healthy { background: #6c997c; }
.bmi-over { background: #c28b57; }
.bmi-obese { background: #b66a61; }
.bmi-related-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 17px; }
.bmi-related-links a { color: var(--accent-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.bmi-related-links a:hover { text-decoration: underline; }
@media (max-width: 520px) { .bmi-section-heading { align-items: start; flex-direction: column; } .bmi-local-note { white-space: normal; } .bmi-fields, .bmi-fields#bmi-imperial-fields, .bmi-result-cards { grid-template-columns: 1fr; } .bmi-scale-bar { grid-template-columns: 1fr 1fr; } }

/* Number to words */
.words-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 17px; }
.words-section-heading h2 { margin: 5px 0 0; font-size: 21px; letter-spacing: -.035em; }
.words-local-note { color: #92978f; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.words-toolbar { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .85fr); gap: 10px; }
.words-toolbar label, .words-number-label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 800; }
.words-toolbar select, .words-number-label input { box-sizing: border-box; min-height: 41px; width: 100%; padding: 0 9px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 12px ui-sans-serif, system-ui, sans-serif; }
.words-toolbar select:focus, .words-number-label input:focus { outline: 2px solid rgba(216, 137, 106, .3); border-color: #d8896a; }
.words-number-label { margin-top: 14px; }
.words-number-label input { font: 15px ui-monospace, SFMono-Regular, Menlo, monospace; }
.words-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 15px; }
.words-presets > span { margin-right: 3px; color: var(--muted); font-size: 10px; font-weight: 800; }
.words-presets button { min-height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--accent-dark); font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; }
.words-presets button:hover { border-color: #d9a18b; background: #fff8f1; }
.words-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.words-actions .button { min-height: 37px; padding: 0 11px; font-size: 11px; }
.words-status { min-height: 18px; margin: 11px 0 0; color: var(--muted); font-size: 11px; }
.words-result-wrap { margin-top: 14px; padding: 23px 25px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.words-result-wrap output { display: block; margin-top: 9px; color: var(--ink); font: 800 clamp(25px, 4.2vw, 45px)/1.18 ui-sans-serif, system-ui, sans-serif; letter-spacing: -.04em; overflow-wrap: anywhere; }
.words-result-wrap > p { margin: 16px 0 0; padding: 12px; border: 1px dashed #bfc1b4; border-radius: 8px; color: var(--muted); font: 12px/1.55 ui-sans-serif, system-ui, sans-serif; overflow-wrap: anywhere; }
.words-result-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 10px; }
.words-related-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 17px; }
.words-related-links a { color: var(--accent-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.words-related-links a:hover { text-decoration: underline; }
@media (max-width: 800px) { .words-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .words-toolbar label:last-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .words-section-heading { align-items: start; flex-direction: column; } .words-local-note { white-space: normal; } .words-toolbar { grid-template-columns: 1fr; } .words-toolbar label:last-child { grid-column: auto; } }

/* Random number generator */
.random-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 17px; }
.random-section-heading h2 { margin: 5px 0 0; font-size: 21px; letter-spacing: -.035em; }
.random-local-note { color: #92978f; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.random-input-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px 10px; }
.random-input-grid label, .random-option-grid label:not(.random-check) { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 800; }
.random-input-grid label span { color: #92978f; font-weight: 500; }
.random-input-grid input, .random-option-grid select { box-sizing: border-box; min-height: 41px; width: 100%; padding: 0 9px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.random-option-grid select { font-family: ui-sans-serif, system-ui, sans-serif; }
.random-input-grid input:focus, .random-option-grid select:focus { outline: 2px solid rgba(216, 137, 106, .3); border-color: #d8896a; }
.random-option-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 13px; align-items: stretch; }
.random-check { display: flex; align-items: center; gap: 9px; min-height: 41px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.random-check input { width: 16px; height: 16px; accent-color: var(--accent-dark); }
.random-check span { display: grid; gap: 3px; color: var(--ink); font-size: 11px; }
.random-check small { color: var(--muted); font-size: 10px; font-weight: 500; }
.random-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 15px; }
.random-presets > span { margin-right: 3px; color: var(--muted); font-size: 10px; font-weight: 800; }
.random-presets button { min-height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--accent-dark); font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; }
.random-presets button:hover { border-color: #d9a18b; background: #fff8f1; }
.random-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.random-actions .button { min-height: 37px; padding: 0 11px; font-size: 11px; }
.random-status { min-height: 18px; margin: 11px 0 0; color: var(--muted); font-size: 11px; }
.random-result-wrap { margin-top: 14px; padding: 23px 25px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.random-result-heading { display: flex; justify-content: space-between; align-items: start; gap: 15px; }
.random-result-heading output { display: block; max-height: 235px; margin-top: 9px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); font: 800 clamp(26px, 4vw, 48px)/1.13 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.07em; }
.random-badge { flex: 0 0 auto; padding: 6px 8px; border: 1px solid #bfc1b4; border-radius: 999px; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.random-badge-done { border-color: #9bb6a1; background: #eaf3ec; color: #48735e; }
.random-badge-error { border-color: #d3a39b; background: #fff0ec; color: #a74f45; }
.random-result-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.random-result-cards > div { display: grid; gap: 5px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.random-result-cards span { color: var(--muted); font-size: 10px; }
.random-result-cards strong { color: var(--ink); font: 700 13px ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.random-result-note { margin: 13px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.random-related-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 17px; }
.random-related-links a { color: var(--accent-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.random-related-links a:hover { text-decoration: underline; }
@media (max-width: 800px) { .random-input-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .random-option-grid { grid-template-columns: 1fr 1fr; } .random-check { grid-column: 1 / -1; } .random-result-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .random-section-heading { align-items: start; flex-direction: column; } .random-local-note { white-space: normal; } .random-input-grid, .random-option-grid, .random-result-cards { grid-template-columns: 1fr; } .random-check { grid-column: auto; } .random-result-heading { flex-direction: column; } }

/* Time zone meeting planner */
.tz-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 17px; }
.tz-section-heading h2 { margin: 5px 0 0; font-size: 21px; letter-spacing: -.035em; }
.tz-local-note { color: #92978f; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.tz-input-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 11px 10px; }
.tz-input-grid label, .tz-toolbar label, .tz-row label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 800; }
.tz-input-grid input, .tz-input-grid select, .tz-toolbar select, .tz-row input, .tz-row select { box-sizing: border-box; min-height: 41px; width: 100%; padding: 0 9px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 12px ui-sans-serif, system-ui, sans-serif; }
.tz-input-grid input[type="date"], .tz-input-grid input[type="time"], .tz-row input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tz-input-grid input:focus, .tz-input-grid select:focus, .tz-toolbar select:focus, .tz-row input:focus, .tz-row select:focus { outline: 2px solid rgba(216, 137, 106, .3); border-color: #d8896a; }
.tz-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 9px; margin-top: 13px; }
.tz-toolbar label { min-width: 190px; }
.tz-toolbar .button { min-height: 41px; padding: 0 11px; font-size: 11px; }
.tz-format-check { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 8px !important; min-height: 41px; min-width: auto !important; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.tz-format-check input { width: 16px; height: 16px; accent-color: var(--accent-dark); }
.tz-participants-heading { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.tz-participants-heading p { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.tz-participants-heading .button { min-height: 35px; padding: 0 11px; font-size: 11px; }
.tz-rows { display: grid; gap: 8px; margin-top: 13px; }
.tz-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(125px, .7fr) minmax(125px, .7fr) 34px; gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.tz-remove { min-height: 34px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--muted); font-size: 19px; line-height: 1; cursor: pointer; }
.tz-remove:hover { border-color: #d9a18b; color: var(--accent-dark); background: #fff8f1; }
.tz-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.tz-actions .button { min-height: 37px; padding: 0 11px; font-size: 11px; }
.tz-status { min-height: 18px; margin: 11px 0 0; color: var(--muted); font-size: 11px; }
.tz-result-wrap { margin-top: 14px; padding: 23px 25px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.tz-result-heading, .tz-overlap-heading { display: flex; justify-content: space-between; align-items: start; gap: 15px; }
.tz-result-heading h3, .tz-overlap-heading h3 { margin: 6px 0 0; font-size: 19px; letter-spacing: -.035em; }
.tz-badge { flex: 0 0 auto; padding: 6px 8px; border: 1px solid #bfc1b4; border-radius: 999px; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.tz-badge-done { border-color: #9bb6a1; background: #eaf3ec; color: #48735e; }
.tz-badge-error { border-color: #d3a39b; background: #fff0ec; color: #a74f45; }
.tz-converted-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.tz-city-card { display: grid; gap: 7px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.tz-city-card > div { display: grid; gap: 3px; }
.tz-city-card strong { color: var(--ink); font-size: 12px; }
.tz-city-card span, .tz-city-card small { color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.tz-city-card > b { color: var(--ink); font: 700 15px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.tz-overlap-block { margin-top: 25px; padding-top: 22px; border-top: 1px solid var(--line); }
.tz-overlap-heading > span { color: var(--muted); font-size: 10px; }
.tz-window-list { display: grid; gap: 8px; margin-top: 13px; }
.tz-window { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.tz-window-best { border-color: #9bb6a1; box-shadow: inset 4px 0 #6c997c; }
.tz-window > div { display: grid; gap: 4px; }
.tz-window strong { color: var(--accent-dark); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.tz-window > div span { color: var(--ink); font: 700 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.tz-window p { display: grid; gap: 5px; margin: 10px 0 0; }
.tz-window p span { color: var(--muted); font-size: 10px; line-height: 1.35; }
.tz-window p b { color: var(--ink); }
.tz-empty { margin: 13px 0 0; padding: 13px; border: 1px dashed #bfc1b4; border-radius: 8px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.tz-result-note { margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.tz-related-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 17px; }
.tz-related-links a { color: var(--accent-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.tz-related-links a:hover { text-decoration: underline; }
@media (max-width: 800px) { .tz-input-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tz-input-grid label:first-child { grid-column: 1 / -1; } .tz-converted-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tz-section-heading, .tz-participants-heading { align-items: start; flex-direction: column; } .tz-local-note { white-space: normal; } .tz-input-grid, .tz-converted-grid { grid-template-columns: 1fr; } .tz-row { grid-template-columns: 1fr 1fr 34px; } .tz-row label:first-child { grid-column: 1 / -1; } .tz-row .tz-remove { grid-column: 3; grid-row: 2; } .tz-overlap-heading { align-items: start; flex-direction: column; } }

/* Roman numeral converter */
.roman-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 17px; }
.roman-section-heading h2 { margin: 5px 0 0; font-size: 21px; letter-spacing: -.035em; }
.roman-local-note { color: #92978f; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.roman-mode-toggle { display: inline-flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: #f2f3ec; }
.roman-mode-toggle label { position: relative; display: block; padding: 8px 11px; border-radius: 6px; color: var(--muted); font-size: 11px; font-weight: 800; cursor: pointer; }
.roman-mode-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.roman-mode-toggle label:has(input:checked) { background: var(--ink); color: #fff; }
.roman-input-label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 800; }
.roman-input-label input { box-sizing: border-box; min-height: 46px; width: 100%; padding: 0 11px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 19px ui-monospace, SFMono-Regular, Menlo, monospace; }
.roman-input-label input:focus { outline: 2px solid rgba(216, 137, 106, .3); border-color: #d8896a; }
.roman-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 15px; }
.roman-presets > span { margin-right: 3px; color: var(--muted); font-size: 10px; font-weight: 800; }
.roman-presets button { min-height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--accent-dark); font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; }
.roman-presets button:hover { border-color: #d9a18b; background: #fff8f1; }
.roman-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.roman-actions .button { min-height: 37px; padding: 0 11px; font-size: 11px; }
.roman-status { min-height: 18px; margin: 11px 0 0; color: var(--muted); font-size: 11px; }
.roman-result-wrap { margin-top: 14px; padding: 23px 25px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.roman-result-heading { display: flex; justify-content: space-between; align-items: start; gap: 15px; }
.roman-result-heading output { display: block; margin-top: 9px; color: var(--ink); font: 800 clamp(38px, 7vw, 76px)/1.05 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.08em; overflow-wrap: anywhere; }
.roman-badge { flex: 0 0 auto; padding: 6px 8px; border: 1px solid #bfc1b4; border-radius: 999px; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.roman-badge-done { border-color: #9bb6a1; background: #eaf3ec; color: #48735e; }
.roman-badge-error { border-color: #d3a39b; background: #fff0ec; color: #a74f45; }
.roman-result-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 13px; color: var(--muted); font-size: 10px; }
.roman-breakdown { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.roman-breakdown p { margin: 11px 0 0; padding: 13px; border: 1px dashed #bfc1b4; border-radius: 8px; background: #fff; color: var(--ink); font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.roman-reference { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr); gap: 12px 20px; margin-top: 25px; padding-top: 22px; border-top: 1px solid var(--line); }
.roman-reference > div:first-child { display: grid; align-content: start; gap: 6px; }
.roman-reference strong { color: var(--ink); font-size: 15px; }
.roman-reference-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.roman-reference-grid span { padding: 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--muted); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.roman-reference-grid b { color: var(--ink); font-size: 14px; }
.roman-reference > p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.roman-related-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 17px; }
.roman-related-links a { color: var(--accent-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.roman-related-links a:hover { text-decoration: underline; }
@media (max-width: 520px) { .roman-section-heading { align-items: start; flex-direction: column; } .roman-local-note { white-space: normal; } .roman-reference { grid-template-columns: 1fr; } .roman-reference-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Random name picker */
.picker-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 17px; }
.picker-section-heading h2 { margin: 5px 0 0; font-size: 21px; letter-spacing: -.035em; }
.picker-local-note { color: #92978f; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.picker-list-label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 800; }
.picker-list-label > span { color: #92978f; font-weight: 500; }
.picker-list-label textarea { box-sizing: border-box; width: 100%; min-height: 190px; padding: 12px; resize: vertical; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.picker-list-label textarea:focus { outline: 2px solid rgba(216, 137, 106, .3); border-color: #d8896a; }
.picker-toolbar { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(120px, .65fr) minmax(120px, .65fr) minmax(0, 1.1fr) minmax(0, 1.1fr); gap: 10px; margin-top: 13px; align-items: stretch; }
.picker-toolbar label:not(.picker-check) { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 800; }
.picker-toolbar select, .picker-toolbar input[type="number"] { box-sizing: border-box; min-height: 41px; width: 100%; padding: 0 9px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 12px ui-sans-serif, system-ui, sans-serif; }
.picker-toolbar input[type="number"] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.picker-toolbar select:focus, .picker-toolbar input:focus { outline: 2px solid rgba(216, 137, 106, .3); border-color: #d8896a; }
.picker-check { display: flex; align-items: center; gap: 9px; min-height: 41px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.picker-check input { width: 16px; height: 16px; accent-color: var(--accent-dark); }
.picker-check span { display: grid; gap: 3px; color: var(--ink); font-size: 11px; }
.picker-check small { color: var(--muted); font-size: 10px; font-weight: 500; }
.picker-toolbar [hidden] { display: none !important; }
.picker-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 15px; }
.picker-presets > span { margin-right: 3px; color: var(--muted); font-size: 10px; font-weight: 800; }
.picker-presets button { min-height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--accent-dark); font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; }
.picker-presets button:hover { border-color: #d9a18b; background: #fff8f1; }
.picker-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.picker-actions .button { min-height: 37px; padding: 0 11px; font-size: 11px; }
.picker-status { min-height: 18px; margin: 11px 0 0; color: var(--muted); font-size: 11px; }
.picker-result-wrap { margin-top: 14px; padding: 23px 25px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.picker-result-heading { display: flex; justify-content: space-between; align-items: start; gap: 15px; }
.picker-result-heading h3 { margin: 6px 0 0; font-size: 19px; letter-spacing: -.035em; }
.picker-badge { flex: 0 0 auto; padding: 6px 8px; border: 1px solid #bfc1b4; border-radius: 999px; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.picker-badge-done { border-color: #9bb6a1; background: #eaf3ec; color: #48735e; }
.picker-badge-error { border-color: #d3a39b; background: #fff0ec; color: #a74f45; }
.picker-empty { margin: 15px 0 0; padding: 14px; border: 1px dashed #bfc1b4; border-radius: 8px; color: var(--muted); font-size: 11px; }
.picker-winner-list, .picker-shuffle-list { display: grid; gap: 8px; margin: 17px 0 0; padding: 0; list-style: none; }
.picker-winner-list li { display: flex; align-items: center; min-height: 52px; padding: 10px 14px; border: 1px solid #9bb6a1; border-radius: 8px; background: #fff; color: var(--ink); font: 800 20px/1.2 ui-sans-serif, system-ui, sans-serif; }
.picker-winner-list li::before { content: '✓'; margin-right: 10px; color: #48735e; font-size: 15px; }
.picker-shuffle-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: 12px; }
.picker-shuffle-list small { color: var(--muted); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.picker-team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 17px; }
.picker-team-grid article { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.picker-team-grid h4 { display: flex; justify-content: space-between; margin: 0; color: var(--ink); font-size: 12px; }
.picker-team-grid h4 span { color: var(--muted); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.picker-team-grid ul { display: grid; gap: 5px; margin: 10px 0 0; padding-left: 17px; color: var(--muted); font-size: 11px; }
.picker-result-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 14px; color: var(--muted); font-size: 10px; }
.picker-related-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 17px; }
.picker-related-links a { color: var(--accent-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.picker-related-links a:hover { text-decoration: underline; }
@media (max-width: 900px) { .picker-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); } .picker-toolbar label:first-child { grid-column: span 2; } }
@media (max-width: 600px) { .picker-section-heading { align-items: start; flex-direction: column; } .picker-local-note { white-space: normal; } .picker-toolbar { grid-template-columns: 1fr 1fr; } .picker-toolbar label:first-child { grid-column: 1 / -1; } .picker-team-grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .picker-toolbar { grid-template-columns: 1fr; } .picker-toolbar label:first-child { grid-column: auto; } }

/* Typing test */
.typing-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 17px; }
.typing-section-heading h2 { margin: 5px 0 0; font-size: 21px; letter-spacing: -.035em; }
.typing-local-note { color: #92978f; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.typing-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 9px; }
.typing-toolbar label { display: grid; gap: 7px; min-width: min(100%, 220px); flex: 1 1 210px; color: var(--muted); font-size: 10px; font-weight: 800; }
.typing-toolbar select { box-sizing: border-box; min-height: 41px; width: 100%; padding: 0 9px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 12px ui-sans-serif, system-ui, sans-serif; }
.typing-toolbar select:focus { outline: 2px solid rgba(216, 137, 106, .3); border-color: #d8896a; }
.typing-toolbar .button { min-height: 41px; padding: 0 11px; font-size: 11px; }
.typing-prompt { margin-top: 17px; padding: 18px 19px; border: 1px solid var(--line); border-radius: 9px; background: #f2f3ec; color: #999c94; font: 700 18px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .01em; overflow-wrap: break-word; word-break: normal; }
.typing-prompt .typing-space { white-space: pre; }
.typing-prompt .typing-space::after { content: '·'; opacity: .42; }
.typing-prompt span { border-radius: 3px; }
.typing-prompt .typing-correct { color: var(--ink); }
.typing-prompt .typing-error { background: #f6d6cf; color: #a74f45; }
.typing-prompt .typing-current { background: #d8896a; color: #fff; box-shadow: 0 0 0 2px rgba(216,137,106,.18); }
.typing-input-label { display: grid; gap: 7px; margin-top: 14px; color: var(--muted); font-size: 10px; font-weight: 800; }
.typing-input-label > span { color: #92978f; font-weight: 500; }
.typing-input-label textarea { box-sizing: border-box; min-height: 95px; width: 100%; padding: 12px; resize: vertical; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 16px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.typing-input-label textarea:focus { outline: 2px solid rgba(216,137,106,.3); border-color: #d8896a; }
.typing-input-label textarea:disabled { background: #f2f3ec; color: #999c94; }
.typing-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.typing-actions .button { min-height: 37px; padding: 0 11px; font-size: 11px; }
.typing-status { min-height: 18px; margin: 11px 0 0; color: var(--muted); font-size: 11px; }
.typing-progress { height: 6px; margin-top: 10px; overflow: hidden; border-radius: 999px; background: #dedfd6; }
.typing-progress > div { height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width .1s linear; }
.typing-result-wrap { margin-top: 14px; padding: 23px 25px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.typing-result-heading { display: flex; justify-content: space-between; align-items: start; gap: 15px; }
.typing-result-heading h3 { margin: 6px 0 0; font-size: 19px; letter-spacing: -.035em; }
.typing-badge { flex: 0 0 auto; padding: 6px 8px; border: 1px solid #bfc1b4; border-radius: 999px; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.typing-badge-running { border-color: #d9a18b; background: #fff8f1; color: var(--accent-dark); }
.typing-badge-done { border-color: #9bb6a1; background: #eaf3ec; color: #48735e; }
.typing-badge-error { border-color: #d3a39b; background: #fff0ec; color: #a74f45; }
.typing-metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 8px; margin-top: 19px; }
.typing-metric-grid > div { display: grid; gap: 5px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.typing-metric-grid span { color: var(--muted); font-size: 10px; }
.typing-metric-grid strong { color: var(--ink); font: 700 17px ui-monospace, SFMono-Regular, Menlo, monospace; }
.typing-result-note { margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.typing-related-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 17px; }
.typing-related-links a { color: var(--accent-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.typing-related-links a:hover { text-decoration: underline; }
@media (max-width: 800px) { .typing-metric-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 520px) { .typing-section-heading { align-items: start; flex-direction: column; } .typing-local-note { white-space: normal; } .typing-prompt { font-size: 15px; } .typing-metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Fancy text generator */
.fancy-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 17px; }
.fancy-section-heading h2 { margin: 5px 0 0; font-size: 21px; letter-spacing: -.035em; }
.fancy-local-note { color: #92978f; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.fancy-input-label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 800; }
.fancy-input-label > span { color: #92978f; font-weight: 500; }
.fancy-input-label textarea { box-sizing: border-box; min-height: 94px; width: 100%; padding: 12px; resize: vertical; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 18px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.fancy-input-label textarea:focus, .fancy-toolbar input:focus { outline: 2px solid rgba(216,137,106,.3); border-color: #d8896a; }
.fancy-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 10px; color: #92978f; font-size: 10px; }
.fancy-preset { padding: 6px 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--accent-dark); font: 700 10px ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
.fancy-preset:hover { border-color: #d8896a; }
.fancy-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 9px; margin-top: 17px; }
.fancy-toolbar label { display: grid; gap: 7px; flex: 1 1 220px; color: var(--muted); font-size: 10px; font-weight: 800; }
.fancy-toolbar input { box-sizing: border-box; min-height: 41px; width: 100%; padding: 0 11px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 12px ui-sans-serif, system-ui, sans-serif; }
.fancy-toolbar .button { min-height: 41px; padding: 0 12px; font-size: 11px; }
.fancy-status { min-height: 18px; margin: 11px 0 0; color: var(--muted); font-size: 11px; }
.fancy-results { display: grid; gap: 8px; margin-top: 10px; }
.fancy-result { padding: 14px 15px; border: 1px solid var(--line); border-radius: 9px; background: #f2f3ec; }
.fancy-result-meta { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.fancy-result-meta > div { display: grid; gap: 3px; }
.fancy-result-meta strong { color: var(--ink); font-size: 13px; }
.fancy-result-meta span { color: #92978f; font-size: 10px; }
.fancy-copy { flex: 0 0 auto; min-height: 31px; padding: 0 10px; font-size: 10px; }
.fancy-preview { min-height: 29px; margin: 11px 0 0; overflow-wrap: anywhere; color: var(--ink); font: 20px/1.45 ui-sans-serif, system-ui, sans-serif; }
.fancy-empty { color: #92978f; font-size: 12px; }
.fancy-note { margin-top: 14px; padding: 12px 13px; border-left: 3px solid #d8896a; color: var(--muted); background: #fff8f1; font-size: 11px; line-height: 1.5; }
.fancy-note strong { color: var(--ink); }
.fancy-related-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 17px; }
.fancy-related-links a { color: var(--accent-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.fancy-related-links a:hover { text-decoration: underline; }
@media (max-width: 600px) { .fancy-section-heading { align-items: start; flex-direction: column; } .fancy-local-note { white-space: normal; } }

/* Lorem Ipsum generator */
.lorem-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 17px; }
.lorem-section-heading h2 { margin: 5px 0 0; font-size: 21px; letter-spacing: -.035em; }
.lorem-local-note { color: #92978f; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.lorem-toolbar { display: grid; grid-template-columns: 1.2fr .7fr 1.2fr; gap: 9px; }
.lorem-toolbar label, .lorem-options > label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 800; }
.lorem-toolbar select, .lorem-toolbar input, .lorem-options select { box-sizing: border-box; min-height: 41px; width: 100%; padding: 0 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 12px ui-sans-serif, system-ui, sans-serif; }
.lorem-toolbar select:focus, .lorem-toolbar input:focus, .lorem-options select:focus { outline: 2px solid rgba(216,137,106,.3); border-color: #d8896a; }
.lorem-options { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 11px; }
.lorem-options > label:not(.lorem-check) { flex: 1 1 170px; }
.lorem-options .button { min-height: 41px; padding: 0 12px; font-size: 11px; }
.lorem-options > label.lorem-check { display: flex; flex: 0 1 190px; align-items: center; gap: 7px; min-height: 41px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.lorem-check input { width: 15px; height: 15px; accent-color: var(--accent); }
.lorem-status { min-height: 18px; margin: 11px 0 0; color: var(--muted); font-size: 11px; }
.lorem-output-wrap { margin-top: 9px; }
.lorem-output-wrap textarea { box-sizing: border-box; width: 100%; min-height: 275px; padding: 15px; resize: vertical; color: var(--ink); border: 1px solid var(--line); border-radius: 9px; background: #f2f3ec; font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; }
.lorem-output-wrap textarea:focus { outline: 2px solid rgba(216,137,106,.3); border-color: #d8896a; }
.lorem-output-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.lorem-output-actions > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
.lorem-output-actions .button { min-height: 35px; padding: 0 10px; font-size: 10px; }
.lorem-stats { display: flex; flex-wrap: wrap; gap: 11px; color: var(--muted); font-size: 10px; }
.lorem-stats span { padding-right: 11px; border-right: 1px solid var(--line); }
.lorem-stats span:last-child { padding-right: 0; border-right: 0; }
.lorem-stats strong { color: var(--ink); font: 700 13px ui-monospace, SFMono-Regular, Menlo, monospace; }
.lorem-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 14px; color: #92978f; font-size: 10px; }
.lorem-presets button { padding: 6px 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--accent-dark); font: 700 10px ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
.lorem-presets button:hover { border-color: #d8896a; }
.lorem-related-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 17px; }
.lorem-related-links a { color: var(--accent-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.lorem-related-links a:hover { text-decoration: underline; }
@media (max-width: 600px) { .lorem-section-heading { align-items: start; flex-direction: column; } .lorem-local-note { white-space: normal; } .lorem-toolbar { grid-template-columns: 1fr 1fr; } .lorem-toolbar label:last-child { grid-column: 1 / -1; } .lorem-options { align-items: stretch; flex-direction: column; } .lorem-check { min-height: 30px; } .lorem-options > label:not(.lorem-check), .lorem-options .button { width: 100%; } .lorem-output-actions { align-items: stretch; flex-direction: column; } .lorem-output-actions > div:last-child { width: 100%; } .lorem-output-actions .button { flex: 1 1 0; } }

/* YouTube thumbnail downloader */
.youtube-thumb-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 17px; }
.youtube-thumb-section-heading h2 { margin: 5px 0 0; font-size: 21px; letter-spacing: -.035em; }
.youtube-thumb-local-note { color: #92978f; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.youtube-thumb-input-row { display: flex; align-items: end; gap: 9px; }
.youtube-thumb-input-row label { display: grid; gap: 7px; flex: 1 1 auto; color: var(--muted); font-size: 10px; font-weight: 800; }
.youtube-thumb-input-row input { box-sizing: border-box; min-height: 43px; width: 100%; padding: 0 11px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 12px ui-sans-serif, system-ui, sans-serif; }
.youtube-thumb-input-row input:focus { outline: 2px solid rgba(216,137,106,.3); border-color: #d8896a; }
.youtube-thumb-input-row .button { min-height: 43px; padding: 0 13px; font-size: 11px; }
.youtube-thumb-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 10px; color: #92978f; font-size: 10px; }
.youtube-thumb-examples button { padding: 6px 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--accent-dark); font: 700 10px ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
.youtube-thumb-examples button:hover { border-color: #d8896a; }
.youtube-thumb-status { min-height: 18px; margin: 11px 0 0; color: var(--muted); font-size: 11px; }
.youtube-thumb-status-error { color: #a74f45; }
.youtube-thumb-summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: #f2f3ec; }
.youtube-thumb-summary > div { display: grid; gap: 4px; }
.youtube-thumb-summary span { color: var(--muted); font-size: 10px; }
.youtube-thumb-summary strong { color: var(--ink); font: 700 13px ui-monospace, SFMono-Regular, Menlo, monospace; }
.youtube-thumb-summary .button { min-height: 33px; padding: 0 10px; font-size: 10px; }
.youtube-thumb-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin-top: 10px; }
.youtube-thumb-card { overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #f2f3ec; }
.youtube-thumb-image-wrap { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #dedfd6; }
.youtube-thumb-image-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; }
.youtube-thumb-badge { position: absolute; left: 8px; top: 8px; padding: 5px 7px; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .03em; }
.youtube-thumb-badge-ok { color: #48735e; }
.youtube-thumb-badge-muted { color: #a74f45; }
.youtube-thumb-card-meta { display: flex; justify-content: space-between; gap: 8px; padding: 11px 12px 12px; }
.youtube-thumb-card-meta > div:first-child { display: grid; align-content: start; gap: 4px; min-width: 0; }
.youtube-thumb-card-meta strong { color: var(--ink); font-size: 12px; }
.youtube-thumb-card-meta span { color: var(--muted); font-size: 10px; line-height: 1.35; }
.youtube-thumb-card-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 5px; flex: 0 0 auto; }
.youtube-thumb-card-actions .button { min-height: 29px; padding: 0 7px; font-size: 9px; }
.youtube-thumb-card-actions a { display: inline-flex; align-items: center; text-decoration: none; }
.youtube-thumb-card-actions button:disabled { cursor: not-allowed; opacity: .45; }
.youtube-thumb-unavailable .youtube-thumb-image-wrap { filter: saturate(.35); }
.youtube-thumb-note { margin-top: 14px; padding: 12px 13px; border-left: 3px solid #d8896a; color: var(--muted); background: #fff8f1; font-size: 11px; line-height: 1.5; }
.youtube-thumb-note strong { color: var(--ink); }
.youtube-thumb-related-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 17px; }
.youtube-thumb-related-links a { color: var(--accent-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.youtube-thumb-related-links a:hover { text-decoration: underline; }
@media (max-width: 680px) { .youtube-thumb-section-heading { align-items: start; flex-direction: column; } .youtube-thumb-local-note { white-space: normal; } .youtube-thumb-input-row { align-items: stretch; flex-direction: column; } .youtube-thumb-input-row .button { width: 100%; } .youtube-thumb-grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .youtube-thumb-card-meta { flex-direction: column; } .youtube-thumb-card-actions { justify-content: start; } .youtube-thumb-summary { align-items: start; flex-direction: column; } }

/* EMI calculator */
.emi-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 17px; }
.emi-section-heading h2 { margin: 5px 0 0; font-size: 21px; letter-spacing: -.035em; }
.emi-local-note { color: #92978f; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.emi-input-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.emi-input-grid label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 800; }
.emi-input-grid label span { color: #92978f; font-weight: 500; }
.emi-input-grid input, .emi-input-grid select { box-sizing: border-box; min-height: 41px; width: 100%; padding: 0 9px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 12px ui-sans-serif, system-ui, sans-serif; }
.emi-input-grid input:focus, .emi-input-grid select:focus { outline: 2px solid rgba(216,137,106,.3); border-color: #d8896a; }
.emi-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.emi-actions .button { min-height: 37px; padding: 0 11px; font-size: 11px; }
.emi-status { min-height: 18px; margin: 11px 0 0; color: var(--muted); font-size: 11px; }
.emi-result-wrap { margin-top: 13px; padding: 21px 23px; border: 1px solid var(--line); border-radius: 12px; background: #f2f3ec; }
.emi-primary-results { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.emi-primary-results > div { display: grid; gap: 6px; }
.emi-primary-results output { color: var(--ink); font: 700 clamp(26px, 4vw, 38px)/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.06em; }
.emi-primary-results strong { color: var(--ink); font: 700 25px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.05em; }
.emi-primary-results p { margin: 0; color: var(--muted); font-size: 11px; }
.emi-result-cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin-top: 20px; }
.emi-result-cards > div { display: grid; gap: 5px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.emi-result-cards span { color: var(--muted); font-size: 10px; }
.emi-result-cards strong { color: var(--ink); font: 700 14px ui-monospace, SFMono-Regular, Menlo, monospace; }
.emi-result-wrap > p { margin: 13px 0 0; color: var(--muted); font-size: 11px; }
.emi-schedule-block { margin-top: 22px; }
.emi-schedule-block .emi-section-heading { margin-bottom: 12px; }
.emi-schedule-block .emi-section-heading h2 { font-size: 18px; }
.emi-table-note { color: #92978f; font-size: 10px; }
.emi-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.emi-table { width: 100%; min-width: 590px; border-collapse: collapse; background: #fff; font-size: 11px; }
.emi-table th, .emi-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.emi-table th:first-child, .emi-table td:first-child { text-align: left; }
.emi-table th { color: var(--muted); background: #f2f3ec; font-size: 10px; font-weight: 800; }
.emi-table td { color: var(--ink); font-variant-numeric: tabular-nums; }
.emi-table tr:last-child td { border-bottom: 0; }
.emi-schedule-note { margin: 9px 0 0; color: var(--muted); font-size: 10px; }
.emi-related-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 17px; }
.emi-related-links a { color: var(--accent-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.emi-related-links a:hover { text-decoration: underline; }
@media (max-width: 760px) { .emi-input-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .emi-result-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .emi-section-heading { align-items: start; flex-direction: column; } .emi-local-note { white-space: normal; } .emi-input-grid { grid-template-columns: 1fr; } .emi-primary-results { grid-template-columns: 1fr; gap: 16px; } .emi-result-wrap { padding: 18px 15px; } }

/* Hero layout (homepage refresh) */
@media (max-width: 920px) {
  .hero { grid-template-columns: 1fr; gap: 34px; padding: 54px 0 44px; }
  .hero-art { max-width: 440px; margin-inline: auto; }
  .hero-art img { border-radius: 22px; }
}

/* Tool search + category chips (homepage) */
.tool-search { padding: 92px 0 0; }
.tool-search-box { display: flex; align-items: center; gap: 12px; max-width: 720px; height: 58px; padding: 0 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow); }
.tool-search-box svg { flex: none; width: 20px; height: 20px; color: var(--accent-dark); }
.tool-search-box input { flex: 1; height: 100%; border: 0; outline: none; background: transparent; color: var(--ink); font-size: 16px; }
.tool-search-box input::placeholder { color: #99a096; }
.tool-search-results { max-width: 720px; margin-top: 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.tool-search-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 12px 16px; border-bottom: 1px solid #edece3; color: var(--ink); text-decoration: none; }
.tool-search-item:last-child { border-bottom: 0; }
.tool-search-item:hover, .tool-search-item.active { background: #fff8f1; }
.tool-search-item-name { font-size: 14px; font-weight: 760; }
.tool-search-item-desc { grid-column: 1; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.tool-search-item-cat { grid-row: 1 / span 2; align-self: center; color: var(--accent-dark); font-size: 11px; font-weight: 800; }
.tool-search-empty { margin: 0; padding: 16px; color: var(--muted); font-size: 13px; }
.tool-search-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tool-search-cats a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(251, 250, 246, 0.85); color: var(--muted); font-size: 12px; font-weight: 700; text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.tool-search-cats a:hover { border-color: #dc9c83; color: var(--accent-dark); }

/* Motion (borrowed from open-source UI kits) */
@keyframes tp-card-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.tool-card-link.pre { opacity: 0; }
.tool-card-link.anim { animation: tp-card-in .5s cubic-bezier(.2, .7, .3, 1) both; }
.tool-search-results:not([hidden]) { animation: tp-pop .18s ease; }
@keyframes tp-pop { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-art img { animation: tp-float 7s ease-in-out infinite; }
  @keyframes tp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
}