/* Vijmitra UI experiment — presentation only. All data and auth behavior stays in the existing scripts. */
:root {
  --vij-primary: #5b3196;
  --vij-primary-deep: #352051;
  --vij-primary-tint: #f0eafa;
  --vij-contrast: #ac805f;
  --vij-contrast-tint: #f9efe7;
  --vij-bg: #fffcf8;
  --vij-secondary: #f7f4f0;
  --vij-text: #251e2c;
  --vij-text-muted: #625e69;
  --vij-text-faint: #807c86;
  --vij-rule: #e6e0e5;
  --vij-rule-strong: #cbc2cd;
  --vij-on-primary: #fff;
  --vij-radius: 14px;
  --ex-ink: #251e2c;
  --ex-plum: #302243;
  --ex-violet: #5b3196;
  --ex-paper: #fffcf8;
  --ex-canvas: #f6f3ef;
  --ex-line: #e6e0e5;
  --ex-muted: #625e69;
  --ex-shadow: 0 18px 52px rgba(43, 31, 52, .075);
  --ex-ease: cubic-bezier(.2,.75,.2,1);
}
html { scroll-behavior: smooth; }
body { background: var(--ex-canvas); color: var(--ex-ink); font-family: var(--vij-font-body); }
[hidden] { display: none !important; }
button, input, a { -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; }
a, button, input, select, textarea { transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .28s var(--ex-ease); }
:where(a,button,input,select,textarea,summary):focus-visible { outline: 3px solid #a184d2; outline-offset: 3px; }
::selection { background: #ded0f3; color: var(--ex-ink); }

/* Header and compact navigation */
.dashboard-header { height: 76px; padding: 0 clamp(18px,3vw,48px); border-bottom: 1px solid rgba(63,45,73,.09); background: rgba(255,252,248,.94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.dashboard-brand { margin-left: 18px; color: var(--ex-plum); font-family: var(--vij-font-body); font-size: 25px; font-weight: 750; letter-spacing: -.055em; }
.dashboard-brand::before, .auth-brand::before, .legal-brand::before { content: 'V'; display: grid; place-items: center; width: 32px; height: 32px; margin-right: 9px; border-radius: 10px; background: var(--ex-plum); color: #fff; font: 600 19px var(--vij-font-heading); letter-spacing: -.07em; }
.dashboard-brand sup { top: -.28em; font-size: .38em; }
.menu-button { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 1px solid var(--ex-line); border-radius: 11px; background: #fff; color: var(--ex-ink); box-shadow: 0 2px 4px rgba(38,27,47,.025); }
.menu-button:hover { border-color: #c8b7de; background: #f7f2fd; }
.menu-glyph { display: grid; gap: 5px; width: 18px; }
.menu-glyph i { display: block; height: 1.8px; border-radius: 2px; background: currentColor; }
.menu-glyph i:last-child { width: 12px; }
.header-login-link, .profile-button { min-height: 42px; border-radius: 10px; font-size: 13px; font-weight: 700; }
.header-login-link { padding: 12px 20px; background: var(--ex-plum); border-color: var(--ex-plum); box-shadow: 0 5px 13px rgba(48,34,67,.12); }
.header-login-link:hover { background: #4b326b; border-color: #4b326b; transform: translateY(-1px); }
.profile-button { border-color: var(--ex-line); background: #fff; color: var(--ex-plum); }
.profile-button:hover { border-color: #cbbbdc; background: #f8f4fc; }
.profile-menu { top: 54px; width: 248px; padding: 18px; border: 1px solid var(--ex-line); border-radius: 16px; background: #fff; box-shadow: 0 20px 55px rgba(25,16,35,.16); }
.profile-name { margin-top: 0; }
.profile-email { overflow-wrap: anywhere; }
.logout-button { padding: 11px; border-radius: 9px; }
.sidebar { top: 76px; width: min(290px,calc(100vw - 38px)); height: calc(100dvh - 76px); padding: 28px 16px; border-right: 1px solid var(--ex-line); background: #fffcf9; box-shadow: 15px 18px 40px rgba(35,21,48,.08); transition: transform .34s var(--ex-ease); }
.sidebar::before { content: 'WORKSPACE'; display: block; margin: 4px 14px 17px; color: #8e8591; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.sidebar-nav { gap: 5px; }
.sidebar-nav a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 12px 14px; border-radius: 11px; color: #453a4f; font-size: 14px; font-weight: 650; }
.sidebar-nav a::after { content: '↗'; opacity: .4; font-size: 15px; }
.sidebar-nav a:hover, .sidebar-nav a[aria-current="page"] { background: #efe8f5; color: var(--ex-violet); transform: translateX(3px); }
.sidebar-overlay { top: 76px; height: calc(100dvh - 76px); background: rgba(32,22,40,.36); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.site-footer { background: transparent; border-top-color: var(--ex-line); color: var(--ex-muted); font-size: 12px; }
.site-footer a { color: #584b66; }

/* Public Home — editorial split with an original, light SVG data illustration */
.public-home-page { background: #faf8f5; }
.public-home-main { width: min(100%, 1512px); padding: 0 clamp(20px,4vw,64px) 90px; }
.home-hero { max-width: none; min-height: min(650px,calc(100svh - 76px)); display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(24px,4vw,72px); padding: clamp(48px,6vw,90px) 0 clamp(42px,5vw,68px); }
.home-hero-content { position: relative; z-index: 1; padding: 12px 0; }
.vij-eyebrow { color: var(--ex-violet); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.home-hero .vij-eyebrow { display: flex; align-items: center; gap: 12px; }
.eyebrow-line { width: 25px; height: 1px; background: var(--ex-violet); }
.home-hero h1 { max-width: 690px; margin: 26px 0 0; color: var(--ex-ink); font-family: var(--vij-font-heading); font-size: clamp(62px,6.2vw,112px); font-weight: 400; line-height: .94; letter-spacing: -.057em; text-wrap: balance; }
.home-hero h1 > span { display: block; color: var(--ex-violet); font-style: italic; }
.hero-period { color: #bc8869; font-style: normal; }
.home-hero-copy { max-width: 540px; margin: 31px 0 0; color: #665e69; font-size: clamp(18px,1.55vw,23px); line-height: 1.47; text-wrap: pretty; }
.home-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 38px; }
.hero-primary-link { display: inline-flex; align-items: center; gap: 26px; min-height: 55px; padding: 14px 19px 14px 22px; border: 1px solid var(--ex-plum); border-radius: 10px; background: var(--ex-plum); color: #fff; font-size: 13px; font-weight: 750; text-decoration: none; box-shadow: 0 12px 25px rgba(40,24,59,.16); }
.hero-primary-link:hover { transform: translateY(-3px); background: #4c326b; box-shadow: 0 16px 30px rgba(40,24,59,.2); }
.hero-primary-link span { font-size: 18px; font-weight: 400; }
.hero-text-link { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; color: var(--ex-plum); font-size: 13px; font-weight: 750; text-decoration: none; }
.hero-text-link:hover { color: var(--ex-violet); gap: 15px; }
.home-hero-note { margin: 37px 0 0; color: #8b818c; font-size: 11px; font-weight: 650; letter-spacing: .03em; }
.home-hero-note span { margin-right: 6px; color: #af8766; }
.hero-art { position: relative; isolation: isolate; min-width: 0; height: clamp(440px,42vw,570px); overflow: hidden; border: 1px solid #3b2b4b; border-radius: 18px; background: radial-gradient(circle at 68% 20%,#594172 0%,transparent 46%), linear-gradient(130deg,#382749,#211b30 76%); color: #fff; box-shadow: 0 36px 70px rgba(37,26,49,.2); }
.hero-art::before { content: ''; position: absolute; inset: 0; opacity: .26; background-image: linear-gradient(rgba(255,255,255,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.11) 1px,transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom,transparent,#000 35%,#000 72%,transparent); }
.hero-art-top, .hero-art-bottom { position: absolute; z-index: 3; left: 32px; right: 32px; display: flex; align-items: center; justify-content: space-between; color: #c9bed2; font-size: 9px; font-weight: 750; letter-spacing: .14em; }
.hero-art-top { top: 27px; }
.hero-art-bottom { bottom: 25px; opacity: .68; }
.hero-art-mark { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #9988a7; border-radius: 9px; color: #f6edff; font: italic 19px var(--vij-font-heading); letter-spacing: -.1em; }
.hero-art-signal { display: inline-block; width: 6px; height: 6px; margin-left: 10px; border-radius: 50%; background: #bfe9d2; box-shadow: 0 0 0 4px rgba(191,233,210,.13); }
.hero-art-orbit { position: absolute; z-index: 0; width: 670px; height: 670px; border: 1px solid rgba(226,215,239,.13); border-radius: 50%; pointer-events: none; }
.hero-art-orbit-one { left: 38%; top: -54%; }
.hero-art-orbit-two { width: 480px; height: 480px; left: 54%; top: -17%; }
.hero-visual { position: absolute; z-index: 1; left: 10%; right: 8%; top: 23%; padding: clamp(21px,2.4vw,37px); border: 1px solid rgba(255,255,255,.18); border-radius: 15px; background: linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.055)); box-shadow: 0 28px 55px rgba(8,5,15,.24); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transform: rotate(-2deg); }
.hero-visual-heading, .hero-visual-footer { display: flex; justify-content: space-between; color: #d5cbdd; font-size: 9px; font-weight: 750; letter-spacing: .12em; }
.hero-visual-title { margin-top: 19px; font-size: clamp(23px,2.1vw,33px); font-weight: 550; line-height: 1.16; letter-spacing: -.035em; }
.hero-visual-title em { color: #ddc5ee; font-family: var(--vij-font-heading); font-size: 1.15em; font-weight: 400; }
.hero-chart { display: block; width: 100%; height: clamp(112px,12vw,170px); margin: 12px 0 5px; overflow: visible; }
.hero-visual-footer { opacity: .66; }
.hero-float-card { position: absolute; z-index: 2; left: 3%; bottom: 13%; display: flex; align-items: center; gap: 12px; min-width: 208px; padding: 12px 15px; border: 1px solid rgba(255,255,255,.78); border-radius: 12px; background: #fffaf6; color: var(--ex-ink); box-shadow: 0 16px 40px rgba(13,9,20,.19); transform: rotate(3deg); }
.hero-float-icon { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 9px; background: #eee5f6; color: var(--ex-violet); }
.hero-float-icon svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hero-float-card small { display: block; color: #867988; font-size: 8px; font-weight: 800; letter-spacing: .09em; }
.hero-float-card strong { display: block; margin-top: 3px; font-size: 13px; }
.hero-float-arrow { margin-left: auto; align-self: flex-start; color: var(--ex-violet); }
.home-features { margin-top: clamp(35px,5vw,74px); }
.home-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.home-section-heading h2 { max-width: 760px; margin: 8px 0 0; color: var(--ex-ink); font-family: var(--vij-font-heading); font-size: clamp(40px,4.3vw,64px); font-weight: 400; letter-spacing: -.035em; line-height: 1.04; }
.home-section-heading > p { max-width: 220px; margin: 0 0 5px; color: var(--ex-muted); font-size: 13px; line-height: 1.5; }
.feature-card-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 33px; }
.feature-card { position: relative; min-height: 320px; padding: clamp(22px,2vw,31px); overflow: hidden; border: 1px solid #e7e0e5; border-radius: 13px; background: #fffcf9; box-shadow: none; transition: transform .3s var(--ex-ease),box-shadow .3s var(--ex-ease),border-color .3s ease,background-color .3s ease,color .3s ease; }
.feature-card:hover { transform: translateY(-5px); border-color: #cdbbd9; box-shadow: var(--ex-shadow); }
.feature-card-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.feature-card-number { color: #857a88; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.feature-card-arrow { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #e7dfe8; border-radius: 50%; color: var(--ex-plum); font-size: 15px; }
.feature-card-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-top: 20px; border-radius: 13px; background: #f1ebf6; color: var(--ex-violet); }
.feature-card-icon svg { width: 28px; height: 28px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.feature-card h3 { margin-top: 20px; color: var(--ex-ink); font-family: var(--vij-font-heading); font-size: 31px; font-weight: 400; letter-spacing: -.02em; }
.feature-card p { max-width: 360px; margin: 7px 0 22px; color: var(--ex-muted); font-size: 14px; line-height: 1.5; }
.feature-card-link { color: var(--ex-violet); font-size: 12px; font-weight: 800; }
.feature-card-link span { display: inline-block; margin-left: 5px; transition: transform .25s var(--ex-ease); }
.feature-card:hover .feature-card-link span { transform: translateX(5px); }
.feature-card :is(h3,p,.feature-card-number,.feature-card-link,.feature-card-arrow,.feature-card-icon,.feature-card-deco i) { transition: color .3s ease,background-color .3s ease,border-color .3s ease; }
.feature-card-grid:not(:has(.feature-card:hover)) .feature-card:focus-visible { background: var(--ex-plum); border-color: #6e518d; color: #fff; transform: translateY(-5px); box-shadow: 0 22px 42px rgba(49,32,65,.2); }
.feature-card-grid:not(:has(.feature-card:hover)) .feature-card:focus-visible :is(.feature-card-number,p) { color: #d2c7db; }
.feature-card-grid:not(:has(.feature-card:hover)) .feature-card:focus-visible :is(h3,.feature-card-link) { color: #fff; }
.feature-card-grid:not(:has(.feature-card:hover)) .feature-card:focus-visible .feature-card-arrow { border-color: #6c5b80; color: #fff; }
.feature-card-grid:not(:has(.feature-card:hover)) .feature-card:focus-visible .feature-card-icon { background: #594271; color: #e8d5fb; }
.feature-card-grid:not(:has(.feature-card:hover)) .feature-card:focus-visible .feature-card-deco i { background: #ddc9ed; }
.feature-card-grid:not(:has(.feature-card:hover)) .feature-card:focus-visible .feature-card-link span { transform: translateX(5px); }
@media (hover: hover) {
  .feature-card:hover { background: var(--ex-plum); border-color: #6e518d; color: #fff; box-shadow: 0 22px 42px rgba(49,32,65,.2); }
  .feature-card:hover :is(.feature-card-number,p) { color: #d2c7db; }
  .feature-card:hover :is(h3,.feature-card-link) { color: #fff; }
  .feature-card:hover .feature-card-arrow { border-color: #6c5b80; color: #fff; }
  .feature-card:hover .feature-card-icon { background: #594271; color: #e8d5fb; }
  .feature-card:hover .feature-card-deco i { background: #ddc9ed; }
}
.feature-card-deco { position: absolute; right: 23px; bottom: 27px; display: flex; align-items: end; gap: 5px; height: 52px; opacity: .3; }
.feature-card-deco i { width: 8px; height: 25%; border-radius: 2px 2px 0 0; background: var(--ex-violet); }
.feature-card-deco i:nth-child(2) { height: 49%; }.feature-card-deco i:nth-child(3) { height: 35%; }.feature-card-deco i:nth-child(4) { height: 74%; }.feature-card-deco i:nth-child(5) { height: 62%; }.feature-card-deco i:nth-child(6) { height: 91%; }.feature-card-deco i:nth-child(7) { height: 75%; }
.home-endnote { display: flex; align-items: center; gap: 22px; margin-top: clamp(64px,7vw,100px); padding: 27px 0; border-top: 1px solid var(--ex-line); border-bottom: 1px solid var(--ex-line); }
.home-endnote-spark { color: #a77756; font-size: 32px; }
.home-endnote p { flex: 1; margin: 0; color: #5a5160; font-family: var(--vij-font-heading); font-size: clamp(21px,2.1vw,30px); line-height: 1.13; }
.home-endnote strong { color: var(--ex-plum); font-weight: 400; }
.home-endnote a { color: var(--ex-plum); font-size: 13px; font-weight: 800; white-space: nowrap; text-decoration: none; }

/* Workspace structure */
.dashboard-page:not(.public-home-page) { background: var(--ex-canvas); }
.dashboard-main { padding: clamp(28px,4vw,58px) clamp(18px,3vw,48px) 90px; }
.dashboard-workspace { max-width: 1240px; }
.site-settings-section, .monthly-bills-section, .monthly-performance-section, .past-bills-section { border: 1px solid var(--ex-line); border-radius: 16px; background: #fffdfa; box-shadow: 0 9px 32px rgba(39,27,47,.035); }
.site-settings-section, .monthly-bills-section, .monthly-performance-section, .past-bills-section { padding: clamp(24px,3.2vw,42px); }
.monthly-bills-section, .monthly-performance-section { margin-top: 18px; }
.dashboard-section-heading { align-items: flex-start; gap: 22px; }
.dashboard-section-heading h1, .dashboard-section-heading h2, .monthly-performance-section > h2 { margin: 8px 0 0; color: var(--ex-ink); font-family: var(--vij-font-heading); font-size: clamp(34px,3.5vw,49px); font-weight: 400; line-height: 1.08; letter-spacing: -.04em; }
.dashboard-section-description, .monthly-performance-section > .dashboard-section-description { max-width: 710px; margin-top: 12px; color: var(--ex-muted); font-size: 14px; line-height: 1.55; }
.card-home-link { min-height: 38px; padding: 9px 13px; border: 1px solid var(--ex-line); border-radius: 9px; background: #fff; color: var(--ex-plum); font-size: 12px; }
.card-home-link::before { content: '←'; margin-right: 8px; font-size: 15px; }
.card-home-link:hover { border-color: #cbbbd9; background: #f7f1fc; }
.operating-hours-field { max-width: 100%; display: grid; grid-template-columns: minmax(0,1fr) 88px; align-items: center; gap: 2px 20px; margin-top: 32px; padding: 18px 20px; border: 1px solid var(--ex-line); border-radius: 12px; background: #f8f5f1; }
.operating-hours-field label { grid-column: 1; margin: 0; color: var(--ex-ink); font-size: 14px; font-weight: 750; }
.operating-hours-field input { grid-column: 2; grid-row: 1 / span 2; width: 100%; min-height: 42px; border: 1px solid #d4cbd5; border-radius: 8px; background: #fff; text-align: center; font-weight: 700; }
.operating-hours-field .field-help { grid-column: 1; margin: 0; color: #77717a; font-size: 12px; }
.operating-hours-field .operating-hours-error { grid-column: 1 / -1; }
.bill-list-controls { gap: 8px; }
.bill-upload-count { border-radius: 99px; background: #efe8f6; color: var(--ex-violet); font-size: 11px; font-weight: 800; }
.monthly-bill-grid { grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: 22px; margin-top: 30px; }
.bill-selection-panel, .selected-bills-panel { min-width: 0; }
.bill-selection-panel h3, .selected-bills-panel h3 { color: var(--ex-ink); font-size: 16px; }
.bill-selection-panel > p { color: var(--ex-muted); }
.bill-select-dropzone { min-height: 280px; border: 1.5px dashed #beaace; border-radius: 13px; background: radial-gradient(circle at 50% 38%,#fff 0%,#f9f5fd 75%); }
.bill-select-dropzone:hover, .bill-select-dropzone.is-dragging { border-color: var(--ex-violet); background: #f2eaf9; transform: translateY(-2px); }
.bill-select-title { color: var(--ex-plum); font-size: 17px; }
.selected-bills-empty { min-height: 145px; display: grid; place-items: center; border-color: #e4dde5; border-radius: 12px; background: #faf8f5; text-align: center; }
.selected-bills-list { gap: 9px; }
.monthly-bill-card { padding: 17px; border: 1px solid var(--ex-line); border-radius: 11px; background: #fff; box-shadow: 0 4px 15px rgba(40,28,51,.035); }
.monthly-bill-card.status-processed { border-color: #badbc5; background: #fbfefa; }
.monthly-bill-card.status-needs_input { border-color: #e7c7a7; background: #fffaf4; }
.monthly-bill-card.status-queued, .monthly-bill-card.status-uploading, .monthly-bill-card.status-processing { background: #f8f3fc; }
.bill-status { display: inline-flex; align-items: center; width: fit-content; padding: 5px 8px; border-radius: 99px; background: #f3f0f4; font-size: 11px; font-weight: 750; }
.bill-status.status-processed { background: #e8f5ec; color: #286842; }
.bill-status.status-needs_input { background: #f9ead9; color: #925f25; }
.bill-file-details { border-color: var(--ex-line); }
.bill-upload-button, .bill-remove-button, .complete-bill-button, .correction-secondary-button, .past-analysis-open-button, .history-secondary-button { border-radius: 9px; font-size: 12px; font-weight: 750; }
.bill-upload-button, .past-analysis-open-button { border-color: var(--ex-plum); background: var(--ex-plum); color: #fff; }
.bill-upload-button:hover, .past-analysis-open-button:hover { background: #4b3268; transform: translateY(-1px); }
.bill-remove-button, .history-secondary-button, .correction-secondary-button { border-color: var(--ex-line); background: #fff; color: var(--ex-plum); }
.bill-remove-button:hover, .history-secondary-button:hover, .correction-secondary-button:hover { background: #f5eff9; border-color: #c8b7d8; }
.development-actions { margin-top: 21px; }
.monthly-performance-section { background: #fffdfa; }
.monthly-performance-message { padding: 28px; border: 1px dashed #ded4e3; border-radius: 12px; background: #faf8fb; color: var(--ex-muted); text-align: center; }
.monthly-performance-table-container { max-width: 100%; border: 1px solid var(--ex-line); border-radius: 12px; background: #fff; box-shadow: none; }
.monthly-performance-table { border-collapse: separate; border-spacing: 0; }
.monthly-performance-table thead th { position: sticky; top: 0; z-index: 2; background: #f2edf5; color: #493851; }
.monthly-performance-table th, .monthly-performance-table td { border-color: var(--ex-line); font-size: 12px; font-variant-numeric: tabular-nums; }
.monthly-performance-table tbody tr:hover { background: #f8f4fb; }
.score-summary-section { gap: 16px; background: #f8f5f9; }
.score-summary-card { border-color: var(--ex-line); border-radius: 13px; background: #fff; }
.score-composite-card { width: min(100%,700px); border-color: #dfd1ed; background: radial-gradient(circle at top,#fff 0%,#f7f1fc 100%); box-shadow: 0 12px 30px rgba(79,50,108,.08); }
.score-composite-card h2 { color: var(--ex-plum); font-family: var(--vij-font-heading); font-size: clamp(27px,3vw,38px); font-weight: 400; }
.score-value-block { border-radius: 9px; background: #f3ebf9; }
.score-value { font-family: var(--vij-font-heading); font-weight: 500; font-variant-numeric: tabular-nums; }
.score-detail-card { border-radius: 12px; }
.score-detail-card h3 { color: var(--ex-plum); }
.score-parameter-table thead th { background: #f2edf5; }
.score-parameter-table th, .score-parameter-table td { border-color: var(--ex-line); }

/* Locked and private states */
.auth-lock-panel, .vault-auth-state { position: relative; overflow: hidden; max-width: 100%; min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; border: 1px solid #dcd0e5; border-radius: 14px; background: radial-gradient(circle at 50% -15%,#ebdef7 0%,transparent 53%),linear-gradient(145deg,#fcfafc,#f4f0f5); text-align: center; }
.auth-lock-panel::before, .vault-auth-state::before { content: ''; position: absolute; inset: 0; opacity: .4; pointer-events: none; background-image: radial-gradient(#c6b2d5 .7px,transparent .7px); background-size: 17px 17px; mask-image: linear-gradient(to bottom,#000,transparent 62%); }
.auth-lock-panel > *, .vault-auth-state > * { position: relative; }
.auth-lock-icon { width: 62px; height: 62px; margin-bottom: 22px; border: 1px solid #e5dcec; border-radius: 18px; background: #fff; box-shadow: 0 12px 27px rgba(72,42,93,.12); font-size: 25px; }
.auth-lock-panel h3, .vault-auth-state h2 { color: var(--ex-plum); font-family: var(--vij-font-heading); font-size: clamp(29px,3vw,39px); font-weight: 400; letter-spacing: -.025em; }
.auth-lock-panel p, .vault-auth-state p { max-width: 440px; color: var(--ex-muted); font-size: 14px; }
.auth-cta-row { gap: 10px; margin-top: 25px; }
.auth-cta-primary, .auth-cta-secondary { min-width: 116px; min-height: 44px; border-radius: 9px; font-size: 12px; }
.auth-cta-primary { border-color: var(--ex-plum); background: var(--ex-plum); }
.auth-cta-primary:hover { transform: translateY(-2px); background: #4b326b; }
.auth-cta-secondary { border-color: #d9cbdc; background: #fff; color: var(--ex-plum); }
.auth-cta-secondary:hover { transform: translateY(-2px); }

/* Bill Vault */
.past-bills-section { min-height: 640px; }
.bill-history-search { position: relative; width: min(100%,450px); margin: 29px 0 22px; }
.bill-history-search::before { content: '⌕'; position: absolute; left: 16px; top: 6px; color: #95869d; font-size: 28px; pointer-events: none; }
.bill-history-search input { min-height: 49px; padding-left: 47px; border-color: var(--ex-line); border-radius: 10px; background: #fff; font-size: 13px; }
.bill-history-search input::placeholder { color: #8c8390; opacity: 1; }
.bill-history-controls { flex-wrap: wrap; gap: 12px; padding: 13px 16px; border-color: var(--ex-line); border-radius: 11px; background: #f7f4f7; }
.bill-history-total-count { padding: 8px 12px; border-radius: 7px; background: var(--ex-plum); font-size: 12px; }
.bill-history-selection-summary { color: var(--ex-muted); font-size: 12px; }
.past-bills-list { gap: 13px; }
.bill-history-card, .past-analysis-card { border: 1px solid var(--ex-line); border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(35,25,45,.035); }
.bill-history-card { padding: 20px; transition: border-color .22s ease, transform .25s var(--ex-ease), box-shadow .25s ease; }
.bill-history-card:hover { border-color: #cbb7dc; transform: translateY(-2px); box-shadow: var(--ex-shadow); }
.bill-history-card:has(input:checked) { border-color: #a88ac7; background: #fefbff; box-shadow: 0 0 0 2px #ede3f5; }
.bill-history-card h2 { color: var(--ex-plum); font-family: var(--vij-font-heading); font-size: 23px; font-weight: 400; }
.bill-history-meta { gap: 13px 12px; margin: 17px 0; }
.bill-history-meta dt { color: #817781; font-size: 10px; }
.bill-history-meta dd { color: var(--ex-ink); font-size: 13px; font-weight: 650; }
.bill-history-card-actions { gap: 7px; }
.bill-history-card-actions button { min-height: 36px; }
.history-detail-heading, .history-results-section, .history-pdfs-section { border-color: var(--ex-line); }
.history-pdf-row { border-color: var(--ex-line); border-radius: 10px; background: #fff; }

/* Knowledge Hub — reading experience with structured topic cards */
.knowledge-hub-workspace { --kh-max: 1240px; --kh-reading: 850px; --kh-pad: clamp(24px,3vw,44px); }
.knowledge-hub-workspace .latest-news-section { border: 1px solid var(--ex-line); border-radius: 16px; background: #fffdfa; box-shadow: 0 9px 32px rgba(39,27,47,.035); }
.kh-header { padding-top: 27px; }
.kh-wordmark { color: var(--ex-violet); font-family: var(--vij-font-body); font-size: 15px; font-weight: 750; letter-spacing: -.02em; }
.kh-intro { padding-top: 33px; }
.kh-h1 { color: var(--ex-ink); font-size: clamp(44px,5vw,68px); letter-spacing: -.035em; }
.kh-stub { width: 44px; height: 2px; margin: 18px 0; background: #b38a69; }
.kh-deck { max-width: 700px; color: var(--ex-muted); font-size: 16px; }
.kh-tabs { top: 76px; margin-top: 32px; padding: 0 var(--kh-pad); border-bottom: 1px solid var(--ex-line); background: rgba(255,253,250,.95); backdrop-filter: blur(12px); }
.kh-tabs button { min-height: 52px; font-size: 13px; }
.kh-tabs button.is-active { color: var(--ex-violet); }
.kh-tech-guide-card, .kh-update-card, .kh-regulation-card, .kh-tile { border-color: var(--ex-line); border-radius: 11px; background: #fff; box-shadow: 0 4px 15px rgba(34,22,43,.035); transition: transform .25s var(--ex-ease),box-shadow .25s ease,border-color .25s ease; }
.kh-tech-guide-card:hover, .kh-update-card:hover, .kh-regulation-card:hover, .kh-tile:hover { transform: translateY(-3px); border-color: #cbb7dc; box-shadow: var(--ex-shadow); }
.kh-row, .kh-news-card, .kh-panel, .kh-detail, .kh-invert, .kh-index { border-radius: 11px; }
.kh-row:hover { background: #f7f2fa; }
.kh-invert { background: var(--ex-plum); }
.kh-news-card { background: #fff; }
.kh-table-scroll { border-radius: 10px; }
.policy-filter-button, .policy-filter-panel { border-color: var(--ex-line); border-radius: 10px; background: #fff; }
.policy-card-grid { gap: 12px; }
.policy-update-card { border: 1px solid var(--ex-line); border-radius: 11px; background: #fff; box-shadow: 0 4px 14px rgba(34,22,43,.03); }
.policy-update-card:hover { transform: translateY(-2px); border-color: #cbb7dc; box-shadow: var(--ex-shadow); }

/* Correction modal and help */
.correction-modal-overlay { padding: 18px; background: rgba(31,21,40,.56); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.correction-modal { max-width: 720px; max-height: min(90dvh,920px); padding: clamp(22px,3vw,36px); border: 1px solid #e7dfea; border-radius: 17px; background: #fffcf9; box-shadow: 0 35px 90px rgba(17,10,24,.3); animation: ex-modal-in .26s var(--ex-ease) both; }
.correction-modal-header { padding-bottom: 18px; border-bottom: 1px solid var(--ex-line); }
.correction-modal-header h2 { margin-bottom: 0; color: var(--ex-ink); font-family: var(--vij-font-heading); font-size: clamp(29px,3vw,39px); font-weight: 400; }
.correction-close-button { width: 34px; height: 34px; border: 1px solid var(--ex-line); border-radius: 9px; background: #fff; font-size: 23px; }
.correction-close-button:hover { background: #f2ebf6; }
.correction-bill-meta { margin-top: 20px; border: 1px solid var(--ex-line); border-radius: 10px; background: #f7f4f7; }
.correction-field-row { border-color: var(--ex-line); }
.correction-field-label { color: var(--ex-ink); font-size: 13px; }
.correction-field-input { min-height: 44px; border-color: #d7cdd9; border-radius: 8px; background: #fff; }
.correction-modal-actions { position: sticky; bottom: -36px; padding: 17px 0 2px; border-top: 1px solid var(--ex-line); background: #fffcf9; }
.faq-panel { border-color: var(--ex-line); border-radius: 16px; box-shadow: 0 25px 55px rgba(23,14,32,.2); }
.faq-panel-header { background: var(--ex-plum); }
.faq-search-input { border-radius: 9px; }
.faq-list-item { border-radius: 9px; }

/* Auth / legal */
.auth-page { position: relative; background: #f6f2ef; }
.login-page { display: grid; grid-template-columns: minmax(0,1fr) minmax(400px,.9fr); align-items: stretch; justify-items: stretch; gap: 0; width: min(100%,1500px); min-height: calc(100svh - 58px); margin: 0 auto; padding: clamp(18px,3vw,44px); }
.auth-aside { position: relative; display: flex; width: 100%; min-height: 570px; overflow: hidden; border-radius: 16px 0 0 16px; background: radial-gradient(circle at 90% 15%,#674b82,transparent 44%),linear-gradient(140deg,#39254e,#21192e); color: #fff; }
.auth-aside::before { content: ''; position: absolute; width: 720px; height: 720px; right: -390px; top: -110px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.025); }
.auth-aside::after { content: ''; position: absolute; width: 450px; height: 190px; left: -70px; bottom: -74px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; transform: rotate(-28deg); }
.auth-aside-inner { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; padding: clamp(28px,4.6vw,64px); }
.auth-aside-kicker, .auth-aside-bottom { color: #cbbbd5; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.auth-aside-symbol { display: block; margin: auto 0 5px; font: italic clamp(130px,15vw,220px)/.75 var(--vij-font-heading); letter-spacing: -.16em; color: #e9d8f8; }
.auth-aside-symbol span { color: #c59877; }
.auth-aside-inner p { margin: 18px 0 48px; font-family: var(--vij-font-heading); font-size: clamp(35px,4vw,60px); line-height: 1.05; letter-spacing: -.02em; }
.auth-aside-bottom { margin-top: auto; }
.login-card { align-self: stretch; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: none; padding: clamp(28px,5vw,76px); border: 1px solid var(--ex-line); border-left: 0; border-radius: 0 16px 16px 0; background: #fffdfa; box-shadow: none; }
.auth-brand { justify-content: flex-start; align-items: center; width: fit-content; margin-bottom: 41px; color: var(--ex-plum); font-family: var(--vij-font-body); font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.auth-brand::before { margin-right: 10px; }
.auth-title { color: var(--ex-ink); font-family: var(--vij-font-heading); font-size: clamp(38px,4vw,56px); font-weight: 400; letter-spacing: -.035em; text-align: left; }
.login-description { margin-top: 10px; color: var(--ex-muted); font-size: 14px; text-align: left; }
.login-form { margin-top: 29px; }
.form-group label { color: var(--ex-ink); font-size: 12px; font-weight: 750; }
.form-group input, .password-input-row { min-height: 49px; border-color: #dcd5dc; border-radius: 9px; background: #fff; }
.form-group input::placeholder { color: #a49ba7; }
.password-input-row input { background: transparent; }
.password-toggle { border-radius: 0 8px 8px 0; font-size: 12px; font-weight: 750; }
.primary-button { min-height: 49px; border-radius: 9px; background: var(--ex-plum); font-size: 13px; }
.primary-button:hover { background: #4b3268; transform: translateY(-1px); }
.auth-mode-prompt { color: var(--ex-muted); font-size: 13px; }
.auth-mode-toggle { color: var(--ex-violet); font-weight: 800; }
.auth-otp-group { margin-top: 0; }
.auth-otp-code { max-width: 100%; letter-spacing: .32em; font-size: 20px; font-weight: 750; }
.auth-otp-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 12px; }
.auth-otp-controls .auth-link-button { padding: 0; }
.auth-back-button { align-self: flex-start; margin-top: 22px; padding: 0; }
.auth-otp-group[hidden], .auth-back-button[hidden] { display: none; }
.auth-footer { background: #f6f2ef; }
.legal-page { background: #f6f2ef; }
.legal-shell { max-width: 880px; padding: 32px 22px 80px; }
.legal-brand { display: inline-flex; align-items: center; color: var(--ex-plum); font-family: var(--vij-font-body); font-weight: 750; letter-spacing: -.02em; }
.legal-document { border: 1px solid var(--ex-line); border-radius: 14px; background: #fffdfa; box-shadow: 0 8px 30px rgba(35,25,45,.04); }
.legal-document h1, .legal-document h2 { color: var(--ex-plum); }

@keyframes ex-modal-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ex-rise { from { opacity: 0; transform: translateY(17px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .home-hero-content { animation: ex-rise .7s var(--ex-ease) both; }
  .hero-art { animation: ex-rise .85s .12s var(--ex-ease) both; }
  .feature-card { animation: ex-rise .55s var(--ex-ease) both; }
  .feature-card:nth-child(2) { animation-delay: .09s; }
  .feature-card:nth-child(3) { animation-delay: .18s; }
}
@media (max-width: 1080px) {
  .home-hero { grid-template-columns: 1fr 1fr; gap: 25px; }
  .home-hero h1 { font-size: clamp(58px,6.8vw,78px); }
  .feature-card-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .feature-card { min-height: 335px; }
  .feature-card-deco { display: none; }
  .monthly-bill-grid { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
}
@media (max-width: 800px) {
  .home-hero { min-height: auto; grid-template-columns: 1fr; gap: 45px; padding-top: 55px; }
  .home-hero h1 { max-width: 660px; font-size: clamp(67px,10vw,88px); }
  .hero-art { height: 480px; }
  .feature-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .feature-card:last-child { grid-column: 1 / -1; min-height: 260px; }
  .home-section-heading { align-items: start; }
  .monthly-bill-grid { grid-template-columns: 1fr; }
  .bill-select-dropzone { min-height: 220px; }
  .login-page { grid-template-columns: 1fr; max-width: 650px; }
  .auth-aside { min-height: 190px; border-radius: 14px 14px 0 0; }
  .auth-aside-inner { padding: 24px 28px; }
  .auth-aside-symbol { display: none; }
  .auth-aside-inner p { margin: 24px 0 0; font-size: 36px; }
  .auth-aside-bottom { display: none; }
  .login-card { border-left: 1px solid var(--ex-line); border-radius: 0 0 14px 14px; padding: 42px; }
}
@media (max-width: 600px) {
  .dashboard-header { height: 66px; padding: 0 16px; }
  .dashboard-brand { margin-left: 10px; font-size: 21px; }
  .dashboard-brand::before { width: 28px; height: 28px; font-size: 17px; }
  .menu-button { width: 38px; height: 38px; }
  .sidebar { top: 66px; height: calc(100dvh - 66px); }
  .sidebar-overlay { top: 66px; height: calc(100dvh - 66px); }
  .public-home-main { padding: 0 18px 65px; }
  .home-hero { gap: 39px; padding: 47px 0 24px; }
  .home-hero h1 { margin-top: 19px; font-size: clamp(61px,14vw,79px); }
  .home-hero-copy { margin-top: 22px; font-size: 17px; }
  .home-hero-actions { gap: 8px 18px; margin-top: 27px; }
  .hero-primary-link { min-height: 49px; }
  .home-hero-note { margin-top: 25px; }
  .hero-art { height: 390px; border-radius: 14px; }
  .hero-art-top, .hero-art-bottom { left: 18px; right: 18px; }
  .hero-art-top { top: 18px; }
  .hero-art-bottom { bottom: 16px; font-size: 7px; }
  .hero-visual { left: 7%; right: 7%; top: 23%; padding: 19px; }
  .hero-visual-title { font-size: 23px; }
  .hero-chart { height: 112px; }
  .hero-float-card { left: 2%; bottom: 11%; padding: 9px; transform: rotate(2deg) scale(.87); transform-origin: left bottom; }
  .home-features { margin-top: 50px; }
  .home-section-heading { display: block; }
  .home-section-heading > p { max-width: 320px; margin-top: 14px; }
  .feature-card-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 23px; }
  .feature-card, .feature-card:last-child { min-height: 270px; grid-column: auto; padding: 24px; }
  .feature-card-icon { margin-top: 10px; }
  .home-endnote { flex-wrap: wrap; gap: 13px; margin-top: 57px; }
  .home-endnote p { flex-basis: calc(100% - 50px); }
  .home-endnote a { margin-left: 45px; }
  .dashboard-main { padding: 19px 12px 65px; }
  .site-settings-section, .monthly-bills-section, .monthly-performance-section, .past-bills-section { padding: 22px 19px; border-radius: 13px; }
  .dashboard-section-heading h1, .dashboard-section-heading h2, .monthly-performance-section > h2 { font-size: 35px; }
  .dashboard-section-description { font-size: 13px; }
  .operating-hours-field { grid-template-columns: 1fr 70px; padding: 13px; gap: 4px 10px; }
  .bill-list-controls { align-items: start; }
  .bill-history-controls { align-items: stretch; }
  .bill-history-search { width: 100%; }
  .kh-tabs { top: 66px; }
  .knowledge-hub-workspace { --kh-pad: 19px; }
  .kh-header { align-items: center; flex-wrap: wrap; }
  .kh-h1 { font-size: 49px; }
  .kh-tabs { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .kh-tabs button { padding: 11px 5px; font-size: 11px; }
  .login-page { min-height: calc(100svh - 50px); padding: 12px; }
  .auth-aside { min-height: 152px; }
  .auth-aside-inner p { font-size: 30px; margin-top: 18px; }
  .login-card { padding: 28px 24px 36px; }
  .auth-brand { margin-bottom: 28px; }
  .auth-title { font-size: 39px; }
  .correction-modal { padding: 20px; }
  .correction-modal-actions { bottom: -20px; }
}
@media (max-width: 360px) {
  .dashboard-brand { font-size: 19px; }
  .dashboard-brand sup { display: none; }
  .header-login-link { min-height: 37px; padding: 9px 12px; }
  .home-hero h1 { font-size: 58px; }
  .home-hero-actions { display: grid; justify-items: start; }
  .hero-art { height: 340px; }
  .hero-visual { top: 22%; }
  .hero-visual-title { font-size: 19px; }
  .hero-chart { height: 90px; }
  .hero-float-card { bottom: 10%; transform: rotate(2deg) scale(.72); }
  .home-section-heading h2 { font-size: 38px; }
  .auth-aside-inner { padding: 20px; }
  .login-card { padding: 26px 20px 34px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Home after removing the illustration: retain the existing introduction at its natural height. */
.public-home-page .home-hero { min-height: 0; grid-template-columns: minmax(0,1fr); gap: 0; padding: clamp(40px,4vw,64px) 0 clamp(24px,2.5vw,36px); }
.public-home-page .home-features { margin-top: clamp(28px,3vw,44px); }