/* ═══════════════════════════════════════════════════════════════
   TRIPURA.IO — Unified Shared Stylesheet
   ═══════════════════════════════════════════════════════════════ */


/* ── Fonts: Shobhika (Devanagari) ─────────────────────────────── */
@font-face {
    font-family: 'Shobhika';
    /* Changed to local path! */
    src: url('/static/fonts/shobhika-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Shobhika';
    src: url('/static/fonts/shobhika-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ── Fonts: EB Garamond (Latin & Latin-Ext) ───────────────────── */
/* 400 Regular */
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/eb-garamond-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/eb-garamond-latin-ext-400.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* 500 Medium */
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/eb-garamond-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/eb-garamond-latin-ext-500.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* 600 SemiBold (Used in headings) */
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/eb-garamond-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/eb-garamond-latin-ext-600.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* 700 Bold */
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/eb-garamond-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/eb-garamond-latin-ext-700.woff2') format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }


/* ── Reset ────────────────────────────────────────────────────── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ── Design Tokens (CSS Variables) ────────────────────────────── */
:root {
    /* Backgrounds */
    --cream-bg: #fbf7ee;
    --cream-deep: #f6efdf;
    --card-bg: #fffdf8;
    --input-bg: #fffefb;
    --output-bg: #fdf9ef;

    /* Gold palette */
    --gold-100: #f7ecd2;
    --gold-200: #efdfb4;
    --gold-300: #e3c987;
    --gold-400: #d4af37;
    --gold-500: #c9971f;
    --gold-600: #a87d15;
    --gold-700: #8a6512;
    --gold-800: #6b4e0e;

    /* Ink & text */
    --ink: #3b3020;
    --ink-soft: #6d5f45;
    --ink-muted: #9c8d6f;

    /* Semantic colors (used by Page 3 / Tithi Praveśa) */
    --terra: #b4562f;
    --terra-soft: rgba(180, 86, 47, 0.14);
    --leaf: #6b8e5a;

    /* Borders & lines */
    --line: rgba(168, 125, 21, 0.22);
    --line-soft: rgba(168, 125, 21, 0.12);
    --line-strong: rgba(168, 125, 21, 0.42);

    /* Typography */
    --font-latin: 'EB Garamond', 'Georgia', serif;
    --font-dev: 'Shobhika', 'Noto Sans Devanagari', serif;

    /* Shadows */
    --shadow-card: 0 1px 2px rgba(140, 100, 30, 0.05), 0 12px 40px rgba(140, 100, 30, 0.09);
    --shadow-soft: 0 2px 10px rgba(140, 100, 30, 0.08);
        /* Dictionary addition */
    --font-text: 'Shobhika Devanagari', 'EB Garamond', 'Georgia', serif;
    --body-size: 1.0625rem;
    --body-line: 1.9;
}

/* ── Base HTML / Body ─────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-latin);
    background:
        radial-gradient(1100px 520px at 50% -140px, rgba(212, 175, 55, 0.14), transparent 65%),
        radial-gradient(900px 480px at 50% 115%, rgba(201, 151, 31, 0.10), transparent 70%),
        linear-gradient(180deg, #fdfbf5 0%, var(--cream-bg) 45%, var(--cream-deep) 100%);
    background-attachment: fixed;
    color: var(--ink);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ── Selection ────────────────────────────────────────────────── */
::selection {
    background: rgba(212, 175, 55, 0.28);
    color: var(--gold-800);
}

/* ── Scrollbar ────────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(168, 125, 21, 0.25);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(168, 125, 21, 0.45);
}

/* ── Layout: Container ────────────────────────────────────────── */
.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 24px 64px;
}

/* ── Brand (Top Menu) ─────────────────────────────────────────── */
.brand-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 34px 24px 0;
    animation: rise 0.55s ease both;
}
.brand {
    display: inline-flex;
    align-items: baseline;
    font-family: var(--font-latin);
    font-size: 1.42rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    background: linear-gradient(120deg, var(--gold-700) 0%, var(--gold-500) 45%, var(--gold-400) 60%, var(--gold-700) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: filter 0.3s ease;
}
.brand .io {
    font-weight: 400;
}
.brand:hover {
    filter: brightness(1.12);
}

/* ── Header ───────────────────────────────────────────────────── */
header {
    text-align: center;
    margin-bottom: 34px;
    animation: rise 0.6s ease both;
}
header h1 {
    font-family: var(--font-latin);
    font-size: clamp(2rem, 4.5vw, 2.9rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    background: linear-gradient(120deg, var(--gold-700) 0%, var(--gold-500) 45%, var(--gold-400) 60%, var(--gold-700) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 14px;
}
/* Devanagari title (used by Page 3 / Tithi Praveśa) */
.dev-title {
    font-family: var(--font-dev);
    font-size: clamp(1.1rem, 2.6vw, 1.5rem);
    color: var(--gold-600);
    letter-spacing: 0.06em;
    margin-bottom: 2px;
    opacity: 0.9;
    position: relative;
    top: 2px;
}
.ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 14px;
}
.ornament .rule {
    width: 72px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-400));
}
.ornament .rule:last-child {
    background: linear-gradient(90deg, var(--gold-400), transparent);
}
.ornament .gem {
    width: 7px;
    height: 7px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
.subtitle {
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* ── Panels (Cards) ───────────────────────────────────────────── */
.panel {
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-card);
    position: relative;
    margin-bottom: 26px;
}
.panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ── Footer ───────────────────────────────────────────────────── */
footer {
    text-align: center;
    margin-top: 25px;
    font-size: 0.86rem;
    color: var(--ink-muted);
    letter-spacing: 0.05em;
    line-height: 1.8;
}
footer .dev {
    font-family: var(--font-dev);
    color: var(--gold-600);
    font-size: 1.15rem;
    vertical-align: middle;
    position: relative;
    top: 1px;
}

/* ── Toast Notifications ──────────────────────────────────────── */
.toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%) translateY(90px);
    padding: 12px 28px;
    border-radius: 999px;
    background: var(--card-bg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    color: var(--gold-700);
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
    z-index: 300;
    pointer-events: none;
}
.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* ── Animations ───────────────────────────────────────────────── */
@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.spin {
    animation: sp 1s linear infinite;
    transform-origin: center;
}
@keyframes sp {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════
   PAGE 2 — Sanskrit Transliteration Tool
   ═══════════════════════════════════════════════════════════════ */

/* Direction Bar */
.direction-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 30px;
}
.direction-label {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding: 9px 22px;
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    background: transparent;
    transition: all 0.35s ease;
}
.direction-label.active {
    color: var(--gold-700);
    background: linear-gradient(135deg, #fdf6e3, var(--gold-100));
    border-color: var(--line);
    box-shadow: var(--shadow-soft);
}
.swap-btn {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    color: #fffdf6;
    background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
    box-shadow: 0 4px 14px rgba(168, 125, 21, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, filter 0.3s ease;
}
.swap-btn:hover {
    transform: rotate(180deg) scale(1.06);
    filter: brightness(1.06);
    box-shadow: 0 6px 20px rgba(168, 125, 21, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.swap-btn:active {
    transform: rotate(180deg) scale(0.97);
}
.swap-btn svg {
    width: 20px;
    height: 20px;
}

/* Editors */
.editor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}
.editor-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.editor-title {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.icon-btn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
    transition: all 0.25s ease;
}
.icon-btn:hover {
    color: var(--gold-600);
    background: var(--gold-100);
    border-color: var(--line-soft);
}
.icon-btn svg {
    width: 16px;
    height: 16px;
}

/* Textareas */
textarea {
    width: 100%;
    min-height: 300px;
    padding: 22px 24px;
    border-radius: 14px;
    border: 1px solid var(--line);
    color: var(--ink);
    resize: vertical;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
textarea#inputText {
    background: var(--input-bg);
}
textarea#outputText {
    background: var(--output-bg);
}
textarea:focus {
    border-color: var(--line-strong);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.14), var(--shadow-soft);
}
textarea::placeholder {
    color: var(--ink-muted) !important;
    opacity: 0.75 !important;
    font-style: italic !important;
    font-family: 'EB Garamond', 'Georgia', serif !important;
    font-size: 1.38rem !important;
    line-height: 1.9 !important;
    letter-spacing: 0.015em !important;
}
textarea[readonly] {
    cursor: default;
}
textarea.latin-font {
    font-family: var(--font-latin);
    font-size: 1.28rem;
    line-height: 1.9;
    letter-spacing: 0.015em;
}
textarea.dev-font {
    font-family: var(--font-dev);
    font-size: 1.18rem;
    line-height: 2.1;
    position: relative;
    top: 2px;
}

/* Bottom Bar */
.bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
}
.char-count {
    font-size: 0.92rem;
    color: var(--ink-muted);
    letter-spacing: 0.04em;
}
.clear-btn {
    font-family: var(--font-latin);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 9px 24px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all 0.25s ease;
}
.clear-btn:hover {
    background: var(--gold-100);
    border-color: var(--line-strong);
    color: var(--gold-700);
}

/* Reference Chart */
.ref-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}
.ref-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-600);
}
.ref-title svg {
    width: 18px;
    height: 18px;
}
.ref-arrow {
    color: var(--ink-muted);
    font-size: 0.8rem;
    transition: transform 0.35s ease;
}
.ref-arrow.open {
    transform: rotate(180deg);
}
.ref-content {
    display: none;
    padding-top: 26px;
}
.ref-content.open {
    display: block;
    animation: rise 0.4s ease both;
}
.ref-section {
    margin-bottom: 28px;
}
.ref-section:last-child {
    margin-bottom: 4px;
}
.ref-section-title {
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-soft);
}
.ref-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
}
.ref-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 8px 10px;
    border-radius: 12px;
    background: var(--output-bg);
    border: 1px solid var(--line-soft);
    cursor: pointer;
    transition: all 0.25s ease;
}
.ref-item:hover {
    background: var(--gold-100);
    border-color: var(--line);
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}
.ref-devanagari {
    font-family: var(--font-dev);
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--gold-700);
}
.ref-iast {
    font-family: var(--font-latin);
    font-size: 0.92rem;
    color: var(--ink-muted);
    letter-spacing: 0.04em;
}

