/* 1. Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    margin: 0;
    min-height: 0;
    overflow: visible;
}

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

button {
    cursor: pointer;
}

/* 2. Variables */
:root {
    --primary: #b45309;
    --primary-hover: #8f3d08;
    --primary-soft: rgba(240, 164, 0, 0.14);
    --background: #f7f3eb;
    --surface: #ffffff;
    --surface-secondary: #fff9ed;
    --text: #111c24;
    --text-muted: #686159;
    --border: #eadcc5;
    --border-strong: #d7c09d;
    --table-border: #6b7280;
    --success: #15803d;
    --danger: #c52b1b;
    --danger-soft: #fee6df;
    --shadow: 0 1px 2px rgba(17, 28, 36, 0.06);
    --shadow-menu: 0 8px 24px rgba(17, 28, 36, 0.12);
    --focus: 0 0 0 3px rgba(240, 164, 0, 0.3);
    --sidebar-width: 264px;
    --sidebar-collapsed: 68px;
    --header-h: 56px;
    --menubar-h: 32px;
    --toolbar-h: 48px;
    --bottom-h: 56px;
    --radius: 8px;
    --kannada: "Noto Sans Kannada", "Noto Serif Kannada", "Arial", sans-serif;
    --ui: "Inter", "Noto Sans Kannada", system-ui, sans-serif;
    --accent: var(--primary);
    --accent-hover: var(--primary-hover);
    --accent-soft: var(--primary-soft);
    --bg: var(--background);
    --sidebar-bg: var(--surface);
    --editor-bg: var(--surface);
    --page-bg: var(--surface);
}

/* 3. App shell */
html,
body {
    background: var(--background);
    color: var(--text);
    font-family: var(--ui);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.app {
    display: grid;
    grid-template-rows: var(--header-h) minmax(0, 1fr);
    height: 100vh;
    max-height: 100vh;
    /* Prevent grid/flex min-content from stretching the shell past the viewport
       (that created a page scrollbar with empty space below the bottom bar). */
    min-height: 0;
    overflow: hidden;
    position: relative;
}

@supports (height: 100dvh) {
    .app {
        height: 100dvh;
        max-height: 100dvh;
    }
}

.app-body {
    display: flex;
    min-height: 0;
    overflow: hidden;
}

.icon-btn:focus-visible,
.menubar-btn:focus-visible,
.lang-btn:focus-visible,
.btn-voice:focus-visible,
.btn-copy:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-danger:focus-visible,
.header-title:focus-visible,
.toolbar-select:focus-visible,
.font-size-input:focus-visible,
.line-spacing-input:focus-visible,
.menu button:focus-visible,
.btn-new-file:focus-visible,
.sidebar-search input:focus-visible,
.suggestion-item:focus-visible,
.draft-item-main:focus-visible,
.sidebar-collapse:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

/* 4. Header */
.app-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 200;
    min-width: 0;
    overflow: visible;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}

.brand-logo {
    display: block;
    border-radius: 8px;
}

.brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand-copy strong {
    font-size: 14px;
    font-weight: 600;
}

.brand-copy em {
    font-style: normal;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.header-title-wrap {
    flex: 1;
    min-width: 0;
    max-width: 420px;
}

.header-title {
    width: 100%;
    border: 0;
    background: transparent;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    font-family: var(--kannada);
    padding: 6px 8px;
    border-radius: 6px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-title:hover {
    background: var(--surface-secondary);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    position: relative;
    overflow: visible;
}

.header-guide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 11px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-secondary);
    color: var(--text);
    font: 600 12px/1 var(--ui);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.header-guide-btn svg {
    color: var(--primary);
}

.header-guide-btn:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
}

.header-guide-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

.play-store-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
    border-radius: 6px;
    transition: opacity 160ms ease, transform 160ms ease;
}

.play-store-badge:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.play-store-badge:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

.play-store-badge img {
    display: block;
    height: 36px;
    width: auto;
}

.windows-download-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
    border-radius: 6px;
    transition: opacity 160ms ease, transform 160ms ease;
}

.windows-download-badge:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.windows-download-badge:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

.windows-download-badge img {
    display: block;
    height: 36px;
    width: auto;
}

.icon-sun {
    display: none;
}

html[data-theme="dark"] .icon-moon {
    display: none;
}

html[data-theme="dark"] .icon-sun {
    display: block;
}

/* 5. Sidebar */
.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 16px 12px 12px;
    z-index: 20;
    min-height: 0;
    overflow: hidden;
    transition: width 200ms ease;
}

.sidebar-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.sidebar-content::-webkit-scrollbar {
    width: 5px;
}

.sidebar-content::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--border);
}

.app.is-collapsed .sidebar {
    width: var(--sidebar-collapsed);
    padding-left: 10px;
    padding-right: 10px;
}

.app.is-collapsed .btn-new-label,
.app.is-collapsed .collapse-label,
.app.is-collapsed .sidebar-search,
.app.is-collapsed .draft-item-title,
.app.is-collapsed .draft-item-meta,
.app.is-collapsed .draft-item-text,
.app.is-collapsed .draft-group-label,
.app.is-collapsed .draft-more,
.app.is-collapsed .empty-drafts p,
.app.is-collapsed .empty-title,
.app.is-collapsed .history-toggle-label,
.app.is-collapsed .history-count,
.app.is-collapsed .history-chevron,
.app.is-collapsed .history-body {
    display: none;
}

.app.is-collapsed .history-panel.is-open .history-body {
    display: block !important;
}

.app.is-collapsed .btn-new-file {
    padding: 10px 0;
    justify-content: center;
}

.app.is-collapsed .sidebar-collapse svg {
    transform: rotate(180deg);
}

.btn-new-file {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border: 0;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    height: 40px;
    border-radius: var(--radius);
}

.btn-new-file:hover {
    background: var(--primary-hover);
}

.sidebar-footer {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.side-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.side-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}

.side-nav-item:hover {
    background: var(--surface-secondary);
}

.side-nav-item.is-active {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary);
}

.side-nav-item svg {
    flex-shrink: 0;
}

.app.is-collapsed .side-nav-label {
    display: none;
}

.app.is-collapsed .side-nav-item {
    justify-content: center;
    padding: 8px 0;
}

.sidebar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 10px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    background: var(--surface-secondary);
}

.sidebar-search input {
    border: 0;
    background: transparent;
    width: 100%;
    font-size: 13px;
    color: var(--text);
    outline: none;
}

.draft-list-wrap {
    display: none;
}

.sidebar-spacer {
    flex: 1;
    min-height: 8px;
}

.history-panel {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
}

.history-panel.is-open {
    flex: 1 1 auto;
    min-height: 220px;
}

.draft-group-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 12px 8px 6px;
}

.draft-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    transition: background 160ms ease;
}

.draft-item:hover,
.draft-item:focus-within {
    background: var(--surface-secondary);
}

.draft-item.is-active {
    background: var(--primary-soft);
}

.draft-item.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 3px;
    background: var(--primary);
}

.draft-item-icon {
    flex-shrink: 0;
    color: var(--text-muted);
    display: flex;
}

.draft-item-main {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 0;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
}

.draft-item-text {
    min-width: 0;
    flex: 1;
}

.draft-item-title {
    display: block;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.draft-item-meta,
.draft-item-preview {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.draft-more {
    opacity: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: opacity 160ms ease, background 160ms ease;
}

.draft-item:hover .draft-more,
.draft-item:focus-within .draft-more,
.draft-more[aria-expanded="true"] {
    opacity: 1;
}

.draft-more:hover {
    background: rgba(28, 25, 23, 0.06);
}

.sidebar-collapse {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 0;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    border-radius: 8px;
}

.sidebar-collapse:hover {
    background: var(--surface-secondary);
    color: var(--text);
}

.history-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 0;
    background: var(--surface-secondary);
    color: var(--text);
    padding: 12px 12px;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
    cursor: pointer;
}

.history-toggle:hover {
    background: rgba(180, 83, 9, 0.07);
}

.history-toggle[aria-expanded="true"] .history-chevron {
    transform: rotate(180deg);
}

.history-chevron {
    margin-left: auto;
    transition: transform 160ms ease;
}

.history-count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

.history-body {
    display: none;
    flex: 1;
    min-height: 0;
    overflow: auto;
    border-top: 1px solid var(--border);
    padding: 6px 6px 10px;
}

.history-panel.is-open .history-body {
    display: block !important;
    height: min(360px, 48vh);
}

.history-heading {
    margin: 4px 8px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.history-body .draft-item:hover,
.history-body .draft-item:focus-within,
.history-body .draft-item.is-active {
    background: var(--surface);
}

.history-group-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 8px 6px 4px;
}

.history-item {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 8px;
    border-radius: 8px;
    color: inherit;
    cursor: pointer;
    display: block;
}

.history-item:hover,
.history-item.is-active {
    background: var(--primary-soft);
}

.history-item-title {
    display: block;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-item-meta {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.history-item-preview {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--kannada);
}

.history-empty {
    margin: 0;
    padding: 16px 8px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
}

.empty-drafts {
    padding: 24px 8px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.empty-title {
    color: var(--text);
    font-weight: 600;
    margin: 0 0 8px;
    font-size: 14px;
}

/* 6. Editor / main */
.main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--background);
}

#editorChrome {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tool-page {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 20px 24px 32px;
}

.tool-card {
    max-width: 980px;
    margin: 0 auto;
}

.tool-heading {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
}

.tool-lead {
    margin: 0 0 20px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}

.tool-card-wide {
    max-width: 1200px;
}

.font-gallery-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.font-gallery-toolbar input[type="search"] {
    flex: 1 1 220px;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    line-height: 40px;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.font-gallery-toolbar input[type="search"]:focus {
    outline: none;
    box-shadow: var(--focus);
    border-color: var(--primary);
}

.font-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.font-tab {
    border: 1px solid var(--border);
    background: var(--surface-secondary);
    color: var(--text);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
}

.font-tab.is-active {
    background: var(--primary-soft);
    color: var(--primary);
    border-color: transparent;
}

.font-preview-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.font-preview-field input {
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font-size: 16px;
    font-family: var(--kannada);
}

.font-preview-field input:focus {
    outline: none;
    box-shadow: var(--focus);
    border-color: var(--primary);
}

.font-gallery-meta {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--text-muted);
}

.font-gallery-empty {
    margin: 8px 0 0;
    color: var(--text-muted);
    grid-column: 1 / -1;
}

#pageConverter .tool-card {
    max-width: 1500px;
}

.converter-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
}

.converter-swap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 72px;
    padding: 10px 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-secondary, var(--surface));
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
}

.converter-swap:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.converter-pane {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.converter-pane textarea {
    width: 100%;
    min-height: clamp(420px, 72vh, 900px);
    resize: vertical;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    font-size: 19px;
    line-height: 1.7;
    font-family: var(--kannada);
    color: var(--text);
    background: var(--surface);
}

.tool-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.converter-replace {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--surface-2, var(--surface));
    border: 1px solid var(--border);
    border-radius: 10px;
}

/* The converter keeps its actions above the text panes, as labelled cards. */
.activity-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2, var(--surface));
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.activity-consent input {
    width: auto;
    margin-top: 2px;
}

.converter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.conv-action {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 6px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    color: var(--text);
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

/* HTTPS clipboard bridge sits on top of Paste (mobile HTTP LAN). */
.conv-action-paste {
    position: relative;
    overflow: hidden;
}

.conv-paste-bridge {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    opacity: 0.02;
    z-index: 6;
    background: transparent;
}

.conv-action:hover {
    border-color: var(--primary);
    background: var(--surface-2, var(--surface));
    transform: translateY(-1px);
}

.conv-action:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

.conv-action svg {
    flex: 0 0 auto;
    box-sizing: content-box;
    width: 15px;
    height: 15px;
    padding: 5px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    border: 1px solid var(--border);
    border-radius: 8px;
}

.conv-action:hover svg {
    border-color: var(--primary);
}

.conv-action-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.conv-action-text strong {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

/* The hint lives in each button's tooltip so the row stays compact. */
.conv-action-text small {
    display: none;
}

.conv-action.is-primary {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}

.conv-action.is-danger:hover {
    border-color: var(--danger, #dc2626);
}

.conv-action.is-danger svg {
    color: var(--danger, #dc2626);
    background: color-mix(in srgb, var(--danger, #dc2626) 12%, var(--surface));
}

.conv-action.is-danger:hover svg {
    border-color: var(--danger, #dc2626);
}

.conv-action[aria-expanded="true"] {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
}

.converter-replace+.converter-grid {
    margin-top: 12px;
}

.converter-replace[hidden] {
    display: none;
}

.converter-replace input {
    flex: 1 1 200px;
    min-width: 140px;
    padding: 8px 10px;
    font: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.converter-replace-status {
    flex: 1 1 100%;
    font-size: 12px;
    color: var(--text-muted);
}

.font-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.font-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    background: var(--surface);
    min-width: 0;
}

.font-card-head {
    margin-bottom: 10px;
}

.font-card h3 {
    margin: 6px 0 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.2px;
    word-break: break-word;
}

.font-card-cat {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.font-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 6px;
    padding: 3px 7px;
}

.font-tag.is-unicode {
    background: #e8f5e9;
    color: #2e7d32;
}

.font-tag.is-ascii {
    background: #fff3e0;
    color: #ef6c00;
}

.font-sample {
    margin: 0 0 14px;
    padding: 18px 14px;
    min-height: 92px;
    border-radius: 12px;
    background: var(--surface-secondary);
    font-size: 24px;
    line-height: 1.55;
    color: var(--text);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.font-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
}

.font-card-actions .btn-primary,
.font-card-actions .btn-ghost {
    flex: 1 1 120px;
    text-align: center;
    text-decoration: none;
}

.tool-header-title {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 16px;
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Document menus (File / Edit / View / Insert / Format / Tools / Help) */
.menubar {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    height: var(--menubar-h);
    padding: 0 8px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    overflow: visible;
    position: relative;
    z-index: 80;
}

.menubar[hidden] {
    display: none;
}

.menubar-group {
    position: relative;
    flex-shrink: 0;
}

.menubar-translate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 30px;
    height: var(--menubar-h);
    margin-left: 2px;
    padding: 0 8px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}

.menubar-translate-btn:hover {
    background: var(--surface-secondary);
    color: var(--primary);
}

.menubar-translate-btn svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.menubar-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    padding-left: 8px;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-start;
}

.menubar-tools-sep {
    width: 1px;
    height: 18px;
    background: var(--border);
    margin: 0 2px;
    flex-shrink: 0;
}

.menubar-tools .style-picker,
.menubar-tools .toolbar-select,
.menubar-tools .font-size-input {
    height: 26px;
    font-size: 12px;
}

.menubar-tools .style-picker {
    min-width: 118px;
    max-width: 148px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
}

.menubar-tools #fontFamily.toolbar-select {
    max-width: 168px;
    min-width: 0;
}

.menubar-tools .font-size-input {
    width: 52px;
    padding: 0 4px;
}

.menubar-tools .icon-btn {
    width: 26px;
    height: 26px;
    min-width: 26px;
    font-size: 15px;
    line-height: 1;
}

.menubar-btn {
    height: var(--menubar-h);
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    border-radius: 4px;
    white-space: nowrap;
}

.menubar-btn:hover,
.menubar-btn.is-open {
    background: var(--surface-secondary);
}

.menubar-dropdown {
    position: fixed;
    top: calc(var(--header-h) + var(--menubar-h));
    left: 8px;
    min-width: 240px;
    max-height: min(70vh, 480px);
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-menu);
    padding: 6px;
    z-index: 90;
}

.menubar-dropdown-file,
.menubar-dropdown-insert,
.menubar-dropdown-format,
.menubar-dropdown-tools {
    min-width: 280px;
    max-height: min(80vh, 560px);
}

.menubar-dropdown .menu-has-sub.is-disabled {
    color: var(--text-muted);
    opacity: 0.55;
    cursor: default;
}

.menubar-dropdown .menu-has-sub.is-disabled:hover {
    background: transparent;
}

.menu-subwrap {
    position: relative;
}

.menu-arrow {
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    margin-left: auto;
}

.menubar-submenu {
    position: fixed;
    min-width: 268px;
    max-height: min(70vh, 420px);
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-menu);
    padding: 6px;
    z-index: 95;
}

/* Insert > Table size picker */
.menubar-submenu.is-table-picker {
    min-width: 0;
}

.table-grid {
    display: grid;
    grid-template-columns: repeat(10, 13px);
    gap: 2px;
    padding: 6px;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.table-grid-cell {
    width: 13px;
    height: 13px;
    box-sizing: border-box;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    border-radius: 2px;
    touch-action: none;
}

.table-grid-cell.is-on {
    border-color: var(--accent);
    background: rgba(37, 99, 235, 0.25);
    background: color-mix(in srgb, var(--accent) 30%, transparent);
}

.table-grid-label {
    padding: 2px 6px 6px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

.menubar-dropdown button,
.menubar-submenu button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text);
}

.menubar-dropdown button:hover,
.menubar-submenu button:hover,
.menubar-submenu button.is-open,
.menu-has-sub.is-open {
    background: var(--primary-soft);
}

/* Features already applied to the document are ticked and tinted. */
.menubar-dropdown button.is-checked,
.menubar-submenu button.is-checked,
.menu-has-sub.has-checked {
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 600;
}

.menubar-dropdown button.is-checked::after,
.menubar-submenu button.is-checked::after {
    content: '✓';
    margin-left: auto;
    padding-left: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
}

.menubar-dropdown button.is-checked .menu-shortcut,
.menubar-submenu button.is-checked .menu-shortcut {
    margin-left: 0;
}

.menu-shortcut {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    margin-left: auto;
}

.menu-sep {
    display: block;
    height: 1px;
    background: var(--border);
    margin: 4px 6px;
}

#editorChrome {
    position: relative;
    z-index: 70;
    background: var(--surface);
}

.find-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
    z-index: 70;
}

.find-bar[hidden] {
    display: none !important;
}

.find-bar input {
    height: 32px;
    min-width: 120px;
    flex: 1 1 140px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
}

.find-bar input:focus {
    outline: none;
    box-shadow: var(--focus);
    border-color: var(--primary);
}

/* 7. Toolbar */
.toolbar {
    min-height: var(--toolbar-h);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 70;
    min-width: 0;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.toolbar-sep {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 6px;
    flex-shrink: 0;
}

.toolbar-overflow {
    display: flex;
    align-items: center;
    gap: 4px;
}

.toolbar-more-btn {
    display: none;
}

.icon-btn {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    border-radius: 7px;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease;
}

.icon-btn:hover {
    background: var(--surface-secondary);
}

.icon-btn.is-active {
    background: var(--primary-soft);
    color: var(--primary);
}

#btnOrientation .orientation-ico {
    display: block;
}

#btnOrientation .orientation-ico[hidden] {
    display: none;
}

.toolbar-select,
.font-size-input,
.line-spacing-input,
.setting-row select {
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text);
    padding: 0 8px;
    font-size: 13px;
}

.toolbar-select {
    max-width: 168px;
}

.font-size-input,
.line-spacing-input {
    width: 64px;
    text-align: center;
    cursor: pointer;
}

.line-spacing-input {
    width: 72px;
}

.u-label {
    text-decoration: underline;
}

.color-wrap {
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 28px;
    padding-bottom: 2px;
}

.text-color-mark {
    display: block;
    font-weight: 700;
    line-height: 1;
    color: #1a1a1a;
    pointer-events: none;
}

.text-color-bar {
    display: block;
    width: 16px;
    height: 3px;
    border-radius: 1px;
    background: #1a1a1a;
    pointer-events: none;
}

.hl-mark {
    display: block;
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a1a;
    background: #ffffff;
    padding: 0 4px;
    border-radius: 2px;
    border: 1px solid var(--border);
    pointer-events: none;
}

.editor-color-pop {
    position: fixed;
    z-index: 1300;
    min-width: 220px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-menu);
    border: 1px solid var(--border);
}

.editor-color-pop[hidden] {
    display: none;
}

.editor-color-pop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.editor-color-pop-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0;
    white-space: nowrap;
}

.editor-color-pick-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    font-size: 13px;
}

.editor-color-pick-row input[type="color"] {
    width: 42px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
}

