@import url('/tokens.css');

* {
  box-sizing:border-box
}
body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:Arial,Helvetica,sans-serif;
  font-size:14px;
  line-height:1.5
}
button,input,textarea,select {
  font:inherit
}
button,a,input,select,textarea {
   -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  cursor:wait;
  opacity:.55
}
a {
  color:inherit;
  text-underline-offset:4px
}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:2px solid #5e7463;
  outline-offset:4px
}
input:focus,textarea:focus,select:focus {
  outline:2px solid #718273;
  outline-offset:1px
}
svg {
  width:19px;
  height:19px;
  flex-shrink:0;
  stroke:currentColor;
  fill:none;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round
}
h1,h2,h3,p {
  margin-top:0
}
h1 {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  letter-spacing:-1.8px;
  font-size:44px;
  line-height:1.13;
  margin-bottom:12px
}
h2 {
  font-size:21px;
  letter-spacing:-.6px;
  font-weight:500;
  margin-bottom:7px
}
h3 {
  font-size:15px;
  font-weight:500;
  margin-bottom:5px
}
.muted {
  color:var(--muted)
}
.eyebrow {
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:600
}
.small {
  font-size:12px
}
.quiet {
  color:var(--muted);
  font-size:12px
}
.initial-loading {
  height:100vh;
  display:grid;
  place-content:center;
  text-align:center;
  gap:20px
}
.brand-mark {
  font-family:Georgia,serif;
  font-size:26px;
  letter-spacing:-3px;
  border:1px solid var(--line);
  width:49px;
  height:49px;
  display:grid;
  place-items:center;
  border-radius:50%
}
.app-shell {
  min-height:100vh
}
.sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:238px;
  border-right:1px solid var(--line);
  background:var(--paper);
  padding:32px 24px;
  display:flex;
  flex-direction:column;
  z-index:5
}
.brand {
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:55px
}
.brand-name {
  font-size:11px;
  letter-spacing:1.6px;
  line-height:1.8;
  font-weight:600
}
.project-tag {
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--muted);
  margin:0 13px 14px
}
.nav {
  display:flex;
  flex-direction:column;
  gap:5px
}
.nav-link {
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:13px 15px;
  border:0;
  border-radius:6px;
  background:none;
  color:var(--muted);
  text-align:left;
  font-size:12px
}
.nav-link.active {
  background:#e8e8e0;
  color:var(--ink)
}
.nav-link:hover {
  background:#ecece6
}
.nav-link .nav-index {
  margin-left:auto;
  font-size:9px;
  opacity:.5
}
.sidebar-note {
  margin-top:auto;
  padding:25px 12px;
  border-bottom:1px solid var(--line);
  margin-bottom:22px
}
.sidebar-note p {
  font-family:Georgia,serif;
  font-size:21px;
  line-height:1.4;
  margin:10px 0;
  color:#666b60
}
.profile {
  display:flex;
  align-items:center;
  gap:10px;
  background:none;
  border:0;
  text-align:left;
  padding:0;
  width:100%
}
.avatar {
  width:36px;
  height:36px;
  border-radius:50%;
  background:#e2e3d8;
  display:grid;
  place-items:center;
  font-family:Georgia,serif
}
.profile span:last-child {
  margin-left:auto
}
.main {
  margin-left:238px;
  padding:0 48px 50px;
  max-width:1650px
}
.topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:86px;
  border-bottom:1px solid var(--line);
  font-size:11px;
  color:var(--muted);
  margin-bottom:36px
}
.topbar .location {
  display:flex;
  align-items:center;
  gap:8px
}
.live-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--olive);
  display:inline-block
}
.topbar-actions {
  display:flex;
  align-items:center;
  gap:18px
}
.text-button {
  background:none;
  border:0;
  padding:5px;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px
}
.text-button:hover {
  color:var(--ink)
}
.page-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:30px
}
.page-head .eyebrow {
  margin-bottom:14px;
  color:var(--olive)
}
.page-head p {
  margin-bottom:0;
  color:var(--muted);
  max-width:630px
}
.head-actions {
  display:flex;
  gap:9px;
  flex-shrink:0
}
.btn {
  border:1px solid var(--line);
  background:var(--white);
  color:var(--ink);
  border-radius:5px;
  padding:11px 16px;
  font-size:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px
}
.btn:hover {
  background:#eeeee7
}
.btn.primary {
  color:#fff;
  background:var(--ink);
  border-color:var(--ink)
}
.btn.primary:hover {
  background:#44483e
}
.btn.danger {
  color:var(--danger);
  border-color:#dfc9c3
}
.btn.small {
  font-size:11px;
  padding:6px 10px;
  min-height:32px
}
.icon-btn {
  display:inline-grid;
  place-items:center;
  background:none;
  border:1px solid transparent;
  border-radius:4px;
  width:32px;
  height:32px;
  color:var(--muted)
}
.icon-btn:hover {
  border-color:var(--line);
  color:var(--ink)
}
.icon-btn svg {
  width:15px;
  height:15px
}
.panel {
  background:var(--white);
  border:1px solid var(--line);
  border-radius:7px
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:32px 0 16px;
  gap:15px
}
.section-heading p {
  margin:0
}
.section-heading h2 {
  margin:0
}
.metrics {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px
}
.metric {
  padding:24px 23px;
  min-height:135px
}
.metric-label {
  font-size:11px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:7px
}
.metric-value {
  font-family:Georgia,serif;
  font-size:31px;
  letter-spacing:-1px;
  margin:14px 0 6px;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere
}
.metric-value.unset {
  font-family:Arial,sans-serif;
  font-size:21px;
  letter-spacing:-.6px
}
.metric-foot {
  font-size:10px;
  color:var(--muted)
}
.metric.dark {
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper)
}
.metric.dark .metric-label,.metric.dark .metric-foot {
  color:#c3c6bb
}
.sub-metrics {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:14px;
  gap:12px
}
.sub-metric {
  padding:13px 20px;
  border:1px solid var(--line);
  border-radius:5px
}
.sub-metric strong {
  display:block;
  margin-top:7px;
  font-size:18px;
  font-weight:400
}
.notice {
  border:1px solid #dedecf;
  background:#eeeee5;
  padding:13px 17px;
  border-radius:5px;
  display:flex;
  align-items:flex-start;
  gap:11px;
  font-size:12px;
  margin-top:18px;
  color:#676d5b
}
.notice svg {
  width:16px;
  height:16px;
  margin-top:2px
}
.notice p {
  margin:0
}
.notice.error {
  background:#f7eee8;
  color:var(--danger);
  border-color:#e9d1c6
}
.budget-tabs {
  display:flex;
  gap:25px;
  border-bottom:1px solid var(--line);
  margin:30px 0 20px
}
.tab {
  border:0;
  background:none;
  padding:0 0 13px;
  color:var(--muted);
  font-size:12px;
  border-bottom:2px solid transparent
}
.tab.active {
  border-color:var(--ink);
  color:var(--ink)
}
.filters {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:18px 0
}
.search {
  position:relative;
  flex:1;
  min-width:220px
}
.search svg {
  position:absolute;
  left:13px;
  top:12px;
  width:16px;
  height:16px;
  color:var(--muted)
}
.search input {
  padding-left:38px;
  width:100%
}
.filters select {
  max-width:170px;
  font-size:11px
}
.filters input,.filters select {
  height:42px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:5px;
  color:var(--ink)
}
.filter-summary {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:var(--muted);
  margin:5px 0 15px;
  gap:15px
}
.group {
  margin-bottom:10px;
  overflow:hidden
}
.group>summary {
  list-style:none;
  display:grid;
  grid-template-columns:45px minmax(0,1fr) 365px 20px;
  gap:15px;
  align-items:center;
  padding:23px;
  cursor:pointer
}
.group>summary::-webkit-details-marker {
  display:none
}
.group-num {
  font-family:Georgia,serif;
  color:#8e9582;
  font-size:24px
}
.group-title {
  font-size:14px;
  font-weight:500
}
.group-meta {
  font-size:10px;
  color:var(--muted);
  margin-top:3px
}
.group-money {
  text-align:right;
  font-size:13px;
  font-variant-numeric:tabular-nums
}
.group-money small {
  display:block;
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:4px
}
.group-money .small {
  font-size:11px
}
.chevron {
  transition:transform .2s
}
.group[open]>summary .chevron {
  transform:rotate(180deg)
}
.group-body {
  border-top:1px solid var(--line);
  padding:0 24px 12px;
  background:#fbfbf8
}
.room-group {
  padding-top:17px
}
.room-group>summary {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1.3px;
  color:var(--muted);
  padding-bottom:10px;
  cursor:pointer
}
.item-row {
  padding:17px 0;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:minmax(180px,1fr) 120px 100px auto;
  gap:15px;
  align-items:center
}
.item-title {
  font-weight:500;
  margin-bottom:5px
}
.item-description {
  font-size:11px;
  color:var(--muted);
  max-width:430px
}
.item-status {
  margin-top:8px;
  display:flex;
  gap:6px;
  flex-wrap:wrap
}
.badge {
  font-size:9px;
  padding:3px 7px;
  border:1px solid var(--line);
  border-radius:3px;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  background:#f6f6f1
}
.badge.olive {
  color:#5c6950;
  background:#eef0e7;
  border-color:#dce0d2
}
.badge.warn {
  color:#986749;
  background:#f5eee6;
  border-color:#eadccb
}
.badge.optional {
  border-style:dashed
}
.row-money {
  text-align:right;
  font-size:13px
}
.row-money small {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:4px
}
.row-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:3px
}
.scenario {
  padding:22px 24px;
  margin-top:22px;
  display:flex;
  justify-content:space-between;
  gap:25px;
  align-items:center;
  background:#e9eadd;
  border-color:#d8dbcb
}
.scenario p {
  margin:7px 0 0;
  font-size:12px;
  color:var(--muted);
  max-width:580px
}
.scenario strong {
  font-weight:500
}
.scenario-control {
  display:flex;
  align-items:center;
  gap:12px
}
.scenario-toggle {
  height:29px;
  width:49px;
  border:0;
  background:#b8bdab;
  border-radius:20px;
  position:relative;
  flex-shrink:0
}
.scenario-toggle:after {
  content:'';
  height:21px;
  width:21px;
  border-radius:50%;
  background:var(--white);
  position:absolute;
  top:4px;
  left:4px;
  transition:left .2s
}
.scenario-toggle[aria-checked=true] {
  background:var(--olive)
}
.scenario-toggle[aria-checked=true]:after {
  left:24px
}
.empty {
  padding:48px 25px;
  text-align:center;
  color:var(--muted)
}
.empty svg {
  width:32px;
  height:32px;
  margin-bottom:15px;
  color:#a3aa97
}
.empty h3 {
  color:var(--ink);
  font-family:Georgia,serif;
  font-size:23px;
  margin-bottom:8px
}
.empty p {
  font-size:12px;
  max-width:410px;
  margin:0 auto 18px
}
.two-columns {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:24px
}
.home-hero {
  padding:34px 36px;
  background:#e6e8dc;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:25px;
  min-height:255px;
  align-items:center
}
.home-hero h2 {
  font-family:Georgia,serif;
  font-size:35px;
  font-weight:400;
  line-height:1.18;
  max-width:340px;
  margin:15px 0
}
.home-hero p {
  font-size:12px;
  color:#707965;
  max-width:310px
}
.house-art {
  width:100%;
  height:195px;
  stroke:#6f795f;
  stroke-width:.8;
  fill:none
}
.progress-bar {
  height:5px;
  background:#e8e9e1;
  border-radius:3px;
  overflow:hidden;
  margin:14px 0
}
.progress-fill {
  background:var(--olive);
  height:100%;
  width:0
}
.compact-panel {
  padding:25px
}
.compact-list {
  padding:18px 0;
  border-bottom:1px solid var(--line);
  display:flex;
  gap:12px;
  align-items:flex-start
}
.compact-list:last-child {
  border-bottom:0
}
.compact-list p {
  margin:4px 0 0;
  font-size:11px;
  color:var(--muted)
}
.compact-list .icon-wrap {
  color:var(--olive);
  padding-top:2px
}
.date-box {
  width:40px;
  flex-shrink:0;
  font-family:Georgia,serif;
  font-size:22px;
  text-align:center
}
.date-box small {
  font-family:Arial,sans-serif;
  display:block;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted)
}
.link-card {
  padding:23px;
  display:flex;
  gap:18px;
  align-items:center;
  cursor:pointer;
  text-align:left;
  color:var(--ink);
  width:100%
}
.link-card>svg:last-child {
  margin-left:auto
}
.room-tabs {
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding:4px 0 15px;
  margin:22px 0 10px
}
.room-tab {
  white-space:nowrap;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--white);
  font-size:11px;
  padding:8px 15px;
  color:var(--muted)
}
.room-tab.active {
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink)
}
.purchase-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:17px
}
.purchase-card {
  overflow:hidden;
  display:flex;
  flex-direction:column
}
.purchase-visual {
  height:120px;
  background:#edece5;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden
}
.purchase-visual .product-letter {
  font-family:Georgia,serif;
  font-size:52px;
  color:#b1b5a4;
  font-style:italic
}
.purchase-visual svg {
  width:48px;
  height:48px;
  stroke-width:1;
  color:#989e89
}
.purchase-visual img {
  width:100%;
  height:100%;
  object-fit:cover
}
.purchase-visual .badge {
  position:absolute;
  left:13px;
  bottom:12px;
  background:var(--paper)
}
.purchase-body {
  padding:21px;
  display:flex;
  flex-direction:column;
  flex:1
}
.purchase-body h3 {
  font-size:15px;
  line-height:1.4
}
.purchase-body .quiet {
  margin-bottom:15px
}
.purchase-bottom {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-top:auto;
  padding-top:18px;
  gap:10px
}
.purchase-price {
  font-family:Georgia,serif;
  font-size:21px
}
.purchase-price.unset {
  font-family:Arial,sans-serif;
  font-size:12px;
  color:var(--muted)
}
.purchase-link {
  font-size:10px;
  color:var(--muted);
  display:flex;
  gap:5px;
  align-items:center
}
.calendar-panel {
  padding:25px
}
.calendar-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px
}
.calendar-toolbar h2 {
  font-family:Georgia,serif;
  font-size:26px;
  text-transform:capitalize;
  margin:0
}
.calendar-grid {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:4px
}
.weekday {
  text-align:center;
  text-transform:uppercase;
  font-size:9px;
  letter-spacing:1px;
  color:var(--muted);
  padding:10px
}
.calendar-day {
  border:1px solid transparent;
  background:#f7f7f3;
  min-height:85px;
  padding:9px;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:5px;
  border-radius:4px;
  overflow:hidden
}
.calendar-day.outside {
  background:none;
  color:#c2c5b9
}
.calendar-day.today {
  border-color:var(--olive)
}
.calendar-day.selected {
  background:#e3e7d8
}
.calendar-number {
  font-size:11px
}
.event-chip {
  font-size:9px;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  background:#e5e8db;
  border-radius:2px;
  padding:3px;
  color:#5c6550;
  max-width:100%
}
.event-chip.planned {
  background:transparent;
  border:1px dashed #b8beac
}
.task-list {
  display:grid;
  gap:10px
}
.task-card {
  padding:20px;
  display:flex;
  align-items:flex-start;
  gap:16px
}
.task-card .task-content {
  flex:1
}
.task-card h3 {
  margin:2px 0 8px
}
.task-card p {
  margin:7px 0 0;
  font-size:11px;
  color:var(--muted)
}
.task-dates {
  display:flex;
  gap:15px;
  margin:12px 0 0;
  flex-wrap:wrap;
  font-size:10px
}
.task-dates span {
  display:block
}
.task-dates strong {
  font-weight:500;
  display:block;
  font-size:12px;
  color:var(--ink);
  margin-top:3px
}
.timeline {
  max-width:900px
}
.note-card {
  padding:25px;
  margin-bottom:15px;
  position:relative
}
.note-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px
}
.note-meta {
  font-size:10px;
  color:var(--muted);
  display:flex;
  gap:9px;
  align-items:center;
  flex-wrap:wrap
}
.note-card h3 {
  font-family:Georgia,serif;
  font-size:25px;
  margin:15px 0
}
.note-detail {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin:15px 0
}
.note-detail p {
  font-size:12px;
  margin:5px 0 0;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.audit-row {
  padding:13px 0;
  border-bottom:1px solid var(--line);
  font-size:12px
}
.audit-row p {
  font-size:11px;
  margin:4px 0 0;
  color:var(--muted)
}
.audit-date {
  font-size:10px;
  color:var(--muted)
}
.payment-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px
}
.payment-entry {
  display:flex;
  justify-content:space-between;
  gap:15px;
  border-bottom:1px solid var(--line);
  padding:17px 0
}
.payment-entry:last-child {
  border-bottom:0
}
.payment-entry p {
  font-size:11px;
  color:var(--muted);
  margin:5px 0
}
.payment-entry .payment-amount {
  text-align:right;
  white-space:nowrap
}
.payment-entry strong {
  font-size:16px;
  font-weight:400
}
.danger-text {
  color:var(--danger)
}
.downloads {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.export-panel {
  padding:25px
}
.export-panel p {
  color:var(--muted);
  font-size:12px;
  margin:8px 0 20px
}
.toast {
  position:fixed;
  bottom:25px;
  right:25px;
  background:var(--ink);
  color:var(--paper);
  padding:14px 20px;
  border-radius:5px;
  z-index:100;
  max-width:430px;
  font-size:12px;
  box-shadow:0 8px 30px #0002;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:all .2s
}
.toast.visible {
  opacity:1;
  transform:none
}
dialog {
  border:1px solid var(--line);
  border-radius:9px;
  padding:0;
  width:min(780px,calc(100vw - 30px));
  max-height:90dvh;
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 20px 90px #0002
}
dialog::backdrop {
  background:#20231f66;
  backdrop-filter:blur(3px)
}
.modal-head {
  padding:25px 28px 20px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:15px
}
.modal-head h2 {
  font-family:Georgia,serif;
  font-size:29px;
  font-weight:400;
  margin:0
}
.modal-head .eyebrow {
  margin-bottom:7px;
  color:var(--olive)
}
.modal-body {
  padding:24px 28px
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px 20px
}
.form-field {
  display:block;
  font-size:11px;
  color:var(--muted)
}
.form-field input,.form-field select,.form-field textarea {
  display:block;
  width:100%;
  margin-top:7px;
  border:1px solid var(--line);
  background:var(--white);
  padding:11px 12px;
  border-radius:4px;
  color:var(--ink);
  min-width:0
}
.form-field textarea {
  resize:vertical;
  min-height:82px
}
.form-field small {
  display:block;
  margin-top:5px;
  font-size:10px
}
.form-field.wide {
  grid-column:1/-1
}
.form-section {
  grid-column:1/-1;
  border-top:1px solid var(--line);
  padding-top:18px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--olive);
  margin-top:5px
}
.form-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:20px 28px;
  border-top:1px solid var(--line);
  background:#eeeeE7;
  flex-wrap:wrap
}
.form-footer .actions {
  display:flex;
  gap:8px;
  margin-left:auto
}
.form-error {
  display:none;
  padding:12px 15px;
  background:#f6e9e2;
  border:1px solid #e7cec1;
  color:var(--danger);
  border-radius:4px;
  font-size:12px;
  margin-bottom:18px
}
.form-error.visible {
  display:block
}
.estimate-preview {
  grid-column:1/-1;
  padding:16px;
  background:#e9ecdf;
  border-radius:4px;
  font-size:12px;
  display:flex;
  justify-content:space-between;
  gap:15px
}
.check-field {
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:12px
}
.check-field input {
  width:17px;
  height:17px;
  accent-color:var(--olive);
  margin:2px 0 0
}
.readonly-field {
  padding:12px;
  background:#eeeee7;
  margin-top:6px;
  font-size:13px;
  color:var(--ink);
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.auth-page {
  min-height:100dvh;
  display:grid;
  grid-template-columns:1.05fr 1fr
}
.auth-art {
  padding:65px 70px;
  background:#e5e7d9;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden
}
.auth-art .brand {
  margin-bottom:0
}
.auth-art h1 {
  font-size:65px;
  margin-top:auto;
  max-width:390px;
  line-height:1.05
}
.auth-art .house-art {
  height:260px;
  position:absolute;
  right:-55px;
  top:21%;
  width:440px;
  opacity:.7
}
.auth-art p {
  font-size:13px;
  color:#707862;
  max-width:320px;
  margin:10px 0 55px
}
.auth-art .eyebrow {
  margin-bottom:22px;
  color:#737b63
}
.auth-main {
  display:grid;
  place-content:center;
  padding:50px
}
.auth-form {
  width:min(380px,100%)
}
.auth-form h2 {
  font-family:Georgia,serif;
  font-size:37px;
  font-weight:400;
  letter-spacing:-1px;
  margin:12px 0
}
.auth-form>p {
  font-size:12px;
  color:var(--muted);
  margin:0 0 28px
}
.auth-form .form-field {
  margin-bottom:18px
}
.auth-form .btn {
  width:100%;
  margin-top:10px
}
.auth-foot {
  margin-top:28px;
  color:var(--muted);
  font-size:10px;
  line-height:1.7
}
.auth-form .eyebrow {
  color:var(--olive)
}
.loading-bar {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:2px;
  background:var(--olive);
  z-index:200;
  animation:loading 1s infinite;
  transform-origin:left
}
.offline-banner {
  margin:0 0 25px
}
footer.page-footer {
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-top:40px;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color:#a0a494
}
.only-mobile {
  display:none
}
.count-label {
  font-size:10px;
  color:var(--muted)
}
.busy {
  opacity:.65;
  pointer-events:none
}
.section-spaced {
  margin-top:25px
}
@keyframes loading {
  0% {
  transform:scaleX(.1)
}
50% {
  transform:scaleX(.7)
}
100% {
  transform:scaleX(1)
}

}

@media(min-width:1600px) {
  .main {
  padding-left:65px;
  padding-right:65px
}
.purchase-grid {
  grid-template-columns:repeat(4,minmax(0,1fr))
}

}

@media(max-width:1200px) {
  .sidebar {
  width:205px;
  padding:27px 17px
}
.main {
  margin-left:205px;
  padding:0 28px 35px
}
.group>summary {
  grid-template-columns:30px minmax(0,1fr) 310px 15px;
  gap:10px;
  padding:19px
}
.metric {
  padding:21px 17px
}
.metric-value {
  font-size:28px
}
.home-hero {
  padding:28px
}
.two-columns {
  grid-template-columns:1fr 1fr
}
.purchase-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.item-row {
  grid-template-columns:minmax(130px,1fr) 110px auto
}
.item-row>.row-money:nth-of-type(3) {
  display:none
}
.calendar-day {
  min-height:70px
}
.auth-art {
  padding:50px
}
.auth-art h1 {
  font-size:54px
}

}

@media(max-width:900px) {
  .metrics {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.sub-metrics {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.page-head {
  align-items:flex-start
}
.head-actions {
  flex-wrap:wrap;
  max-width:210px;
  justify-content:flex-end
}
.two-columns {
  grid-template-columns:1fr
}
.group>summary {
  grid-template-columns:28px minmax(0,1fr) 15px
}

.payment-grid {
  grid-template-columns:1fr
}
.auth-art {
  padding:35px
}
.auth-art h1 {
  font-size:45px
}
.auth-main {
  padding:35px
}
.calendar-day {
  min-height:75px
}
.filters select {
  flex:1;
  max-width:unset;
  min-width:100px
}

}

@media(max-width:640px) {
  body {
  font-size:13px
}
.sidebar {
  inset:auto 0 0;
  width:100%;
  height:70px;
  padding:0;
  background:#f9f9f3f5;
  border-right:0;
  border-top:1px solid var(--line);
  backdrop-filter:blur(12px)
}
.sidebar>.brand,.sidebar>.project-tag,.sidebar-note,.sidebar>.profile {
  display:none
}
.nav {
  flex-direction:row;
  height:100%;
  gap:0;
  justify-content:space-around
}
.nav-link {
  flex:1;
  flex-direction:column;
  gap:5px;
  justify-content:center;
  text-align:center;
  font-size:9px;
  letter-spacing:.2px;
  border-radius:0;
  padding:9px 3px;
  background:none!important
}
.nav-link.active {
  color:var(--olive)
}
.nav-link.active svg {
  stroke-width:2.2
}
.nav-index {
  display:none
}
.nav-link svg {
  width:20px;
  height:20px
}
.main {
  margin-left:0;
  padding:0 18px 95px
}
.topbar {
  height:65px;
  margin-bottom:27px
}
.topbar-actions {
  gap:8px
}
.topbar .date-label {
  display:none
}
.only-mobile {
  display:inline-flex
}
.topbar .location {
  font-size:10px;
  letter-spacing:1px
}
.topbar .location svg {
  width:15px;
  height:15px
}
.page-head {
  display:block;
  margin-bottom:24px
}
.page-head .eyebrow {
  font-size:9px;
  margin-bottom:11px
}
h1 {
  font-size:36px;
  letter-spacing:-1.3px
}
.page-head p {
  font-size:12px
}
.head-actions {
  max-width:none;
  justify-content:flex-start;
  margin-top:20px
}
.btn {
  padding:10px 14px
}
.metrics {
  gap:9px
}
.metric {
  padding:18px 14px;
  min-height:127px
}
.metric-label {
  font-size:10px
}
.metric-value {
  font-size:25px;
  margin-top:17px
}
.metric-value.unset {
  font-size:18px
}
.metric-foot {
  font-size:9px
}
.sub-metrics {
  gap:8px;
  margin-top:10px
}
.sub-metric {
  padding:13px 14px
}
.sub-metric strong {
  font-size:16px
}
.notice {
  font-size:11px;
  padding:13px
}
.budget-tabs {
  gap:22px;
  margin-top:24px
}
.filters {
  gap:7px
}
.search {
  flex-basis:100%
}
.filters select {
  font-size:10px;
  width:calc(50% - 4px);
  max-width:50%;
  flex:auto
}
.filter-summary {
  font-size:9px
}
.group>summary {
  padding:17px 14px;
  grid-template-columns:25px minmax(0,1fr) 12px;
  gap:8px
}
.group-title {
  font-size:12px
}
.group-num {
  font-size:22px
}
.group-meta {
  font-size:9px
}
.group-money {
  font-size:11px
}
.group-money small {
  font-size:8px
}
.group-money .small {
  font-size:9px
}
.group-body {
  padding:0 14px 10px
}
.item-row {
  display:grid;
  grid-template-columns:1fr 90px;
  gap:10px;
  padding:17px 0
}
.item-row>.row-money:nth-of-type(3) {
  display:block
}
.item-row>.row-money:nth-of-type(2) {
  grid-column:2;
  grid-row:1
}
.item-row>.row-money:nth-of-type(3) {
  grid-column:1;
  grid-row:2;
  text-align:left;
  font-size:11px
}
.row-money small {
  font-size:9px
}
.item-row>.row-actions {
  grid-column:2;
  grid-row:2
}
.item-description {
  font-size:10px
}
.badge {
  font-size:8px;
  padding:3px 5px
}
.scenario {
  padding:20px;
  display:block
}
.scenario-control {
  margin-top:17px;
  justify-content:space-between
}
.scenario p {
  font-size:11px
}
.home-hero {
  grid-template-columns:1fr .65fr;
  padding:24px 20px;
  gap:0;
  min-height:220px;
  overflow:hidden
}
.home-hero h2 {
  font-size:28px
}
.home-hero p {
  font-size:11px
}
.home-hero .house-art {
  width:160px;
  height:180px;
  margin-left:-10px
}
.home-hero .eyebrow {
  font-size:8px;
  letter-spacing:1.4px
}
.section-heading {
  margin:26px 0 14px
}
.section-heading h2 {
  font-size:19px
}
.compact-panel {
  padding:20px
}
.purchase-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px
}
.purchase-visual {
  height:95px
}
.purchase-body {
  padding:14px 12px
}
.purchase-body h3 {
  font-size:12px
}
.purchase-body .quiet {
  font-size:9px;
  margin-bottom:10px
}
.purchase-bottom {
  display:block;
  padding-top:12px
}
.purchase-bottom .btn {
  margin-top:12px;
  width:100%
}
.purchase-price {
  font-size:18px
}
.purchase-price.unset {
  font-size:10px
}
.purchase-link {
  font-size:9px;
  line-height:1.5
}
.room-tab {
  font-size:10px;
  padding:7px 12px
}
.calendar-panel {
  padding:16px 12px
}
.calendar-toolbar h2 {
  font-size:22px
}
.calendar-grid {
  gap:3px
}
.weekday {
  font-size:8px;
  padding:7px 2px;
  letter-spacing:0
}
.calendar-day {
  min-height:62px;
  padding:6px 3px
}
.calendar-number {
  font-size:10px
}
.event-chip {
  font-size:7px;
  padding:2px;
  white-space:nowrap
}
.task-card {
  padding:16px;
  gap:10px
}
.task-card h3 {
  font-size:13px
}
.task-dates {
  font-size:9px
}
.task-dates strong {
  font-size:11px
}
.note-card {
  padding:20px
}
.note-card h3 {
  font-size:23px
}
.note-detail {
  grid-template-columns:1fr;
  gap:15px
}
.note-detail p {
  font-size:11px
}
.payment-entry {
  font-size:12px
}
.payment-entry strong {
  font-size:14px
}
.payment-entry p {
  font-size:10px
}
.toast {
  bottom:85px;
  right:15px;
  left:15px;
  max-width:none
}
.modal-head {
  padding:20px
}
.modal-head h2 {
  font-size:25px
}
.modal-body {
  padding:20px
}
.form-grid {
  gap:16px 12px
}
.form-field {
  font-size:10px
}
.form-field input,.form-field select,.form-field textarea {
  padding:10px;
  font-size:14px
}
.form-footer {
  padding:17px 20px
}
.auth-page {
  grid-template-columns:1fr
}
.auth-art {
  min-height:230px;
  padding:25px;
  max-height:280px
}
.auth-art .brand {
  margin:0
}
.auth-art .brand-mark {
  width:36px;
  height:36px;
  font-size:23px
}
.auth-art .brand-name {
  font-size:9px
}
.auth-art .house-art {
  width:230px;
  right:-35px;
  top:40px;
  height:210px
}
.auth-art h1 {
  font-size:34px;
  margin:28px 0 9px;
  max-width:200px;
  position:relative
}
.auth-art p {
  font-size:10px;
  margin:0;
  max-width:185px;
  position:relative
}
.auth-art>.eyebrow {
  display:none
}
.auth-main {
  padding:35px 25px 45px;
  display:block
}
.auth-form {
  width:100%;
  max-width:400px;
  margin:auto
}
.auth-form h2 {
  font-size:31px
}
.auth-form .eyebrow {
  font-size:9px
}
.form-grid .form-field.mobile-wide {
  grid-column:1/-1
}
.downloads .btn {
  font-size:11px
}
footer.page-footer {
  font-size:8px;
  letter-spacing:.6px
}
.export-panel {
  padding:20px
}

}

.readonly-set {
  border:0;
  padding:0;
  margin:0;
  min-width:0
}
.readonly-set input,.readonly-set select,.readonly-set textarea {
  opacity:1;
  -webkit-text-fill-color:var(--ink);
  color:var(--ink)
}

@media(prefers-reduced-motion:reduce) {
  * {
  animation:none!important;
  transition:none!important
}

}


.group-finance { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
@media(max-width:900px) {
  .group-finance { grid-column:2; grid-row:2; gap:15px; }
  .group>summary>.chevron { grid-column:3; grid-row:1; }
  .group-finance .group-money { text-align:left; display:block; }
}
@media(max-width:640px) {
  .group-finance { grid-column:1/-1; grid-row:2; padding-top:10px; border-top:1px solid var(--line); }
  .group-finance .group-money { font-size:11px; }
}

/* V2 extends existing panels and typography. */
.category-actions, .alternative-actions { display:flex; gap:8px; flex-wrap:wrap; padding-top:14px; }
.category-actions { justify-content:space-between; border-top:1px solid var(--line); margin-top:14px; }
.alternatives-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:16px 0; }
.alternative-card { border:1px solid var(--line); border-radius:12px; overflow:hidden; min-width:0; }
.alternative-photo { height:110px; background:var(--paper); display:grid; place-items:center; overflow:hidden; }
.alternative-photo img { width:100%; height:110px; min-height:0; object-fit:contain; }
.alternative-photo svg { width:30px; height:30px; fill:none; stroke:var(--olive); stroke-width:1.4; }
.alternative-body { padding:14px; overflow-wrap:anywhere; }
.alternative-body h3 { margin:8px 0; font-size:16px; }
.alternative-body p { margin:8px 0; font-size:12px; line-height:1.5; }
.scene-list { padding:20px 0; }
.scene-list .compact-list, .category-list .compact-list { justify-content:space-between; }
.scene-list p { white-space:pre-line; }
.review-list { padding-left:20px; line-height:1.7; overflow-wrap:anywhere; }
#economic-confirm { max-width:580px; }
.form-footer { flex-wrap:wrap; }
.btn, .text-button { white-space:normal; }
:focus-visible { outline:2px solid var(--olive); outline-offset:3px; }
@media(max-width:600px) { .alternatives-grid { grid-template-columns:1fr; } .category-actions { justify-content:flex-start; } #economic-confirm { max-width:calc(100vw - 24px); } }