/* Page 2 panel padding overrides */
.main-panel {
    padding: 34px 34px 26px;
    animation: rise 0.6s ease 0.05s both;
}
.ref-panel {
    padding: 26px 34px;
    animation: rise 0.6s ease 0.12s both;
}

/* ═══════════════════════════════════════════════════════════════
   PAGE 3 — Tithi Praveśa (Vedic Lunar Birthday Calculator)
   ═══════════════════════════════════════════════════════════════ */

/* Tabs */
.tabbar {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 26px;
    animation: rise 0.6s ease 0.04s both;
}
.tab {
    font-family: var(--font-latin);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 10px 26px;
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.tab svg {
    width: 16px;
    height: 16px;
}
.tab:hover {
    color: var(--gold-600);
    border-color: var(--line);
}
.tab.active {
    color: var(--gold-700);
    background: linear-gradient(135deg, #fdf6e3, var(--gold-100));
    border-color: var(--line);
    box-shadow: var(--shadow-soft);
}

/* Page 3 panel padding */
.pad {
    padding: 32px 34px;
}
.pad-sm {
    padding: 24px 30px;
}

/* Section Heads */
.sec-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 20px;
}
.sec-head .num {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--gold-500);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 10px;
}
.sec-title {
    font-size: 1.32rem;
    font-weight: 600;
    color: var(--gold-800);
    letter-spacing: 0.01em;
}
.sec-dev {
    font-family: var(--font-dev);
    font-size: 1.05rem;
    color: var(--ink-muted);
}
.sec-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--line), transparent);
    min-width: 20px;
}