.editor-color-chip {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

/* Desktop-style spectrum (used on phones instead of the OS "Select colour" sheet). */
.nudi-spectrum {
    margin-top: 12px;
    width: min(260px, calc(100vw - 48px));
}

.nudi-spectrum[hidden] {
    display: none !important;
}

.nudi-spectrum-sv {
    position: relative;
    width: 100%;
    height: 160px;
    border-radius: 8px;
    border: 1px solid var(--border);
    cursor: crosshair;
    touch-action: none;
    background:
        linear-gradient(to top, #000, transparent),
        linear-gradient(to right, #fff, var(--nudi-spectrum-hue, #f00));
}

.nudi-spectrum-sv-thumb {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    left: 0;
    top: 0;
}

.nudi-spectrum-hue {
    position: relative;
    width: 100%;
    height: 14px;
    margin-top: 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    cursor: pointer;
    touch-action: none;
    background: linear-gradient(
        to right,
        #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%
    );
}

.nudi-spectrum-hue-thumb {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
    background: var(--nudi-spectrum-hue, #f00);
    pointer-events: none;
    left: 0;
}

.nudi-spectrum-rgb {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.nudi-spectrum-rgb label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--muted, #666);
}

.nudi-spectrum-rgb input {
    width: 100%;
    min-width: 0;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
}

.editor-color-pop.is-spectrum .editor-color-pick-row input[type="color"] {
    /* Keep the value input, but block the OS colour sheet on phones. */
    pointer-events: none;
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.editor-color-pop.is-spectrum .editor-color-chip {
    width: 42px;
    height: 32px;
    cursor: default;
}

.editor-color-pop-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.editor-color-pop-actions .btn-ghost,
.editor-color-pop-actions .btn-primary {
    min-width: 58px;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
}

/* 8. Document */
.workspace {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px 16px 20px;
    display: block;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.document {
    display: block;
    position: relative;
    width: 100%;
    min-height: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
    margin: 0;
    background: var(--page-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 24px 32px 48px;
    box-sizing: border-box;
}

.document:focus-within {
    border-color: var(--primary);
}

.editor {
    display: block;
    position: relative;
    width: 100%;
    /* Fill the document card — do not use 100vh here or the page shell grows
       taller than the viewport and leaves empty scroll space under the UI. */
    min-height: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
    font-family: var(--kannada);
    font-size: 18px;
    --editor-line-height: 1.15;
    line-height: var(--editor-line-height);
    color: var(--text);
    outline: none;
    /* Keep consecutive Spaces visible, and allow a long Space run to wrap
       onto the next line instead of growing past the page edge. */
    white-space: break-spaces;
    /* Words wrap whole, and only a word longer than the line is broken up,
       so letters are never scattered mid-word. */
    overflow-wrap: break-word;
    word-break: normal;
}

.editor p,
.editor div {
    margin: 0;
    padding: 0;
}

/* Half-typed Kannada/Nudi words keep a stable size and baseline on the line. */
#nudi-compose,
.nudi-compose {
    display: inline;
    vertical-align: baseline;
    line-height: inherit;
    color: inherit;
    -webkit-text-fill-color: currentColor;
    opacity: 1;
    visibility: visible;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.nudi-caret {
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 1px;
    background: var(--text, #111);
    pointer-events: none;
    /* Inside the document sheet so it paints with the text, not behind chrome. */
    z-index: 8;
    display: none;
    transform: translate3d(-100px, -100px, 0);
    will-change: transform;
    animation: nudi-caret-blink 1s step-end infinite;
}

.nudi-caret.is-on {
    display: block;
    opacity: 1;
    visibility: visible;
}

@keyframes nudi-caret-blink {
    0%,
    49% {
        opacity: 1;
    }
    50%,
    100% {
        opacity: 0;
    }
}

html.is-mobile-caret .editor {
    caret-color: transparent;
    color: var(--text, #1a1a1a);
    -webkit-text-fill-color: var(--text, #1a1a1a);
    touch-action: pan-y;
}

/* Single taps must not create a native text selection on phones.
   Selection is only allowed in our long-press / double-tap mode. */
html.is-mobile-caret:not(.is-ime-selecting) .editor,
html.is-mobile-caret:not(.is-ime-selecting) .editor * {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

/* WebKit treats caret-color:transparent as text-fill unless fill is set,
   which made Kannada/Nudi letters count as characters but stay invisible. */
html.is-mobile-caret .editor * {
    caret-color: transparent;
    -webkit-text-fill-color: currentColor;
}

html.is-mobile-caret #nudi-compose,
html.is-mobile-caret .nudi-compose {
    color: inherit;
    -webkit-text-fill-color: currentColor;
    opacity: 1;
    visibility: visible;
}

/* Gboard on Realme treats element opacity near 0 as "hidden" and drops the
   keyboard. Keep opacity at 1 and hide the field with transparent text.
   Default display:none — a full-screen host (even with pointer-events:none)
   blocks converter/tool taps on some Android WebViews. */
.nudi-ime-host {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    resize: none;
    overflow: hidden;
    opacity: 1;
    color: transparent;
    caret-color: transparent;
    background: transparent;
    pointer-events: none !important;
    z-index: 6;
    display: none;
    font-size: 16px;
    line-height: 1.2;
    white-space: pre;
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: none;
    -webkit-text-fill-color: transparent;
    touch-action: manipulation;
    transform: none;
}

.nudi-ime-host.is-on {
    display: block;
    /* Never capture page scrolls / footer taps — only the editor opens the keyboard. */
    pointer-events: none !important;
}

/* Tool pages (converter, fonts, …): force the editor IME layer away. */
body.is-tool-page .nudi-ime-host,
body.is-tool-page .nudi-ime-host.is-on,
body.is-tool-page .nudi-ime-kick,
body.is-save-naming .nudi-ime-host,
body.is-save-naming .nudi-ime-host.is-on,
body.is-save-naming .nudi-ime-kick {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
    width: 0 !important;
    height: 0 !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* Tiny kick field used only to spawn the soft keyboard on tap. */
.nudi-ime-kick {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0.01;
    font-size: 16px;
    z-index: 5;
    pointer-events: none;
    background: transparent;
    color: transparent;
    caret-color: transparent;
}

html.is-ime-selecting .nudi-ime-host,
html.is-ime-selecting .nudi-ime-host.is-on {
    pointer-events: none !important;
    -webkit-user-select: none;
    user-select: none;
}

html.is-ime-selecting .nudi-caret {
    display: none !important;
}

html.is-ime-selecting .editor {
    caret-color: transparent;
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: none;
    touch-action: none;
}

html.is-ime-selecting .editor,
html.is-ime-selecting .editor * {
    -webkit-user-select: text !important;
    user-select: text !important;
}

html.is-ime-selecting #workspace,
html.is-ime-selecting #document {
    touch-action: none;
}

html.is-ime-selecting .editor ::selection {
    background: rgba(26, 115, 232, 0.32);
    color: inherit;
    -webkit-text-fill-color: currentColor;
}

.nudi-select-bar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 90;
    display: flex;
    align-items: stretch;
    background: #1f2933;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.28);
    overflow: hidden;
    pointer-events: auto;
    transform: translate3d(-9999px, -9999px, 0);
}

.nudi-select-bar[hidden] {
    display: none !important;
}

.nudi-select-bar button {
    appearance: none;
    margin: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: 600 14px/1 var(--sans, inherit);
    padding: 10px 18px;
    min-height: 40px;
    cursor: pointer;
}

.nudi-select-bar button + button {
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.nudi-select-bar button:active {
    background: rgba(255, 255, 255, 0.12);
}

.nudi-select-handle {
    position: fixed;
    left: 0;
    top: 0;
    width: 44px;
    height: 44px;
    z-index: 88;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    touch-action: none;
    pointer-events: auto;
    transform: translate3d(-9999px, -9999px, 0);
    -webkit-tap-highlight-color: transparent;
}

.nudi-select-handle[hidden] {
    display: none !important;
}

.nudi-select-handle::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 6px;
    width: 2px;
    height: 10px;
    margin-left: -1px;
    background: #1a73e8;
}

.nudi-select-handle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 14px;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    background: #1a73e8;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

/* Paragraph borders are drawn on the block itself so they show in the page.
   Pagination splits bordered blocks at page edges so lines never run through
   the gap between sheets. */
.editor [data-nudi-border] {
    box-sizing: border-box;
}

.editor .nudi-line {
    display: block;
}

.editor:empty::before {
    content: attr(data-placeholder);
    color: #a8a29e;
    pointer-events: none;
}

.editor table {
    border-collapse: collapse;
    width: 100%;
    margin: 12px 0;
}

.editor td,
.editor th {
    border: 1px solid var(--table-border);
    padding: 6px 8px;
    min-width: 48px;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    word-wrap: break-word;
    vertical-align: top;
    box-sizing: border-box;
}

.editor td .nudi-compose,
.editor th .nudi-compose,
.editor td #nudi-compose,
.editor th #nudi-compose {
    white-space: normal;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.editor th {
    background: var(--accent-soft);
    font-weight: 700;
}

/* ==========================================================================
   Date smart chip calendar
   ========================================================================== */

.date-pop {
    position: fixed;
    z-index: 260;
    width: 280px;
    max-width: 94vw;
    padding: 10px 12px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-menu);
}

.date-pop[hidden],
.date-pop [hidden] {
    display: none !important;
}

.date-pop-head {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}

.date-pop-month {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 600;
}

.date-pop-nav {
    width: 28px;
    height: 28px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--text-muted);
}

.date-pop-nav:hover {
    background: var(--surface-secondary);
    color: var(--text);
}

.date-pop-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}

.date-pop-dow {
    padding: 4px 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.date-pop-day {
    padding: 6px 0;
    font-size: 13px;
    cursor: pointer;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--text);
}

.date-pop-day:hover {
    background: var(--surface-secondary);
}

.date-pop-day.is-outside {
    color: var(--text-muted);
    opacity: .55;
}

.date-pop-day.is-today {
    font-weight: 700;
    color: var(--primary);
}

.date-pop-day.is-chosen {
    background: var(--primary);
    color: #fff;
}

.date-pop-today {
    margin: 8px 0 4px;
    padding: 4px 2px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: none;
    color: var(--primary);
}

.date-pop.is-time-only {
    width: 300px;
}

.date-pop.is-time-only {
    padding: 12px;
}

.date-pop.is-time-only .date-pop-foot {
    padding-top: 0;
    border-top: none;
    flex-wrap: wrap;
}

.date-pop-ampm {
    display: inline-flex;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.date-pop-ampm button {
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: var(--surface-secondary);
    color: var(--text-muted);
}

.date-pop-ampm button.is-on {
    background: var(--primary);
    color: #fff;
}

.date-pop-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.date-pop-clock {
    color: var(--text-muted);
}

.date-pop-time,
.date-pop-zone {
    min-width: 0;
    flex: 1 1 0;
    padding: 6px 8px;
    font-size: 13px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-secondary);
    color: var(--text);
}

.date-pop-zone:disabled {
    opacity: .5;
}

.date-pop-ok {
    flex: 0 0 auto;
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
}

/* ==========================================================================
   Email draft building block
   ========================================================================== */

.editor .nudi-email {
    margin: 18px 0;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.editor .nudi-email-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-secondary);
}

.editor .nudi-email-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 15px;
    cursor: pointer;
    user-select: none;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--danger);
}

.editor .nudi-email-title {
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.editor .nudi-email-send {
    padding: 5px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
}

.editor .nudi-email-icon:hover,
.editor .nudi-email-send:hover {
    filter: brightness(1.06);
    border-color: var(--primary);
}

.editor table.nudi-email-fields {
    width: 100%;
    margin: 0;
    table-layout: auto;
    border: none;
}

.editor .nudi-email-fields td {
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 7px 12px;
    vertical-align: middle;
}

.editor .nudi-email-label {
    width: 72px;
    font-size: 13px;
    text-align: right;
    font-weight: 600;
    color: var(--text-muted);
    background: none;
    user-select: none;
}

.editor .nudi-email-value {
    min-height: 32px;
}

.editor .nudi-email-subject {
    font-weight: 600;
}

.editor .nudi-email-body {
    padding: 12px;
    min-height: 96px;
}

.editor .nudi-email-body p {
    margin: 0 0 8px;
}

.nudi-person {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 2px 4px 2px 0;
    padding: 2px 8px;
    font-size: 13px;
    line-height: 1.6;
    cursor: pointer;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-secondary);
    color: var(--text-muted);
}

.nudi-person.is-filled {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--text);
}

.nudi-person-icon {
    font-size: 9px;
}

.nudi-person-x {
    padding-left: 2px;
    font-size: 14px;
    opacity: .6;
}

.nudi-person-x:hover {
    opacity: 1;
}

/* Person picker */

.person-pop {
    position: fixed;
    z-index: 260;
    width: 280px;
    max-width: 92vw;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-menu);
}

.person-pop[hidden] {
    display: none !important;
}

.person-pop-search input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-secondary);
    color: var(--text);
}

.person-pop-list {
    max-height: 260px;
    overflow-y: auto;
    margin-top: 6px;
}

.person-pop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    text-align: left;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--text);
}

.person-pop-item:hover {
    background: var(--surface-secondary);
}

.person-pop-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
}

.person-pop-text {
    display: grid;
    min-width: 0;
}

.person-pop-name,
.person-pop-mail {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.person-pop-mail {
    font-size: 12px;
    color: var(--text-muted);
}

.person-pop-empty {
    margin: 10px 8px;
    font-size: 12px;
    color: var(--text-muted);
}

/* While cells are being picked, the drag must not select text as well. */
body.is-picking-cells .editor {
    user-select: none;
}

/* Cells picked out by dragging across the table. */
.editor td.is-cell-selected,
.editor th.is-cell-selected {
    background: var(--primary-soft);
    box-shadow: inset 0 0 0 1px var(--primary);
}

.split-card .modal-body {
    display: grid;
    gap: 12px;
}

.split-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.split-row input {
    width: 96px;
}

/* A pinned header row stays visible while a long table scrolls. */
.editor thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.editor td[data-col-type="number"],
.editor td[data-col-type="currency"] {
    font-variant-numeric: tabular-nums;
}

.editor td[data-col-type="checkbox"] {
    cursor: pointer;
    user-select: none;
}

/* While a row or column is being dragged, keep the resize cursor and stop
   the drag from selecting text across the document. */
.table-move-handle {
    position: fixed;
    z-index: 205;
    width: 20px;
    height: 20px;
    padding: 0;
    line-height: 1;
    font-size: 12px;
    cursor: move;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

.table-move-handle:hover {
    color: var(--text);
    border-color: var(--accent);
}

.table-move-handle[hidden] {
    display: none !important;
}

/* A table the user has dragged out of the text flow. */
.editor table.is-free {
    position: absolute;
    z-index: 2;
    background: var(--page-bg, #fff);
}

body.is-resizing-table * {
    cursor: inherit !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    touch-action: none !important;
}

body.is-resizing-table .editor td,
body.is-resizing-table .editor th {
    outline: 1px solid var(--accent);
    outline-offset: -1px;
}

/* Easy table resize: big grabbers appear when a table is tapped/active. */
.editor table.is-table-active td,
.editor table.is-table-active th {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--table-border, #d6d3d1));
}

.table-resize-layer {
    position: fixed;
    inset: 0;
    z-index: 204;
    pointer-events: none;
}

.table-resize-layer[hidden] {
    display: none !important;
}

.table-resize-grip {
    position: fixed;
    pointer-events: none; /* full strips must not steal typing taps in cells */
    z-index: 205;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.table-resize-grip.is-col {
    cursor: col-resize;
}

.table-resize-grip.is-row {
    cursor: row-resize;
}

.table-resize-knob {
    pointer-events: auto; /* only the visible knob starts resize */
    border-radius: 999px;
    background: var(--accent, #2563eb);
    box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, 0.25);
    opacity: 0.95;
    touch-action: none;
}

.table-resize-grip.is-col .table-resize-knob {
    width: 6px;
    height: 36px;
}

.table-resize-grip.is-row .table-resize-knob {
    width: 36px;
    height: 6px;
}

.table-resize-grip:active .table-resize-knob,
body.is-resizing-table .table-resize-knob {
    background: color-mix(in srgb, var(--accent, #2563eb) 80%, #000);
    transform: scale(1.15);
}

.table-resize-guide {
    position: fixed;
    z-index: 206;
    pointer-events: none;
    background: var(--accent, #2563eb);
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
    opacity: 0.85;
}

.table-resize-guide[hidden] {
    display: none !important;
}

.editor img {
    max-width: 100%;
    height: auto;
}

/* 9. Suggestion dropdown */
.suggestions {
    position: fixed;
    /* Above editor controls and standard modals, including Fill Template. */
    z-index: 1400;
    min-width: 220px;
    max-width: 340px;
    max-height: none;
    overflow: visible;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-menu);
    padding: 4px;
    -webkit-user-select: none;
    user-select: none;
    touch-action: pan-y;
    overscroll-behavior: contain;
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 6px 10px;
    border-radius: 7px;
    font-family: var(--kannada);
    font-size: 16px;
    color: var(--text);
    cursor: pointer;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.suggestion-item.is-latin span:last-child {
    font-family: inherit;
    font-style: italic;
    letter-spacing: 0.02em;
}

.suggestion-index {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border-radius: 4px;
    background: var(--primary-soft);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

/* 10. Bottom controls */
.bottom-bar {
    min-height: var(--bottom-h);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    position: relative;
    z-index: 70;
}

.lang-switch {
    display: inline-flex;
    background: var(--surface-secondary);
    border-radius: 999px;
    padding: 3px;
    border: 1px solid var(--border);
}

.lang-btn {
    border: 0;
    background: transparent;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    font-family: var(--kannada);
    transition: background 160ms ease, color 160ms ease;
}

.lang-btn.is-active {
    background: var(--primary-soft);
    color: var(--primary);
}

.bottom-status {
    font-size: 12px;
}

.bottom-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-voice,
.btn-copy,
.btn-full-page {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    transition: background 160ms ease, border-color 160ms ease;
}

.btn-voice:hover,
.btn-copy:hover,
.btn-full-page:hover {
    background: var(--surface-secondary);
}

.btn-full-page.is-active {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
}

.mobile-page-pan {
    display: none !important;
}

/* Full-width page scrubber — grey drag bar with left/right handles (mobile). */
.mobile-page-scrubber {
    display: none;
    flex-shrink: 0;
    padding: 4px 10px 6px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 71;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.page-scrub-bar {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    height: 32px;
    padding: 3px 4px;
    border-radius: 999px;
    background: #e8eaed;
    border: 1px solid var(--border);
    box-sizing: border-box;
}

.page-scrub-handle {
    flex: 0 0 28px;
    width: 28px;
    height: 26px;
    border: 0;
    background: #fff;
    color: var(--text);
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
}

.page-scrub-handle:active {
    background: var(--primary-soft);
    color: var(--primary);
}

.page-scrub-track {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 26px;
    margin: 0 2px;
    border-radius: 999px;
    background: transparent;
    overflow: hidden;
    touch-action: none;
}

.page-scrub-thumb {
    position: absolute;
    top: 3px;
    left: 0;
    width: 40px;
    height: 20px;
    border-radius: 999px;
    background: var(--primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    cursor: grab;
    touch-action: none;
}

.page-scrub-thumb::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 10px;
    transform: translate(-50%, -50%);
    background:
        linear-gradient(currentColor, currentColor) 0 0 / 2px 100%,
        linear-gradient(currentColor, currentColor) 6px 0 / 2px 100%,
        linear-gradient(currentColor, currentColor) 12px 0 / 2px 100%;
    background-repeat: no-repeat;
    color: rgba(255, 255, 255, 0.85);
    opacity: 0.9;
}

.page-scrub-thumb:active {
    cursor: grabbing;
}

.btn-voice.is-listening {
    border-color: #ef4444;
    background: #fef2f2;
    color: #b91c1c;
}

.mic-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
}

.btn-voice.is-listening .mic-icon {
    animation: pulse 1.2s ease-in-out infinite;
    color: #ef4444;
}

@keyframes pulse {
    50% {
        transform: scale(1.12);
        opacity: 0.8;
    }
}

.save-status {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Shown only where they describe the page: the counter on typing and converter pages, the
   save status on typing pages. Their display rules would otherwise override [hidden]. */
.header-doc-stats[hidden],
.save-status[hidden] {
    display: none !important;
}

.header-doc-stats {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    height: 34px;
    padding: 0 12px 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-secondary);
    color: var(--text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    cursor: default;
    user-select: none;
}

.header-doc-stats-ico {
    flex-shrink: 0;
    color: var(--primary);
    opacity: 0.9;
}

.header-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}

.header-stat-value {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
    min-width: 0.75ch;
}

.header-stat-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: none;
}

.header-stat-divider {
    width: 1px;
    height: 16px;
    background: var(--border);
    flex-shrink: 0;
}

.save-status.is-ok::before {
    content: "✓ ";
    color: var(--success);
}

.save-status.is-saving {
    color: #b45309;
}

.save-status.is-error {
    color: var(--danger);
}

.save-status.is-error::before,
.save-status.is-saving::before {
    content: none;
}

/* 11. Modals */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(28, 25, 23, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Above the image selection overlay and its floating toolbar. */
    z-index: 400;
    padding: 16px;
}

.modal[hidden],
.suggestions[hidden],
.menu[hidden],
.menubar-dropdown[hidden],
.menubar-submenu[hidden],
.toast[hidden],
.sidebar-backdrop[hidden],
.empty-drafts[hidden],
.tool-page[hidden],
#editorChrome[hidden],
#docTitleWrap[hidden],
#toolTitle[hidden] {
    display: none !important;
}

/* Visually hidden but still openable via .click() on mobile (unlike [hidden]). */
.file-input-hidden {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0.01 !important;
    overflow: hidden !important;
    border: 0 !important;
    z-index: 0 !important;
}

.modal-card {
    background: var(--surface);
    color: var(--text);
    width: min(420px, 100%);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow-menu);
    animation: pop 180ms ease;
}

@keyframes pop {
    from {
        transform: translateY(6px);
        opacity: 0.7;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

.modal-card h2 {
    margin: 0 0 12px;
    font-size: 18px;
}

.modal-card input[type="text"] {
    width: 100%;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 10px;
    background: var(--surface-secondary);
    color: var(--text);
    font-size: 16px;
    -webkit-user-select: text;
    user-select: text;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* ---------- Document details modal ---------- */

.doc-details-card {
    width: min(440px, 94vw);
    border-radius: 24px;
    padding: 24px 28px 32px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
    background: var(--surface);
    color: var(--text);
}

.doc-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.doc-details-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    color: var(--text);
    line-height: 1.3;
}

.doc-details-close {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
    margin-right: -6px;
}

.doc-details-close:hover {
    background: var(--surface-secondary);
    color: var(--text);
}

.doc-details-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.doc-details-row {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 1.4;
}

.doc-details-label {
    width: 110px;
    flex-shrink: 0;
    color: var(--text-muted);
    font-weight: 400;
}

.doc-details-value {
    color: var(--text);
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    word-break: break-word;
}

.doc-details-folder-icon {
    color: var(--text);
    flex-shrink: 0;
}

/* ---------- Page setup modal ---------- */

.page-setup-card {
    width: min(520px, 94vw);
    border-radius: 24px;
    padding: 24px 28px 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
    background: var(--surface);
    color: var(--text);
}

.page-setup-title {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 400;
    color: var(--text);
}

.page-setup-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}

.page-setup-tab {
    background: transparent;
    border: 0;
    padding: 8px 0 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    position: relative;
    cursor: pointer;
    transition: color 150ms ease;
}

.page-setup-tab:hover {
    color: var(--text);
}

.page-setup-tab.is-active {
    color: var(--primary);
    font-weight: 600;
}

.page-setup-tab.is-active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--primary);
    border-radius: 3px 3px 0 0;
}

.page-setup-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.page-setup-panel[hidden],
.page-setup-panel.is-hidden {
    display: none !important;
}

.page-setup-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.page-setup-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}

.page-setup-select {
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 12px;
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    outline: none;
    cursor: pointer;
    transition: border-color 150ms ease;
}

.page-setup-select:focus {
    border-color: var(--primary);
    box-shadow: var(--focus);
}

.orientation-radio-group {
    display: flex;
    gap: 24px;
    padding: 4px 0;
}

.radio-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
}

.radio-label input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

.page-setup-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.color-picker-trigger-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
}

.page-color-trigger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.page-color-trigger-btn:hover {
    border-color: var(--border-strong);
}

.page-color-trigger-btn:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--focus);
}

