/* ==========================================================================
   HumanProse design layer
   An ink-dark stage carries the 3D quill mark; the writing tool rises out of
   it like a sheet of paper; everything else sits on cool paper.
   Loaded last on every user page. Scoped to body.hp-ui so it wins cleanly
   over the earlier layers without touching admin screens.
   ========================================================================== */

@font-face { font-family: "HP Display"; src: url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "HP Display"; src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "HP Sans"; src: url("../fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "HP Sans"; src: url("../fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "HP Sans"; src: url("../fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "HP Sans"; src: url("../fonts/hanken-grotesk-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "HP Sans"; src: url("../fonts/hanken-grotesk-latin-800-normal.woff2") format("woff2"); font-weight: 800 900; font-style: normal; font-display: swap; }
@font-face { font-family: "HP Mono"; src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "HP Mono"; src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }

@font-face { font-family: "HP Arabic"; src: url("../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: "HP Arabic"; src: url("../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: "HP Arabic"; src: url("../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: "HP Arabic"; src: url("../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: "HP Arabic Display"; src: url("../fonts/amiri-arabic-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: "HP Arabic Display"; src: url("../fonts/amiri-arabic-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }

:root {
    /* Palette: forest green, warm ivory paper and brass. Token names are kept
       from the first pass: "royal" is the primary (forest), "quill" the brass. */
    --hx-paper: #f4efe6;
    --hx-paper-2: #ebe3d5;
    --hx-surface: #fcf9f3;
    --hx-surface-2: #f6f0e5;
    --hx-ink: #14231c;
    --hx-ink-2: #45554c;
    --hx-ink-3: #57635b;
    --hx-line: #e2d9c8;
    --hx-line-2: #cfc3ad;
    --hx-royal: #0f4536;
    --hx-royal-hover: #0b392f;
    --hx-royal-soft: #e3ece5;
    --hx-royal-ink: #0f4536;
    --hx-quill: #b8894a;
    --hx-quill-soft: #f3e8d4;
    --hx-quill-ink: #6e4b1c;
    --hx-cream: #d9b277;
    --hx-amber: #de9d3d;
    --hx-ok: #17694a;
    --hx-ok-soft: #e2efe4;
    --hx-warn: #8f5200;
    --hx-warn-soft: #f8ebd2;
    --hx-danger: #a8322a;
    --hx-danger-soft: #f7e4df;
    --hx-stage: #04170f;
    --hx-stage-2: #0f4536;
    --hx-on-stage: #f4ecdd;
    --hx-on-stage-2: #b3c4ba;
    --hx-stage-line: rgba(222, 192, 149, .16);
    --hx-shadow: 0 1px 0 rgba(20, 35, 28, .04), 0 14px 34px -16px rgba(12, 30, 22, .22);
    --hx-shadow-lg: 0 50px 90px -40px rgba(8, 26, 19, .45), 0 10px 30px -18px rgba(8, 26, 19, .25);
    --hx-f-display: "HP Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --hx-f-body: "HP Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --hx-f-mono: "HP Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --hx-glass: rgba(252, 249, 243, .86);
    --hx-logo-light: url("../images/humanprose-logo-light.svg?v=forest");
    --hx-btn: #0f4536;
    --hx-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Base ---------- */
html:has(body.hp-ui) { background: var(--hx-paper); }
body.hp-ui:is(.hp-app, .hp-auth, .hp-card-page) {
    background: var(--hx-paper) !important;
    color: var(--hx-ink);
    -webkit-font-smoothing: antialiased;
}
body.hp-ui,
body.hp-ui button,
body.hp-ui input,
body.hp-ui textarea,
body.hp-ui select {
    font-family: var(--hx-f-body) !important;
}
body.hp-ui :is(h1, h2, h3, h4, .font-display, .font-serif) {
    font-family: var(--hx-f-body) !important;
    letter-spacing: -.01em;
}
body.hp-ui .hp-display,
body.hp-ui :is(h1, h2, h3).hp-display {
    font-family: var(--hx-f-display) !important;
    font-weight: 400 !important;
    letter-spacing: -.01em !important;
    line-height: 1.02;
}
body.hp-ui .font-mono { font-family: var(--hx-f-mono) !important; }
body.hp-ui :focus-visible { outline: 2px solid var(--hx-royal); outline-offset: 3px; }
body.hp-ui .background-canvas,
body.hp-ui .background-blob { display: none !important; }
body.hp-ui .scroll-progress { background: linear-gradient(90deg, var(--hx-royal), var(--hx-cream)) !important; }

body.hp-ui .hp-container { width: min(1200px, 100%); margin-inline: auto; padding-inline: 20px; }
body.hp-ui .hp-narrow { width: min(860px, 100%); }
body.hp-ui .lucide, body.hp-ui [data-lucide] { flex: none; }

/* ---------- Buttons ---------- */
body.hp-ui .hp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    border: 0; border-radius: 999px; padding: 14px 24px;
    font-weight: 700; font-size: .95rem; line-height: 1.1; text-decoration: none; white-space: nowrap;
    transition: transform .2s var(--hx-ease), background-color .2s ease, box-shadow .2s ease, color .2s ease;
    cursor: pointer;
}
body.hp-ui .hp-btn svg { width: 18px; height: 18px; }
body.hp-ui .hp-btn:hover:not(:disabled) { transform: translateY(-1px); }
body.hp-ui .hp-btn:disabled { opacity: .55; cursor: default; transform: none; }
body.hp-ui .hp-btn-block { width: 100%; }
body.hp-ui .hp-btn-primary { background: var(--hx-royal); color: #fff; box-shadow: 0 12px 26px -12px rgba(15, 69, 54, .75); }
body.hp-ui .hp-btn-primary:hover:not(:disabled) { background: var(--hx-royal-hover); }
body.hp-ui .hp-btn-light { background: #f6efe2; color: #0f2a20; }
body.hp-ui .hp-btn-light:hover:not(:disabled) { background: #fff; }
body.hp-ui .hp-btn-glass { background: rgba(255, 255, 255, .07); color: var(--hx-on-stage); border: 1px solid rgba(255, 255, 255, .2); }
body.hp-ui .hp-btn-glass:hover { background: rgba(255, 255, 255, .13); }
body.hp-ui .hp-btn-ghost { background: var(--hx-surface); color: var(--hx-ink); border: 1px solid var(--hx-line-2); }
body.hp-ui .hp-btn-ghost:hover:not(:disabled) { border-color: var(--hx-royal); color: var(--hx-royal-ink); }

body.hp-ui .btn-gradient {
    background: var(--hx-royal) !important;
    background-image: none !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 12px 26px -12px rgba(15, 69, 54, .75) !important;
    letter-spacing: .01em;
}
body.hp-ui .btn-gradient:hover:not(:disabled) { background: var(--hx-royal-hover) !important; }

/* ---------- Chips ---------- */
body.hp-ui .hp-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px;
    font-size: .8rem; font-weight: 600; background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .15); color: var(--hx-on-stage);
}
body.hp-ui .hp-chip svg { width: 15px; height: 15px; color: var(--hx-cream); }

/* ---------- Header ---------- */
body.hp-ui .hp-header {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding-top: 12px;
}
body.hp-ui .hp-header > div:first-child {
    height: 64px !important;
    margin-inline: max(20px, calc((100% - 1200px) / 2)) !important;
    max-width: none !important;
    padding-inline: 18px 8px !important;
    background: var(--hx-glass) !important;
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid var(--hx-line);
    border-radius: 999px;
    box-shadow: var(--hx-shadow);
}
body.hp-ui .hp-logo { height: 34px !important; width: auto !important; max-width: none !important; display: block; }
body.hp-ui .hp-header .glass-nav {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
body.hp-ui .hp-header .glass-nav-link {
    color: var(--hx-ink-2) !important;
    font-weight: 600 !important;
    font-size: .9rem;
    background: transparent !important;
    box-shadow: none !important;
}
body.hp-ui .hp-header .glass-nav-link:hover { color: var(--hx-ink) !important; background: var(--hx-surface-2) !important; }
body.hp-ui .hp-header .glass-nav-link.active-section { color: var(--hx-royal-ink) !important; background: var(--hx-royal-soft) !important; }
body.hp-ui #accountMenuButton {
    background: var(--hx-surface-2) !important;
    border: 1px solid var(--hx-line) !important;
    box-shadow: none !important;
}
body.hp-ui .profile-avatar {
    background: linear-gradient(150deg, #4a6fe0, #2a2585) !important;
    color: #fff !important;
    box-shadow: none !important;
}
body.hp-ui .account-menu {
    background: var(--hx-surface) !important;
    border: 1px solid var(--hx-line) !important;
    border-radius: 22px !important;
    box-shadow: var(--hx-shadow-lg) !important;
}
body.hp-ui .account-menu > div:first-child { background: var(--hx-royal-soft) !important; }
body.hp-ui .account-menu-link:hover { background: var(--hx-surface-2) !important; color: var(--hx-ink) !important; }
body.hp-ui .glass-icon-button { background: var(--hx-surface-2) !important; border: 1px solid var(--hx-line) !important; color: var(--hx-ink) !important; box-shadow: none !important; }
body.hp-ui .mobile-menu-panel {
    margin: 8px 20px 0;
    background: var(--hx-surface) !important;
    border: 1px solid var(--hx-line) !important;
    border-radius: 22px;
    box-shadow: var(--hx-shadow-lg) !important;
}
body.hp-ui .mobile-menu-panel:not(.open) { border-width: 0 !important; }

/* ---------- Announcements ---------- */
body.hp-ui .site-announcements { width: min(1160px, calc(100% - 40px)); margin-top: 14px; }
body.hp-ui .site-announcement {
    border-radius: 16px; border-color: var(--hx-line) !important;
    background: var(--hx-surface) !important; box-shadow: none !important;
}

/* ---------- Hero / stage ---------- */
body.hp-ui .hp-hero-wrap { width: min(1200px, 100%); margin: 14px auto 0; padding-inline: 20px; }
body.hp-ui .hp-hero {
    position: relative; overflow: hidden; isolation: isolate; border-radius: 34px;
    background:
        radial-gradient(900px 520px at 78% 40%, rgba(38, 118, 88, .32), transparent 60%),
        radial-gradient(600px 400px at 10% 110%, rgba(184, 137, 74, .16), transparent 60%),
        linear-gradient(180deg, var(--hx-stage-2), var(--hx-stage));
    color: var(--hx-on-stage);
}
body.hp-ui .hp-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
    background-image: linear-gradient(var(--hx-stage-line) 1px, transparent 1px), linear-gradient(90deg, var(--hx-stage-line) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 10%, transparent 65%);
    mask-image: radial-gradient(ellipse at 70% 50%, #000 10%, transparent 65%);
}
body.hp-ui .hp-stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
body.hp-ui .hp-stage-canvas { width: 100% !important; height: 100% !important; display: block; }
body.hp-ui .hp-stage-fallback {
    position: absolute; top: 50%; inset-inline-end: 12%; width: min(30vw, 300px); transform: translateY(-50%);
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .45));
}
body.hp-ui .hp-hero-grid {
    position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 24px; padding: 76px 56px 40px; min-height: 600px; align-items: center;
}
body.hp-ui .hp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
body.hp-ui .hp-hero-title {
    margin: 0; font-family: var(--hx-f-display) !important; font-weight: 400 !important;
    font-size: clamp(3.2rem, 7.4vw, 6.6rem) !important; line-height: .92 !important; letter-spacing: -.015em !important;
    color: var(--hx-on-stage) !important; text-wrap: balance;
}
body.hp-ui .hp-hero-title span { display: block; font-style: italic; color: var(--hx-cream); }
body.hp-ui .hp-hero-lede { margin: 24px 0 0; font-size: 1.14rem; line-height: 1.6; color: var(--hx-on-stage-2); max-width: 44ch; }
body.hp-ui .hp-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
body.hp-ui .hp-hero-note { margin: 16px 0 0; font-size: .84rem; color: var(--hx-on-stage-2); }
body.hp-ui .hp-drag-hint {
    position: absolute; inset-inline-end: 56px; bottom: 118px; z-index: 1; margin: 0;
    display: flex; gap: 8px; align-items: center; font-size: .78rem; color: var(--hx-on-stage-2); opacity: .8;
}
body.hp-ui .hp-drag-hint svg { width: 16px; height: 16px; }
body.hp-ui .hp-hero-strip {
    position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
    margin-inline: 56px; padding-block: 22px 30px; border-top: 1px solid var(--hx-stage-line);
}
body.hp-ui .hp-hero-strip > div { display: flex; gap: 12px; align-items: flex-start; }
body.hp-ui .hp-hero-strip svg { width: 18px; height: 18px; color: var(--hx-cream); margin-top: 2px; }
body.hp-ui .hp-hero-strip p { margin: 0; }
body.hp-ui .hp-hero-strip strong { display: block; font-size: .92rem; }
body.hp-ui .hp-hero-strip span { font-size: .82rem; color: var(--hx-on-stage-2); }

/* ---------- Workspace sheet ---------- */
body.hp-ui .hp-workspace { padding-bottom: 0 !important; }
body.hp-ui .hp-sheet-wrap { perspective: 1800px; margin-top: -34px; position: relative; z-index: 2; }
/* The tilted sheet's near edge projects wider than the page between ~760 and
   ~1400px; clip it at the page edge so the page never scrolls sideways. */
body.hp-ui main#top { overflow-x: clip; }
body.hp-ui .hp-sheet {
    transform-origin: 50% 0; transform: rotateX(var(--hp-tilt, 0deg)) translateZ(0);
    background: var(--hx-surface); border: 1px solid var(--hx-line); border-radius: 30px;
    box-shadow: var(--hx-shadow-lg); padding: 22px; display: grid; gap: 18px;
}
body.hp-ui .hp-sheet > * { margin: 0 !important; }
body.hp-ui .hp-sheet :is(.glass-card, .premium-surface, .account-strip) {
    background: var(--hx-surface-2) !important;
    border: 1px solid var(--hx-line) !important;
    box-shadow: none !important;
    border-radius: 22px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body.hp-ui .hp-sheet :is(.glass-card, .premium-surface, .account-strip)::before,
body.hp-ui .hp-sheet :is(.glass-card, .premium-surface, .account-strip)::after { display: none !important; }
body.hp-ui .hp-sheet .account-strip { background: var(--hx-surface) !important; border-style: dashed !important; }
body.hp-ui .hp-sheet .text-white { color: var(--hx-ink) !important; }
body.hp-ui .hp-sheet .text-textMuted { color: var(--hx-ink-3) !important; }
body.hp-ui .hp-sheet :is(.text-neonCyan, .text-neonBlue) { color: var(--hx-royal-ink) !important; }
body.hp-ui .hp-sheet .text-neonPurple { color: var(--hx-quill-ink) !important; }
body.hp-ui .hp-sheet .text-neonPink { color: var(--hx-danger) !important; }
body.hp-ui .hp-sheet .border-borderGlow { border-color: var(--hx-line) !important; }
body.hp-ui .hp-sheet :is(.bg-appBg\/35, .bg-appBg\/40, .bg-appBg\/45, .bg-appBg\/55, .bg-appBg\/60) { background: var(--hx-surface) !important; }
body.hp-ui .hp-sheet .icon-neon-circle { background: var(--hx-royal-soft) !important; border-color: transparent !important; box-shadow: none !important; }
body.hp-ui .hp-sheet .icon-neon-circle .text-white { color: var(--hx-royal-ink) !important; }
body.hp-ui .hp-sheet #usageGauge { color: var(--hx-royal-ink) !important; }
body.hp-ui .hp-sheet .account-progress { background: var(--hx-line) !important; }
body.hp-ui .hp-sheet .account-progress span { background: var(--hx-royal) !important; }
body.hp-ui .hp-sheet #planText { background: var(--hx-royal-soft) !important; border-color: transparent !important; color: var(--hx-royal-ink) !important; }
body.hp-ui .hp-sheet a[href="#pricing"] {
    background: var(--hx-royal-soft) !important; color: var(--hx-royal-ink) !important; border-color: transparent !important; border-radius: 999px !important;
}
body.hp-ui .hp-sheet a[href="#pricing"]:hover { background: var(--hx-royal) !important; color: #fff !important; }
body.hp-ui .hp-sheet .workspace-grid { gap: 18px !important; }
body.hp-ui .hp-sheet .editor-label {
    background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important;
    color: var(--hx-royal-ink) !important; font-size: .78rem !important; letter-spacing: .02em !important; text-transform: none !important; font-weight: 700 !important;
}
body.hp-ui .hp-sheet .editor-label svg { color: var(--hx-royal-ink) !important; }
body.hp-ui .hp-sheet h2 { font-weight: 700 !important; color: var(--hx-ink) !important; }
body.hp-ui .hp-sheet .text-editor {
    background: var(--hx-surface) !important; color: var(--hx-ink) !important;
    border: 0 !important; box-shadow: none !important; font-size: 1.02rem !important; line-height: 1.75 !important;
}
body.hp-ui .hp-sheet .text-editor-input { font-family: var(--hx-f-body) !important; }
body.hp-ui .hp-sheet .text-editor-output {
    font-family: var(--hx-f-display) !important; font-size: 1.5rem !important; line-height: 1.45 !important;
}
body.hp-ui .hp-sheet .text-editor-output:empty::before { font-family: var(--hx-f-body) !important; font-size: 1rem; color: var(--hx-ink-3) !important; }
body.hp-ui .hp-sheet .text-editor-output :is(mark, ins, .diff-added, .diff-insert) {
    background: linear-gradient(transparent 58%, rgba(214, 194, 148, .6) 58%) !important; color: inherit !important; text-decoration: none !important;
}
body.hp-ui .hp-sheet #exampleBtn,
body.hp-ui .hp-sheet .result-action-row button {
    background: var(--hx-surface) !important; color: var(--hx-ink) !important;
    border: 1px solid var(--hx-line-2) !important; border-radius: 999px !important; box-shadow: none !important;
}
body.hp-ui .hp-sheet #exampleBtn:hover,
body.hp-ui .hp-sheet .result-action-row button:hover:not(:disabled) { border-color: var(--hx-royal) !important; color: var(--hx-royal-ink) !important; }
body.hp-ui .hp-sheet #exampleBtn svg,
body.hp-ui .hp-sheet .result-action-row svg { color: currentColor !important; }
body.hp-ui .hp-sheet #resetControlsBtn { color: var(--hx-ink-2) !important; border: 1px solid var(--hx-line-2) !important; border-radius: 999px; padding: 6px 14px; background: var(--hx-surface) !important; }
body.hp-ui .hp-sheet .mode-btn {
    background: var(--hx-surface) !important; color: var(--hx-ink-2) !important;
    border: 1px solid var(--hx-line) !important; border-radius: 14px !important; box-shadow: none !important; padding-block: 13px !important;
    background-image: none !important;
}
body.hp-ui .hp-sheet .mode-btn:hover { color: var(--hx-ink) !important; border-color: var(--hx-line-2) !important; }
body.hp-ui .hp-sheet .mode-btn.active {
    background: var(--hx-royal) !important; color: #fff !important; border-color: transparent !important;
    box-shadow: 0 10px 22px -12px rgba(15, 69, 54, .9) !important;
}
body.hp-ui .hp-sheet .mode-btn.active * { color: #fff !important; }
body.hp-ui .hp-sheet #modeDescription { color: var(--hx-ink-2) !important; }
body.hp-ui .hp-sheet .controls-slider-stack label { background: var(--hx-surface) !important; border-color: var(--hx-line) !important; border-radius: 14px !important; }
body.hp-ui .hp-sheet .controls-slider-stack label > span:first-child { text-transform: none !important; letter-spacing: 0 !important; color: var(--hx-ink) !important; font-size: .82rem !important; }
body.hp-ui .hp-sheet .controls-slider-stack label > span:last-child { text-transform: none !important; color: var(--hx-ink-3) !important; font-size: .74rem !important; }
body.hp-ui .hp-sheet input[type="range"] { accent-color: var(--hx-royal); }
body.hp-ui .hp-sheet #humanizeBtn { border-radius: 16px !important; letter-spacing: .04em !important; }
body.hp-ui .hp-sheet .loader-container { background: rgba(255, 255, 255, .92) !important; backdrop-filter: blur(4px); }
body.hp-ui .hp-sheet .loader-container h3 { color: var(--hx-ink) !important; }
body.hp-ui .hp-sheet .spinner { border-color: var(--hx-line) !important; border-top-color: var(--hx-royal) !important; }
body.hp-ui .hp-sheet #estimateText { background: var(--hx-quill-soft) !important; border-color: transparent !important; color: var(--hx-quill-ink) !important; }
body.hp-ui .hp-sheet .success-glow { box-shadow: 0 0 0 3px var(--hx-royal-soft) !important; }
body.hp-ui .hp-sheet .saved-document-link { color: var(--hx-royal-ink) !important; }

/* ---------- Sections ---------- */
body.hp-ui .hp-section { padding-block: 110px 0; background: transparent !important; border: 0 !important; content-visibility: visible !important; }
body.hp-ui .hp-footer, body.hp-ui #privacy { content-visibility: visible !important; }
body.hp-ui .hp-sec-head { max-width: 720px; margin-bottom: 44px; }
body.hp-ui .hp-sec-head.is-center { margin-inline: auto; text-align: center; }
body.hp-ui .hp-kicker { margin: 0 0 12px; font-size: .86rem; font-weight: 700; color: var(--hx-royal-ink); }
body.hp-ui .hp-sec-head h2 { margin: 0; font-size: clamp(2.4rem, 4.6vw, 3.8rem) !important; color: var(--hx-ink); text-wrap: balance; }
body.hp-ui .hp-sec-head > p:last-child { margin: 16px 0 0; color: var(--hx-ink-2); font-size: 1.08rem; line-height: 1.6; max-width: 60ch; }
body.hp-ui .hp-sec-head.is-center > p:last-child { margin-inline: auto; }

/* Steps: a real sequence */
body.hp-ui .hp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; perspective: 1400px; }
body.hp-ui .hp-step {
    position: relative; background: var(--hx-surface); border: 1px solid var(--hx-line); border-radius: 24px; padding: 26px; min-width: 0;
    transform: rotateX(var(--hp-rx, 0deg)) rotateY(var(--hp-ry, 0deg)); transition: transform .5s var(--hx-ease);
}
body.hp-ui .hp-step.is-tilting { transition: transform .08s linear; }
body.hp-ui .hp-step-art { height: 150px; position: relative; margin-bottom: 22px; perspective: 700px; transform-style: preserve-3d; }
body.hp-ui .hp-step-n { font-family: var(--hx-f-display); font-size: 2.6rem; line-height: 1; color: var(--hx-royal-ink); }
body.hp-ui .hp-step h3 { margin: 8px 0 0; font-size: 1.2rem; font-weight: 700; color: var(--hx-ink); }
body.hp-ui .hp-step p { margin: 8px 0 0; color: var(--hx-ink-2); font-size: .95rem; line-height: 1.6; }
body.hp-ui .hp-sheetlet {
    position: absolute; inset: 10px 26px; border-radius: 12px; background: var(--hx-surface-2); border: 1px solid var(--hx-line-2);
    padding: 16px; display: grid; gap: 9px; align-content: start;
    transform: rotateX(52deg) rotateZ(-14deg) translateZ(1px); box-shadow: 0 30px 40px -24px rgba(8, 26, 19, .45);
    transition: transform .6s var(--hx-ease);
}
body.hp-ui .hp-sheetlet.b { transform: rotateX(52deg) rotateZ(-14deg) translateZ(18px) translate(8px, -8px); }
body.hp-ui .hp-sheetlet.c { transform: rotateX(52deg) rotateZ(-14deg) translateZ(36px) translate(16px, -16px); background: var(--hx-surface); }
body.hp-ui .hp-step:hover .hp-sheetlet { transform: rotateX(0) rotateZ(0); }
body.hp-ui .hp-sheetlet.is-knobs { gap: 16px; padding-top: 20px; }
body.hp-ui .hp-ln { display: block; height: 7px; border-radius: 9px; background: var(--hx-line-2); position: relative; }
body.hp-ui .hp-ln.is-struck::after { content: ""; position: absolute; left: -4px; right: -4px; top: 3px; height: 2px; background: var(--hx-danger); opacity: .7; }
body.hp-ui .hp-ln.is-royal { background: var(--hx-royal); }
body.hp-ui .hp-ln.is-quill { background: var(--hx-quill); }
body.hp-ui .hp-ln b { position: absolute; top: -4px; width: 15px; height: 15px; border-radius: 99px; background: var(--hx-royal); box-shadow: 0 0 0 4px var(--hx-royal-soft); }
body.hp-ui .w40 { width: 40%; } body.hp-ui .w50 { width: 50%; } body.hp-ui .w60 { width: 60%; } body.hp-ui .w62 { width: 62%; } body.hp-ui .w64 { width: 64%; }
body.hp-ui .w70 { width: 70%; } body.hp-ui .w72 { width: 72%; } body.hp-ui .w76 { width: 76%; } body.hp-ui .w80 { width: 80%; } body.hp-ui .w84 { width: 84%; }
body.hp-ui .w85 { width: 85%; } body.hp-ui .w88 { width: 88%; }
body.hp-ui .k30 { left: 30%; } body.hp-ui .k58 { left: 58%; } body.hp-ui .k72 { left: 72%; }
body.hp-ui .hp-tick { position: absolute; inset-inline-end: 14px; top: 12px; width: 26px; height: 26px; border-radius: 99px; background: var(--hx-ok-soft); color: var(--hx-ok); display: grid; place-items: center; }
body.hp-ui .hp-tick svg { width: 14px; height: 14px; }

/* Features bento */
body.hp-ui .hp-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
body.hp-ui .hp-feat { grid-column: span 2; background: var(--hx-surface); border: 1px solid var(--hx-line); border-radius: 24px; padding: 28px; min-width: 0; }
body.hp-ui .hp-feat.hp-f-wide { grid-column: span 4; }
body.hp-ui .hp-feat-icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--hx-royal-soft); color: var(--hx-royal-ink); margin-bottom: 20px; }
body.hp-ui .hp-feat-icon svg { width: 22px; height: 22px; }
body.hp-ui .hp-feat h3 { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--hx-ink); }
body.hp-ui .hp-feat p { margin: 8px 0 0; color: var(--hx-ink-2); max-width: 46ch; line-height: 1.6; }
body.hp-ui .hp-swap { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-family: var(--hx-f-display); font-size: 1.4rem; line-height: 1.35; }
body.hp-ui .hp-swap s { color: var(--hx-ink-3); text-decoration-color: var(--hx-danger); text-decoration-thickness: 2px; }
body.hp-ui .hp-swap em { color: var(--hx-royal-ink); }
body.hp-ui .hp-swap span { color: var(--hx-line-2); }
body.hp-ui .hp-mini-sliders { margin-top: 20px; display: grid; gap: 12px; }
body.hp-ui .hp-mini-sliders div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: center; font-size: .8rem; color: var(--hx-ink-3); font-weight: 600; }
body.hp-ui .hp-mini-sliders span { height: 6px; border-radius: 9px; background: var(--hx-line); position: relative; }
body.hp-ui .hp-mini-sliders i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 9px; background: var(--hx-royal); }
body.hp-ui .v35 { width: 35%; } body.hp-ui .v50 { width: 50%; } body.hp-ui .v65 { width: 65%; }
body.hp-ui .hp-feat-ink { background: linear-gradient(160deg, var(--hx-stage-2), var(--hx-stage)); border-color: transparent; }
body.hp-ui .hp-feat-ink h3 { color: var(--hx-on-stage); }
body.hp-ui .hp-feat-ink p { color: var(--hx-on-stage-2); }
body.hp-ui .hp-feat-ink .hp-feat-icon { background: rgba(255, 255, 255, .08); color: var(--hx-cream); }
body.hp-ui .hp-grammar { margin-top: 20px !important; font-size: .95rem; line-height: 2 !important; }
body.hp-ui .hp-grammar u { text-decoration: none; border-bottom: 2px dotted var(--hx-cream); color: var(--hx-on-stage); }

/* Use cases */
body.hp-ui .hp-uses { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 20px; align-items: stretch; }
body.hp-ui .hp-use-tabs { display: grid; gap: 10px; align-content: start; }
body.hp-ui .hp-use-tab {
    display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; text-align: start;
    background: var(--hx-surface); border: 1px solid var(--hx-line); border-radius: 20px; padding: 18px; color: var(--hx-ink); cursor: pointer;
}
body.hp-ui .hp-use-tab .hp-use-icon { grid-row: span 2; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--hx-surface-2); color: var(--hx-ink-2); }
body.hp-ui .hp-use-tab .hp-use-icon svg { width: 20px; height: 20px; }
body.hp-ui .hp-use-tab strong { font-size: 1.02rem; }
body.hp-ui .hp-use-tab > span:last-child { font-size: .86rem; color: var(--hx-ink-3); }
body.hp-ui .hp-use-tab[aria-selected="true"] { border-color: var(--hx-royal); box-shadow: 0 0 0 3px var(--hx-royal-soft); }
body.hp-ui .hp-use-tab[aria-selected="true"] .hp-use-icon { background: var(--hx-royal); color: #fff; }
body.hp-ui .hp-use-stage { perspective: 1400px; min-width: 0; }
body.hp-ui .hp-use-card {
    position: relative; height: 100%; display: flex; flex-direction: column; gap: 18px; padding: 34px; border-radius: 26px;
    background: linear-gradient(165deg, #0f4536, #04170f 75%); color: var(--hx-on-stage);
    transform: rotateX(var(--hp-rx, 0deg)) rotateY(var(--hp-ry, 0deg)); transition: transform .3s var(--hx-ease);
}
body.hp-ui .hp-use-card[hidden] { display: none; }
body.hp-ui .hp-use-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.hp-ui .hp-use-chips .hp-chip svg { color: var(--hx-cream); }
body.hp-ui .hp-use-before { margin: 0; color: var(--hx-on-stage-2); text-decoration: line-through; text-decoration-color: rgba(255, 131, 148, .7); max-width: 60ch; }
body.hp-ui .hp-use-after { margin: 0; font-family: var(--hx-f-display); font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.25; max-width: 30ch; }
body.hp-ui .hp-use-foot { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 18px; font-size: .9rem; color: var(--hx-on-stage-2); }
body.hp-ui .hp-use-foot strong { color: var(--hx-cream); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
    body.hp-ui .hp-use-card:not([hidden]) .hp-use-after { animation: hp-rise .45s var(--hx-ease); }
}
@keyframes hp-rise { from { opacity: 0; transform: translateY(10px); } }

/* Compare */
body.hp-ui .hp-compare {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: stretch;
    background: var(--hx-surface); border: 1px solid var(--hx-line); border-radius: 28px; padding: 14px; box-shadow: var(--hx-shadow); perspective: 1200px;
}
body.hp-ui .hp-cmp-col { position: relative; border-radius: 20px; padding: 34px 34px 28px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
body.hp-ui .hp-cmp-lab { display: flex; gap: 8px; align-items: center; font-size: .85rem; font-weight: 700; }
body.hp-ui .hp-cmp-lab svg { width: 16px; height: 16px; }
body.hp-ui .hp-cmp-col p { margin: 0; flex: 1; font-family: var(--hx-f-display); font-size: clamp(1.45rem, 2.3vw, 2rem); line-height: 1.3; }
body.hp-ui .hp-cmp-col small { font-size: .82rem; font-variant-numeric: tabular-nums; }
body.hp-ui .hp-cmp-col.is-before { background: var(--hx-surface-2); color: var(--hx-ink-3); }
body.hp-ui .hp-filler { text-decoration: underline wavy var(--hx-danger); text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
body.hp-ui .hp-cmp-col.is-after {
    background: linear-gradient(165deg, #0f4536, #04170f 75%); color: var(--hx-on-stage);
    transform: rotateX(var(--hp-rx, 0deg)) rotateY(var(--hp-ry, 0deg)); transition: transform .3s var(--hx-ease);
}
body.hp-ui .hp-cmp-col.is-after .hp-cmp-lab { color: var(--hx-cream); }
body.hp-ui .hp-cmp-col.is-after small { color: var(--hx-on-stage-2); }
body.hp-ui .hp-cmp-col.is-after mark { background: linear-gradient(transparent 60%, rgba(233, 220, 189, .35) 60%); color: inherit; }
body.hp-ui .hp-cmp-arrow { align-self: center; width: 44px; height: 44px; border-radius: 99px; display: grid; place-items: center; background: var(--hx-royal); color: #fff; }
body.hp-ui .hp-cmp-arrow svg { width: 18px; height: 18px; }

/* Calculator */
body.hp-ui .hp-calc {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: center;
    background: var(--hx-surface); border: 1px solid var(--hx-line); border-radius: 26px; padding: 26px 28px; margin-bottom: 22px;
}
body.hp-ui .hp-calc h3 { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--hx-ink); }
body.hp-ui .hp-calc-value { margin: 10px 0 0; font-family: var(--hx-f-display); font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: 1; color: var(--hx-ink); font-variant-numeric: tabular-nums; }
body.hp-ui .hp-calc-value small { font-family: var(--hx-f-body); font-size: 1rem; color: var(--hx-ink-3); }
body.hp-ui .hp-calc input[type="range"] { width: 100%; margin-top: 16px; accent-color: var(--hx-royal); }
body.hp-ui .hp-calc-ends { display: flex; justify-content: space-between; font-size: .76rem; color: var(--hx-ink-3); font-variant-numeric: tabular-nums; }
body.hp-ui .hp-calc-rec { background: var(--hx-surface-2); border: 1px solid var(--hx-line); border-radius: 20px; padding: 20px; display: grid; gap: 8px; }
body.hp-ui .hp-calc-k { font-size: .84rem; font-weight: 700; color: var(--hx-royal-ink); }
body.hp-ui .hp-calc-name { font-size: 1.5rem; font-weight: 800; color: var(--hx-ink); }
body.hp-ui .hp-calc-name span { font-weight: 600; font-size: 1rem; color: var(--hx-ink-2); }
body.hp-ui .hp-calc-rec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .88rem; color: var(--hx-ink-2); font-variant-numeric: tabular-nums; }

/* Pricing */
body.hp-ui .hp-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; perspective: 1200px; }
body.hp-ui .hp-plan {
    position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0;
    background: var(--hx-surface); border: 1px solid var(--hx-line); border-radius: 26px; padding: 26px 22px 22px;
    transform: rotateX(var(--hp-rx, 0deg)) rotateY(var(--hp-ry, 0deg)); transition: transform .3s var(--hx-ease), box-shadow .25s ease;
}
body.hp-ui .hp-plan.is-tilting, body.hp-ui .hp-use-card.is-tilting, body.hp-ui .hp-cmp-col.is-tilting { transition: transform .08s linear; }
body.hp-ui .hp-plan::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(400px circle at var(--hp-gx, 50%) var(--hp-gy, 0%), rgba(255, 255, 255, .16), transparent 45%);
}
body.hp-ui .hp-plan.is-tilting::after { opacity: 1; }
body.hp-ui .hp-plan-who { font-size: .8rem; font-weight: 700; color: var(--hx-ink-3); }
body.hp-ui .hp-plan h3 { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--hx-ink); }
body.hp-ui .hp-price { display: flex; align-items: baseline; gap: 6px; font-family: var(--hx-f-display); font-size: 4rem; line-height: 1; color: var(--hx-ink); font-variant-numeric: tabular-nums; }
body.hp-ui .hp-price small { font-family: var(--hx-f-body); font-size: 1.1rem; font-weight: 600; color: var(--hx-ink-3); }
body.hp-ui .hp-plan-vol { margin: 0; font-weight: 700; font-size: .92rem; color: var(--hx-royal-ink); font-variant-numeric: tabular-nums; }
body.hp-ui .hp-plan ul { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 9px; font-size: .9rem; color: var(--hx-ink-2); flex: 1; }
body.hp-ui .hp-plan li { display: flex; gap: 10px; }
body.hp-ui .hp-plan li svg { width: 17px; height: 17px; margin-top: 2px; color: var(--hx-royal-ink); }
body.hp-ui .hp-plan-per { margin: 0; padding-top: 12px; border-top: 1px dashed var(--hx-line-2); font-size: .8rem; color: var(--hx-ink-3); font-variant-numeric: tabular-nums; }
body.hp-ui .hp-plan.is-featured { background: linear-gradient(165deg, #0f4536, #04170f 70%); border-color: transparent; box-shadow: var(--hx-shadow-lg); }
body.hp-ui .hp-plan.is-featured :is(h3, .hp-price) { color: var(--hx-on-stage); }
body.hp-ui .hp-plan.is-featured :is(.hp-plan-who, ul, .hp-plan-per, .hp-price small) { color: var(--hx-on-stage-2); }
body.hp-ui .hp-plan.is-featured :is(.hp-plan-vol, li svg) { color: var(--hx-cream); }
body.hp-ui .hp-plan.is-featured .hp-plan-per { border-color: rgba(255, 255, 255, .18); }
body.hp-ui .hp-ribbon { position: absolute; top: -12px; inset-inline-start: 22px; background: var(--hx-cream); color: #2a2008; font-size: .74rem; font-weight: 800; padding: 5px 12px; border-radius: 999px; }
body.hp-ui .hp-plan.is-recommended { outline: 2px solid var(--hx-royal); outline-offset: 3px; }
body.hp-ui .hp-plan.is-featured.is-recommended { outline-color: var(--hx-cream); }
body.hp-ui .hp-plan.is-recommended::before {
    content: var(--hp-best-fit, "Best fit"); position: absolute; top: -12px; inset-inline-end: 18px; background: var(--hx-royal); color: #fff;
    font-size: .72rem; font-weight: 800; padding: 5px 11px; border-radius: 999px;
}
body.hp-ui .hp-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; background: var(--hx-quill-soft); color: var(--hx-quill-ink); border-radius: 16px; padding: 14px 18px; font-size: .9rem; }
body.hp-ui .hp-note svg { width: 18px; height: 18px; margin-top: 2px; }
body.hp-ui .hp-note p { margin: 0; }
body.hp-ui .hp-credits { margin-top: 22px; background: var(--hx-surface); border: 1px solid var(--hx-line); border-radius: 28px; padding: 30px; }
body.hp-ui .hp-credits-head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 22px; }
body.hp-ui .hp-credits-head h3 { margin: 0; font-size: 2.3rem !important; color: var(--hx-ink); }
body.hp-ui .hp-credits-head p:not(.hp-kicker) { margin: 8px 0 0; color: var(--hx-ink-2); max-width: 60ch; }
body.hp-ui .hp-kv { background: var(--hx-surface-2); border: 1px solid var(--hx-line); border-radius: 14px; padding: 10px 14px; min-width: 170px; }
body.hp-ui .hp-kv span { display: block; font-size: .74rem; font-weight: 600; color: var(--hx-ink-3); }
body.hp-ui .hp-kv strong { font-size: 1.25rem; color: var(--hx-royal-ink); font-variant-numeric: tabular-nums; }
body.hp-ui .hp-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
body.hp-ui .hp-pack {
    text-align: start; display: grid; gap: 6px; cursor: pointer; color: var(--hx-ink);
    background: var(--hx-surface-2); border: 1px solid var(--hx-line); border-radius: 20px; padding: 20px;
    transition: border-color .2s, transform .2s var(--hx-ease);
}
body.hp-ui .hp-pack:hover { border-color: var(--hx-royal); transform: translateY(-2px); }
body.hp-ui .hp-pack-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
body.hp-ui .hp-pack-top strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
body.hp-ui .hp-pack-cost { font-family: var(--hx-f-display); font-size: 1.8rem; color: var(--hx-royal-ink); }
body.hp-ui .hp-pack > span:not(.hp-pack-top) { font-size: .85rem; color: var(--hx-ink-2); font-variant-numeric: tabular-nums; }
body.hp-ui .hp-pack small { font-size: .8rem; color: var(--hx-ink-3); font-variant-numeric: tabular-nums; }

/* FAQ */
body.hp-ui .hp-faq { display: grid; gap: 10px; }
body.hp-ui .hp-faq-item { background: var(--hx-surface); border: 1px solid var(--hx-line); border-radius: 18px; overflow: hidden; }
body.hp-ui .hp-faq .faq-btn {
    width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px;
    background: transparent; border: 0; text-align: start; font-weight: 700; font-size: 1rem; color: var(--hx-ink); cursor: pointer;
}
body.hp-ui .hp-faq .faq-btn svg { width: 20px; height: 20px; color: var(--hx-royal-ink); transition: transform .25s; }
body.hp-ui .hp-faq .faq-content { max-height: 0; overflow: hidden; transition: max-height .3s var(--hx-ease); padding-inline: 22px; color: var(--hx-ink-2); border-top: 1px solid transparent; }
body.hp-ui .hp-faq .faq-content p { margin: 0; padding-bottom: 20px; max-width: 65ch; line-height: 1.65; }
body.hp-ui .hp-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 60px; scroll-margin-top: 90px; }
body.hp-ui .hp-trust > div { background: var(--hx-surface); border: 1px solid var(--hx-line); border-radius: 22px; padding: 26px; scroll-margin-top: 90px; }
body.hp-ui .hp-trust h3 { margin: 0; display: flex; gap: 10px; align-items: center; font-size: 1.15rem; font-weight: 700; color: var(--hx-ink); }
body.hp-ui .hp-trust h3 svg { width: 20px; height: 20px; color: var(--hx-royal-ink); }
body.hp-ui .hp-trust p { margin: 10px 0 0; color: var(--hx-ink-2); font-size: .93rem; line-height: 1.65; }
body.hp-ui .hp-trust .hp-trust-link { color: var(--hx-royal-ink); font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--hx-quill) 60%, transparent); text-underline-offset: 4px; }
body.hp-ui .hp-trust .hp-trust-link:hover { text-decoration-color: var(--hx-quill); }