/* Form */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
}
.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.field.full {
    grid-column: 1 / -1;
}
.field label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.field .hint {
    font-size: 0.82rem;
    color: var(--ink-muted);
    font-style: italic;
    margin-top: -2px;
}
input[type=text],
input[type=date],
input[type=time],
input[type=number],
select {
    width: 100%;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--input-bg);
    color: var(--ink);
    font-family: var(--font-latin);
    font-size: 1.04rem;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--gold-600) 50%),
                      linear-gradient(135deg, var(--gold-600) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
}
input:focus,
select:focus {
    border-color: var(--line-strong);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.14), var(--shadow-soft);
}
input::placeholder {
    color: var(--ink-muted);
    opacity: 0.7;
    font-style: italic;
}

/* Location Widget */
.loc-modes {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.segbtn {
    font-family: var(--font-latin);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.segbtn svg {
    width: 13px;
    height: 13px;
}
.segbtn:hover {
    color: var(--gold-600);
    border-color: var(--line);
    background: var(--output-bg);
}
.segbtn.active {
    color: var(--gold-700);
    background: linear-gradient(135deg, #fdf6e3, var(--gold-100));
    border-color: var(--line);
    box-shadow: var(--shadow-soft);
}
.loc-coord {
    display: grid;
    grid-template-columns: 1fr 1fr 1.35fr;
    gap: 10px;
    margin-top: 10px;
}
.loc-resolved {
    font-size: 0.88rem;
    color: var(--ink-muted);
    font-style: italic;
    margin-top: 9px;
    line-height: 1.55;
    letter-spacing: 0.02em;
    padding-left: 2px;
}
.loc-resolved b {
    color: var(--gold-700);
    font-style: normal;
    font-weight: 600;
}
.loc-resolved .bad {
    color: var(--terra);
    font-style: normal;
    font-weight: 600;
}

/* Subheadings & Switches */
.subhead {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 30px 0 16px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-600);
}
.subhead::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--line-soft), transparent);
}
.switch {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}
.switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.track {
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: var(--gold-100);
    border: 1px solid var(--line);
    position: relative;
    transition: all 0.3s ease;
    flex: none;
}
.knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(140, 100, 30, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.switch input:checked + .track {
    background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
    border-color: var(--line-strong);
}
.switch input:checked + .track .knob {
    left: 22px;
}
.switch span.lbl {
    font-size: 1rem;
    color: var(--ink-soft);
}

/* Actions */
.actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--line-soft);
}
.btn-primary {
    font-family: var(--font-latin);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 13px 32px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    color: #fffdf6;
    background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
    box-shadow: 0 4px 14px rgba(168, 125, 21, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, filter 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.btn-primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 8px 22px rgba(168, 125, 21, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-primary:active {
    transform: translateY(0) scale(0.985);
}
.btn-primary svg {
    width: 18px;
    height: 18px;
}
.btn-primary[disabled] {
    opacity: 0.6;
    cursor: progress;
    transform: none;
}
.btn-ghost {
    font-family: var(--font-latin);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 9px 22px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-ghost:hover {
    background: var(--gold-100);
    border-color: var(--line-strong);
    color: var(--gold-700);
}
.btn-ghost svg {
    width: 15px;
    height: 15px;
}

/* Results & Hero */
.hidden {
    display: none !important;
}
.hero {
    text-align: center;
    padding: 8px 0 26px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line-soft);
}
.hero .kicker {
    font-size: 0.74rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 10px;
}
.hero .moment {
    font-size: clamp(1.5rem, 3.4vw, 2.15rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    background: linear-gradient(120deg, var(--gold-700), var(--gold-500) 45%, var(--gold-400) 62%, var(--gold-700));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}
.hero .tithi {
    font-size: 1.16rem;
    color: var(--ink-soft);
}
.hero .tzline {
    font-size: 0.9rem;
    color: var(--ink-muted);
    margin-top: 6px;
    letter-spacing: 0.04em;
}
/* Devanagari inline span */
.dev {
    font-family: var(--font-dev);
    margin-inline-start: 0.5em;
    position: relative;
    top: 2px;
    
}
.hero .tithi .dev {
    color: var(--terra);
    font-size: 1.24rem;
}

/* Report */
.rep {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px 40px;
    margin-top: 26px;
}
.rep.one {
    grid-template-columns: 1fr;
}
.rep-block {
    min-width: 0;
}
.rep-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-600);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-soft);
}
.rep-title .dev {
    font-size: 0.98rem;
    letter-spacing: 0;
    color: var(--ink-muted);
    text-transform: none;
}
.row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 6px 2px;
    border-bottom: 1px dashed rgba(168, 125, 21, 0.13);
}
.row:last-child {
    border-bottom: none;
}
.row .k {
    font-size: 0.8rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-muted);
    flex: none;
    font-weight: 500;
}
.row .v {
    font-size: 1.05rem;
    color: var(--ink);
    text-align: right;
    font-weight: 500;
    line-height: 1.5;
}
.row .v .dev {
    color: var(--gold-700);
    font-size: 1.06rem;
}
.row .v small {
    display: block;
    font-size: 0.82rem;
    color: var(--ink-muted);
    font-weight: 400;
    letter-spacing: 0.02em;
}
.flag {
    color: var(--terra);
    font-weight: 600;
}
.good {
    color: var(--leaf);
    font-weight: 600;
}
.banner {
    margin-top: 24px;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: linear-gradient(135deg, #fdf6e3, var(--gold-100));
    font-size: 1.04rem;
    color: var(--gold-800);
    text-align: center;
    line-height: 1.6;
}
.banner.warn {
    background: linear-gradient(135deg, #fdf0e8, #f7e0d3);
    border-color: rgba(180, 86, 47, 0.35);
    color: #8c3d1c;
}
.errbox {
    margin-top: 20px;
    padding: 16px 20px;
    border-radius: 14px;
    border: 1px solid rgba(180, 86, 47, 0.4);
    background: #fdf1ea;
    color: #8c3d1c;
    font-size: 1.02rem;
    line-height: 1.6;
}
.note {
    font-size: 0.86rem;
    color: var(--ink-muted);
    line-height: 1.7;
    margin-top: 18px;
    font-style: italic;
}

/* Sky Chart */
.sky-grid {
    display: grid;
    grid-template-columns: minmax(280px, 520px) 1fr;
    gap: 30px;
    align-items: start;
}
.sky-frame {
    width: 100%;
    aspect-ratio: 1.02;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: radial-gradient(circle at 50% 44%, #fffdf8 0%, #f7f0df 62%, #f1e6cd 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), var(--shadow-soft);
}
.sky-frame svg {
    width: 100%;
    height: 100%;
    display: block;
}
.sky-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 6px;
}
input[type=range] {
    flex: 1;
    accent-color: var(--gold-500);
    height: 26px;
    background: transparent;
    cursor: pointer;
}
.sky-val {
    font-size: 0.82rem;
    color: var(--ink-muted);
    width: 104px;
    text-align: right;
    letter-spacing: 0.03em;
    line-height: 1.35;
}
.sky-btns {
    text-align: center;
    margin: 8px 0 4px;
}
.sky-stat {
    text-align: center;
    min-height: 3.2em;
    font-size: 0.98rem;
    color: var(--gold-700);
    line-height: 1.6;
    padding: 0 6px;
}
.sky-stat b {
    color: var(--terra);
    font-weight: 600;
}
.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    justify-content: center;
    margin-top: 10px;
    font-size: 0.84rem;
    color: var(--ink-muted);
}
.legend i {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.sky-side h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--gold-800);
    margin-bottom: 8px;
}
.sky-side h3 .dev {
    color: var(--ink-muted);
    font-size: 1.05rem;
}
.sky-side p {
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--ink-soft);
    margin-bottom: 12px;
}
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 4px;
}
.chip {
    font-size: 0.86rem;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    background: var(--output-bg);
    color: var(--ink-soft);
}
.chip b {
    color: var(--gold-700);
    font-weight: 600;
}