.color-btn-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.color-btn-arrow {
    color: var(--text-muted);
    flex-shrink: 0;
}

/* ---------- Color Palette Popover Dropdown ---------- */

.color-palette-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1050;
    width: 260px;
    padding: 16px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
    box-sizing: border-box;
}

.color-palette-popover[hidden] {
    display: none !important;
}

.palette-section-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.palette-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
    margin-bottom: 16px;
}

.color-swatch-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 120ms ease, box-shadow 120ms ease;
    box-sizing: border-box;
}

.color-swatch-btn:hover {
    transform: scale(1.2);
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.color-swatch-btn.is-selected {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary);
}

.swatch-check {
    pointer-events: none;
}

.palette-custom-section {
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

.palette-custom-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.custom-color-add-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px dashed var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 18px;
    font-weight: 400;
    transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
    box-sizing: border-box;
}

.custom-color-add-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-soft);
}

.page-color-select {
    width: 100%;
    padding-right: 38px;
}

.color-preview-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    position: absolute;
    right: 10px;
    pointer-events: none;
    background: #ffffff;
}

.margins-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.margin-input-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.margin-input-col input {
    width: 100%;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 8px;
    text-align: center;
    font-size: 14px;
    background: var(--surface);
    color: var(--text);
    box-sizing: border-box;
}

.margin-input-col input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--focus);
}

.pageless-hint {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 0 8px;
}

.page-setup-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.btn-link-flat {
    background: transparent;
    border: 0;
    color: var(--primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    transition: text-decoration 150ms ease;
}

.btn-link-flat:hover {
    text-decoration: underline;
}

.page-setup-footer-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-ghost-rounded {
    border: 0;
    background: transparent;
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 150ms ease;
}

.btn-ghost-rounded:hover {
    background: var(--primary-soft);
}

.btn-primary-rounded {
    border: 0;
    background: var(--primary);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 24px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 150ms ease;
}

.btn-primary-rounded:hover {
    background: var(--primary-hover);
}

.help-list {
    margin: 0;
    padding-left: 18px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.55;
}

.help-list li+li {
    margin-top: 8px;
}

.help-list code,
.help-list kbd {
    font-size: 12px;
    background: var(--surface-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 4px;
}

/* 12. Menus / buttons */
.draft-menu,
.menu {
    position: absolute;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-menu);
    min-width: 180px;
    z-index: 40;
    padding: 6px;
}

.menu {
    right: 0;
    top: 40px;
}

.draft-menu {
    right: 8px;
    top: 36px;
}

.draft-menu button,
.menu button {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text);
}

.draft-menu button:hover,
.menu button:hover {
    background: var(--primary-soft);
}

.more-wrap {
    position: relative;
    flex-shrink: 0;
}

.btn-primary,
.btn-ghost,
.btn-danger {
    border: 0;
    border-radius: 8px;
    padding: 8px 14px;
    font-weight: 600;
    font-size: 13px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
}

.btn-primary:hover {
    background: var(--primary-hover);
}

.btn-ghost {
    background: transparent;
    color: var(--text);
}

.btn-ghost:hover {
    background: var(--surface-secondary);
}

.btn-danger {
    background: var(--danger);
    color: #fff;
}

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0;
}

.setting-guide-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-secondary);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.setting-guide-row:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.setting-guide-icon,
.guide-language-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 19px;
    font-weight: 700;
}

.setting-guide-copy {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}

.setting-guide-copy strong {
    font-size: 14px;
}

.setting-guide-copy small,
.guide-language-card small {
    color: var(--text-muted);
    font-size: 12px;
}

.setting-guide-arrow {
    color: var(--text-muted);
    font-size: 24px;
}

.guide-modal {
    padding: 12px;
}

.guide-modal-card {
    width: min(760px, 100%);
    height: min(86vh, 820px);
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.guide-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}

.guide-modal-header>div {
    min-width: 0;
    flex: 1;
}

.guide-modal-header h2 {
    margin: 0;
    color: var(--primary);
    font-size: 20px;
}

.guide-modal-header p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.guide-back-btn,
.guide-close-btn {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text);
    font-size: 24px;
    cursor: pointer;
}

.guide-back-btn:hover,
.guide-close-btn:hover {
    background: var(--surface-secondary);
}

.guide-language-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 28px;
    overflow: auto;
}

.guide-language-picker.has-features-guide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.guide-language-picker[hidden],
.guide-content[hidden],
.guide-back-btn[hidden] {
    display: none !important;
}