/* Footer */
body.hp-ui .hp-footer { margin-top: 100px; background: var(--hx-surface) !important; border-color: var(--hx-line) !important; backdrop-filter: none !important; }
body.hp-ui .hp-footer .hp-logo { height: 32px !important; }
body.hp-ui .hp-footer a { color: var(--hx-ink-2) !important; }
body.hp-ui .hp-footer a:hover { color: var(--hx-ink) !important; }
body.hp-ui .hp-footer .text-textMuted { color: var(--hx-ink-3) !important; }

/* Toast and back-to-top on the light theme */
body.hp-ui #toast { background: var(--hx-ink) !important; border-color: transparent !important; border-radius: 14px !important; }
body.hp-ui .back-to-top { background: var(--hx-surface) !important; color: var(--hx-ink) !important; border: 1px solid var(--hx-line) !important; box-shadow: var(--hx-shadow) !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1060px) {
    body.hp-ui .hp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
    body.hp-ui .hp-hero-grid { grid-template-columns: 1fr; padding: 48px 24px 8px; min-height: 0; }
    body.hp-ui .hp-stage { position: relative; inset: auto; height: 360px; margin-top: -10px; }
    body.hp-ui .hp-hero { display: flex; flex-direction: column; }
    body.hp-ui .hp-hero .hp-stage { order: 2; }
    body.hp-ui .hp-hero .hp-hero-grid { order: 1; }
    body.hp-ui .hp-hero .hp-hero-strip { order: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: 24px; }
    body.hp-ui .hp-drag-hint { display: none; }
    body.hp-ui .hp-hero-grid > div:last-child { display: none; }
}
@media (max-width: 860px) {
    body.hp-ui .hp-steps { grid-template-columns: 1fr; }
    body.hp-ui .hp-bento { grid-template-columns: 1fr; }
    body.hp-ui .hp-feat, body.hp-ui .hp-feat.hp-f-wide { grid-column: auto; }
    body.hp-ui .hp-uses { grid-template-columns: 1fr; }
    body.hp-ui .hp-use-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.hp-ui .hp-use-tab { grid-template-columns: 1fr; justify-items: start; }
    body.hp-ui .hp-use-tab .hp-use-icon { grid-row: auto; }
    body.hp-ui .hp-use-tab > span:last-child { display: none; }
    body.hp-ui .hp-calc { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    body.hp-ui .hp-compare { grid-template-columns: 1fr; }
    body.hp-ui .hp-cmp-arrow { justify-self: center; transform: rotate(90deg); }
    body.hp-ui .hp-cmp-col { padding: 24px; }
    body.hp-ui .hp-packs { grid-template-columns: 1fr; }
    body.hp-ui .hp-trust { grid-template-columns: 1fr; }
    body.hp-ui .hp-section { padding-top: 80px; }
}
@media (max-width: 560px) {
    body.hp-ui .hp-hero-wrap { padding-inline: 12px; }
    body.hp-ui .hp-hero { border-radius: 26px; }
    body.hp-ui .hp-hero .hp-hero-strip { grid-template-columns: 1fr; }
    body.hp-ui .hp-plans { grid-template-columns: 1fr; }
    body.hp-ui .hp-sheet { padding: 12px; border-radius: 24px; }
    body.hp-ui .hp-header > div:first-child { margin-inline: 12px !important; padding-inline: 14px 6px !important; }
    body.hp-ui .hp-logo { height: 28px !important; }
    body.hp-ui .hp-use-tab { padding: 12px; }
    body.hp-ui .hp-use-card { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    body.hp-ui .hp-sheet { transform: none !important; }
    body.hp-ui :is(.hp-step, .hp-plan, .hp-use-card, .hp-cmp-col, .hp-sheetlet) { transition: none !important; }
}

/* ==========================================================================
   Authentication: split card (sign in, create account) and single card
   (forgot password, reset password, verify email)
   ========================================================================== */
body.hp-ui.hp-auth,
body.hp-ui.hp-card-page {
    background:
        radial-gradient(900px 600px at 0% 0%, rgba(38, 118, 88, .10), transparent 60%),
        radial-gradient(700px 500px at 100% 100%, rgba(214, 194, 148, .14), transparent 60%),
        var(--hx-paper) !important;
}
body.hp-ui .auth-page,
body.hp-ui.hp-card-page .page { background: transparent !important; }
body.hp-ui .auth-page::before, body.hp-ui .auth-page::after,
body.hp-ui.hp-card-page .page::before, body.hp-ui.hp-card-page .page::after { display: none !important; }

body.hp-ui .auth-wrap { width: min(1180px, 100%) !important; max-width: none !important; }
body.hp-ui .toolbar-link,
body.hp-ui .back-link {
    display: inline-flex !important; align-items: center; gap: 8px;
    background: var(--hx-surface) !important; color: var(--hx-ink) !important;
    border: 1px solid var(--hx-line-2) !important; border-radius: 999px !important;
    padding: 9px 16px !important; font-weight: 700 !important; font-size: .88rem !important; box-shadow: none !important;
}
body.hp-ui .toolbar-link:hover, body.hp-ui .back-link:hover { border-color: var(--hx-royal) !important; color: var(--hx-royal-ink) !important; }

body.hp-ui .auth-shell {
    background: var(--hx-surface) !important; border: 1px solid var(--hx-line) !important;
    border-radius: 34px !important; box-shadow: var(--hx-shadow-lg) !important; overflow: hidden !important;
}
body.hp-ui .feature-panel {
    position: relative !important; isolation: isolate; overflow: hidden !important;
    display: flex !important; flex-direction: column !important; justify-content: flex-start !important; gap: 0 !important;
    background:
        radial-gradient(600px 420px at 70% 25%, rgba(38, 118, 88, .42), transparent 60%),
        linear-gradient(180deg, var(--hx-stage-2), var(--hx-stage)) !important;
    color: var(--hx-on-stage) !important; border: 0 !important; box-shadow: none !important;
    padding: 36px 40px 34px !important;
}
body.hp-ui .feature-panel::before,
body.hp-ui .feature-panel::after { display: none !important; }
body.hp-ui .feature-panel > * { position: relative; z-index: 1; }
body.hp-ui .feature-brand { display: inline-flex !important; }
body.hp-ui .feature-brand img, body.hp-ui .mobile-brand img { height: 32px !important; width: auto !important; max-width: none !important; opacity: 1 !important; filter: none !important; }
body.hp-ui .hp-auth-stage { position: relative !important; inset: auto !important; height: 290px; margin: 4px -40px 0; flex: none; }
body.hp-ui .feature-panel .hp-auth-stage .hp-stage-canvas {
    -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 55%, transparent 100%);
    mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 55%, transparent 100%);
}
body.hp-ui .hp-auth-stage .hp-stage-fallback { position: absolute; left: 50%; top: 50%; right: auto; width: 150px; transform: translate(-50%, -50%); }
body.hp-ui .feature-content { margin-top: 0 !important; }
body.hp-ui .feature-badge {
    background: rgba(255, 255, 255, .07) !important; border: 1px solid rgba(255, 255, 255, .15) !important;
    color: var(--hx-on-stage) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important;
}
body.hp-ui .feature-badge .icon { color: var(--hx-cream) !important; }
body.hp-ui .feature-title {
    font-family: var(--hx-f-display) !important; font-weight: 400 !important; letter-spacing: -.01em !important;
    font-size: clamp(2.5rem, 4.2vw, 3.8rem) !important; line-height: 1 !important; color: var(--hx-on-stage) !important; margin-top: 18px !important;
}
body.hp-ui .feature-title .gradient-text,
body.hp-ui .feature-title span:last-child {
    background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important; color: var(--hx-cream) !important; font-style: italic;
}
body.hp-ui .feature-title span:first-child { color: var(--hx-on-stage) !important; font-style: normal; }
body.hp-ui .feature-copy { color: var(--hx-on-stage-2) !important; font-size: 1rem !important; line-height: 1.6 !important; max-width: 44ch; }
body.hp-ui .feature-list { gap: 10px !important; }
body.hp-ui .feature-item {
    background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 16px !important; box-shadow: none !important; backdrop-filter: blur(6px);
}
body.hp-ui .feature-item strong { color: var(--hx-on-stage) !important; }
body.hp-ui .feature-item p { color: var(--hx-on-stage-2) !important; }
body.hp-ui .feature-item-icon { background: rgba(255, 255, 255, .08) !important; color: var(--hx-cream) !important; border: 0 !important; box-shadow: none !important; }
body.hp-ui .feature-footer { color: var(--hx-on-stage-2) !important; margin-top: 22px !important; opacity: 1 !important; }