/* Learn Section */
.learn-sec {
    margin-bottom: 30px;
}
.learn-sec:last-child {
    margin-bottom: 2px;
}
.learn-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-600);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-soft);
}
.learn-title .dev {
    font-size: 1.06rem;
    letter-spacing: 0;
    color: var(--ink-muted);
    text-transform: none;
}
.learn-sec p {
    font-size: 1.06rem;
    line-height: 1.9;
    color: var(--ink-soft);
    margin-bottom: 12px;
}
.learn-sec p:last-child {
    margin-bottom: 0;
}
.learn-sec strong {
    color: inherit;
    font-weight: 600;
}
.learn-sec em {
    color: var(--gold-700);
    font-style: italic;
}
.refs {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.refs li {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink-soft);
    padding-left: 20px;
    position: relative;
}
.refs li::before {
    content: '❧';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--gold-400);
    font-size: 0.9rem;
}
.refs a {
    color: var(--gold-700);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}
.refs a:hover {
    border-bottom-color: var(--gold-500);
}
.fold-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}
.fold-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-600);
}
.fold-title svg {
    width: 18px;
    height: 18px;
}
.fold-arrow {
    color: var(--ink-muted);
    font-size: 0.78rem;
    transition: transform 0.35s ease;
}
.fold-arrow.open {
    transform: rotate(180deg);
}
.fold-body {
    display: none;
    padding-top: 26px;
}
.fold-body.open {
    display: block;
    animation: rise 0.4s ease both;
}