.guide-language-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 112px;
    padding: 20px;
    border: 2px solid color-mix(in srgb, var(--primary) 14%, var(--border));
    border-radius: 18px;
    background: color-mix(in srgb, var(--primary) 5%, var(--surface));
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.guide-language-card.is-english {
    border-color: color-mix(in srgb, #2563eb 16%, var(--border));
    background: color-mix(in srgb, #2563eb 5%, var(--surface));
}

.guide-language-card.is-english .guide-language-icon {
    color: #2563eb;
    background: color-mix(in srgb, #2563eb 12%, transparent);
}

.guide-language-card.is-features {
    border-color: color-mix(in srgb, #0f766e 18%, var(--border));
    background: color-mix(in srgb, #0f766e 6%, var(--surface));
}

.guide-language-card.is-features .guide-language-icon {
    color: #0f766e;
    background: color-mix(in srgb, #0f766e 12%, transparent);
}

.guide-language-card>span:nth-child(2) {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 5px;
}

.guide-language-card strong {
    font-size: 17px;
}

.guide-language-card>span:last-child {
    color: var(--text-muted);
    font-size: 24px;
}

.guide-language-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.guide-content {
    flex: 1;
    min-height: 0;
    padding: 18px;
    overflow-y: auto;
}

.guide-intro-card,
.guide-feature-card,
.guide-mode-card,
.guide-note-card {
    margin-bottom: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.guide-intro-card {
    border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
    background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}

.guide-feature-card,
.guide-mode-card {
    background: var(--surface-secondary);
}

.guide-note-card {
    border-color: color-mix(in srgb, #f59e0b 25%, var(--border));
    background: color-mix(in srgb, #f59e0b 6%, var(--surface));
}

.guide-content h3 {
    margin: 0 0 8px;
    font-size: 16px;
}

.guide-content p,
.guide-content li {
    font-size: 14px;
    line-height: 1.55;
}

.guide-content p {
    margin: 0;
    color: var(--text-muted);
}

.guide-content ul {
    margin: 0;
    padding-left: 20px;
}

.guide-feature-card li {
    list-style: none;
    margin: 5px 0;
}

.guide-section {
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
}

.guide-section summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 15px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.guide-section summary::-webkit-details-marker {
    display: none;
}

.guide-section[open] summary {
    color: var(--primary);
    background: var(--primary-soft);
}

.guide-howto-list {
    margin: 0;
    padding: 4px 12px 14px;
}

.guide-howto-row {
    display: grid;
    grid-template-columns: minmax(140px, 38%) 1fr;
    gap: 10px 16px;
    padding: 10px 4px;
    border-top: 1px solid var(--border);
}

.guide-howto-row:first-child {
    border-top: 0;
}

.guide-howto-row dt {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
}

.guide-howto-row dd {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

@media (max-width: 640px) {
    .guide-howto-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

.guide-table-wrap {
    overflow-x: auto;
}

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

.guide-key-table th,
.guide-key-table td {
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    text-align: left;
    font-size: 14px;
}

.guide-key-table th {
    background: var(--surface-secondary);
    color: var(--text-muted);
    font-size: 12px;
}

.guide-key-table td:first-child {
    width: 34%;
    font-size: 17px;
    font-weight: 600;
}

.guide-key-table code {
    color: #2563eb;
    font-size: 12px;
    white-space: normal;
}

@media (max-width: 600px) {
    .guide-modal {
        padding: 0;
    }

    .guide-modal-card {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }

    .guide-language-picker {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .guide-language-picker.has-features-guide {
        grid-template-columns: 1fr;
    }

    .guide-modal-header {
        padding: 12px;
    }

    .guide-content {
        padding: 12px;
    }
}

/* ---------- document templates ---------- */
.templates-page {
    align-items: flex-start;
    overflow-y: auto;
}

.template-browser {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: 24px;
    box-sizing: border-box;
}

.template-browser-header,
.template-browser-controls,
.template-section-heading,
.template-card-top,
.template-card-meta,
.template-card-actions,
.template-modal-header {
    display: flex;
    align-items: center;
}

.template-browser-header {
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.template-browser-header .tool-heading,
.template-browser-header .tool-lead {
    margin-bottom: 4px;
}

.template-result-count {
    flex-shrink: 0;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--surface-secondary);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.template-browser-controls {
    align-items: stretch;
    gap: 12px;
    margin-bottom: 14px;
}

.template-search {
    min-width: 240px;
    display: flex;
    align-items: center;
    flex: 1;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-muted);
}

.template-search:focus-within {
    border-color: var(--primary);
    box-shadow: var(--focus);
}

.template-search input {
    width: 100%;
    height: 42px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
}

.template-language-filter {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-secondary);
}

.template-language-filter button,
.template-category-tab {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: 600 12px/1 var(--ui);
    cursor: pointer;
}

.template-language-filter button {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 7px;
}

.template-language-filter button.is-active,
.template-category-tab.is-active {
    background: var(--primary);
    color: #fff;
}

.template-language-filter button:focus-visible,
.template-category-tab:focus-visible,
.template-card button:focus-visible,
.template-mini-card:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.template-category-tabs {
    display: flex;
    gap: 7px;
    padding: 2px 2px 10px;
    margin-bottom: 12px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.template-category-tab {
    min-height: 34px;
    padding: 0 12px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
}

.template-strip-section {
    margin: 12px 0 20px;
}

.template-section-heading {
    gap: 8px;
    margin-bottom: 9px;
}

.template-section-heading h2 {
    margin: 0;
    font-size: 15px;
}

.template-section-heading span {
    color: var(--text-muted);
    font-size: 12px;
}

.template-mini-list {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding: 2px 2px 7px;
}

.template-mini-card {
    min-width: 205px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.template-mini-card:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.template-mini-card>span:first-child {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: var(--primary-soft);
    color: var(--primary);
}

.template-mini-card>span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.template-mini-card strong,
.template-mini-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.template-mini-card strong {
    font-size: 12px;
}

.template-mini-card small {
    color: var(--text-muted);
    font-size: 11px;
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.template-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.035);
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.template-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
    box-shadow: var(--shadow);
}

.template-card-top {
    justify-content: space-between;
    margin-bottom: 12px;
}

.template-card-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 21px;
}

.template-favorite-btn {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--border-strong);
    font-size: 20px;
    cursor: pointer;
}

.template-favorite-btn:hover {
    background: var(--surface-secondary);
}

.template-favorite-btn.is-favorite {
    color: #e0a000;
}

.template-card h2,
.template-card h3 {
    overflow-wrap: anywhere;
}

.template-card h2 {
    margin: 0 0 3px;
    font-size: 16px;
}

.template-card h3 {
    min-height: 1.45em;
    margin: 0 0 9px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
}

.template-card>p {
    min-height: 3.9em;
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.template-card-meta {
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    margin-bottom: 13px;
}

.template-card-meta span {
    padding: 4px 7px;
    border-radius: 999px;
    background: var(--surface-secondary);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
}

.template-card-actions {
    gap: 8px;
}

.template-card-actions button {
    min-height: 36px;
    flex: 1;
    padding: 0 10px;
}

.template-empty {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    padding: 52px 20px;
    color: var(--text-muted);
}

.template-empty strong {
    color: var(--text);
}

.template-preview-modal-card {
    width: min(960px, 100%);
    height: min(92vh, 900px);
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.template-fill-modal-card {
    width: min(680px, 100%);
    max-height: min(92vh, 850px);
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.template-modal-header {
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.template-modal-header h2 {
    margin: 0 0 3px;
}

.template-modal-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
}

.template-preview-stage {
    display: flex;
    align-items: flex-start;
    flex: 1;
    gap: 18px;
    padding: 22px;
    overflow: auto;
    background: #e9ecef;
}

.template-preview-paper {
    width: 640px;
    min-width: 640px;
    min-height: 905px;
    padding: 72px 68px;
    box-sizing: border-box;
    background: #fff;
    color: #1f2937;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.14);
    font-family: "Noto Sans Kannada", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: break-word;
}

.template-preview-paper.is-landscape {
    width: 905px;
    min-width: 905px;
    min-height: 640px;
}

.template-preview-paper p {
    margin: 0;
    min-height: 1.5em;
}

.template-preview-paper table {
    max-width: 100%;
}

.template-modal-actions {
    padding: 12px 18px;
    border-top: 1px solid var(--border);
}

#templateFillForm {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
}

.template-fill-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    padding: 18px;
    overflow-y: auto;
}

.template-fill-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.template-fill-field:has(textarea) {
    grid-column: 1 / -1;
}

.template-fill-field>span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.template-fill-field input,
.template-fill-field textarea {
    width: 100%;
    min-height: 40px;
    padding: 9px 10px;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: 0;
    background: var(--surface);
    color: var(--text);
    font: 14px/1.4 var(--ui);
}

.template-fill-field textarea {
    resize: vertical;
}

.template-fill-repeater {
    grid-column: 1 / -1;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.template-fill-repeater legend {
    padding: 0 6px;
    font-weight: 700;
}

.template-repeater-list {
    display: grid;
    gap: 8px;
}

.template-repeater-row {
    display: grid;
    grid-template-columns: 18px 26px repeat(2, minmax(0, 1fr)) auto;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border-radius: 8px;
    background: var(--surface-muted);
}

.template-repeater-row.is-dragging {
    opacity: .55;
}

.template-repeater-drag {
    cursor: grab;
    color: var(--text-muted);
}

.template-repeater-number {
    font-weight: 700;
    color: var(--text-muted);
}

.template-repeater-row input,
.template-repeater-row textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text);
}

.template-repeater-remove {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--danger, #b42318);
    font-size: 20px;
}

.template-repeater-remove:disabled {
    opacity: .3;
}

.template-repeater-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

.translate-modal-card {
    width: min(520px, 100%);
}

.translate-modal-body {
    display: grid;
    gap: 16px;
    padding: 20px;
}

.translate-field {
    display: grid;
    gap: 7px;
}

.translate-field>span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.translate-field select {
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.translate-copy-option {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    line-height: 1.45;
}

.translate-copy-option input {
    margin-top: 3px;
}

.translate-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--primary-soft);
    color: var(--text);
}

.translate-spinner {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: translate-spin .8s linear infinite;
}

@keyframes translate-spin {
    to {
        transform: rotate(360deg);
    }
}

.template-fill-field input:focus,
.template-fill-field textarea:focus {
    border-color: var(--primary);
    box-shadow: var(--focus);
}

@media (max-width: 980px) {
    .template-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .template-browser {
        padding: 14px;
    }

    .template-browser-header,
    .template-browser-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .template-result-count {
        align-self: flex-start;
    }

    .template-language-filter {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .template-language-filter button {
        padding: 0 6px;
        font-size: 11px;
    }

    .template-grid {
        grid-template-columns: 1fr;
    }

    .template-card>p {
        min-height: 0;
    }

    .template-modal {
        padding: 0;
    }

    .template-preview-modal-card,
    .template-fill-modal-card {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }

    .template-preview-stage {
        padding: 12px;
    }

    .template-preview-paper {
        width: 100%;
        min-width: 100%;
        min-height: 0;
        padding: 38px 26px;
    }

    .template-fill-fields {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .template-fill-field:has(textarea) {
        grid-column: auto;
    }

    .template-repeater-row {
        grid-template-columns: 18px 24px minmax(0, 1fr) auto;
    }

    .template-repeater-row input,
    .template-repeater-row textarea {
        grid-column: 3;
    }

    .template-repeater-remove {
        grid-column: 4;
        grid-row: 1;
    }
}

.hint {
    color: var(--text-muted);
    font-size: 13px;
}

.toast {
    position: fixed;
    bottom: 76px;
    left: 50%;
    transform: translateX(-50%);
    background: #1c1917;
    color: #fff;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 13px;
    z-index: 70;
    box-shadow: var(--shadow-menu);
}

.mobile-only {
    display: none;
}

/* Mobile tip: use desktop for full editing — shown only under 900px. */
.mobile-desktop-note {
    display: none;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-muted, #5f6368);
    background: var(--hover, #f1f3f4);
    border-bottom: 1px solid var(--border, #e0e0e0);
}

.mobile-desktop-note p {
    margin: 0;
    flex: 1;
    min-width: 0;
}

.mobile-desktop-note-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin: -2px -4px 0 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted, #5f6368);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.mobile-desktop-note-close:hover,
.mobile-desktop-note-close:focus-visible {
    background: rgba(0, 0, 0, 0.06);
    outline: none;
}

.sidebar-backdrop {
    display: none;
}

/* 16. Print / Save as PDF
   Screen chrome uses 100vh + overflow:hidden. Without these overrides only the
   first viewport of the document is sent to the printer, so later pages and
   text disappear from the PDF.

   Page geometry must match the editor: @page margin is 0 (see format.js) so the
   browser does not add date/time/URL chrome, document padding keeps real margins,
   and page gaps keep height (preparePrint only removes the on-screen separator). */
@media print {

    html,
    body {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        background: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body {
        background: #fff;
    }

    .app-header,
    .sidebar,
    .menubar,
    .find-bar,
    .toolbar,
    .bottom-bar,
    .suggestions,
    .nudi-caret,
    .nudi-ime-host,
    .nudi-ime-kick,
    .nudi-select-bar,
    .nudi-select-handle,
    .modal,
    .toast,
    .sidebar-backdrop,
    .orientation-pop,
    .margin-pop,
    .size-pop,
    .num-pop,
    .hf-toolbar-pop,
    .img-overlay,
    .img-toolbar,
    .img-ctx,
    [data-page-add-layer],
    [data-hf-icon] {
        display: none !important;
    }

    .app,
    .app-body,
    .main,
    #editorChrome,
    .workspace {
        display: block !important;
        position: static !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        background: #fff !important;
        flex: none !important;
        grid-template-rows: none !important;
    }

    .workspace {
        padding: 0 !important;
        margin: 0 !important;
    }

    .document,
    .app:not(.is-pageless) .document,
    .app.is-pageless .document {
        box-shadow: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        margin: 0 !important;
        /* Keep editor margins so headers, footers, and page numbers stay in the
           margin band — the same place as on screen. */
        padding: var(--page-margin-top, 1in) var(--page-margin-right, 1in) var(--page-margin-bottom, 1in) var(--page-margin-left, 1in) !important;
        width: var(--page-width, 8.27in) !important;
        max-width: var(--page-width, 8.27in) !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        background: #fff !important;
    }

    .app.is-pageless .document {
        padding: 16px 20px 40px !important;
        width: auto !important;
        max-width: none !important;
    }

    .editor,
    .app:not(.is-pageless) .editor {
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .nudi-page-break {
        break-after: page;
        page-break-after: always;
        height: 0;
        margin: 0;
        border: 0;
    }

    /* Decorative paper sheets only — body text, bands, and shapes stay. */
    [data-page-sheets] {
        display: none !important;
    }

    /* Keep gap height (set by preparePrint). Zeroing it used to pull later-page
       shapes and page numbers into the wrong printed page.
       Skip during exact sheet-clip export — those gaps must not force breaks. */
    html:not(.is-exact-printing) .editor [data-page-gap] {
        break-after: page;
        page-break-after: always;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .editor [data-manual-page-break] {
        display: none !important;
    }

    /* Only user-added header/footer content (including page numbers) prints —
       never the empty "Header"/"Footer" screen placeholders. */
    .editor [data-page-band="header"]:empty::before,
    .editor [data-page-band="footer"]:empty::before {
        content: none !important;
        display: none !important;
    }

    .editor [data-page-band] [data-field] {
        background: transparent !important;
    }

    .editor [data-page-band] {
        color: #000;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .editor [data-page-band] .nudi-page-num-line {
        color: #000 !important;
    }

    .nudi-page-break hr,
    .nudi-bookmark {
        display: none;
    }

    .nudi-comment {
        background: none;
        border-bottom: 1px dotted #999;
    }
}

/* Exact 1:1 PDF pages — built by js/pdf-export.js from editor sheet clips.
   Hidden on screen; when html.is-exact-printing, ONLY these pages print. */
#nudi-exact-print {
    display: none;
    position: absolute;
    left: -99999px;
    top: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

html.is-exact-printing #nudi-exact-print {
    display: block;
    position: absolute;
    left: -99999px;
    top: 0;
    width: auto;
    height: auto;
    overflow: visible;
    z-index: -1;
    pointer-events: none;
}

@media print {

    html.is-exact-printing,
    html.is-exact-printing body {
        height: auto !important;
        overflow: visible !important;
        background: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Hide the live app entirely — only the clipped editor sheets print. */
    html.is-exact-printing body>*:not(#nudi-exact-print) {
        display: none !important;
    }

    html.is-exact-printing #nudi-exact-print {
        display: block !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    html.is-exact-printing .nudi-exact-print-page {
        display: block !important;
        position: relative !important;
        width: var(--page-width, 8.27in) !important;
        height: var(--page-height, 11.69in) !important;
        max-height: var(--page-height, 11.69in) !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
        box-sizing: border-box !important;
        break-inside: auto !important;
        page-break-inside: auto !important;
        break-before: auto !important;
        page-break-before: auto !important;
    }

    html.is-exact-printing .nudi-exact-print-page:not(:last-child) {
        break-after: page !important;
        page-break-after: always !important;
    }

    html.is-exact-printing .nudi-exact-print-page:last-child {
        break-after: auto !important;
        page-break-after: auto !important;
    }

    /* Critical: cloned editor still contains [data-page-gap] nodes that the
       normal @media print rules mark with page-break-after. Those breaks
       escape overflow:hidden in print and insert a blank PDF page between
       every real page. Kill ALL descendant breaks — only the viewport
       itself may break. */
    html.is-exact-printing .nudi-exact-print-page *,
    html.is-exact-printing .nudi-exact-print-page *::before,
    html.is-exact-printing .nudi-exact-print-page *::after {
        break-after: auto !important;
        break-before: auto !important;
        page-break-after: auto !important;
        page-break-before: auto !important;
        break-inside: auto !important;
        page-break-inside: auto !important;
    }

    html.is-exact-printing .nudi-exact-print-page.is-pageless {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        break-after: auto !important;
        page-break-after: auto !important;
        break-inside: auto !important;
        page-break-inside: auto !important;
    }

    html.is-exact-printing .nudi-exact-print-clip {
        position: absolute !important;
        inset: 0 !important;
        overflow: hidden !important;
        width: 100% !important;
        height: 100% !important;
    }

    html.is-exact-printing .nudi-exact-print-shift {
        position: absolute !important;
        left: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        background: transparent !important;
    }

    /* Clones drop the .document class so format.js print rules cannot force
       height:auto / overflow:visible and spill a blank PDF page. */
    html.is-exact-printing .nudi-exact-print-clone,
    html.is-exact-printing .nudi-exact-print-clone .editor {
        box-shadow: none !important;
        border: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html.is-exact-printing .nudi-exact-print-clone {
        margin: 0 !important;
        padding: var(--page-margin-top, 1in) var(--page-margin-right, 1in)
            var(--page-margin-bottom, 1in) var(--page-margin-left, 1in) !important;
        width: 100% !important;
    }

    html.is-exact-printing .nudi-exact-print-page [data-page-band]:empty::before {
        content: none !important;
        display: none !important;
    }

    html.is-exact-printing .nudi-exact-print-page [data-page-band] [data-field] {
        background: transparent !important;
    }

    html.is-exact-printing .nudi-exact-print-page [data-page-gap],
    html.is-exact-printing .nudi-exact-print-page [data-manual-page-break],
    html.is-exact-printing .nudi-exact-print-page .nudi-page-break {
        break-after: auto !important;
        page-break-after: auto !important;
    }
}

/* ---------- Insert menu content ---------- */

.modal-card-wide {
    max-width: 620px;
    width: 100%;
}

#symbolSearch {
    width: 100%;
    margin: 4px 0 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font: inherit;
    background: var(--surface);
    color: var(--text);
}

.symbol-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 78px;
    overflow: auto;
    margin-bottom: 10px;
}

.symbol-tab {
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-secondary);
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
}

.symbol-tab.is-active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.symbol-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: 6px;
    max-height: 46vh;
    overflow: auto;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.symbol-cell {
    height: 44px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-family: var(--kannada), "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.symbol-cell:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.symbol-cell:focus-visible,
.symbol-cell:focus {
    outline: none;
    background: var(--accent-soft);
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

/* The last character picked stays marked so the choice is obvious. */
.symbol-cell.is-picked {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.symbol-cell.is-picked:hover {
    background: var(--accent);
}

.symbol-picked {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    margin: 10px 0 0;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-secondary);
    font-size: 12px;
    color: var(--text-muted);
}

.symbol-picked-char {
    font-family: var(--kannada), "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
    font-size: 24px;
    line-height: 1;
    color: var(--text);
}

.symbol-picked-name {
    font-weight: 600;
    color: var(--text);
}

.nudi-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--surface-secondary);
    border: 1px solid var(--border-strong);
    font-size: 0.92em;
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
}

.nudi-chip-link {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}

.nudi-chip-icon {
    font-size: 0.9em;
}

.nudi-checkbox {
    cursor: pointer;
    user-select: none;
    font-size: 1.05em;
}

.nudi-tab {
    white-space: pre;
}

.nudi-audio {
    margin: 10px 0;
}

.nudi-audio audio {
    width: 100%;
    max-width: 420px;
}

.nudi-audio figcaption {
    margin-top: 4px;
    font-size: 0.85em;
    color: var(--text-muted);
}

.nudi-drawing,
.nudi-chart {
    margin: 12px 0;
    text-align: center;
}

.nudi-drawing svg,
.nudi-chart svg {
    max-width: 100%;
    height: auto;
}

.nudi-drawing,
.nudi-chart {
    display: block;
    max-width: 100%;
    cursor: move;
    touch-action: none;
    border-radius: 6px;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.nudi-drawing>svg,
.nudi-chart>svg {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.nudi-drawing.is-picked,
.nudi-chart.is-picked {
    outline-color: var(--primary);
}

.nudi-drawing.is-img-dragging,
.nudi-chart.is-img-dragging {
    opacity: 0.75;
}

.nudi-drawing[data-pos="free"],
.nudi-chart[data-pos="free"] {
    z-index: 2;
}

/* ---------- drawing editor ---------- */

.draw-modal[hidden] {
    display: none;
}

.draw-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(32, 33, 36, 0.55);
}

.draw-sheet {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(940px, 100%);
    max-height: 92vh;
    padding: 14px;
    overflow: auto;
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
}

.draw-bar,
.draw-style,
.draw-foot,
.draw-textrow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.draw-gap {
    flex: 1;
}

.draw-tool {
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-secondary);
    color: var(--text);
}

.draw-tool:hover {
    background: var(--hover);
}

.draw-tool.is-on {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.draw-style label,
.draw-textrow label {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: 12px;
    color: var(--text-muted);
}

.draw-style input[type="color"] {
    width: 32px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: none;
}

.draw-style input[type="number"] {
    width: 58px;
}

.draw-textrow input[type="text"] {
    min-width: 220px;
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}

.draw-board {
    border-radius: 10px;
    border: 1px solid var(--border);
    background:
        linear-gradient(90deg, rgba(128, 128, 128, 0.12) 1px, transparent 1px) 0 0 / 20px 20px,
        linear-gradient(rgba(128, 128, 128, 0.12) 1px, transparent 1px) 0 0 / 20px 20px,
        #fff;
}

.draw-canvas {
    display: block;
    width: 100%;
    height: auto;
    touch-action: none;
}

.draw-foot {
    justify-content: flex-end;
}

.draw-hint {
    margin-right: auto;
    font-size: 12px;
    color: var(--text-muted);
}

body.is-drawing {
    overflow: hidden;
}

/* ---------- shapes gallery (Insert > Shapes) ---------- */

.shapes-pop {
    position: fixed;
    z-index: 330;
    width: min(360px, calc(100vw - 16px));
    max-height: min(480px, calc(100vh - 24px));
    display: flex;
    flex-direction: column;
    padding: 10px 10px 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.18));
}

.shapes-pop[hidden] {
    display: none !important;
}

.shapes-pop-head {
    margin: 0 2px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.shapes-pop-body {
    overflow: auto;
    padding-right: 2px;
}

.shapes-pop-section {
    margin: 10px 2px 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.shapes-pop-section:first-child {
    margin-top: 0;
}

.shapes-pop-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.shapes-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    color: inherit;
}

.shapes-tile:hover,
.shapes-tile:focus-visible {
    border-color: var(--border);
    background: var(--accent-soft, #e8f0fe);
    outline: none;
}

.shapes-tile svg {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.nudi-drawing[data-shape] {
    user-select: none;
    -webkit-user-drag: none;
}

.nudi-drawing svg,
.nudi-chart svg {
    max-width: 100%;
    height: auto;
}

.nudi-drawing[data-shape] svg {
    height: 100%;
    width: 100%;
    display: block;
}

/* ---------- list style picker ---------- */

.list-pop {
    position: fixed;
    z-index: 320;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.18));
}

.list-pop-head {
    margin: 0 2px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.list-pop-grid {
    display: grid;
    grid-template-columns: repeat(3, 84px);
    gap: 8px;
}

.list-pop-grid.is-narrow {
    grid-template-columns: repeat(2, 84px);
}

.list-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    height: 66px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
}

.list-tile:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.list-tile.is-picked {
    border-color: var(--primary);
    border-width: 2px;
    background: var(--primary-soft);
}

.list-tile-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.list-tile-mark {
    min-width: 22px;
    font-size: 10px;
    line-height: 1;
    color: var(--text);
    text-align: right;
}

.list-tile-line {
    position: relative;
    flex: 1;
    height: 2px;
    border-radius: 1px;
    background: var(--border);
}

/* Shows, in the preview, that ticking a line crosses its text out. */
.list-tile-line.is-struck::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--text-muted, #5f6368);
}

.list-pop-off {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 7px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 13px;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.list-pop-off:hover {
    background: var(--primary-soft);
}

/* ---------- list presets ---------- */

.editor .nudi-list-num-decimal {
    list-style-type: decimal;
}

.editor .nudi-list-num-decimal ol {
    list-style-type: lower-alpha;
}

.editor .nudi-list-num-decimal ol ol {
    list-style-type: lower-roman;
}

.editor .nudi-list-num-paren>li::marker {
    content: counter(list-item) ") ";
}

.editor .nudi-list-num-paren ol>li::marker {
    content: counter(list-item, lower-alpha) ") ";
}

.editor .nudi-list-num-paren ol ol>li::marker {
    content: counter(list-item, lower-roman) ") ";
}

.editor .nudi-list-num-lalpha {
    list-style-type: lower-alpha;
}

.editor .nudi-list-num-lalpha ol {
    list-style-type: lower-roman;
}

.editor .nudi-list-num-lalpha ol ol {
    list-style-type: decimal;
}

.editor .nudi-list-num-alpha {
    list-style-type: upper-alpha;
}

.editor .nudi-list-num-alpha ol {
    list-style-type: lower-alpha;
}

.editor .nudi-list-num-alpha ol ol {
    list-style-type: lower-roman;
}

.editor .nudi-list-num-roman {
    list-style-type: upper-roman;
}

.editor .nudi-list-num-roman ol {
    list-style-type: upper-alpha;
}

.editor .nudi-list-num-roman ol ol {
    list-style-type: lower-roman;
}

.editor .nudi-list-num-zero {
    list-style-type: decimal-leading-zero;
}

.editor .nudi-list-num-zero ol {
    list-style-type: lower-alpha;
}

.editor .nudi-list-num-zero ol ol {
    list-style-type: lower-roman;
}

.editor .nudi-list-bul-disc {
    list-style-type: disc;
}

.editor .nudi-list-bul-disc ul {
    list-style-type: circle;
}

.editor .nudi-list-bul-disc ul ul {
    list-style-type: square;
}

.editor .nudi-list-bul-circle {
    list-style-type: circle;
}

.editor .nudi-list-bul-circle ul {
    list-style-type: disc;
}

.editor .nudi-list-bul-circle ul ul {
    list-style-type: square;
}

.editor .nudi-list-bul-square {
    list-style-type: square;
}

.editor .nudi-list-bul-square ul {
    list-style-type: disc;
}

.editor .nudi-list-bul-square ul ul {
    list-style-type: circle;
}

/* Browsers without string markers still get the right bullet from ::marker. */
.editor .nudi-list-bul-diamond>li::marker {
    content: "◆  ";
}

.editor .nudi-list-bul-star>li::marker {
    content: "★  ";
}

.editor .nudi-list-bul-arrow>li::marker {
    content: "➔  ";
}

.editor .nudi-list-bul-diamond {
    list-style-type: "◆  ";
}

.editor .nudi-list-bul-diamond ul {
    list-style-type: "◇  ";
}

.editor .nudi-list-bul-diamond ul ul {
    list-style-type: "▪  ";
}

.editor .nudi-list-bul-star {
    list-style-type: "★  ";
}

.editor .nudi-list-bul-star ul {
    list-style-type: "○  ";
}

.editor .nudi-list-bul-star ul ul {
    list-style-type: "▪  ";
}

.editor .nudi-list-bul-arrow {
    list-style-type: "➔  ";
}

.editor .nudi-list-bul-arrow ul {
    list-style-type: "○  ";
}

.editor .nudi-list-bul-arrow ul ul {
    list-style-type: "▪  ";
}

.editor .nudi-checklist .nudi-checkbox {
    cursor: pointer;
    user-select: none;
    display: inline-block;
    text-decoration: none !important;
    position: relative;
    z-index: 1;
}

/* Only the words are crossed out; the ticked box stays plain and readable. */
.editor .nudi-list-chk-strike li.is-done {
    text-decoration: line-through;
    text-decoration-color: currentColor;
}

/* This style only ticks the box; the text stays exactly as it was. */
.editor .nudi-list-chk-tick li.is-done,
.editor .nudi-list-chk-tick li.is-done * {
    text-decoration: none !important;
}

/* ---------- side-by-side columns ---------- */

.editor .nudi-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
    margin: 8px 0;
    align-items: start;
}

.editor .nudi-columns[data-cols="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 24px;
}

.editor .nudi-column {
    min-height: 3em;
    min-width: 0;
    padding: 0 12px;
    border-left: 2px solid #202124;
}

.editor .nudi-column:first-child {
    padding-left: 0;
    border-left: 0;
}

.editor .nudi-column:last-child {
    padding-right: 0;
}

@media print {
    .editor .nudi-column {
        border-left-color: #000000;
    }
}

/* ---------- editable horizontal line ---------- */

.editor hr.nudi-rule {
    cursor: move;
    /* A thin rule is hard to grab, so give it a taller hit area. */
    padding: 7px 0;
    box-sizing: content-box;
}

.editor hr.is-line-picked {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.line-toolbar .img-tool-btn.is-on {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

/* ---------- chart card ---------- */

.editor .nudi-chart {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: left;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.12);
}

.nudi-chart-head {
    flex: 0 0 auto;
    padding: 12px 18px 4px;
}

.nudi-chart-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: #202124;
    cursor: text;
}

.nudi-chart-note {
    font-size: 11px;
    line-height: 1.4;
    color: #5f6368;
}

.editor .nudi-chart>svg {
    flex: 1 1 auto;
    min-height: 0;
}

.nudi-chart-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    margin-top: 6px;
    font-size: 0.85em;
    color: var(--text-muted);
}

.nudi-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nudi-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.nudi-page-break {
    margin: 18px 0;
    border-top: 2px dashed var(--border-strong);
}

.nudi-page-break hr,
.nudi-section-break hr {
    display: none;
}

.nudi-section-break {
    margin: 16px 0;
    border-top: 1px solid var(--border-strong);
}

.nudi-bookmark {
    font-size: 0.9em;
    opacity: 0.8;
    cursor: default;
}

.nudi-page-header,
.nudi-page-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 0.85em;
    color: var(--text-muted);
}

.nudi-page-header {
    border-bottom: 1px solid var(--border);
}

.nudi-page-footer {
    border-top: 1px solid var(--border);
}

/* Header and footer you can type into: the rule sits between the page part
   and the body text, and the text keeps the document's own size. */
.editor [data-page-part] {
    display: block;
    font-size: 1em;
    color: inherit;
    min-height: 1.6em;
}

.editor [data-page-part] p {
    margin: 0;
}

.editor [data-page-part="header"] {
    border-bottom: 2px solid #202124;
    padding-bottom: 6px;
    margin-bottom: 18px;
}

/* The footer sits on the bottom edge of the page, not right after the text. */
.editor [data-page-part="footer"] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 2px solid #202124;
    padding-top: 6px;
    margin-top: 0;
    background: inherit;
    /* One line of text under the rule, nothing taller. */
    height: 1.8em;
    line-height: 1.8em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.editor [data-page-part="footer"] p {
    line-height: inherit;
    white-space: nowrap;
}

/* Keeps the body text clear of the pinned footer. */
.editor.has-page-footer {
    padding-bottom: 64px;
}

.editor [data-page-part="header"]:empty::before {
    content: 'Header';
    color: var(--text-muted);
}

.editor [data-page-part="footer"]:empty::before {
    content: 'Footer';
    color: var(--text-muted);
}

/* ---------- document header and footer, drawn on every page ---------- */

/* The stored copy is not shown; the bands on each page are drawn from it.
   Digits must never paint into the body flow if this node briefly loses display:none. */
.editor [data-page-parts] {
    display: none !important;
    position: absolute !important;
    left: -99999px !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    speak: never;
}

/* The room between one page and the next: the rest of this page, both margins
   and the space between the sheets. The sheets behind supply the paper, so the
   gap itself is left clear. */
.editor [data-page-gap] {
    display: block;
    position: relative;
    margin: 0 calc(-1 * var(--page-margin-left, 1in)) 0 calc(-1 * var(--page-margin-right, 1in));
    background: transparent;
    user-select: none;
}

.editor [data-page-band] {
    position: absolute;
    left: 0;
    right: 0;
    min-height: 0;
    line-height: 1.25;
    font-size: inherit;
    color: #808487;
    background: transparent;
    /* A long header or footer runs onto the next line instead of being cut. */
    overflow-wrap: break-word;
    white-space: normal;
    /* Bands live in the page margin and must stay clickable there, including
       when Narrow margins put the header above the editor box. */
    pointer-events: auto;
    cursor: text;
    /* Keep bands visible after edit mode closes (gray header/footer text). */
    z-index: 3;
    opacity: 1;
    visibility: visible;
}

.editor [data-page-band] p {
    margin: 0;
    line-height: inherit;
    white-space: normal;
}

/* Header and footer sit in the margin area without a rule line into the body. */
.editor [data-page-band="header"] {
    padding-bottom: 0;
    min-height: 0;
    color: #808487;
}

.editor [data-page-band="footer"] {
    padding-top: 0;
    min-height: 0;
    color: #808487;
}

.app.is-editing-hf .editor [data-page-band] {
    cursor: text;
    pointer-events: auto;
}

/* Active header/footer: outline only — never a fill color on the editable
   band (browsers copy background-color into typed body text as a highlight). */
.app.is-editing-hf .editor [data-page-band].is-active-hf {
    min-height: 2.5em;
    padding: 6px 10px;
    background: transparent;
    background-color: transparent;
    border-radius: 4px;
    box-sizing: border-box;
    opacity: 1;
    z-index: 8;
    box-shadow: 0 0 0 2px var(--primary-soft, rgba(26, 115, 232, 0.45));
    outline: 2px solid rgba(26, 115, 232, 0.28);
    outline-offset: 1px;
    -webkit-user-select: text;
    user-select: text;
    caret-color: #808487;
    color: #808487;
}

.app.is-editing-hf .editor [data-page-band="footer"].is-active-hf {
    /* Empty footers were easy to miss — keep a typing target visible. */
    min-height: 2.75em;
}

.app.is-editing-hf .editor [data-page-band].is-active-hf .nudi-hf-text {
    min-height: 1.35em;
    color: #808487;
}

.app.is-editing-hf .editor [data-page-band].is-active-hf .nudi-hf-text:has(> br:only-child)::before,
.app.is-editing-hf .editor [data-page-band].is-active-hf .nudi-hf-text:empty::before {
    content: 'Type here\2026';
    color: #a0a4a8;
    pointer-events: none;
}

/* Phones: allow a real caret + selection inside the editable band
   (overrides the global is-mobile-caret user-select:none). */
html.is-mobile-caret .app.is-editing-hf .editor [data-page-band][contenteditable="true"],
html.is-mobile-caret .app.is-editing-hf .editor [data-page-band][contenteditable="true"] *,
html.is-mobile-caret:not(.is-ime-selecting) .app.is-editing-hf .editor [data-page-band][contenteditable="true"],
html.is-mobile-caret:not(.is-ime-selecting) .app.is-editing-hf .editor [data-page-band][contenteditable="true"] * {
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default !important;
    caret-color: #808487 !important;
    -webkit-text-fill-color: #808487 !important;
    color: #808487 !important;
}

/* While editing HF, body text is view-only so keys go into the band. */
.app.is-editing-hf .editor {
    caret-color: transparent;
}

.app.is-editing-hf .editor [data-page-band].is-active-hf {
    caret-color: #808487;
    /* Mobile footers were clipped by layout max-height — keep typing visible. */
    max-height: none !important;
    overflow: visible !important;
}

/* Header/footer text stays gray (page-number style), not body black. */
.editor [data-page-band],
.editor [data-page-band] .nudi-hf-text,
.editor [data-page-band] p:not(.nudi-page-num-line),
.app.is-editing-hf .editor [data-page-band].is-active-hf,
.app.is-editing-hf .editor [data-page-band].is-active-hf * {
    color: #808487;
}

.editor [data-page-band]:focus {
    outline: 2px solid var(--primary-soft);
    outline-offset: 2px;
}

.editor [data-page-band] [data-field] {
    padding: 0 1px;
    border-radius: 3px;
    background: var(--primary-soft);
}

/* Small page number line at the top or bottom of the margin area (Word-style). */
.editor [data-page-band] .nudi-page-num-line {
    font-size: 11px;
    line-height: 1.2;
    color: #808487;
    font-weight: 500;
    margin: 0;
    padding: 0;
}

.editor [data-page-band="header"] .nudi-page-num-line {
    margin-bottom: 0;
}

.editor [data-page-band="footer"] .nudi-page-num-line {
    margin-top: 0;
    margin-bottom: 0;
}

.editor [data-page-band] .nudi-hf-text,
.editor [data-page-band] p:not(.nudi-page-num-line) {
    min-height: 1.2em;
}

/* Keep the typing caret a little below the small page number. */
.editor [data-page-band="header"] .nudi-hf-text,
.editor [data-page-band="header"] p:not(.nudi-page-num-line) {
    padding-top: 6px;
}

.editor [data-page-band="footer"] .nudi-hf-text,
.editor [data-page-band="footer"] p:not(.nudi-page-num-line) {
    padding-bottom: 6px;
}

.editor [data-page-band] .nudi-page-num-line [data-field] {
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
}

.app.is-editing-hf .editor [data-page-band] .nudi-page-num-line,
.app.is-editing-hf .editor [data-page-band] .nudi-page-num-line [data-field] {
    pointer-events: none;
    user-select: none;
    cursor: default;
}

.editor [data-page-band="header"]:empty::before {
    content: 'Header';
    color: var(--text-muted);
}

.editor [data-page-band="footer"]:empty::before {
    content: 'Footer';
    color: var(--text-muted);
}

.hf-toolbar-pop {
    width: 168px;
    padding: 8px;
}

.hf-pop-row {
    display: block;
    width: 100%;
    margin: 0 0 4px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    font: inherit;
    font-size: 13px;
    text-align: left;
    color: var(--text);
    cursor: pointer;
}

.hf-pop-row:last-child {
    margin-bottom: 0;
}

.hf-pop-row:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
}

.editor [data-manual-page-break] {
    display: block;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}

[data-page-add-layer] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 3;
    pointer-events: none;
}

.page-add-btn {
    position: absolute;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-muted);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    pointer-events: auto;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.page-add-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-soft);
}

.page-add-btn:focus-visible {
    outline: 2px solid var(--primary-soft);
    outline-offset: 2px;
}

.app.is-editing-hf [data-page-add-layer],
.app.is-pageless [data-page-add-layer] {
    display: none;
}

/* On paper there is no divider to draw and no tint behind a field. */
@media print {

    [data-page-add-layer],
    .editor [data-manual-page-break] {
        display: none !important;
    }

    .editor [data-page-gap] {
        background: transparent;
        border: 0;
    }

    .editor [data-page-band] [data-field] {
        background: transparent;
    }

    .editor [data-page-band] {
        color: #000;
    }
}

/* ---------- page number picker ---------- */

.num-pop {
    width: 268px;
}

.num-styles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.num-chip {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: 12px;
    cursor: pointer;
}

.num-chip:hover {
    background: var(--surface-secondary);
}

.num-chip.is-picked {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 600;
}

.num-group {
    margin: 8px 0 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.num-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.num-tile {
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
}

.num-tile:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
}

/* A small sheet of paper showing where the number will sit. */
.num-sheet {
    display: flex;
    flex-direction: column;
    height: 54px;
    padding: 4px;
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    background: #fff;
    font-size: 8px;
    color: #202124;
}

.num-sheet .num-line {
    flex: 1;
    margin: 2px 0;
    border-top: 1px dashed var(--border-strong);
}

.num-sheet .num-mark {
    white-space: nowrap;
}

.num-sheet.num-bottom {
    flex-direction: column;
}

.num-sheet.num-top .num-mark {
    order: -1;
}

.num-sheet.num-left .num-mark {
    text-align: left;
}

.num-sheet.num-center .num-mark {
    text-align: center;
}

.num-sheet.num-right .num-mark {
    text-align: right;
}

.hf-settings {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(28, 25, 23, 0.35);
}

.hf-settings[hidden] {
    display: none;
}

.hf-settings-box {
    width: min(360px, 92vw);
    padding: 18px;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-menu);
}

.hf-settings-box h3 {
    margin: 0 0 12px;
    font-size: 15px;
}

.hf-settings-box label {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--text-muted);
}

.hf-settings-box input {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
}

.hf-settings-note {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--text-muted);
}

.hf-settings-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.hf-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px 12px;
    margin-bottom: 12px;
}

.hf-settings-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}

.hf-settings-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 13px;
    cursor: pointer;
}

.hf-edit-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 14px;
    background: linear-gradient(180deg, #e8f0fe 0%, #d2e3fc 100%);
    border-bottom: 1px solid #aecbfa;
    font-size: 13px;
    color: #1a1a1a;
}

.hf-edit-bar[hidden] {
    display: none !important;
}

.hf-edit-label {
    font-weight: 600;
}

.hf-edit-page {
    color: var(--text-muted);
}

.hf-edit-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    cursor: pointer;
}

