@font-face {
    font-family: "Noto Sans Thai";
    src: url("/fonts/NotoSansThai-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 75% 100%;
    font-display: swap;
}

/* Installment calculator -------------------------------------------------- */
.installment-workspace { --tool-accent: #dc5b72; --tool-secondary: #2a91c9; }
.installment-heading, .installment-results-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.installment-local-badge { display: inline-flex; align-items: center; gap: .45rem; flex: 0 0 auto; padding: .48rem .72rem; border: 1px solid #a9e8d2; border-radius: 999px; color: #08785e; background: #edfff8; font-size: .82rem; font-weight: 800; }
.installment-local-badge > span { width: .55rem; height: .55rem; border-radius: 50%; background: #23c996; box-shadow: 0 0 0 .2rem #ccf8e9; }
.installment-form, .installment-results { display: flex; flex-direction: column; gap: 1.05rem; min-width: 0; }
.installment-method-fieldset { margin: 0; padding: 0; border: 0; }
.installment-method-fieldset legend, .installment-field-grid label > span:first-child { margin-bottom: .48rem; color: var(--ink-strong); font-size: .91rem; font-weight: 800; }
.installment-method-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .72rem; }
.installment-method-switch label { position: relative; display: block; cursor: pointer; }
.installment-method-switch input { position: absolute; opacity: 0; pointer-events: none; }
.installment-method-switch label > span { display: flex; min-height: 5.4rem; flex-direction: column; justify-content: center; gap: .25rem; padding: .9rem 1rem; border: 1px solid #dce4ef; border-radius: 1rem; background: #fff; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.installment-method-switch label.is-active > span, .installment-method-switch input:focus-visible + span { border-color: #dc5b72; background: #fff4f6; box-shadow: 0 0 0 .2rem rgb(220 91 114 / 13%); }
.installment-method-switch strong { color: var(--ink-strong); font-size: .98rem; }
.installment-method-switch small { color: var(--ink-muted); line-height: 1.45; }
.installment-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.installment-field-grid label { min-width: 0; }
.installment-field-grid label > span:first-child { display: block; }
.installment-input-shell { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; overflow: hidden; border: 1px solid #ccd8e8; border-radius: .85rem; background: #fff; }
.installment-input-shell:focus-within { border-color: #dc5b72; box-shadow: 0 0 0 .2rem rgb(220 91 114 / 12%); }
.installment-input-shell input { width: 100%; min-width: 0; min-height: 3rem; padding: .7rem .8rem; border: 0; outline: 0; color: var(--ink-strong); background: transparent; font: inherit; font-weight: 750; }
.installment-input-shell > span { padding: 0 .8rem; color: var(--ink-muted); font-size: .82rem; font-weight: 800; white-space: nowrap; }
.installment-presets { display: flex; flex-wrap: wrap; gap: .48rem; }
.installment-presets button { min-height: 2.35rem; padding: .42rem .68rem; border: 1px solid #d7e2ef; border-radius: 999px; color: #256078; background: #f4fbfe; font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; }
.installment-presets button:hover, .installment-presets button:focus-visible { border-color: #2a91c9; outline: 0; background: #e9f8fe; }
.installment-boundary-note { display: grid; grid-template-columns: 1.45rem minmax(0, 1fr); gap: .7rem; padding: .9rem; border: 1px solid #f0d9a1; border-radius: 1rem; color: #775313; background: #fffaf0; }
.installment-boundary-note svg { width: 1.35rem; fill: #d89322; }
.installment-boundary-note strong { display: block; margin-bottom: .2rem; color: #65430e; }
.installment-boundary-note p { margin: 0; font-size: .84rem; line-height: 1.55; }
.installment-actions { margin-top: auto; }
.installment-results-heading > span { font-size: .8rem; }
.installment-primary-result { padding: 1.1rem; border: 1px solid #f2c7d0; border-radius: 1rem; background: linear-gradient(135deg, #fff2f5, #fffaf5); }
.installment-primary-result > span, .installment-primary-result > small { display: block; color: var(--ink-muted); }
.installment-primary-result > strong { display: block; margin: .25rem 0; color: #c53f61; font-size: clamp(1.85rem, 5vw, 2.7rem); line-height: 1.1; overflow-wrap: anywhere; }
.installment-primary-result > small { line-height: 1.45; }
.installment-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.installment-stats strong { font-size: clamp(1.02rem, 2vw, 1.32rem); overflow-wrap: anywhere; }
.installment-formula { margin: 0; padding: .72rem .82rem; border-left: .25rem solid #2a91c9; border-radius: 0 .65rem .65rem 0; color: #31576c; background: #eef9fd; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8rem; line-height: 1.55; overflow-wrap: anywhere; }
.installment-schedule-wrap { max-height: 17rem; overflow: auto; border: 1px solid #dce4ef; border-radius: .85rem; background: #fff; }
.installment-schedule { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: .79rem; }
.installment-schedule th, .installment-schedule td { padding: .55rem .5rem; border-bottom: 1px solid #e6ebf2; text-align: right; white-space: nowrap; }
.installment-schedule th:first-child, .installment-schedule td:first-child { text-align: center; }
.installment-schedule thead { position: sticky; top: 0; z-index: 1; color: var(--ink-strong); background: #f2f6fb; }
.installment-schedule tbody tr:nth-child(even) { background: #fbfdff; }
.installment-result-actions { margin-top: auto; }

@media (max-width: 720px) {
    .installment-heading, .installment-results-heading { align-items: stretch; flex-direction: column; }
    .installment-local-badge { align-self: flex-start; }
    .installment-method-switch, .installment-field-grid, .installment-stats { grid-template-columns: 1fr; }
    .installment-method-switch label > span { min-height: 0; }
    .installment-schedule-wrap { max-width: 100%; }
}

@media print {
    .installment-schedule-wrap { max-height: none; overflow: visible; }
    .installment-schedule { min-width: 0; font-size: 8pt; }
    .installment-form, .installment-result-actions { display: none !important; }
}

/* Period and fertile-window estimate */
.tool-page--safedate {
    --accent: #a13f78;
    --accent-strong: #76345f;
    --accent-soft: #fcecf5;
}

.safedate-workspace {
    background: radial-gradient(circle at 100% 0, rgb(196 81 139 / 12%), transparent 22rem), linear-gradient(145deg, #fff, #fff9fc);
    border-color: #efd3e1;
}

.safedate-heading,
.safedate-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.safedate-heading > div,
.safedate-panel-heading > div {
    min-width: 0;
}

.safedate-heading p,
.safedate-panel-heading p,
.safedate-panel-heading h3 {
    margin: 0;
}

.safedate-heading > div > p:last-child {
    margin-top: .35rem;
    color: #6f6070;
}

.safedate-local-badge,
.safedate-panel-heading > span {
    display: inline-flex;
    min-height: 1.9rem;
    padding: .35rem .65rem;
    align-items: center;
    gap: .4rem;
    color: #79506b;
    background: #fff4fa;
    border: 1px solid #eccdde;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}

.safedate-local-badge span {
    width: .48rem;
    height: .48rem;
    background: #22b98a;
    border-radius: 50%;
    box-shadow: 0 0 0 .2rem rgb(34 185 138 / 12%);
}

.safedate-layout {
    align-items: stretch;
}

.safedate-input-panel,
.safedate-results-panel {
    display: flex;
    min-width: 0;
    min-height: 54rem;
    flex-direction: column;
    gap: 1rem;
}

.safedate-input-panel fieldset {
    margin: 0;
    padding: .9rem;
    border: 1px solid #eadbe4;
    border-radius: .9rem;
}

.safedate-input-panel legend {
    padding: 0 .35rem;
    color: #443443;
    font-size: .84rem;
    font-weight: 800;
}

.safedate-date-grid,
.safedate-number-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.safedate-number-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.safedate-date-grid label,
.safedate-number-grid label {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .35rem;
    color: #514451;
    font-size: .77rem;
    font-weight: 750;
}

.safedate-date-grid input,
.safedate-date-grid select,
.safedate-number-grid input {
    width: 100%;
    min-width: 0;
    min-height: 2.85rem;
    padding: .6rem .75rem;
    color: #241e2c;
    background: #fff;
    border: 1px solid #d9cbd5;
    border-radius: .7rem;
    font: inherit;
    font-size: .86rem;
    font-weight: 700;
}

.safedate-date-grid input:focus,
.safedate-date-grid select:focus,
.safedate-number-grid input:focus {
    border-color: #b14d84;
    box-shadow: 0 0 0 .2rem rgb(177 77 132 / 13%);
    outline: 0;
}

.safedate-input-unit {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #d9cbd5;
    border-radius: .7rem;
    overflow: hidden;
}

.safedate-input-unit:focus-within {
    border-color: #b14d84;
    box-shadow: 0 0 0 .2rem rgb(177 77 132 / 13%);
}

.safedate-input-unit input {
    border: 0;
    box-shadow: none !important;
}

.safedate-input-unit span {
    padding-right: .7rem;
    color: #806d7a;
    font-size: .72rem;
    white-space: nowrap;
}

.safedate-number-grid small {
    color: #7e707c;
    font-size: .69rem;
    font-weight: 550;
    line-height: 1.45;
}

.safedate-boundary-note {
    display: flex;
    padding: .9rem;
    align-items: flex-start;
    gap: .7rem;
    color: #70402f;
    background: #fff8ed;
    border: 1px solid #eed9ba;
    border-radius: .85rem;
}

.safedate-boundary-note svg {
    width: 1.25rem;
    flex: 0 0 auto;
    fill: #d47a2c;
}

.safedate-boundary-note strong {
    color: #884821;
}

.safedate-boundary-note p {
    margin: .2rem 0 0;
    font-size: .77rem;
}

.safedate-actions {
    margin-top: auto;
}

.tool-page--safedate .button-primary {
    border-color: #85345f;
    background: linear-gradient(135deg, #b84f89, #83345f);
    box-shadow: 0 .5rem 1rem rgb(131 52 95 / 18%);
}

.safedate-copy-button {
    display: inline-flex;
    min-height: 2.25rem;
    padding: .45rem .7rem;
    align-items: center;
    gap: .35rem;
    color: #7d3c65;
    background: #fff5fa;
    border: 1px solid #e8c9da;
    border-radius: .65rem;
    cursor: pointer;
    font: inherit;
    font-size: .75rem;
    font-weight: 800;
}

.safedate-copy-button svg {
    width: 1rem;
    fill: currentColor;
}

.safedate-caution-card {
    padding: .9rem 1rem;
    color: #63364f;
    background: linear-gradient(135deg, #fff2f8, #fff9fc);
    border: 1px solid #eccddd;
    border-radius: .9rem;
}

.safedate-caution-card span {
    display: block;
    color: #987184;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.safedate-caution-card strong {
    display: block;
    margin-top: .2rem;
    font-size: 1.05rem;
}

.safedate-caution-card p {
    margin: .35rem 0 0;
    color: #745d69;
    font-size: .76rem;
}

.safedate-metric-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .55rem;
}

.safedate-metric-grid article {
    min-width: 0;
    padding: .75rem .85rem;
    background: #fff;
    border: 1px solid #eadde5;
    border-left: .25rem solid #c04f8b;
    border-radius: .75rem;
}

.safedate-metric-grid article:nth-child(2) { border-left-color: #e39b35; }
.safedate-metric-grid article:nth-child(3) { border-left-color: #4c9c8b; }

.safedate-metric-grid span {
    display: block;
    color: #806d7a;
    font-size: .68rem;
    font-weight: 750;
}

.safedate-metric-grid strong {
    display: block;
    margin-top: .15rem;
    color: #2d2430;
    overflow-wrap: anywhere;
    font-size: .83rem;
    line-height: 1.45;
}

.safedate-sdm {
    padding: .85rem;
    color: #4f3d14;
    background: #fffaf0;
    border: 1px solid #ead9b3;
    border-radius: .85rem;
}

.safedate-sdm.is-unavailable {
    color: #5d5960;
    background: #f8f7f8;
    border-color: #dfdce0;
}

.safedate-sdm span {
    color: #9a792d;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.safedate-sdm h4,
.safedate-sdm p {
    margin: .2rem 0 0;
}

.safedate-sdm > strong {
    display: block;
    margin-top: .55rem;
    color: #9a5f16;
    font-size: 1rem;
}

.safedate-sdm p,
.safedate-test-note {
    color: #746b57;
    font-size: .74rem;
}

.safedate-table-scroll {
    min-height: 11rem;
    flex: 1;
    border: 1px solid #e5dbe1;
    border-radius: .75rem;
}

.safedate-table-scroll table {
    min-width: 47rem;
}

.safedate-table-scroll th,
.safedate-table-scroll td {
    padding: .65rem;
    color: #4d424c;
    font-size: .69rem;
    line-height: 1.4;
    vertical-align: top;
}

.safedate-table-scroll thead th {
    color: #6c5364;
    background: #fff4f9;
}

.safedate-test-note {
    margin: 0;
    padding: .75rem .85rem;
    color: #4f5661;
    background: #f7f9fc;
    border-radius: .7rem;
}

.tool-page--safedate .report-export-bar {
    border-color: #ead3df;
    background: radial-gradient(circle at 100% 0, rgb(184 79 137 / 10%), transparent 14rem), #fff;
}

@media (max-width: 920px) {
    .safedate-number-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .safedate-heading { flex-direction: column; }
    .safedate-date-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .safedate-input-panel,
    .safedate-results-panel { min-height: 0; }
    .safedate-table-scroll { min-height: 16rem; max-height: 24rem; }
}

@media print {
    .tool-page--safedate .tool-intro-grid,
    .tool-page--safedate .safedate-layout > :first-child,
    .tool-page--safedate .safedate-copy-button,
    .tool-page--safedate .report-export-bar,
    .tool-page--safedate .post-tool-answer,
    .tool-page--safedate .content-grid { display: none !important; }
    .tool-page--safedate .safedate-workspace { padding: 0; background: #fff !important; border: 0; box-shadow: none; }
    .tool-page--safedate .safedate-layout { display: block; margin: 0; }
    .tool-page--safedate .safedate-results-panel { min-height: 0; padding: 4mm; border: 1px solid #d8c8d2; }
    .tool-page--safedate .safedate-table-scroll { max-height: none; overflow: visible; }
    .tool-page--safedate .safedate-table-scroll table { min-width: 0; }
}

:root {
    --color-ink: #202943;
    --color-muted: #65708a;
    --color-brand: #6557d9;
    --color-brand-dark: #4c3db8;
    --color-brand-soft: #f1efff;
    --color-cyan: #27b8cd;
    --color-teal: #39b98a;
    --color-lime: #9ac94b;
    --color-sun: #ffbd3f;
    --color-coral: #ff715e;
    --color-pink: #ee6093;
    --color-surface: #ffffff;
    --color-subtle: #fff9ef;
    --color-border: #dfe3ef;
    --color-danger: #b42318;
    --color-danger-soft: #fff1f0;
    --shadow-card: 0 24px 58px rgb(55 45 111 / 11%);
    --shadow-soft: 0 10px 28px rgb(55 45 111 / 7%);
    --radius-sm: .85rem;
    --radius-md: 1.35rem;
    --radius-lg: 2rem;
    --shell: 76rem;
    --workspace-gap: 1.25rem;
    --workspace-panel-padding: clamp(1.15rem, 2vw, 1.5rem);
    --workspace-panel-radius: var(--radius-md);
    --font-sans: "Noto Sans Thai", "Leelawadee UI", Tahoma, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    color-scheme: light;
    font-family: var(--font-sans);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--color-ink);
    background:
        radial-gradient(circle at 6% 12rem, rgb(255 189 63 / 13%), transparent 13rem),
        radial-gradient(circle at 96% 27rem, rgb(39 184 205 / 10%), transparent 16rem),
        radial-gradient(circle at 14% 72rem, rgb(238 96 147 / 7%), transparent 18rem),
        linear-gradient(180deg, #fffdf8 0, #fff9ef 34rem, #f8fbff 100%);
    font-size: 1rem;
    line-height: 1.65;
}

a {
    color: var(--color-brand);
    text-underline-offset: .2em;
}

a:hover {
    color: var(--color-brand-dark);
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: .2rem solid #ffbf47;
    outline-offset: .18rem;
}

.shell {
    width: min(calc(100% - 2rem), var(--shell));
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    z-index: 100;
    top: .75rem;
    left: .75rem;
    padding: .7rem 1rem;
    color: #fff;
    background: var(--color-ink);
    border-radius: var(--radius-sm);
    transform: translateY(-180%);
}

.skip-link:focus {
    transform: translateY(0);
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.site-header {
    position: sticky;
    z-index: 20;
    top: 0;
    border-bottom: 1px solid var(--color-border);
    background: rgb(255 255 255 / 88%);
    box-shadow: 0 1px 0 rgb(15 23 42 / 2%);
    backdrop-filter: blur(18px);
}

.site-header::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--color-cyan),
        var(--color-teal) 30%,
        var(--color-lime) 56%,
        var(--color-sun) 78%,
        var(--color-coral)
    );
    opacity: .78;
    content: "";
}

.header-row {
    min-height: 4.75rem;
    display: grid;
    grid-template-columns: auto 1fr minmax(14rem, 20rem) auto;
    align-items: center;
    gap: 1.25rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--color-ink);
    font-size: 1.35rem;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: -.02em;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    color: #fff;
    background: linear-gradient(145deg, var(--color-cyan), var(--color-brand) 62%, #765be9);
    border-radius: .75rem;
    box-shadow: 0 7px 16px rgb(37 99 235 / 24%);
    font-size: .8rem;
    letter-spacing: 0;
}

.brand-word {
    color: var(--color-ink);
    background: linear-gradient(100deg, #17233a 18%, #2563eb 54%, #20a98e);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.primary-nav {
    display: flex;
    gap: 1.35rem;
}

.primary-nav a {
    padding: .45rem .65rem;
    color: var(--color-ink);
    font-weight: 600;
    text-decoration: none;
    border-radius: .55rem;
    transition: color .18s ease, background-color .18s ease;
}

.primary-nav a:hover {
    color: var(--color-brand-dark);
    background: var(--color-brand-soft);
}

.primary-nav a[aria-current] {
    color: var(--color-brand-dark);
    background: var(--color-brand-soft);
    box-shadow: inset 0 -.16rem 0 var(--color-brand);
}

#main-content:focus-visible {
    outline: .2rem solid #ffbf47;
    outline-offset: .35rem;
}

.site-search {
    display: flex;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    overflow: hidden;
    background: #f8fafc;
    box-shadow: inset 0 1px 2px rgb(15 23 42 / 2%);
}

.site-search:focus-within {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 .18rem var(--color-brand-soft);
}

.site-search input {
    min-width: 0;
    flex: 1;
    padding: .62rem 1rem;
    border: 0;
    outline: 0;
    background: transparent;
}

.site-search button {
    padding: .62rem 1rem;
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--color-brand), var(--color-brand-dark));
    cursor: pointer;
}

.language-switcher {
    display: inline-flex;
    padding: .2rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #f8fafc;
}

.language-switcher a {
    min-width: 2.65rem;
    padding: .35rem .65rem;
    color: var(--color-muted);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

.language-switcher a[aria-current="page"] {
    color: #fff;
    background: var(--color-ink);
    box-shadow: 0 3px 9px rgb(23 35 58 / 16%);
}

.page-content {
    min-height: 70vh;
    padding-block: 2rem 5.5rem;
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(18rem, .75fr);
    gap: 3.5rem;
    align-items: center;
    padding-block: 3rem 4.5rem;
}

.hero h1,
.page-header h1,
.tool-header h1 {
    max-width: 52rem;
    margin: .3rem 0 1rem;
    font-size: clamp(2.15rem, 5vw, 4.25rem);
    line-height: 1.12;
    letter-spacing: -.045em;
}

.hero-copy,
.page-header > p,
.tool-header > p {
    max-width: 47rem;
    color: var(--color-muted);
    font-size: 1.15rem;
}

.eyebrow {
    margin: 0;
    color: var(--color-brand);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.privacy-card {
    padding: 2rem;
    background: linear-gradient(150deg, #eff7ff, #fff);
    border: 1px solid #cde1f8;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.privacy-card h2 {
    margin-bottom: .5rem;
    font-size: 1.3rem;
}

.privacy-card p {
    margin: 0;
    color: var(--color-muted);
}

.privacy-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    color: #fff;
    background: var(--color-brand);
    font-weight: 900;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.5rem;
}

.button-row.compact {
    margin-top: 0;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.9rem;
    padding: .7rem 1.2rem;
    border: 1px solid transparent;
    border-radius: .75rem;
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease,
        border-color .18s ease;
}

.button:not(:disabled):hover {
    transform: translateY(-1px);
}

.button:disabled {
    opacity: .52;
    cursor: not-allowed;
}

.button-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--color-brand), var(--color-brand-dark));
    box-shadow: 0 9px 20px rgb(37 99 235 / 22%);
}

.button-primary:hover {
    color: #fff;
    background: var(--color-brand-dark);
}

.button-secondary {
    color: var(--color-ink);
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: 0 2px 7px rgb(15 23 42 / 4%);
}

.button-danger {
    color: var(--color-danger);
    background: var(--color-danger-soft);
    border-color: #ffc9c4;
}

.button-with-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
}

.button-with-icon svg {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    fill: currentcolor;
}

.section-block {
    padding-block: 2rem;
}

.section-heading,
.workspace-heading,
.workspace-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.section-heading h2 {
    margin: .2rem 0 0;
    font-size: clamp(1.65rem, 3vw, 2.35rem);
}

.text-link,
.card-link {
    font-weight: 750;
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.tool-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 15rem;
    padding: 1.5rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.tool-card::before {
    position: absolute;
    inset: 0 0 auto;
    height: .3rem;
    background: linear-gradient(90deg, var(--color-cyan), var(--color-teal));
    content: "";
}

.tool-card:nth-child(3n + 2)::before {
    background: linear-gradient(90deg, var(--color-pink), var(--color-coral));
}

.tool-card:nth-child(3n + 3)::before {
    background: linear-gradient(90deg, var(--color-lime), var(--color-sun));
}

.tool-card:hover {
    border-color: #bfdbfe;
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
}

.tool-card h2,
.tool-card h3 {
    margin: .55rem 0 .35rem;
    font-size: 1.3rem;
}

.tool-card h2 a,
.tool-card h3 a {
    color: var(--color-ink);
    text-decoration: none;
}

.tool-card p {
    flex: 1;
    color: var(--color-muted);
}

.tool-category {
    color: var(--color-brand);
    font-size: .78rem;
    font-weight: 800;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
    color: var(--color-muted);
    font-size: .92rem;
}

.breadcrumb a {
    color: var(--color-muted);
    text-decoration-color: #cbd5e1;
}

.page-header,
.tool-header {
    margin-bottom: 2.25rem;
}

.page-header h1 {
    font-size: clamp(2rem, 5vw, 3.35rem);
}

.tool-header h1 {
    max-width: 58rem;
    font-size: clamp(2.25rem, 5vw, 3.65rem);
}

.tool-page {
    --tool-accent: var(--color-brand);
    --tool-accent-2: var(--color-cyan);
    --tool-accent-3: var(--color-teal);
    --tool-soft: #eff6ff;
    --tool-border: #cfe0ff;
}

.tool-page--countwords {
    --tool-accent: #149bc1;
    --tool-accent-2: #22bda4;
    --tool-accent-3: #9b7711;
    --tool-soft: #effafd;
    --tool-border: #bfe6ed;
}

.tool-page--specialcharacters {
    --tool-accent: #8a4ec7;
    --tool-accent-2: #dc6f72;
    --tool-accent-3: #159a9b;
    --tool-soft: #fbf4ff;
    --tool-border: #e4d2f2;
}

.tool-page--changethelanguage {
    --tool-accent: #2369d8;
    --tool-accent-2: #13a69c;
    --tool-accent-3: #d27c35;
    --tool-soft: #f2f7ff;
    --tool-border: #cfddf5;
}

.tool-page--dating {
    --tool-accent: #db4f83;
    --tool-accent-2: #d7655f;
    --tool-accent-3: #7869df;
    --tool-soft: #fff4f8;
    --tool-border: #f3c8d5;
}

.tool-page--agecalc {
    --tool-accent: #5968d9;
    --tool-accent-2: #d97732;
    --tool-accent-3: #149b8b;
    --tool-soft: #f4f5ff;
    --tool-border: #d5daf5;
}

.tool-page--diffdate {
    --tool-accent: #087f8c;
    --tool-accent-2: #5d67d8;
    --tool-accent-3: #d47735;
    --tool-soft: #effafb;
    --tool-border: #c8e6e8;
}

.tool-page--base-converter {
    --tool-accent: #6d56d9;
    --tool-accent-2: #149bc1;
    --tool-accent-3: #dc7a2f;
    --tool-soft: #f6f4ff;
    --tool-border: #dcd5fb;
}

.tool-page--moneycount {
    --tool-accent: #158078;
    --tool-accent-2: #d49a2f;
    --tool-accent-3: #3d7fc4;
    --tool-soft: #f1faf8;
    --tool-border: #c9e6df;
}

.tool-page--vat {
    --tool-accent: #1d7f73;
    --tool-accent-2: #d97732;
    --tool-accent-3: #5368d9;
    --tool-soft: #f2faf7;
    --tool-border: #c9e3dc;
}

.tool-page--random-team {
    --tool-accent: #7c3aed;
    --tool-accent-2: #ec4899;
    --tool-accent-3: #0f9f8f;
    --tool-soft: #f8f5ff;
    --tool-border: #ded4fa;
}

.tool-page--calculator {
    --tool-accent: #197b82;
    --tool-accent-2: #4f67d8;
    --tool-accent-3: #d18b2f;
    --tool-soft: #f0faf9;
    --tool-border: #c9e5e2;
}

.tool-intro-grid {
    margin-bottom: 1rem;
}

.tool-intro-grid .tool-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem);
    grid-template-rows: auto auto auto;
    column-gap: 2rem;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--tool-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.tool-intro-grid .tool-header {
    padding: .95rem 1.6rem 1rem;
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--tool-accent-2) 12%, transparent), transparent 15rem),
        var(--color-surface);
}

.tool-intro-grid .tool-header::before {
    position: absolute;
    inset: 0 0 auto;
    height: .35rem;
    background: linear-gradient(90deg, var(--tool-accent), var(--tool-accent-2), var(--tool-accent-3));
    content: "";
}

.tool-intro-grid .tool-header h1 {
    grid-column: 1;
    margin: .05rem 0 .4rem;
    color: var(--tool-accent);
    background: linear-gradient(100deg, var(--tool-accent), var(--tool-accent-2) 58%, var(--tool-accent-3));
    background-clip: text;
    font-size: clamp(1.8rem, 3.15vw, 2.65rem);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tool-intro-grid .tool-header .eyebrow {
    grid-column: 1;
    margin-top: .15rem;
}

.tool-intro-grid .tool-header > p {
    grid-column: 1;
    margin-bottom: 0;
}

.tool-intro-grid .tool-header > p:last-of-type {
    font-size: 1rem;
    line-height: 1.5;
}

.tool-intro-grid .tool-header .privacy-note {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    justify-self: end;
    max-width: 21rem;
    margin-top: 0;
}

.tool-page .eyebrow {
    color: var(--tool-accent);
}

.tool-page .privacy-note {
    color: #087d68;
    background: #effcf7;
    border-color: #bdebdc;
}

.privacy-note {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-top: .75rem;
    padding: .55rem .85rem;
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 650;
}

.answer-box {
    position: relative;
    margin-bottom: 1.5rem;
    padding: 1.5rem 1.65rem;
    overflow: hidden;
    border: 1px solid #cfe0ff;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #f5f8ff, #edf4ff);
    box-shadow: 0 8px 22px rgb(37 99 235 / 6%);
}

.tool-page .post-tool-answer {
    display: grid;
    grid-template-columns: minmax(14rem, .55fr) minmax(0, 1.45fr);
    grid-template-rows: auto auto;
    column-gap: 2rem;
    align-items: center;
    margin: 1.25rem 0 0;
    padding: 1.15rem 1.5rem;
    border-color: var(--tool-border);
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--tool-accent) 10%, transparent), transparent 11rem),
        linear-gradient(145deg, var(--tool-soft), #fff);
}

.tool-page .post-tool-answer::before {
    inset: 0 auto 0 0;
    width: .3rem;
    height: auto;
    background: linear-gradient(180deg, var(--tool-accent), var(--tool-accent-2));
}

.tool-page .post-tool-answer .eyebrow {
    grid-column: 1;
    margin: 0;
}

.tool-page .post-tool-answer h2 {
    grid-column: 1;
    margin: .15rem 0 0;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
}

.tool-page .post-tool-answer p:last-child {
    grid-column: 2;
    grid-row: 1 / 3;
    margin: 0;
    color: var(--color-muted);
    font-size: .96rem;
}

.post-tool-answer + .content-grid {
    margin-top: 1.5rem;
}

.tool-anchor,
.tool-page #direct-answer-title,
.tool-page #related-tools-title,
.tool-page .prose h2[id] {
    scroll-margin-top: 6.5rem;
}

.tool-anchor {
    display: block;
    width: 0;
    height: 0;
}

.tool-content-nav {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1rem;
    padding: .7rem .8rem;
    border: 2px solid var(--tool-border);
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--tool-soft) 72%, #fff);
    box-shadow: 4px 4px 0 color-mix(in srgb, var(--tool-accent) 10%, #fff);
}

.tool-content-nav__label {
    flex: 0 0 auto;
    padding: .42rem .68rem;
    color: #fff;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--tool-accent), var(--tool-accent-2));
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
}

.tool-content-nav__links {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: .4rem;
    min-width: 0;
}

.tool-content-nav a {
    padding: .38rem .62rem;
    color: var(--color-ink);
    border: 1px solid color-mix(in srgb, var(--tool-accent) 22%, #dfe3eb);
    border-radius: 999px;
    background: #fff;
    font-size: .82rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.tool-content-nav a:hover,
.tool-content-nav a:focus-visible {
    color: var(--tool-accent);
    border-color: var(--tool-accent);
    background: var(--tool-soft);
}

.content-back-link {
    display: flex;
    justify-content: flex-end;
    margin: 1.75rem 0 0;
}

.content-back-link a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .62rem .9rem;
    color: var(--tool-accent);
    border: 2px solid var(--tool-border);
    border-radius: 999px;
    background: var(--tool-soft);
    font-weight: 800;
    text-decoration: none;
}

.content-back-link a:hover,
.content-back-link a:focus-visible {
    color: #fff;
    border-color: var(--tool-accent);
    background: var(--tool-accent);
}

.related-tools-section {
    margin-top: 2rem;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 2px solid var(--tool-border);
    border-radius: 1.75rem;
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--tool-accent-2) 12%, transparent), transparent 15rem),
        #fff;
    box-shadow: 8px 8px 0 color-mix(in srgb, var(--tool-accent) 11%, #fff);
}

.related-tools-heading {
    align-items: flex-end;
}

.related-tools-heading h2 {
    color: var(--tool-accent);
}

.related-tools-heading p:last-child {
    max-width: 44rem;
    margin: .45rem 0 0;
    color: var(--color-muted);
}

.related-tools-heading .text-link {
    flex: 0 0 auto;
}

.related-tools-grid {
    margin-top: 1.15rem;
}

.related-tool-card {
    min-height: 13rem;
    padding: 1.4rem;
}

.related-tool-card p {
    font-size: .94rem;
    line-height: 1.55;
}

.answer-box::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: .28rem;
    background: linear-gradient(180deg, #60a5fa, var(--color-brand));
    content: "";
}

.answer-box h2 {
    margin: .25rem 0 .35rem;
    font-size: clamp(1.25rem, 3vw, 1.65rem);
    line-height: 1.35;
}

.answer-box p:last-child {
    max-width: 58rem;
    margin-bottom: 0;
}

.tool-workspace {
    position: relative;
    padding: clamp(1.15rem, 3vw, 2.1rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(145deg, rgb(255 255 255 / 94%), rgb(244 247 252 / 94%));
    box-shadow: var(--shadow-card);
}

.tool-page .tool-workspace {
    border-color: var(--tool-border);
    background:
        linear-gradient(90deg, var(--tool-accent), var(--tool-accent-2), var(--tool-accent-3)) top / 100% .32rem no-repeat,
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--tool-accent-2) 7%, transparent), transparent 24rem),
        linear-gradient(145deg, rgb(255 255 255 / 97%), color-mix(in srgb, var(--tool-soft) 74%, #fff));
}

.tool-page .workspace-kicker {
    color: var(--tool-accent) !important;
}

.workspace-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(20rem, .65fr);
    align-items: start;
    gap: var(--workspace-gap);
    margin-top: 1.25rem;
}

.workspace-layout--balanced {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.workspace-layout--balanced > .workspace-panel {
    min-width: 0;
    height: 100%;
}

.workspace-panel--surface {
    padding: var(--workspace-panel-padding);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--workspace-panel-radius);
    box-shadow: 0 10px 30px rgb(23 35 58 / 5%);
}

.countwords-input-panel {
    display: flex;
    flex-direction: column;
}

.countwords-input-panel .text-input {
    flex: 1;
}

.workspace-heading h2,
.workspace-footer h3,
.results-panel h3 {
    margin: 0;
}

.workspace-heading h2 {
    font-size: clamp(1.45rem, 3vw, 1.9rem);
    letter-spacing: -.02em;
}

.workspace-heading p,
.workspace-footer p {
    margin: .2rem 0 0;
    color: var(--color-muted);
}

.workspace-kicker {
    margin: 0 0 .25rem !important;
    color: var(--color-brand) !important;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.text-input {
    display: block;
    width: 100%;
    min-height: 18rem;
    margin-top: 0;
    padding: 1rem;
    resize: vertical;
    color: var(--color-ink);
    background: var(--color-surface);
    border: 1px solid #bdc8d6;
    border-radius: var(--radius-md);
    line-height: 1.7;
}

.text-input:focus {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 .2rem var(--color-brand-soft);
    outline: 0;
}

.analysis-status {
    min-height: 1.5rem;
    margin: .5rem 0 0;
    color: var(--color-muted);
    font-size: .88rem;
}

.dating-form {
    display: flex;
    flex-direction: column;
    padding: var(--workspace-panel-padding);
    border: 1px solid #dfe6f0;
    border-radius: var(--workspace-panel-radius);
    background: var(--color-surface);
    box-shadow: 0 10px 30px rgb(23 35 58 / 6%);
}

.dating-form .dating-status {
    align-self: flex-start;
    margin-top: auto;
}

.dating-form fieldset {
    min-width: 0;
    padding: 0;
    border: 0;
}

.dating-form legend {
    margin-bottom: 1.15rem;
    color: #27364f;
    font-size: 1.2rem;
    font-weight: 800;
}

.date-input-grid {
    display: grid;
    grid-template-columns: .7fr 1.4fr 1fr .8fr;
    gap: .85rem;
}

.dating-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.date-input-grid label {
    min-width: 0;
    color: var(--color-muted);
    font-size: .88rem;
    font-weight: 700;
}

.date-input-grid input,
.date-input-grid select {
    display: block;
    width: 100%;
    min-height: 3.25rem;
    margin-top: .35rem;
    padding: .65rem .75rem;
    color: var(--color-ink);
    background: #fbfdff;
    border: 1px solid #cbd5e1;
    border-radius: .75rem;
    box-shadow: inset 0 1px 2px rgb(15 23 42 / 3%);
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.date-input-grid input:focus,
.date-input-grid select:focus {
    border-color: var(--color-brand);
    background: #fff;
    box-shadow: 0 0 0 .22rem var(--color-brand-soft);
    outline: 0;
}

.dating-status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2rem;
    margin-top: 1rem;
    padding: .3rem .65rem;
    border-radius: 999px;
    background: #f1f5f9;
}

.dating-status::before {
    width: .45rem;
    height: .45rem;
    flex: 0 0 auto;
    background: #94a3b8;
    border-radius: 50%;
    content: "";
}

.dating-status[data-state="success"] {
    color: #047857;
    background: #ecfdf5;
}

.dating-status[data-state="success"]::before {
    background: #10b981;
}

.dating-status[data-state="error"] {
    color: var(--color-danger);
    background: var(--color-danger-soft);
}

.dating-status[data-state="error"]::before {
    background: #ef4444;
}

.dating-results[data-stale="true"] {
    opacity: .68;
    filter: saturate(.72);
}

.dating-summary {
    margin: .7rem 0 0;
    color: #dbeafe;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.015em;
}

.dating-period,
.dating-current,
.dating-leap {
    margin: .35rem 0 0;
    color: #cbd5e1;
    font-size: .85rem;
}

.results-panel.dating-results {
    padding: var(--workspace-panel-padding);
    color: #fff;
    background:
        radial-gradient(circle at 100% 0, rgb(96 165 250 / 32%), transparent 13rem),
        linear-gradient(150deg, #172554, #1e3a8a 56%, #1d4ed8);
    border: 0;
    box-shadow: 0 20px 42px rgb(30 58 138 / 22%);
}

.dating-results-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .28rem .55rem;
    color: #d1fae5;
    background: rgb(6 78 59 / 45%);
    border: 1px solid rgb(167 243 208 / 22%);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 750;
    white-space: nowrap;
}

.live-badge span {
    width: .42rem;
    height: .42rem;
    background: #34d399;
    border-radius: 50%;
    box-shadow: 0 0 0 .2rem rgb(52 211 153 / 13%);
}

.calendar-result {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    margin-top: 1rem;
}

.calendar-result div {
    padding: .9rem .5rem;
    text-align: center;
    background: rgb(255 255 255 / 10%);
    border: 1px solid rgb(255 255 255 / 11%);
    border-radius: .8rem;
}

.calendar-result strong,
.calendar-result span {
    display: block;
}

.calendar-result strong {
    color: #fff;
    font-size: 1.6rem;
    line-height: 1.15;
}

.calendar-result span {
    color: #bfdbfe;
    font-size: .8rem;
}

.dating-stats .stat-card strong {
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
    overflow-wrap: anywhere;
}

.dating-results .stat-card {
    color: var(--color-ink);
    background: rgb(255 255 255 / 94%);
    border: 1px solid rgb(255 255 255 / 28%);
    box-shadow: 0 6px 18px rgb(15 23 42 / 11%);
}

.dating-results .stat-primary {
    color: #1e3a8a;
    background: #dbeafe;
}

.dating-results .stat-primary span {
    color: #31558f;
}

.dating-meta {
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid rgb(255 255 255 / 15%);
}

.workspace-footer.dating-valentine {
    display: block;
    margin-top: 1.25rem;
    padding: clamp(1.25rem, 3vw, 1.65rem);
    box-shadow: 0 10px 30px rgb(23 35 58 / 6%);
}

.valentine-heading {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
}

.valentine-icon {
    display: grid;
    width: 2.55rem;
    height: 2.55rem;
    flex: 0 0 auto;
    place-items: center;
    color: #be185d;
    background: #fdf2f8;
    border: 1px solid #fbcfe8;
    border-radius: .8rem;
    font-size: 1.35rem;
    font-weight: 800;
}

.table-scroll.dating-table-scroll {
    max-height: 28rem;
    margin-top: 1.15rem;
    border: 1px solid var(--color-border);
    border-radius: .85rem;
}

.frequency-table.dating-table {
    width: 100%;
    margin-top: 0;
}

.dating-table th:first-child {
    white-space: nowrap;
}

.dating-table thead {
    position: sticky;
    z-index: 1;
    top: 0;
    background: #f1f5f9;
}

.dating-table tbody tr:nth-child(even) {
    background: #f8fafc;
}

.dating-table tbody tr:hover {
    background: var(--color-brand-soft);
}

.print-report-header {
    display: none;
}

.dating-export-bar,
.report-export-bar {
    display: grid;
    grid-template-columns: minmax(16rem, .8fr) minmax(28rem, 1.2fr);
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
    margin-top: 1.25rem;
    padding: clamp(1.25rem, 3vw, 1.65rem);
    background:
        radial-gradient(circle at 100% 0, rgb(255 189 63 / 16%), transparent 13rem),
        #fff;
    border: 2px solid #dce4ff;
    border-radius: var(--workspace-panel-radius);
    box-shadow: 0 10px 30px rgb(23 35 58 / 6%);
}

.dating-export-copy h3,
.report-export-copy h3 {
    margin: .15rem 0 .3rem;
    color: var(--color-ink);
    font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.dating-export-copy > p:not(.workspace-kicker, .analysis-status),
.report-export-copy > p:not(.workspace-kicker, .analysis-status) {
    margin: 0;
    color: var(--color-muted);
    font-size: .9rem;
}

.dating-export-copy .analysis-status,
.report-export-copy .analysis-status {
    margin-top: .4rem;
}

.dating-export-copy .analysis-status[data-state="success"],
.report-export-copy .analysis-status[data-state="success"] {
    color: #047857;
}

.dating-export-copy .analysis-status[data-state="error"],
.report-export-copy .analysis-status[data-state="error"] {
    color: var(--color-danger);
}

.dating-export-actions,
.report-export-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .7rem;
}

.export-button {
    display: grid;
    min-width: 0;
    min-height: 5.4rem;
    padding: .8rem .55rem;
    place-items: center;
    gap: .3rem;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #dbe3ee;
    border-radius: .9rem;
    box-shadow: 0 5px 14px rgb(23 35 58 / 5%);
    cursor: pointer;
    font: inherit;
    font-size: .84rem;
    font-weight: 800;
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.export-button svg {
    width: 1.55rem;
    height: 1.55rem;
    fill: currentColor;
}

.export-button--print {
    color: #2857d9;
    background: #f4f7ff;
}

.export-button--excel {
    color: #047857;
    background: #ecfdf5;
}

.export-button--pdf {
    color: #be123c;
    background: #fff1f2;
}

.export-button--txt {
    color: #7c3aed;
    background: #f5f3ff;
}

.export-button:hover:not(:disabled) {
    border-color: currentcolor;
    box-shadow: 0 10px 22px rgb(23 35 58 / 10%);
    transform: translateY(-2px);
}

.export-button:focus-visible {
    outline: 3px solid rgb(40 87 217 / 24%);
    outline-offset: 2px;
}

.export-button:disabled {
    cursor: not-allowed;
    opacity: .48;
    filter: grayscale(.45);
}

.results-panel {
    position: sticky;
    top: 5.5rem;
    padding: var(--workspace-panel-padding);
    border: 1px solid var(--color-border);
    border-radius: var(--workspace-panel-radius);
    background: var(--color-surface);
}

.results-panel[aria-busy="true"] {
    border-color: #9fc8f5;
    box-shadow: 0 0 0 .2rem var(--color-brand-soft);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}

.stat-card {
    position: relative;
    padding: 1rem;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: .85rem;
}

.tool-page .stat-card::before {
    position: absolute;
    inset: 0 0 auto;
    height: .22rem;
    background: var(--tool-accent);
    content: "";
}

.tool-page .stat-card:nth-child(3n + 2)::before {
    background: var(--tool-accent-2);
}

.tool-page .stat-card:nth-child(3n + 3)::before {
    background: var(--tool-accent-3);
}

.stat-card span {
    display: block;
    color: var(--color-muted);
    font-size: .82rem;
}

.stat-card strong {
    display: block;
    margin-top: .2rem;
    font-size: 1.7rem;
    line-height: 1.2;
}

.stat-primary {
    color: #fff;
    background: var(--color-brand);
    border-color: var(--color-brand);
}

.tool-page--countwords .stat-primary {
    color: #07566b;
    background: #e4f8fc;
    border-color: #a9e3ec;
}

.tool-page--countwords .stat-primary span {
    color: #237386;
}

.tool-page--countwords .results-panel {
    border-color: #cce8ed;
    box-shadow: 0 10px 28px rgb(20 155 193 / 9%);
}

.tool-page--countwords .text-input:focus {
    border-color: var(--tool-accent);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--tool-accent) 15%, #fff);
}

.tool-page--dating .dating-form,
.tool-page--dating .results-panel.dating-results,
.tool-page--dating .dating-valentine {
    border-color: #f0d4dd;
    box-shadow: 0 12px 30px rgb(219 79 131 / 8%);
}

.tool-page--dating .results-panel.dating-results {
    color: var(--color-ink);
    background:
        radial-gradient(circle at 100% 0, rgb(240 120 116 / 10%), transparent 13rem),
        #fff;
    border-width: 1px;
    border-style: solid;
}

.tool-page--dating .dating-summary {
    color: var(--tool-accent);
    background: linear-gradient(90deg, var(--tool-accent), var(--tool-accent-2), var(--tool-accent-3));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tool-page--dating .dating-period,
.tool-page--dating .dating-current,
.tool-page--dating .dating-leap {
    color: var(--color-muted);
}

.tool-page--dating .calendar-result div {
    background: #fff4f8;
    border-color: #f5d6e0;
}

.tool-page--dating .calendar-result div:nth-child(2) {
    background: #fff6f1;
    border-color: #f6ded1;
}

.tool-page--dating .calendar-result div:nth-child(3) {
    background: #f3f1ff;
    border-color: #ddd8fb;
}

.tool-page--dating .calendar-result strong {
    color: var(--tool-accent);
}

.tool-page--dating .calendar-result div:nth-child(2) strong {
    color: #d7655f;
}

.tool-page--dating .calendar-result div:nth-child(3) strong {
    color: var(--tool-accent-3);
}

.tool-page--dating .calendar-result span {
    color: var(--color-muted);
}

.tool-page--dating .dating-results .stat-card {
    color: var(--color-ink);
    background: #fff;
    border-color: #e9e3e7;
    box-shadow: 0 5px 15px rgb(23 35 58 / 5%);
}

.tool-page--dating .dating-results .stat-primary {
    color: #9f315a;
    background: #fff0f5;
    border-color: #f4cad8;
}

.tool-page--dating .dating-results .stat-primary span,
.tool-page--dating .dating-results .stat-card span {
    color: var(--color-muted);
}

.tool-page--dating .dating-meta {
    border-top-color: #eee3e7;
}

.tool-page--dating .live-badge {
    color: #087d68;
    background: #ecfdf5;
    border-color: #bdebdc;
}

.tool-page--dating .valentine-icon {
    color: var(--tool-accent);
    background: #fff0f5;
    border-color: #f4cad8;
}

.base-converter-form,
.base-converter-results {
    border-color: #ded9f4;
    box-shadow: 0 12px 30px rgb(109 86 217 / 8%);
}

.base-converter-form {
    display: flex;
    flex-direction: column;
}

.base-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.base-field,
.base-number-field {
    display: grid;
    gap: .45rem;
    color: var(--color-ink);
    font-weight: 750;
}

.base-field select,
.base-number-field textarea {
    width: 100%;
    color: var(--color-ink);
    background: #fbfcff;
    border: 1px solid #cdd7e8;
    border-radius: .8rem;
    font: inherit;
}

.base-field select {
    min-height: 3.25rem;
    padding: .7rem .85rem;
}

.base-number-field {
    margin-top: 1rem;
}

.base-number-field textarea {
    min-height: 10rem;
    padding: 1rem;
    resize: vertical;
    font-family: "Noto Sans Thai", ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.65;
    letter-spacing: .035em;
}

.base-field select:focus,
.base-number-field textarea:focus {
    border-color: var(--tool-accent);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--tool-accent) 15%, #fff);
    outline: 0;
}

.base-presets {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem;
    margin-top: .8rem;
}

.base-presets button {
    min-height: 2.45rem;
    color: #52468d;
    background: #f7f5ff;
    border: 1px solid #ddd6fe;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: .78rem;
    font-weight: 850;
}

.base-presets button:hover,
.base-presets button[aria-pressed="true"] {
    color: #fff;
    background: var(--tool-accent);
    border-color: var(--tool-accent);
}

.base-converter-actions {
    margin-top: auto;
    padding-top: 1.25rem;
}

.tool-page--base-converter .button-primary {
    background: linear-gradient(135deg, #6d56d9, #5140b6);
    box-shadow: 0 9px 20px rgb(109 86 217 / 22%);
}

.base-results-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.base-results-heading .workspace-kicker {
    margin: 0 0 .15rem;
}

.base-source-summary {
    margin-top: 1rem;
    padding: .7rem .85rem;
    overflow-wrap: anywhere;
    color: #4f3eb2;
    background: #f5f2ff;
    border: 1px solid #ddd6fe;
    border-radius: .75rem;
    font-family: "Noto Sans Thai", ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .86rem;
    font-weight: 750;
}

.base-result-list {
    display: grid;
    gap: .65rem;
    margin-top: .85rem;
}

.base-result-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    padding: .85rem .9rem;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2e5ee;
    border-radius: .85rem;
    box-shadow: 0 5px 14px rgb(23 35 58 / 4%);
}

.base-result-card:nth-child(2n) {
    background: #f8fcff;
    border-color: #d7ecf2;
}

.base-result-card--custom {
    background: #fff8f2 !important;
    border-color: #f3ddca !important;
}

.base-result-card > div {
    min-width: 0;
}

.base-result-card span {
    display: block;
    color: var(--color-muted);
    font-size: .78rem;
}

.base-result-card strong {
    display: block;
    margin-top: .2rem;
    overflow-wrap: anywhere;
    color: var(--color-ink);
    font-family: "Noto Sans Thai", ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: clamp(1rem, 2vw, 1.3rem);
    line-height: 1.4;
    letter-spacing: .025em;
}

.base-result-card button {
    display: grid;
    width: 2.45rem;
    height: 2.45rem;
    padding: 0;
    place-items: center;
    color: var(--tool-accent);
    background: #f5f2ff;
    border: 1px solid #ddd6fe;
    border-radius: .7rem;
    cursor: pointer;
}

.base-result-card button svg {
    width: 1rem;
    height: 1rem;
    fill: currentcolor;
}

.base-result-card button:hover:not(:disabled) {
    color: #fff;
    background: var(--tool-accent);
}

.base-result-card button:disabled {
    cursor: not-allowed;
    opacity: .4;
}

.tool-page--base-converter .report-export-bar {
    border-color: #ddd6fe;
    background:
        radial-gradient(circle at 100% 0, rgb(20 155 193 / 12%), transparent 13rem),
        #fff;
}

.moneycount-form,
.moneycount-results {
    border-color: #cfe5df;
    box-shadow: 0 12px 30px rgb(21 128 120 / 8%);
}

.moneycount-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.money-denomination-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.money-denomination-group legend {
    width: 100%;
    margin-bottom: .55rem;
    color: var(--color-ink);
    font-size: 1rem;
    font-weight: 850;
}

.money-input-list {
    display: grid;
    gap: .45rem;
}

.money-input-row {
    display: grid;
    grid-template-columns: minmax(10.5rem, 1.15fr) minmax(8rem, .7fr) minmax(6.5rem, .55fr);
    align-items: center;
    gap: .65rem;
    min-width: 0;
    padding: .55rem .65rem;
    background: #fbfdfd;
    border: 1px solid #e0e9e7;
    border-radius: .75rem;
}

.money-input-row label {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: .55rem;
    color: var(--color-ink);
    font-size: .83rem;
    font-weight: 700;
}

.money-coin-image {
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    object-fit: contain;
    filter: drop-shadow(0 .2rem .22rem rgb(23 41 38 / 16%));
}

.money-denomination-label-copy {
    display: grid;
    justify-items: start;
    min-width: 0;
    gap: .18rem;
}

.money-denomination-name {
    overflow-wrap: anywhere;
}

.money-denomination-value {
    display: inline-grid;
    min-width: 3.8rem;
    min-height: 2rem;
    padding: .2rem .45rem;
    place-items: center;
    color: #0f6a64;
    background: #e8f7f4;
    border: 1px solid #c2e7df;
    border-radius: .55rem;
    font-size: .78rem;
    font-weight: 900;
}

.money-count-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .4rem;
    color: var(--color-muted);
    font-size: .75rem;
}

.money-count-control input {
    width: 100%;
    min-width: 0;
    min-height: 2.35rem;
    padding: .4rem .55rem;
    color: var(--color-ink);
    background: #fff;
    border: 1px solid #cbd9d6;
    border-radius: .6rem;
    font: inherit;
    font-weight: 750;
}

.money-count-control input:focus {
    border-color: var(--tool-accent);
    box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--tool-accent) 14%, #fff);
    outline: 0;
}

.money-input-row output {
    overflow-wrap: anywhere;
    color: #0f6a64;
    font-size: .85rem;
    font-weight: 850;
    text-align: right;
}

.moneycount-actions {
    margin-top: auto;
}

.tool-page--moneycount .button-primary {
    background: linear-gradient(135deg, #158078, #0f675f);
    box-shadow: 0 9px 20px rgb(21 128 120 / 22%);
}

.money-results-heading,
.money-breakdown-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.money-results-heading .workspace-kicker {
    margin: 0 0 .15rem;
}

.money-total-card {
    position: relative;
    margin-top: 1rem;
    padding: 1.15rem;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 100% 0, rgb(255 255 255 / 20%), transparent 8rem),
        linear-gradient(135deg, #158078, #0f665f);
    border-radius: 1rem;
    box-shadow: 0 12px 25px rgb(21 128 120 / 20%);
}

.money-total-card > span {
    display: block;
    color: #d8f4ef;
    font-size: .82rem;
    font-weight: 700;
}

.money-total-card strong {
    display: block;
    margin-top: .15rem;
    overflow-wrap: anywhere;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.15;
}

.money-total-card button {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .75rem;
    padding: .45rem .7rem;
    color: #0f5f58;
    background: #fff;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: .76rem;
    font-weight: 850;
}

.money-total-card button svg {
    width: .95rem;
    height: .95rem;
    fill: currentcolor;
}

.money-total-card button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.money-stats .stat-card {
    min-width: 0;
}

.money-stats .stat-card strong {
    overflow-wrap: anywhere;
    font-size: clamp(1.1rem, 2.5vw, 1.45rem);
}

.tool-page--moneycount .money-stats .stat-primary {
    color: #0d625b;
    background: #eaf8f5;
    border-color: #bfe4dc;
}

.tool-page--moneycount .money-stats .stat-primary span {
    color: #317c75;
}

.money-breakdown {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8e6;
}

.money-breakdown h4 {
    margin: 0;
    font-size: 1rem;
}

.money-breakdown-heading > span {
    color: var(--color-muted);
    font-size: .78rem;
    font-weight: 750;
}

.money-breakdown > p {
    margin: .75rem 0 0;
    padding: 1rem;
    color: var(--color-muted);
    background: #f8fafc;
    border: 1px dashed #ced9d7;
    border-radius: .8rem;
    font-size: .86rem;
    text-align: center;
}

.money-breakdown-table-wrap {
    max-height: 25rem;
    margin-top: .75rem;
    border: 1px solid #dce6e4;
    border-radius: .8rem;
}

.money-breakdown-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

.money-breakdown-table th,
.money-breakdown-table td {
    padding: .65rem .7rem;
    border-bottom: 1px solid #e6ecea;
    text-align: left;
}

.money-breakdown-table td:nth-child(2),
.money-breakdown-table th:nth-child(2),
.money-breakdown-table td:last-child,
.money-breakdown-table th:last-child {
    text-align: right;
}

.money-breakdown-table thead th {
    position: sticky;
    z-index: 1;
    top: 0;
    color: #0f5f58;
    background: #edf8f6;
}

.money-breakdown-table tbody tr:nth-child(even) {
    background: #fafdfc;
}

.tool-page--moneycount .report-export-bar {
    border-color: #c9e6df;
    background:
        radial-gradient(circle at 100% 0, rgb(212 154 47 / 14%), transparent 13rem),
        #fff;
}

.random-team-form,
.random-team-results {
    border-color: #ded4fa;
    box-shadow: 0 12px 30px rgb(91 45 173 / 8%);
}

.random-team-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.random-team-input-heading,
.random-team-results-heading,
.random-team-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.random-team-input-heading label {
    color: var(--color-ink);
    font-size: 1rem;
    font-weight: 850;
}

.random-team-input-heading span {
    color: #6d5a91;
    font-size: .78rem;
    font-weight: 750;
}

.random-team-textarea {
    width: 100%;
    min-height: 15rem;
    resize: vertical;
    padding: .9rem 1rem;
    color: var(--color-ink);
    background: #fdfcff;
    border: 1px solid #cfc4eb;
    border-radius: .9rem;
    font: inherit;
    line-height: 1.65;
}

.random-team-textarea:focus,
.random-team-settings input:focus {
    border-color: var(--tool-accent);
    box-shadow: 0 0 0 .2rem rgb(124 58 237 / 13%);
    outline: 0;
}

.random-team-input-tools {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.random-team-input-tools .text-tool-button {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.35rem;
    padding: .4rem .7rem;
    color: #5b3d91;
    background: #fff;
    border: 1px solid #d4c9ed;
    border-radius: .65rem;
    font: inherit;
    font-size: .78rem;
    font-weight: 750;
    cursor: pointer;
}

.random-team-input-tools .text-tool-button:hover {
    color: #6d28d9;
    background: #f8f5ff;
    border-color: #bdaee2;
}

.random-team-input-tools .text-tool-button svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    fill: currentcolor;
}

.random-team-settings {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6.5rem;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1rem;
    background: #f8f5ff;
    border: 1px solid #ddd3f5;
    border-radius: .9rem;
}

.random-team-settings label {
    color: var(--color-ink);
    font-size: .9rem;
    font-weight: 850;
}

.random-team-settings p {
    margin: .15rem 0 0;
    color: var(--color-muted);
    font-size: .75rem;
}

.random-team-settings input {
    width: 100%;
    min-height: 2.75rem;
    padding: .45rem .65rem;
    color: var(--color-ink);
    background: #fff;
    border: 1px solid #c8bce9;
    border-radius: .7rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    text-align: center;
}

.random-team-actions {
    margin-top: auto;
}

.tool-page--random-team .button-primary {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    box-shadow: 0 9px 20px rgb(124 58 237 / 24%);
}

.random-team-results {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background:
        radial-gradient(circle at 100% 0, rgb(236 72 153 / 9%), transparent 12rem),
        #fff;
}

.random-team-results-heading h3 {
    margin: .15rem 0 0;
    color: var(--color-ink);
    font-size: 1.25rem;
}

.random-team-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tool-page--random-team .random-team-stats .stat-primary {
    color: #fff;
    background: linear-gradient(145deg, #7c3aed, #6d28d9);
    border-color: #6d28d9;
}

.random-team-size-stat {
    color: #0f766e;
    background: #ecfdf9;
    border-color: #b9ebe2;
}

.random-team-empty {
    display: grid;
    min-height: 12rem;
    margin: 0;
    padding: 1.25rem;
    place-items: center;
    color: #74658f;
    background: #faf8ff;
    border: 1px dashed #cfc4eb;
    border-radius: 1rem;
    text-align: center;
}

.random-team-empty[hidden],
.random-team-grid[hidden] {
    display: none;
}

.random-team-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.random-team-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #ded6ee;
    border-top: .28rem solid #7c3aed;
    border-radius: .9rem;
}

.random-team-card--1 {
    border-top-color: #ec4899;
}

.random-team-card--2 {
    border-top-color: #0f9f8f;
}

.random-team-card--3 {
    border-top-color: #e59a22;
}

.random-team-card-heading {
    padding: .7rem .8rem;
    background: #faf8ff;
    border-bottom: 1px solid #ece7f6;
}

.random-team-card-heading h4 {
    margin: 0;
    color: var(--color-ink);
    font-size: .95rem;
}

.random-team-card-heading span {
    color: #6d5a91;
    font-size: .72rem;
    font-weight: 750;
}

.random-team-card ol {
    margin: 0;
    padding: .65rem .8rem .75rem 2rem;
}

.random-team-card li {
    padding: .18rem 0;
    overflow-wrap: anywhere;
    color: #2f3850;
    font-size: .84rem;
}

.random-team-copy {
    align-self: flex-start;
    margin-top: auto;
}

.random-team-copy svg {
    width: 1rem;
    height: 1rem;
    fill: currentcolor;
}

.tool-page--random-team .report-export-bar {
    border-color: #ded4fa;
    background:
        radial-gradient(circle at 100% 0, rgb(236 72 153 / 12%), transparent 13rem),
        #fff;
}

.vat-form,
.vat-results {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.vat-mode-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.vat-mode-fieldset legend,
.vat-field > span:first-child {
    display: block;
    margin-bottom: .5rem;
    color: #243450;
    font-weight: 750;
}

.vat-mode-switch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
    padding: .35rem;
    border: 1px solid var(--tool-border);
    border-radius: .9rem;
    background: var(--tool-soft);
}

.vat-mode-switch label {
    min-width: 0;
    cursor: pointer;
}

.vat-mode-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.vat-mode-switch span {
    display: grid;
    min-height: 2.8rem;
    padding: .55rem .45rem;
    place-items: center;
    border: 1px solid transparent;
    border-radius: .7rem;
    color: #52617a;
    font-size: .86rem;
    font-weight: 720;
    text-align: center;
}

.vat-mode-switch input:checked + span {
    color: #fff;
    border-color: #176f65;
    background: linear-gradient(135deg, #158078, #176f65);
    box-shadow: 0 .35rem .9rem rgb(21 128 120 / 20%);
}

.vat-mode-switch input:focus-visible + span {
    outline: 3px solid rgb(29 127 115 / 25%);
    outline-offset: 2px;
}

.vat-field {
    display: block;
}

.vat-input-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    overflow: hidden;
    border: 1px solid #cbd7e6;
    border-radius: .8rem;
    background: #fff;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.vat-input-shell:focus-within {
    border-color: var(--tool-accent);
    box-shadow: 0 0 0 3px rgb(29 127 115 / 13%);
}

.vat-input-shell input {
    width: 100%;
    min-width: 0;
    padding: .82rem .9rem;
    color: #17233a;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 720;
}

.vat-input-shell > span {
    padding: 0 .85rem;
    color: #65728a;
    font-size: .88rem;
    font-weight: 700;
}

.vat-field select {
    width: 100%;
    min-height: 3rem;
    padding: .7rem .8rem;
    color: #243450;
    border: 1px solid #cbd7e6;
    border-radius: .8rem;
    background: #fff;
    font: inherit;
}

.vat-presets {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: -.5rem;
}

.vat-presets button {
    min-height: 2.15rem;
    padding: .35rem .65rem;
    color: #3e506b;
    border: 1px solid #d4deea;
    border-radius: 999px;
    background: #f8fafc;
    font: inherit;
    font-size: .82rem;
    font-weight: 690;
    cursor: pointer;
}

.vat-presets button:hover:not(:disabled) {
    color: var(--tool-accent);
    border-color: var(--tool-accent);
    background: var(--tool-soft);
}

.vat-rate-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
}

.vat-rate-block {
    display: grid;
    align-content: start;
    gap: .9rem;
    min-width: 0;
    padding: .9rem;
    border: 1px solid #dce4ee;
    border-radius: .9rem;
    background: #fbfcfe;
}

.vat-rate-block.is-disabled {
    opacity: .55;
}

.vat-rate-block .vat-presets {
    margin-top: 0;
}

.vat-actions .button {
    flex: 1;
}

.tool-page--vat .button-primary {
    border-color: #176f65;
    background: linear-gradient(135deg, #158078, #176f65);
    box-shadow: 0 .5rem 1rem rgb(21 128 120 / 20%);
}

.vat-advisory {
    margin: 0;
    padding: .8rem .9rem;
    color: #6a4b1e;
    border: 1px solid #efd8a8;
    border-radius: .75rem;
    background: #fff9eb;
    font-size: .84rem;
    line-height: 1.55;
}

.vat-results-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.vat-results-heading h3 {
    margin: .15rem 0 0;
}

.vat-primary-result {
    display: grid;
    gap: .3rem;
    padding: 1.15rem;
    border: 1px solid #bcded7;
    border-radius: 1rem;
    background: linear-gradient(135deg, #eaf8f4, #f7fbff);
}

.vat-primary-result span,
.vat-primary-result small {
    color: #5a6b81;
}

.vat-primary-result strong {
    color: #126c63;
    font-size: clamp(1.85rem, 4vw, 2.6rem);
    line-height: 1.15;
}

.vat-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vat-stats .stat-card strong {
    overflow-wrap: anywhere;
    font-size: clamp(1rem, 2.1vw, 1.35rem);
}

.vat-detail-list {
    display: grid;
    gap: 0;
    margin: 0;
    border-block: 1px solid #e1e7ef;
}

.vat-detail-list div {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) minmax(0, 1.45fr);
    gap: .8rem;
    padding: .75rem 0;
}

.vat-detail-list div + div {
    border-top: 1px solid #e9eef4;
}

.vat-detail-list dt {
    color: #67758c;
}

.vat-detail-list dd {
    margin: 0;
    color: #243450;
    font-weight: 700;
    text-align: right;
}

.vat-copy {
    align-self: stretch;
}

.vat-copy svg {
    width: 1rem;
    height: 1rem;
    fill: currentcolor;
}

.tool-page--vat .report-export-bar {
    border-color: #c9e3dc;
    background: radial-gradient(circle at 100% 0, rgb(29 127 115 / 12%), transparent 13rem), #fff;
}

.agecalc-form,
.agecalc-results {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.agecalc-form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.agecalc-form legend {
    margin-bottom: .7rem;
    color: #243450;
    font-weight: 780;
}

.agecalc-example-card {
    display: grid;
    gap: .2rem;
    padding: .9rem 1rem;
    border: 1px solid #d9def3;
    border-radius: .85rem;
    background: #f8f9ff;
}

.agecalc-example-card span,
.agecalc-example-card small {
    color: #67758c;
}

.agecalc-example-card strong {
    color: #3647b5;
    font-size: 1.05rem;
}

.agecalc-actions .button {
    flex: 1;
}

.tool-page--agecalc .button-primary {
    border-color: #4f5fc8;
    background: linear-gradient(135deg, #6574df, #4f5fc8);
    box-shadow: 0 .5rem 1rem rgb(89 104 217 / 20%);
}

.agecalc-results-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.agecalc-results-heading h3 {
    margin: .15rem 0 0;
}

.agecalc-summary {
    margin: 0;
    color: #4658c7;
    font-size: clamp(1.3rem, 2.7vw, 1.8rem);
    font-weight: 800;
}

.agecalc-calendar {
    border-color: #d7dcf5;
    background: linear-gradient(135deg, #f2f4ff, #fffaf4);
}

.agecalc-calendar strong {
    color: #4f5fc8;
}

.agecalc-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agecalc-stats .stat-card strong {
    overflow-wrap: anywhere;
    font-size: clamp(1rem, 2vw, 1.35rem);
}

.agecalc-details {
    display: grid;
    gap: 0;
    margin: 0;
    border-block: 1px solid #e1e7ef;
}

.agecalc-details div {
    display: grid;
    grid-template-columns: minmax(7rem, .8fr) minmax(0, 1.5fr);
    gap: .8rem;
    padding: .75rem 0;
}

.agecalc-details div + div {
    border-top: 1px solid #e9eef4;
}

.agecalc-details dt {
    color: #67758c;
}

.agecalc-details dd {
    margin: 0;
    color: #243450;
    font-weight: 700;
    text-align: right;
}

.tool-page--agecalc .report-export-bar {
    border-color: #d5daf5;
    background: radial-gradient(circle at 100% 0, rgb(89 104 217 / 12%), transparent 13rem), #fff;
}

.diffdate-form,
.diffdate-results {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-color: #cde4e6;
    box-shadow: 0 12px 30px rgb(8 127 140 / 8%);
}

.diffdate-date-card {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.diffdate-date-card + .diffdate-date-card {
    padding-top: 1rem;
    border-top: 1px solid #dfebec;
}

.diffdate-date-card legend {
    margin-bottom: .7rem;
    color: #243450;
    font-weight: 800;
}

.diffdate-date-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.diffdate-actions {
    margin-top: auto;
}

.diffdate-actions .button {
    flex: 1;
}

.tool-page--diffdate .button-primary {
    border-color: #08717d;
    background: linear-gradient(135deg, #1194a2, #08717d);
    box-shadow: 0 .5rem 1rem rgb(8 127 140 / 20%);
}

.diffdate-results-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.diffdate-results-heading h3 {
    margin: .15rem 0 0;
}

.diffdate-summary {
    margin: 0;
    color: #08717d;
    font-size: clamp(1.3rem, 2.7vw, 1.8rem);
    font-weight: 850;
}

.diffdate-range {
    margin: -.45rem 0 0;
    overflow-wrap: anywhere;
    color: #65738a;
    font-size: .85rem;
}

.diffdate-calendar {
    border-color: #cde4e6;
    background: linear-gradient(135deg, #eefbfb, #f5f4ff);
}

.diffdate-calendar strong {
    color: #08717d;
}

.diffdate-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.diffdate-stats .stat-card strong {
    overflow-wrap: anywhere;
    font-size: clamp(1rem, 2vw, 1.35rem);
}

.diffdate-results .result-note {
    margin: auto 0 0;
    padding-top: .85rem;
    color: #65738a;
    border-top: 1px solid #e2ebec;
    font-size: .82rem;
}

.tool-page--diffdate .live-badge {
    color: #08717d;
    background: #ecfbf8;
    border-color: #bce7df;
}

.tool-page--diffdate .report-export-bar {
    border-color: #c8e6e8;
    background: radial-gradient(circle at 100% 0, rgb(8 127 140 / 12%), transparent 13rem), #fff;
}

.specialcharacters-input-panel,
.specialcharacters-results {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-color: #e3d4ed;
    box-shadow: 0 12px 30px rgb(138 78 199 / 8%);
}

.specialcharacters-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.specialcharacters-panel-heading h3 {
    margin: .15rem 0 0;
}

.character-counter {
    flex: 0 0 auto;
    padding: .35rem .65rem;
    color: #7442a7;
    background: #f8efff;
    border: 1px solid #e5d1f4;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
}

.specialcharacters-text-field {
    display: block;
}

.specialcharacters-text-field textarea {
    width: 100%;
    min-height: 12rem;
    padding: 1rem;
    resize: vertical;
    color: #202c45;
    background: #fffafd;
    border: 1px solid #d8cde0;
    border-radius: .9rem;
    font: inherit;
    font-size: 1.05rem;
    line-height: 1.65;
}

.specialcharacters-text-field textarea:focus {
    border-color: #8a4ec7;
    box-shadow: 0 0 0 .2rem rgb(138 78 199 / 13%);
    outline: 0;
}

.specialcharacters-actions .button {
    flex: 1;
}

.tool-page--specialcharacters .button-primary {
    border-color: #7540aa;
    background: linear-gradient(135deg, #9857d5, #7540aa);
    box-shadow: 0 .5rem 1rem rgb(138 78 199 / 21%);
}

.specialcharacters-compatibility {
    margin-top: auto;
    padding: .85rem 1rem;
    color: #624b74;
    background: #fcf7ff;
    border: 1px solid #e8d8f2;
    border-radius: .85rem;
}

.specialcharacters-compatibility strong {
    display: block;
    color: #51346a;
}

.specialcharacters-compatibility p {
    margin: .25rem 0 0;
    font-size: .82rem;
}

.specialcharacters-result-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    max-height: 31rem;
    padding-right: .2rem;
    overflow: auto;
}

.specialcharacters-result-card {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 6.2rem;
    padding: .8rem 3rem .85rem .9rem;
    align-content: start;
    gap: .35rem;
    cursor: pointer;
    background: #fff;
    border: 1px solid #e5dfea;
    border-radius: .85rem;
    box-shadow: 0 5px 14px rgb(31 42 68 / 5%);
}

.specialcharacters-result-card:nth-child(3n + 2) {
    background: #f6fcfc;
    border-color: #d5ebeb;
}

.specialcharacters-result-card:nth-child(3n + 3) {
    background: #fff8f8;
    border-color: #f0dddd;
}

.specialcharacters-result-card:hover,
.specialcharacters-result-card:focus-visible {
    border-color: #b98ad7;
    box-shadow: 0 8px 18px rgb(138 78 199 / 13%);
    outline: 0;
}

.specialcharacters-style-name {
    color: #68748a;
    font-size: .76rem;
    font-weight: 750;
}

.specialcharacters-variant-value {
    display: block;
    overflow-wrap: anywhere;
    color: #202c45;
    font-family: "Noto Sans Thai", "Segoe UI Symbol", sans-serif;
    font-size: clamp(.98rem, 1.8vw, 1.18rem);
    font-weight: 650;
    line-height: 1.45;
}

.specialcharacters-copy {
    position: absolute;
    top: .65rem;
    right: .65rem;
    display: grid;
    width: 2rem;
    height: 2rem;
    padding: 0;
    place-items: center;
    color: #8249bb;
    background: #f7effd;
    border: 1px solid #e3d1f0;
    border-radius: .6rem;
    cursor: pointer;
}

.specialcharacters-copy svg {
    width: .9rem;
    height: .9rem;
    fill: currentcolor;
}

.specialcharacters-symbols {
    border-color: #e3d4ed;
    background: radial-gradient(circle at 100% 0, rgb(21 154 155 / 10%), transparent 14rem), #fff;
}

.specialcharacters-symbol-grid {
    display: grid;
    grid-template-columns: repeat(11, minmax(2.5rem, 1fr));
    gap: .45rem;
    width: 100%;
    margin-top: 1rem;
}

.specialcharacters-symbol-grid button {
    min-height: 2.8rem;
    padding: .4rem;
    color: #4b3b5c;
    background: #fff;
    border: 1px solid #e2d7e9;
    border-radius: .7rem;
    cursor: pointer;
    font: inherit;
    font-family: "Noto Sans Thai", "Segoe UI Symbol", sans-serif;
    font-size: 1.15rem;
}

.specialcharacters-symbol-grid button:hover,
.specialcharacters-symbol-grid button:focus-visible {
    color: #fff;
    background: #8a4ec7;
    border-color: #8a4ec7;
    outline: 0;
}

.tool-page--specialcharacters .report-export-bar {
    border-color: #e3d2ef;
    background: radial-gradient(circle at 100% 0, rgb(138 78 199 / 12%), transparent 13rem), #fff;
}

.stat-primary span {
    color: #dcecff;
}

.workspace-footer {
    align-items: flex-start;
    margin-top: 1rem;
    padding: 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.table-scroll {
    max-height: 20rem;
    overflow: auto;
}

.frequency-table {
    width: min(26rem, 100%);
    margin-top: .75rem;
    border-collapse: collapse;
}

.frequency-table th,
.frequency-table td {
    padding: .7rem .85rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.frequency-table th:last-child,
.frequency-table td:last-child {
    text-align: right;
}

.workspace-footer.frequency-card {
    position: relative;
    align-items: flex-start;
    gap: 1.25rem;
    padding: clamp(1.25rem, 3vw, 1.65rem);
    overflow: hidden;
    background:
        radial-gradient(circle at 0 0, rgb(39 184 205 / 12%), transparent 16rem),
        #fff;
    border: 2px solid #dce8f3;
    box-shadow: 0 10px 30px rgb(23 35 58 / 6%);
}

.frequency-card-main {
    min-width: 0;
    flex: 1;
}

.frequency-card-heading {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
}

.frequency-card-icon {
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    flex: 0 0 auto;
    place-items: center;
    color: #0e7490;
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    border-radius: .85rem;
}

.frequency-card-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentcolor;
}

.frequency-title-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}

.frequency-limit {
    display: inline-flex;
    padding: .2rem .5rem;
    color: #2857d9;
    background: #eef2ff;
    border: 1px solid #d9e0ff;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .04em;
}

.frequency-empty-state {
    display: grid;
    min-height: 8rem;
    margin-top: 1rem;
    padding: 1.25rem;
    place-content: center;
    gap: .2rem;
    color: var(--color-muted);
    text-align: center;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: .9rem;
}

.frequency-empty-state[hidden] {
    display: none;
}

.frequency-empty-state strong {
    color: #334155;
}

.frequency-empty-state span {
    font-size: .86rem;
}

.frequency-table-scroll {
    max-height: 28rem;
    margin-top: 1rem;
    border: 1px solid var(--color-border);
    border-radius: .9rem;
}

.frequency-table.frequency-ranking {
    width: 100%;
    min-width: 36rem;
    margin-top: 0;
}

.frequency-ranking thead {
    position: sticky;
    z-index: 1;
    top: 0;
    color: #334155;
    background: #f1f5f9;
}

.frequency-ranking tbody tr:nth-child(even) {
    background: #f8fafc;
}

.frequency-ranking tbody tr:hover {
    background: #f4f7ff;
}

.frequency-ranking .frequency-rank-column,
.frequency-ranking .frequency-rank {
    width: 3.5rem;
    color: #64748b;
    text-align: center;
}

.frequency-ranking .frequency-word {
    max-width: 20rem;
    color: #17233a;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.frequency-meter-cell {
    width: 42%;
}

.frequency-meter {
    display: block;
    width: 100%;
    height: .55rem;
    overflow: hidden;
    background: #e2e8f0;
    border-radius: 999px;
}

.frequency-meter > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #27b8cd, #6751d8);
    border-radius: inherit;
}

.frequency-ranking .frequency-count {
    width: 6rem;
    color: #2857d9;
    font-weight: 850;
}

.frequency-copy-button {
    flex: 0 0 auto;
    margin-left: auto;
}

.example-table {
    width: 100%;
    border-collapse: collapse;
}

.example-table th,
.example-table td {
    padding: .8rem;
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.example-table thead {
    background: var(--color-subtle);
}

.example-table pre {
    margin: 0;
    white-space: pre-wrap;
}

.faq-list {
    display: grid;
    gap: .65rem;
}

.faq-list details {
    padding: .85rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: .75rem;
    background: var(--color-surface);
    transition: border-color .18s ease, background-color .18s ease;
}

.faq-list details:hover,
.faq-list details[open] {
    border-color: #bfdbfe;
    background: #f8fbff;
}

.faq-list summary {
    font-weight: 750;
    cursor: pointer;
}

.faq-list p {
    margin-bottom: 0;
    color: var(--color-muted);
}

.reference-list li {
    margin-block: .7rem;
}

.reference-list span {
    display: block;
    color: var(--color-muted);
    font-size: .85rem;
}

.content-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(16rem, .75fr);
    gap: 1.5rem;
    margin-top: 3rem;
}

.content-grid--single {
    grid-template-columns: minmax(0, 1fr);
}

.content-grid--single .prose {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-inline: 0;
}

.prose {
    max-width: none;
    padding: clamp(1.35rem, 3vw, 2rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.prose h1,
.prose h2 {
    line-height: 1.25;
}

.prose h2 {
    margin-top: 2rem;
    letter-spacing: -.015em;
}

.prose h2:first-child {
    margin-top: 0;
}

.prose .table-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    max-height: none;
    border: 1px solid var(--color-border);
    border-radius: .8rem;
}

.example-table code,
.reference-list a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.content-review-note {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: .88rem;
}

.content-review-note time {
    color: var(--color-ink);
    font-weight: 700;
}

/* Kidden-inspired Playful Utility layer.
   All shapes and components are original THcount CSS; no template assets or code are used. */

.site-header {
    border-bottom: 0;
    background: rgb(255 255 255 / 93%);
    box-shadow: 0 8px 30px rgb(58 47 112 / 7%);
}

.site-header::after {
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--color-sun) 0 18%,
        var(--color-coral) 18% 37%,
        var(--color-pink) 37% 55%,
        var(--color-brand) 55% 74%,
        var(--color-cyan) 74% 88%,
        var(--color-teal) 88%
    );
    opacity: 1;
}

.header-row {
    min-height: 5.15rem;
}

.brand {
    gap: .65rem;
    font-size: 1.45rem;
}

.brand-mark {
    width: 2.55rem;
    height: 2.55rem;
    color: var(--color-ink);
    background: var(--color-sun);
    border: 2px solid var(--color-ink);
    border-radius: 46% 54% 58% 42% / 48% 42% 58% 52%;
    box-shadow: 4px 4px 0 #f4a840;
    transform: rotate(-4deg);
}

.brand-word {
    background: linear-gradient(100deg, var(--color-ink) 18%, var(--color-brand) 64%, var(--color-cyan));
    background-clip: text;
    -webkit-background-clip: text;
}

.primary-nav a {
    padding: .55rem .8rem;
    border-radius: 999px;
}

.primary-nav a:hover {
    color: var(--color-ink);
    background: #fff0bf;
}

.site-search {
    border: 2px solid #e8e3f0;
    background: #fffdf7;
    box-shadow: none;
}

.site-search:focus-within {
    border-color: var(--color-brand);
}

.site-search button {
    color: var(--color-ink);
    background: var(--color-sun);
    font-weight: 800;
}

.language-switcher {
    padding: .25rem;
    border: 2px solid #e8e3f0;
    background: #fffdf7;
}

.language-switcher a[aria-current="page"] {
    background: var(--color-brand);
    box-shadow: 0 5px 12px rgb(101 87 217 / 22%);
}

.page-content {
    padding-block: 2.35rem 6rem;
}

.hero {
    position: relative;
    isolation: isolate;
    margin-top: .75rem;
    padding: clamp(2rem, 5vw, 4rem);
    overflow: hidden;
    border: 1px solid #efe2bd;
    border-radius: 2.35rem;
    background:
        linear-gradient(125deg, rgb(255 255 255 / 92%), rgb(255 247 218 / 88%)),
        #fff8dc;
    box-shadow: var(--shadow-card);
}

.hero::before,
.hero::after {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    content: "";
}

.hero::before {
    top: -5rem;
    right: -4rem;
    width: 17rem;
    height: 17rem;
    background: rgb(255 189 63 / 35%);
    box-shadow:
        -4rem 11rem 0 -2rem rgb(39 184 205 / 18%),
        -16rem -1rem 0 -5rem rgb(238 96 147 / 15%);
}

.hero::after {
    bottom: -8rem;
    left: 38%;
    width: 13rem;
    height: 13rem;
    background: rgb(101 87 217 / 9%);
}

.hero h1 {
    max-width: 51rem;
    color: var(--color-ink);
}

.hero-search,
.directory-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    max-width: 43rem;
    margin-top: 1.45rem;
    overflow: hidden;
    border: 2px solid #ded8eb;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 8px 24px rgb(58 47 112 / 9%);
}

.hero-search:focus-within,
.directory-search:focus-within {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 .2rem var(--color-brand-soft), 0 8px 24px rgb(58 47 112 / 9%);
}

.hero-search input,
.directory-search input {
    min-width: 0;
    padding: .85rem 1.15rem;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
}

.hero-search button,
.directory-search button {
    min-width: 5.5rem;
    padding: .85rem 1.25rem;
    border: 0;
    color: var(--color-ink);
    background: var(--color-sun);
    font: inherit;
    font-weight: 850;
    cursor: pointer;
}

.hero-search button:hover,
.directory-search button:hover {
    background: #ffcb63;
}

.eyebrow {
    color: #b83d34;
    font-weight: 900;
}

.privacy-card {
    position: relative;
    padding: 2rem;
    border: 2px solid var(--color-ink);
    border-radius: 1.8rem;
    background: #fff;
    box-shadow: 8px 8px 0 #b8ead7;
    transform: rotate(1deg);
}

.privacy-icon {
    width: 3.35rem;
    height: 3.35rem;
    color: var(--color-ink);
    background: #8de0bd;
    border: 2px solid var(--color-ink);
}

.button {
    min-height: 3rem;
    padding-inline: 1.35rem;
    border-radius: 999px;
}

.button-primary {
    border-color: var(--color-brand-dark);
    background: var(--color-brand);
    box-shadow: 0 7px 0 #40339a;
}

.button-primary:hover {
    background: var(--color-brand-dark);
    box-shadow: 0 5px 0 #382b8b;
}

.button-primary:not(:disabled):active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #382b8b;
}

.button-secondary {
    border: 2px solid #dcd9e8;
    background: #fff;
    box-shadow: 0 5px 0 #e8e5ef;
}

.button-danger {
    border-width: 2px;
    box-shadow: 0 5px 0 #ffd8d3;
}

.section-block {
    padding-block: 3rem 2rem;
}

.section-heading h2 {
    color: var(--color-ink);
}

.section-heading-copy {
    max-width: 46rem;
    margin: .65rem 0 0;
    color: var(--color-muted);
    line-height: 1.65;
}

.home-category-section {
    padding-bottom: 1.25rem;
}

.home-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
    margin-top: 1.5rem;
}

.home-category-card {
    position: relative;
    display: flex;
    min-height: 13rem;
    flex-direction: column;
    padding: 1.5rem;
    overflow: hidden;
    color: var(--color-ink);
    border: 2px solid var(--color-ink);
    border-radius: 1.45rem;
    background: #f0f9ff;
    box-shadow: 6px 6px 0 #c8eaf4;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.home-category-card:nth-child(3n + 2) {
    background: #fff3f7;
    box-shadow-color: #f6cfdb;
}

.home-category-card:nth-child(3n + 3) {
    background: #f5fae8;
    box-shadow-color: #dfeaae;
}

.home-category-card:hover {
    color: var(--color-ink);
    background: #fff;
    box-shadow: 9px 9px 0 color-mix(in srgb, var(--color-brand) 18%, #fff);
    transform: translate(-2px, -2px);
}

.home-category-count {
    width: fit-content;
    padding: .3rem .65rem;
    color: var(--color-brand-dark);
    border: 1px solid rgb(101 87 217 / 22%);
    border-radius: 999px;
    background: rgb(255 255 255 / 70%);
    font-size: .76rem;
    font-weight: 850;
}

.home-category-card h3 {
    margin: .85rem 0 .4rem;
    font-size: 1.3rem;
}

.home-category-card p {
    flex: 1;
    margin: 0;
    color: var(--color-muted);
    line-height: 1.6;
}

.home-category-action {
    margin-top: 1rem;
    color: var(--color-brand-dark);
    font-weight: 850;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .2em;
}

.starter-tools-section {
    padding-top: 2rem;
}

.text-link,
.card-link {
    color: var(--color-brand-dark);
    text-decoration-thickness: 2px;
}

.tool-grid {
    gap: 1.35rem;
}

.tool-card {
    min-height: 15.5rem;
    padding: 1.75rem;
    border: 2px solid var(--color-ink);
    border-radius: 1.65rem;
    background: #eafaff;
    box-shadow: 7px 7px 0 #b9eaf2;
}

.tool-card::before {
    inset: 1.15rem 1.15rem auto auto;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: rgb(39 184 205 / 22%);
}

.tool-card:nth-child(3n + 2) {
    background: #fff0f5;
    box-shadow: 7px 7px 0 #f7c6d7;
}

.tool-card:nth-child(3n + 2)::before {
    background: rgb(238 96 147 / 20%);
}

.tool-card:nth-child(3n + 3) {
    background: #f3f9df;
    box-shadow: 7px 7px 0 #dceaa5;
}

.tool-card:nth-child(3n + 3)::before {
    background: rgb(154 201 75 / 24%);
}

.tool-card:hover {
    border-color: var(--color-ink);
    box-shadow: 10px 10px 0 color-mix(in srgb, var(--color-brand) 20%, #fff);
    transform: translate(-2px, -2px);
}

.tool-card h2,
.tool-card h3 {
    max-width: calc(100% - 3rem);
    font-size: 1.4rem;
}

.tool-category {
    color: var(--color-brand-dark);
}

.breadcrumb {
    width: fit-content;
    padding: .45rem .8rem;
    border: 1px solid #e6e1ef;
    border-radius: 999px;
    background: rgb(255 255 255 / 80%);
}

.page-header {
    position: relative;
    padding: clamp(1.6rem, 4vw, 2.5rem);
    overflow: hidden;
    border: 1px solid #e5e0f0;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 96% 5%, rgb(255 189 63 / 25%), transparent 10rem),
        #fff;
    box-shadow: var(--shadow-soft);
}

.page-header h1 {
    color: var(--color-ink);
}

.page-header .directory-search {
    margin-top: 1.25rem;
}

.category-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 1rem 0 1.35rem;
    padding: .8rem;
    border: 1px solid #e6e1ef;
    border-radius: 1.25rem;
    background: rgb(255 255 255 / 82%);
    box-shadow: 0 10px 28px rgb(58 47 112 / 5%);
}

.category-nav a {
    padding: .48rem .8rem;
    color: var(--color-ink);
    border: 1px solid #ded8eb;
    border-radius: 999px;
    background: #fffdf7;
    font-size: .88rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.category-nav a:hover,
.category-nav a[aria-current="page"] {
    color: #fff;
    border-color: var(--color-brand);
    background: var(--color-brand);
}

.directory-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1rem;
    color: var(--color-muted);
}

.directory-meta p {
    margin: 0;
    font-weight: 700;
}

.directory-meta a {
    color: var(--color-brand-dark);
    font-weight: 750;
}

.tool-intro-grid .tool-header {
    border-width: 2px;
    border-radius: 2rem;
    background:
        radial-gradient(circle at 94% -30%, color-mix(in srgb, var(--tool-accent-2) 22%, transparent), transparent 14rem),
        #fff;
    box-shadow: 8px 8px 0 color-mix(in srgb, var(--tool-accent) 15%, #fff);
}

.tool-intro-grid .tool-header::before {
    height: .42rem;
}

.privacy-note {
    border-width: 2px;
    font-weight: 750;
}

.tool-workspace,
.tool-page .tool-workspace {
    border-width: 2px;
    border-radius: 2rem;
    box-shadow: 0 25px 60px rgb(55 45 111 / 12%);
}

.workspace-panel--surface,
.dating-form,
.results-panel,
.workspace-footer {
    border-width: 2px;
    border-radius: 1.25rem;
}

.date-input-grid input,
.date-input-grid select,
.text-input {
    border-width: 2px;
    border-radius: 1rem;
    background: #fffdf9;
}

.tool-page .post-tool-answer {
    border-width: 2px;
    border-radius: 1.5rem;
    box-shadow: 6px 6px 0 color-mix(in srgb, var(--tool-accent) 12%, #fff);
}

.stat-card,
.calendar-result div {
    border-width: 2px;
    border-radius: 1rem;
}

.prose {
    border-width: 2px;
    border-radius: 1.75rem;
    box-shadow: 8px 8px 0 #e8e4f2;
}

.prose h2 {
    position: relative;
    padding-left: 1.25rem;
}

.prose h2::before {
    position: absolute;
    top: .42em;
    left: 0;
    width: .62rem;
    height: .62rem;
    border-radius: 50%;
    background: var(--color-coral);
    box-shadow: 0 0 0 .25rem rgb(255 113 94 / 12%);
    content: "";
}

.prose .table-scroll {
    border-width: 2px;
    border-radius: 1rem;
}

.example-table thead {
    background: #f1efff;
}

.faq-list details {
    border-width: 2px;
    border-radius: 1rem;
    background: #fffdf8;
}

.faq-list details:nth-child(2n) {
    background: #f3fbff;
}

.faq-list details:hover,
.faq-list details[open] {
    border-color: var(--color-brand);
    background: #f7f5ff;
}

.content-review-note {
    border-top-width: 2px;
}

.site-footer {
    position: relative;
    padding-block: 3.5rem;
    color: #e8e5ff;
    background:
        radial-gradient(circle at 12% 0, rgb(255 189 63 / 26%), transparent 20rem),
        radial-gradient(circle at 92% 100%, rgb(39 184 205 / 18%), transparent 22rem),
        #30275c;
}

.site-footer a {
    color: #fff;
}

.privacy-principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.35rem 0 1.5rem;
}

.privacy-principles article {
    padding: 1.35rem;
    border: 2px solid var(--color-ink);
    border-radius: 1.35rem;
    background: #effafd;
    box-shadow: 5px 5px 0 #b9eaf2;
}

.privacy-principles article:nth-child(2) {
    background: #f3f9df;
    box-shadow-color: #dceaa5;
}

.privacy-principles article:nth-child(3) {
    background: #fff0f5;
    box-shadow-color: #f7c6d7;
}

.privacy-principles span {
    color: var(--color-brand-dark);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.privacy-principles h2 {
    margin: .45rem 0 .4rem;
    font-size: 1.2rem;
}

.privacy-principles p {
    margin: 0;
    color: var(--color-muted);
    line-height: 1.6;
}

.sitemap-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
}

.link-list {
    padding-left: 1.25rem;
}

.link-list li {
    margin-block: .45rem;
}

.empty-state,
.error-state {
    max-width: 42rem;
    margin: 3rem auto;
    padding: 2rem;
    text-align: center;
    background: var(--color-subtle);
    border-radius: var(--radius-lg);
}

.error-code {
    margin: 0;
    color: var(--color-brand);
    font-size: 4rem;
    font-weight: 900;
    line-height: 1;
}

.error-state .button-row {
    justify-content: center;
}

.error-state .directory-search {
    margin: 1.25rem auto 0;
    text-align: left;
}

.site-footer {
    padding-block: 2.5rem;
    color: #cbd5e1;
    background:
        radial-gradient(circle at 15% 0, rgb(59 130 246 / 20%), transparent 22rem),
        #101a2c;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(15rem, 1.4fr) minmax(8rem, .65fr) minmax(17rem, 1.1fr) minmax(9rem, .65fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

.brand-footer {
    color: #fff;
}

.footer-brand-block > p {
    max-width: 36rem;
}

.footer-brand-block > p:not(.footer-privacy-note) {
    line-height: 1.7;
}

.footer-privacy-note {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    margin: 1rem 0 0;
    color: #e7f8cf;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.55;
}

.footer-privacy-note span {
    display: inline-grid;
    flex: 0 0 1.35rem;
    width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    margin-top: .02rem;
    border-radius: 50%;
    color: #203511;
    background: #cdeca8;
    font-size: .78rem;
}

.footer-nav-group {
    display: grid;
    align-content: start;
    gap: .55rem;
}

.footer-nav-group h2 {
    margin: 0 0 .35rem;
    color: #fff;
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.footer-category-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
}

.footer-category-nav h2 {
    grid-column: 1 / -1;
}

.footer-nav-group a {
    width: fit-content;
    line-height: 1.5;
    text-underline-offset: .2em;
}

.footer-nav-group a:hover {
    color: #fff;
    text-decoration-thickness: 2px;
}

.footer-nav-group a[aria-current] {
    color: #fff;
    font-weight: 800;
}

.site-footer a {
    color: #e2edfa;
}

.percent-mode-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .65rem;
    margin-top: 1.25rem;
}

.percent-mode-grid label {
    min-width: 0;
    cursor: pointer;
}

.percent-mode-grid input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.percent-mode-grid span {
    display: grid;
    min-height: 6.1rem;
    padding: .8rem;
    align-content: center;
    gap: .2rem;
    color: #4e5d76;
    background: #fff;
    border: 1px solid #d9e1ec;
    border-radius: .95rem;
    box-shadow: 0 .35rem 1rem rgb(23 35 58 / 5%);
    font-size: .84rem;
    font-weight: 760;
    text-align: center;
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.percent-mode-grid span > strong {
    display: grid;
    width: 1.65rem;
    height: 1.65rem;
    margin: 0 auto .15rem;
    place-items: center;
    color: #7c3aed;
    background: #f0eaff;
    border-radius: 999px;
}

.percent-mode-grid span > small {
    color: #748198;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .72rem;
    font-weight: 600;
}

.percent-mode-grid label:hover span {
    transform: translateY(-2px);
    border-color: #a991df;
    box-shadow: 0 .6rem 1.2rem rgb(86 57 151 / 12%);
}

.percent-mode-grid input:checked + span {
    color: #fff;
    border-color: #6542b8;
    background: linear-gradient(135deg, #7953c7, #563997);
    box-shadow: 0 .65rem 1.3rem rgb(86 57 151 / 22%);
}

.percent-mode-grid input:checked + span > strong {
    color: #563997;
    background: #fff;
}

.percent-mode-grid input:checked + span > small {
    color: #eee8ff;
}

.percent-mode-grid input:focus-visible + span {
    outline: 3px solid rgb(101 66 184 / 26%);
    outline-offset: 3px;
}

.percent-form,
.percent-results {
    display: flex;
    flex-direction: column;
    gap: 1.05rem;
}

.percent-form-heading h3,
.percent-results-heading h3 {
    margin: .15rem 0 .25rem;
}

.percent-form-heading > p:last-child {
    min-height: 2.8rem;
    margin: 0;
    color: var(--color-muted);
}

.percent-input-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
}

.percent-field > span:first-child {
    display: block;
    margin-bottom: .5rem;
    color: #243450;
    font-weight: 750;
}

.percent-input-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    overflow: hidden;
    border: 1px solid #cbd7e6;
    border-radius: .8rem;
    background: #fff;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.percent-input-shell:focus-within {
    border-color: #6542b8;
    box-shadow: 0 0 0 3px rgb(101 66 184 / 13%);
}

.percent-input-shell input {
    width: 100%;
    min-width: 0;
    padding: .86rem .9rem;
    color: #17233a;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 730;
}

.percent-input-shell > span {
    padding: 0 .85rem;
    color: #65728a;
    font-size: .82rem;
    font-weight: 700;
}

.percent-presets {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.percent-presets button {
    min-height: 2.15rem;
    padding: .35rem .65rem;
    color: #4d3d78;
    border: 1px solid #d9cfef;
    border-radius: 999px;
    background: #faf8ff;
    cursor: pointer;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
}

.percent-presets button:hover {
    color: #fff;
    border-color: #6542b8;
    background: #6542b8;
}

.percent-actions .button {
    flex: 1;
}

.tool-page--percent .button-primary {
    border-color: #6542b8;
    background: linear-gradient(135deg, #7953c7, #563997);
    box-shadow: 0 .5rem 1rem rgb(86 57 151 / 20%);
}

.percent-results-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.percent-primary-result {
    display: grid;
    gap: .25rem;
    padding: 1.15rem;
    color: #fff;
    background: linear-gradient(135deg, #7953c7, #563997);
    border-radius: 1rem;
}

.percent-primary-result > span,
.percent-primary-result > small {
    color: #eee8ff;
}

.percent-primary-result strong {
    overflow-wrap: anywhere;
    font-size: clamp(1.85rem, 4vw, 2.65rem);
    line-height: 1.15;
}

.percent-formula-card {
    display: grid;
    gap: .4rem;
    padding: 1rem;
    border: 1px solid #ddd5f1;
    border-radius: .9rem;
    background: #faf8ff;
}

.percent-formula-card > span {
    color: #6f638b;
    font-size: .82rem;
    font-weight: 700;
}

.percent-formula-card > strong {
    color: #563997;
    font-size: 1.15rem;
}

.percent-formula-card > code {
    overflow-wrap: anywhere;
    color: #2f3e59;
    font-size: .88rem;
    white-space: normal;
}

.percent-detail-list {
    display: grid;
    margin: 0;
    border-block: 1px solid #e1e7ef;
}

.percent-detail-list div {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) minmax(0, 1.4fr);
    gap: .8rem;
    padding: .7rem 0;
}

.percent-detail-list div + div {
    border-top: 1px solid #e9eef4;
}

.percent-detail-list dt {
    color: #67758c;
}

.percent-detail-list dd {
    margin: 0;
    color: #243450;
    font-weight: 700;
    text-align: right;
}

.percent-copy {
    margin-top: auto;
}

.percent-copy svg {
    width: 1rem;
    height: 1rem;
    fill: currentcolor;
}

.tool-page--percent .report-export-bar {
    border-color: #ddd5f1;
    background: radial-gradient(circle at 100% 0, rgb(121 83 199 / 13%), transparent 13rem), #fff;
}

.gpa-form,
.gpa-results {
    display: flex;
    flex-direction: column;
    gap: 1.05rem;
}

.gpa-section-heading,
.gpa-results-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
}

.gpa-section-heading h3,
.gpa-results-heading h3 {
    margin: .15rem 0 0;
}

.gpa-add {
    flex: 0 0 auto;
}

.gpa-add svg,
.gpa-remove svg {
    width: 1rem;
    height: 1rem;
    fill: currentcolor;
}

.gpa-course-head,
.gpa-course-row {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) 6.7rem 8.1rem 2.5rem;
    align-items: end;
    gap: .55rem;
}

.gpa-course-head {
    margin-top: 1rem;
    padding: 0 .6rem;
    color: #66758c;
    font-size: .78rem;
    font-weight: 750;
}

.gpa-course-list {
    display: grid;
    gap: .55rem;
    max-height: 21rem;
    margin-top: .45rem;
    padding-right: .2rem;
    overflow: auto;
    scrollbar-width: thin;
}

.gpa-course-row {
    padding: .65rem;
    background: #fbfcff;
    border: 1px solid #dde4ef;
    border-radius: .85rem;
}

.gpa-course-row label > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.gpa-course-row input,
.gpa-course-row select {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: .65rem .7rem;
    color: #243450;
    border: 1px solid #cbd7e6;
    border-radius: .7rem;
    background: #fff;
    font: inherit;
}

.gpa-course-row input:focus,
.gpa-course-row select:focus {
    border-color: #3f7fcd;
    outline: 3px solid rgb(63 127 205 / 13%);
}

.gpa-remove {
    display: grid;
    width: 2.5rem;
    height: 2.75rem;
    place-items: center;
    color: #c2415b;
    border: 1px solid #f0cdd5;
    border-radius: .7rem;
    background: #fff5f7;
    cursor: pointer;
}

.gpa-remove:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.gpa-row-count {
    margin: .5rem 0 0;
    color: #718096;
    font-size: .78rem;
    text-align: right;
}

.gpa-prior-fieldset {
    margin: 0;
    padding: 1rem;
    border: 1px solid #dce4f0;
    border-radius: .9rem;
    background: #f8fbff;
}

.gpa-prior-fieldset legend {
    padding: 0 .35rem;
    color: #263b5a;
    font-weight: 800;
}

.gpa-prior-fieldset > p {
    margin: 0 0 .8rem;
    color: #6a7890;
    font-size: .82rem;
}

.gpa-prior-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}

.gpa-field > span:first-child {
    display: block;
    margin-bottom: .45rem;
    color: #354763;
    font-size: .84rem;
    font-weight: 730;
}

.gpa-input-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    overflow: hidden;
    border: 1px solid #cbd7e6;
    border-radius: .75rem;
    background: #fff;
}

.gpa-input-shell:focus-within {
    border-color: #3f7fcd;
    box-shadow: 0 0 0 3px rgb(63 127 205 / 13%);
}

.gpa-input-shell input {
    width: 100%;
    min-width: 0;
    padding: .72rem .75rem;
    border: 0;
    outline: 0;
    color: #17233a;
    background: transparent;
    font: inherit;
    font-weight: 720;
}

.gpa-input-shell > span {
    padding: 0 .7rem;
    color: #6b7890;
    font-size: .75rem;
    font-weight: 700;
}

.gpa-actions .button {
    flex: 1;
}

.tool-page--gpa .button-primary {
    border-color: #2e6daf;
    background: linear-gradient(135deg, #438ad3, #2f6eb1);
    box-shadow: 0 .5rem 1rem rgb(47 110 177 / 20%);
}

.gpa-score-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.gpa-score-pair article {
    display: grid;
    min-width: 0;
    padding: 1rem;
    gap: .2rem;
    color: #fff;
    background: linear-gradient(135deg, #438ad3, #2f6eb1);
    border-radius: .95rem;
}

.gpa-score-pair article:nth-child(2) {
    background: linear-gradient(135deg, #7a5ad0, #6542b8);
}

.gpa-score-pair span,
.gpa-score-pair small {
    color: #eaf4ff;
}

.gpa-score-pair strong {
    overflow-wrap: anywhere;
    font-size: clamp(1.55rem, 3.5vw, 2.25rem);
    line-height: 1.15;
}

.gpa-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gpa-stats .stat-card strong {
    overflow-wrap: anywhere;
    font-size: clamp(1rem, 2vw, 1.3rem);
}

.gpa-breakdown-wrap {
    max-height: 18rem;
    overflow: auto;
    border: 1px solid #dde4ef;
    border-radius: .85rem;
    scrollbar-width: thin;
}

.gpa-breakdown-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

.gpa-breakdown-table th,
.gpa-breakdown-table td {
    padding: .62rem .65rem;
    border-bottom: 1px solid #e7ecf3;
    text-align: right;
}

.gpa-breakdown-table th:first-child,
.gpa-breakdown-table td:first-child {
    text-align: left;
}

.gpa-breakdown-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: #354763;
    background: #eef5fd;
}

.gpa-breakdown-table tbody tr:last-child > * {
    border-bottom: 0;
}

.gpa-advisory {
    margin: auto 0 0;
    padding: .75rem .85rem;
    color: #6a4b1e;
    border: 1px solid #efd8a8;
    border-radius: .75rem;
    background: #fff9eb;
    font-size: .8rem;
    line-height: 1.5;
}

.tool-page--gpa .report-export-bar {
    border-color: #cbdff2;
    background: radial-gradient(circle at 100% 0, rgb(67 138 211 / 14%), transparent 13rem), #fff;
}

.length-form,
.length-results {
    display: flex;
    flex-direction: column;
    gap: 1.05rem;
}

.length-form-heading h3,
.length-results-heading h3 {
    margin: .15rem 0 .25rem;
}

.length-form-heading > p:last-child {
    margin: 0;
    color: var(--color-muted);
}

.length-field > span:first-child {
    display: block;
    margin-bottom: .45rem;
    color: #2d425c;
    font-weight: 750;
}

.length-input-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    overflow: hidden;
    border: 1px solid #cbd7e6;
    border-radius: .85rem;
    background: #fff;
}

.length-input-shell:focus-within {
    border-color: #13827c;
    box-shadow: 0 0 0 3px rgb(19 130 124 / 13%);
}

.length-input-shell input {
    width: 100%;
    min-width: 0;
    padding: .9rem;
    color: #17233a;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 1.15rem;
    font-weight: 760;
}

.length-input-shell > span {
    padding: 0 1rem;
    color: #0f766e;
    font-size: 1rem;
    font-weight: 800;
}

.length-unit-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr);
    align-items: end;
    gap: .65rem;
}

.length-field select {
    width: 100%;
    min-width: 0;
    min-height: 3rem;
    padding: .7rem .75rem;
    color: #243450;
    border: 1px solid #cbd7e6;
    border-radius: .8rem;
    background: #fff;
    font: inherit;
}

.length-swap {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    color: #0f766e;
    border: 1px solid #b9dcd8;
    border-radius: 999px;
    background: #ecf9f7;
    cursor: pointer;
    transition: transform 160ms ease, background-color 160ms ease;
}

.length-swap:hover {
    transform: rotate(180deg);
    color: #fff;
    background: #13827c;
}

.length-swap svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: currentcolor;
}

.length-presets {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.length-presets button {
    min-height: 2.2rem;
    padding: .35rem .65rem;
    color: #226b67;
    border: 1px solid #c6e1df;
    border-radius: 999px;
    background: #f2fbfa;
    cursor: pointer;
    font: inherit;
    font-size: .8rem;
    font-weight: 720;
}

.length-presets button:hover {
    color: #fff;
    border-color: #13827c;
    background: #13827c;
}

.length-actions .button {
    flex: 1;
}

.tool-page--length .button-primary {
    border-color: #0f766e;
    background: linear-gradient(135deg, #15958d, #0f766e);
    box-shadow: 0 .5rem 1rem rgb(15 118 110 / 20%);
}

.length-precision-note {
    margin: auto 0 0;
    padding: .75rem .85rem;
    color: #5c5577;
    border: 1px solid #ded7f0;
    border-radius: .75rem;
    background: #faf8ff;
    font-size: .82rem;
}

.length-results-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
}

.length-primary-result {
    display: grid;
    gap: .2rem;
    padding: 1.15rem;
    color: #fff;
    background: linear-gradient(135deg, #15958d, #0f766e);
    border-radius: 1rem;
}

.length-primary-result span,
.length-primary-result small {
    color: #dff8f5;
}

.length-primary-result strong {
    overflow-wrap: anywhere;
    font-size: clamp(1.8rem, 4vw, 2.55rem);
    line-height: 1.15;
}

.length-human-height {
    padding: .9rem 1rem;
    border: 1px solid #c9e4e1;
    border-radius: .9rem;
    background: #f1fbfa;
}

.length-human-height > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.length-human-height span {
    color: #58706e;
    font-size: .82rem;
    font-weight: 700;
}

.length-human-height strong {
    color: #0f766e;
    font-size: 1.3rem;
}

.length-human-height p {
    margin: .3rem 0 0;
    color: #6b7c7a;
    font-size: .76rem;
}

.length-table-wrap {
    max-height: 18rem;
    overflow: auto;
    border: 1px solid #dce5ec;
    border-radius: .85rem;
    scrollbar-width: thin;
}

.length-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .84rem;
}

.length-table th,
.length-table td {
    padding: .62rem .75rem;
    border-bottom: 1px solid #e7edf2;
}

.length-table th {
    text-align: left;
}

.length-table td {
    font-variant-numeric: tabular-nums;
    font-weight: 720;
    text-align: right;
}

.length-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: #43566e;
    background: #eef8f7;
}

.length-table tr.is-selected > * {
    color: #0f766e;
    background: #ecfdf9;
}

.length-table tbody tr:last-child > * {
    border-bottom: 0;
}

.length-copy {
    margin-top: auto;
}

.length-copy svg {
    width: 1rem;
    height: 1rem;
    fill: currentcolor;
}

.tool-page--length .report-export-bar {
    border-color: #c8e4e1;
    background: radial-gradient(circle at 100% 0, rgb(21 149 141 / 13%), transparent 13rem), #fff;
}

.tool-page--weight .button-primary {
    border-color: #5548c8;
    background: linear-gradient(135deg, #7568e8, #5548c8);
    box-shadow: 0 .5rem 1rem rgb(85 72 200 / 20%);
}

.weight-workspace .length-input-shell:focus-within {
    border-color: #6256d8;
    box-shadow: 0 0 0 3px rgb(98 86 216 / 13%);
}

.weight-workspace .length-input-shell > span,
.weight-workspace .length-swap,
.weight-workspace .length-human-height strong,
.weight-workspace .length-table tr.is-selected > * {
    color: #5548c8;
}

.weight-workspace .length-swap {
    border-color: #d5d0fa;
    background: #f6f4ff;
}

.weight-workspace .length-swap:hover,
.weight-workspace .length-presets button:hover {
    color: #fff;
    border-color: #6256d8;
    background: #6256d8;
}

.weight-workspace .length-presets button {
    color: #5548c8;
    border-color: #dedafa;
    background: #f8f7ff;
}

.weight-workspace .length-primary-result {
    background: linear-gradient(135deg, #7568e8, #5548c8);
}

.weight-workspace .length-primary-result span,
.weight-workspace .length-primary-result small {
    color: #efedff;
}

.weight-workspace .length-human-height {
    border-color: #ddd9fa;
    background: #f8f7ff;
}

.weight-workspace .length-human-height span,
.weight-workspace .length-human-height p {
    color: #686188;
}

.weight-workspace .length-table thead th {
    color: #4d4870;
    background: #f2f0ff;
}

.weight-workspace .length-table tr.is-selected > * {
    background: #f4f2ff;
}

.tool-page--weight .report-export-bar {
    border-color: #d8d3f6;
    background: radial-gradient(circle at 100% 0, rgb(117 104 232 / 14%), transparent 13rem), #fff;
}

.money-sharing-form,
.money-sharing-results {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sharing-section {
    padding: 1rem;
    border: 1px solid #e3e8ef;
    border-radius: 1rem;
    background: #fff;
}

.sharing-section-heading,
.sharing-results-heading,
.sharing-list-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.sharing-section-heading h3,
.sharing-results-heading h3,
.sharing-list-heading h3 {
    margin: .15rem 0 .25rem;
}

.sharing-count-badge,
.sharing-list-heading > span {
    display: grid;
    min-width: 2rem;
    min-height: 2rem;
    padding: .2rem .55rem;
    place-items: center;
    color: #a1432b;
    border: 1px solid #f2c8bb;
    border-radius: 999px;
    background: #fff4ef;
    font-weight: 800;
}

.sharing-label,
.sharing-field > span,
.sharing-participants legend {
    display: block;
    margin-bottom: .4rem;
    color: #2d425c;
    font-size: .86rem;
    font-weight: 760;
}

.money-sharing-form textarea,
.sharing-field input,
.sharing-field select {
    width: 100%;
    min-width: 0;
    padding: .78rem .85rem;
    color: #17233a;
    border: 1px solid #cbd7e6;
    border-radius: .8rem;
    outline: 0;
    background: #fff;
    font: inherit;
}

.money-sharing-form textarea {
    resize: vertical;
    line-height: 1.55;
}

.money-sharing-form textarea:focus,
.sharing-field input:focus,
.sharing-field select:focus {
    border-color: #d05c3a;
    box-shadow: 0 0 0 3px rgb(208 92 58 / 13%);
}

.sharing-people-actions {
    margin-top: .65rem;
}

.sharing-people-actions .button {
    flex: 1;
}

.sharing-people-actions svg,
.sharing-copy svg {
    width: 1rem;
    height: 1rem;
    fill: currentcolor;
}

.sharing-warning {
    margin: .65rem 0 0;
    color: #7c5b47;
    font-size: .76rem;
    line-height: 1.45;
}

.sharing-expense-editor {
    background: #fffaf7;
}

.sharing-field-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(9rem, .65fr);
    gap: .7rem;
    margin-bottom: .75rem;
}

.sharing-participants {
    margin: .8rem 0;
    padding: .75rem;
    border: 1px solid #eadfd7;
    border-radius: .8rem;
    background: #fff;
}

#sharing-participant-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 10rem;
    overflow: auto;
    gap: .4rem;
    scrollbar-width: thin;
}

#sharing-participant-options label {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    padding: .45rem .55rem;
    border: 1px solid #ece5e0;
    border-radius: .65rem;
    background: #fffdfc;
    cursor: pointer;
}

#sharing-participant-options input {
    accent-color: #d05c3a;
}

#sharing-participant-options span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sharing-selection-actions {
    display: flex;
    gap: .8rem;
    margin-top: .55rem;
}

.sharing-selection-actions button {
    padding: 0;
    color: #a1432b;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: .78rem;
    font-weight: 750;
}

.sharing-add-expense {
    width: 100%;
}

.tool-page--money-sharing .button-primary {
    border-color: #b84b2e;
    background: linear-gradient(135deg, #e87650, #c64e31);
    box-shadow: 0 .5rem 1rem rgb(184 75 46 / 20%);
}

.sharing-list-heading {
    align-items: center;
}

.sharing-expense-list {
    display: grid;
    max-height: 12rem;
    overflow: auto;
    gap: .45rem;
    scrollbar-width: thin;
}

.sharing-expense-list article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem .75rem;
    border: 1px solid #e3e8ef;
    border-radius: .75rem;
    background: #fff;
}

.sharing-expense-list article > div {
    display: grid;
    min-width: 0;
    gap: .15rem;
}

.sharing-expense-list article span {
    overflow-wrap: anywhere;
    color: #65748c;
    font-size: .74rem;
}

.sharing-expense-list article button {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    color: #a1432b;
    border: 1px solid #f0c8bc;
    border-radius: 999px;
    background: #fff5f1;
    cursor: pointer;
    font-size: 1.2rem;
}

.sharing-empty {
    margin: 0;
    padding: 1rem;
    color: #66758e;
    border: 1px dashed #ccd6e2;
    border-radius: .75rem;
    text-align: center;
}

.sharing-reset-actions .button {
    flex: 1;
}

.sharing-summary-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
}

.sharing-summary-cards article {
    display: grid;
    gap: .25rem;
    padding: .8rem;
    border: 1px solid #f0d5cb;
    border-radius: .85rem;
    background: #fff8f5;
}

.sharing-summary-cards span {
    color: #7a6259;
    font-size: .74rem;
}

.sharing-summary-cards strong {
    overflow-wrap: anywhere;
    color: #a1432b;
    font-size: 1.15rem;
}

.sharing-table-wrap {
    max-height: 15rem;
    overflow: auto;
    border: 1px solid #dce5ec;
    border-radius: .85rem;
    scrollbar-width: thin;
}

.sharing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .78rem;
}

.sharing-table th,
.sharing-table td {
    padding: .62rem .58rem;
    border-bottom: 1px solid #e7edf2;
    text-align: right;
    white-space: nowrap;
}

.sharing-table th:first-child {
    max-width: 9rem;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
}

.sharing-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: #4c5c72;
    background: #fff1eb;
}

.sharing-table td.is-credit {
    color: #087c62;
    font-weight: 800;
}

.sharing-table td.is-debt {
    color: #c0442f;
    font-weight: 800;
}

.sharing-settlements {
    padding: .9rem;
    border: 1px solid #ead8cf;
    border-radius: .9rem;
    background: #fffaf7;
}

.sharing-settlements h4 {
    margin: 0;
}

.sharing-settlements > div > p {
    margin: .25rem 0 .7rem;
    color: #6d7280;
    font-size: .74rem;
}

.sharing-settlements ol {
    display: grid;
    margin: 0;
    padding: 0;
    gap: .4rem;
    list-style: none;
}

.sharing-settlements li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem .7rem;
    border-radius: .7rem;
    background: #fff;
}

.sharing-settlements li strong {
    color: #a1432b;
    white-space: nowrap;
}

.sharing-settlements li.is-settled {
    color: #087c62;
    background: #effbf7;
}

.sharing-copy {
    margin-top: auto;
}

.tool-page--money-sharing .report-export-bar {
    border-color: #ecd4ca;
    background: radial-gradient(circle at 100% 0, rgb(232 118 80 / 14%), transparent 13rem), #fff;
}

.creditterm-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: 1.2rem 0 0;
    padding: 0;
    border: 0;
}

.creditterm-mode-card {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 0;
    min-height: 5.2rem;
    padding: .9rem 1rem;
    color: #34445d;
    border: 1px solid #dbe2eb;
    border-radius: 1rem;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.creditterm-mode-card:hover {
    border-color: #c09b4e;
    transform: translateY(-1px);
}

.creditterm-mode-card.is-active {
    color: #704d0f;
    border-color: #d3a84f;
    background: linear-gradient(145deg, #fffdf7, #fff6de);
    box-shadow: 0 8px 20px rgb(174 126 35 / 12%);
}

.creditterm-mode-card input {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    accent-color: #b77b18;
}

.creditterm-mode-card span {
    display: grid;
    min-width: 0;
    gap: .18rem;
}

.creditterm-mode-card strong {
    color: inherit;
    font-size: .94rem;
}

.creditterm-mode-card small {
    color: #66748a;
    font-size: .76rem;
    line-height: 1.45;
}

.creditterm-form,
.creditterm-results {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-color: #eadfca;
    box-shadow: 0 12px 30px rgb(145 99 24 / 7%);
}

.creditterm-form h3,
.creditterm-results h3 {
    margin: .12rem 0 .25rem;
}

.creditterm-form-description {
    margin: 0;
    color: #66748a;
    font-size: .82rem;
    line-height: 1.55;
}

.creditterm-fields {
    display: grid;
    gap: .8rem;
}

.creditterm-fields[hidden] {
    display: none;
}

.creditterm-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.creditterm-field > span {
    display: block;
    margin-bottom: .4rem;
    color: #384b65;
    font-size: .85rem;
    font-weight: 760;
}

.creditterm-field input,
.creditterm-field select {
    width: 100%;
    min-width: 0;
    min-height: 3rem;
    padding: .75rem .85rem;
    color: #17233a;
    border: 1px solid #ccd6e2;
    border-radius: .8rem;
    outline: 0;
    background: #fff;
    font: inherit;
    font-weight: 700;
}

.creditterm-field input:focus,
.creditterm-field select:focus {
    border-color: #b77b18;
    box-shadow: 0 0 0 3px rgb(183 123 24 / 13%);
}

.creditterm-actions {
    margin-top: auto;
}

.creditterm-actions .button {
    flex: 1;
}

.tool-page--creditterm .button-primary {
    border-color: #9b6512;
    background: linear-gradient(135deg, #d69d36, #a96d16);
    box-shadow: 0 .5rem 1rem rgb(155 101 18 / 20%);
}

.creditterm-warning {
    margin: 0;
    padding: .75rem .85rem;
    color: #725214;
    border: 1px solid #ecd8a9;
    border-radius: .8rem;
    background: #fff9e9;
    font-size: .76rem;
    line-height: 1.5;
}

.creditterm-results {
    background: radial-gradient(circle at 100% 0, rgb(214 157 54 / 12%), transparent 14rem), #fff;
}

.creditterm-results-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
}

.creditterm-formula {
    display: grid;
    gap: .35rem;
    padding: .8rem .9rem;
    color: #6f5018;
    border: 1px solid #ead9b6;
    border-radius: .85rem;
    background: #fffbf1;
}

.creditterm-formula span {
    font-size: .74rem;
    font-weight: 760;
}

.creditterm-formula code {
    overflow-wrap: anywhere;
    color: #4c3a18;
    font-family: "Noto Sans Thai", ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .8rem;
    line-height: 1.55;
}

.creditterm-primary-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: .2rem .65rem;
    padding: 1rem;
    color: #fff;
    border-radius: 1rem;
    background: radial-gradient(circle at 100% 0, rgb(255 255 255 / 20%), transparent 9rem), linear-gradient(135deg, #cc922b, #9a6214);
    box-shadow: 0 12px 25px rgb(155 101 18 / 18%);
}

.creditterm-primary-result span {
    grid-column: 1 / -1;
    color: #fff2cf;
    font-size: .8rem;
    font-weight: 720;
}

.creditterm-primary-result strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.1;
}

.creditterm-primary-result small {
    padding-bottom: .35rem;
    color: #fff1c9;
    font-weight: 800;
}

.creditterm-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.creditterm-stat-grid article {
    display: grid;
    min-width: 0;
    gap: .25rem;
    padding: .8rem;
    border: 1px solid #e7e1d7;
    border-radius: .85rem;
    background: #fff;
}

.creditterm-stat-grid article:nth-child(2n) {
    border-color: #e3daf1;
    background: #fcfaff;
}

.creditterm-stat-grid span {
    color: #68758a;
    font-size: .73rem;
}

.creditterm-stat-grid strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #27344a;
    font-size: .98rem;
}

.creditterm-result-note {
    margin: 0;
    padding: .75rem .85rem;
    color: #5e6674;
    border-left: .22rem solid #d39a34;
    border-radius: .35rem .75rem .75rem .35rem;
    background: #fbf7ed;
    font-size: .76rem;
    line-height: 1.5;
}

.creditterm-copy {
    margin-top: auto;
}

.creditterm-copy svg {
    width: 1rem;
    height: 1rem;
    fill: currentcolor;
}

.tool-page--creditterm .report-export-bar {
    border-color: #eadbbb;
    background: radial-gradient(circle at 100% 0, rgb(214 157 54 / 14%), transparent 13rem), #fff;
}

.calculator-panel,
.calculator-history-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-color: #cfe3e2;
    box-shadow: 0 12px 30px rgb(25 123 130 / 7%);
}

.calculator-panel h3,
.calculator-history-panel h3 {
    margin: .12rem 0 .25rem;
}

.calculator-screen {
    display: grid;
    min-height: 7rem;
    padding: 1rem 1.1rem;
    align-content: center;
    justify-items: end;
    gap: .35rem;
    overflow: hidden;
    color: #effffe;
    border: 1px solid #1f7379;
    border-radius: 1rem;
    background: radial-gradient(circle at 0 0, rgb(255 255 255 / 12%), transparent 9rem), linear-gradient(135deg, #1d6d73, #164f5b);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 10px 22px rgb(22 79 91 / 17%);
}

.calculator-screen span {
    max-width: 100%;
    overflow: hidden;
    color: #bee7e5;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calculator-screen output {
    max-width: 100%;
    overflow: hidden;
    font-family: "Noto Sans Thai", ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 850;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calculator-keypad {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .55rem;
}

.calculator-key {
    min-width: 0;
    min-height: 3.5rem;
    padding: .65rem;
    color: #26364b;
    border: 1px solid #d8e1e8;
    border-radius: .8rem;
    background: linear-gradient(145deg, #fff, #f5f8fa);
    box-shadow: 0 .2rem .45rem rgb(23 35 58 / 6%);
    cursor: pointer;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 820;
    transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.calculator-key:hover,
.calculator-key:focus-visible {
    border-color: #8dbfc1;
    box-shadow: 0 .45rem .9rem rgb(25 123 130 / 12%);
    transform: translateY(-1px);
}

.calculator-key:active {
    transform: translateY(1px);
}

.calculator-key--clear {
    color: #98591c;
    border-color: #efd9bf;
    background: #fff9ef;
}

.calculator-key--clear svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentcolor;
}

.calculator-key--operator {
    color: #3854b9;
    border-color: #d5dcf6;
    background: #f4f6ff;
}

.calculator-key--operator[aria-pressed="true"] {
    color: #fff;
    border-color: #4660c8;
    background: linear-gradient(135deg, #6077dd, #435cc5);
}

.calculator-key--zero {
    grid-column: span 2;
}

.calculator-key--equals {
    color: #fff;
    border-color: #126b70;
    background: linear-gradient(135deg, #26a29f, #16747a);
    box-shadow: 0 .45rem .9rem rgb(25 123 130 / 20%);
}

.calculator-keyboard-note {
    margin: 0;
    color: #65748a;
    font-size: .72rem;
    line-height: 1.5;
    text-align: center;
}

.calculator-history-panel {
    background: radial-gradient(circle at 100% 0, rgb(79 103 216 / 10%), transparent 14rem), #fff;
}

.calculator-history-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
}

.calculator-history-heading p:last-child {
    margin: 0;
    color: #66748a;
    font-size: .78rem;
}

.calculator-history-count {
    display: grid;
    min-width: 2.15rem;
    min-height: 2.15rem;
    padding: .2rem .55rem;
    place-items: center;
    color: #3652b7;
    border: 1px solid #d2d9f3;
    border-radius: 999px;
    background: #f3f5ff;
    font-weight: 850;
}

.calculator-current-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .25rem .75rem;
    min-width: 0;
    padding: 1rem;
    color: #fff;
    border-radius: 1rem;
    background: radial-gradient(circle at 100% 0, rgb(255 255 255 / 18%), transparent 8rem), linear-gradient(135deg, #526ad1, #3f55b2);
    box-shadow: 0 10px 22px rgb(63 85 178 / 16%);
}

.calculator-current-card span {
    grid-column: 1 / -1;
    color: #dfe4ff;
    font-size: .76rem;
}

.calculator-current-card strong {
    min-width: 0;
    overflow: hidden;
    font-family: "Noto Sans Thai", ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: clamp(1.55rem, 4vw, 2.25rem);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calculator-current-card button {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    place-items: center;
    color: #3650ac;
    border: 0;
    border-radius: .75rem;
    background: #fff;
    cursor: pointer;
}

.calculator-current-card svg {
    width: 1rem;
    height: 1rem;
    fill: currentcolor;
}

.calculator-history-list {
    display: grid;
    max-height: 21rem;
    overflow: auto;
    gap: .5rem;
    scrollbar-width: thin;
}

.calculator-history-list button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    padding: .75rem .8rem;
    color: #38485f;
    border: 1px solid #e0e5ec;
    border-radius: .8rem;
    background: #fff;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.calculator-history-list button:hover,
.calculator-history-list button:focus-visible {
    border-color: #a9b7eb;
    background: #f8f9ff;
}

.calculator-history-list span {
    min-width: 0;
    overflow: hidden;
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calculator-history-list strong {
    color: #3e57ba;
    font-size: .9rem;
    white-space: nowrap;
}

.calculator-history-empty {
    margin: auto 0;
    padding: 1.2rem;
    color: #6c788a;
    border: 1px dashed #ccd6e3;
    border-radius: .85rem;
    background: #fbfcfd;
    text-align: center;
}

.calculator-history-empty[hidden] {
    display: none;
}

.calculator-clear-history {
    margin-top: auto;
}

.calculator-boundary {
    margin: 0;
    padding: .72rem .8rem;
    color: #5f6c7e;
    border-left: .22rem solid #4f67d8;
    border-radius: .35rem .7rem .7rem .35rem;
    background: #f5f7ff;
    font-size: .74rem;
    line-height: 1.5;
}

.tool-page--calculator .report-export-bar {
    border-color: #cce3e1;
    background: radial-gradient(circle at 100% 0, rgb(79 103 216 / 12%), transparent 13rem), #fff;
}

.language-swap-modes { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin:1.15rem 0 0;padding:0;border:0; }
.language-swap-modes legend { margin-bottom:.45rem;color:#52617a;font-size:.8rem;font-weight:800; }
.language-swap-mode { display:flex;align-items:center;gap:.65rem;min-width:0;min-height:4.7rem;padding:.75rem .85rem;border:1px solid #d8e1ed;border-radius:.9rem;background:#fff;cursor:pointer; }
.language-swap-mode.is-active { color:#174fa6;border-color:#7eaae8;background:#f2f7ff;box-shadow:0 7px 18px rgb(35 105 216 / 10%); }
.language-swap-mode input { flex:0 0 auto;accent-color:#2369d8; }
.language-swap-mode span { display:grid;min-width:0;gap:.12rem; }
.language-swap-mode strong { font-size:.85rem; }
.language-swap-mode small { overflow-wrap:anywhere;color:#68768b;font-size:.7rem;line-height:1.4; }
.language-swap-panel { display:flex;flex-direction:column;gap:.85rem;border-color:#d3e0ef;box-shadow:0 12px 30px rgb(35 105 216 / 6%); }
.language-swap-heading { display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem; }
.language-swap-heading h3 { margin:.12rem 0 0; }
.language-swap-heading > span { display:grid;min-width:2.2rem;min-height:2.2rem;padding:.2rem .5rem;place-items:center;color:#235eb8;border:1px solid #d1ddf2;border-radius:999px;background:#f4f7ff;font-size:.78rem;font-weight:850; }
.language-swap-panel textarea { width:100%;min-width:0;min-height:16rem;padding:1rem;resize:vertical;color:#17233a;border:1px solid #c7d4e3;border-radius:.9rem;outline:0;background:#fff;font:inherit;line-height:1.7; }
.language-swap-panel textarea:focus { border-color:#357bdc;box-shadow:0 0 0 3px rgb(35 105 216 / 13%); }
.language-swap-results { background:radial-gradient(circle at 100% 0,rgb(19 166 156 / 9%),transparent 14rem),#fff; }
.language-swap-results textarea { background:#fbfefe; }
.language-swap-actions .button { flex:1; }
.tool-page--changethelanguage .button-primary { background:linear-gradient(135deg,#347ee5,#225fc3);box-shadow:0 8px 18px rgb(35 105 216 / 18%); }
.language-swap-copy { margin-top:auto; }
.language-swap-copy svg { width:1rem;height:1rem;margin-right:.35rem;fill:currentcolor; }
.language-swap-note { margin:0;padding:.75rem .85rem;color:#4f6869;border-left:.22rem solid #13a69c;border-radius:.35rem .75rem .75rem .35rem;background:#effaf8;font-size:.75rem;line-height:1.5; }
.tool-page--changethelanguage .report-export-bar { border-color:#ccdff0;background:radial-gradient(circle at 100% 0,rgb(19 166 156 / 12%),transparent 13rem),#fff; }

@media (max-width: 42rem) {
    .sharing-field-grid,
    .sharing-summary-cards,
    .creditterm-mode-grid,
    .creditterm-field-grid,
    .creditterm-stat-grid {
        grid-template-columns: 1fr;
    }

    .language-swap-modes { grid-template-columns:1fr; }

    #sharing-participant-options {
        grid-template-columns: 1fr;
    }

    .sharing-table {
        min-width: 33rem;
    }

    .calculator-key {
        min-height: 3.15rem;
        padding: .5rem;
    }

    .calculator-history-list button {
        grid-template-columns: 1fr;
        gap: .25rem;
    }
}

@media (min-width: 70rem) {
    .dating-layout .date-input-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dating-layout .dating-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dating-layout .dating-stats .stat-card strong {
        font-size: clamp(1.05rem, 1.45vw, 1.3rem);
        white-space: nowrap;
    }
}

@media (max-width: 58rem) {
    .header-row {
        grid-template-columns: auto 1fr auto;
        gap: .75rem 1.25rem;
        padding-block: .75rem;
    }

    .site-search {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .primary-nav {
        justify-content: flex-end;
    }

    .language-switcher {
        grid-column: 3;
        grid-row: 1;
    }

    .hero,
    .content-grid {
        grid-template-columns: 1fr;
    }

    .tool-intro-grid .tool-header {
        display: block;
    }

    .tool-intro-grid .tool-header .privacy-note {
        max-width: none;
        margin-top: .7rem;
    }

    .workspace-layout {
        grid-template-columns: 1fr;
    }

    .percent-mode-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gpa-course-head,
    .gpa-course-row {
        grid-template-columns: minmax(9rem, 1fr) 6.2rem 7.5rem 2.5rem;
    }

    .workspace-layout--balanced > .workspace-panel {
        height: auto;
    }

    .results-panel {
        position: static;
    }

    .tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .specialcharacters-symbol-grid {
        grid-template-columns: repeat(7, minmax(2.5rem, 1fr));
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .date-input-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vat-rate-grid {
        grid-template-columns: 1fr;
    }

    .base-converter-actions .button {
        flex: 1;
    }

    .moneycount-actions .button {
        flex: 1;
    }

    .vat-actions .button {
        flex: 1;
    }

    .agecalc-actions .button {
        flex: 1;
    }

    .diffdate-actions .button {
        flex: 1;
    }

    .random-team-actions .button {
        flex: 1;
    }

    .dating-export-bar,
    .report-export-bar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 38rem) {
    .site-header {
        position: static;
    }

    .header-row {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .55rem .75rem;
        padding-block: .6rem .7rem;
    }

    .brand {
        grid-column: 1;
        grid-row: 1;
        gap: .5rem;
        font-size: 1.3rem;
    }

    .brand-mark {
        width: 2.25rem;
        height: 2.25rem;
    }

    .primary-nav {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-content: flex-start;
        gap: .25rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .primary-nav::-webkit-scrollbar {
        display: none;
    }

    .primary-nav a {
        padding: .35rem .65rem;
        font-size: .88rem;
        white-space: nowrap;
    }

    .site-search {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .site-search input,
    .site-search button {
        padding-block: .5rem;
    }

    .language-switcher {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .language-switcher a {
        min-width: 2.35rem;
        padding: .28rem .5rem;
    }

    .page-content {
        padding-block: 1rem 4rem;
    }

    .breadcrumb {
        gap: .35rem;
        margin-bottom: .7rem;
        padding: .35rem .65rem;
        font-size: .78rem;
    }

    .hero {
        gap: 1.25rem;
        margin-top: 0;
        padding: 1.4rem 1.2rem 1.55rem;
        border-radius: 1.55rem;
    }

    .hero h1 {
        margin-block: .25rem .65rem;
        font-size: clamp(2rem, 10vw, 2.65rem);
        line-height: 1.08;
    }

    .hero-copy {
        font-size: 1rem;
        line-height: 1.55;
    }

    .hero-search {
        margin-top: 1rem;
    }

    .hero-search input {
        padding: .7rem .85rem;
        font-size: .9rem;
    }

    .hero-search button {
        min-width: 4.6rem;
        padding: .7rem .85rem;
    }

    .hero .button-row {
        margin-top: 1rem;
    }

    .privacy-card {
        display: grid;
        grid-template-columns: 2.5rem minmax(0, 1fr);
        gap: .25rem .8rem;
        padding: 1rem;
        border-radius: 1.25rem;
        box-shadow: 4px 4px 0 #b8ead7;
        transform: none;
    }

    .privacy-card .privacy-icon {
        grid-row: 1 / span 2;
        width: 2.5rem;
        height: 2.5rem;
    }

    .privacy-card h2 {
        margin: 0;
        font-size: 1.05rem;
    }

    .privacy-card p {
        font-size: .88rem;
        line-height: 1.5;
    }

    .section-block {
        padding-block: 2rem 1.5rem;
    }

    .page-header {
        padding: 1.2rem;
        border-radius: 1.35rem;
    }

    .page-header h1 {
        margin-block: .2rem .55rem;
        font-size: clamp(1.85rem, 9vw, 2.35rem);
    }

    .page-header > p:last-of-type {
        font-size: .95rem;
        line-height: 1.5;
    }

    .directory-search {
        margin-top: 1rem;
    }

    .directory-search input {
        padding: .7rem .85rem;
        font-size: .9rem;
    }

    .directory-search button {
        min-width: 4.6rem;
        padding: .7rem .85rem;
    }

    .category-nav {
        flex-wrap: nowrap;
        margin-block: .8rem 1rem;
        padding: .65rem;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .category-nav a {
        flex: 0 0 auto;
        padding: .42rem .7rem;
        font-size: .82rem;
    }

    .directory-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: .25rem;
        margin-bottom: .85rem;
        font-size: .9rem;
    }

    .privacy-principles {
        grid-template-columns: 1fr;
        gap: .75rem;
        margin-block: 1rem;
    }

    .privacy-principles article {
        padding: 1rem;
        border-radius: 1.1rem;
        box-shadow: 4px 4px 0 #b9eaf2;
    }

    .tool-intro-grid {
        margin-bottom: .65rem;
    }

    .tool-intro-grid .tool-header {
        border-radius: var(--radius-md);
    }

    .tool-intro-grid .tool-header {
        padding: .85rem .95rem .95rem;
    }

    .tool-intro-grid .tool-header h1 {
        margin-bottom: .25rem;
        font-size: clamp(1.65rem, 8.2vw, 2.1rem);
        line-height: 1.12;
    }

    .tool-intro-grid .tool-header > p:last-of-type {
        font-size: .92rem;
        line-height: 1.45;
    }

    .tool-intro-grid .tool-header .privacy-note {
        margin-top: .55rem;
        padding: .45rem .65rem;
        border-width: 1px;
        font-size: .8rem;
        line-height: 1.4;
    }

    .tool-workspace,
    .tool-page .tool-workspace {
        padding: 1rem;
        border-radius: 1.45rem;
        box-shadow: 0 16px 40px rgb(55 45 111 / 9%);
    }

    .tool-page .post-tool-answer {
        display: block;
        padding: 1.15rem 1.25rem;
        border-radius: var(--radius-md);
    }

    .tool-page .post-tool-answer p:last-child {
        margin-top: .55rem;
    }

    .tool-content-nav {
        align-items: flex-start;
        flex-direction: column;
        gap: .55rem;
        padding: .65rem;
        overflow: hidden;
        border-radius: 1rem;
    }

    .tool-content-nav__label {
        padding: .36rem .58rem;
        font-size: .78rem;
    }

    .tool-content-nav__links {
        width: 100%;
        flex-wrap: nowrap;
        padding-bottom: .25rem;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .tool-content-nav a {
        flex: 0 0 auto;
        padding: .36rem .58rem;
        font-size: .78rem;
    }

    .content-back-link {
        justify-content: stretch;
        margin-top: 1.35rem;
    }

    .content-back-link a {
        justify-content: center;
        width: 100%;
    }

    .related-tools-section {
        margin-top: 1.5rem;
        padding: 1rem;
        border-radius: 1.35rem;
        box-shadow: 5px 5px 0 color-mix(in srgb, var(--tool-accent) 11%, #fff);
    }

    .related-tools-heading {
        align-items: flex-start;
    }

    .related-tools-heading .text-link {
        margin-top: .25rem;
    }

    .related-tools-grid {
        gap: 1rem;
        margin-top: 1rem;
    }

    .related-tool-card {
        min-height: 0;
        padding: 1.25rem;
    }

    .tool-grid,
    .home-category-grid,
    .sitemap-columns,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        gap: 1.75rem;
    }

    .footer-category-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .workspace-heading,
    .workspace-footer,
    .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .button-row.compact {
        width: 100%;
    }

    .button-row.compact .button {
        flex: 1;
    }

    .text-input {
        min-height: 15rem;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .date-input-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dating-form .button-row .button {
        flex: 1;
    }

    .dating-table {
        min-width: 36rem;
    }

    .dating-export-actions,
    .report-export-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .frequency-card-heading {
        flex-wrap: wrap;
    }

    .frequency-copy-button {
        width: 100%;
        margin-left: 0;
    }

    .specialcharacters-result-list {
        grid-template-columns: 1fr;
    }

    .specialcharacters-symbol-grid {
        grid-template-columns: repeat(5, minmax(2.5rem, 1fr));
    }
}

@media (max-width: 25rem) {
    .date-input-grid,
    .base-field-grid {
        grid-template-columns: 1fr;
    }

    .specialcharacters-symbol-grid {
        grid-template-columns: repeat(4, minmax(2.5rem, 1fr));
    }

    .base-presets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .money-input-row {
        grid-template-columns: minmax(0, 1fr) minmax(7rem, .65fr);
    }

    .money-input-row output {
        grid-column: 1 / -1;
        text-align: left;
    }

    .money-coin-image {
        width: 2.6rem;
        height: 2.6rem;
        flex-basis: 2.6rem;
    }

    .random-team-settings {
        grid-template-columns: 1fr;
    }

    .random-team-settings input {
        text-align: left;
    }

    .random-team-stats,
    .random-team-grid {
        grid-template-columns: 1fr;
    }

    .vat-mode-switch,
    .vat-stats {
        grid-template-columns: 1fr;
    }

    .percent-mode-grid,
    .percent-input-grid {
        grid-template-columns: 1fr;
    }

    .percent-mode-grid span {
        min-height: 0;
        grid-template-columns: auto 1fr;
        align-items: center;
        text-align: left;
    }

    .percent-mode-grid span > strong {
        grid-row: 1 / span 2;
        margin: 0 .25rem 0 0;
    }

    .percent-detail-list div {
        grid-template-columns: 1fr;
        gap: .2rem;
    }

    .percent-detail-list dd {
        text-align: left;
    }

    .gpa-section-heading {
        display: grid;
    }

    .gpa-add {
        justify-self: stretch;
    }

    .gpa-course-head {
        display: none;
    }

    .gpa-course-row {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .gpa-course-row label > span {
        position: static;
        display: block;
        width: auto;
        height: auto;
        margin-bottom: .35rem;
        overflow: visible;
        clip: auto;
        color: #586880;
        font-size: .76rem;
        font-weight: 700;
        white-space: normal;
    }

    .gpa-course-row label:first-child,
    .gpa-remove {
        grid-column: 1 / -1;
    }

    .gpa-remove {
        width: 100%;
        height: 2.35rem;
    }

    .gpa-prior-grid,
    .gpa-score-pair,
    .gpa-stats {
        grid-template-columns: 1fr;
    }

    .length-unit-pair {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .length-swap {
        justify-self: center;
        transform: rotate(90deg);
    }

    .length-swap:hover {
        transform: rotate(270deg);
    }

    .vat-detail-list div {
        grid-template-columns: 1fr;
        gap: .2rem;
    }

    .vat-detail-list dd {
        text-align: left;
    }

    .agecalc-stats,
    .diffdate-stats,
    .agecalc-details div {
        grid-template-columns: 1fr;
    }

    .agecalc-details div {
        gap: .2rem;
    }

    .agecalc-details dd {
        text-align: left;
    }
}

@media print {
    @page {
        size: A4 portrait;
        margin: 12mm;
    }

    *,
    *::before,
    *::after {
        box-shadow: none !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    html,
    body {
        width: 100%;
        color: #17233a;
        background: #fff;
        font-size: 9pt;
    }

    .site-header,
    .breadcrumb,
    .tool-intro-grid,
    .tool-content-nav,
    .content-back-link,
    .related-tools-section,
    .workspace-heading,
    .dating-form,
    .base-converter-form,
    .moneycount-form,
    .vat-form,
    .agecalc-form,
    .diffdate-form,
    .percent-form,
    .gpa-form,
    .length-form,
    .money-sharing-form,
    .creditterm-form,
    .creditterm-mode-grid,
    .calculator-panel,
    .language-swap-modes,
    .language-swap-layout > :first-child,
    .specialcharacters-input-panel,
    .random-team-form,
    .dating-export-bar,
    .report-export-bar,
    .countwords-input-panel,
    .post-tool-answer,
    .content-grid,
    .site-footer {
        display: none !important;
    }

    .page-content,
    .shell,
    .tool-workspace {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .tool-workspace {
        background: #fff;
        border: 0;
    }

    .print-report-header {
        display: block !important;
        margin-bottom: 6mm;
        padding-bottom: 4mm;
        border-bottom: 2px solid #2857d9;
    }

    .print-report-header p {
        margin: 0 0 1mm;
        color: #52607a;
    }

    .print-report-header .print-report-title {
        margin: 0 0 1mm;
        color: #172554;
        font-size: 20pt;
        font-weight: 850;
        line-height: 1.2;
    }

    .dating-layout {
        display: block;
        margin: 0;
    }

    .diffdate-layout {
        display: block;
        margin: 0;
    }

    .percent-mode-grid {
        display: none !important;
    }

    .percent-layout {
        display: block;
        margin: 0;
    }

    .percent-layout .percent-results {
        position: static;
        padding: 5mm;
        background: #faf8ff !important;
        border: 1px solid #ddd5f1;
        break-inside: avoid;
    }

    .gpa-layout {
        display: block;
        margin: 0;
    }

    .gpa-layout .gpa-results {
        position: static;
        padding: 5mm;
        background: #f5f9ff !important;
        border: 1px solid #cbdff2;
    }

    .gpa-breakdown-wrap {
        max-height: none;
        overflow: visible;
    }

    .gpa-breakdown-table thead th {
        position: static;
    }

    .length-layout {
        display: block;
        margin: 0;
    }

    .length-layout .length-results {
        position: static;
        padding: 5mm;
        background: #f3fbfa !important;
        border: 1px solid #c8e4e1;
    }

    .money-sharing-layout {
        display: block;
        margin: 0;
    }

    .money-sharing-layout .money-sharing-results {
        position: static;
        padding: 5mm;
        background: #fffaf7 !important;
        border: 1px solid #ecd4ca;
    }

    .creditterm-layout {
        display: block;
        margin: 0;
    }

    .creditterm-layout .creditterm-results {
        position: static;
        padding: 5mm;
        background: #fffaf2 !important;
        border: 1px solid #eadbbb;
    }

    .calculator-layout {
        display: block;
        margin: 0;
    }

    .calculator-layout .calculator-history-panel {
        position: static;
        padding: 5mm;
        background: #f7f9ff !important;
        border: 1px solid #cad4f1;
    }

    .calculator-history-list {
        max-height: none;
        overflow: visible;
    }

    .language-swap-layout { display:block;margin:0; }
    .language-swap-layout .language-swap-results { position:static;padding:5mm;background:#f4fbfa !important;border:1px solid #cce4e1; }

    .sharing-table-wrap {
        max-height: none;
        overflow: visible;
    }

    .sharing-table thead th {
        position: static;
    }

    .length-table-wrap {
        max-height: none;
        overflow: visible;
    }

    .length-table thead th {
        position: static;
    }

    .specialcharacters-layout {
        display: block;
        margin: 0;
    }

    .specialcharacters-layout .specialcharacters-results {
        position: static;
        padding: 5mm;
        background: #fbf6ff !important;
        border: 1px solid #e3d2ef;
    }

    .specialcharacters-result-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: none;
        overflow: visible;
    }

    .specialcharacters-result-card {
        min-height: 0;
        padding: 3mm;
        break-inside: avoid;
    }

    .specialcharacters-copy,
    .specialcharacters-symbols {
        display: none !important;
    }

    .diffdate-layout .diffdate-results {
        position: static;
        padding: 5mm;
        color: #17233a;
        background: #f2fbfb !important;
        border: 1px solid #c8e6e8;
        break-inside: avoid;
    }

    .diffdate-results .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .diffdate-results .stat-card {
        min-height: 0;
        padding: 3mm;
        color: #17233a;
        background: #fff !important;
        border: 1px solid #d8e1f0;
    }

    .base-converter-layout {
        display: block;
        margin: 0;
    }

    .moneycount-layout {
        display: block;
        margin: 0;
    }

    .random-team-layout {
        display: block;
        margin: 0;
    }

    .random-team-layout .random-team-results {
        position: static;
        padding: 5mm;
        background: #f8f5ff !important;
        border: 1px solid #ded4fa;
    }

    .random-team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3mm;
    }

    .random-team-card {
        break-inside: avoid;
    }

    .random-team-copy {
        display: none !important;
    }

    .moneycount-layout .moneycount-results {
        position: static;
        padding: 5mm;
        background: #f1faf8 !important;
        border: 1px solid #c9e6df;
        break-inside: avoid;
    }

    .money-total-card {
        color: #fff !important;
        background: #158078 !important;
    }

    .money-breakdown-table-wrap {
        max-height: none;
        overflow: visible;
    }

    .money-breakdown-table thead th {
        position: static;
    }

    .base-converter-layout .base-converter-results {
        position: static;
        padding: 5mm;
        background: #f7f5ff !important;
        border: 1px solid #d8d3f2;
        break-inside: avoid;
    }

    .base-result-list {
        gap: 2mm;
    }

    .base-result-card {
        padding: 3mm;
        background: #fff !important;
        border: 1px solid #d8e1f0 !important;
        break-inside: avoid;
    }

    .base-result-card button,
    .live-badge {
        display: none !important;
    }

    .countwords-layout {
        display: block;
        margin: 0;
    }

    .countwords-layout .results-panel {
        position: static;
        padding: 5mm;
        background: #f4f7ff !important;
        border: 1px solid #d8e1f0;
        break-inside: avoid;
    }

    .countwords-layout .stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .countwords-layout .stat-card {
        min-height: 0;
        padding: 3mm;
        background: #fff !important;
        border: 1px solid #d8e1f0;
    }

    .workspace-footer.frequency-card {
        display: block;
        margin-top: 6mm;
        padding: 0;
        overflow: visible;
        background: #fff;
        border: 0;
        break-before: page;
    }

    .frequency-card-icon,
    .frequency-limit,
    .frequency-copy-button,
    .frequency-meter-column,
    .frequency-meter-cell {
        display: none;
    }

    .frequency-table-scroll {
        max-height: none;
        margin-top: 4mm;
        overflow: visible;
        border-radius: 0;
    }

    .frequency-table.frequency-ranking {
        width: 100%;
        min-width: 0;
        font-size: 8pt;
    }

    .frequency-ranking thead {
        position: static;
        display: table-header-group;
    }

    .frequency-ranking tr {
        break-inside: avoid;
    }

    .frequency-ranking th,
    .frequency-ranking td {
        padding: 2mm;
    }

    .results-panel.dating-results {
        position: static;
        padding: 5mm;
        color: #17233a;
        background: #f4f7ff !important;
        border: 1px solid #d8e1f0;
        break-inside: avoid;
    }

    .dating-results .dating-summary,
    .dating-results .dating-period,
    .dating-results .dating-current,
    .dating-results .dating-leap,
    .dating-results .calendar-result span {
        color: #334155;
    }

    .dating-results .calendar-result strong {
        color: #172554;
    }

    .dating-results .calendar-result div,
    .dating-results .stat-card {
        color: #17233a;
        background: #fff !important;
        border: 1px solid #d8e1f0;
    }

    .dating-results .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dating-results .stat-card {
        min-height: 0;
        padding: 3mm;
    }

    .live-badge {
        display: none;
    }

    .workspace-footer.dating-valentine {
        margin-top: 6mm;
        padding: 0;
        background: #fff;
        border: 0;
        break-before: page;
    }

    .valentine-icon {
        display: none;
    }

    .table-scroll.dating-table-scroll {
        max-height: none;
        margin-top: 4mm;
        overflow: visible;
        border-radius: 0;
    }

    .frequency-table.dating-table {
        width: 100%;
        min-width: 0;
        font-size: 8pt;
    }

    .dating-table thead {
        position: static;
        display: table-header-group;
    }

    .dating-table tr {
        break-inside: avoid;
    }

    .dating-table th,
    .dating-table td {
        padding: 2mm;
    }
}

/* Adult BMI, BMR and TDEE */
.bmr-workspace {
    --bmr-purple: #6558b8;
    --bmr-teal: #167b78;
    border-color: #d8d7ef;
    background:
        radial-gradient(circle at 6% 4%, rgb(124 110 214 / 14%), transparent 13rem),
        radial-gradient(circle at 96% 2%, rgb(48 172 158 / 13%), transparent 15rem),
        #fff;
}

.bmr-heading,
.bmr-panel-heading,
.bmr-threshold-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.bmr-local-badge {
    display: inline-flex;
    min-height: 2rem;
    padding: .35rem .7rem;
    flex: 0 0 auto;
    align-items: center;
    gap: .42rem;
    color: #176a67;
    background: #eef9f7;
    border: 1px solid #c5e5df;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800;
}

.bmr-local-badge span {
    width: .48rem;
    height: .48rem;
    background: #27b18e;
    border-radius: 50%;
}

.bmr-layout {
    align-items: stretch;
}

.bmr-input-panel,
.bmr-results-panel {
    min-width: 0;
}

.bmr-input-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bmr-panel-heading h3,
.bmr-threshold-heading h4 {
    margin: 0;
}

.bmr-panel-heading > span,
.bmr-threshold-heading > span {
    color: #6d7380;
    font-size: .72rem;
    font-weight: 750;
}

.bmr-choice-group {
    margin: 0;
    padding: .85rem;
    border: 1px solid #dedff0;
    border-radius: .85rem;
}

.bmr-choice-group legend {
    padding: 0 .35rem;
    color: #3e4661;
    font-size: .8rem;
    font-weight: 800;
}

.bmr-choice-group small {
    display: block;
    margin-top: .5rem;
    color: #72788a;
    font-size: .7rem;
}

.bmr-segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.bmr-segmented label {
    display: flex;
    min-height: 3rem;
    padding: .65rem;
    align-items: center;
    gap: .5rem;
    color: #4b5268;
    background: #fafaff;
    border: 1px solid #dfe0ed;
    border-radius: .7rem;
    cursor: pointer;
    font-size: .74rem;
    font-weight: 720;
}

.bmr-segmented label:has(input:checked) {
    color: #4d4394;
    background: #f2f0ff;
    border-color: #bcb6e7;
}

.bmr-segmented input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--bmr-purple);
}

.bmr-input-grid,
.bmr-select-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
}

.bmr-select-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bmr-input-grid > div,
.bmr-select-grid > div {
    display: grid;
    min-width: 0;
    gap: .38rem;
}

.bmr-input-grid label,
.bmr-select-grid label {
    color: #3c4b58;
    font-size: .78rem;
    font-weight: 800;
}

.bmr-input-unit {
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ccd9df;
    border-radius: .7rem;
}

.bmr-input-unit:focus-within {
    border-color: #8178c9;
    outline: .2rem solid rgb(101 88 184 / 13%);
}

.bmr-input-unit input,
.bmr-select-grid select {
    width: 100%;
    min-height: 2.8rem;
    padding: .6rem .7rem;
    color: #243542;
    background: #fff;
    border: 1px solid #ccd9df;
    border-radius: .7rem;
    font: inherit;
}

.bmr-input-unit input {
    min-width: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
}

.bmr-input-unit span {
    padding-right: .65rem;
    color: #748088;
    font-size: .7rem;
    font-weight: 750;
}

.bmr-select-grid select:focus {
    border-color: #8178c9;
    outline: .2rem solid rgb(101 88 184 / 13%);
}

.bmr-boundary-note {
    display: flex;
    margin-top: auto;
    padding: .9rem 1rem;
    gap: .7rem;
    color: #684b25;
    background: #fff9ed;
    border: 1px solid #ead8b8;
    border-radius: .85rem;
}

.bmr-boundary-note svg {
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 auto;
    fill: #d68b27;
}

.bmr-boundary-note strong { color: #795116; }
.bmr-boundary-note p { margin: .2rem 0 0; font-size: .76rem; }

.tool-page--bmr .button-primary {
    border-color: #55499e;
    background: linear-gradient(135deg, #7a6fd1, #514692);
    box-shadow: 0 .5rem 1rem rgb(81 70 146 / 18%);
}

.bmr-copy-button {
    display: inline-flex;
    min-height: 2.2rem;
    padding: .4rem .65rem;
    align-items: center;
    gap: .4rem;
    color: #4f4794;
    background: #f5f3ff;
    border: 1px solid #d6d1f1;
    border-radius: .6rem;
    cursor: pointer;
    font: inherit;
    font-size: .74rem;
    font-weight: 800;
}

.bmr-copy-button svg { width: .95rem; height: .95rem; fill: currentColor; }

.bmr-category-card {
    padding: 1rem;
    color: #33414e;
    background: linear-gradient(135deg, #f1efff, #eefaf7);
    border: 1px solid #d6d9ec;
    border-radius: 1rem;
}

.bmr-category-card > span { color: #687181; font-size: .72rem; font-weight: 750; }
.bmr-category-card > strong { display: block; margin-top: .2rem; color: #514692; font-size: 1.35rem; }
.bmr-category-card p { margin: .35rem 0 0; font-size: .73rem; }

.bmr-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    margin-top: .85rem;
}

.bmr-metric-grid article {
    min-width: 0;
    padding: .85rem .55rem;
    background: #fff;
    border: 1px solid #dedfea;
    border-top: .2rem solid #776bd0;
    border-radius: .8rem;
    text-align: center;
}

.bmr-metric-grid article:nth-child(2) { border-top-color: #26a391; }
.bmr-metric-grid article:nth-child(3) { border-top-color: #eb9663; }
.bmr-metric-grid span { display: block; color: #6d7480; font-size: .68rem; }
.bmr-metric-grid strong { display: block; margin: .2rem 0; color: #273648; font-size: 1.45rem; }
.bmr-metric-grid small { color: #798187; font-size: .63rem; }

.bmr-formula-list {
    display: grid;
    gap: .4rem;
    margin-top: .8rem;
}

.bmr-formula-list p {
    display: flex;
    margin: 0;
    padding: .55rem .65rem;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    background: #f8fafb;
    border-radius: .6rem;
    font-size: .7rem;
}

.bmr-formula-list span { color: #6f7a80; }
.bmr-formula-list strong { overflow-wrap: anywhere; text-align: right; }

.bmr-thresholds {
    margin-top: .85rem;
    padding-top: .8rem;
    border-top: 1px solid #e0e4e6;
}

.bmr-thresholds .table-scroll {
    max-height: 15rem;
    margin-top: .55rem;
    border: 1px solid #dfe5e8;
    border-radius: .7rem;
}

.bmr-thresholds table { width: 100%; border-collapse: collapse; font-size: .72rem; }
.bmr-thresholds th,
.bmr-thresholds td { padding: .5rem .65rem; border-bottom: 1px solid #e5eaec; text-align: left; }
.bmr-thresholds thead th { position: sticky; top: 0; background: #f2f5f7; }
.bmr-thresholds tr.is-current { color: #4c428e; background: #f2f0ff; }
#bmr-threshold-note { margin: .55rem 0 0; color: #6a737e; font-size: .69rem; }

.tool-page--bmr .report-export-bar {
    border-color: #d5d5eb;
    background: radial-gradient(circle at 100% 0, rgb(101 88 184 / 11%), transparent 13rem), #fff;
}

@media (max-width: 760px) {
    .bmr-heading { align-items: flex-start; flex-direction: column; }
    .bmr-segmented,
    .bmr-select-grid { grid-template-columns: 1fr; }
    .bmr-input-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bmr-input-grid > div:last-child { grid-column: 1 / -1; }
    .bmr-metric-grid { grid-template-columns: 1fr; }
}

@media print {
    .tool-page--bmr .tool-intro-grid,
    .tool-page--bmr .bmr-layout > :first-child,
    .tool-page--bmr .bmr-copy-button,
    .tool-page--bmr .report-export-bar,
    .tool-page--bmr .post-tool-answer,
    .tool-page--bmr .content-grid { display: none !important; }
    .tool-page--bmr .bmr-workspace { padding: 0; background: #fff !important; border: 0; box-shadow: none; }
    .tool-page--bmr .bmr-layout { display: block; margin: 0; }
    .tool-page--bmr .bmr-results-panel { padding: 5mm; border: 1px solid #d5d5eb; }
    .tool-page--bmr .bmr-thresholds .table-scroll { max-height: none; overflow: visible; }
}

/* Food calorie log */
.food-calories-workspace {
    --food-teal: #13796f;
    --food-teal-dark: #0e5e57;
    --food-coral: #e8674f;
    border-color: #cae7df;
    background:
        radial-gradient(circle at 8% 5%, rgb(255 214 146 / 25%), transparent 12rem),
        radial-gradient(circle at 96% 3%, rgb(79 182 164 / 18%), transparent 14rem),
        linear-gradient(180deg, #fff 0%, #fffdf9 100%);
}

.food-calories-heading,
.food-calories-panel-heading,
.food-calories-log-heading,
.food-calories-progress-copy {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.food-calories-local-badge,
.food-calories-entry-count {
    display: inline-flex;
    min-height: 2rem;
    padding: .35rem .7rem;
    flex: 0 0 auto;
    align-items: center;
    gap: .42rem;
    color: #17675f;
    background: #effaf6;
    border: 1px solid #c4e6dc;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800;
}

.food-calories-local-badge > span {
    width: .48rem;
    height: .48rem;
    background: #20b486;
    border-radius: 50%;
    box-shadow: 0 0 0 .18rem rgb(32 180 134 / 13%);
}

.food-calories-layout {
    align-items: stretch;
}

.food-calories-input-panel,
.food-calories-results-panel {
    min-width: 0;
}

.food-calories-input-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.food-calories-panel-heading h3,
.food-calories-log-heading h4 {
    margin: 0;
}

.food-calories-panel-heading .workspace-kicker {
    margin-bottom: .2rem;
}

#food-calories-form {
    display: grid;
    gap: .9rem;
}

.food-calories-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}

.food-calories-field {
    display: grid;
    min-width: 0;
    gap: .38rem;
}

.food-calories-field--wide,
.food-calories-field--full {
    grid-column: 1 / -1;
}

.food-calories-field label,
.food-calories-goal-field label {
    color: #334b52;
    font-size: .8rem;
    font-weight: 800;
}

.food-calories-field input,
.food-calories-field select,
.food-calories-goal-field input {
    width: 100%;
    min-height: 2.85rem;
    padding: .65rem .75rem;
    color: #1f3340;
    background: #fff;
    border: 1px solid #cbdcdf;
    border-radius: .7rem;
    font: inherit;
}

.food-calories-field input:focus,
.food-calories-field select:focus,
.food-calories-goal-field input:focus {
    border-color: #3e9f91;
    outline: .2rem solid rgb(62 159 145 / 15%);
}

.food-calories-field small {
    color: #687b80;
    font-size: .73rem;
}

.food-calories-preview {
    display: flex;
    min-height: 3rem;
    padding: .7rem .85rem;
    align-items: center;
    color: #155f58;
    background: #f0faf7;
    border: 1px dashed #a8d9cc;
    border-radius: .75rem;
    font-size: .82rem;
    font-weight: 800;
}

.tool-page--food-calories .button-primary {
    border-color: var(--food-teal-dark);
    background: linear-gradient(135deg, #239a8d, var(--food-teal-dark));
    box-shadow: 0 .5rem 1rem rgb(14 94 87 / 17%);
}

.food-calories-medical-note {
    display: flex;
    margin-top: auto;
    padding: .9rem 1rem;
    gap: .7rem;
    color: #6b4b24;
    background: #fff9ed;
    border: 1px solid #eedbb7;
    border-radius: .85rem;
}

.food-calories-medical-note svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    fill: #d48a24;
}

.food-calories-medical-note strong {
    color: #7c5015;
}

.food-calories-medical-note p {
    margin: .22rem 0 0;
    font-size: .78rem;
}

.food-calories-total-card {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 1rem;
    gap: .25rem 1rem;
    align-items: center;
    background: linear-gradient(135deg, #effbf7, #fff8ec);
    border: 1px solid #cce7df;
    border-radius: 1rem;
}

.food-calories-total-card > span {
    color: #5b6f72;
    font-size: .78rem;
    font-weight: 750;
}

.food-calories-total-card > strong {
    color: var(--food-teal-dark);
    font-size: clamp(1.8rem, 4vw, 2.45rem);
    line-height: 1.1;
}

.food-calories-total-card > strong small {
    font-size: .8rem;
}

.food-calories-goal-field {
    display: grid;
    grid-column: 2;
    grid-row: 1 / span 2;
    gap: .35rem;
}

.food-calories-goal-field > div {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.food-calories-goal-field input {
    width: 7rem;
    min-height: 2.5rem;
}

.food-calories-goal-field span {
    color: #5b6f72;
    font-size: .76rem;
    font-weight: 750;
}

.food-calories-progress {
    height: .72rem;
    margin-top: .85rem;
    overflow: hidden;
    background: #e7efed;
    border-radius: 999px;
}

#food-calories-progress-bar {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #38ad92, #f0a34c, #eb6753);
    border-radius: inherit;
    transition: width .25s ease;
}

.food-calories-progress-copy {
    margin-top: .45rem;
    align-items: center;
    color: #576d71;
    font-size: .76rem;
}

.food-calories-progress-copy strong {
    color: var(--food-teal-dark);
    font-size: .9rem;
}

.food-calories-goal-note {
    margin: .75rem 0 0;
    padding: .65rem .75rem;
    color: #6f5a36;
    background: #fffbf3;
    border-radius: .65rem;
    font-size: .73rem;
}

.food-calories-meal-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .55rem;
    margin-top: .9rem;
}

.food-calories-meal-grid article {
    min-width: 0;
    padding: .7rem .55rem;
    background: #f8fbfa;
    border: 1px solid #dbe8e4;
    border-top: .18rem solid #64bca9;
    border-radius: .75rem;
    text-align: center;
}

.food-calories-meal-grid article:nth-child(2) { border-top-color: #efb65e; }
.food-calories-meal-grid article:nth-child(3) { border-top-color: #7e7ad8; }
.food-calories-meal-grid article:nth-child(4) { border-top-color: #ea7b67; }

.food-calories-meal-grid span {
    display: block;
    overflow: hidden;
    color: #6b7a7d;
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.food-calories-meal-grid strong {
    display: block;
    margin-top: .18rem;
    color: #243b42;
    font-size: .86rem;
}

.food-calories-log {
    margin-top: 1rem;
    padding-top: .85rem;
    border-top: 1px solid #dde8e5;
}

.food-calories-log-heading {
    align-items: center;
}

.food-calories-log-heading span,
#food-calories-empty {
    color: #728185;
    font-size: .75rem;
}

#food-calories-empty {
    margin: .8rem 0 0;
    padding: 1.1rem;
    background: #f8fbfa;
    border-radius: .7rem;
    text-align: center;
}

.food-calories-table-wrap {
    max-height: 20rem;
    margin-top: .7rem;
    border: 1px solid #dce8e5;
    border-radius: .75rem;
}

.food-calories-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .75rem;
}

.food-calories-table th,
.food-calories-table td {
    padding: .58rem .55rem;
    border-bottom: 1px solid #e4ecea;
    text-align: left;
}

.food-calories-table thead th {
    position: sticky;
    z-index: 1;
    top: 0;
    color: #40565b;
    background: #f1f7f5;
}

.food-calories-table tbody th strong,
.food-calories-table tbody th span {
    display: block;
}

.food-calories-table tbody th span {
    margin-top: .1rem;
    color: #77878a;
    font-size: .67rem;
    font-weight: 500;
}

.food-calories-table td:last-child {
    width: 2.4rem;
    padding-inline: .25rem;
}

.food-calories-table button,
.food-calories-text-button {
    color: #b44d42;
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 750;
}

.food-calories-table button {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: .45rem;
}

.food-calories-table button:hover,
.food-calories-table button:focus-visible {
    background: #fff0ee;
}

.food-calories-table button svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.food-calories-text-button:disabled {
    color: #9da9aa;
    cursor: default;
}

.tool-page--food-calories .report-export-bar {
    border-color: #cce5dd;
    background: radial-gradient(circle at 100% 0, rgb(68 164 145 / 12%), transparent 13rem), #fff;
}

@media (max-width: 760px) {
    .food-calories-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .food-calories-form-grid,
    .food-calories-total-card {
        grid-template-columns: 1fr;
    }

    .food-calories-goal-field {
        grid-column: 1;
        grid-row: auto;
        margin-top: .55rem;
    }

    .food-calories-goal-field input {
        width: 100%;
    }

    .food-calories-meal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media print {
    .tool-page--food-calories .tool-intro-grid,
    .tool-page--food-calories .food-calories-layout > :first-child,
    .tool-page--food-calories .food-calories-text-button,
    .tool-page--food-calories .food-calories-table th:last-child,
    .tool-page--food-calories .food-calories-table td:last-child,
    .tool-page--food-calories .report-export-bar,
    .tool-page--food-calories .post-tool-answer,
    .tool-page--food-calories .content-grid {
        display: none !important;
    }

    .tool-page--food-calories .food-calories-workspace {
        padding: 0;
        background: #fff !important;
        border: 0;
        box-shadow: none;
    }

    .tool-page--food-calories .food-calories-layout {
        display: block;
        margin: 0;
    }

    .tool-page--food-calories .food-calories-results-panel {
        padding: 5mm;
        border: 1px solid #cce5dd;
    }

    .tool-page--food-calories .food-calories-table-wrap {
        max-height: none;
        overflow: visible;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Text case and whitespace converter */
.tool-page--textconverter {
    --tool-accent: #7b4cc9;
    --tool-accent-strong: #5933a2;
    --tool-accent-soft: #f5efff;
}

.text-converter-workspace {
    background:
        radial-gradient(circle at 100% 0, rgb(123 76 201 / 10%), transparent 19rem),
        radial-gradient(circle at 0 100%, rgb(19 166 156 / 8%), transparent 17rem),
        #fff;
}

.text-converter-modes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: 1.2rem 0;
    padding: 0;
    border: 0;
}

.text-converter-modes legend {
    width: 100%;
    margin-bottom: .55rem;
    color: #526078;
    font-weight: 700;
}

.text-converter-mode {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 76px;
    padding: .9rem 1rem;
    cursor: pointer;
    background: rgb(255 255 255 / 86%);
    border: 1px solid #d8e1ee;
    border-radius: 16px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.text-converter-mode:hover { transform: translateY(-1px); }
.text-converter-mode:focus-within { outline: 3px solid rgb(123 76 201 / 20%); outline-offset: 2px; }
.text-converter-mode.is-active { border-color: #8d6ad0; box-shadow: 0 9px 22px rgb(96 57 164 / 13%); background: #f8f4ff; }
.text-converter-mode--warning.is-active { border-color: #dc8b40; background: #fff8ef; box-shadow: 0 9px 22px rgb(190 103 28 / 12%); }
.text-converter-mode input { flex: 0 0 auto; accent-color: var(--tool-accent); }
.text-converter-mode span { display: grid; gap: .15rem; min-width: 0; }
.text-converter-mode strong { color: #17233a; }
.text-converter-mode small { color: #66748b; line-height: 1.4; }

.text-converter-layout { align-items: stretch; }
.text-converter-layout > * { min-width: 0; }
.text-converter-panel { display: flex; flex-direction: column; min-height: 500px; }
.text-converter-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.text-converter-heading h3 { margin: .15rem 0 0; }
.text-converter-heading > span { flex: 0 0 auto; padding: .4rem .65rem; color: #5b3ca0; font-size: .82rem; background: #f5efff; border: 1px solid #e0d4f5; border-radius: 999px; }
.text-converter-panel textarea { width: 100%; min-height: 255px; padding: 1rem; resize: vertical; color: #17233a; line-height: 1.65; background: #fff; border: 1px solid #ccd8e8; border-radius: 14px; }
.text-converter-panel textarea:focus { outline: 3px solid rgb(123 76 201 / 15%); border-color: #8560c7; }
.text-converter-results textarea { background: #fbf9ff; }
.text-converter-actions { margin-top: 1rem; }
.tool-page--textconverter .button-primary { background: linear-gradient(135deg, #8254ce, #6138af); box-shadow: 0 8px 18px rgb(96 57 164 / 18%); }
.text-converter-copy { align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem; margin-top: .9rem; }
.text-converter-copy svg { width: 1rem; height: 1rem; fill: currentColor; }
.text-converter-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .75rem; }
.text-converter-metrics span { padding: .65rem .75rem; color: #5b667a; font-size: .86rem; background: #fff; border: 1px solid #e0e5ed; border-radius: 12px; }
.text-converter-metrics strong { color: #17233a; font-size: 1rem; }
.text-converter-note { margin-top: auto; padding: .8rem .9rem; color: #6e4a19; line-height: 1.55; background: #fff8ea; border: 1px solid #f1d9ab; border-radius: 13px; }
.tool-page--textconverter .report-export-bar { border-color: #ded3ef; background: radial-gradient(circle at 100% 0, rgb(123 76 201 / 12%), transparent 13rem), #fff; }

@media (max-width: 760px) {
    .text-converter-modes { grid-template-columns: 1fr; }
    .text-converter-mode { min-height: 0; }
    .text-converter-panel { min-height: 0; }
    .text-converter-panel textarea { min-height: 220px; }
}

@media print {
    .tool-page--textconverter .tool-intro-grid,
    .tool-page--textconverter .text-converter-modes,
    .tool-page--textconverter .text-converter-layout > :first-child,
    .tool-page--textconverter .report-export-bar,
    .tool-page--textconverter .post-tool-answer,
    .tool-page--textconverter .content-grid,
    .tool-page--textconverter .text-converter-copy,
    .tool-page--textconverter .text-converter-note {
        display: none !important;
    }

    .tool-page--textconverter .text-converter-workspace { padding: 0; background: #fff !important; border: 0; box-shadow: none; }
    .tool-page--textconverter .text-converter-layout { display: block; margin: 0; }
    .tool-page--textconverter .text-converter-results { min-height: 0; padding: 5mm; background: #f8f5ff !important; border: 1px solid #ded4fa; }
    .tool-page--textconverter .text-converter-results textarea { min-height: 90mm; resize: none; background: #fff !important; border: 1px solid #d8e1f0; }
}

/* Private QR Code generator */
.tool-page--qrcode {
    --tool-accent: #137f7b;
    --tool-accent-strong: #0d625f;
    --tool-accent-soft: #eaf9f7;
}

.qr-workspace { background: radial-gradient(circle at 100% 0, rgb(19 127 123 / 11%), transparent 20rem), radial-gradient(circle at 0 100%, rgb(255 181 57 / 9%), transparent 18rem), #fff; }
.qr-layout { align-items: stretch; }
.qr-layout > * { min-width: 0; }
.qr-input-panel,
.qr-result-panel { display: flex; flex-direction: column; min-height: 650px; }
.qr-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.qr-panel-heading h3 { margin: .15rem 0 0; }
.qr-panel-heading > span { flex: 0 0 auto; padding: .4rem .65rem; color: #146c68; font-size: .82rem; background: #eaf9f7; border: 1px solid #c9e9e5; border-radius: 999px; }
.qr-input-panel textarea { min-height: 200px; resize: vertical; line-height: 1.6; }
.qr-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: .9rem; }
.qr-input-actions { margin-top: 1rem; }
.tool-page--qrcode .button-primary { background: linear-gradient(135deg, #15938e, #0c6865); box-shadow: 0 8px 18px rgb(11 107 103 / 18%); }
.qr-privacy-note,
.qr-safety-note { margin-top: auto; padding: .8rem .9rem; line-height: 1.55; border-radius: 13px; }
.qr-privacy-note { color: #0c625f; background: #ebfaf7; border: 1px solid #c4e8e3; }
.qr-safety-note { color: #704b16; background: #fff8e9; border: 1px solid #efd7a8; }
.qr-svg-host { display: grid; place-items: center; width: min(100%, 390px); aspect-ratio: 1; margin: 0 auto; padding: 1rem; overflow: hidden; background: #fff; border: 1px solid #d8e2ea; border-radius: 18px; box-shadow: inset 0 0 0 6px #f5f9fa; }
.qr-svg-host > svg { width: 100%; height: 100%; }
.qr-placeholder { display: grid; place-items: center; gap: .8rem; max-width: 18rem; color: #66748b; text-align: center; }
.qr-placeholder svg { width: 7rem; fill: #c7d3dd; }
.qr-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; margin: .9rem 0 0; }
.qr-metrics div { padding: .65rem .55rem; text-align: center; background: #f7fafb; border: 1px solid #dde5eb; border-radius: 12px; }
.qr-metrics dt { color: #68758b; font-size: .75rem; }
.qr-metrics dd { margin: .2rem 0 0; color: #17233a; font-weight: 800; }
.qr-download-actions { justify-content: center; margin-top: .85rem; }
.qr-download-actions .button { min-width: 0; }
.qr-ready-badge { white-space: nowrap; }
.tool-page--qrcode .report-export-bar { border-color: #c9e4e2; background: radial-gradient(circle at 100% 0, rgb(19 127 123 / 12%), transparent 13rem), #fff; }

@media (max-width: 760px) {
    .qr-input-panel,
    .qr-result-panel { min-height: 0; }
    .qr-options { grid-template-columns: 1fr; }
    .qr-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qr-svg-host { width: min(100%, 340px); }
}

@media print {
    .tool-page--qrcode .tool-intro-grid,
    .tool-page--qrcode .qr-layout > :first-child,
    .tool-page--qrcode .report-export-bar,
    .tool-page--qrcode .post-tool-answer,
    .tool-page--qrcode .content-grid,
    .tool-page--qrcode .qr-download-actions,
    .tool-page--qrcode .qr-download-status,
    .tool-page--qrcode .qr-safety-note { display: none !important; }
    .tool-page--qrcode .qr-workspace { padding: 0; background: #fff !important; border: 0; box-shadow: none; }
    .tool-page--qrcode .qr-layout { display: block; margin: 0; }
    .tool-page--qrcode .qr-result-panel { min-height: 0; padding: 5mm; background: #f5fbfa !important; border: 1px solid #c9e4e2; }
    .tool-page--qrcode .qr-svg-host { width: 105mm; padding: 0; border: 0; box-shadow: none; }
}

/* Instagram display-name and fancy-text generator */
.tool-page--instagram {
    --tool-accent: #a63d79;
    --tool-accent-strong: #7c2858;
    --tool-accent-soft: #fff0f7;
}

.instagram-workspace {
    background:
        radial-gradient(circle at 100% 0, rgb(166 61 121 / 12%), transparent 20rem),
        radial-gradient(circle at 0 100%, rgb(243 145 63 / 10%), transparent 18rem),
        #fff;
}

.instagram-layout {
    align-items: stretch;
}

.instagram-layout > * {
    min-width: 0;
}

.instagram-input-panel,
.instagram-results {
    display: flex;
    flex-direction: column;
    min-height: 655px;
    gap: 1rem;
    border-color: #ead6e2;
    box-shadow: 0 12px 30px rgb(126 40 88 / 8%);
}

.instagram-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.instagram-panel-heading h3 {
    margin: .15rem 0 0;
}

.instagram-counter {
    flex: 0 0 auto;
    padding: .35rem .65rem;
    color: #8b3365;
    background: #fff0f7;
    border: 1px solid #efcfe0;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
}

.instagram-text-field {
    display: block;
}

.instagram-text-field textarea {
    width: 100%;
    min-height: 12rem;
    padding: 1rem;
    resize: vertical;
    color: #2d2030;
    background: #fffafd;
    border: 1px solid #ddcbd5;
    border-radius: .9rem;
    font: inherit;
    font-size: 1.05rem;
    line-height: 1.65;
}

.instagram-text-field textarea:focus {
    border-color: #a63d79;
    box-shadow: 0 0 0 .2rem rgb(166 61 121 / 13%);
    outline: 0;
}

.instagram-actions .button {
    flex: 1;
}

.tool-page--instagram .button-primary {
    border-color: #8a2f64;
    background: linear-gradient(135deg, #bb4b88, #8a2f64);
    box-shadow: 0 .5rem 1rem rgb(142 48 102 / 20%);
}

.instagram-destination-note {
    margin-top: auto;
    padding: .9rem 1rem;
    color: #604455;
    background: #fff8fb;
    border: 1px solid #ead7e1;
    border-radius: .9rem;
}

.instagram-destination-note > strong {
    display: block;
    margin-bottom: .45rem;
    color: #62304e;
}

.instagram-destination-note dl {
    display: grid;
    gap: .45rem;
    margin: 0;
}

.instagram-destination-note dl div {
    display: grid;
    grid-template-columns: minmax(7rem, .7fr) minmax(0, 1.3fr);
    gap: .65rem;
    padding-top: .45rem;
    border-top: 1px solid #f0e3e9;
}

.instagram-destination-note dt {
    font-weight: 760;
}

.instagram-destination-note dd {
    margin: 0;
    font-size: .82rem;
}

.instagram-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.instagram-filters button {
    min-height: 2.25rem;
    padding: .38rem .72rem;
    color: #624e60;
    background: #fff;
    border: 1px solid #e1d5dc;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: .8rem;
    font-weight: 720;
}

.instagram-filters button:hover,
.instagram-filters button:focus-visible {
    border-color: #b55a8d;
    outline: 0;
}

.instagram-filters button.is-active {
    color: #fff;
    background: #98386f;
    border-color: #98386f;
    box-shadow: 0 .3rem .7rem rgb(152 56 111 / 18%);
}

.instagram-visible-count {
    min-height: 1.35rem;
    margin: -.2rem 0 0;
    color: #6d6071;
    font-size: .82rem;
}

.instagram-result-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    max-height: 30rem;
    padding-right: .2rem;
    overflow: auto;
}

.instagram-result-card {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 6rem;
    padding: .8rem 3rem .85rem .9rem;
    align-content: start;
    gap: .4rem;
    cursor: pointer;
    background: #fff;
    border: 1px solid #eadfe5;
    border-radius: .85rem;
    box-shadow: 0 5px 14px rgb(47 31 44 / 5%);
}

.instagram-result-card:nth-child(3n + 2) {
    background: #fff8f1;
    border-color: #f0dfcf;
}

.instagram-result-card:nth-child(3n + 3) {
    background: #f7f8ff;
    border-color: #dde1f0;
}

.instagram-result-card:hover,
.instagram-result-card:focus-visible {
    border-color: #c26f9f;
    box-shadow: 0 8px 18px rgb(166 61 121 / 13%);
    outline: 0;
}

.instagram-style-meta {
    color: #75677a;
    font-size: .73rem;
    font-weight: 750;
}

.instagram-variant-value {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    color: #2d2030;
    font-family: "Noto Sans Thai", "Segoe UI Symbol", sans-serif;
    font-size: clamp(.96rem, 1.75vw, 1.16rem);
    font-weight: 650;
    line-height: 1.5;
}

.instagram-copy {
    position: absolute;
    top: .65rem;
    right: .65rem;
    display: grid;
    width: 2rem;
    height: 2rem;
    padding: 0;
    place-items: center;
    color: #96376d;
    background: #fff0f7;
    border: 1px solid #edcfe0;
    border-radius: .6rem;
    cursor: pointer;
}

.instagram-copy svg {
    width: .9rem;
    height: .9rem;
    fill: currentcolor;
}

.instagram-safety {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .9rem;
    border-color: #ecdcb9;
    background: radial-gradient(circle at 100% 0, rgb(240 159 69 / 10%), transparent 14rem), #fffdf8;
}

.instagram-safety h3,
.instagram-safety p {
    margin: .15rem 0 0;
}

.instagram-safety-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    color: #9a5b12;
    background: #fff3d7;
    border-radius: .9rem;
}

.instagram-safety-icon svg {
    width: 1.65rem;
    fill: currentcolor;
}

.tool-page--instagram .report-export-bar {
    border-color: #ead3df;
    background: radial-gradient(circle at 100% 0, rgb(166 61 121 / 12%), transparent 13rem), #fff;
}

@media (max-width: 760px) {
    .instagram-input-panel,
    .instagram-results {
        min-height: 0;
    }

    .instagram-result-list {
        grid-template-columns: 1fr;
        max-height: 31rem;
    }

    .instagram-destination-note dl div {
        grid-template-columns: 1fr;
        gap: .15rem;
    }
}

@media print {
    .tool-page--instagram .tool-intro-grid,
    .tool-page--instagram .instagram-layout > :first-child,
    .tool-page--instagram .instagram-filters,
    .tool-page--instagram .instagram-visible-count,
    .tool-page--instagram .instagram-safety,
    .tool-page--instagram .report-export-bar,
    .tool-page--instagram .post-tool-answer,
    .tool-page--instagram .content-grid,
    .tool-page--instagram .instagram-copy {
        display: none !important;
    }

    .tool-page--instagram .instagram-workspace {
        padding: 0;
        background: #fff !important;
        border: 0;
        box-shadow: none;
    }

    .tool-page--instagram .instagram-layout {
        display: block;
        margin: 0;
    }

    .tool-page--instagram .instagram-results {
        min-height: 0;
        padding: 5mm;
        background: #fff8fb !important;
        border: 1px solid #ead3df;
    }

    .tool-page--instagram .instagram-result-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: none;
        overflow: visible;
    }

    .tool-page--instagram .instagram-result-card {
        min-height: 0;
        padding: 3mm;
        break-inside: avoid;
    }
}

/* Searchable special-symbol collection */
.tool-page--symbol {
    --tool-accent: #5b4bb7;
    --tool-accent-strong: #41338f;
    --tool-accent-soft: #f2efff;
}

.symbol-workspace {
    background:
        radial-gradient(circle at 100% 0, rgb(91 75 183 / 12%), transparent 21rem),
        radial-gradient(circle at 0 100%, rgb(31 167 144 / 9%), transparent 18rem),
        #fff;
}

.symbol-layout {
    align-items: stretch;
}

.symbol-layout > * {
    min-width: 0;
}

.symbol-controls,
.symbol-results {
    display: flex;
    flex-direction: column;
    min-height: 720px;
    gap: 1rem;
    border-color: #ddd8f0;
    box-shadow: 0 12px 30px rgb(65 51 143 / 7%);
}

.symbol-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.symbol-panel-heading h3 {
    margin: .15rem 0 0;
}

.symbol-counter {
    flex: 0 0 auto;
    padding: .35rem .65rem;
    color: #4e4198;
    background: #f2efff;
    border: 1px solid #dcd4ff;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
}

.symbol-search-field {
    position: relative;
    display: block;
}

.symbol-search-field svg {
    position: absolute;
    top: 50%;
    left: .9rem;
    width: 1rem;
    height: 1rem;
    fill: #756b9f;
    transform: translateY(-50%);
    pointer-events: none;
}

.symbol-search-field input {
    width: 100%;
    min-height: 3rem;
    padding: .7rem 1rem .7rem 2.65rem;
    color: #25213d;
    background: #fbfaff;
    border: 1px solid #d7d1e8;
    border-radius: .85rem;
    font: inherit;
}

.symbol-search-field input:focus {
    border-color: #6b59c4;
    box-shadow: 0 0 0 .2rem rgb(91 75 183 / 13%);
    outline: 0;
}

.symbol-clear-search {
    align-self: flex-start;
}

.symbol-filter-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
}

.symbol-filter-list button {
    display: flex;
    min-width: 0;
    min-height: 2.65rem;
    padding: .5rem .6rem;
    align-items: center;
    gap: .4rem;
    overflow-wrap: anywhere;
    color: #514a69;
    background: #fff;
    border: 1px solid #e0ddec;
    border-radius: .75rem;
    cursor: pointer;
    font: inherit;
    font-size: .76rem;
    font-weight: 720;
    text-align: left;
}

.symbol-filter-list button span {
    display: grid;
    flex: 0 0 auto;
    width: 1.55rem;
    height: 1.55rem;
    place-items: center;
    color: #584aa9;
    background: #f3f1ff;
    border-radius: .45rem;
}

.symbol-filter-list button:hover,
.symbol-filter-list button:focus-visible {
    border-color: #7b6bca;
    outline: 0;
}

.symbol-filter-list button.is-active {
    color: #fff;
    background: linear-gradient(135deg, #6655bc, #463895);
    border-color: #5141a3;
    box-shadow: 0 .35rem .8rem rgb(81 65 163 / 18%);
}

.symbol-filter-list button.is-active span {
    color: #fff;
    background: rgb(255 255 255 / 16%);
}

.symbol-compatibility-note {
    margin-top: auto;
    padding: .9rem 1rem;
    color: #594d36;
    background: #fffaf0;
    border: 1px solid #ebdfc8;
    border-radius: .9rem;
}

.symbol-compatibility-note strong {
    color: #714f15;
}

.symbol-compatibility-note p {
    margin: .25rem 0 0;
    font-size: .82rem;
}

.symbol-result-count {
    min-height: 1.35rem;
    margin: -.25rem 0 0;
    color: #6d6780;
    font-size: .82rem;
}

.symbol-result-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    max-height: 34rem;
    padding-right: .2rem;
    overflow: auto;
}

.symbol-result-card {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 7.1rem;
    background: #fff;
    border: 1px solid #e1deeb;
    border-radius: .85rem;
    box-shadow: 0 5px 14px rgb(48 42 77 / 5%);
}

.symbol-result-card:nth-child(3n + 2) {
    background: #fffaf4;
    border-color: #eee0cf;
}

.symbol-result-card:nth-child(3n + 3) {
    background: #f5fcfa;
    border-color: #d5eae5;
}

.symbol-result-card:focus-within,
.symbol-result-card:hover {
    border-color: #7766c5;
    box-shadow: 0 8px 18px rgb(91 75 183 / 12%);
}

.symbol-card-copy {
    display: grid;
    width: 100%;
    min-width: 0;
    padding: .8rem 2.85rem .8rem .85rem;
    align-content: start;
    gap: .18rem;
    color: #27233f;
    background: transparent;
    border: 0;
    border-radius: .85rem;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.symbol-card-copy:focus-visible {
    box-shadow: inset 0 0 0 3px rgb(91 75 183 / 28%);
    outline: 0;
}

.symbol-card-copy strong {
    display: block;
    min-width: 0;
    min-height: 2.5rem;
    overflow-wrap: anywhere;
    font-family: "Noto Sans Thai", "Segoe UI Symbol", sans-serif;
    font-size: 1.28rem;
    font-weight: 650;
    line-height: 1.5;
}

.symbol-card-copy span {
    overflow: hidden;
    font-size: .82rem;
    font-weight: 740;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.symbol-card-copy small {
    color: #797286;
    font-size: .7rem;
}

.symbol-card-toggle {
    position: absolute;
    top: .65rem;
    right: .65rem;
    display: grid;
    width: 2rem;
    height: 2rem;
    padding: 0;
    place-items: center;
    color: #5645ae;
    background: #f2efff;
    border: 1px solid #d9d1ff;
    border-radius: .62rem;
    cursor: pointer;
    font: 800 1.12rem/1 "Noto Sans Thai", sans-serif;
}

.symbol-card-toggle[aria-pressed="true"] {
    color: #fff;
    background: #2f937f;
    border-color: #2f937f;
}

.symbol-card-toggle:focus-visible {
    outline: 3px solid rgb(91 75 183 / 25%);
    outline-offset: 2px;
}

.symbol-results .analysis-status {
    min-height: 1.35rem;
    margin: auto 0 0;
}

.symbol-selection {
    border-color: #d7e9e4;
    background: radial-gradient(circle at 100% 0, rgb(31 167 144 / 10%), transparent 14rem), #fbfffe;
}

.symbol-selection .section-heading {
    align-items: flex-start;
}

.symbol-selection .section-heading h3,
.symbol-selection > p {
    margin: .15rem 0 0;
}

.symbol-selection-list {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1rem;
}

.symbol-selection-entry {
    min-width: 0;
}

.symbol-selection-chip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 2.6rem;
    max-width: 18rem;
    padding: .45rem .65rem;
    align-items: center;
    gap: .5rem;
    color: #34443f;
    background: #fff;
    border: 1px solid #cfe2dc;
    border-radius: .75rem;
    cursor: pointer;
    font: inherit;
}

.symbol-selection-chip strong {
    max-width: 8rem;
    overflow: hidden;
    font-family: "Noto Sans Thai", "Segoe UI Symbol", sans-serif;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.symbol-selection-chip span {
    overflow: hidden;
    font-size: .76rem;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.symbol-selection-chip b {
    color: #8f4d56;
    font-size: 1.05rem;
}

.symbol-selection-chip:hover,
.symbol-selection-chip:focus-visible {
    border-color: #4c9d89;
    outline: 0;
    box-shadow: 0 0 0 .18rem rgb(47 147 127 / 13%);
}

.tool-page--symbol .report-export-bar {
    border-color: #ddd7f0;
    background: radial-gradient(circle at 100% 0, rgb(91 75 183 / 12%), transparent 13rem), #fff;
}

@media (max-width: 760px) {
    .symbol-controls,
    .symbol-results {
        min-height: 0;
    }

    .symbol-filter-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .symbol-result-list {
        grid-template-columns: 1fr;
        max-height: 32rem;
    }

    .symbol-selection .section-heading {
        align-items: stretch;
    }
}

@media (max-width: 390px) {
    .symbol-filter-list {
        grid-template-columns: 1fr;
    }
}

@media print {
    .tool-page--symbol .tool-intro-grid,
    .tool-page--symbol .symbol-layout,
    .tool-page--symbol .symbol-selection > :not(.symbol-selection-list),
    .tool-page--symbol .report-export-bar,
    .tool-page--symbol .post-tool-answer,
    .tool-page--symbol .content-grid,
    .tool-page--symbol .symbol-selection-chip b {
        display: none !important;
    }

    .tool-page--symbol .symbol-workspace {
        padding: 0;
        background: #fff !important;
        border: 0;
        box-shadow: none;
    }

    .tool-page--symbol .symbol-selection {
        padding: 5mm;
        background: #fff !important;
        border: 1px solid #d7e9e4;
    }

    .tool-page--symbol .symbol-selection-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tool-page--symbol .symbol-selection-chip {
        width: 100%;
        max-width: none;
        break-inside: avoid;
    }
}

/* SRT / VTT subtitle cleaner */
.tool-page--subtitles-tool {
    --tool-accent: #197b8d;
    --tool-accent-strong: #115766;
    --tool-accent-soft: #eaf9fb;
}

.subtitles-workspace {
    background:
        radial-gradient(circle at 100% 0, rgb(25 123 141 / 12%), transparent 21rem),
        radial-gradient(circle at 0 100%, rgb(244 165 63 / 9%), transparent 18rem),
        #fff;
}

.subtitles-layout {
    align-items: stretch;
}

.subtitles-layout > * {
    min-width: 0;
}

.subtitles-input-panel,
.subtitles-results-panel {
    display: flex;
    flex-direction: column;
    min-height: 780px;
    gap: 1rem;
    border-color: #d4e6e9;
    box-shadow: 0 12px 30px rgb(17 87 102 / 7%);
}

.subtitles-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.subtitles-panel-heading h3 {
    margin: .15rem 0 0;
}

.subtitles-limit-badge {
    flex: 0 0 auto;
    padding: .35rem .65rem;
    color: #176878;
    background: #eaf9fb;
    border: 1px solid #c8e7eb;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 800;
}

.subtitles-source-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
    padding: .35rem;
    background: #edf4f5;
    border-radius: .85rem;
}

.subtitles-source-switch button {
    min-height: 2.65rem;
    padding: .55rem .75rem;
    color: #54646a;
    background: transparent;
    border: 0;
    border-radius: .65rem;
    cursor: pointer;
    font: inherit;
    font-size: .82rem;
    font-weight: 750;
}

.subtitles-source-switch button.is-active {
    color: #fff;
    background: linear-gradient(135deg, #23899a, #146676);
    box-shadow: 0 .35rem .75rem rgb(20 102 118 / 18%);
}

.subtitles-source-switch button:focus-visible {
    outline: 3px solid rgb(25 123 141 / 22%);
    outline-offset: 2px;
}

.subtitles-source-panel > label:not(.subtitles-drop-zone),
.subtitles-output-field > span {
    display: block;
    margin-bottom: .4rem;
    color: #52626a;
    font-size: .78rem;
    font-weight: 760;
}

#subtitles-input,
#subtitles-output {
    width: 100%;
    padding: .9rem;
    resize: vertical;
    color: #172b33;
    background: #fbfefe;
    border: 1px solid #cddfe2;
    border-radius: .85rem;
    font: .91rem/1.6 "Noto Sans Thai", ui-monospace, monospace;
}

#subtitles-input {
    min-height: 12.2rem;
}

#subtitles-output {
    min-height: 25rem;
    resize: none;
    background: #f7fbfb;
}

#subtitles-input:focus,
#subtitles-output:focus {
    border-color: #25879a;
    box-shadow: 0 0 0 .2rem rgb(25 123 141 / 13%);
    outline: 0;
}

.subtitles-paste-actions {
    margin-top: .65rem;
}

.subtitles-drop-zone {
    display: grid;
    min-height: 10.5rem;
    padding: 1.2rem;
    place-items: center;
    align-content: center;
    gap: .35rem;
    color: #365b63;
    background: #f6fcfd;
    border: 2px dashed #a8d3da;
    border-radius: 1rem;
    cursor: pointer;
    text-align: center;
}

.subtitles-drop-zone:hover {
    border-color: #298a9a;
    background: #eefbfc;
}

.subtitles-drop-zone svg {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: .25rem;
    fill: #218296;
}

.subtitles-drop-zone span {
    color: #6b7d82;
    font-size: .76rem;
}

#subtitles-files {
    width: 100%;
    margin-top: .6rem;
    color: #53686d;
    font: inherit;
    font-size: .8rem;
}

#subtitles-files::file-selector-button {
    min-height: 2.35rem;
    margin-right: .6rem;
    padding: .4rem .7rem;
    color: #176878;
    background: #eaf9fb;
    border: 1px solid #bddfe4;
    border-radius: .6rem;
    cursor: pointer;
    font: inherit;
    font-weight: 750;
}

.subtitles-file-list {
    display: grid;
    gap: .4rem;
    max-height: 8.5rem;
    margin-top: .7rem;
    overflow: auto;
}

.subtitles-file-list > div {
    display: flex;
    min-width: 0;
    padding: .55rem .7rem;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    background: #f7fbfb;
    border: 1px solid #dce9eb;
    border-radius: .65rem;
    font-size: .76rem;
}

.subtitles-file-list strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subtitles-file-list p {
    margin: 0;
    color: #728187;
    font-size: .78rem;
}

.subtitles-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin: 0;
    padding: .85rem;
    border: 1px solid #dce8ea;
    border-radius: .9rem;
}

.subtitles-options legend {
    padding: 0 .35rem;
    color: #38565e;
    font-size: .84rem;
    font-weight: 800;
}

.subtitles-options label {
    display: flex;
    min-width: 0;
    min-height: 2.65rem;
    padding: .55rem .65rem;
    align-items: center;
    gap: .5rem;
    color: #3d5056;
    background: #f9fcfc;
    border: 1px solid #e1eaec;
    border-radius: .65rem;
    cursor: pointer;
    font-size: .76rem;
    font-weight: 680;
}

.subtitles-options label:has(input:checked) {
    color: #175f6d;
    background: #eefafa;
    border-color: #bce0e5;
}

.subtitles-options label.subtitles-option-warning:has(input:checked) {
    color: #7d5012;
    background: #fff9ec;
    border-color: #eed9ae;
}

.subtitles-options input {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    accent-color: #197b8d;
}

.subtitles-accessibility-note {
    padding: .85rem 1rem;
    color: #664c27;
    background: #fffaf0;
    border: 1px solid #ead9b8;
    border-radius: .85rem;
}

.subtitles-accessibility-note strong {
    color: #795213;
}

.subtitles-accessibility-note p {
    margin: .25rem 0 0;
    font-size: .8rem;
}

.subtitles-process-actions {
    margin-top: auto;
}

.tool-page--subtitles-tool .button-primary {
    border-color: #126677;
    background: linear-gradient(135deg, #238b9d, #146676);
    box-shadow: 0 .5rem 1rem rgb(20 102 118 / 18%);
}

.subtitles-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .55rem;
}

.subtitles-metrics > div {
    min-width: 0;
    padding: .65rem;
    background: #f2fafb;
    border: 1px solid #d7e9ec;
    border-radius: .75rem;
    text-align: center;
}

.subtitles-metrics span {
    display: block;
    overflow: hidden;
    color: #687b81;
    font-size: .66rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subtitles-metrics strong {
    display: block;
    margin-top: .2rem;
    color: #175f6d;
    font-size: 1.25rem;
}

.subtitles-output-field {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
}

.subtitles-output-field textarea {
    flex: 1;
}

.subtitles-print-output {
    display: none;
}

.subtitles-result-actions .button {
    flex: 1;
}

#subtitles-result-note {
    margin: 0;
    padding: .75rem .85rem;
    color: #6c5838;
    background: #fffaf1;
    border-radius: .7rem;
    font-size: .78rem;
}

.tool-page--subtitles-tool .report-export-bar {
    border-color: #cfe4e7;
    background: radial-gradient(circle at 100% 0, rgb(25 123 141 / 12%), transparent 13rem), #fff;
}

@media (max-width: 760px) {
    .subtitles-input-panel,
    .subtitles-results-panel {
        min-height: 0;
    }

    .subtitles-options {
        grid-template-columns: 1fr;
    }

    .subtitles-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #subtitles-output {
        min-height: 20rem;
    }
}

@media print {
    .tool-page--subtitles-tool .tool-intro-grid,
    .tool-page--subtitles-tool .subtitles-layout > :first-child,
    .tool-page--subtitles-tool .subtitles-result-actions,
    .tool-page--subtitles-tool .report-export-bar,
    .tool-page--subtitles-tool .post-tool-answer,
    .tool-page--subtitles-tool .content-grid {
        display: none !important;
    }

    .tool-page--subtitles-tool .subtitles-workspace {
        padding: 0;
        background: #fff !important;
        border: 0;
        box-shadow: none;
    }

    .tool-page--subtitles-tool .subtitles-layout {
        display: block;
        margin: 0;
    }

    .tool-page--subtitles-tool .subtitles-results-panel {
        min-height: 0;
        padding: 5mm;
        border: 1px solid #cfe4e7;
    }

    .tool-page--subtitles-tool #subtitles-output {
        display: none;
    }

    .tool-page--subtitles-tool .subtitles-print-output {
        display: block;
        margin: 0;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        font: 9pt/1.5 "Noto Sans Thai", sans-serif;
    }
}

/* Random number and name draw */
.tool-page--random-draw { --accent: #6657c8; --accent-strong: #4d409e; --accent-soft: #f0efff; }
.random-draw-workspace { background: radial-gradient(circle at 100% 0, rgb(102 87 200 / 12%), transparent 22rem), linear-gradient(145deg, #fff, #fbfaff); border-color: #ddd9f5; }
.random-draw-heading,
.random-draw-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.random-draw-heading > div,
.random-draw-panel-heading > div { min-width: 0; }
.random-draw-heading p,
.random-draw-panel-heading p,
.random-draw-panel-heading h3 { margin: 0; }
.random-draw-heading > div > p:last-child { margin-top: .35rem; color: #686379; }
.random-draw-local-badge,
.random-draw-panel-heading > span { display: inline-flex; min-height: 1.9rem; padding: .35rem .65rem; align-items: center; gap: .4rem; color: #554c91; background: #f5f3ff; border: 1px solid #dcd6f5; border-radius: 999px; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.random-draw-local-badge span { width: .48rem; height: .48rem; background: #24b88a; border-radius: 50%; box-shadow: 0 0 0 .2rem rgb(36 184 138 / 12%); }
.random-draw-layout { align-items: stretch; }
.random-draw-input-panel,
.random-draw-results-panel { display: flex; min-width: 0; min-height: 47rem; flex-direction: column; gap: 1rem; }
.random-draw-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .25rem; gap: .25rem; background: #efedf9; border-radius: .8rem; }
.random-draw-tabs button { min-height: 2.6rem; padding: .55rem .75rem; color: #655f75; background: transparent; border: 0; border-radius: .6rem; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 800; }
.random-draw-tabs button.is-active { color: #51449e; background: #fff; box-shadow: 0 .2rem .65rem rgb(57 45 110 / 10%); }
.random-draw-mode-panel { display: flex; min-width: 0; padding: 1rem; flex-direction: column; gap: .8rem; background: #fbfaff; border: 1px solid #e4e0f2; border-radius: .9rem; }
.random-draw-mode-panel[hidden] { display: none; }
.random-draw-number-grid,
.random-draw-name-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.random-draw-name-options { grid-template-columns: .7fr 1.3fr; }
.random-draw-number-grid label,
.random-draw-name-options label { display: flex; min-width: 0; flex-direction: column; gap: .35rem; color: #4f4a5e; font-size: .75rem; font-weight: 760; }
.random-draw-number-grid input,
.random-draw-name-options input,
.random-draw-name-options select { width: 100%; min-width: 0; min-height: 2.8rem; padding: .6rem .7rem; color: #282532; background: #fff; border: 1px solid #d6d0e4; border-radius: .68rem; font: inherit; font-size: .82rem; font-weight: 700; }
.random-draw-number-grid input:focus,
.random-draw-name-options input:focus,
.random-draw-name-options select:focus,
#random-draw-names:focus { border-color: #7567ca; box-shadow: 0 0 0 .2rem rgb(117 103 202 / 13%); outline: 0; }
.random-draw-mode-panel > p { margin: 0; color: #746f80; font-size: .72rem; }
.random-draw-name-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: #4f4a5e; font-size: .78rem; font-weight: 800; }
.random-draw-name-heading button { min-height: 2.1rem; padding: .35rem .65rem; color: #57499f; background: #f2f0ff; border: 1px solid #d7d1ef; border-radius: .6rem; cursor: pointer; font: inherit; font-size: .72rem; font-weight: 800; }
#random-draw-names { width: 100%; min-height: 13.5rem; padding: .8rem; resize: vertical; color: #2c2834; background: #fff; border: 1px solid #d6d0e4; border-radius: .72rem; font: inherit; font-size: .8rem; line-height: 1.55; }
#random-draw-name-summary { color: #69627b; }
.random-draw-boundary-note { display: flex; padding: .9rem; align-items: flex-start; gap: .7rem; color: #674d2f; background: #fff9ee; border: 1px solid #ead9b8; border-radius: .85rem; }
.random-draw-boundary-note svg { width: 1.25rem; flex: 0 0 auto; fill: #d4882e; }
.random-draw-boundary-note strong { color: #79501d; }
.random-draw-boundary-note p { margin: .2rem 0 0; font-size: .75rem; }
.random-draw-actions { margin-top: auto; }
.tool-page--random-draw .button-primary { border-color: #5144a1; background: linear-gradient(135deg, #7767d2, #5143a0); box-shadow: 0 .5rem 1rem rgb(81 67 160 / 20%); }
.random-draw-copy-button { display: inline-flex; min-height: 2.25rem; padding: .45rem .7rem; align-items: center; gap: .35rem; color: #594b9e; background: #f5f3ff; border: 1px solid #d9d3f1; border-radius: .65rem; cursor: pointer; font: inherit; font-size: .75rem; font-weight: 800; }
.random-draw-copy-button svg { width: 1rem; fill: currentColor; }
.random-draw-copy-button:disabled { opacity: .5; cursor: not-allowed; }
.random-draw-empty { display: grid; min-height: 10rem; padding: 1rem; place-items: center; align-content: center; color: #6f6980; background: #f8f7fc; border: 1px dashed #cdc7de; border-radius: .9rem; text-align: center; }
.random-draw-empty[hidden] { display: none; }
.random-draw-empty span { font-size: 2.3rem; }
.random-draw-empty strong { color: #4d465d; }
.random-draw-empty p { margin: .2rem 0 0; font-size: .77rem; }
.random-draw-result-meta { padding: .8rem .9rem; color: #514a66; background: #f2f0fc; border-radius: .75rem; }
.random-draw-result-meta p { margin: 0; font-size: .8rem; font-weight: 800; }
.random-draw-result-meta span { display: block; margin-top: .2rem; color: #746c88; font-size: .68rem; }
.random-draw-results { display: grid; max-height: 17rem; margin: 0; padding: 0; gap: .5rem; overflow: auto; list-style: none; }
.random-draw-results[hidden] { display: none; }
.random-draw-results li { display: grid; min-width: 0; min-height: 3rem; padding: .55rem .7rem; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; gap: .55rem; background: #fff; border: 1px solid #e0dceb; border-radius: .72rem; }
.random-draw-results span { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; color: #fff; background: #6556ba; border-radius: 50%; font-size: .72rem; font-weight: 850; }
.random-draw-results strong { min-width: 0; overflow-wrap: anywhere; color: #2d2937; font-size: .95rem; }
.random-draw-history-panel { display: flex; min-height: 0; padding-top: .9rem; flex: 1; flex-direction: column; border-top: 1px solid #e6e1eb; }
.random-draw-history-panel > div { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.random-draw-history-panel h4 { margin: 0; color: #443f50; font-size: .88rem; }
.random-draw-history-panel button { padding: .3rem .55rem; color: #766a86; background: #fff; border: 1px solid #dcd6e3; border-radius: .5rem; cursor: pointer; font: inherit; font-size: .68rem; font-weight: 800; }
.random-draw-history-panel button:disabled { opacity: .45; cursor: not-allowed; }
.random-draw-history { display: grid; max-height: 13.5rem; margin: .7rem 0 0; padding: 0; gap: .45rem; overflow: auto; list-style: none; }
.random-draw-history li { min-width: 0; padding: .6rem .7rem; background: #faf9fc; border: 1px solid #e7e2eb; border-radius: .65rem; }
.random-draw-history li > div { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.random-draw-history strong { color: #50495b; font-size: .72rem; }
.random-draw-history small { color: #8a8392; font-size: .63rem; }
.random-draw-history p { margin: .25rem 0 0; overflow: hidden; color: #696171; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.random-draw-history-empty { color: #8a8490; text-align: center; }
.tool-page--random-draw .report-export-bar { border-color: #ddd8f0; background: radial-gradient(circle at 100% 0, rgb(102 87 200 / 11%), transparent 14rem), #fff; }
@media (max-width: 920px) { .random-draw-number-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
    .random-draw-heading { flex-direction: column; }
    .random-draw-input-panel,
    .random-draw-results-panel { min-height: 0; }
    .random-draw-name-options { grid-template-columns: 1fr; }
    .random-draw-history { max-height: 18rem; }
}
@media print {
    .tool-page--random-draw .tool-intro-grid,
    .tool-page--random-draw .random-draw-layout > :first-child,
    .tool-page--random-draw .random-draw-copy-button,
    .tool-page--random-draw .random-draw-history-panel,
    .tool-page--random-draw .report-export-bar,
    .tool-page--random-draw .post-tool-answer,
    .tool-page--random-draw .content-grid { display: none !important; }
    .tool-page--random-draw .random-draw-workspace { padding: 0; background: #fff !important; border: 0; box-shadow: none; }
    .tool-page--random-draw .random-draw-layout { display: block; margin: 0; }
    .tool-page--random-draw .random-draw-results-panel { min-height: 0; padding: 5mm; border: 1px solid #d8d2e5; }
    .tool-page--random-draw .random-draw-results { max-height: none; overflow: visible; }
}

/* Random name wheel */
.tool-page--spin-wheel { --tool-accent: #5c4fa6; --tool-accent-2: #ec5578; }
.spin-wheel-workspace { --spin-wheel-duration: 4.8s; position: relative; border-top-color: #5c4fa6; background: linear-gradient(145deg, #fff 0%, #fffafd 48%, #f4f8ff 100%); }
.spin-wheel-heading, .spin-wheel-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.spin-wheel-local-badge, .spin-wheel-ready-badge { display: inline-flex; align-items: center; gap: .45rem; flex: 0 0 auto; padding: .42rem .7rem; color: #5c4fa6; background: #f7f5ff; border: 1px solid #ded8f4; border-radius: 999px; font-size: .78rem; font-weight: 800; }
.spin-wheel-local-badge > span { width: .55rem; height: .55rem; background: #22b98a; border-radius: 50%; box-shadow: 0 0 0 4px #dcf8ef; }
.spin-wheel-stage-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.spin-wheel-stage-actions .spin-wheel-fullscreen-button { display: inline-flex; min-height: 2.2rem; align-items: center; gap: .4rem; padding: .4rem .65rem; color: #463a91; background: #fff; border: 1px solid #d8d1f0; border-radius: 999px; font: inherit; font-size: .76rem; font-weight: 800; }
.spin-wheel-fullscreen-button svg { width: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.spin-wheel-fullscreen-button[aria-pressed="true"] { color: #fff; background: #5c4fa6; border-color: #5c4fa6; }
.spin-wheel-fullscreen-button:focus-visible { outline: 3px solid #f5bf45; outline-offset: 2px; }
.spin-wheel-layout { align-items: stretch; }
.spin-wheel-stage-panel, .spin-wheel-controls-panel { display: flex; min-width: 0; flex-direction: column; }
.spin-wheel-stage-panel { position: relative; overflow: hidden; background: radial-gradient(circle at 50% 42%, #fff 0 43%, #f7f5ff 70%, #fff 100%); }
.spin-wheel-fullscreen-area { position: relative; display: flex; min-width: 0; flex-direction: column; }
.spin-wheel-fullscreen-area > .spin-wheel-panel-heading { min-height: 2.35rem; justify-content: flex-end; }
.spin-wheel-stage { position: relative; display: grid; width: min(100%, 430px); margin: 1.2rem auto .85rem; aspect-ratio: 1; place-items: center; }
.spin-wheel-disc { position: absolute; inset: 4.5%; overflow: hidden; border: 10px solid #fff; border-radius: 50%; box-shadow: 0 18px 42px rgb(62 53 117 / 20%), 0 0 0 2px #ddd7f3; transition: transform 4.8s cubic-bezier(.16,1,.3,1); will-change: transform; }
.spin-wheel-disc::after { position: absolute; inset: 0; background: radial-gradient(circle, rgb(255 255 255 / 18%) 0 8%, transparent 9% 67%, rgb(22 29 52 / 8%) 68% 100%); border-radius: inherit; content: ""; pointer-events: none; }
.spin-wheel-labels { position: absolute; inset: 0; }
.spin-wheel-labels > span { --wheel-radius: clamp(82px, 12vw, 145px); position: absolute; top: 50%; left: 50%; width: clamp(64px, 8vw, 96px); overflow: hidden; color: #fff; font-size: clamp(.66rem, .9vw, .85rem); font-weight: 850; text-align: center; text-overflow: ellipsis; text-shadow: 0 1px 2px rgb(17 24 39 / 48%); white-space: nowrap; transform: translate(-50%,-50%) rotate(calc(var(--label-angle) * 1deg)) translateY(calc(var(--wheel-radius) * -1)) rotate(calc(var(--label-angle) * -1deg)); }
.spin-wheel-pointer { position: absolute; z-index: 4; top: -.1rem; left: 50%; width: 0; height: 0; border-top: 34px solid #ef8d46; border-right: 18px solid transparent; border-left: 18px solid transparent; filter: drop-shadow(0 4px 2px rgb(45 37 91 / 20%)); transform: translateX(-50%); }
.spin-wheel-go { position: relative; z-index: 5; display: grid; width: 6.2rem; height: 6.2rem; color: #332b70; background: linear-gradient(145deg, #fff, #f2edff); border: 8px solid rgb(255 255 255 / 92%); border-radius: 50%; box-shadow: 0 10px 24px rgb(51 43 112 / 26%), inset 0 0 0 1px #d7d0f2; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; place-content: center; }
.spin-wheel-go strong { font: 900 1.35rem/1 var(--font-family); }
.spin-wheel-go span { margin-top: .35rem; font-size: .72rem; font-weight: 800; }
.spin-wheel-go:hover:not(:disabled) { transform: scale(1.04); }
.spin-wheel-go:focus-visible { outline: 4px solid #f5bf45; outline-offset: 4px; }
.spin-wheel-go:disabled { opacity: .78; cursor: wait; }
.spin-wheel-visual-note { margin: 0; color: #667085; font-size: .84rem; text-align: center; }
.spin-wheel-countdown-overlay { position: absolute; z-index: 9; top: 5.8rem; left: 50%; display: grid; width: min(calc(100% - 3rem),430px); aspect-ratio: 1; place-content: center; justify-items: center; gap: .55rem; color: #fff; background: rgb(40 33 82 / 88%); border: 10px solid rgb(255 255 255 / 90%); border-radius: 50%; box-shadow: 0 20px 50px rgb(31 24 69 / 28%); transform: translateX(-50%); backdrop-filter: blur(3px); }
.spin-wheel-countdown-overlay[hidden] { display: none; }
.spin-wheel-countdown-overlay strong { font-size: clamp(4rem,10vw,7rem); line-height: 1; }
.spin-wheel-countdown-overlay span { font-weight: 800; }
.spin-wheel-countdown-overlay button { margin-top: .35rem; padding: .5rem .85rem; color: #fff; background: rgb(255 255 255 / 12%); border: 1px solid rgb(255 255 255 / 38%); border-radius: 999px; cursor: pointer; }
.spin-wheel-confetti { position: absolute; z-index: 10; inset: 0; overflow: hidden; pointer-events: none; }
.spin-wheel-confetti > i { position: absolute; top: 12%; left: 50%; width: .55rem; height: .9rem; background: var(--confetti-color); border-radius: .15rem; animation: spin-wheel-confetti 1.45s cubic-bezier(.2,.7,.2,1) forwards; transform: translate(-50%,-50%) rotate(var(--confetti-rotate)); }
@keyframes spin-wheel-confetti { to { opacity: 0; transform: translate(calc(-50% + var(--confetti-x)),var(--confetti-y)) rotate(calc(var(--confetti-rotate) + 720deg)); } }
.spin-wheel-winner-card { margin-top: 1rem; padding: 1rem; background: rgb(255 255 255 / 88%); border: 1px solid #ded8f4; border-radius: 1.1rem; box-shadow: 0 8px 24px rgb(52 45 104 / 8%); text-align: center; }
.spin-wheel-winner-card p, .spin-wheel-winner-card span { margin: 0; color: #667085; }
.spin-wheel-winner-card strong { display: block; margin: .25rem 0; overflow-wrap: anywhere; color: #5c4fa6; font-size: clamp(1.55rem, 3vw, 2.25rem); }
.spin-wheel-shortcuts { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem .75rem; margin: .85rem auto 0; color: #5f687b; font-size: .76rem; }
.spin-wheel-shortcuts > span { display: inline-flex; align-items: center; gap: .35rem; }
.spin-wheel-shortcuts kbd, .spin-wheel-modal-keyboard-hint kbd { padding: .18rem .4rem; color: #33405a; background: #f7f8fb; border: 1px solid #d8dce6; border-bottom-width: 2px; border-radius: .35rem; box-shadow: 0 1px 0 rgb(17 24 39 / 5%); font: 700 .72rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; }
.spin-wheel-winner-modal { position: fixed; z-index: 1200; inset: 0; display: grid; padding: 1rem; place-items: center; background: rgb(25 21 55 / 72%); backdrop-filter: blur(6px); }
.spin-wheel-winner-modal[hidden] { display: none; }
.spin-wheel-winner-modal-card { position: relative; width: min(100%, 34rem); padding: clamp(1.5rem, 4vw, 2.5rem); overflow: hidden; background: linear-gradient(145deg,#fff 0%,#fff8fb 55%,#f4f1ff 100%); border: 1px solid rgb(255 255 255 / 86%); border-radius: 1.75rem; box-shadow: 0 28px 80px rgb(20 15 55 / 35%); text-align: center; animation: spin-wheel-modal-in .24s ease-out both; }
.spin-wheel-winner-modal-card::before { position: absolute; top: 0; right: 0; left: 0; height: .38rem; background: linear-gradient(90deg,#ec5578,#ef8d46,#7967e8); content: ""; }
.spin-wheel-winner-modal-card .workspace-kicker { margin-bottom: .35rem; color: #7967e8; }
.spin-wheel-winner-modal-card h3 { margin: 0; color: #202a42; font-size: clamp(1.35rem, 3vw, 1.8rem); }
.spin-wheel-winner-modal-card > strong { display: block; margin: .8rem 0 .55rem; overflow-wrap: anywhere; color: #d83f69; font-size: clamp(2.2rem, 8vw, 4.2rem); line-height: 1.12; }
.spin-wheel-winner-modal-card > p:not(.workspace-kicker) { margin: 0; color: #687187; }
.spin-wheel-winner-modal-card .button { min-width: 8.5rem; margin-top: 1.25rem; }
.spin-wheel-modal-close { position: absolute; z-index: 1; top: .85rem; right: .85rem; display: grid; width: 2.3rem; height: 2.3rem; padding: 0; place-items: center; color: #667085; background: #fff; border: 1px solid #dfe2ea; border-radius: 50%; cursor: pointer; font-size: 1.5rem; line-height: 1; }
.spin-wheel-modal-close:hover { color: #d83f69; border-color: #ec9eb3; }
.spin-wheel-modal-close:focus-visible, .spin-wheel-winner-modal-card .button:focus-visible { outline: 4px solid #f5bf45; outline-offset: 3px; }
.spin-wheel-modal-keyboard-hint { display: flex; align-items: center; justify-content: center; gap: .35rem; margin-top: 1rem !important; font-size: .76rem; }
@keyframes spin-wheel-modal-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.spin-wheel-primary-setting { display: grid; margin-top: .9rem; grid-template-columns: minmax(0,1fr); }
.spin-wheel-settings-disclosure { margin-top: .7rem; overflow: hidden; background: #fbfaff; border: 1px solid #dcd6ef; border-radius: 1rem; }
.spin-wheel-settings-disclosure > summary { display: flex; min-height: 3.75rem; padding: .72rem .85rem; align-items: center; justify-content: space-between; gap: .75rem; color: #3f357c; cursor: pointer; list-style: none; }
.spin-wheel-settings-disclosure > summary::-webkit-details-marker { display: none; }
.spin-wheel-settings-disclosure > summary > span { display: grid; min-width: 0; gap: .2rem; }
.spin-wheel-settings-disclosure > summary strong { font-size: .88rem; }
.spin-wheel-settings-disclosure > summary small { overflow: hidden; color: #697287; font-size: .74rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.spin-wheel-settings-disclosure > summary svg { width: 1.2rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; transition: transform .18s ease; }
.spin-wheel-settings-disclosure[open] > summary { background: #f7f4ff; border-bottom: 1px solid #e1dcee; }
.spin-wheel-settings-disclosure[open] > summary svg { transform: rotate(180deg); }
.spin-wheel-settings-disclosure > summary:hover { background: #f7f4ff; }
.spin-wheel-settings-disclosure > summary:focus-visible { outline: 4px solid #f5bf45; outline-offset: -4px; }
.spin-wheel-settings-body { padding: .85rem; }
.spin-wheel-settings-body .spin-wheel-feature-grid { margin-top: 0; }
.spin-wheel-settings-body .spin-wheel-option-grid label > span { margin-top: .75rem; }
.spin-wheel-feature-grid { display: grid; margin-top: .9rem; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; }
.spin-wheel-feature-field, .spin-wheel-countdown-field, .spin-wheel-speed-field { min-width: 0; margin: 0; padding: .72rem; background: #fbfcff; border: 1px solid #dde2ef; border-radius: .9rem; }
.spin-wheel-feature-field > span, .spin-wheel-countdown-field > label, .spin-wheel-speed-field legend { display: block; margin: 0 0 .45rem; color: #34405b; font-size: .78rem; font-weight: 850; }
.spin-wheel-feature-field select, .spin-wheel-countdown-field select { width: 100%; min-height: 2.45rem; padding: .42rem .55rem; color: #17233d; background: #fff; border: 1px solid #d5dceb; border-radius: .7rem; }
.spin-wheel-speed-field { border: 1px solid #dde2ef; }
.spin-wheel-segmented { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .3rem; }
.spin-wheel-segmented button { min-height: 2.45rem; padding: .4rem .25rem; color: #596579; background: #fff; border: 1px solid #d5dceb; border-radius: .65rem; cursor: pointer; font: inherit; font-size: .74rem; font-weight: 800; }
.spin-wheel-segmented button.is-active { color: #fff; background: #5c4fa6; border-color: #5c4fa6; box-shadow: 0 5px 12px rgb(92 79 166 / 20%); }
.spin-wheel-countdown-field > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .4rem; }
.spin-wheel-countdown-field button { padding: .45rem .7rem; color: #5c4fa6; background: #f7f5ff; border: 1px solid #d8d1f0; border-radius: .7rem; cursor: pointer; font-weight: 800; }
.spin-wheel-toggle-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.spin-wheel-toggle-row label, .spin-wheel-toggle-row button { display: inline-flex; min-height: 2.35rem; align-items: center; gap: .4rem; padding: .38rem .65rem; color: #596579; background: #fff; border: 1px solid #dfe3ec; border-radius: 999px; cursor: pointer; font: inherit; font-size: .75rem; font-weight: 750; }
.spin-wheel-toggle-row input { width: 1rem; height: 1rem; margin: 0; accent-color: #5c4fa6; }
.spin-wheel-toggle-row button[aria-pressed="true"] { color: #08785e; background: #edfff8; border-color: #a9e8d2; }
.spin-wheel-toggle-row label:focus-within, .spin-wheel-toggle-row button:focus-visible, .spin-wheel-feature-grid select:focus, .spin-wheel-segmented button:focus-visible { outline: 3px solid rgb(92 79 166 / 18%); outline-offset: 2px; }
.spin-wheel-name-label, .spin-wheel-option-grid label > span { display: block; margin: .9rem 0 .45rem; color: #293651; font-size: .86rem; font-weight: 800; }
#spin-wheel-names { width: 100%; min-height: 15.5rem; padding: .9rem 1rem; resize: vertical; color: #17233d; background: #fff; border: 1px solid #d7deeb; border-radius: 1rem; line-height: 1.55; }
#spin-wheel-names:focus, #spin-wheel-duplicate-policy:focus { border-color: #7967e8; outline: 3px solid rgb(92 79 166 / 18%); }
.spin-wheel-option-grid { display: grid; grid-template-columns: 1fr; }
#spin-wheel-duplicate-policy { width: 100%; min-height: 2.8rem; padding: .55rem .8rem; color: #17233d; background: #fff; border: 1px solid #d7deeb; border-radius: .85rem; }
.spin-wheel-entry-summary { margin: .6rem 0 0; color: #667085; font-size: .84rem; }
.spin-wheel-list-actions, .spin-wheel-result-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .85rem; }
.spin-wheel-list-actions button, .spin-wheel-panel-heading button, .spin-wheel-history-panel button { padding: .55rem .72rem; color: #34405b; background: #fff; border: 1px solid #d9ddea; border-radius: .75rem; cursor: pointer; font-weight: 750; }
.spin-wheel-list-actions button:hover, .spin-wheel-panel-heading button:hover, .spin-wheel-history-panel button:hover:not(:disabled) { color: #5c4fa6; border-color: #7967e8; }
.spin-wheel-boundary-note { display: grid; margin-top: 1rem; padding: .85rem; grid-template-columns: 1.35rem 1fr; gap: .7rem; color: #6a4a17; background: #fffaf0; border: 1px solid #f0dca8; border-radius: 1rem; }
.spin-wheel-boundary-note svg { width: 1.3rem; fill: #d78c27; }
.spin-wheel-boundary-note strong { display: block; }
.spin-wheel-boundary-note p { margin: .25rem 0 0; font-size: .82rem; line-height: 1.55; }
.spin-wheel-result-actions .button { flex: 1 1 10rem; }
.spin-wheel-stage-panel .spin-wheel-result-actions { margin-top: 1rem; }
.spin-wheel-record-tabs { display: grid; margin-top: 1rem; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem; }
.spin-wheel-record-tabs button { padding: .62rem .75rem; color: #667085; background: #f7f8fb; border: 1px solid #dfe3ec; border-radius: .8rem; cursor: pointer; font-weight: 850; }
.spin-wheel-record-tabs button[aria-selected="true"] { color: #5c4fa6; background: #f7f5ff; border-color: #cfc5ee; }
.spin-wheel-record-tabs span { display: inline-grid; min-width: 1.35rem; height: 1.35rem; margin-left: .25rem; place-items: center; color: inherit; background: rgb(92 79 166 / 9%); border-radius: 999px; font-size: .72rem; }
.spin-wheel-history-panel { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid #e1e4ec; }
.spin-wheel-stage-panel .spin-wheel-history-panel { min-height: 10.5rem; }
.spin-wheel-history-panel[hidden] { display: none; }
.spin-wheel-history-panel > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.spin-wheel-history-panel h4 { margin: 0; font-size: .98rem; }
.spin-wheel-history { display: grid; max-height: 12.5rem; margin: .7rem 0 0; padding: 0; gap: .5rem; overflow: auto; list-style: none; }
.spin-wheel-history li { display: grid; padding: .65rem .7rem; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .65rem; background: #fff; border: 1px solid #e0e3ec; border-radius: .8rem; }
.spin-wheel-history li > span { color: #7967e8; font-size: .78rem; font-weight: 850; }
.spin-wheel-history li > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spin-wheel-history li > small { color: #7a8499; font-size: .72rem; }
.spin-wheel-history .spin-wheel-history-empty { display: block; color: #7a8499; text-align: center; }
.spin-wheel-workspace:not(.is-reduced-motion) .spin-wheel-disc { transition-duration: var(--spin-wheel-duration) !important; }
.spin-wheel-workspace.is-spinning:not(.is-reduced-motion) .spin-wheel-pointer { animation: spin-wheel-pointer .15s linear infinite alternate; animation-duration: .15s !important; animation-iteration-count: infinite !important; }
.spin-wheel-workspace:not(.is-reduced-motion) .spin-wheel-confetti > i { animation-duration: 1.45s !important; }
@keyframes spin-wheel-pointer { to { transform: translateX(-50%) rotate(5deg); } }
.spin-wheel-workspace.is-reduced-motion .spin-wheel-disc, .spin-wheel-workspace.is-reduced-motion .spin-wheel-go { transition-duration: .001ms !important; }
.spin-wheel-workspace.is-reduced-motion .spin-wheel-confetti { display: none; }
.spin-wheel-workspace.is-reduced-motion .spin-wheel-winner-modal-card { animation: none; }
.spin-wheel-fullscreen-area:fullscreen { width: 100%; height: 100%; max-width: none; overflow: auto; padding: clamp(1rem,3vw,2.5rem); background: radial-gradient(circle at 50% 45%,#fff 0 38%,#f2eeff 72%,#eae4ff 100%); }
.spin-wheel-fullscreen-area:fullscreen .spin-wheel-panel-heading { width: min(100%, 960px); margin: 0 auto; }
.spin-wheel-fullscreen-area:fullscreen .spin-wheel-stage { width: min(72vh,720px); margin: 1rem auto; }
.spin-wheel-fullscreen-area:fullscreen .spin-wheel-labels > span { --wheel-radius: clamp(145px, 27vh, 265px); width: clamp(84px, 14vh, 128px); font-size: clamp(.78rem, 1.8vh, 1rem); }
.spin-wheel-fullscreen-area:fullscreen .spin-wheel-shortcuts { width: min(100%,720px); margin-right: auto; margin-left: auto; }
@media (max-width: 760px) {
    .spin-wheel-heading { flex-direction: column; }
    .spin-wheel-panel-heading { align-items: stretch; }
    .spin-wheel-stage-actions { justify-content: flex-start; }
    .spin-wheel-stage { width: min(100%, 350px); }
    .spin-wheel-disc { border-width: 7px; }
    .spin-wheel-go { width: 5.3rem; height: 5.3rem; border-width: 6px; }
    .spin-wheel-labels > span { --wheel-radius: clamp(68px, 28vw, 112px); width: 68px; font-size: .64rem; }
    .spin-wheel-feature-grid { grid-template-columns: 1fr; }
    .spin-wheel-countdown-overlay { top: 7.2rem; width: min(calc(100% - 2.5rem),350px); border-width: 7px; }
    .spin-wheel-shortcuts { gap: .5rem; }
    #spin-wheel-names { min-height: 12.2rem; }
    .spin-wheel-winner-modal-card { padding: 1.65rem 1rem 1.35rem; border-radius: 1.35rem; }
    .spin-wheel-history li { grid-template-columns: auto minmax(0,1fr); }
    .spin-wheel-history li > small { grid-column: 2; }
}
@media print {
    .tool-page--spin-wheel .tool-intro-grid,
    .tool-page--spin-wheel .spin-wheel-stage-panel,
    .tool-page--spin-wheel .spin-wheel-list-actions,
    .tool-page--spin-wheel .spin-wheel-boundary-note,
    .tool-page--spin-wheel .spin-wheel-result-actions,
    .tool-page--spin-wheel .spin-wheel-history-panel,
    .tool-page--spin-wheel .report-export-bar,
    .tool-page--spin-wheel .post-tool-answer,
    .tool-page--spin-wheel .content-grid { display: none !important; }
    .tool-page--spin-wheel .spin-wheel-workspace { padding: 0; background: #fff !important; border: 0; box-shadow: none; }
    .tool-page--spin-wheel .spin-wheel-layout { display: block; margin: 0; }
    .tool-page--spin-wheel .spin-wheel-controls-panel { min-height: 0; padding: 5mm; border: 1px solid #d8d2e5; }
}

/* Countdown timer */
.tool-page--countdown-timer { --tool-accent: #2a91c9; --tool-accent-2: #7967e8; }
.countdown-workspace { border-top-color: #2a91c9; background: linear-gradient(145deg,#fff 0%,#f9fcff 50%,#fbf9ff 100%); }
.countdown-heading, .countdown-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.countdown-local-badge, .countdown-panel-heading > span { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .45rem; padding: .42rem .7rem; color: #347aa5; background: #f0f9ff; border: 1px solid #cce9fa; border-radius: 999px; font-size: .76rem; font-weight: 800; }
.countdown-local-badge > span { width: .55rem; height: .55rem; background: #22b98a; border-radius: 50%; box-shadow: 0 0 0 4px #dcf8ef; }
.countdown-layout { align-items: stretch; }
.countdown-display-panel, .countdown-controls-panel { display: flex; min-width: 0; flex-direction: column; }
.countdown-display-panel { background: radial-gradient(circle at 50% 38%,#fff 0 34%,#f1f9ff 64%,#fff 100%); }
.countdown-state-badge[data-state="running"] { color: #087c66; background: #e7faf4; border-color: #bcebdc; }
.countdown-state-badge[data-state="paused"] { color: #9a6515; background: #fff7e8; border-color: #f2ddb4; }
.countdown-state-badge[data-state="finished"] { color: #a82f5e; background: #fff0f5; border-color: #f3ccda; }
.countdown-clock { position: relative; display: grid; width: min(82%, 340px); margin: 1.35rem auto .8rem; aspect-ratio: 1; place-items: center; }
.countdown-clock svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.countdown-clock circle { fill: none; stroke-width: 13; }
.countdown-track { stroke: #e8edf4; }
.countdown-progress { stroke: url(#none); stroke: #2a91c9; stroke-linecap: round; transition: stroke-dashoffset .18s linear; }
.countdown-clock > div { position: relative; z-index: 1; display: grid; text-align: center; }
.countdown-clock strong { color: #17233d; font-size: clamp(2.25rem,5vw,4rem); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.countdown-clock span { margin-top: .35rem; color: #6e7890; font-weight: 800; }
.countdown-live-status { min-height: 1.5rem; margin: 0; color: #536077; text-align: center; }
.countdown-history-panel { display: flex; min-height: 0; margin-top: 1.2rem; padding-top: 1rem; flex: 1; flex-direction: column; border-top: 1px solid #e0e6ee; }
.countdown-history-panel > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.countdown-history-panel h4 { margin: 0; font-size: .98rem; }
.countdown-history-panel button { padding: .45rem .65rem; color: #536077; background: #fff; border: 1px solid #d8e0ea; border-radius: .7rem; cursor: pointer; font-weight: 800; }
.countdown-history { display: grid; max-height: 13rem; margin: .75rem 0 0; padding: 0; gap: .5rem; overflow: auto; list-style: none; }
.countdown-history li { display: grid; padding: .65rem .7rem; grid-template-columns: auto 1fr auto; align-items: center; gap: .65rem; background: #fff; border: 1px solid #dfe6ee; border-radius: .8rem; }
.countdown-history li > span { color: #2a91c9; font-size: .76rem; font-weight: 850; }
.countdown-history li > strong { font-variant-numeric: tabular-nums; }
.countdown-history li > small { color: #788398; font-size: .7rem; }
.countdown-history .countdown-history-empty { display: block; color: #788398; text-align: center; }
.countdown-input-grid { display: grid; margin-top: 1rem; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .7rem; }
.countdown-input-grid label > span, .countdown-preset-label { display: block; margin: 0 0 .45rem; color: #33415d; font-size: .83rem; font-weight: 800; }
.countdown-input-grid input { width: 100%; min-height: 3.15rem; padding: .65rem; color: #17233d; background: #fff; border: 1px solid #d4deea; border-radius: .85rem; font-size: 1.05rem; font-variant-numeric: tabular-nums; text-align: center; }
.countdown-input-grid input:focus { border-color: #2a91c9; outline: 3px solid rgb(42 145 201 / 16%); }
.countdown-preset-label { margin-top: 1rem; }
.countdown-presets { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .5rem; }
.countdown-presets button { min-height: 2.6rem; padding: .45rem .35rem; color: #33536b; background: #f5fbff; border: 1px solid #cae7f7; border-radius: .7rem; cursor: pointer; font-size: .75rem; font-weight: 800; }
.countdown-presets button:hover:not(:disabled) { color: #fff; background: #2a91c9; border-color: #2a91c9; }
.countdown-sound-option { display: flex; align-items: flex-start; gap: .7rem; margin-top: 1rem; padding: .85rem; background: #f7f5ff; border: 1px solid #ddd8f0; border-radius: .9rem; }
.countdown-sound-option input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: #5c4fa6; }
.countdown-sound-option span { display: grid; gap: .2rem; }
.countdown-sound-option small { color: #6d7382; }
.countdown-boundary-note { display: grid; margin-top: 1rem; padding: .85rem; grid-template-columns: 1.35rem 1fr; gap: .7rem; color: #6a4a17; background: #fffaf0; border: 1px solid #f0dca8; border-radius: 1rem; }
.countdown-boundary-note svg { width: 1.3rem; fill: #d78c27; }
.countdown-boundary-note strong { display: block; }
.countdown-boundary-note p { margin: .25rem 0 0; font-size: .82rem; line-height: 1.55; }
.countdown-actions { display: grid; margin-top: 1rem; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
.countdown-actions .button { width: 100%; }
@media (prefers-reduced-motion: reduce) { .countdown-progress { transition-duration: .001ms !important; } }
@media (max-width: 760px) {
    .countdown-heading { flex-direction: column; }
    .countdown-clock { width: min(88%,300px); }
    .countdown-input-grid { gap: .45rem; }
    .countdown-presets { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .countdown-history li { grid-template-columns: auto 1fr; }
    .countdown-history li > small { grid-column: 2; }
}
@media print {
    .tool-page--countdown-timer .tool-intro-grid,
    .tool-page--countdown-timer .countdown-display-panel,
    .tool-page--countdown-timer .countdown-presets,
    .tool-page--countdown-timer .countdown-sound-option,
    .tool-page--countdown-timer .countdown-boundary-note,
    .tool-page--countdown-timer .countdown-actions,
    .tool-page--countdown-timer .report-export-bar,
    .tool-page--countdown-timer .post-tool-answer,
    .tool-page--countdown-timer .content-grid { display: none !important; }
    .tool-page--countdown-timer .countdown-workspace { padding: 0; background: #fff !important; border: 0; box-shadow: none; }
    .tool-page--countdown-timer .countdown-layout { display: block; margin: 0; }
    .tool-page--countdown-timer .countdown-controls-panel { min-height: 0; padding: 5mm; border: 1px solid #d8d2e5; }
}