body.hp-ui .form-panel { background: var(--hx-surface) !important; padding: 52px 52px 40px !important; }
body.hp-ui .form-eyebrow,
body.hp-ui .badge,
body.hp-ui .reset-badge {
    display: inline-flex !important; align-items: center; gap: 6px; width: auto !important; align-self: flex-start;
    background: var(--hx-royal-soft) !important; color: var(--hx-royal-ink) !important; border: 0 !important;
    border-radius: 999px !important; padding: 6px 12px !important;
    font-size: .78rem !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important;
}
body.hp-ui .form-title,
body.hp-ui.hp-card-page h1,
body.hp-ui .reset-title {
    font-family: var(--hx-f-display) !important; font-weight: 400 !important; letter-spacing: -.01em !important;
    font-size: clamp(2.6rem, 4vw, 3.4rem) !important; line-height: 1 !important; color: var(--hx-ink) !important;
}
body.hp-ui .form-copy, body.hp-ui .subtitle, body.hp-ui .reset-copy { color: var(--hx-ink-2) !important; }
body.hp-ui .google-button {
    background: var(--hx-surface) !important; color: var(--hx-ink) !important; border: 1px solid var(--hx-line-2) !important;
    border-radius: 14px !important; box-shadow: none !important; font-weight: 700 !important;
}
body.hp-ui .google-button:hover { background: var(--hx-surface-2) !important; border-color: var(--hx-ink-3) !important; }
body.hp-ui .divider span { color: var(--hx-ink-3) !important; background: var(--hx-surface) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 700 !important; }
body.hp-ui .divider::before, body.hp-ui .divider::after { background: var(--hx-line) !important; }
body.hp-ui .field-label { color: var(--hx-ink) !important; font-weight: 700 !important; }
body.hp-ui .input-wrap { border-radius: 14px !important; }
body.hp-ui .control {
    background: var(--hx-surface-2) !important; color: var(--hx-ink) !important;
    border: 1px solid var(--hx-line-2) !important; border-radius: 14px !important; box-shadow: none !important;
}
body.hp-ui .control:focus { border-color: var(--hx-royal) !important; box-shadow: 0 0 0 4px var(--hx-royal-soft) !important; background: var(--hx-surface) !important; }
body.hp-ui .control::placeholder { color: var(--hx-ink-3) !important; }
body.hp-ui .field-icon { color: var(--hx-ink-3) !important; }
body.hp-ui .password-toggle {
    background: var(--hx-royal-soft) !important; color: var(--hx-royal-ink) !important; border: 0 !important;
    border-radius: 10px !important; font-weight: 700 !important; box-shadow: none !important;
}
body.hp-ui .field-hint { color: var(--hx-ink-3) !important; }
body.hp-ui .checkbox-label input { accent-color: var(--hx-royal); }
body.hp-ui .text-link { color: var(--hx-royal-ink) !important; font-weight: 700 !important; }
body.hp-ui .submit-button,
body.hp-ui .button-primary {
    background: var(--hx-royal) !important; background-image: none !important; color: #fff !important; border: 0 !important;
    border-radius: 14px !important; box-shadow: 0 14px 28px -14px rgba(15, 69, 54, .8) !important; font-weight: 700 !important;
}
body.hp-ui .submit-button:hover:not(:disabled),
body.hp-ui .button-primary:hover:not(:disabled) { background: var(--hx-royal-hover) !important; }
body.hp-ui .button-secondary {
    background: var(--hx-surface) !important; color: var(--hx-ink) !important; border: 1px solid var(--hx-line-2) !important;
    border-radius: 14px !important; box-shadow: none !important; font-weight: 700 !important;
}
body.hp-ui .notice { border-radius: 14px !important; box-shadow: none !important; }
body.hp-ui .notice-success { background: var(--hx-ok-soft) !important; color: var(--hx-ok) !important; border-color: transparent !important; }
body.hp-ui .notice-error { background: var(--hx-danger-soft) !important; color: var(--hx-danger) !important; border-color: transparent !important; }
body.hp-ui .terms-card,
body.hp-ui .help-panel { background: var(--hx-surface-2) !important; border: 1px solid var(--hx-line) !important; border-radius: 16px !important; box-shadow: none !important; }
body.hp-ui .form-note, body.hp-ui .form-footer { color: var(--hx-ink-3) !important; }
body.hp-ui .form-footer span { color: var(--hx-ink-2) !important; }

/* Single-card pages */
body.hp-ui :is(.recovery-card, .verification-card, .reset-card) {
    position: relative; overflow: hidden !important; padding: 0 !important;
    background: var(--hx-surface) !important; border: 1px solid var(--hx-line) !important;
    border-radius: 30px !important; box-shadow: var(--hx-shadow-lg) !important;
}
body.hp-ui :is(.recovery-card, .verification-card, .reset-card)::before,
body.hp-ui :is(.recovery-card, .verification-card, .reset-card)::after { display: none !important; }
body.hp-ui .hp-card-stage {
    position: relative; isolation: isolate; height: 230px; overflow: hidden;
    background:
        radial-gradient(520px 300px at 50% 40%, rgba(38, 118, 88, .45), transparent 65%),
        linear-gradient(180deg, var(--hx-stage-2), var(--hx-stage));
}
body.hp-ui .hp-card-stage .hp-auth-stage { position: absolute !important; inset: 0 !important; height: auto; margin: 0; }
body.hp-ui .hp-card-stage-logo { position: absolute; inset-inline-start: 28px; top: 24px; z-index: 2; display: inline-flex; }
body.hp-ui .hp-card-stage-logo img { height: 28px !important; width: auto !important; }
body.hp-ui :is(.recovery-card, .verification-card) .card-body > .brand,
body.hp-ui .reset-body > .reset-brand { display: none !important; }
body.hp-ui :is(.recovery-card, .verification-card) .card-body,
body.hp-ui .reset-body { padding: 34px 40px 38px !important; }
body.hp-ui .mail-illustration { display: none !important; }
body.hp-ui .email-address { color: var(--hx-royal-ink) !important; }

@media (max-width: 920px) {
    body.hp-ui .hp-auth .hp-auth-stage,
    body.hp-ui.hp-auth .feature-panel .hp-auth-stage { height: 220px; }
    body.hp-ui .form-panel { padding: 32px 24px !important; }
    body.hp-ui .feature-panel { padding: 28px 24px !important; }
    body.hp-ui .hp-auth-stage { margin-inline: -24px; }
}
@media (max-width: 560px) {
    body.hp-ui :is(.recovery-card, .verification-card) .card-body,
    body.hp-ui .reset-body { padding: 26px 22px 30px !important; }
    body.hp-ui .hp-card-stage { height: 190px; }
}

/* ==========================================================================
   Application pages: dashboard, documents, document view, trash, account
   ========================================================================== */
body.hp-ui.hp-app { background: var(--hx-paper) !important; }
body.hp-ui.hp-app::before, body.hp-ui.hp-app::after { display: none !important; }

/* Header becomes the same floating pill as the home page */
body.hp-ui.hp-app .site-header {
    position: sticky; top: 0; z-index: 50;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding-top: 12px;
}
body.hp-ui.hp-app .header-inner {
    height: 64px !important; min-height: 0 !important; width: auto !important; max-width: 1200px !important;
    margin-inline: max(20px, calc((100% - 1200px) / 2)) !important;
    padding-inline: 18px 8px !important;
    background: var(--hx-glass) !important;
    backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid var(--hx-line) !important; border-radius: 999px !important; box-shadow: var(--hx-shadow) !important;
}
body.hp-ui.hp-app .header-inner .brand img,
body.hp-ui.hp-app .header-inner .brand-logo,
body.hp-ui.hp-app .header-inner img { height: 32px !important; width: auto !important; max-width: none !important; }
body.hp-ui.hp-app .nav-link {
    color: var(--hx-ink-2) !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
    border-radius: 999px !important; font-weight: 600 !important;
}
body.hp-ui.hp-app .nav-link:hover { color: var(--hx-ink) !important; background: var(--hx-surface-2) !important; }
body.hp-ui.hp-app .nav-current {
    color: var(--hx-royal-ink) !important; background: var(--hx-royal-soft) !important; background-image: none !important;
    border: 0 !important; box-shadow: none !important; border-radius: 999px !important; font-weight: 700 !important;
}
body.hp-ui.hp-app .nav-current .icon { color: var(--hx-royal-ink) !important; }
body.hp-ui.hp-app .mobile-menu-button { background: var(--hx-surface-2) !important; border: 1px solid var(--hx-line) !important; color: var(--hx-ink) !important; box-shadow: none !important; }
body.hp-ui.hp-app .mobile-nav {
    margin: 8px max(20px, calc((100% - 1200px) / 2)) 0 !important; background: var(--hx-surface) !important;
    border: 1px solid var(--hx-line) !important; border-radius: 22px !important; box-shadow: var(--hx-shadow-lg) !important;
}

body.hp-ui.hp-app .page-shell { width: min(1200px, 100%) !important; max-width: none !important; padding-inline: 20px !important; }