.hf-edit-close {
    margin-left: auto;
    padding: 4px 12px;
    font-size: 12px;
}

/* Mobile: keep the header/footer edit chrome usable on a narrow toolbar. */
@media screen and (max-width: 768px) {
    .hf-edit-bar {
        gap: 8px;
        padding: 8px 10px;
        font-size: 12px;
    }

    .hf-edit-link {
        margin-left: 0;
        width: 100%;
    }

    .hf-edit-close {
        margin-left: 0;
        width: 100%;
        text-align: center;
        padding: 8px 12px;
    }

    /* Phones: header/footer bands must accept taps and show a caret. */
    .app.is-editing-hf .editor [data-page-band].is-active-hf,
    .app.is-editing-hf .editor [data-page-band].is-active-hf * {
        -webkit-user-select: text !important;
        user-select: text !important;
        -webkit-touch-callout: default !important;
        caret-color: #808487 !important;
        pointer-events: auto !important;
    }
}

.app.is-editing-hf .editor> :not([data-page-band]):not([data-page-parts]):not([data-border-frames]) {
    opacity: 0.42;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.app.is-editing-hf .editor [data-page-band]:not(.is-active-hf) {
    opacity: 0.55;
}

.app.is-editing-hf .editor [data-page-gap] {
    pointer-events: none;
}

.nudi-title-block {
    text-align: center;
    margin-bottom: 18px;
}

.nudi-title-block .nudi-subtitle {
    color: var(--text-muted);
    font-size: 0.9em;
}

.nudi-toc {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 16px;
    margin: 12px 0;
    background: var(--surface-secondary);
}

.nudi-toc ul {
    margin: 0;
    padding-left: 18px;
}

.nudi-toc-h2 {
    padding-left: 12px;
}

.nudi-toc-h3 {
    padding-left: 26px;
}

.nudi-watermark {
    text-align: center;
    font-size: 3em;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(120, 113, 108, 0.22);
    text-transform: uppercase;
    margin: 12px 0;
    user-select: none;
}

.nudi-comment {
    background: rgba(249, 171, 0, 0.22);
    border-bottom: 2px solid rgba(249, 171, 0, 0.8);
    cursor: help;
}

.editor a {
    color: var(--accent);
}

/* ---------- image editing ---------- */

.editor img {
    max-width: 100%;
    height: auto;
}

.editor img.is-img-selected {
    outline: 1px solid var(--accent);
    outline-offset: 1px;
    cursor: move;
    touch-action: none;
}

.editor img {
    -webkit-user-drag: none;
}

.editor img.is-img-dragging {
    opacity: 0.55;
}

.editor img[data-pos="free"] {
    cursor: move;
}

/* ---------- format menu results ---------- */

.editor .doc-title {
    font-size: 2em;
    font-weight: 700;
    margin: 0 0 4px;
    line-height: 1.25;
}

.editor .doc-subtitle {
    font-size: 1.2em;
    font-weight: 500;
    color: var(--text-muted);
    margin: 0 0 14px;
}

.editor blockquote {
    margin: 10px 0 10px 8px;
    padding: 4px 0 4px 14px;
    border-left: 3px solid var(--border-strong);
    color: var(--text-muted);
}

.editor .nudi-checklist,
.editor .nudi-checklist ul {
    list-style: none;
    padding-left: 6px;
}

/* The box is the only marker a checklist shows. */
.editor .nudi-checklist>li::marker,
.editor .nudi-checklist ul>li::marker {
    content: "";
}

.editor .nudi-checklist li {
    margin-bottom: 2px;
}

.nudi-page-number {
    margin: 6px 0;
    text-align: center;
    font-size: 0.82em;
    color: var(--text-muted);
}

.icon-btn:disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* Hide the first-load content swap (placeholder, then local copy, then server copy). */
.app.is-booting .editor,
.app.is-booting .header-title {
    visibility: hidden;
}

.app.is-booting .editor:empty::before {
    content: none;
}

/* Sidebar status blocks — keep off-screen until boot finishes so refresh
   does not flash "Guest mode" / "Start writing in Kannada". */
.app.is-booting .guest-storage-note,
.app.is-booting .empty-drafts {
    display: none !important;
}

/* A stack of sheets, each one page wide and one page tall. The text runs in a
   single editable area laid over them, and one sheet is drawn per page. */
.app:not(.is-pageless) .document {
    box-sizing: border-box !important;
    position: relative;
    width: var(--page-width, 8.27in);
    min-width: var(--page-width, 8.27in);
    max-width: var(--page-width, 8.27in);
    height: auto;
    min-height: var(--page-height, 11.69in);
    margin: 24px auto;
    padding: var(--page-margin-top, 1in) var(--page-margin-right, 1in) var(--page-margin-bottom, 1in) var(--page-margin-left, 1in);
    /* Must stay transparent so the grey gutter between sheets is empty —
       page colour lives on [data-page-sheet], not on the whole document.
       Both longhands beat any inline white from older page-colour code. */
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none;
    border: 0;
}

/* Mobile PDF capture: restore real paper width so raster ≠ stretched phone layout. */
html.is-pdf-capture .workspace,
html.is-pdf-capture .app .workspace,
html.is-pdf-capture .app.is-mobile-full-page .workspace {
    overflow: visible !important;
    overflow-x: visible !important;
    max-width: none !important;
}

html.is-pdf-capture .document,
html.is-pdf-capture .app .document,
html.is-pdf-capture .app.is-pageless .document,
html.is-pdf-capture .app:not(.is-pageless) .document,
html.is-pdf-capture .app.is-mobile-full-page .document,
html.is-pdf-capture .app.is-mobile-full-page.is-pageless .document,
html.is-pdf-capture .app.is-mobile-full-page:not(.is-pageless) .document {
    width: var(--page-width, 8.27in) !important;
    min-width: var(--page-width, 8.27in) !important;
    max-width: var(--page-width, 8.27in) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: var(--page-margin-top, 1in) var(--page-margin-right, 1in)
        var(--page-margin-bottom, 1in) var(--page-margin-left, 1in) !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
}

html.is-pdf-capture .app.mirrored-margins .document,
html.is-pdf-capture .app.is-mobile-full-page.mirrored-margins .document {
    padding-left: var(--page-margin-inside, var(--page-margin-left, 1in)) !important;
    padding-right: var(--page-margin-outside, var(--page-margin-right, 1in)) !important;
}

html.is-pdf-capture [data-page-sheet],
html.is-pdf-capture .app:not(.is-pageless) [data-page-sheet],
html.is-pdf-capture .app.is-mobile-full-page:not(.is-pageless) [data-page-sheet] {
    left: 0 !important;
    right: auto !important;
    width: var(--page-width, 8.27in) !important;
    max-width: var(--page-width, 8.27in) !important;
    box-sizing: border-box !important;
}

html.is-pdf-capture .editor,
html.is-pdf-capture .app.is-mobile-full-page .editor {
    font-size: 18px !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* The sheets themselves, behind the text. */
.app:not(.is-pageless) [data-page-sheets] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
}

.app:not(.is-pageless) [data-page-sheet] {
    position: absolute;
    left: 0;
    right: 0;
    box-sizing: border-box;
    background-color: var(--page-sheet-bg, #ffffff);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    border: 1px solid #dcdfe4;
    border-radius: 2px;
}

/* Until the first layout runs, page one is already there to write on. */
.app:not(.is-pageless) .document:not(:has([data-page-sheet])) {
    background-color: var(--page-sheet-bg, #ffffff) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    border: 1px solid #dcdfe4;
}

.app:not(.is-pageless) .editor {
    position: relative;
    z-index: 2;
}

/* Per-page border boxes — painted on their own layer, never on a wrapper
   that spans the gap between two sheets of paper. */
.app:not(.is-pageless) [data-border-frames] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}

.app:not(.is-pageless) [data-border-frame] {
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
}

/* CSS borders on a spanning block are stripped; this keeps leftover left/right
   from painting through the gap if a frame is still being drawn. */
.app:not(.is-pageless) [data-border-framed] {
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
}

/* On paper the height of the writing area is worked out page by page, so the
   tall screen-filling minimum used in the flowing view is dropped here. */
.app:not(.is-pageless) .editor {
    min-height: 0;
}

/* A page narrower than the window still shows its edges; a wider one can be
   scrolled to sideways instead of being squeezed. */
.app:not(.is-pageless) .workspace {
    background-color: #f0f2f5;
    padding: 24px 16px;
    overflow-x: auto;
}

.editor {
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    outline: none;
    word-break: normal;
    overflow-wrap: break-word;
}

/* Pageless: still looks like a white sheet of paper, but one continuous page
   that grows with the text — no page gaps or extra sheets. */
.app.is-pageless .document {
    box-sizing: border-box !important;
    position: relative;
    width: var(--page-width, 8.27in);
    min-width: var(--page-width, 8.27in);
    max-width: var(--page-width, 8.27in);
    height: auto;
    min-height: var(--page-height, 11.69in);
    margin: 24px auto;
    padding: var(--page-margin-top, 1in) var(--page-margin-right, 1in) var(--page-margin-bottom, 1in) var(--page-margin-left, 1in);
    background: var(--page-sheet-bg, #ffffff) !important;
    background-color: var(--page-sheet-bg, #ffffff) !important;
    border: 1px solid #dcdfe4;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    /* Let header/footer paint into the page margins like Pages format. */
    overflow: visible;
}

.app.is-pageless .editor {
    position: relative;
    z-index: 2;
    min-height: calc(var(--page-height, 11.69in) - var(--page-margin-top, 1in) - var(--page-margin-bottom, 1in));
    height: auto;
    /* Header/footer sit in the page margins (negative/overflow tops), same as Pages. */
    overflow: visible;
}

.app.is-pageless .workspace {
    background-color: #f0f2f5;
    padding: 24px 16px;
    overflow-x: auto;
}

.app.is-pageless [data-page-sheets],
.app.is-pageless [data-page-gap],
.app.is-pageless [data-page-add-layer] {
    display: none !important;
}

/* ---------- tools menu results ---------- */

.tool-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    max-height: 46vh;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.tool-list li+li {
    border-top: 1px solid var(--border);
}

.tool-list-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tool-list-item:disabled {
    cursor: default;
}

.tool-list-item:hover:not(:disabled) {
    background: var(--accent-soft);
}

.tool-list-label {
    font-weight: 600;
    font-size: 13px;
}

.tool-list-detail {
    font-size: 12px;
    color: var(--text-muted);
    word-break: break-word;
}

.editor.has-line-numbers {
    counter-reset: nudi-line;
    padding-left: 44px;
}

/* Body text only — never headers, footers, page gaps, or other page chrome
   (those would draw a second "1"/"2" next to a real page number). */
.editor.has-line-numbers>p,
.editor.has-line-numbers>div:not([data-page-band]):not([data-page-parts]):not([data-page-gap]):not([data-manual-page-break]):not([data-border-frames]),
.editor.has-line-numbers>h1,
.editor.has-line-numbers>h2,
.editor.has-line-numbers>h3,
.editor.has-line-numbers>blockquote {
    position: relative;
    counter-increment: nudi-line;
}

.editor.has-line-numbers>p::before,
.editor.has-line-numbers>div:not([data-page-band]):not([data-page-parts]):not([data-page-gap]):not([data-manual-page-break]):not([data-border-frames])::before,
.editor.has-line-numbers>h1::before,
.editor.has-line-numbers>h2::before,
.editor.has-line-numbers>h3::before,
.editor.has-line-numbers>blockquote::before {
    content: counter(nudi-line);
    position: absolute;
    left: -40px;
    width: 30px;
    text-align: right;
    font-family: var(--ui);
    font-size: 11px;
    line-height: inherit;
    color: var(--text-muted);
    opacity: 0.55;
    user-select: none;
    pointer-events: none;
}

/* An empty sole placeholder line must not paint a gutter "1" that looks like a
   page number when Format → Page numbers is also showing "1" on the sheet. */
.editor.has-line-numbers>p:only-of-type:has(> br:only-child) {
    counter-increment: none;
}

.editor.has-line-numbers>p:only-of-type:has(> br:only-child)::before {
    content: none !important;
}

/* Hard stop: page furniture must never show a line-number gutter digit. */
.editor.has-line-numbers>[data-page-band],
.editor.has-line-numbers>[data-page-parts],
.editor.has-line-numbers>[data-page-gap],
.editor.has-line-numbers>[data-manual-page-break],
.editor.has-line-numbers>[data-border-frames] {
    counter-increment: none;
}

.editor.has-line-numbers>[data-page-band]::before,
.editor.has-line-numbers>[data-page-parts]::before,
.editor.has-line-numbers>[data-page-gap]::before,
.editor.has-line-numbers>[data-manual-page-break]::before,
.editor.has-line-numbers>[data-border-frames]::before {
    content: none !important;
}

.nudi-references {
    margin-top: 18px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.nudi-references h3 {
    margin: 0 0 6px;
    font-size: 1.05em;
}

.is-flash {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    transition: outline-color 0.6s ease;
}

html.a11y-contrast {
    --text: #000;
    --text-muted: #333;
    --border: #666;
    --border-strong: #333;
    --table-border: #000;
}

html.a11y-contrast .editor {
    color: #000;
}

html.a11y-large-text .editor {
    font-size: 22px;
}

/* ---------- copy document dialog ---------- */

.copy-folder {
    margin: 4px 0 12px;
}

.copy-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 0 4px;
    border-top: 1px solid var(--border);
}

.copy-option {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    cursor: pointer;
}

.copy-option input {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ---------- standalone content pages ---------- */

.legal-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--background);
    color: var(--text);
    font-family: var(--ui);
}

.legal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.legal-header .btn-ghost {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.legal-page {
    max-width: 780px;
    margin: 28px auto 32px;
    padding: 28px 32px 40px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    line-height: 1.7;
}

.legal-page h1 {
    margin: 0 0 4px;
    font-size: 28px;
}

.legal-page-request h1 {
    margin: 0 0 16px;
    color: #12806c;
    font-size: 26px;
    font-weight: 700;
}

.legal-page-request .legal-contact {
    margin-top: 6px;
    padding-top: 0;
}

.legal-page h2 {
    margin: 26px 0 8px;
    font-size: 18px;
}

.legal-page ul {
    margin: 0 0 8px;
    padding-left: 20px;
}

.legal-page li {
    margin-bottom: 6px;
}

.legal-page a {
    color: var(--accent);
}

.legal-tool-page {
    align-items: flex-start;
    overflow-y: auto;
}

.legal-shell {
    width: min(860px, 100%);
    margin: 0 auto;
    padding: 16px 24px 32px;
    box-sizing: border-box;
}

.legal-page-bar {
    display: flex;
    align-items: center;
    margin: 0 0 12px;
}

.legal-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 8px 12px 8px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.legal-back-btn:hover,
.legal-back-btn:focus-visible {
    border-color: var(--accent, #12806c);
    color: var(--accent, #12806c);
    outline: none;
}

.legal-empty {
    display: grid;
    gap: 6px;
    padding: 28px 8px;
    text-align: center;
    color: var(--muted, #5b6472);
}

.legal-empty[hidden] {
    display: none !important;
}

.legal-empty strong {
    color: var(--text);
    font-size: 1.05rem;
}

.legal-loading {
    margin: 24px 0;
    color: var(--muted, #5b6472);
}

.in-app-legal.legal-page {
    max-width: none;
    margin: 0;
    box-shadow: none;
}

/* Full in-app legal page: keep the editor chrome (sidebar) at viewport
   height, scroll only the article, and park the app CTA after the article. */
html.is-legal-view,
html.is-legal-view body {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

html.is-legal-view body {
    display: flex;
    flex-direction: column;
}

html.is-legal-view .site-features,
html.is-legal-view .features-scroll-hint,
html.is-legal-view .go-to-editor {
    display: none !important;
}

html.is-legal-view #app {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: hidden;
    grid-template-rows: var(--header-h) minmax(0, 1fr);
}

html.is-legal-view .app-body {
    min-height: 0;
    overflow: hidden;
}

html.is-legal-view .workspace,
html.is-legal-view main.workspace,
html.is-legal-view .legal-tool-page {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

html.is-legal-view .legal-shell {
    padding-bottom: 12px;
}

html.is-legal-view .legal-app-cta-slot .site-app-cta {
    display: block !important;
    margin-top: 20px;
    padding: 8px 0 12px;
    position: relative;
    z-index: 1;
}

html.is-legal-view:not(.is-legal-ready) .legal-app-cta-slot .site-app-cta {
    display: none !important;
}

html.is-legal-view .legal-app-cta-slot .site-features-cta {
    overflow: hidden;
}

html.is-legal-view body > .site-app-cta {
    display: none !important;
}

/* Footer lives inside the article scroll (last), not pinned under the app. */
html.is-legal-view .legal-app-cta-slot .site-footer {
    display: flex !important;
    position: relative;
    z-index: 1;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    background: var(--surface, var(--background));
}

html.is-legal-view body > .site-footer {
    display: none !important;
}

@supports (height: 100dvh) {
    html.is-legal-view,
    html.is-legal-view body {
        height: 100dvh;
        max-height: 100dvh;
    }
}

.legal-updated {
    margin: 0 0 20px;
    color: var(--text-muted);
    font-size: 13px;
}

.legal-contact {
    margin-top: 28px;
    padding-top: 8px;
}

.legal-contact-form {
    display: grid;
    gap: 14px;
    margin-top: 14px;
    max-width: 640px;
}

.legal-contact-form label {
    display: grid;
    gap: 6px;
    font-weight: 600;
    color: var(--text);
}

.legal-contact-form label span {
    color: var(--danger, #c52b1b);
    font-weight: 700;
}

.legal-contact-form input,
.legal-contact-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #cfe4de;
    border-radius: 4px;
    background: #e8f6f2;
    color: var(--text);
    font: inherit;
}

.legal-contact-form textarea {
    min-height: 140px;
    resize: vertical;
}

.legal-contact-form input:focus,
.legal-contact-form textarea:focus {
    outline: 2px solid var(--primary, #b45309);
    outline-offset: 1px;
}

.legal-contact-form button[type="submit"] {
    width: max-content;
    min-width: 96px;
    padding: 8px 18px;
    border: 1px solid #c5c5c5;
    border-radius: 3px;
    background: #f3f3f3;
    color: #222;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.legal-contact-form button[type="submit"]:hover,
.legal-contact-form button[type="submit"]:focus-visible {
    background: #e7e7e7;
}

.legal-contact-form button[type="submit"]:disabled {
    opacity: .65;
    cursor: wait;
}

.legal-contact-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.legal-contact-status {
    margin: 12px 0 0;
    font-weight: 600;
}

.legal-contact-status.is-ok {
    color: var(--success, #087a4b);
}

.legal-contact-status.is-error {
    color: var(--danger, #c52b1b);
}

@media (max-width: 768px) {
    .legal-page {
        margin: 14px 10px 40px;
        padding: 20px 18px 30px;
    }
}

#menuSearchInput {
    width: 100%;
    margin: 4px 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font: inherit;
    background: var(--surface);
    color: var(--text);
}

.palette-list {
    max-height: 46vh;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.palette-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.palette-item+.palette-item {
    border-top: 1px solid var(--border);
}

.palette-item.is-active {
    background: var(--accent-soft);
}

.palette-label {
    font-size: 13px;
    font-weight: 600;
}

.palette-meta {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

html.a11y-reduce-motion * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

.img-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 200;
}

.img-frame {
    position: fixed;
    border: 2px solid var(--accent);
    box-sizing: border-box;
    pointer-events: none;
}

.img-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    pointer-events: auto;
    touch-action: none;
    z-index: 1;
}

.img-handle::before {
    content: "";
    width: 11px;
    height: 11px;
    background: var(--surface);
    border: 2px solid var(--accent);
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.img-handle-nw {
    left: -10px;
    top: -10px;
    cursor: nwse-resize;
}

.img-handle-n {
    left: calc(50% - 10px);
    top: -10px;
    cursor: ns-resize;
}

.img-handle-ne {
    right: -10px;
    top: -10px;
    cursor: nesw-resize;
}

.img-handle-e {
    right: -10px;
    top: calc(50% - 10px);
    cursor: ew-resize;
}

.img-handle-se {
    right: -10px;
    bottom: -10px;
    cursor: nwse-resize;
}

.img-handle-s {
    left: calc(50% - 10px);
    bottom: -10px;
    cursor: ns-resize;
}

.img-handle-sw {
    left: -10px;
    bottom: -10px;
    cursor: nesw-resize;
}

.img-handle-w {
    left: -10px;
    top: calc(50% - 10px);
    cursor: ew-resize;
}

.img-crop {
    position: fixed;
    box-sizing: border-box;
    border: 1px solid #fff;
    outline: 1px dashed var(--accent);
    box-shadow: 0 0 0 9999px rgba(28, 25, 23, 0.45);
    pointer-events: auto;
    cursor: move;
    touch-action: none;
}

.img-crop-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--accent);
    border: 2px solid #fff;
    pointer-events: auto;
    touch-action: none;
}

.img-crop-handle-nw {
    left: -7px;
    top: -7px;
    cursor: nwse-resize;
}

.img-crop-handle-ne {
    right: -7px;
    top: -7px;
    cursor: nesw-resize;
}

.img-crop-handle-se {
    right: -7px;
    bottom: -7px;
    cursor: nwse-resize;
}

.img-crop-handle-sw {
    left: -7px;
    bottom: -7px;
    cursor: nesw-resize;
}

.img-toolbar {
    position: fixed;
    z-index: 195;
    display: flex;
    align-items: center;
    gap: 2px;
    max-width: calc(100vw - 16px);
    flex-wrap: wrap;
    padding: 4px 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow-menu);
}

.img-overlay[hidden],
.img-frame[hidden],
.img-handle[hidden],
.img-crop[hidden],
.img-toolbar[hidden],
.img-ctx[hidden],
.img-ctx-sub[hidden] {
    display: none !important;
}

.img-tool-btn {
    padding: 5px 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.img-tool-btn:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

.img-tool-sep {
    width: 1px;
    height: 18px;
    background: var(--border);
    margin: 0 4px;
}

.img-ctx {
    position: fixed;
    z-index: 210;
    min-width: 264px;
    max-width: min(94vw, 320px);
    max-height: min(80vh, 560px);
    overflow: auto;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-menu);
}

.img-ctx-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.img-ctx-item:hover {
    background: var(--accent-soft);
}

/* Paragraph style picker */
.style-picker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 132px;
    justify-content: space-between;
    cursor: pointer;
}

.style-picker-arrow {
    font-size: 10px;
    color: var(--text-muted);
}

.style-menu {
    position: fixed;
    min-width: 232px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-menu);
    z-index: 120;
}

.style-menu[hidden] {
    display: none;
}

.style-menu-row {
    position: relative;
}

.style-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.style-menu-item:hover {
    background: var(--accent-soft);
}

.style-menu-check {
    margin-left: auto;
    color: var(--primary);
    font-size: 12px;
}

.style-menu-arrow {
    color: var(--text-muted);
    font-size: 12px;
}

.style-menu-preview {
    flex: 1 1 auto;
    min-width: 0;
}

.style-menu-preview.is-title {
    font-size: 24px;
    font-weight: 400;
}

.style-menu-preview.is-subtitle {
    font-size: 15px;
    color: var(--text-muted);
}

.style-menu-preview.is-h1 {
    font-size: 20px;
    font-weight: 700;
}

.style-menu-preview.is-h2 {
    font-size: 17px;
    font-weight: 700;
}

.style-menu-preview.is-h3 {
    font-size: 15px;
    font-weight: 600;
}

.style-menu-sub {
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 232px;
    margin-left: 4px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-menu);
    z-index: 1;
}

.style-menu-sub[hidden] {
    display: none;
}

/* Mobile font family picker — full scrollable list (native <select> clips). */
.font-family-menu {
    position: fixed;
    z-index: 240;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    max-width: calc(100vw - 16px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-menu);
    overflow: hidden;
}

.font-family-menu[hidden] {
    display: none !important;
}

.font-family-menu-head {
    flex: 0 0 auto;
    padding: 12px 14px 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.font-family-menu-list {
    flex: 1 1 auto;
    min-height: 0; /* allow flex child to scroll inside max-height menu */
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 6px;
    max-height: inherit;
}

/* While ↑/↓ navigating, ignore hover paint so the focused row stays clear. */
.font-family-menu.is-key-nav .font-family-menu-item:hover:not(.is-focused) {
    background: transparent;
}

.font-family-menu-group {
    padding: 10px 10px 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.font-family-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.font-family-menu-item:hover,
.font-family-menu-item:focus-visible,
.font-family-menu-item.is-focused {
    background: var(--accent-soft);
    outline: none;
}

.font-family-menu-item.is-active,
.font-family-menu-item.is-focused.is-active {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.font-family-menu-sample {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 17px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.font-family-menu-meta {
    flex: 0 0 auto;
    font-size: 10px;
    color: var(--text-muted);
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.font-family-menu-check {
    flex: 0 0 auto;
    color: var(--primary, var(--accent));
    font-size: 14px;
}

.img-ctx-item:disabled {
    color: var(--text-muted);
    opacity: 0.5;
    cursor: default;
    background: transparent;
}

.img-ctx-shortcut,
.img-ctx-arrow {
    color: var(--text-muted);
    font-size: 12px;
}

.img-ctx-sep {
    display: block;
    height: 1px;
    margin: 5px 4px;
    background: var(--border);
}

.img-ctx-subwrap {
    position: relative;
}

.img-ctx-sub {
    position: absolute;
    left: calc(100% - 6px);
    top: -6px;
    min-width: 214px;
    max-height: min(70vh, 420px);
    overflow: auto;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-menu);
    z-index: 215;
}

@media (max-width: 768px) {
    .img-ctx {
        left: 8px !important;
        right: 8px;
        min-width: 0;
    }

    .img-ctx-sub {
        position: static;
        left: auto;
        top: auto;
        margin: 4px 0 4px 10px;
        box-shadow: none;
        max-height: none;
    }

    .img-toolbar {
        justify-content: center;
    }
}

@media print {

    .img-overlay,
    .img-toolbar,
    .img-ctx,
    .table-move-handle,
    .table-resize-layer,
    .table-resize-guide {
        display: none !important;
    }

    .editor td,
    .editor th {
        border-color: #000 !important;
    }
}

/* ==========================================================================
   Email This File Modal (Google Docs Material 3 Style)
   ========================================================================== */

.email-file-card {
    background: var(--surface);
    color: var(--text);
    border-radius: 28px;
    width: 520px;
    max-width: 90vw;
    padding: 24px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.26);
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    animation: modalPopIn 180ms cubic-bezier(0.1, 0.9, 0.2, 1);
}

.email-file-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.email-file-header h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 400;
    color: var(--text);
    font-family: Google Sans, Roboto, Inter, sans-serif;
}

.email-file-header .close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}

.email-file-header .close-btn:hover {
    background: var(--hover-bg, rgba(0, 0, 0, 0.06));
    color: var(--text);
}

.email-file-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0;
}

/* Material Outlined Input Fields */
.md-outlined-field {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.md-field-input,
.md-field-textarea,
.md-field-select {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border-strong, #c4c7c5);
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    box-sizing: border-box;
}

.md-field-textarea {
    resize: vertical;
    min-height: 80px;
}

.md-field-input:focus,
.md-field-textarea:focus,
.md-field-select:focus {
    border-color: #0b57d0;
    border-width: 2px;
    padding: 13px 15px;
}

/* Material Floating Label */
.md-field-label {
    position: absolute;
    left: 12px;
    top: -9px;
    padding: 0 4px;
    background: var(--surface);
    color: #444746;
    font-size: 12px;
    font-weight: 500;
    pointer-events: none;
    transition: color 150ms ease;
}

.md-field-input:focus~.md-field-label,
.md-field-textarea:focus~.md-field-label,
.md-field-select:focus~.md-field-label {
    color: #0b57d0;
}

/* Custom Checkbox Row */
.md-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text);
    user-select: none;
}

.md-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #444746;
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: border-color 150ms ease, background 150ms ease;
}

.md-checkbox:checked {
    background: #0b57d0;
    border-color: #0b57d0;
}

.md-checkbox:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Material Select Field */
.md-select-field {
    position: relative;
}

.md-field-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 36px;
    cursor: pointer;
}

.md-select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #444746;
}

.md-outlined-field.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Modal Footer Buttons */
.email-file-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}

.email-file-footer .btn-ghost-rounded {
    height: 40px;
    padding: 0 24px;
    border-radius: 20px;
    border: none;
    background: transparent;
    color: #0b57d0;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: background 150ms ease;
}

.email-file-footer .btn-ghost-rounded:hover {
    background: rgba(11, 87, 208, 0.08);
}

.email-file-footer .btn-primary-rounded {
    height: 40px;
    padding: 0 24px;
    border-radius: 20px;
    border: none;
    background: #0b57d0;
    color: #ffffff;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: background 150ms ease, box-shadow 150ms ease;
}

.email-file-footer .btn-primary-rounded:hover {
    background: #0842a0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* ---------- Image Submenu Badges & Google Docs Styling ---------- */

.menu-item-with-badge {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.menu-badge {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 999px;
    letter-spacing: 0.2px;
}

.menu-badge-new {
    background: #e8f0fe;
    color: #1a73e8;
    border: 1px solid rgba(26, 115, 232, 0.2);
}

[data-theme="dark"] .menu-badge-new {
    background: rgba(138, 180, 248, 0.2);
    color: #8ab4f8;
    border-color: rgba(138, 180, 248, 0.3);
}

/* ---------- Image Feature Modals ---------- */

.image-feature-card {
    border-radius: 20px;
    padding: 20px 24px;
}

.modal-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-header-bar h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
}

.close-btn {
    font-size: 20px;
    line-height: 1;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--text-muted);
}

/* AI Image Generator Modal */
.image-gen-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    min-height: 280px;
}

@media (max-width: 640px) {
    .image-gen-body {
        grid-template-columns: 1fr;
    }
}

.setting-row-vertical {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}

.setting-row-vertical textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    font-family: inherit;
    font-size: 14px;
    background: var(--surface);
    color: var(--text);
    resize: vertical;
    box-sizing: border-box;
}