/* Map Modal */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(59, 48, 32, 0.42);
    backdrop-filter: blur(3px);
    display: none;
    place-items: center;
    z-index: 200;
    padding: 20px;
}
.modal.open {
    display: grid;
    animation: fade 0.3s ease both;
}
.modal-card {
    width: min(880px, 100%);
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--line-soft);
}
.modal-head h4 {
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--gold-800);
    letter-spacing: 0.04em;
}
.modal-head .sub {
    font-size: 0.84rem;
    color: var(--ink-muted);
    font-style: italic;
    margin-top: 2px;
}
.x-btn {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.25s;
    flex: none;
}
.x-btn:hover {
    color: var(--terra);
    background: var(--gold-100);
    border-color: var(--line-soft);
}
#map {
    height: min(58vh, 440px);
    width: 100%;
    background: #efe6d2;
}
.modal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 22px;
    border-top: 1px solid var(--line-soft);
    flex-wrap: wrap;
}
.modal-foot .coords {
    font-size: 0.96rem;
    color: var(--ink-soft);
    letter-spacing: 0.03em;
}
.leaflet-container {
    font-family: var(--font-latin);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
    .sky-grid {
        grid-template-columns: 1fr;
    }
    .rep {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}
@media (max-width: 820px) {
    .brand-wrap {
        padding: 26px 16px 0;
    }
    .container {
        padding: 16px 16px 48px;
    }
    .main-panel,
    .ref-panel,
    .pad,
    .pad-sm {
        padding: 22px 18px;
    }
    .editor-grid {
        grid-template-columns: 1fr;
    }
    textarea {
        min-height: 200px;
    }
    .direction-bar {
        gap: 10px;
    }
    .direction-label {
        padding: 8px 14px;
        font-size: 0.8rem;
    }
    .ref-grid {
        grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    }
    .form-grid {
        grid-template-columns: 1fr;
    }
    .loc-coord {
        grid-template-columns: 1fr;
    }
    .tabbar {
        gap: 8px;
    }
    .tab {
        padding: 9px 16px;
        font-size: 0.78rem;
        letter-spacing: 0.1em;
    }
    .actions {
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PAGE 1 — Homepage (Tool Cards & Hub Layout)
   Note: Add class="page-home" to the <body> tag on Page 1.
   ═══════════════════════════════════════════════════════════════ */

/* Override global container padding for homepage spacing */
.page-home .container {
    padding: 8px 24px 56px;
}

/* Homepage Hero (Scoped to avoid colliding with Tithi Praveśa .hero) */
.page-home .hero {
    text-align: center;
    margin-bottom: 46px;
    animation: rise 0.6s ease 0.04s both;
}

/* Override global ornament margin for homepage */
.page-home .ornament {
    margin-bottom: 18px;
}

/* Homepage Subtitle (Overrides global uppercase .subtitle) */
.page-home .hero .subtitle {
    font-size: 1.06rem;
    font-weight: 400;
    color: var(--ink-soft);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.8;
    letter-spacing: normal;
    text-transform: none;
}

/* ---------- Tool Cards ---------- */
.tools {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.tool-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 44px 26px 32px;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: var(--ink);
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
    animation: rise 0.6s ease both;
}
.tool-card:nth-of-type(1) { animation-delay: 0.1s; }
.tool-card:nth-of-type(2) { animation-delay: 0.17s; }
.tool-card:nth-of-type(3) { animation-delay: 0.24s; }

/* Panel-like inset shadow for tool cards */
.tool-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.tool-card:hover {
    transform: translateY(-5px);
    border-color: var(--line-strong);
    box-shadow: 0 1px 2px rgba(140, 100, 30, 0.06), 0 20px 46px rgba(140, 100, 30, 0.16);
}

.tool-glyph {
    font-family: var(--font-dev);
    font-size: clamp(2.7rem, 5.4vw, 3.4rem);
    line-height: 1.55;
    background: linear-gradient(120deg, var(--gold-700) 0%, var(--gold-500) 50%, var(--gold-400) 65%, var(--gold-700) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.tool-card:hover .tool-glyph {
    transform: translateY(-2px) scale(1.04);
}

.tool-card h2 {
    font-family: var(--font-latin);
    font-size: 1.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--gold-700);
    margin-top: -4px;
}

.tool-tag {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.tool-desc {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ink-soft);
    max-width: 32ch;
    margin-top: 2px;
}

.tool-cta {
    margin-top: 10px;
    font-family: var(--font-latin);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 10px 24px;
    border-radius: 999px;
    color: #fffdf6;
    background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
    box-shadow: 0 4px 14px rgba(168, 125, 21, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: filter 0.3s ease, box-shadow 0.3s ease;
}
.tool-card:hover .tool-cta {
    filter: brightness(1.06);
    box-shadow: 0 6px 20px rgba(168, 125, 21, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Homepage Footer Overrides & .om class support */
.page-home footer {
    padding: 42px 24px 38px;
}
footer .om {
    font-family: var(--font-dev);
    font-size: 1.15rem;
    color: var(--gold-500);
    margin-right: 8px;
    vertical-align: middle;
    position: relative;
    top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Homepage Additions
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
    .tools {
        grid-template-columns: 1fr 1fr;
    }
    .tool-card:nth-of-type(3) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .page-home .container {
        padding: 8px 16px 40px;
    }
    .tools {
        grid-template-columns: 1fr;
    }
    .tool-card:nth-of-type(3) {
        grid-column: auto;
    }
    .tool-card {
        padding: 38px 22px 28px;
    }
    .tool-card h2 {
        font-size: 1.9rem;
    }
    .tool-desc {
        font-size: 1.02rem;
        max-width: 34ch;
    }
}
/* ═══════════════════════════════════════════════════════════════
   PAGE 4 — Monier-Williams Dictionary
   Note: Add class="page-dict" to the <body> tag on Page 4.
   ═══════════════════════════════════════════════════════════════ */

/* Unicode-ranged alias: Devanagari glyphs render in Shobhika, 
   everything else falls through to EB Garamond automatically */
@font-face {
    font-family: 'Shobhika Devanagari';
    src: url('/static/fonts/shobhika-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0900-097F;
}
@font-face {
    font-family: 'Shobhika Devanagari';
    src: url('/static/fonts/shobhika-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0900-097F;
}

/* Scope the body font for the dictionary page */
.page-dict {
    font-family: var(--font-text);
}

/* Dictionary Panel Override */
.results-panel { 
    padding: 14px 34px 22px; 
    animation: rise .6s ease .09s both; 
}

/* Search Input */
input#searchInput {
    width: 100%;
    padding: 17px 24px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--input-bg);
    color: var(--ink);
    outline: none;
    font-family: var(--font-text);
    font-size: 1.3rem;
    letter-spacing: 0.015em;
    transition: border-color .3s ease, box-shadow .3s ease;
}
input#searchInput:focus {
    border-color: var(--line-strong);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.14), var(--shadow-soft);
}
input#searchInput::placeholder { 
    color: var(--ink-muted); 
    opacity: .75; 
    font-style: italic; 
}

/* States (Loading, Empty, Error) */
.state { text-align: center; padding: 52px 20px 56px; }
.state .gem-big {
    width: 10px; height: 10px;
    transform: rotate(45deg);
    margin: 0 auto 22px;
    background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15);
}
.state.loading .gem-big { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse {
    0%, 100% { opacity: .45; transform: rotate(45deg) scale(.85); }
    50%      { opacity: 1;   transform: rotate(45deg) scale(1.2); }
}
.state h2 {
    font-family: var(--font-latin);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    margin-bottom: 10px;
}
.state p {
    font-family: var(--font-latin);
    font-size: 1rem;
    font-style: italic;
    color: var(--ink-muted);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
}
.state.error h2 { color: #a33a2a; }
.state code {
    font-style: normal;
    background: var(--output-bg);
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    padding: 1px 7px;
    font-size: 0.92em;
}

/* Dictionary Chips (Scoped to .page-dict to avoid colliding with Page 3's sky chart chips) */
.page-dict .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 26px;
}
.page-dict .chip {
    font-family: var(--font-text);
    font-size: 1.08rem;
    padding: 8px 20px;
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    background: var(--output-bg);
    color: var(--gold-700);
    cursor: pointer;
    transition: all .25s ease;
}
.page-dict .chip:hover {
    background: var(--gold-100);
    border-color: var(--line);
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

/* Entries & Headwords */
.section-label {
    font-family: var(--font-latin);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 26px 0 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-soft);
}
.section-label:first-child { margin-top: 12px; }

.entry {
    padding: 22px 6px 24px;
    border-bottom: 1px solid var(--line-soft);
    animation: rise .4s ease both;
}
.entry:last-child { border-bottom: none; }

.entry.cont {
    padding: 13px 6px 15px 28px;
    border-left: 2px solid var(--line-soft);
    border-bottom-color: rgba(168, 125, 21, 0.06);
    border-radius: 0 12px 12px 0;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.05), rgba(212, 175, 55, 0) 55%);
}

.entry-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.entry-head .spacer { flex: 1; }

.hw {
    font-family: var(--font-text);
    font-size: 1.48rem;
    font-weight: 600;
    color: var(--gold-700);
    line-height: 1.45;
    letter-spacing: 0;
}
.hw-dev {
    font-family: var(--font-dev);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--ink-soft);
    margin-left: 18px;
    padding-left: 18px;
    border-left: 1px solid var(--line-soft);
    line-height: 1.45;
    display: inline-block;
    vertical-align: baseline;
    position: relative;
    top: 2px;
}
.entry.cont .hw {
    font-size: 1.16rem;
    font-weight: 500;
    color: var(--gold-600);
}
.entry.cont .hw-dev {
    font-size: 1.05rem;
    margin-left: 14px;
    padding-left: 14px;
}
.entry.cont .entry-head { margin-bottom: 4px; }

.pc-tag {
    font-family: var(--font-latin);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    border: 1px solid var(--line-soft);
    background: var(--output-bg);
    padding: 3px 11px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Definition Typography */
.entry-body,
.entry-body * {
    font-family: var(--font-text);
    font-size: var(--body-size);
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    letter-spacing: normal;
    line-height: var(--body-line);
    color: var(--ink);
    vertical-align: baseline;
}
.entry-body { text-align: left; hyphens: none; }

.entry-body .s,
.entry-body .s1 { font-weight: 500; color: var(--gold-800); }
.entry-body .lex { font-style: italic; color: var(--ink-soft); }
.entry-body .ab {
    font-variant: small-caps;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
}
.entry-body .ls { font-style: italic; color: var(--ink-muted); }
.entry-body .lang { font-variant: small-caps; letter-spacing: 0.05em; color: var(--ink-muted); }
.entry-body .etym { font-style: italic; color: var(--ink-soft); }
.entry-body .gk   { font-style: italic; color: var(--ink-soft); }
.entry-body .pcol { color: var(--ink-muted); }
.entry-body .hom {
    font-size: 0.72em;
    font-weight: 600;
    line-height: 0;
    vertical-align: 0.55em;
    color: var(--gold-600);
    margin-right: 2px;
}
.entry-body .sense-mark {
    color: var(--gold-400);
    font-weight: 500;
    margin-right: 8px;
}
.entry-body mark {
    background: rgba(212, 175, 55, 0.30);
    border-radius: 3px;
    padding: 0 2px;
}
.entry-body .info,
.entry-body .srs { display: none; }

.load-more-wrap { text-align: center; padding: 24px 0 10px; }

/* Responsive Overrides for Dictionary */
@media (max-width: 820px) {
    .results-panel { padding-left: 18px; padding-right: 18px; }
    .hw { font-size: 1.32rem; }
    .entry.cont .hw { font-size: 1.1rem; }
    .entry { padding: 20px 2px 22px; }
    .entry.cont { padding: 12px 2px 14px 18px; }
    .entry-body, .entry-body * { font-size: 1rem; line-height: 1.85; }
    input#searchInput { font-size: 1.15rem; padding: 15px 18px; }
    .hw-dev {
        font-size: 1.15rem;
        margin-left: 12px;
        padding-left: 12px;
        position: relative;
        top: 2px;
    }
    .entry.cont .hw-dev {
        font-size: 0.95rem;
        margin-left: 10px;
        padding-left: 10px;
    }
}