/* Banner: the dark stage with the small 3D mark */
body.hp-ui.hp-app .hero {
    position: relative !important; overflow: hidden !important; isolation: isolate;
    border-radius: 30px !important; border: 0 !important;
    background:
        radial-gradient(700px 400px at 85% 30%, rgba(38, 118, 88, .38), transparent 60%),
        linear-gradient(180deg, var(--hx-stage-2), var(--hx-stage)) !important;
    color: var(--hx-on-stage) !important; box-shadow: none !important;
}
body.hp-ui.hp-app .hero::before, body.hp-ui.hp-app .hero::after { display: none !important; }
body.hp-ui.hp-app .hero > :not(.hp-stage) { position: relative; z-index: 1; }
body.hp-ui.hp-app .hp-mini-stage { position: absolute; inset-block: 0; inset-inline-end: 0; inset-inline-start: auto; width: 40%; z-index: 0; }
body.hp-ui.hp-app .hp-mini-stage .hp-stage-canvas {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%);
    mask-image: linear-gradient(90deg, transparent, #000 30%);
}
body.hp-ui.hp-app .hp-mini-stage .hp-stage-fallback { position: absolute; inset-inline-end: 18%; top: 50%; width: 120px; transform: translateY(-50%); }
body.hp-ui.hp-app .hero .eyebrow { color: var(--hx-cream) !important; letter-spacing: .02em !important; text-transform: none !important; font-weight: 700 !important; font-size: .86rem !important; }
body.hp-ui.hp-app .hero h1 {
    font-family: var(--hx-f-display) !important; font-weight: 400 !important; letter-spacing: -.01em !important;
    font-size: clamp(2.6rem, 5.4vw, 4.4rem) !important; line-height: 1 !important; color: var(--hx-on-stage) !important;
    max-width: 16ch;
}
body.hp-ui.hp-app .hero .hero-copy,
body.hp-ui.hp-app .hero p { color: var(--hx-on-stage-2) !important; }
body.hp-ui.hp-app .hero .primary-button,
body.hp-ui.hp-app .hero .button-primary,
body.hp-ui.hp-app .hero .primary-action {
    background: #f6efe2 !important; background-image: none !important; color: #0f2a20 !important;
    border: 0 !important; border-radius: 999px !important; box-shadow: none !important; font-weight: 700 !important;
}
body.hp-ui.hp-app .hero .primary-button:hover,
body.hp-ui.hp-app .hero .button-primary:hover,
body.hp-ui.hp-app .hero .primary-action:hover { background: #fff !important; }
body.hp-ui.hp-app .hero .primary-button .icon,
body.hp-ui.hp-app .hero .button-primary .icon { color: #0f2a20 !important; }
body.hp-ui.hp-app .hero .control {
    background: rgba(255, 255, 255, .08) !important; color: var(--hx-on-stage) !important;
    border: 1px solid rgba(255, 255, 255, .2) !important; border-radius: 999px !important; box-shadow: none !important;
}
body.hp-ui.hp-app .hero .control::placeholder { color: var(--hx-on-stage-2) !important; }
body.hp-ui.hp-app .hero .search-icon { color: var(--hx-on-stage-2) !important; }
body.hp-ui.hp-app .hero .filter-link,
body.hp-ui.hp-app .hero .button-soft {
    background: rgba(255, 255, 255, .06) !important; color: var(--hx-on-stage-2) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important; border-radius: 999px !important; box-shadow: none !important;
}
body.hp-ui.hp-app .hero .filter-link.active,
body.hp-ui.hp-app .hero .filter-link[aria-current] { background: #f6efe2 !important; color: #0f2a20 !important; border-color: transparent !important; }
body.hp-ui.hp-app .hero .count-pill,
body.hp-ui.hp-app .hero .credit-pill { background: rgba(255, 255, 255, .06) !important; color: var(--hx-on-stage) !important; border: 1px solid rgba(255, 255, 255, .18) !important; }

/* Cards, metrics and shared surfaces */
body.hp-ui.hp-app :is(.card, .metric-card, .document-card, .section-card, .text-card, .result-card, .logout-card, .recent-card) {
    background: var(--hx-surface) !important; border: 1px solid var(--hx-line) !important;
    border-radius: 24px !important; box-shadow: none !important; backdrop-filter: none !important;
}
body.hp-ui.hp-app :is(.card, .metric-card, .document-card, .section-card, .text-card, .result-card, .logout-card)::before,
body.hp-ui.hp-app :is(.card, .metric-card, .document-card, .section-card, .text-card, .result-card, .logout-card)::after { display: none !important; }
body.hp-ui.hp-app .document-card { transition: transform .2s var(--hx-ease), box-shadow .2s ease !important; }
body.hp-ui.hp-app .document-card:hover { transform: translateY(-3px); box-shadow: var(--hx-shadow) !important; }
body.hp-ui.hp-app .eyebrow { color: var(--hx-royal-ink) !important; letter-spacing: .02em !important; text-transform: none !important; font-weight: 700 !important; }
body.hp-ui.hp-app .eyebrow-danger { color: var(--hx-danger) !important; }
body.hp-ui.hp-app :is(.card, .section-card) h2 { color: var(--hx-ink) !important; font-weight: 700 !important; letter-spacing: -.01em !important; }
body.hp-ui.hp-app .metric-icon,
body.hp-ui.hp-app .section-icon,
body.hp-ui.hp-app .empty-icon {
    background: var(--hx-royal-soft) !important; color: var(--hx-royal-ink) !important; border: 0 !important; box-shadow: none !important;
}
body.hp-ui.hp-app .metric-label { color: var(--hx-ink-2) !important; letter-spacing: .02em !important; }
body.hp-ui.hp-app .metric-value {
    font-family: var(--hx-f-display) !important; font-weight: 400 !important; font-size: 3.4rem !important; line-height: 1 !important;
    color: var(--hx-ink) !important; font-variant-numeric: tabular-nums; letter-spacing: 0 !important;
}
body.hp-ui.hp-app .metric-note { color: var(--hx-ink-3) !important; }
body.hp-ui.hp-app :is(.plan-badge, .credit-pill, .count-pill, .mode-pill, .summary-chip, .deleted-pill) {
    background: var(--hx-royal-soft) !important; color: var(--hx-royal-ink) !important; border: 0 !important; box-shadow: none !important;
}
body.hp-ui.hp-app .deleted-pill { background: var(--hx-danger-soft) !important; color: var(--hx-danger) !important; }
body.hp-ui.hp-app .free-note,
body.hp-ui.hp-app .notice-warning,
body.hp-ui.hp-app .trash-warning { background: var(--hx-quill-soft) !important; color: var(--hx-quill-ink) !important; border: 0 !important; border-radius: 16px !important; }
body.hp-ui.hp-app .free-note strong { color: var(--hx-quill-ink) !important; }
body.hp-ui.hp-app .notice-success { background: var(--hx-ok-soft) !important; color: var(--hx-ok) !important; border: 0 !important; border-radius: 16px !important; }
body.hp-ui.hp-app .notice-error { background: var(--hx-danger-soft) !important; color: var(--hx-danger) !important; border: 0 !important; border-radius: 16px !important; }
body.hp-ui.hp-app .empty-state,
body.hp-ui.hp-app .recent-empty-state {
    background: var(--hx-surface-2) !important; border: 1px dashed var(--hx-line-2) !important; border-radius: 20px !important; box-shadow: none !important;
}
body.hp-ui.hp-app .empty-state-title, body.hp-ui.hp-app .empty-state h2, body.hp-ui.hp-app .empty-state h3 { color: var(--hx-ink) !important; }
body.hp-ui.hp-app .progress, body.hp-ui.hp-app .quality-track { accent-color: var(--hx-royal); }
body.hp-ui.hp-app progress.progress-native::-webkit-progress-bar { background: var(--hx-line); border-radius: 9px; }
body.hp-ui.hp-app progress.progress-native::-webkit-progress-value { background: var(--hx-royal); border-radius: 9px; }
body.hp-ui.hp-app progress.progress-native::-moz-progress-bar { background: var(--hx-royal); border-radius: 9px; }

/* Buttons outside the banner */
body.hp-ui.hp-app :is(.primary-button, .button-primary, .primary-action, .empty-state-action) {
    background: var(--hx-royal) !important; background-image: none !important; color: #fff !important; border: 0 !important;
    border-radius: 999px !important; box-shadow: 0 12px 26px -12px rgba(15, 69, 54, .75) !important; font-weight: 700 !important;
}
body.hp-ui.hp-app :is(.primary-button, .button-primary, .primary-action, .empty-state-action) .icon { color: #fff !important; }
body.hp-ui.hp-app :is(.primary-button, .button-primary, .primary-action, .empty-state-action):hover { background: var(--hx-royal-hover) !important; }
body.hp-ui.hp-app :is(.button-soft, .secondary-link, .tool-button, .version-button, .icon-button, .back-link, .document-open) {
    background: var(--hx-surface) !important; background-image: none !important; color: var(--hx-ink) !important;
    border: 1px solid var(--hx-line-2) !important; border-radius: 999px !important; box-shadow: none !important;
}
body.hp-ui.hp-app :is(.button-soft, .secondary-link, .tool-button, .version-button, .icon-button, .back-link, .document-open):hover { border-color: var(--hx-royal) !important; color: var(--hx-royal-ink) !important; }
body.hp-ui.hp-app .secondary-link { background: var(--hx-royal-soft) !important; border-color: transparent !important; color: var(--hx-royal-ink) !important; }
body.hp-ui.hp-app .button-danger { background: var(--hx-danger-soft) !important; color: var(--hx-danger) !important; border: 1px solid rgba(184, 41, 61, .22) !important; box-shadow: none !important; border-radius: 999px !important; }
body.hp-ui.hp-app .button-success { background: var(--hx-ok-soft) !important; color: var(--hx-ok) !important; border: 0 !important; box-shadow: none !important; border-radius: 999px !important; }
body.hp-ui.hp-app .button-warning { background: var(--hx-warn) !important; color: #fff !important; border: 0 !important; box-shadow: none !important; border-radius: 999px !important; }
/* Version cards on the document page: the button fills the card instead of
   taking the pill shape above, and the legacy blue/white colours give way to tokens. */
body.hp-ui.hp-app .version-item { background: var(--hx-surface) !important; border: 1px solid var(--hx-line) !important; border-radius: 18px !important; }
body.hp-ui.hp-app .version-button { border: 0 !important; border-radius: 0 !important; background: transparent !important; text-align: start; }
body.hp-ui.hp-app .version-button.active { background: var(--hx-royal-soft) !important; color: var(--hx-royal-ink) !important; }
body.hp-ui.hp-app .version-button span { color: var(--hx-ink-3) !important; }
body.hp-ui.hp-app .version-button small { color: var(--hx-royal-ink) !important; }
body.hp-ui.hp-app .version-restore { background: var(--hx-surface-2) !important; color: var(--hx-ink-2) !important; border: 0 !important; border-top: 1px solid var(--hx-line) !important; }
body.hp-ui.hp-app .version-restore:hover { background: var(--hx-royal-soft) !important; color: var(--hx-royal-ink) !important; }
html[data-hp-theme="dark"] body.hp-ui.hp-app .version-button small { color: var(--hx-quill) !important; }

/* Forms (account, rename, search outside banner) */
body.hp-ui.hp-app .control {
    background: var(--hx-surface-2) !important; color: var(--hx-ink) !important;
    border: 1px solid var(--hx-line-2) !important; border-radius: 14px !important; box-shadow: none !important;
}
body.hp-ui.hp-app .control:focus { border-color: var(--hx-royal) !important; box-shadow: 0 0 0 4px var(--hx-royal-soft) !important; background: var(--hx-surface) !important; }
body.hp-ui.hp-app .password-toggle { background: var(--hx-royal-soft) !important; color: var(--hx-royal-ink) !important; border: 0 !important; border-radius: 10px !important; box-shadow: none !important; }

/* Document text uses the display face for the polished result */
body.hp-ui.hp-app .document-title { color: var(--hx-ink) !important; }
body.hp-ui.hp-app .document-excerpt { color: var(--hx-ink-2) !important; }
body.hp-ui.hp-app .result-card .document-text { font-family: var(--hx-f-display) !important; font-size: 1.35rem !important; line-height: 1.5 !important; color: var(--hx-ink) !important; }
body.hp-ui.hp-app .favorite-button[aria-pressed="true"] { color: #c69a2c !important; }

/* Document view banner has no stage: keep its controls readable */
body.hp-ui.document-show-page .hero h1 { max-width: none; font-size: clamp(2.2rem, 4.4vw, 3.4rem) !important; }

@media (max-width: 860px) {
    body.hp-ui.hp-app .hp-mini-stage { display: none; }
    body.hp-ui.hp-app .header-inner { margin-inline: 12px !important; padding-inline: 14px 6px !important; }
}

/* Keep banner content clear of the 3D mark on wide screens */
@media (min-width: 861px) {
    body.hp-ui:is(.user-dashboard-page, .account-page) .hero:has(.hp-mini-stage) { padding-inline-end: max(38%, 360px) !important; }
    body.hp-ui:is(.documents-index-page, .documents-trash-page) .hero .hero-row {
        padding-inline-end: max(36%, 340px) !important; flex-direction: column !important; align-items: flex-start !important; gap: 18px !important;
    }
    body.hp-ui:is(.documents-index-page, .documents-trash-page) .hp-mini-stage { inset-block: 0 auto; height: calc(100% - 96px); }
    body.hp-ui.user-dashboard-page .hero {
        display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 26px !important;
    }
}

/* ==========================================================================
   Maintenance
   ========================================================================== */
body.hp-ui.hp-maint .background { display: none !important; }
body.hp-ui.hp-maint {
    background:
        radial-gradient(900px 600px at 0% 0%, rgba(38, 118, 88, .10), transparent 60%),
        radial-gradient(700px 500px at 100% 100%, rgba(214, 194, 148, .14), transparent 60%),
        var(--hx-paper) !important;
    color: var(--hx-ink) !important;
}
body.hp-ui.hp-maint .topbar { background: transparent !important; border: 0 !important; box-shadow: none !important; }
body.hp-ui.hp-maint .topbar .hp-logo { height: 32px !important; width: auto !important; }
body.hp-ui.hp-maint .maintenance-card {
    position: relative; overflow: hidden !important;
    background: var(--hx-surface) !important; border: 1px solid var(--hx-line) !important;
    border-radius: 30px !important; box-shadow: var(--hx-shadow-lg) !important; color: var(--hx-ink) !important;
}
body.hp-ui.hp-maint .maintenance-card::before, body.hp-ui.hp-maint .maintenance-card::after,
body.hp-ui.hp-maint .maintenance-card__accent { display: none !important; }
body.hp-ui.hp-maint .status-row { position: relative; z-index: 2; }
@media (max-width: 640px) { body.hp-ui.hp-maint .hp-maint-stage { margin-inline: -16px; height: 190px; } }
body.hp-ui.hp-maint .hp-maint-stage {
    position: relative; height: 230px; margin-block: 18px 26px; margin-inline: calc(-1 * clamp(28px, 5vw, 58px));
    overflow: hidden; isolation: isolate;
    background:
        radial-gradient(520px 300px at 50% 40%, rgba(38, 118, 88, .45), transparent 65%),
        linear-gradient(180deg, var(--hx-stage-2), var(--hx-stage));
}
body.hp-ui.hp-maint .hp-maint-stage .hp-auth-stage { position: absolute !important; inset: 0 !important; height: auto; margin: 0; }
body.hp-ui.hp-maint .status-pill { background: var(--hx-warn-soft) !important; color: var(--hx-warn) !important; border: 0 !important; }
body.hp-ui.hp-maint .status-code { background: var(--hx-surface-2) !important; color: var(--hx-ink-2) !important; border: 1px solid var(--hx-line) !important; font-family: var(--hx-f-mono) !important; }
body.hp-ui.hp-maint .eyebrow { color: var(--hx-royal-ink) !important; letter-spacing: .02em !important; text-transform: none !important; }
body.hp-ui.hp-maint h1 {
    font-family: var(--hx-f-display) !important; font-weight: 400 !important; letter-spacing: -.01em !important;
    font-size: clamp(2.6rem, 5vw, 4rem) !important; line-height: 1 !important; color: var(--hx-ink) !important;
    background: none !important; -webkit-text-fill-color: currentColor !important;
}
body.hp-ui.hp-maint .lead, body.hp-ui.hp-maint .assurance { color: var(--hx-ink-2) !important; }
body.hp-ui.hp-maint .progress { background: var(--hx-line) !important; }
body.hp-ui.hp-maint .progress span { background: var(--hx-royal) !important; }
body.hp-ui.hp-maint .feature-card { background: var(--hx-surface-2) !important; border: 1px solid var(--hx-line) !important; border-radius: 18px !important; box-shadow: none !important; }
body.hp-ui.hp-maint .feature-card h2 { color: var(--hx-ink) !important; }
body.hp-ui.hp-maint .feature-card p { color: var(--hx-ink-2) !important; }
body.hp-ui.hp-maint .feature-card__icon { background: var(--hx-royal-soft) !important; color: var(--hx-royal-ink) !important; border: 0 !important; }
body.hp-ui.hp-maint .button--primary { background: var(--hx-royal) !important; background-image: none !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; box-shadow: 0 12px 26px -12px rgba(15, 69, 54, .75) !important; }
body.hp-ui.hp-maint .button--secondary { background: var(--hx-surface) !important; color: var(--hx-ink) !important; border: 1px solid var(--hx-line-2) !important; border-radius: 999px !important; box-shadow: none !important; }


/* ==========================================================================
   Language and theme switches
   ========================================================================== */
body.hp-ui .hp-switches { display: inline-flex; align-items: center; gap: 4px; flex: none; }
body.hp-ui .hp-switch {
    display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px;
    border-radius: 999px; border: 1px solid var(--hx-line); background: var(--hx-surface-2); color: var(--hx-ink);
    font: 700 .82rem/1 "HP Arabic", var(--hx-f-body); cursor: pointer; transition: border-color .2s, background-color .2s;
}
body.hp-ui .hp-switch:hover { border-color: var(--hx-line-2); background: var(--hx-surface); }
body.hp-ui .hp-switch-theme { padding: 0; width: 40px; }
body.hp-ui .hp-switch svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.hp-ui .hp-switch-to-en, body.hp-ui .hp-icon-sun { display: none; }
html[lang="ar"] body.hp-ui .hp-switch-to-ar { display: none; }
html[lang="ar"] body.hp-ui .hp-switch-to-en { display: inline; font-family: var(--hx-f-body); }
html[data-hp-theme="dark"] body.hp-ui .hp-icon-moon { display: none; }
html[data-hp-theme="dark"] body.hp-ui .hp-icon-sun { display: block; }
/* Placement per page */
body.hp-ui .auth-toolbar { display: flex !important; justify-content: space-between !important; align-items: center; gap: 12px; }
body.hp-ui .hp-card-stage .hp-switches { position: absolute; inset-inline-end: 20px; top: 18px; z-index: 2; }
body.hp-ui .hp-card-stage .hp-switch, body.hp-ui .feature-panel .hp-switch { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: var(--hx-on-stage); }
body.hp-ui.hp-maint .topbar { display: flex !important; justify-content: space-between; align-items: center; gap: 12px; }
body.hp-ui.hp-app .header-inner .hp-switches { margin-inline-start: 8px; }
@media (max-width: 560px) {
    body.hp-ui .hp-switch { min-width: 36px; height: 36px; padding: 0 10px; }
    body.hp-ui .hp-switch-theme { width: 36px; padding: 0; }
}

/* ==========================================================================
   Arabic and right-to-left
   ========================================================================== */
html[lang="ar"] {
    --hx-f-display: "HP Arabic Display", "HP Display", Georgia, serif;
    --hx-f-body: "HP Arabic", "HP Sans", "Segoe UI", Tahoma, sans-serif;
    --hx-f-mono: "HP Arabic", "HP Mono", ui-monospace, monospace;
}
html[lang="ar"] body.hp-ui { line-height: 1.7; }
html[lang="ar"] body.hp-ui :is(h1, h2, h3, h4, p, span, a, button, label, strong, li, small) { letter-spacing: 0 !important; }
html[lang="ar"] body.hp-ui :is(.text-xs, .text-\[10px\], .text-\[11px\], .uppercase) { text-transform: none !important; }
html[lang="ar"] body.hp-ui .hp-display,
html[lang="ar"] body.hp-ui :is(.hp-hero-title, .feature-title, .form-title, .reset-title, .metric-value, .hp-price, .hp-calc-value, .hp-step-n) {
    font-weight: 700 !important; line-height: 1.25 !important;
}
html[lang="ar"] body.hp-ui .hp-hero-title { font-size: clamp(2.8rem, 6.4vw, 5.6rem) !important; line-height: 1.15 !important; }
html[lang="ar"] body.hp-ui :is(.hp-hero-title span, .feature-title span, .hp-swap em) { font-style: normal !important; }
html[lang="ar"] body.hp-ui.hp-app .hero h1, html[lang="ar"] body.hp-ui.hp-card-page h1, html[lang="ar"] body.hp-ui.hp-maint h1 { font-weight: 700 !important; line-height: 1.25 !important; }
html[lang="ar"] body.hp-ui .hp-use-after, html[lang="ar"] body.hp-ui .hp-cmp-col p, html[lang="ar"] body.hp-ui .hp-swap,
html[lang="ar"] body.hp-ui .hp-grammar, html[lang="ar"] body.hp-ui .hp-use-before { direction: ltr; text-align: left; unicode-bidi: isolate; }
html[lang="ar"] body.hp-ui .hp-swap { justify-content: flex-end; }
[dir="rtl"] body.hp-ui :is(.lucide-arrow-right, .lucide-arrow-up-right, [data-lucide="arrow-right"], .lucide-chevron-right),
[dir="rtl"] body.hp-ui svg:has(> use[href="#i-arrow-right"]),
[dir="rtl"] body.hp-ui svg:has(> use[href="#i-arrow"]),
[dir="rtl"] body.hp-ui svg:has(> use[href="#i-arrow-left"]) { transform: scaleX(-1); }
@media (max-width: 760px) { [dir="rtl"] body.hp-ui .hp-cmp-arrow { transform: rotate(-90deg); } }
[dir="rtl"] body.hp-ui .account-menu { right: auto !important; left: 0 !important; }
[dir="rtl"] body.hp-ui .text-left { text-align: right !important; }
[dir="rtl"] body.hp-ui .site-announcement::before { inset: 0 0 0 auto; }
[dir="rtl"] body.hp-ui.hp-app .hp-mini-stage .hp-stage-canvas { -webkit-mask-image: linear-gradient(270deg, transparent, #000 30%); mask-image: linear-gradient(270deg, transparent, #000 30%); }
[dir="rtl"] body.hp-ui #inputText, [dir="rtl"] body.hp-ui #outputText { direction: ltr; text-align: left; }
[dir="rtl"] body.hp-ui .hp-hero::after { -webkit-mask-image: radial-gradient(ellipse at 30% 50%, #000 10%, transparent 65%); mask-image: radial-gradient(ellipse at 30% 50%, #000 10%, transparent 65%); }
[dir="rtl"] body.hp-ui input[type="email"], [dir="rtl"] body.hp-ui input[type="password"] { direction: ltr; text-align: right; }
[dir="rtl"] body.hp-ui .hp-plan.is-recommended { --hp-best-fit: "الأنسب لك"; }
html[lang="ar"] body.hp-ui .hp-plan.is-recommended { --hp-best-fit: "الأنسب لك"; }

/* ==========================================================================
   Dark theme
   ========================================================================== */
html[data-hp-theme="dark"] {
    /* "Library": near-black forest, warm ivory ink, lines with a brass cast. */
    --hx-paper: #06100b;
    --hx-paper-2: #0a1711;
    --hx-surface: #0c1c15;
    --hx-surface-2: #11251c;
    --hx-ink: #f2ebdd;
    --hx-ink-2: #bec5b9;
    --hx-ink-3: #9eab9f;
    --hx-line: #22342a;
    --hx-line-2: #34483a;
    --hx-royal: #236b52;
    --hx-royal-hover: #2b7a5e;
    --hx-royal-soft: #143326;
    --hx-royal-ink: #d9b277;
    --hx-quill: #d9b277;
    --hx-quill-soft: #2a2213;
    --hx-quill-ink: #e6c995;
    --hx-ok: #6cc79a;
    --hx-ok-soft: #0f2a1e;
    --hx-warn: #e8b45e;
    --hx-warn-soft: #2b2010;
    --hx-danger: #f08a7a;
    --hx-danger-soft: #331512;
    --hx-glass: rgba(14, 30, 23, .86);
    --hx-btn: #236b52;
    --hx-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 18px 40px -18px rgba(0, 0, 0, .65);
    --hx-shadow-lg: 0 50px 90px -40px rgba(0, 0, 0, .85), 0 10px 30px -18px rgba(0, 0, 0, .55);
    color-scheme: dark;
    background: var(--hx-paper) !important;
}
html[data-hp-theme="dark"] body.hp-ui { color: var(--hx-ink) !important; }
html[data-hp-theme="dark"] body.hp-ui :is(h1, h2, h3, h4) { color: inherit; }
html[data-hp-theme="dark"] body.hp-ui :is(.text-slate-900, .text-slate-800, .text-slate-700, .text-textMain, .text-gray-900, .text-gray-800) { color: var(--hx-ink) !important; }
html[data-hp-theme="dark"] body.hp-ui :is(.text-slate-600, .text-slate-500, .text-slate-400, .text-textMuted, .text-gray-600, .text-gray-500) { color: var(--hx-ink-3) !important; }
html[data-hp-theme="dark"] body.hp-ui :is(.bg-white, .bg-slate-50, .bg-gray-50, .bg-white\/70, .bg-white\/75, .bg-white\/80) { background-color: var(--hx-surface) !important; }
html[data-hp-theme="dark"] body.hp-ui :is(.border-slate-100, .border-slate-200, .border-gray-200, .border-white\/70, .border-white\/90) { border-color: var(--hx-line) !important; }
html[data-hp-theme="dark"] body.hp-ui .account-menu > div:first-child { background: var(--hx-royal-soft) !important; }
html[data-hp-theme="dark"] body.hp-ui .account-menu > div:first-child .bg-white\/75 { background: var(--hx-surface) !important; color: var(--hx-royal-ink) !important; }
html[data-hp-theme="dark"] body.hp-ui .account-menu-link { color: var(--hx-ink) !important; }
html[data-hp-theme="dark"] body.hp-ui .mobile-nav-link { color: var(--hx-ink) !important; background: var(--hx-surface-2) !important; }
html[data-hp-theme="dark"] body.hp-ui .hp-header .hp-logo,
html[data-hp-theme="dark"] body.hp-ui .hp-footer .hp-logo,
html[data-hp-theme="dark"] body.hp-ui .header-inner img,
html[data-hp-theme="dark"] body.hp-ui .mobile-brand img,
html[data-hp-theme="dark"] body.hp-ui.hp-maint .topbar img,
html[data-hp-theme="dark"] body.hp-ui :is(.card-body, .reset-body) .hp-logo { content: var(--hx-logo-light); }
html[data-hp-theme="dark"] body.hp-ui .site-announcement { background: var(--hx-surface) !important; color: var(--hx-ink) !important; }
html[data-hp-theme="dark"] body.hp-ui .site-announcement-copy p { color: var(--hx-ink-2) !important; }
html[data-hp-theme="dark"] body.hp-ui .hp-btn-ghost { background: var(--hx-surface-2); }
html[data-hp-theme="dark"] body.hp-ui .hp-sheet .loader-container { background: rgba(14, 30, 23, .94) !important; }
/* Home modals (paywall, payment) and toasts */
html[data-hp-theme="dark"] body.hp-ui [id$="Modal"] > div,
html[data-hp-theme="dark"] body.hp-ui [id$="Modal"] .glass-card { background: var(--hx-surface) !important; color: var(--hx-ink) !important; border-color: var(--hx-line) !important; }
html[data-hp-theme="dark"] body.hp-ui [id$="Modal"] :is(.text-white, h2, h3, strong) { color: var(--hx-ink) !important; }
html[data-hp-theme="dark"] body.hp-ui [id$="Modal"] :is(input, textarea, select) { background: var(--hx-surface-2) !important; color: var(--hx-ink) !important; border-color: var(--hx-line-2) !important; }
html[data-hp-theme="dark"] body.hp-ui #toast { background: var(--hx-surface-2) !important; color: var(--hx-ink) !important; border: 1px solid var(--hx-line-2) !important; }
html[data-hp-theme="dark"] body.hp-ui #toast * { color: var(--hx-ink) !important; }
/* Auth */
html[data-hp-theme="dark"] body.hp-ui :is(.divider span) { background: var(--hx-surface) !important; }
html[data-hp-theme="dark"] body.hp-ui .checkbox-label, html[data-hp-theme="dark"] body.hp-ui .form-options { color: var(--hx-ink-2) !important; }
html[data-hp-theme="dark"] body.hp-ui :is(.password-strength, .password-meta, .password-meta-row, .password-match, .caps-lock) { color: var(--hx-ink-2) !important; background-color: transparent !important; }
html[data-hp-theme="dark"] body.hp-ui .terms-card * { color: var(--hx-ink-2); }
html[data-hp-theme="dark"] body.hp-ui .terms-card a { color: var(--hx-royal-ink) !important; }
/* App pages */
html[data-hp-theme="dark"] body.hp-ui.hp-app :is(.activity-item, .detail-row, .notice-row, .usage-row, .tool-panel, .version-item, .rename-panel, .compare-grid > *, .text-card-head, .counter-row, .quality-head, .help, .stack > div, .feedback-row, .result-label, .text-stats, .document-summary, .tool-grid > *, .versions-grid > *, .section-head) {
    background-color: transparent;
    border-color: var(--hx-line) !important;
    color: var(--hx-ink-2);
}
html[data-hp-theme="dark"] body.hp-ui.hp-app :is(.detail-row, .activity-item, .version-item, .tool-panel, .rename-panel) { background-color: var(--hx-surface-2) !important; }
html[data-hp-theme="dark"] body.hp-ui.hp-app :is(.detail-value, .activity-name, .activity-count, .usage-value, .plan-name, .section-heading, .label-row, .field label, h2, h3) { color: var(--hx-ink) !important; }
html[data-hp-theme="dark"] body.hp-ui.hp-app :is(.detail-label, .help, .plan-copy, .plan-note, .section-copy, .hero-copy, .document-date, .document-stats, .document-meta, .metric-note) { color: var(--hx-ink-3) !important; }
html[data-hp-theme="dark"] body.hp-ui.hp-app :is(.text-card, .result-card) :is(textarea, .document-text, [contenteditable]) { background: transparent !important; color: var(--hx-ink) !important; }
html[data-hp-theme="dark"] body.hp-ui.hp-app .quality-track { background: var(--hx-line) !important; }
html[data-hp-theme="dark"] body.hp-ui.hp-app :is(.loader, .loader-box) { background: rgba(7, 18, 13, .86) !important; color: var(--hx-ink) !important; }
html[data-hp-theme="dark"] body.hp-ui.hp-app .password-status, html[data-hp-theme="dark"] body.hp-ui.hp-app .strength { color: var(--hx-ink-2) !important; }
html[data-hp-theme="dark"] body.hp-ui.hp-app .pagination-wrap * { color: var(--hx-ink-2); border-color: var(--hx-line) !important; background-color: transparent; }
html[data-hp-theme="dark"] body.hp-ui :is(.recovery-card, .verification-card, .reset-card) :is(.help-panel, .field-hint, .subtitle, .reset-copy) { color: var(--hx-ink-2) !important; }
html[data-hp-theme="dark"] body.hp-ui.hp-maint .status-code { background: var(--hx-surface-2) !important; }
html[data-hp-theme="dark"] body.hp-ui.hp-app :is(.text-card-head, .tool-panel, .rename-panel, .activity-item, .detail-row, .version-item, .notice-row, .document-card, .metric-card, .stat-card, .empty-state, .filter-bar, .search-box) { background-image: none !important; }
html[data-hp-theme="dark"] body.hp-ui.hp-app .text-card-head { background-color: var(--hx-surface-2) !important; }
html[data-hp-theme="dark"] body.hp-ui progress::-webkit-progress-bar { background: var(--hx-line) !important; }
html[data-hp-theme="dark"] body.hp-ui progress { background-color: var(--hx-line); }
html[data-hp-theme="dark"] body.hp-ui [id$="Modal"] :is([class*="bg-appBg"], [class*="bg-white"]) { background: var(--hx-surface-2) !important; border-color: var(--hx-line) !important; }
html[data-hp-theme="dark"] body.hp-ui.hp-app .status:is([class*="warning"], [class*="pending"]) { background: var(--hx-warn-soft) !important; color: var(--hx-warn) !important; border-color: rgba(242, 187, 99, .3) !important; }
html[data-hp-theme="dark"] body.hp-ui.hp-app .status.status-danger { background: var(--hx-danger-soft) !important; color: var(--hx-danger) !important; border-color: rgba(255, 131, 148, .3) !important; }
html[data-hp-theme="dark"] body.hp-ui.hp-app .status:is(.status-good, [class*="success"]) { background: var(--hx-ok-soft) !important; color: var(--hx-ok) !important; border-color: rgba(83, 211, 162, .3) !important; }
html[data-hp-theme="dark"] body.hp-ui .password-meta { background: var(--hx-surface-2) !important; border-color: var(--hx-line) !important; box-shadow: none !important; }
html[data-hp-theme="dark"] body.hp-ui .password-strength { background: var(--hx-line) !important; }
html[data-hp-theme="dark"] body.hp-ui .password-strength::-webkit-progress-bar { background: var(--hx-line) !important; }
html[data-hp-theme="dark"] body.hp-ui .strength span { background: var(--hx-line-2); }
html[data-hp-theme="dark"] body.hp-ui .strength[data-level="1"] span:nth-child(-n+1) { background: #f04438; }
html[data-hp-theme="dark"] body.hp-ui .strength[data-level="2"] span:nth-child(-n+2) { background: #f79009; }
html[data-hp-theme="dark"] body.hp-ui .strength[data-level="3"] span:nth-child(-n+3) { background: #12b76a; }
html[data-hp-theme="dark"] body.hp-ui .strength[data-level="4"] span:nth-child(-n+4) { background: var(--hx-royal); }
html[data-hp-theme="dark"] body.hp-ui :is(.plan-note, .notice-warning) { background: var(--hx-quill-soft) !important; border-color: rgba(227, 207, 159, .28) !important; color: var(--hx-quill-ink) !important; }
html[data-hp-theme="dark"] body.hp-ui :is(.plan-note, .notice-warning) :is(strong, p, span) { color: var(--hx-quill-ink) !important; }
html[data-hp-theme="dark"] body.hp-ui :is(.help-panel, .verification-help, .recovery-help) { background: var(--hx-surface-2) !important; border-color: var(--hx-line) !important; color: var(--hx-ink-2) !important; }
html[data-hp-theme="dark"] body.hp-ui :is(.help-panel, .verification-help, .recovery-help) :is(strong, h2, h3, b) { color: var(--hx-ink) !important; }

/* Neutralise the older workspace frame so the sheet is the only surface */
body.hp-ui #workspace.hp-workspace {
    width: min(1200px, 100%) !important; max-width: none !important; margin-inline: auto !important;
    padding: 0 20px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
}
body.hp-ui #workspace.hp-workspace::before, body.hp-ui #workspace.hp-workspace::after { display: none !important; }
body.hp-ui #workspace .workspace-panel,
body.hp-ui #workspace .controls-panel,
body.hp-ui #workspace .result-panel {
    background: var(--hx-surface-2) !important; background-image: none !important;
    border: 1px solid var(--hx-line) !important; border-radius: 22px !important; box-shadow: none !important;
}
body.hp-ui #workspace .workspace-panel:focus-within { border-color: var(--hx-royal) !important; box-shadow: 0 0 0 4px var(--hx-royal-soft) !important; }
body.hp-ui #workspace :is(.border-t, .border-b) { border-color: var(--hx-line) !important; }
body.hp-ui #how-it-works.hp-section, body.hp-ui #pricing.hp-section, body.hp-ui #features.hp-section, body.hp-ui #faq.hp-section {
    background: transparent !important; border: 0 !important;
}
@media (max-width: 560px) { body.hp-ui #workspace.hp-workspace { padding: 0 12px !important; } }
body.hp-ui #workspace .workspace-grid { align-items: stretch !important; }
body.hp-ui #workspace .workspace-grid > .workspace-panel:not(.controls-panel) { display: flex !important; flex-direction: column !important; }
body.hp-ui #workspace .workspace-grid > .workspace-panel:not(.controls-panel) .text-editor-input { flex: 1 1 auto !important; }

/* ===================================================================
   Extras: onboarding checklist, WhatsApp help, request-limit bar,
   folded announcements
   =================================================================== */
body.hp-ui .hp-onboard {
    position: relative; margin-top: 22px; padding: 22px 24px; border-radius: 26px;
    background: var(--hx-surface); border: 1px solid var(--hx-line); box-shadow: var(--hx-shadow);
    overflow: hidden;
}
body.hp-ui .hp-onboard::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 3px;
    background: linear-gradient(90deg, var(--hx-royal), var(--hx-quill) 55%, var(--hx-quill));
}
body.hp-ui .hp-onboard-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
body.hp-ui .hp-onboard-head .eyebrow { margin: 0 0 4px; }
body.hp-ui .hp-onboard-head h2 { margin: 0; font-family: var(--hx-f-display); font-weight: 400; font-size: 1.7rem; line-height: 1.15; color: var(--hx-ink); letter-spacing: -.01em; }
body.hp-ui .hp-onboard-head h2 span:first-child { color: var(--hx-royal-ink); }
body.hp-ui .hp-onboard-bar { width: min(260px, 100%); height: 8px; border: 0; border-radius: 999px; overflow: hidden; background: var(--hx-line); appearance: none; -webkit-appearance: none; }
body.hp-ui .hp-onboard-bar::-webkit-progress-bar { background: var(--hx-line); border-radius: 999px; }
body.hp-ui .hp-onboard-bar::-webkit-progress-value { background: linear-gradient(90deg, var(--hx-royal), var(--hx-quill)); border-radius: 999px; }
body.hp-ui .hp-onboard-bar::-moz-progress-bar { background: linear-gradient(90deg, var(--hx-royal), var(--hx-quill)); border-radius: 999px; }
body.hp-ui .hp-onboard-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body.hp-ui .hp-onboard-step {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 10px 12px;
    padding: 16px; border-radius: 18px; background: var(--hx-paper-2); border: 1px solid var(--hx-line);
    transition: transform .25s ease, border-color .25s ease;
}
body.hp-ui .hp-onboard-step:not(.is-done):hover { transform: translateY(-2px); border-color: var(--hx-line-2); }
body.hp-ui .hp-onboard-icon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--hx-royal-soft); color: var(--hx-royal-ink); }
body.hp-ui .hp-onboard-icon .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.hp-ui .hp-onboard-copy strong { display: block; color: var(--hx-ink); font-size: .95rem; }
body.hp-ui .hp-onboard-copy p { margin: 3px 0 0; color: var(--hx-ink-3); font-size: .82rem; line-height: 1.5; }
body.hp-ui .hp-onboard-cta, body.hp-ui .hp-onboard-done { grid-column: 2; justify-self: start; font-size: .8rem; font-weight: 700; border-radius: 999px; padding: 7px 14px; text-decoration: none; }
body.hp-ui .hp-onboard-cta { background: var(--hx-ink); color: var(--hx-paper); }
body.hp-ui .hp-onboard-cta:hover { background: var(--hx-royal); color: #fff; }
body.hp-ui .hp-onboard-cta:focus-visible { outline: 2px solid var(--hx-royal); outline-offset: 2px; }
body.hp-ui .hp-onboard-done { background: var(--hx-ok-soft); color: var(--hx-ok); padding-inline: 12px; }
body.hp-ui .hp-onboard-step.is-done { opacity: .78; }
body.hp-ui .hp-onboard-step.is-done .hp-onboard-icon { background: var(--hx-ok-soft); color: var(--hx-ok); }
body.hp-ui .hp-onboard-step.is-done .hp-onboard-copy strong { text-decoration: line-through; text-decoration-color: var(--hx-ink-3); }
@media (max-width: 860px) { body.hp-ui .hp-onboard-list { grid-template-columns: minmax(0, 1fr); } body.hp-ui .hp-onboard { padding: 18px; } }

/* WhatsApp help */
body.hp-ui .hp-help {
    position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 120;
    display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px 0 13px;
    border-radius: 999px; background: #0e7343; color: #fff; text-decoration: none; font-weight: 700; font-size: .88rem;
    box-shadow: 0 18px 34px -16px rgba(14, 115, 67, .75), 0 2px 6px rgba(0, 0, 0, .15);
    transition: transform .25s ease, box-shadow .25s ease;
}
body.hp-ui .hp-help svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
body.hp-ui .hp-help:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -16px rgba(14, 115, 67, .85); }
body.hp-ui .hp-help:focus-visible { outline: 2px solid var(--hx-ink); outline-offset: 3px; }
@media (max-width: 640px) { body.hp-ui .hp-help { width: 48px; padding: 0; justify-content: center; inset-inline-end: 14px; bottom: 14px; } body.hp-ui .hp-help span { display: none; } }
@media print { body.hp-ui .hp-help { display: none; } }
/* Pages with form fields (hp-ui.js): on phones a smaller bubble above the
   bottom safe area, room under the last control, and it tucks away while a
   field is focused, the keyboard is open or a control scrolls under it. */
@media (max-width: 640px) {
    body.hp-ui .hp-help.is-compact { width: 40px; height: 40px; inset-inline-end: 12px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
    body.hp-ui .hp-help.is-compact svg { width: 19px; height: 19px; }
    body.hp-ui.hp-help-forms { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
    /* Guide-style pages end on a filled footer: keep the room inside it. */
    body.hp-ui.hp-help-forms:has(> .hpg-footer:last-of-type) { padding-bottom: 0; }
    body.hp-ui.hp-help-forms .hpg-footer:last-of-type { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
    body.hp-ui .hp-help.is-tucked { opacity: 0; transform: translateY(14px) scale(.85); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
}

/* Request-limit bar */
body.hp-ui .hp-limit { height: 3px; background: var(--hx-line); position: relative; overflow: hidden; }
body.hp-ui .hp-limit i { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--hp-fill, 0%); background: linear-gradient(90deg, var(--hx-royal), var(--hx-quill)); transition: width .3s ease, background .3s ease; }
body.hp-ui .hp-limit.is-near i { background: linear-gradient(90deg, #f2a43a, #f2bb63); }
body.hp-ui .hp-limit.is-over i { background: var(--hx-danger); }

/* Folded announcements */
body.hp-ui .site-announcements.is-folded [data-announcement-id]:not(:first-of-type) { display: none; }
body.hp-ui .hp-ann-toggle {
    justify-self: center; margin-top: 6px; border: 1px solid var(--hx-line); background: var(--hx-surface); color: var(--hx-ink-2);
    border-radius: 999px; padding: 6px 14px; font: 600 .78rem/1.2 var(--hx-f-body); cursor: pointer;
}
body.hp-ui .hp-ann-toggle:hover { color: var(--hx-ink); border-color: var(--hx-line-2); }
body.hp-ui .hp-ann-toggle:focus-visible { outline: 2px solid var(--hx-royal); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    body.hp-ui :is(.hp-onboard-step, .hp-help, .hp-limit i) { transition: none; }
}

/* ===================================================================
   Admin command center
   Shared pieces first, then the light skin (default) and the dark one.
   =================================================================== */
body.hp-ui.hp-admin { --hx-admin-ok: #0a6e4b; --hx-admin-warn: #8a5808; --hx-admin-danger: #b02a42; --hx-admin-violet: #6e4b1c; }
body.hp-ui.hp-admin .admin-sidebar-brand img.hp-logo { height: 32px !important; width: auto !important; filter: none !important; opacity: 1 !important; }
html[data-hp-theme="dark"] body.hp-ui.hp-admin .admin-sidebar-brand img.hp-logo { content: var(--hx-logo-light); }
body.hp-ui.hp-admin .admin-sidebar-brand p { letter-spacing: .14em; }
body.hp-ui.hp-admin .admin-section-heading h2 {
    font-family: var(--hx-f-display) !important; font-weight: 400 !important; letter-spacing: -.01em !important;
    font-size: clamp(1.7rem, 2.3vw, 2.2rem) !important; line-height: 1.08 !important;
}
body.hp-ui.hp-admin .admin-command-actions { align-items: center; }
body.hp-ui.hp-admin .admin-command-actions .hp-switches { margin-inline-end: 4px; }

/* Overview banner with the 3D mark */
body.hp-ui.hp-admin .admin-section-heading.hp-admin-hero {
    position: relative; overflow: hidden; isolation: isolate; align-items: center; min-height: 210px;
    padding: 34px 36px; border-radius: 28px; border: 0 !important;
    background:
        radial-gradient(640px 360px at 82% 40%, rgba(38, 118, 88, .4), transparent 62%),
        linear-gradient(180deg, var(--hx-stage-2), var(--hx-stage)) !important;
    box-shadow: var(--hx-shadow-lg);
}
body.hp-ui.hp-admin .hp-admin-hero > :not(.hp-stage) { position: relative; z-index: 1; }
body.hp-ui.hp-admin .hp-admin-hero > div:first-child { max-width: 58%; }
body.hp-ui.hp-admin .hp-admin-hero .hp-mini-stage { position: absolute; inset-block: 0; inset-inline-end: 0; inset-inline-start: auto; width: 42%; z-index: 0; }
body.hp-ui.hp-admin .hp-admin-hero .hp-mini-stage .hp-stage-canvas { -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%); }
[dir="rtl"] body.hp-ui.hp-admin .hp-admin-hero .hp-mini-stage .hp-stage-canvas { -webkit-mask-image: linear-gradient(270deg, transparent, #000 30%); mask-image: linear-gradient(270deg, transparent, #000 30%); }
body.hp-ui.hp-admin .hp-admin-hero .hp-mini-stage .hp-stage-fallback { position: absolute; inset-inline-end: 18%; top: 50%; width: 110px; transform: translateY(-50%); }
body.hp-ui.hp-admin .hp-admin-hero > div:first-child > span { color: var(--hx-cream, #e9dcbd) !important; letter-spacing: .02em !important; text-transform: none !important; font-size: .86rem !important; font-weight: 700 !important; }
body.hp-ui.hp-admin .hp-admin-hero h2 { color: var(--hx-on-stage) !important; font-size: clamp(2.2rem, 3.6vw, 3.4rem) !important; }
body.hp-ui.hp-admin .hp-admin-hero p { color: var(--hx-on-stage-2) !important; font-size: .95rem !important; }
body.hp-ui.hp-admin .hp-admin-hero > button {
    align-self: flex-end; margin-inline-end: 34%; background: rgba(255, 255, 255, .08) !important; color: var(--hx-on-stage) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important; border-radius: 999px !important; padding-inline: 14px !important;
}
body.hp-ui.hp-admin .hp-admin-hero > button :is(span, svg) { color: var(--hx-on-stage) !important; }
body.hp-ui.hp-admin .hp-admin-hero kbd { color: var(--hx-on-stage-2) !important; background: rgba(0, 0, 0, .2) !important; border-color: rgba(255, 255, 255, .16) !important; }
@media (max-width: 900px) {
    body.hp-ui.hp-admin .admin-section-heading.hp-admin-hero { flex-direction: column; align-items: flex-start; padding: 26px 22px; }
    body.hp-ui.hp-admin .hp-admin-hero > div:first-child { max-width: 100%; }
    body.hp-ui.hp-admin .hp-admin-hero > button { align-self: flex-start; margin-inline-end: 0; }
    body.hp-ui.hp-admin .hp-admin-hero .hp-mini-stage { opacity: .35; width: 70%; }
}

/* ---------- Light skin (default) ---------- */
html body.hp-ui.hp-admin { background: var(--hx-paper) !important; color: var(--hx-ink) !important; color-scheme: light; }
html[data-hp-theme="dark"] body.hp-ui.hp-admin { color-scheme: dark; }
html body.hp-ui.hp-admin :is(.background-canvas, .admin-blob, .neon-line) { display: none !important; }
html body.hp-ui.hp-admin::before { display: none !important; }

/* Text: neutral first, accents after */
html body.hp-ui.hp-admin :is(p, span, dt, td, label, small, li, a, button, time, em, i, kbd, div) { color: var(--hx-ink-2) !important; }
html body.hp-ui.hp-admin :is(h1, h2, h3, h4, h5, strong, b, dd, summary, legend, th) { color: var(--hx-ink) !important; }
html body.hp-ui.hp-admin .font-black:not([class*="text-hp-"]):not([class*="text-violet"]):not([class*="text-blue"]) { color: var(--hx-ink) !important; }
html body.hp-ui.hp-admin :is(.text-slate-500, .text-slate-600, .admin-nav-group > span, th, .admin-sidebar-brand p) { color: var(--hx-ink-3) !important; }
html body.hp-ui.hp-admin :is(.text-hp-cyan, .text-blue-300, .text-cyan-300, .admin-module-heading span, .admin-section-heading:not(.hp-admin-hero) > div:first-child > span, .admin-command-context > span),
html body.hp-ui.hp-admin :is(.text-hp-cyan, .text-blue-300, .text-cyan-300) * { color: var(--hx-royal-ink) !important; }
html body.hp-ui.hp-admin :is(.text-violet-300, .text-hp-violet),
html body.hp-ui.hp-admin :is(.text-violet-300, .text-hp-violet) * { color: var(--hx-admin-violet) !important; }
html body.hp-ui.hp-admin :is(.text-hp-green, .text-emerald-100, .text-emerald-300, .is-good, .healthy),
html body.hp-ui.hp-admin :is(.text-hp-green, .is-good, .healthy) * { color: var(--hx-admin-ok) !important; }
html body.hp-ui.hp-admin :is(.text-hp-rose, .text-rose-100, .text-rose-300, .text-pink-300, .danger-action, .danger-icon),
html body.hp-ui.hp-admin :is(.text-hp-rose, .danger-action, .danger-icon) * { color: var(--hx-admin-danger) !important; }
html body.hp-ui.hp-admin :is(.text-hp-gold, .text-amber-300, .is-warning, .warning),
html body.hp-ui.hp-admin :is(.text-hp-gold, .is-warning, .warning) * { color: var(--hx-admin-warn) !important; }

/* Surfaces */
html body.hp-ui.hp-admin .admin-sidebar { background: var(--hx-surface) !important; background-image: none !important; border-color: var(--hx-line) !important; box-shadow: none !important; }
html body.hp-ui.hp-admin .admin-command-bar { background: var(--hx-glass) !important; border-color: var(--hx-line) !important; box-shadow: 0 1px 0 var(--hx-line) !important; }
html body.hp-ui.hp-admin :is(.glass, .soft-card, .command-card, .metric-card, .user-card, .admin-health-card, .admin-attention-card, .admin-today-card, .document-open-card, .chart-shell, .empty-state, .document-preview-panel, .announcement-composer-panel, .user-management-panel, .command-dialog, .admin-quick-menu [data-quick-menu]) {
    background: var(--hx-surface) !important; background-image: none !important; border-color: var(--hx-line) !important;
    box-shadow: var(--hx-shadow) !important; backdrop-filter: none !important;
}
html body.hp-ui.hp-admin :is(.glass, .command-card, .admin-dashboard-zone, .admin-today-card, .admin-health-card) :is(.soft-card, .document-open-card, .empty-state, .user-card, .chart-shell) { background: var(--hx-paper-2) !important; box-shadow: none !important; }
html body.hp-ui.hp-admin .admin-dashboard-zone:not(.glass) { background: transparent !important; background-image: none !important; border-color: transparent !important; box-shadow: none !important; }
body.hp-ui.hp-admin .admin-section-heading:not(.hp-admin-hero) { background: transparent !important; border-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; }
body.hp-ui.hp-admin .admin-section-heading:not(.hp-admin-hero)::before, body.hp-ui.hp-admin .admin-section-heading:not(.hp-admin-hero)::after { display: none !important; }
html body.hp-ui.hp-admin .system-actions button { background: var(--hx-surface) !important; color: var(--hx-ink) !important; border: 1px solid var(--hx-line-2) !important; box-shadow: none !important; }
html body.hp-ui.hp-admin .system-actions button:hover { background: var(--hx-surface-2) !important; }
html body.hp-ui.hp-admin .plan-donut { box-shadow: none !important; }
html body.hp-ui.hp-admin :is(.command-form, .operation-edit-form, .credit-balance-form, .credit-reset-form, .announcement-composer-form) { background: var(--hx-paper-2) !important; background-image: none !important; border-color: var(--hx-line) !important; }
html body.hp-ui.hp-admin .plan-donut.is-empty { background: var(--hx-line) !important; }
html body.hp-ui.hp-admin :is(.glass, .soft-card, .command-card, .metric-card, .admin-health-card, .admin-today-card, .admin-attention-card, .admin-recent-content, .admin-intro)::after { opacity: 0 !important; }
html body.hp-ui.hp-admin .admin-attention-card.has-attention { background: var(--hx-warn-soft) !important; border-color: rgba(242, 187, 99, .45) !important; }
html body.hp-ui.hp-admin :is(.admin-health-strip, .admin-health-strip > div, .admin-today-card dl > div, .admin-today-card li, .admin-section-counts > *, .operations-list > *, .command-list a, .command-list button) { background: var(--hx-paper-2) !important; background-image: none !important; border-color: var(--hx-line) !important; }
html body.hp-ui.hp-admin [class*="border-white"], html body.hp-ui.hp-admin :is(table, tr, td, th, hr, dl, dl > div) { border-color: var(--hx-line) !important; }
html body.hp-ui.hp-admin [class*="bg-white/"], html body.hp-ui.hp-admin [class*="bg-hp-bg"] { background-color: var(--hx-paper-2) !important; background-image: none !important; }
html body.hp-ui.hp-admin .admin-command-bar[class*="bg-hp-bg"] { background-color: var(--hx-glass) !important; }

/* Navigation */
html body.hp-ui.hp-admin .admin-sidebar-nav a { color: var(--hx-ink-2) !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
html body.hp-ui.hp-admin .admin-sidebar-nav a :is(b, svg) { color: inherit !important; }
html body.hp-ui.hp-admin .admin-sidebar-nav a:hover { background: var(--hx-surface-2) !important; color: var(--hx-ink) !important; }
html body.hp-ui.hp-admin .admin-sidebar-nav a.is-active { background: var(--hx-royal-soft) !important; color: var(--hx-royal-ink) !important; }
html body.hp-ui.hp-admin .admin-sidebar-nav a.is-active::before { background: var(--hx-royal) !important; }
html body.hp-ui.hp-admin .admin-sidebar-account { background: var(--hx-paper-2) !important; border-color: var(--hx-line) !important; }
html body.hp-ui.hp-admin .admin-avatar { background: var(--hx-royal-soft) !important; color: var(--hx-royal-ink) !important; border-color: transparent !important; box-shadow: none !important; }

/* Controls */
html body.hp-ui.hp-admin :is(.admin-command-search, .admin-quick-menu > button, .admin-command-trigger, .admin-live-link, .admin-section-heading:not(.hp-admin-hero) > button, .admin-period-chip, .admin-sidebar-toggle, .admin-action-button, .admin-composer-launch, .user-manage-disclosure > summary, .admin-inline-disclosure > summary) {
    background: var(--hx-surface) !important; background-image: none !important; color: var(--hx-ink-2) !important; border: 1px solid var(--hx-line) !important; box-shadow: none !important;
}
html body.hp-ui.hp-admin :is(.admin-command-search, .admin-quick-menu > button, .admin-command-trigger, .admin-live-link, .admin-action-button):hover { background: var(--hx-surface-2) !important; color: var(--hx-ink) !important; }
html body.hp-ui.hp-admin kbd { background: var(--hx-paper-2) !important; color: var(--hx-ink-3) !important; border-color: var(--hx-line) !important; }
html body.hp-ui.hp-admin :is(.command-primary, button[type="submit"]:not(.danger-action):not(.danger-icon):not([aria-label="Sign out"]):not([class*="text-hp-rose"]):not([class*="text-hp-green"]):not([aria-label^="Close"]), .admin-composer-launch.is-primary) {
    background: var(--hx-btn) !important; background-image: none !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 10px 22px -14px rgba(15, 69, 54, .8) !important;
}
html body.hp-ui.hp-admin :is(.command-primary, button[type="submit"]:not(.danger-action):not(.danger-icon):not([aria-label="Sign out"]):not([class*="text-hp-rose"]):not([class*="text-hp-green"]):not([aria-label^="Close"])) * { color: #fff !important; }
html body.hp-ui.hp-admin :is(.danger-action, .danger-icon) { background: var(--hx-danger-soft) !important; background-image: none !important; border-color: rgba(194, 48, 74, .2) !important; }
html body.hp-ui.hp-admin :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .search-input, .plan-select, .credit-select) {
    background: var(--hx-surface) !important; background-image: none !important; color: var(--hx-ink) !important; border-color: var(--hx-line-2) !important; box-shadow: none !important;
}
html body.hp-ui.hp-admin :is(input, textarea)::placeholder { color: var(--hx-ink-3) !important; }
html body.hp-ui.hp-admin select option { background: var(--hx-surface) !important; color: var(--hx-ink) !important; }
html body.hp-ui.hp-admin :is(input, select, textarea):focus { border-color: var(--hx-royal) !important; box-shadow: 0 0 0 4px rgba(15, 69, 54, .12) !important; }
html body.hp-ui.hp-admin progress { background: var(--hx-line) !important; }
html body.hp-ui.hp-admin progress::-webkit-progress-bar { background: var(--hx-line) !important; }
html body.hp-ui.hp-admin progress::-webkit-progress-value { background: linear-gradient(90deg, var(--hx-royal), var(--hx-quill)) !important; }
html body.hp-ui.hp-admin .plan-donut::after { background: var(--hx-surface) !important; }
html body.hp-ui.hp-admin .command-palette { background: rgba(12, 30, 22, .35) !important; }
html body.hp-ui.hp-admin .toast-box { background: var(--hx-surface) !important; }
html body.hp-ui.hp-admin footer { border-color: var(--hx-line) !important; background: transparent !important; }

/* ---------- Dark skin ---------- */
html[data-hp-theme="dark"] body.hp-admin {
    background: radial-gradient(900px 500px at 10% -10%, rgba(38, 118, 88, .18), transparent 60%), var(--hx-paper) !important;
}
html[data-hp-theme="dark"] body.hp-admin .admin-sidebar { background: var(--hx-paper-2) !important; border-color: var(--hx-line) !important; }
html[data-hp-theme="dark"] body.hp-admin .admin-command-bar { background: rgba(7, 18, 13, .78) !important; border-color: var(--hx-line) !important; }
html[data-hp-theme="dark"] body.hp-admin .admin-sidebar-nav a.is-active { background: var(--hx-royal-soft) !important; color: var(--hx-royal-ink) !important; }
html[data-hp-theme="dark"] body.hp-admin :is(.text-hp-cyan, .admin-module-heading span, .admin-section-heading:not(.hp-admin-hero) > div:first-child > span) { color: var(--hx-royal-ink) !important; }
html[data-hp-theme="dark"] body.hp-admin .command-primary { background: var(--hx-royal) !important; background-image: none !important; color: #fff !important; }

/* Admin sign in */
body.hp-ui.hp-admin-login { background: var(--hx-paper) !important; color: var(--hx-ink) !important; }
body.hp-ui.hp-admin-login :is(.backdrop, .orb, .top-line) { display: none !important; }
body.hp-ui.hp-admin-login .portal-shell { width: min(460px, 100%) !important; }
body.hp-ui.hp-admin-login .portal-card {
    position: relative; overflow: hidden !important; padding: 0 !important;
    background: var(--hx-surface) !important; background-image: none !important; border: 1px solid var(--hx-line) !important;
    border-radius: 30px !important; box-shadow: var(--hx-shadow-lg) !important; backdrop-filter: none !important;
}
body.hp-ui.hp-admin-login .portal-card::before, body.hp-ui.hp-admin-login .portal-card::after { display: none !important; }
body.hp-ui.hp-admin-login .card-body { padding: 30px 36px 34px !important; }
body.hp-ui.hp-admin-login .brand-block { text-align: start !important; align-items: flex-start !important; margin-bottom: 22px !important; }
body.hp-ui.hp-admin-login .portal-title {
    font-family: var(--hx-f-display) !important; font-weight: 400 !important; letter-spacing: -.01em !important;
    font-size: clamp(2rem, 6vw, 2.5rem) !important; line-height: 1.05 !important; color: var(--hx-ink) !important;
    background: none !important; -webkit-text-fill-color: currentColor !important;
}
body.hp-ui.hp-admin-login .restricted-badge {
    background: var(--hx-danger-soft) !important; color: var(--hx-danger) !important; border-color: transparent !important;
    letter-spacing: .02em !important; text-transform: none !important; font-weight: 700 !important;
}
body.hp-ui.hp-admin-login .restricted-dot { background: var(--hx-danger) !important; box-shadow: none !important; }
body.hp-ui.hp-admin-login .field-label { letter-spacing: 0 !important; text-transform: none !important; font-size: .86rem !important; }
body.hp-ui.hp-admin-login .form-input::placeholder { color: var(--hx-ink-3) !important; }
body.hp-ui.hp-admin-login .submit-button { letter-spacing: .01em !important; text-transform: none !important; }
body.hp-ui.hp-admin-login .security-note { color: var(--hx-ink-3) !important; }
body.hp-ui.hp-admin-login .back-area { border-color: var(--hx-line) !important; }
body.hp-ui.hp-admin-login .back-link { background: var(--hx-surface) !important; color: var(--hx-ink-2) !important; border: 1px solid var(--hx-line-2) !important; }
body.hp-ui.hp-admin-login .caps-lock { color: var(--hx-warn) !important; }
@media (max-width: 560px) { body.hp-ui.hp-admin-login .card-body { padding: 24px 22px 28px !important; } }
[dir="rtl"] body.hp-ui.hp-admin-login .input-wrap { direction: ltr; }
[dir="rtl"] body.hp-ui.hp-admin-login .form-input { text-align: left; }

/* Admin in Arabic: sidebar on the right */
[dir="rtl"] body.hp-admin.admin-command-page .admin-sidebar { inset: 0 0 0 auto !important; border-right: 0 !important; border-left: 1px solid var(--hx-line) !important; }
@media (min-width: 1280px) {
    [dir="rtl"] body.hp-admin.admin-command-page :is(.admin-command-bar, .admin-dashboard-canvas, > footer) { margin-left: 0 !important; margin-right: 244px !important; }
}
@media (min-width: 1280px) and (max-width: 1399px) {
    [dir="rtl"] body.hp-admin.admin-command-page :is(.admin-command-bar, .admin-dashboard-canvas, > footer) { margin-right: 216px !important; }
}
@media (min-width: 1400px) {
    [dir="rtl"] body.hp-admin.admin-command-page :is(.admin-command-bar, .admin-dashboard-canvas, > footer) { margin-right: 224px !important; }
}
@media (max-width: 1279px) {
    [dir="rtl"] body.hp-admin.admin-command-page :is(.admin-command-bar, .admin-dashboard-canvas, > footer) { margin-right: 0 !important; }
    [dir="rtl"] body.hp-admin .admin-sidebar:not(.is-open) { transform: translateX(102%) !important; }
}
@media (max-width: 720px) {
    body.hp-admin .operation-row { flex-wrap: nowrap; }
    body.hp-admin .operation-edit-disclosure { flex: none; width: 100%; }
}
html body.hp-ui.hp-admin :is([class*="bg-black"], [class*="bg-[#0"], #userFilters, .user-management-panel > div) { background-color: var(--hx-paper-2) !important; background-image: none !important; border-color: var(--hx-line) !important; }
html body.hp-ui.hp-admin .user-card [class*="bg-[#0"] { background-color: var(--hx-royal-soft) !important; color: var(--hx-royal-ink) !important; }
html body.hp-ui.hp-admin .user-inspect-trigger { background: var(--hx-surface) !important; color: var(--hx-ink-2) !important; border: 1px solid var(--hx-line) !important; box-shadow: none !important; }
html body.hp-ui.hp-admin .user-inspect-trigger * { color: inherit !important; }
html body.hp-ui.hp-admin input:is([type="checkbox"], [type="radio"]) { background: var(--hx-surface) !important; border-color: var(--hx-line-2) !important; accent-color: var(--hx-royal); }
html body.hp-ui.hp-admin .chart-shell { background: transparent !important; box-shadow: none !important; border-color: transparent !important; }
html body.hp-ui.hp-admin .plan-donut::after { box-shadow: 0 10px 24px -14px rgba(12, 30, 22, .35) !important; }
html body.hp-ui.hp-admin .user-card form { background-color: var(--hx-paper-2) !important; border-color: var(--hx-line) !important; }
body.hp-ui .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
html body.hp-ui.hp-admin .announcement-composer-backdrop button,
html body.hp-ui.hp-admin .announcement-composer-backdrop { background: rgba(12, 30, 22, .38) !important; box-shadow: none !important; border: 0 !important; }
html body.hp-ui.hp-admin :is(.announcement-composer-header, .user-inspect-header) { background: var(--hx-surface) !important; background-image: none !important; border-color: var(--hx-line) !important; }
html body.hp-ui.hp-admin :is(.announcement-composer-header, .user-inspect-header) > div > span { color: var(--hx-royal-ink) !important; }
html body.hp-ui.hp-admin :is(.announcement-composer-header, .user-inspect-header) button { background: var(--hx-surface-2) !important; color: var(--hx-ink-2) !important; border: 1px solid var(--hx-line) !important; }
html body.hp-ui.hp-admin .announcement-composer-cancel { background: var(--hx-surface) !important; color: var(--hx-ink) !important; border: 1px solid var(--hx-line-2) !important; box-shadow: none !important; }
html body.hp-ui.hp-admin .command-backdrop { background: rgba(12, 30, 22, .38) !important; }
html body.hp-ui.hp-admin .announcement-composer-dialog::backdrop { background: rgba(12, 30, 22, .38); }
html body.hp-ui.hp-admin .user-inspect-grid > div { background: var(--hx-paper-2) !important; border-color: var(--hx-line) !important; }
/* Admin-written and user-written text keeps its own direction inside Arabic pages */
[dir="rtl"] body.hp-ui :is(.site-announcement-copy strong, .site-announcement-copy p, .document-card-title, .document-card-excerpt, .operation-row strong, .operation-row p, .document-title, .document-excerpt) { unicode-bidi: plaintext; }

/* Contrast: legacy metadata greys on the light surfaces */
html:not([data-hp-theme="dark"]) body.hp-ui.hp-app :is(.document-stats, .document-stats span, .text-stats, .text-stats span, [aria-label$="text statistics"] span) { color: var(--hx-ink-3) !important; }
body.hp-ui .trash-warning :is(strong, span, p) { color: var(--hx-quill-ink) !important; }

/* Contrast fixes in dark mode */
html[data-hp-theme="dark"] body.hp-ui :where(#originalWordCount, #originalCharCount, #resultWordCount, #resultCharCount, #passwordStrengthText) { color: var(--hx-ink-3) !important; }
html[data-hp-theme="dark"] body.hp-ui :where(.text-card-head label, .tool-panel label, .empty-state > p, .section-heading p) { color: var(--hx-ink-3) !important; }
html[data-hp-theme="dark"] body.hp-ui .text-card-head strong { color: var(--hx-ink-2) !important; }
html[data-hp-theme="dark"] body.hp-ui #lengthVal, html[data-hp-theme="dark"] body.hp-ui #emotionVal, html[data-hp-theme="dark"] body.hp-ui #vocabVal { color: var(--hx-royal-ink) !important; }
html[data-hp-theme="dark"] body.hp-ui .button-warning, html[data-hp-theme="dark"] body.hp-ui .button-warning * { color: #1d1606 !important; }
html[data-hp-theme="dark"] body.hp-admin :is(.admin-health-strip dt, .admin-nav-group > span, .admin-sidebar-brand p, .admin-sidebar-account span, .text-slate-500, .text-slate-600) { color: var(--hx-ink-3) !important; }
html[data-hp-theme="dark"] body.hp-ui :is(.plan-note, .notice-warning) .button-warning :is(span, svg, strong) { color: #1d1606 !important; }

/* Error pages */
body.hp-ui.hp-error { min-height: 100vh; margin: 0; background: var(--hx-paper) !important; }
body.hp-ui .hp-error-page { box-sizing: border-box; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px; }
body.hp-ui .hp-error-card {
    width: min(560px, 100%); overflow: hidden; border-radius: 30px;
    background: var(--hx-surface); border: 1px solid var(--hx-line); box-shadow: var(--hx-shadow-lg);
}
body.hp-ui .hp-error-card .hp-card-stage { height: 250px; }
body.hp-ui .hp-error-code {
    position: absolute; inset-inline-start: 28px; bottom: 6px; z-index: 1; margin: 0;
    font-family: var(--hx-f-display); font-size: 6.5rem; line-height: 1; color: var(--hx-cream); opacity: .9;
    letter-spacing: -.02em; pointer-events: none;
}
body.hp-ui .hp-error-body { padding: 30px 36px 34px; }
body.hp-ui .hp-error-eyebrow { margin: 0; color: var(--hx-royal-ink); font-weight: 700; font-size: .88rem; }
body.hp-ui .hp-error-title {
    margin: 8px 0 0; font-family: var(--hx-f-display) !important; font-weight: 400; color: var(--hx-ink);
    font-size: clamp(2rem, 6vw, 2.6rem); line-height: 1.05; letter-spacing: -.01em; text-wrap: balance;
}
body.hp-ui .hp-error-copy { margin: 12px 0 0; color: var(--hx-ink-2); font-size: 1rem; line-height: 1.6; max-width: 46ch; }
body.hp-ui .hp-error-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
html[lang="ar"] body.hp-ui .hp-error-title { font-weight: 700; line-height: 1.3; }
@media (max-width: 560px) {
    body.hp-ui .hp-error-body { padding: 24px 22px 28px; }
    body.hp-ui .hp-error-code { font-size: 5rem; }
    body.hp-ui .hp-error-actions .hp-btn { flex: 1 1 100%; }
}

/* Arabic first paint: hidden only until hp-locale.js has swapped the copy */
html.hp-i18n-pending body { visibility: hidden; }
:root:not([data-hp-theme="dark"]) { color-scheme: light; }

/* ===================================================================
   Blade auth: an ivory form beside a forest panel cut by a brass seam.
   Login keeps the form first; register mirrors it. Moving between the
   two sends the blade across the card (hp-ui.js + hp-locale.js).
   =================================================================== */
body.hp-ui.hp-auth { --hx-rake: 7deg; }
body.hp-ui.hp-auth .auth-shell {
    position: relative !important; isolation: isolate; overflow: hidden !important;
    background: linear-gradient(180deg, #fdfaf4, #f3eadc) !important;
    border: 1px solid rgba(184, 137, 74, .28) !important; border-radius: 26px !important;
    box-shadow: 0 60px 120px -50px rgba(4, 23, 15, .55), 0 12px 30px -18px rgba(4, 23, 15, .3) !important;
}
body.hp-ui.hp-auth .auth-shell::before { display: none !important; }
body.hp-ui.hp-auth .form-panel { background: transparent !important; position: relative; z-index: 2; }
body.hp-ui.hp-auth .feature-panel {
    background: transparent !important; overflow: visible !important; z-index: 1 !important; isolation: auto !important;
}
body.hp-ui.hp-auth .feature-panel::before {
    display: block !important; content: ""; position: absolute; inset-block: 0; z-index: -1;
    background:
        radial-gradient(520px 380px at 60% 22%, rgba(42, 122, 92, .38), transparent 62%),
        radial-gradient(420px 300px at 20% 105%, rgba(184, 137, 74, .14), transparent 60%),
        linear-gradient(165deg, #12503e 0%, #0b392f 42%, #04170f 100%);
    box-shadow: 0 0 0 1px rgba(4, 23, 15, .2);
    opacity: 1 !important; background-size: auto !important; -webkit-mask-image: none !important; mask-image: none !important;
}
body.hp-ui.hp-auth .feature-panel::after { display: none !important; }

@media (min-width: 961px) {
    body.hp-ui.hp-auth .auth-shell { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr) !important; min-height: 640px; }
    body.hp-ui.hp-auth[data-auth-page="register"] .auth-shell { grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr) !important; }
    body.hp-ui.hp-auth[data-auth-page="login"] .form-panel { order: 1; padding: 54px 96px 44px 56px !important; }
    body.hp-ui.hp-auth[data-auth-page="login"] .feature-panel { order: 2; padding: 40px 44px 36px 64px !important; }
    body.hp-ui.hp-auth[data-auth-page="register"] .form-panel { padding: 50px 56px 40px 96px !important; }
    body.hp-ui.hp-auth[data-auth-page="register"] .feature-panel { padding: 40px 64px 36px 44px !important; }
    /* The skewed band: its seam leans like a page being turned. */
    body.hp-ui.hp-auth[data-auth-page="login"] .feature-panel::before {
        left: 6px; right: -160px; transform-origin: 0 100%; transform: skewX(var(--hx-rake));
        border-left: 1.5px solid rgba(240, 214, 170, .9);
        box-shadow: -26px 0 60px -24px rgba(4, 23, 15, .65), inset 1px 0 0 rgba(255, 238, 205, .25);
    }
    body.hp-ui.hp-auth[data-auth-page="register"] .feature-panel::before {
        left: -160px; right: 6px; transform-origin: 100% 100%; transform: skewX(calc(-1 * var(--hx-rake)));
        border-right: 1.5px solid rgba(240, 214, 170, .9);
        box-shadow: 26px 0 60px -24px rgba(4, 23, 15, .65), inset -1px 0 0 rgba(255, 238, 205, .25);
    }
    [dir="rtl"] body.hp-ui.hp-auth[data-auth-page="login"] .form-panel { padding: 54px 56px 44px 96px !important; }
    [dir="rtl"] body.hp-ui.hp-auth[data-auth-page="login"] .feature-panel { padding: 40px 64px 36px 44px !important; }
    [dir="rtl"] body.hp-ui.hp-auth[data-auth-page="login"] .feature-panel::before {
        left: -160px; right: 6px; transform-origin: 100% 100%; transform: skewX(calc(-1 * var(--hx-rake)));
        border-left: 0; border-right: 1.5px solid rgba(240, 214, 170, .9);
        box-shadow: 26px 0 60px -24px rgba(4, 23, 15, .65), inset -1px 0 0 rgba(255, 238, 205, .25);
    }
    [dir="rtl"] body.hp-ui.hp-auth[data-auth-page="register"] .form-panel { padding: 50px 96px 40px 56px !important; }
    [dir="rtl"] body.hp-ui.hp-auth[data-auth-page="register"] .feature-panel { padding: 40px 44px 36px 64px !important; }
    [dir="rtl"] body.hp-ui.hp-auth[data-auth-page="register"] .feature-panel::before {
        left: 6px; right: -160px; transform-origin: 0 100%; transform: skewX(var(--hx-rake));
        border-right: 0; border-left: 1.5px solid rgba(240, 214, 170, .9);
        box-shadow: -26px 0 60px -24px rgba(4, 23, 15, .65), inset 1px 0 0 rgba(255, 238, 205, .25);
    }
}

/* Forest panel copy: an eyebrow, a serif line with a brass italic close */
body.hp-ui.hp-auth .feature-panel { justify-content: space-between !important; }
body.hp-ui.hp-auth .feature-list { display: none !important; }
body.hp-ui.hp-auth .hp-auth-stage { height: 250px; margin: 6px -30px 0; }
body.hp-ui.hp-auth .feature-badge {
    background: none !important; border: 0 !important; padding: 0 !important; backdrop-filter: none !important;
    color: var(--hx-cream) !important; font-size: .72rem !important; font-weight: 700 !important;
    letter-spacing: .28em !important; text-transform: uppercase !important;
}
body.hp-ui.hp-auth .feature-badge .icon, body.hp-ui.hp-auth .feature-badge svg { display: none !important; }
body.hp-ui.hp-auth .feature-title { font-size: clamp(2.6rem, 4vw, 3.6rem) !important; line-height: 1.02 !important; margin-top: 16px !important; }
body.hp-ui.hp-auth .feature-copy { font-size: .98rem !important; max-width: 38ch; color: #a9bfb3 !important; }
body.hp-ui.hp-auth .feature-footer { font-size: .78rem !important; color: rgba(214, 228, 219, .62) !important; }

/* Form side */
body.hp-ui.hp-auth .form-eyebrow {
    background: none !important; padding: 0 !important; color: var(--hx-quill-ink) !important;
    font-size: .72rem !important; letter-spacing: .26em !important; text-transform: uppercase !important;
}
body.hp-ui.hp-auth .form-eyebrow svg, body.hp-ui.hp-auth .form-eyebrow .icon { display: none !important; }
body.hp-ui.hp-auth .form-title {
    font-family: var(--hx-f-body) !important; font-weight: 700 !important; letter-spacing: -.02em !important;
    font-size: clamp(1.7rem, 2.4vw, 2rem) !important; line-height: 1.15 !important; color: var(--hx-ink) !important;
}
body.hp-ui.hp-auth .form-title::after {
    content: ""; display: block; width: 38px; height: 2px; margin-top: 12px; border-radius: 2px;
    background: linear-gradient(90deg, #8b6634, var(--hx-quill));
}
body.hp-ui.hp-auth .form-copy { color: var(--hx-ink-3) !important; font-size: .94rem !important; }
html[lang="ar"] body.hp-ui.hp-auth .form-title { font-family: var(--hx-f-body) !important; }

/* Underlined fields with a floating label (shared by every sign-in style page) */

body.hp-ui:is(.hp-auth, .hp-card-page, .hp-admin-login) .field { position: relative; padding-top: 18px; }
body.hp-ui:is(.hp-auth, .hp-card-page, .hp-admin-login) .field-label {
    position: absolute !important; inset-inline-start: 0; top: 0; margin: 0 !important; z-index: 2;
    font-size: .74rem !important; font-weight: 600 !important; letter-spacing: .02em !important; text-transform: none !important;
    color: var(--hx-quill-ink) !important; pointer-events: none;
    transition: top .22s var(--hx-ease), font-size .22s var(--hx-ease), color .2s ease;
}
body.hp-ui:is(.hp-auth, .hp-card-page, .hp-admin-login) .field:not(:focus-within):has(:is(.control, .form-input):placeholder-shown) .field-label {
    top: 30px; font-size: .98rem !important; font-weight: 500 !important; color: var(--hx-ink-3) !important;
}
body.hp-ui:is(.hp-auth, .hp-card-page, .hp-admin-login) .input-wrap { border-radius: 0 !important; background: none !important; box-shadow: none !important; }
body.hp-ui:is(.hp-auth, .hp-card-page, .hp-admin-login) :is(.control, .form-input) {
    height: 48px !important; min-height: 0 !important; padding: 10px 34px 6px 0 !important;
    background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--hx-line-2) !important;
    border-radius: 0 !important; box-shadow: none !important; color: var(--hx-ink) !important; font-size: 1rem !important;
    background-image: linear-gradient(90deg, #8b6634, var(--hx-quill)) !important; background-repeat: no-repeat !important;
    background-size: 0 2px !important; background-position: 0 100% !important;
    transition: background-size .35s var(--hx-ease), border-color .2s ease !important;
}
[dir="rtl"] body.hp-ui:is(.hp-auth, .hp-card-page, .hp-admin-login) :is(.control, .form-input) { padding: 10px 0 6px 34px !important; background-position: 100% 100% !important; }
body.hp-ui:is(.hp-auth, .hp-card-page, .hp-admin-login) :is(.control, .form-input):focus { background-size: 100% 2px !important; border-bottom-color: transparent !important; outline: none !important; }
body.hp-ui:is(.hp-auth, .hp-card-page, .hp-admin-login) :is(.control, .form-input):focus-visible { outline: none !important; }
body.hp-ui:is(.hp-auth, .hp-card-page, .hp-admin-login) :is(.control, .form-input)::placeholder { color: transparent !important; }
body.hp-ui:is(.hp-auth, .hp-card-page, .hp-admin-login) .field:focus-within :is(.control, .form-input)::placeholder { color: color-mix(in srgb, var(--hx-ink-3) 70%, transparent) !important; }
body.hp-ui:is(.hp-auth, .hp-card-page, .hp-admin-login) .field-icon {
    inset-inline-start: auto !important; inset-inline-end: 0 !important; left: auto; width: 24px !important;
    color: var(--hx-ink-3) !important; background: none !important; border: 0 !important;
}
[dir="rtl"] body.hp-ui:is(.hp-auth, .hp-card-page, .hp-admin-login) .field-icon { right: auto !important; left: 0 !important; }
body.hp-ui:is(.hp-auth, .hp-card-page, .hp-admin-login) .input-wrap:has(.password-toggle) .field-icon { display: none !important; }
body.hp-ui:is(.hp-auth, .hp-card-page, .hp-admin-login) .input-wrap:has(.password-toggle) :is(.control, .form-input) { padding-inline-end: 64px !important; }
body.hp-ui:is(.hp-auth, .hp-card-page, .hp-admin-login) .password-toggle {
    position: absolute !important; inset-inline-end: 0 !important; inset-inline-start: auto !important; top: 50% !important; transform: translateY(-50%) !important;
    background: none !important; padding: 4px 0 !important; min-height: 0 !important; height: auto !important; width: auto !important;
    color: var(--hx-quill-ink) !important; font-size: .78rem !important; font-weight: 700 !important;
    text-decoration: underline; text-decoration-color: rgba(184, 137, 74, .5); text-underline-offset: 4px;
}
body.hp-ui:is(.hp-auth, .hp-card-page, .hp-admin-login) .password-toggle::before { display: none !important; }
body.hp-ui:is(.hp-auth, .hp-card-page, .hp-admin-login) :is(.control, .form-input):-webkit-autofill {
    -webkit-box-shadow: 0 0 0 40px var(--hx-surface) inset !important; -webkit-text-fill-color: var(--hx-ink) !important;
}

/* Checkbox, links and the pill buttons */
body.hp-ui:is(.hp-auth, .hp-card-page) .checkbox-label input[type="checkbox"] { accent-color: var(--hx-royal); width: 16px; height: 16px; }
body.hp-ui:is(.hp-auth, .hp-card-page) .checkbox-label { color: var(--hx-ink-2) !important; font-weight: 500 !important; }
body.hp-ui:is(.hp-auth, .hp-card-page) .form-options .text-link,
body.hp-ui.hp-auth .form-footer .text-link {
    color: var(--hx-quill-ink) !important; text-decoration: underline; text-decoration-color: rgba(184, 137, 74, .55);
    text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}
body.hp-ui.hp-auth .form-footer .text-link { color: var(--hx-ink) !important; font-weight: 700 !important; }
body.hp-ui:is(.hp-auth, .hp-card-page, .hp-admin-login) .submit-button {
    border-radius: 999px !important; min-height: 52px !important;
    background: linear-gradient(180deg, #145441, #0b392f) !important; color: #f6efe2 !important;
    box-shadow: 0 18px 30px -16px rgba(4, 23, 15, .7), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
    letter-spacing: .01em !important;
}
body.hp-ui:is(.hp-auth, .hp-card-page, .hp-admin-login) .submit-button:hover:not(:disabled) { background: linear-gradient(180deg, #19604b, #0f4536) !important; }
body.hp-ui.hp-auth .google-button { border-radius: 999px !important; background: transparent !important; border-color: var(--hx-line-2) !important; }
body.hp-ui.hp-auth .google-button:hover { background: rgba(255, 255, 255, .55) !important; border-color: var(--hx-quill) !important; }
body.hp-ui.hp-auth .divider span { background: transparent !important; }
body.hp-ui.hp-auth .divider::before, body.hp-ui.hp-auth .divider::after { background: var(--hx-line-2) !important; }
body.hp-ui.hp-auth .terms-card { background: rgba(255, 255, 255, .45) !important; border-color: var(--hx-line) !important; }
body.hp-ui.hp-auth .password-meta { background: transparent !important; border: 0 !important; padding: 0 !important; }
body.hp-ui.hp-auth .password-strength, body.hp-ui.hp-auth .password-strength::-webkit-progress-bar { background: var(--hx-line) !important; }
body.hp-ui.hp-auth .password-strength::-webkit-progress-value { background: linear-gradient(90deg, #8b6634, var(--hx-quill)) !important; }
body.hp-ui.hp-auth .password-strength::-moz-progress-bar { background: linear-gradient(90deg, #8b6634, var(--hx-quill)) !important; }

/* The blade that sweeps across when moving between sign in and register */
body.hp-ui.hp-auth .hp-blade,
html.hp-blade-in-l body.hp-ui.hp-auth .auth-shell::after,
html.hp-blade-in-r body.hp-ui.hp-auth .auth-shell::after {
    content: ""; position: absolute; top: -2%; bottom: -2%; left: -30%; width: 160%; z-index: 40; pointer-events: none;
    background:
        radial-gradient(560px 420px at 50% 40%, rgba(42, 122, 92, .35), transparent 65%),
        linear-gradient(165deg, #12503e 0%, #0b392f 45%, #04170f 100%);
    border-inline: 1.5px solid rgba(240, 214, 170, .9);
    box-shadow: 0 0 60px rgba(4, 23, 15, .5);
}
body.hp-ui.hp-auth .hp-blade { visibility: hidden; transform: translateX(110%) skewX(var(--hx-rake)); }
body.hp-ui.hp-auth .hp-blade.is-cover-r { visibility: visible; animation: hpBladeCoverR .52s cubic-bezier(.75, 0, .2, 1) forwards; }
body.hp-ui.hp-auth .hp-blade.is-cover-l { visibility: visible; animation: hpBladeCoverL .52s cubic-bezier(.75, 0, .2, 1) forwards; }
html.hp-blade-in-l body.hp-ui.hp-auth .auth-shell::after { animation: hpBladeRevealL .62s .06s cubic-bezier(.7, 0, .2, 1) both; display: block !important; }
html.hp-blade-in-r body.hp-ui.hp-auth .auth-shell::after { animation: hpBladeRevealR .62s .06s cubic-bezier(.7, 0, .2, 1) both; display: block !important; }
@keyframes hpBladeCoverR { from { transform: translateX(110%) skewX(var(--hx-rake)); } to { transform: translateX(0) skewX(var(--hx-rake)); } }
@keyframes hpBladeCoverL { from { transform: translateX(-110%) skewX(var(--hx-rake)); } to { transform: translateX(0) skewX(var(--hx-rake)); } }
@keyframes hpBladeRevealL { from { transform: translateX(0) skewX(var(--hx-rake)); } to { transform: translateX(-110%) skewX(var(--hx-rake)); } }
@keyframes hpBladeRevealR { from { transform: translateX(0) skewX(var(--hx-rake)); } to { transform: translateX(110%) skewX(var(--hx-rake)); } }
/* While the incoming page is still covered, its content waits underneath and rises once uncovered */
html:is(.hp-blade-in-l, .hp-blade-in-r) body.hp-ui.hp-auth :is(.form-panel, .feature-content) > * { animation: hpRise .55s .38s var(--hx-ease) both; }
@keyframes hpRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Phones and small tablets: the forest band sits above the form with a slanted cut */
@media (max-width: 960px) {
    body.hp-ui.hp-auth .feature-panel { display: flex !important; order: 0 !important; padding: 26px 24px 46px !important; min-height: 0 !important; }
    body.hp-ui.hp-auth .form-panel { order: 1 !important; }
    body.hp-ui.hp-auth .mobile-brand { display: none !important; }
    body.hp-ui.hp-auth .feature-panel::before {
        inset: 0 !important; transform: none !important; border: 0 !important;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%);
    }
    body.hp-ui.hp-auth .hp-auth-stage { height: 170px !important; margin: 0 -24px !important; }
    body.hp-ui.hp-auth :is(.feature-copy, .feature-footer) { display: none !important; }
    body.hp-ui.hp-auth .feature-title { font-size: clamp(2.1rem, 8vw, 2.7rem) !important; margin-top: 10px !important; }
    body.hp-ui.hp-auth .feature-content { margin-top: -6px !important; }
}

@media (prefers-reduced-motion: reduce) {
    body.hp-ui.hp-auth .hp-blade { display: none !important; }
    html:is(.hp-blade-in-l, .hp-blade-in-r) body.hp-ui.hp-auth .auth-shell::after { display: none !important; animation: none !important; }
    html:is(.hp-blade-in-l, .hp-blade-in-r) body.hp-ui.hp-auth :is(.form-panel, .feature-content) > * { animation: none !important; }
    body.hp-ui:is(.hp-auth, .hp-card-page, .hp-admin-login) :is(.control, .form-input), body.hp-ui:is(.hp-auth, .hp-card-page, .hp-admin-login) .field-label { transition: none !important; }
}

/* Dark theme for the blade pages */
html[data-hp-theme="dark"] body.hp-ui.hp-auth .auth-shell { background: linear-gradient(180deg, #102219, #0b1913) !important; border-color: rgba(217, 178, 119, .2) !important; }
html[data-hp-theme="dark"] body.hp-ui.hp-auth .terms-card { background: rgba(255, 255, 255, .03) !important; }
html[data-hp-theme="dark"] body.hp-ui:is(.hp-auth, .hp-card-page, .hp-admin-login) :is(.control, .form-input):-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #0e1e17 inset !important; }
html[data-hp-theme="dark"] body.hp-ui:is(.hp-auth, .hp-card-page, .hp-admin-login) .submit-button { background: linear-gradient(180deg, #e9d3a6, #d2ad6c) !important; color: #0b2a20 !important; }
html[data-hp-theme="dark"] body.hp-ui:is(.hp-auth, .hp-card-page, .hp-admin-login) .submit-button * { color: #0b2a20 !important; }
/* Keep the brass button readable on hover in dark mode (the light hover is forest green). */
html[data-hp-theme="dark"] body.hp-ui:is(.hp-auth, .hp-card-page, .hp-admin-login) .submit-button:hover:not(:disabled) { background: linear-gradient(180deg, #f1dfb9, #dbb877) !important; }
html[data-hp-theme="dark"] body.hp-ui.hp-auth .form-footer .text-link { color: var(--hx-ink) !important; }
body.hp-ui:is(.hp-auth, .hp-card-page, .hp-admin-login) :is(.control, .form-input):focus { box-shadow: none !important; }
@media (max-width: 960px) { body.hp-ui:is(.hp-auth, .hp-card-page) .hp-help { display: none !important; } }

/* ===================================================================
   Blade motion and seams across the site
   =================================================================== */
/* Brass italic close on display headings */
body.hp-ui .hp-display em { font-style: italic; color: #8b6634; }
html[data-hp-theme="dark"] body.hp-ui .hp-display em { color: var(--hx-cream); }
html[lang="ar"] body.hp-ui .hp-display em { font-style: normal; }
body.hp-ui :is(.hp-kicker) { color: var(--hx-quill-ink) !important; letter-spacing: .22em !important; text-transform: uppercase; font-size: .72rem !important; }
html[lang="ar"] body.hp-ui .hp-kicker { letter-spacing: 0 !important; font-size: .82rem !important; }

/* The hero carries the same cut as the sign-in card: a lighter band with a brass seam */
body.hp-ui .hp-hero::after {
    inset: -2% -12% -2% 54%; opacity: 1; z-index: -1;
    background:
        radial-gradient(520px 420px at 40% 45%, rgba(54, 140, 106, .28), transparent 65%),
        linear-gradient(165deg, #155a45 0%, #0d3e31 55%, #062419 100%);
    background-size: auto;
    -webkit-mask-image: none; mask-image: none;
    border-left: 1.5px solid rgba(240, 214, 170, .8);
    box-shadow: -40px 0 80px -40px rgba(0, 0, 0, .7);
    transform-origin: 0 100%; transform: skewX(-8deg);
    animation: hpHeroBlade 1.1s .1s cubic-bezier(.7, 0, .2, 1) both;
}
[dir="rtl"] body.hp-ui .hp-hero::after {
    -webkit-mask-image: none; mask-image: none;
    inset: -2% 54% -2% -12%; border-left: 0; border-right: 1.5px solid rgba(240, 214, 170, .8);
    box-shadow: 40px 0 80px -40px rgba(0, 0, 0, .7); transform-origin: 100% 100%; transform: skewX(8deg);
    animation-name: hpHeroBladeRtl;
}
@keyframes hpHeroBlade { from { transform: translateX(45%) skewX(-8deg); opacity: 0; } to { transform: skewX(-8deg); opacity: 1; } }
@keyframes hpHeroBladeRtl { from { transform: translateX(-45%) skewX(8deg); opacity: 0; } to { transform: skewX(8deg); opacity: 1; } }
body.hp-ui .hp-hero-copy > * { animation: hpRise .8s var(--hx-ease) both; }
body.hp-ui .hp-hero-copy > :nth-child(2) { animation-delay: .12s; }
body.hp-ui .hp-hero-copy > :nth-child(3) { animation-delay: .22s; }
body.hp-ui .hp-hero-copy > :nth-child(4) { animation-delay: .32s; }
body.hp-ui .hp-hero-copy > :nth-child(n+5) { animation-delay: .42s; }
@media (max-width: 900px) { body.hp-ui .hp-hero::after { inset: 46% -20% -2% -20%; transform: skewY(-6deg); transform-origin: 0 0; border-left: 0; border-top: 1.5px solid rgba(240, 214, 170, .7); animation: none; } [dir="rtl"] body.hp-ui .hp-hero::after { inset: 46% -20% -2% -20%; transform: skewY(6deg); border-right: 0; border-top: 1.5px solid rgba(240, 214, 170, .7); } }

/* App and admin banners get the band too, behind the small 3D mark */
body.hp-ui.hp-app .hero::after,
body.hp-ui.hp-admin .hp-admin-hero::after {
    display: block !important; content: ""; position: absolute; top: -4%; bottom: -4%; inset-inline-start: 58%; inset-inline-end: -12%; z-index: -1; pointer-events: none;
    background: linear-gradient(165deg, #155a45 0%, #0d3e31 55%, #062419 100%);
    border-left: 1.5px solid rgba(240, 214, 170, .75);
    box-shadow: -40px 0 70px -40px rgba(0, 0, 0, .65);
    transform-origin: 0 100%; transform: skewX(-9deg);
}
[dir="rtl"] body.hp-ui.hp-app .hero::after,
[dir="rtl"] body.hp-ui.hp-admin .hp-admin-hero::after { border-left: 0; border-right: 1.5px solid rgba(240, 214, 170, .75); transform-origin: 100% 100%; transform: skewX(9deg); box-shadow: 40px 0 70px -40px rgba(0, 0, 0, .65); }
body.hp-ui.hp-app .hero { isolation: isolate; }
@media (max-width: 760px) { body.hp-ui.hp-app .hero::after, body.hp-ui.hp-admin .hp-admin-hero::after { display: none !important; } }

/* Scroll reveals: a diagonal wipe in reading direction, then the clip is dropped */
html.hp-motion .hp-reveal {
    opacity: 0; transform: translateY(16px);
    clip-path: polygon(0 0, 0 0, -16% 100%, -16% 100%);
    transition: clip-path .9s cubic-bezier(.7, 0, .2, 1), transform .9s var(--hx-ease), opacity .5s ease;
    transition-delay: var(--hp-reveal-delay, 0s);
}
html.hp-motion[dir="rtl"] .hp-reveal { clip-path: polygon(100% 0, 100% 0, 116% 100%, 116% 100%); }
html.hp-motion .hp-reveal.is-in { opacity: 1; transform: none; clip-path: polygon(-16% 0, 116% 0, 116% 100%, -16% 100%); }
html.hp-motion[dir="rtl"] .hp-reveal.is-in { clip-path: polygon(116% 0, -16% 0, -16% 100%, 116% 100%); }

@media (prefers-reduced-motion: reduce) {
    body.hp-ui .hp-hero::after, body.hp-ui .hp-hero-copy > * { animation: none !important; }
    html.hp-motion .hp-reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
}

/* Legacy neon utility colours from the old Tailwind theme, mapped onto the palette */
body.hp-ui :is(.text-neonCyan, .text-neonBlue) { color: var(--hx-royal-ink) !important; }
body.hp-ui .text-neonPurple { color: var(--hx-quill-ink) !important; }
body.hp-ui :is(.bg-neonCyan, .bg-neonBlue, .bg-neonPurple) { background-color: var(--hx-royal) !important; }
body.hp-ui :is([class*="bg-neonCyan/"], [class*="bg-neonBlue/"], [class*="bg-neonPurple/"]) { background-color: var(--hx-royal-soft) !important; }
body.hp-ui :is([class*="border-neonCyan"], [class*="border-neonBlue"], [class*="border-neonPurple"]) { border-color: color-mix(in srgb, var(--hx-quill) 45%, transparent) !important; }
body.hp-ui :is(.from-neonCyan, .from-neonBlue, .from-neonPurple, .to-neonCyan, .to-neonBlue, .to-neonPurple, .via-neonPurple) { --tw-gradient-from: var(--hx-royal) !important; --tw-gradient-to: var(--hx-royal-hover) !important; }
body.hp-ui #emotionVal, body.hp-ui #vocabVal, body.hp-ui #lengthVal { color: var(--hx-quill-ink) !important; }
html[data-hp-theme="dark"] body.hp-ui #emotionVal, html[data-hp-theme="dark"] body.hp-ui #vocabVal, html[data-hp-theme="dark"] body.hp-ui #lengthVal { color: var(--hx-cream) !important; }
body.hp-ui input[type="range"] { accent-color: var(--hx-royal); }

/* Admin charts and accents in the palette */
body.hp-ui.hp-admin { --color-hp-cyan: #b8894a; --color-hp-blue: #2b7a5e; --color-hp-violet: #6e4b1c; --color-hp-gold: #d9b277; }
html[data-hp-theme="dark"] body.hp-ui.hp-admin { --color-hp-cyan: #d9b277; --color-hp-blue: #6cc79a; --color-hp-violet: #e6c995; }
body.hp-ui.hp-admin .trend-bars span { background: linear-gradient(#2b7a5e, #0f4536) !important; }
body.hp-ui.hp-admin .trend-bars span + span { background: linear-gradient(#e2bd7d, #b8894a) !important; }
body.hp-ui.hp-admin .legend-user { background: #1f6b52 !important; }
body.hp-ui.hp-admin .legend-document { background: #c99a55 !important; }
body.hp-ui.hp-admin .bg-hp-violet { background-color: #0f4536 !important; }
body.hp-ui.hp-admin .bg-hp-cyan { background-color: #d9b277 !important; }
body.hp-ui.hp-admin .bg-hp-blue { background-color: #2b7a5e !important; }
body.hp-ui.hp-admin :is(.bg-gradient-to-br, .bg-gradient-to-r) { background-image: linear-gradient(135deg, #1f6b52, #0b392f) !important; }
body.hp-ui .profile-avatar { background: linear-gradient(135deg, #1f6b52, #0b392f) !important; color: #f6efe2 !important; }
body.hp-ui.hp-app :is(.result-label, .quality-score) { color: var(--hx-royal-ink) !important; }
body.hp-ui.hp-app :is(.text-stats, .tool-panel) { border-color: var(--hx-line) !important; }
body.hp-ui.hp-app :is(#originalText, .document-text) { color: var(--hx-ink) !important; }
body.hp-ui.hp-app :is(.field label, label, .detail-value) { color: var(--hx-ink) !important; }
body.hp-ui .back-area { border-color: var(--hx-line) !important; }
html[data-hp-theme="dark"] body.hp-ui.hp-admin { --hx-admin-ok: #6cc79a; --hx-admin-warn: #e8b45e; --hx-admin-danger: #f08a7a; --hx-admin-violet: #e6c995; }
body.hp-ui :is(.empty-state > p, .help-panel, .help-panel p) { color: var(--hx-ink-3) !important; }

/* Visible focus: underlined fields get a brass line and a soft halo; admin controls a brass ring */
body.hp-ui:is(.hp-auth, .hp-card-page, .hp-admin-login) :is(.control, .form-input):focus-visible {
    box-shadow: 0 6px 12px -10px rgba(184, 137, 74, .9) !important;
}
html body.hp-ui.hp-admin :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .search-input, .plan-select, .credit-select):focus,
html body.hp-ui.hp-admin :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .search-input, .plan-select, .credit-select):focus-visible {
    border-color: var(--hx-quill) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--hx-quill) 32%, transparent) !important; outline: none !important;
}
body.hp-ui :is(.hp-btn, .submit-button, .button-primary, .primary-button, .google-button, .hp-onboard-cta, .command-primary, a, button):focus-visible {
    outline: 2px solid var(--hx-quill) !important; outline-offset: 3px !important;
}
@media print {
    html.hp-motion .hp-reveal { opacity: 1 !important; clip-path: none !important; transform: none !important; }
    body.hp-ui .hp-blade { display: none !important; }
}
/* Keep the wordmark readable when a paper slip of the 3D scene drifts behind it */
body.hp-ui :is(.hp-card-stage-logo, .feature-brand) {
    padding: 6px 12px 6px 8px; border-radius: 999px;
    background: rgba(4, 23, 15, .55); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
[dir="rtl"] body.hp-ui :is(.hp-card-stage-logo, .feature-brand) { padding: 6px 8px 6px 12px; }

/* Saved writing styles under the mode picker */
body.hp-ui .hp-presets { border: 1px dashed var(--hx-line-2); border-radius: 16px; padding: 12px 14px; background: color-mix(in srgb, var(--hx-surface) 70%, transparent); }
body.hp-ui .hp-presets-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body.hp-ui .hp-presets-title { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hx-quill-ink); }
html[lang="ar"] body.hp-ui .hp-presets-title { letter-spacing: 0; font-size: .82rem; }
body.hp-ui .hp-presets-save { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 0; color: var(--hx-royal-ink); font: 700 .8rem/1.2 var(--hx-f-body); cursor: pointer; }
body.hp-ui .hp-presets-save:hover { text-decoration: underline; text-underline-offset: 4px; }
body.hp-ui .hp-presets-save svg { width: 14px; height: 14px; }
body.hp-ui .hp-presets-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
body.hp-ui .hp-presets-list:empty { display: none; }
body.hp-ui .hp-preset { display: inline-flex; align-items: center; border: 1px solid var(--hx-line-2); border-radius: 999px; background: var(--hx-surface); overflow: hidden; }
body.hp-ui .hp-preset.is-active { border-color: var(--hx-royal); background: var(--hx-royal-soft); }
body.hp-ui .hp-preset-apply { border: 0; background: none; padding: 6px 4px 6px 12px; color: var(--hx-ink); font: 600 .8rem/1.2 var(--hx-f-body); cursor: pointer; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[dir="rtl"] body.hp-ui .hp-preset-apply { padding: 6px 12px 6px 4px; }
body.hp-ui .hp-preset-delete { border: 0; background: none; width: 26px; height: 28px; display: grid; place-items: center; color: var(--hx-ink-3); cursor: pointer; }
body.hp-ui .hp-preset-delete svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
body.hp-ui .hp-preset-delete:hover { color: var(--hx-danger); }
body.hp-ui .hp-presets-empty { margin: 6px 0 0; font-size: .8rem; line-height: 1.45; color: var(--hx-ink-3); }
body.hp-ui .hp-presets-form { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
body.hp-ui .hp-presets-form[hidden] { display: none; }
body.hp-ui .hp-presets-form input { flex: 1 1 160px; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--hx-line-2); border-radius: 12px; background: var(--hx-surface); color: var(--hx-ink); font: 500 .88rem var(--hx-f-body); }
body.hp-ui .hp-presets-form input:focus { outline: none; border-color: var(--hx-quill); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hx-quill) 30%, transparent); }
body.hp-ui .hp-presets-confirm, body.hp-ui .hp-presets-cancel { height: 38px; padding: 0 14px; border-radius: 999px; font: 700 .8rem var(--hx-f-body); cursor: pointer; }
body.hp-ui .hp-presets-confirm { border: 0; background: var(--hx-btn); color: #fff; }
body.hp-ui .hp-presets-cancel { border: 1px solid var(--hx-line-2); background: transparent; color: var(--hx-ink-2); }
body.hp-ui .hp-install { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--hx-line-2); background: var(--hx-surface); color: var(--hx-ink); border-radius: 999px; padding: 6px 12px; font: 700 .82rem/1.2 var(--hx-f-body); cursor: pointer; }
body.hp-ui .hp-install[hidden] { display: none; }
body.hp-ui .hp-install svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.hp-ui .hp-install:hover { border-color: var(--hx-quill); }

/* Admin sub-pages (payments, analytics, articles, campaigns) share the dashboard shell. */
html body.hp-ui.hp-admin .admin-flash{display:flex;gap:12px;align-items:flex-start;margin-bottom:22px;padding:14px 18px;border-radius:18px;border:1px solid var(--hx-line);background:var(--hx-surface);color:var(--hx-ink)}
html body.hp-ui.hp-admin .admin-flash p{margin:2px 0 0;color:var(--hx-ink-2);font-size:.92rem}
html body.hp-ui.hp-admin .admin-flash > i,html body.hp-ui.hp-admin .admin-flash > svg{flex:none;width:20px;height:20px;margin-top:2px}
html body.hp-ui.hp-admin .admin-flash-error{border-color:color-mix(in srgb,#b4452f 40%,transparent)}
html body.hp-ui.hp-admin .admin-flash-error > svg{color:#b4452f}
html body.hp-ui.hp-admin .admin-flash-success > svg{color:var(--hx-royal-ink,var(--hx-royal))}

/* ==========================================================================
   Billing link on the dashboard and account plan cards (payments feature)
   ========================================================================== */
body.hp-ui.hp-app .hp-billing-link {
    display: inline-flex !important; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 16px !important;
    border-radius: 999px !important; font-size: .88rem !important; font-weight: 700 !important; text-decoration: none;
}
body.hp-ui.hp-app .hp-billing-link .icon { width: 1rem; height: 1rem; }

/* ==========================================================================
   HumanProse icons (public/images/hp-icons.svg, resources/js/build-hp-icons.mjs)
   Strokes are currentColor; every icon carries one brass mark (.hpi-accent)
   coloured by --hp-icon-accent. Where an icon sits on a filled surface the
   accent follows the text colour, so the icon turns cleanly monochrome.
   ========================================================================== */
.hp-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hpi-accent { fill: var(--hp-icon-accent, #b8894a); }
.hpi-accent-line { stroke: var(--hp-icon-accent, #b8894a); }
/* Paper: brass (#b8894a); dark mode: the lighter brass (--hx-quill flips to #d9b277). */
body.hp-ui { --hp-icon-accent: var(--hx-quill); }
/* The forest stage and glass buttons on it: light brass. */
body.hp-ui :is(.hp-hero, .hp-btn-glass, .feature-badge) { --hp-icon-accent: var(--hx-cream); }
/* Filled and primary buttons, and anything sitting on brass: monochrome. */
body.hp-ui :is(.hp-btn-primary, .hp-btn-light, .btn-gradient, .primary-button, .button-primary, .primary-action, .empty-state-action, .submit-button, .hp-help, .hpb-whatsapp, #humanizeBtn, #whatsappLink) { --hp-icon-accent: currentColor; }
body.hp-ui :is(.hp-note, .hpb-pack-icon, .trash-warning, .hp-focus-btn[aria-pressed="true"]) { --hp-icon-accent: currentColor; }
/* Navigation: brass on the active pill; in dark mode the active icon is brass itself, so its mark turns ivory. */
body.hp-ui.hp-app .nav-current { --hp-icon-accent: var(--hx-quill); }
html[data-hp-theme="dark"] body.hp-ui.hp-app .nav-current { --hp-icon-accent: var(--hx-ink); }
/* Chips: their icons are drawn in light brass already, so the mark turns ivory and still reads. */
body.hp-ui :is(.hp-chip, .hp-hero-strip) svg { --hp-icon-accent: var(--hx-on-stage); }
/* Rating stars stay one colour: an empty star must look empty. */
body.hp-ui :is(.hp-rvw-star, .hp-rv-star) { --hp-icon-accent: currentColor; }
body.hp-ui .hp-demo-arrow { color: var(--hx-quill); }

/* "used / limit" pairs read left to right in Arabic too (12,000 / 50,000, not 50,000 / 12,000). */
body.hp-ui .usage-value, body.hp-ui .hpb-usage-value, body.hp-ui .hpb-pager-info,
body.hp-ui #quoteCount, body.hp-ui #customCount, body.hp-ui .hpt-count,
body.hp-ui [data-hp-review-count], body.hp-ui .hp-ratio { direction: ltr; unicode-bidi: isolate; }

/* Header nav never wraps a link onto two lines; when signed in (two extra links) the
   on-page "How It Works" and "Features" anchors step aside on mid-size screens. */
body.hp-ui .desktop-nav .glass-nav-link { white-space: nowrap; }
@media (max-width: 1399px) {
    body.hp-ui .desktop-nav[data-hp-nav-signed] .glass-nav-link:is([href="#how-it-works"], [href="#features"]) { display: none; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
    body.hp-ui .desktop-nav .glass-nav-link { padding-inline: .7rem; }
    body.hp-ui .desktop-nav:not([data-hp-nav-signed]) .glass-nav-link[href="#how-it-works"] { display: none; }
}

/* Dashboard recent documents: "Open document" is a quiet text link inside the card, not a pill. */
body.hp-ui.hp-app .document-card .document-open,
body.hp-ui.hp-app a > .document-open {
    border: 0 !important; background: none !important; border-radius: 0 !important; box-shadow: none !important;
    padding: 14px 0 0 !important; color: var(--hx-royal-ink) !important; gap: 7px;
}
body.hp-ui.hp-app a:hover > .document-open { color: var(--hx-quill-ink, var(--hx-royal-ink)) !important; text-decoration: underline; text-underline-offset: 3px; }

/* "Open saved document" under the result: forest-and-brass chip in both themes (was a light blue box). */
body.hp-ui [data-saved-document-link] {
    color: var(--hx-royal-ink) !important; background: var(--hx-royal-soft) !important;
    border: 1px solid var(--hx-line) !important; border-radius: 999px !important;
    padding: .55rem 1rem !important; box-shadow: none !important;
}
body.hp-ui [data-saved-document-link]:hover { border-color: var(--hx-quill) !important; text-decoration: none !important; }

/* ---------- Site sweep: legacy slate text tones ----------
   The older page styles (documents, dashboard, account, auth) still define
   slate-blue text variables on :root. Point the text ones at the design
   tokens so secondary copy, dates and counters match the forest/ivory
   palette in both themes. Backgrounds and accents keep their own rules. */
body.hp-ui:is(.hp-app, .hp-auth, .hp-card-page) {
    --ink: var(--hx-ink); --pl-ink: var(--hx-ink); --pa-ink: var(--hx-ink); --pr-ink: var(--hx-ink); --ac-ink: var(--hx-ink); --pw-ink: var(--hx-ink);
    --muted: var(--hx-ink-3); --pl-muted: var(--hx-ink-3); --pa-muted: var(--hx-ink-3); --pr-muted: var(--hx-ink-3); --ac-muted: var(--hx-ink-3); --pw-muted: var(--hx-ink-3);
}
body.hp-ui.hp-app .usage-value { color: var(--hx-royal-ink) !important; }
/* Admin activity timeline dots: brass instead of the legacy blue. */
html body.hp-ui.hp-admin .activity-timeline li > span { background: var(--hx-quill) !important; box-shadow: 0 0 0 5px var(--hx-quill-soft) !important; }