.setting-row-vertical textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--focus);
}

.image-gen-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.setting-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.setting-col select {
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 10px;
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
}

.image-gen-preview-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--border);
    border-radius: 14px;
    background: var(--surface-secondary);
    min-height: 240px;
    position: relative;
    overflow: hidden;
}

.image-gen-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.image-gen-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 500;
}

.spinner-circle {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.image-gen-result {
    max-width: 100%;
    max-height: 260px;
    object-fit: contain;
    border-radius: 8px;
}

/* Image Search & Drive & Photos Grid */
.image-search-bar-wrap {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.image-search-bar-wrap input {
    flex: 1;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0 12px;
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
}

.image-search-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    max-height: 320px;
    overflow-y: auto;
    padding: 4px;
}

.img-search-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    background: var(--surface-secondary);
    transition: transform 120ms ease, border-color 120ms ease;
    height: 110px;
}

.img-search-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-search-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 11px;
    padding: 4px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.img-search-card:hover {
    transform: scale(1.03);
}

.img-search-card.is-selected {
    border-color: #1a73e8;
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.3);
}

/* Drive Modal Styling */
.drive-header-title {
    display: flex;
    align-items: center;
}

.drive-tabs-row {
    display: flex;
    gap: 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
}

.drive-tab {
    background: transparent;
    border: 0;
    padding: 6px 0 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
}

.drive-tab.is-active {
    color: #1a73e8;
    font-weight: 600;
}

.drive-tab.is-active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: #1a73e8;
}

.drive-search-wrap input {
    width: 100%;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 10px;
    margin-bottom: 14px;
    background: var(--surface);
    color: var(--text);
    box-sizing: border-box;
}

.drive-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    max-height: 300px;
    overflow-y: auto;
    padding: 4px;
}

.drive-file-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
}

.drive-file-card:hover {
    background: var(--surface-secondary);
}

.drive-file-card.is-selected {
    border-color: #1a73e8;
    background: #e8f0fe;
}

[data-theme="dark"] .drive-file-card.is-selected {
    background: rgba(138, 180, 248, 0.15);
}

.drive-file-thumb {
    height: 90px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 6px;
}

.drive-file-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.drive-file-info {
    display: flex;
    flex-direction: column;
}

.drive-file-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drive-file-meta {
    font-size: 11px;
    color: var(--text-muted);
}

/* Photos Album Styling */
.photos-album-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.photos-tab {
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-secondary);
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
}

.photos-tab.is-active {
    background: #e8f0fe;
    border-color: #1a73e8;
    color: #1a73e8;
    font-weight: 600;
}

.photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
    padding: 4px;
}

.photo-card {
    position: relative;
    height: 110px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
}

.photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-overlay-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: #fff;
    font-size: 11px;
    padding: 12px 6px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.photo-card.is-selected {
    border-color: #1a73e8;
}

/* Camera Modal Styling */
.camera-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.camera-stream-wrap {
    width: 100%;
    max-width: 480px;
    height: 320px;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.camera-stream-wrap video,
.camera-stream-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camera-placeholder {
    color: #fff;
    font-size: 13px;
    padding: 20px;
    text-align: center;
}

.camera-controls-row {
    display: flex;
    gap: 10px;
}

/* ---------- borders toolbar and menu ---------- */

.toolbar-split {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
}

.toolbar-split .icon-btn {
    border-radius: 0;
    border: 0;
    min-width: 32px;
}

.border-main-btn {
    padding: 0 8px;
}

.border-menu-btn {
    padding: 0 6px;
    font-size: 10px;
    border-left: 1px solid var(--border) !important;
    min-width: 22px !important;
}

.border-main-ico,
.border-ico {
    display: block;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 1px dashed #9aa0a6;
    position: relative;
}

.border-main-ico.is-all,
.border-ico.is-all {
    border-style: solid;
    border-color: #202124;
}

.border-ico.is-bottom,
.border-main-ico.is-bottom {
    border-bottom: 2px solid #202124;
}

.border-ico.is-top,
.border-main-ico.is-top {
    border-top: 2px solid #202124;
}

.border-ico.is-left,
.border-main-ico.is-left {
    border-left: 2px solid #202124;
}

.border-ico.is-right,
.border-main-ico.is-right {
    border-right: 2px solid #202124;
}

.border-ico.is-outside,
.border-main-ico.is-outside {
    border: 2px solid #202124;
}

.border-main-ico.is-none,
.border-ico.is-none {
    border-style: dotted;
    opacity: 0.55;
}

.border-ico.is-inside::before,
.border-ico.is-inside-h::before {
    content: '';
    position: absolute;
    left: 2px;
    right: 2px;
    top: 50%;
    border-top: 2px solid #202124;
}

.border-ico.is-inside-v::before {
    content: '';
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 50%;
    border-left: 2px solid #202124;
}

.border-ico.is-diag-down {
    background: linear-gradient(to top right, transparent 46%, #202124 46%, #202124 54%, transparent 54%);
}

.border-ico.is-diag-up {
    background: linear-gradient(to top left, transparent 46%, #202124 46%, #202124 54%, transparent 54%);
}

.border-ico.is-hr::before {
    content: '';
    position: absolute;
    left: 1px;
    right: 1px;
    top: 50%;
    border-top: 2px solid #202124;
}

.border-ico.is-table {
    background:
        linear-gradient(#202124 0 0) 2px 2px / 5px 5px no-repeat,
        linear-gradient(#202124 0 0) 9px 2px / 5px 5px no-repeat,
        linear-gradient(#202124 0 0) 2px 9px / 5px 5px no-repeat,
        linear-gradient(#202124 0 0) 9px 9px / 5px 5px no-repeat;
}

.border-ico.is-grid {
    background:
        repeating-linear-gradient(0deg, #202124 0 1px, transparent 1px 6px),
        repeating-linear-gradient(90deg, #202124 0 1px, transparent 1px 6px);
}

.border-ico.is-dialog {
    border: 1px solid #202124;
    background: linear-gradient(#202124, #202124) 2px 2px / 6px 6px no-repeat;
}

.border-pop {
    position: fixed;
    z-index: 1300;
    min-width: 248px;
    max-width: min(300px, 92vw);
    max-height: min(72vh, 520px);
    overflow: auto;
    padding: 6px 0;
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-menu);
    border: 1px solid var(--border);
}

.border-pop[hidden] {
    display: none;
}

.border-pop-sep {
    height: 1px;
    margin: 6px 10px;
    background: var(--border);
}

.border-pop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 14px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.border-pop-item:hover,
.border-pop-item:focus-visible {
    background: var(--primary-soft);
    outline: none;
}

.border-pop-item.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.border-pop-item.is-checked::after {
    content: '✓';
    margin-left: auto;
    color: var(--primary);
    font-weight: 700;
}

.border-pop-icon {
    width: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.border-pop-label {
    flex: 1;
}

/* Table gridlines: on screen only, never on paper. */
.editor.show-gridlines table td,
.editor.show-gridlines table th {
    outline: 1px dashed rgba(95, 99, 104, 0.55);
    outline-offset: -1px;
}

/* Borders and Shading dialog */
.border-dialog {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(28, 25, 23, 0.35);
}

.border-dialog[hidden] {
    display: none;
}

.border-dialog-box {
    width: min(420px, 92vw);
    padding: 18px;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-menu);
}

.border-dialog-box h3 {
    margin: 0 0 14px;
    font-size: 15px;
}

.border-dialog-body {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.border-preview {
    position: relative;
    width: 120px;
    height: 100px;
    border-radius: 6px;
    background: #fff;
    flex-shrink: 0;
}

.border-preview-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--text-muted);
    pointer-events: none;
}

.border-preview-side {
    position: absolute;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.border-preview-side.is-top {
    top: 0;
    left: 0;
    right: 0;
    height: 10px;
}

.border-preview-side.is-bottom {
    bottom: 0;
    left: 0;
    right: 0;
    height: 10px;
}

.border-preview-side.is-left {
    top: 0;
    bottom: 0;
    left: 0;
    width: 10px;
}

.border-preview-side.is-right {
    top: 0;
    bottom: 0;
    right: 0;
    width: 10px;
}

.border-preview-side.is-off {
    opacity: 0.35;
}

.border-dialog-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.border-dialog-fields label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
}

.border-dialog-fields select,
.border-dialog-fields input[type="color"] {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    box-sizing: border-box;
}

.border-dialog-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ---------- Word-style margins menu ---------- */

.margin-pop {
    position: fixed;
    z-index: 1300;
    min-width: 300px;
    max-width: min(360px, 94vw);
    max-height: min(80vh, 560px);
    overflow: auto;
    padding: 6px 0;
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-menu);
    border: 1px solid var(--border);
}

.margin-pop[hidden] {
    display: none;
}

.margin-pop-sep {
    display: block;
    height: 1px;
    margin: 6px 10px;
    background: var(--border);
}

.margin-pop-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 8px 14px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.margin-pop-item:hover,
.margin-pop-item:focus-visible {
    background: var(--primary-soft);
    outline: none;
}

.margin-pop-item.is-checked::after {
    content: '✓';
    margin-left: auto;
    color: var(--primary);
    font-weight: 700;
    flex-shrink: 0;
}

.margin-pop-item.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.margin-pop-preview {
    flex-shrink: 0;
    margin-top: 2px;
}

.margin-pop-preview-star,
.margin-pop-preview-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 36px;
    font-size: 14px;
    color: #f59e0b;
}

.margin-pop-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.margin-pop-title {
    font-size: 13px;
    font-weight: 600;
}

.margin-pop-meta {
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-muted);
}

.size-pop {
    min-width: 260px;
    max-width: min(320px, 94vw);
    max-height: min(80vh, 520px);
}

.orientation-pop {
    position: fixed;
    z-index: 1300;
    min-width: 220px;
    max-width: min(280px, 94vw);
    max-height: min(80vh, 200px);
    overflow: auto;
    padding: 6px 0;
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-menu);
    border: 1px solid var(--border);
}

.orientation-pop[hidden] {
    display: none;
}

.custom-margins-card {
    max-width: 520px;
}

.custom-margins-hint {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-muted);
}

.custom-margins-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 16px;
}

.custom-margins-unit,
.custom-margins-mirror {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.custom-margins-unit select,
.custom-margins-mirror select {
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 8px;
    background: var(--surface);
    color: var(--text);
}

.custom-margins-mirror {
    flex-direction: row;
    align-items: center;
    margin-top: 18px;
    color: var(--text);
}

.custom-margins-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.custom-margin-field {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.custom-margin-field>span:first-child {
    grid-column: 1 / -1;
}

.custom-margin-field input,
.custom-margin-field select {
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 8px;
    background: var(--surface);
    color: var(--text);
}

.custom-margin-unit {
    align-self: center;
    font-size: 11px;
    color: var(--text-muted);
}

.app.mirrored-margins .document {
    padding-left: var(--page-margin-inside, 1in);
    padding-right: var(--page-margin-outside, 1in);
}

@media print {

    .editor.show-gridlines table td,
    .editor.show-gridlines table th {
        outline: none !important;
    }
}

/* Audio Player Styling & Dragging */
.nudi-audio {
    display: inline-block;
    margin: 12px 0;
    padding: 8px 12px;
    border: 1px dashed var(--border, #dadce0);
    border-radius: 12px;
    background: var(--surface, #ffffff);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: move;
    position: relative;
    user-select: none;
}

.nudi-audio:hover {
    border-color: #1a73e8;
    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.15);
}

.nudi-audio.is-audio-selected {
    border-style: solid;
    border-color: #1a73e8;
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.3);
}

.nudi-audio.is-audio-dragging {
    opacity: 0.85;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    cursor: grabbing;
    z-index: 1000 !important;
}

.nudi-audio audio {
    display: block;
    width: 320px;
    max-width: 100%;
    height: 40px;
    border-radius: 8px;
}

.nudi-audio figcaption {
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-muted, #5f6368);
    text-align: center;
    font-style: italic;
}

/* Auth / guest storage */
.btn-auth {
    border: 1px solid var(--border, #dadce0);
    background: var(--surface, #fff);
    color: var(--text, #202124);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.btn-auth:hover {
    background: var(--hover, #f1f3f4);
}

.btn-auth[hidden],
.auth-account[hidden],
.auth-user-menu[hidden] {
    display: none !important;
}

.auth-account {
    position: relative;
    flex-shrink: 1;
    min-width: 0;
}

.auth-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: min(220px, 28vw);
    height: 34px;
    padding: 0 8px 0 10px;
    border: 1px solid var(--border, #dadce0);
    border-radius: 8px;
    background: var(--surface, #fff);
    color: var(--text, #202124);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.auth-user-btn:hover,
.auth-account.is-open .auth-user-btn {
    background: var(--hover, #f1f3f4);
}

.auth-user-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-user-caret {
    flex-shrink: 0;
    color: var(--text-muted, #5f6368);
    transition: transform 0.15s ease;
}

.auth-account.is-open .auth-user-caret {
    transform: rotate(180deg);
}

.auth-user-menu {
    position: fixed;
    top: calc(var(--header-h) + 4px);
    right: 16px;
    z-index: 4000;
    min-width: 180px;
    padding: 6px;
    border: 1px solid var(--border, #dadce0);
    border-radius: 10px;
    background: var(--surface, #fff);
    box-shadow: var(--shadow-menu, 0 12px 32px rgba(32, 33, 36, 0.18));
}

.auth-user-menu-item {
    display: block;
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 9px 10px;
    background: transparent;
    color: var(--text, #202124);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.auth-user-menu-item:hover {
    background: var(--hover, #f1f3f4);
}

.guest-storage-note {
    margin: 8px 12px 0;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-muted, #5f6368);
    background: var(--hover, #f1f3f4);
    border-radius: 8px;
}

.auth-modal-card {
    position: relative;
    width: min(400px, calc(100vw - 32px));
    padding: 28px 28px 22px;
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(32, 33, 36, 0.18);
}

.auth-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted, #5f6368);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.auth-close:hover {
    background: var(--hover, #f1f3f4);
    color: var(--text, #202124);
}

.auth-brand {
    text-align: center;
    margin-bottom: 18px;
}

.auth-brand-mark {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 12px;
    display: block;
    object-fit: cover;
    background: var(--surface);
}

.auth-brand h2 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--text, #202124);
}

.auth-subtitle {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-muted, #5f6368);
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    margin-bottom: 16px;
    border-radius: 10px;
    background: var(--hover, #f1f3f4);
}

.auth-tab {
    border: none;
    background: transparent;
    color: var(--text-muted, #5f6368);
    border-radius: 8px;
    padding: 9px 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.auth-tab.is-active {
    background: var(--surface, #fff);
    color: var(--text, #202124);
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.18);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-field[hidden] {
    display: none !important;
}

.auth-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text, #202124);
}

.auth-field input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border, #dadce0);
    border-radius: 10px;
    padding: 11px 12px;
    font-size: 14px;
    color: var(--text, #202124);
    background: var(--surface, #fff);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-field input:focus {
    border-color: #1a73e8;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.18);
}

.auth-password-wrap {
    position: relative;
    display: block;
}

.auth-password-wrap input {
    padding-right: 64px;
}

.auth-toggle-pass {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #1a73e8;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
}

.auth-toggle-pass:hover {
    background: rgba(26, 115, 232, 0.08);
}

.auth-help {
    margin: -4px 0 0;
    font-size: 12px;
    color: var(--text-muted, #5f6368);
    line-height: 1.35;
}

.auth-error {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fce8e6;
    color: #c5221f;
    font-size: 13px;
    line-height: 1.35;
}

.auth-submit {
    width: 100%;
    margin-top: 4px;
    min-height: 42px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}

.auth-submit.is-busy {
    opacity: 0.72;
    pointer-events: none;
}

.auth-footer {
    margin: 16px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted, #5f6368);
}

.auth-link {
    border: none;
    background: none;
    color: #1a73e8;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.auth-link:hover {
    text-decoration: underline;
}

[data-theme="dark"] .auth-tabs {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .auth-tab.is-active {
    background: rgba(255, 255, 255, 0.1);
    color: #e8eaed;
}

[data-theme="dark"] .auth-error {
    background: rgba(197, 34, 31, 0.18);
}

.auth-forgot-row {
    display: flex;
    justify-content: flex-end;
    margin-top: -6px;
}

.auth-forgot-row .auth-link {
    font-size: 12px;
}

.auth-success {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #e6f4ea;
    color: #137333;
    font-size: 13px;
    line-height: 1.35;
}

[data-theme="dark"] .auth-success {
    background: rgba(19, 115, 51, 0.2);
    color: #81c995;
}

.forgot-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.forgot-resend {
    align-self: center;
    font-size: 13px;
}

@keyframes forgot-block-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.forgot-block-enter {
    animation: forgot-block-in 0.22s ease-out;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0;
    color: var(--text-muted, #5f6368);
    font-size: 12px;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border, #dadce0);
}

.btn-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
    border: 1px solid var(--border, #dadce0);
    border-radius: 10px;
    background: var(--surface, #fff);
    color: var(--text, #202124);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.btn-google:hover {
    background: var(--hover, #f1f3f4);
}

.btn-google.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}

.google-button-slot {
    display: flex;
    justify-content: center;
    min-height: 44px;
}

.google-button-slot[hidden],
.btn-google[hidden] {
    display: none;
}

.auth-google-hint {
    text-align: center;
    margin-top: -4px;
}
/* ==========================================================================
   Site features (below editor)
   ========================================================================== */

.features-scroll-hint {
    position: absolute;
    left: 50%;
    bottom: calc(var(--bottom-h) + 12px);
    transform: translateX(-50%);
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    box-shadow: var(--shadow-menu);
    backdrop-filter: blur(8px);
    transition: opacity 180ms ease, transform 180ms ease, color 150ms ease;
}

.features-scroll-hint:hover {
    color: var(--primary);
    transform: translateX(-50%) translateY(-1px);
}

.features-scroll-hint[hidden] {
    display: none !important;
}

.site-features {
    background:
        radial-gradient(1200px 420px at 50% -10%, rgba(240, 164, 0, 0.12), transparent 60%),
        linear-gradient(180deg, #f2eadc 0%, #faf7f0 38%, #ffffff 100%);
    color: var(--text);
    padding: 72px 24px 20px;
    border-top: 1px solid var(--border);
}

#siteFeatures[hidden],
#siteConverterInfo[hidden],
#siteFontsInfo[hidden],
#siteTemplatesInfo[hidden],
#converterInfoU2N[hidden],
#converterInfoN2U[hidden] {
    display: none !important;
}

.converter-info .site-features-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
}

/* Kannada / English article above "How Nudi to Unicode works" (from the old WordPress page). */
.converter-article {
    max-width: 820px;
    margin: 0 auto 56px;
    font-size: 16px;
    color: var(--text);
}

.converter-article h2 {
    margin-top: 0;
}

.converter-article img {
    max-width: 100%;
    height: auto;
}

.converter-info-grid {
    margin-bottom: 28px;
}

.fv-example {
    width: 100%;
    max-width: 260px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    font-size: 12px;
    line-height: 1.55;
    color: #374151;
    text-align: left;
    word-break: break-word;
}

.fv-example-kn {
    font-family: var(--kannada, "Noto Sans Kannada", sans-serif);
    font-size: 13px;
    color: var(--primary, #b45309);
}

@media (max-width: 980px) {
    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .feature-grid {
        grid-template-columns: 1fr;
    }
}

.converter-guide {
    display: grid;
    gap: 22px;
    max-width: 820px;
    margin: 0 auto 36px;
    text-align: left;
}

.converter-guide-block {
    padding: 20px 22px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 8px 24px rgba(28, 25, 23, 0.04);
}

.converter-guide-block h3 {
    margin: 0 0 10px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
}

.converter-guide-block p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-muted, #57534e);
}

.converter-guide-steps {
    margin: 14px 0 0;
    padding-left: 22px;
    display: grid;
    gap: 10px;
    color: var(--text-muted, #57534e);
    font-size: 15px;
    line-height: 1.65;
}

.converter-tools-list {
    list-style: disc;
}

.converter-guide-steps li strong {
    color: var(--text);
}

.converter-guide-block code {
    font-size: 0.92em;
    padding: 0.1em 0.35em;
    border-radius: 4px;
    background: color-mix(in srgb, var(--border) 55%, transparent);
}

.converter-example {
    margin: 14px 0 0;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px dashed color-mix(in srgb, var(--accent, #b45309) 45%, var(--border));
    background: color-mix(in srgb, var(--bg, #fff) 88%, var(--accent, #b45309) 12%);
    font-size: 15px;
    line-height: 1.75;
    word-break: break-word;
}

.converter-example-nudi {
    font-family: "Nudi", "Baraha", "Nudi Akshara", monospace, sans-serif;
    letter-spacing: 0.01em;
}

html[data-theme="dark"] .converter-guide-block {
    background: rgba(28, 25, 23, 0.45);
}

html[data-theme="dark"] .converter-example {
    background: rgba(41, 37, 36, 0.55);
}

.site-features-inner {
    max-width: 1120px;
    margin: 0 auto;
}

/* Typing pages, on every screen size: the Nudi version download buttons (Nudi Download page
   unchanged). app.js and articles.js set [hidden] on other pages. */
.typing-version-buttons {
    display: none;
    max-width: 560px;
    margin: 0 auto 40px;
    width: 100%;
}

.typing-version-buttons .typing-version-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.typing-version-buttons .article-rich-btn-list-red,
.typing-version-buttons .article-rich-btn-list-dark,
.typing-version-buttons .article-list-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding: 15px 18px 15px 20px;
    border: 1px solid rgba(180, 83, 9, 0.14);
    border-radius: 12px;
    background:
        linear-gradient(165deg, #ffffff 0%, #fffdf8 48%, #fff6e8 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 6px 18px rgba(61, 40, 12, 0.07);
    color: #1f2937;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: 0.01em;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
    overflow: hidden;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

.typing-version-buttons .article-rich-btn-list-red::before,
.typing-version-buttons .article-rich-btn-list-dark::before,
.typing-version-buttons .article-list-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #f0a400 0%, #b45309 100%);
    border-radius: 12px 0 0 12px;
}

.typing-version-buttons .article-rich-btn-list-red::before,
.typing-version-buttons .article-list-item.is-accent::before {
    background: linear-gradient(180deg, #e25b3a 0%, #b91c1c 100%);
}

.typing-version-buttons .article-rich-btn-list-red,
.typing-version-buttons .article-list-item.is-accent {
    color: #9f1239;
    border-color: rgba(185, 28, 28, 0.18);
    background:
        linear-gradient(165deg, #fffefe 0%, #fff8f6 50%, #ffefe9 100%);
}

.typing-version-buttons .article-rich-btn-list-dark,
.typing-version-buttons .article-list-item.is-dark {
    color: #1c1917;
}

.typing-version-buttons .article-rich-btn-list-red::after,
.typing-version-buttons .article-rich-btn-list-dark::after,
.typing-version-buttons .article-list-item::after {
    content: '';
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin-left: auto;
    border-radius: 999px;
    background:
        var(--primary-soft)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b45309' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10'/%3E%3Cpath d='m8 10 4 4 4-4'/%3E%3Cpath d='M5 18h14'/%3E%3C/svg%3E")
        center / 14px 14px no-repeat;
    box-shadow: inset 0 0 0 1px rgba(180, 83, 9, 0.12);
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.typing-version-buttons .article-rich-btn-list-red::after,
.typing-version-buttons .article-list-item.is-accent::after {
    background-color: rgba(185, 28, 28, 0.1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239f1239' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10'/%3E%3Cpath d='m8 10 4 4 4-4'/%3E%3Cpath d='M5 18h14'/%3E%3C/svg%3E");
    background-position: center;
    background-size: 14px 14px;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 1px rgba(185, 28, 28, 0.14);
}

.typing-version-buttons .article-rich-btn-list-red:hover,
.typing-version-buttons .article-rich-btn-list-dark:hover,
.typing-version-buttons .article-list-item:hover {
    transform: translateY(-2px);
    border-color: rgba(180, 83, 9, 0.28);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 12px 28px rgba(61, 40, 12, 0.12);
    background:
        linear-gradient(165deg, #ffffff 0%, #fff8ea 55%, #ffefd2 100%);
}

.typing-version-buttons .article-rich-btn-list-red:hover,
.typing-version-buttons .article-list-item.is-accent:hover {
    border-color: rgba(185, 28, 28, 0.3);
    background:
        linear-gradient(165deg, #ffffff 0%, #fff1ec 55%, #ffe4da 100%);
}

.typing-version-buttons .article-rich-btn-list-red:hover::after,
.typing-version-buttons .article-rich-btn-list-dark:hover::after,
.typing-version-buttons .article-list-item:hover::after {
    transform: translateY(1px);
}

.typing-version-buttons .article-rich-btn-list-red:focus-visible,
.typing-version-buttons .article-rich-btn-list-dark:focus-visible,
.typing-version-buttons .article-list-item:focus-visible {
    outline: none;
    box-shadow: var(--focus), 0 8px 20px rgba(61, 40, 12, 0.1);
}

.typing-version-buttons:not([hidden]) {
    display: block;
}

/* Phones: the same buttons, a little more compact. Long labels wrap beside the download icon. */
@media (max-width: 768px) {
    .typing-version-buttons {
        margin-bottom: 32px;
    }

    .typing-version-buttons .typing-version-list {
        gap: 8px;
    }

    .typing-version-buttons .article-rich-btn-list-red,
    .typing-version-buttons .article-rich-btn-list-dark,
    .typing-version-buttons .article-list-item {
        min-height: 52px;
        gap: 12px;
        padding: 12px 14px 12px 18px;
        font-size: 14.5px;
    }
}

html[data-theme="dark"] .typing-version-buttons .article-rich-btn-list-red,
html[data-theme="dark"] .typing-version-buttons .article-rich-btn-list-dark,
html[data-theme="dark"] .typing-version-buttons .article-list-item {
    border-color: rgba(240, 164, 0, 0.2);
    background: linear-gradient(165deg, #2a241c 0%, #221d17 100%);
    color: #f5efe6;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .typing-version-buttons .article-rich-btn-list-red,
html[data-theme="dark"] .typing-version-buttons .article-list-item.is-accent {
    color: #fda4af;
    border-color: rgba(251, 113, 133, 0.28);
    background: linear-gradient(165deg, #2c1d1d 0%, #241616 100%);
}

html[data-theme="dark"] .typing-version-buttons .article-rich-btn-list-red:hover,
html[data-theme="dark"] .typing-version-buttons .article-rich-btn-list-dark:hover,
html[data-theme="dark"] .typing-version-buttons .article-list-item:hover {
    background: linear-gradient(165deg, #32291f 0%, #2a2218 100%);
    border-color: rgba(240, 164, 0, 0.35);
}

.site-features-hero {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 48px;
}

.site-features-eyebrow {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
}

.site-features-title {
    margin: 0 0 14px;
    font-family: var(--kannada);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #111827;
}

.site-features-lead {
    margin: 0 auto;
    max-width: 820px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--text-muted);
}

.site-features-outro {
    margin: 8px auto 36px;
    max-width: 820px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--text-muted);
    text-align: center;
}

.site-features-outro code {
    font-size: 0.92em;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.feature-card {
    background: #fff;
    border: 1px solid rgba(28, 25, 23, 0.06);
    border-radius: 18px;
    padding: 18px 18px 22px;
    box-shadow: 0 10px 28px rgba(28, 25, 23, 0.04);
    transition: transform 200ms ease, box-shadow 200ms ease;
    opacity: 0;
    transform: translateY(18px);
}

.feature-card.is-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 480ms ease, transform 480ms ease, box-shadow 200ms ease;
}

.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(28, 25, 23, 0.08);
}

.feature-card.is-in:hover {
    transform: translateY(-3px);
}

.feature-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 132px;
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, #f4f5f7 0%, #eceff3 100%);
    border: 1px solid rgba(28, 25, 23, 0.04);
}

.feature-card-title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: #111827;
}

.feature-card-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #6b7280;
}

.feature-card-text strong {
    color: #374151;
    font-weight: 600;
}

/* Feature mock snippets */
.fv-chip {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.fv-chip-kn {
    font-family: var(--kannada);
    color: var(--primary);
}

.fv-arrow {
    color: #9ca3af;
    font-weight: 700;
}

.fv-nudi {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.fv-nudi-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fv-suggest {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.fv-suggest span {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
    background: #fff;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    font-family: var(--kannada);
}

.fv-suggest span.is-on {
    background: var(--primary-soft);
    border-color: rgba(180, 83, 9, 0.28);
    color: var(--primary);
}

.fv-lang {
    display: inline-flex;
    padding: 4px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 12px;
}

.fv-lang-btn {
    border: 0;
    background: transparent;
    height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    font-family: var(--kannada);
    pointer-events: none;
}

.fv-lang-btn.is-on {
    background: var(--primary);
    color: #fff;
}

.fv-sample {
    margin: 0;
    font-size: 13px;
    color: #4b5563;
    font-family: var(--kannada);
}

.fv-voice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.fv-voice-btn {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e5e7eb;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.fv-listening {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
}

.fv-listening i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 0 rgba(180, 83, 9, 0.45);
    animation: fv-pulse 1.4s ease-out infinite;
}

@keyframes fv-pulse {
    0% { box-shadow: 0 0 0 0 rgba(180, 83, 9, 0.45); }
    70% { box-shadow: 0 0 0 10px rgba(180, 83, 9, 0); }
    100% { box-shadow: 0 0 0 0 rgba(180, 83, 9, 0); }
}

.fv-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.fv-copy-btn {
    display: inline-flex;
    height: 36px;
    align-items: center;
    padding: 0 18px;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(180, 83, 9, 0.28);
}

.fv-copied {
    color: var(--success);
    font-size: 13px;
    font-weight: 700;
}

.fv-drafts {
    width: min(220px, 100%);
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.fv-drafts-top {
    padding: 10px 12px;
    background: var(--primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.fv-draft-item {
    padding: 10px 12px;
    border-top: 1px solid #f3f4f6;
}

.fv-draft-item strong {
    display: block;
    font-size: 13px;
    color: #111827;
}

.fv-draft-item small {
    color: #9ca3af;
    font-size: 11px;
}

.fv-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    max-width: 240px;
}

.fv-tb {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.fv-tb.is-b { font-weight: 800; }
.fv-tb.is-i { font-style: italic; }
.fv-tb.is-u { text-decoration: underline; }

.fv-convert {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fv-convert-pane {
    min-width: 88px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.fv-convert-pane small {
    display: block;
    font-size: 10px;
    color: #9ca3af;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fv-convert-pane strong {
    font-size: 14px;
    color: #111827;
}

.fv-fonts {
    text-align: center;
}

.fv-font-row {
    font-size: 22px;
    line-height: 1.3;
    color: #111827;
}

.fv-font-row.is-serif {
    font-family: "Noto Serif Kannada", serif;
    font-size: 20px;
    color: #4b5563;
}

.fv-font-meta {
 margin-top: 8px;
 font-size: 11px;
 color: #9ca3af;
 font-weight: 600;
}

.fv-theme {
 display: flex;
 flex-direction: column;
 gap: 10px;
 width: min(200px, 100%);
}

.fv-theme-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding: 10px 12px;
 border-radius: 10px;
 background: #fff;
 border: 1px solid #e5e7eb;
 font-size: 13px;
 font-weight: 600;
 color: #374151;
}

.fv-theme-row.is-on {
 background: #1c1d21;
 border-color: #3f4148;
 color: #f5f5f4;
}

.fv-switch {
 width: 36px;
 height: 20px;
 border-radius: 999px;
 background: #d1d5db;
 position: relative;
 flex-shrink: 0;
}

.fv-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 160ms ease;
}

.fv-switch.is-on {
 background: var(--primary);
}

.fv-switch.is-on::after {
 transform: translateX(16px);
}

.site-app-cta {
    padding: 8px 24px 28px;
    background: var(--background, #fff);
}

.site-app-cta-inner {
    max-width: 1120px;
    margin: 0 auto;
}

.site-app-cta .site-features-cta {
    margin-top: 0;
    margin-bottom: 0;
}

.site-features-cta {
 position: relative;
 margin-top: 40px;
 margin-bottom: 0;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 28px;
 padding: 22px 32px 22px 28px;
 overflow: hidden;
 border-radius: 18px;
 background: linear-gradient(135deg, #0b1f2a 0%, #172f3c 100%);
 color: #fff;
 box-shadow: 0 16px 40px rgba(11, 31, 42, 0.3);
}

.site-app-phone {
 position: relative;
 z-index: 1;
 flex-shrink: 0;
 display: block;
 width: auto;
 height: 300px;
 object-fit: contain;
 filter: drop-shadow(0 18px 22px rgba(7, 20, 28, 0.25));
}

.site-features-cta-copy {
 flex: 1;
 min-width: 0;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 justify-content: center;
}

.site-features-cta-copy h3 {
 margin: 0 0 6px;
 font-size: 20px;
 font-weight: 700;
}

.site-features-cta-copy p {
 margin: 0;
 font-size: 14px;
 opacity: 0.9;
 line-height: 1.45;
}

.site-social {
 position: relative;
 z-index: 2;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center;
 gap: 12px;
 width: 100%;
 margin-top: 52px;
}

.site-social-link {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 42px;
 height: 42px;
 border-radius: 10px;
 text-decoration: none;
 filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.28));
 transition: transform 180ms ease, filter 180ms ease;
}

/* Each logo carries its own brand colours and shape, so it fills the whole button. */
.site-social-link svg {
 display: block;
 width: 100%;
 height: 100%;
}

.site-social-link:hover,
.site-social-link:focus-visible {
 transform: translateY(-3px) scale(1.08);
 filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.4));
}

.site-social-link:focus-visible {
 outline: 2px solid rgba(255, 255, 255, 0.85);
 outline-offset: 3px;
}

.site-features-cta-badges {
 display: flex;
 flex-direction: column;
 flex-shrink: 0;
 align-items: stretch;
 gap: 10px;
}

.site-features-windows,
.site-features-play {
 flex-shrink: 0;
 line-height: 0;
 border-radius: 6px;
 transition: transform 160ms ease, opacity 160ms ease;
}

.site-features-windows:hover,
.site-features-play:hover {
 transform: translateY(-2px);
 opacity: 0.94;
}

.site-features-windows:focus-visible,
.site-features-play:focus-visible {
 outline: none;
 box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.site-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin: 0;
    padding: 14px 24px;
    background: var(--background);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 13px;
}

#nudi-inch {
    position: fixed !important;
    left: -10000px !important;
    top: 0 !important;
    width: 1in !important;
    height: 1in !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.site-footer-copy {
    flex-shrink: 0;
    font-weight: 600;
}

.site-footer-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 16px;
    min-width: 0;
}

.site-footer a {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: var(--text);
    text-decoration: underline;
}

.site-footer a.is-active,
.site-footer a[aria-current="page"] {
    color: var(--accent, #12806c);
    font-weight: 600;
    text-decoration: underline;
}

.legal-body .site-app-cta {
    margin-top: auto;
    position: relative;
    z-index: 1;
}

.legal-body .site-footer {
    margin-top: 0;
    padding-right: 24px;
}

.site-features-play img,
.site-features-windows img {
 display: block;
 height: 46px;
 width: auto;
 max-width: 100%;
}

.site-features-go {
    display: flex;
    justify-content: flex-end;
    margin: 20px 0 0;
    padding: 0;
}

.site-features-go:has(#btnGoToEditor[hidden]) {
    margin: 0;
}

.go-to-editor {
    position: static;
    right: auto;
    bottom: auto;
    z-index: 80;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 12px 28px rgba(180, 83, 9, 0.34);
    transition: transform 160ms ease, opacity 160ms ease, background 150ms ease;
}

.go-to-editor:hover {
 background: var(--primary-hover);
 transform: translateY(-2px);
}

.go-to-editor[hidden] {
 display: none !important;
}

/* ---------- article pages ---------- */
.articles-page {
    align-items: flex-start;
    overflow-y: auto;
}

.articles-shell {
    width: min(860px, 100%);
    margin: 0 auto;
    padding: 24px;
    box-sizing: border-box;
}

.articles-header {
    margin-bottom: 22px;
}

.article-hub,
.article-detail {
    color: var(--text);
}

.article-hero {
    display: flex;
    justify-content: center;
    margin: 8px 0 18px;
}

.article-hero img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border-radius: 8px;
}

.article-hub-body h2,
.article-features h2,
.article-body h2,
.article-faq h2 {
    margin: 1.4em 0 0.55em;
    color: #1b5e20;
    font-family: "Noto Serif Kannada", "Noto Serif", Georgia, serif;
    font-size: 1.45rem;
    line-height: 1.3;
}

.article-hub-body p {
    margin: 0 0 1em;
    line-height: 1.7;
}

.article-toc {
    margin: 0 0 22px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    max-width: 420px;
}

.article-toc summary {
    list-style: none;
    cursor: pointer;
}

.article-toc summary::-webkit-details-marker {
    display: none;
}

.article-download-btn.is-disabled,
.article-download-btn:disabled {
    opacity: 0.72;
    cursor: not-allowed;
    flex-direction: column;
    gap: 4px;
}

.article-download-btn small {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.9;
}

.article-faq {
    margin: 28px 0 8px;
}

.article-faq-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    margin-bottom: 8px;
    padding: 0 12px;
}

.article-faq-item summary {
    cursor: pointer;
    font-weight: 600;
    padding: 12px 0;
}

.article-faq-item p {
    margin: 0 0 12px;
    color: var(--text-muted);
    line-height: 1.6;
}

.articles-header .tool-heading,
.articles-header .tool-lead {
    margin-bottom: 6px;
}

.articles-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.article-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    padding: 14px 18px;
    border: 2px solid #1f2937;
    border-radius: 2px;
    background: var(--surface);
    color: #1f2937;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    line-height: 1.35;
    box-sizing: border-box;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.article-list-item.is-accent {
    border-color: #c62828;
    color: #c62828;
}

.article-list-item.is-dark {
    border-color: #1f2937;
    color: #1f2937;
}

.article-list-item:hover {
    background: color-mix(in srgb, currentColor 8%, var(--surface));
}

.article-list-item:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

.articles-empty,
.article-loading,
.article-error {
    margin-top: 18px;
    padding: 18px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    color: var(--text-muted);
    text-align: center;
}

.articles-empty strong,
.article-error {
    display: block;
    color: var(--text);
    margin-bottom: 4px;
}

.article-back {
    appearance: none;
    display: inline-block;
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    padding: 0;
    margin-bottom: 16px;
}

.article-back:hover {
    text-decoration: underline;
}

.article-detail {
    color: var(--text);
}

.article-title {
    margin: 0 0 14px;
    color: #1b5e20;
    font-family: "Noto Serif Kannada", "Noto Serif", Georgia, serif;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    line-height: 1.25;
    font-weight: 700;
}

.article-intro {
    margin: 0 0 18px;
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--text);
}

.article-toc {
    margin: 0 0 22px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    max-width: 420px;
}

.article-toc-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    cursor: pointer;
}

.article-toc-head::after {
    content: '';
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.article-toc[open] .article-toc-head {
    margin-bottom: 8px;
}

.article-toc[open] .article-toc-head::after {
    transform: rotate(-135deg);
}

.article-toc ol {
    margin: 0;
    padding-left: 1.2rem;
}

.article-toc li + li {
    margin-top: 4px;
}

.article-toc-link {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    text-align: left;
    padding: 0;
    cursor: pointer;
}

.article-toc-link:hover {
    text-decoration: underline;
}

.article-download-wrap {
    display: flex;
    justify-content: center;
    margin: 22px 0;
}

.article-download-wrap-bottom {
    margin-top: 28px;
}

.article-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: min(100%, 280px);
    padding: 12px 22px;
    border-radius: 8px;
    background: #d32f2f;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}

.article-download-btn:hover {
    background: #b71c1c;
    color: #fff;
}

.nudi-silent-download {
    position: fixed !important;
    left: -10000px !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.article-body .has-text-align-center {
    text-align: center;
}

.article-body p.article-btn-wrap,
.article-body p:has(> a.article-rich-btn),
.article-jump-wrap {
    text-align: center;
}

.article-rich-btn {
    display: inline-block;
    min-width: min(100%, 260px);
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
}

.article-rich-btn-primary {
    background: #d32f2f;
}

.article-rich-btn-navy {
    background: #0f3d5e;
}

.article-rich-btn-outline {
    background: #fff;
    color: #0f3d5e;
    border: 2px solid #0f3d5e;
}

.article-rich-btn-list-red,
.article-rich-btn-list-dark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 54px;
    padding: 14px 18px;
    border-radius: 2px;
    background: var(--surface, #fff);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}

.article-rich-btn-list-red {
    border: 2px solid #c62828;
    color: #c62828;
}

.article-rich-btn-list-dark {
    border: 2px solid #1f2937;
    color: #1f2937;
}

.article-body p.article-btn-wrap:has(> .article-rich-btn-list-red),
.article-body p.article-btn-wrap:has(> .article-rich-btn-list-dark),
.article-body p:has(> a.article-rich-btn-list-red),
.article-body p:has(> a.article-rich-btn-list-dark) {
    display: block;
    width: 100%;
    text-align: center;
}

.article-rich-btn:hover {
    filter: brightness(0.95);
    color: #fff;
}

.article-rich-btn-outline:hover {
    color: #0f3d5e;
}

.article-rich-btn-list-red:hover,
.article-rich-btn-list-dark:hover {
    filter: none;
    background: color-mix(in srgb, currentColor 8%, var(--surface, #fff));
    color: inherit;
}

.article-features {
    margin: 24px 0;
}

.article-features h2,
.article-body h2 {
    margin: 1.4em 0 0.55em;
    color: #1b5e20;
    font-family: "Noto Serif Kannada", "Noto Serif", Georgia, serif;
    font-size: 1.45rem;
    line-height: 1.3;
}

.article-features table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border);
}

.article-features th,
.article-features td {
    padding: 10px 12px;
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.article-features th {
    width: 42%;
    background: var(--surface-secondary);
    font-weight: 600;
}

.article-body {
    line-height: 1.7;
}

.article-body p,
.article-body ul,
.article-body ol {
    margin: 0 0 1em;
}

.article-body li + li {
    margin-top: 0.35em;
}

@media (max-width: 640px) {
    .articles-shell {
        padding: 16px 12px 28px;
    }

    .article-list-item {
        font-size: 15px;
        min-height: 48px;
    }

    .article-features th {
        width: 46%;
    }
}

/* Converter Share sheet (mobile fallback when Web Share is unavailable) */
.converter-share-sheet {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: auto;
}

.converter-share-sheet[hidden] {
    display: none !important;
}

.converter-share-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 32, 0.45);
}

.converter-share-panel {
    position: relative;
    z-index: 1;
    width: min(100%, 440px);
    margin: 0;
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 16px 16px 0 0;
    background: #ffffff;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.18);
    color: #1a1a1a;
}

.converter-share-handle {
    width: 36px;
    height: 4px;
    margin: 2px auto 12px;
    border-radius: 999px;
    background: #c5c5c5;
}

.converter-share-title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
}

.converter-share-note {
    margin: 0 0 14px;
    font-size: 13px;
    color: #667;
}

.converter-share-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.converter-share-btn,
.converter-share-cancel {
    min-height: 48px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #f5f5f5;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.converter-share-btn.is-primary {
    grid-column: 1 / -1;
    background: #1a73e8;
    border-color: #1a73e8;
    color: #fff;
}

.converter-share-btn:active,
.converter-share-cancel:active {
    filter: brightness(0.96);
}

.converter-share-cancel {
    width: 100%;
    margin-top: 10px;
    background: transparent;
}