:root {--positive: #398467; --negative: #bb5b5c;}
* {box-sizing: border-box;}
html[data-theme="dark"] {--positive: #78bb9e; --negative: #e29999;}
body {margin: 0px; background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased;}
button, input, select {font: inherit;}
button, a, input, select {-webkit-tap-highlight-color: transparent;}
a {color: inherit; text-decoration: none;}
button {cursor: pointer;}
button:disabled {cursor: wait; opacity: 0.5;}
button:focus-visible, a:focus-visible {outline: 2px solid var(--gold); outline-offset: 4px;}
.shell {display: flex; width: 100%; min-height: 100vh; margin: 0px; overflow: hidden;}
.sidebar {width: 116px; flex: 0 0 auto; border-right: 1px solid var(--border); display: flex; align-items: center; flex-direction: column; padding: 30px 10px; position: sticky; top: 0px; height: 100vh;}
.brand {font: 42px / 1 Georgia, serif; position: relative;}
.brand span {color: var(--gold); font-size: 9px; position: absolute; right: -7px; top: 3px;}
.sidebar-rule {width: 28px; height: 1px; background: var(--border); margin: 30px 0px;}
.sidebar nav {display: flex; flex-direction: column; gap: 22px; width: 100%; align-items: center;}
.nav-item {display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; padding: 12px 8px; border-radius: 13px; width: 96px;}
.nav-item:hover {background: var(--soft); color: var(--text);}
.nav-item.active {background: var(--nav); color: var(--text);}
.icon {width: 23px; height: 23px;}
.icon svg {width: 100%; height: 100%;}
.sidebar-bottom {margin-top: auto; display: flex; align-items: center; flex-direction: column;}
.icon-button {background: none; border: 0px; color: var(--text); font-size: 23px; width: 40px; height: 40px; border-radius: 10px;}
.icon-button:hover {background: var(--soft);}
.avatar {width: 31px; height: 31px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold); border-radius: 50%; font-size: 12px; font-weight: 600;}
main {flex: 1 1 0%; min-width: 0px; padding: 42px 44px 24px;}
.page-header {display: flex; justify-content: space-between; align-items: center; gap: 20px;}
.eyebrow {font-size: 10px; letter-spacing: 2px; font-weight: 650; color: var(--gold); margin-bottom: 11px;}
h1 {font-size: 36px; letter-spacing: -1.2px; font-weight: 600; line-height: 1.15; margin: 0px 0px 10px;}
h2 {font-size: 20px; letter-spacing: -0.5px; font-weight: 550; margin: 0px;}
h3 {font-weight: 550;}
p {color: var(--muted); line-height: 1.6; margin: 0px;}
.dot {padding: 0px 10px; color: var(--gold);}
.button {background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 9px; padding: 11px 16px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; font-size: 12px; font-weight: 550; white-space: nowrap; min-height: 40px;}
.button:hover {background: var(--soft);}
.primary {background: var(--text); color: var(--surface); border-color: var(--text);}
.primary:hover {opacity: 0.85; background: var(--text);}
.primary span {font-size: 20px; line-height: 1;}
.connection-strip {display: flex; align-items: center; flex-wrap: wrap; gap: 26px; border-bottom: 1px solid var(--border);}
.connection-strip > div {display: flex; align-items: center; gap: 9px;}
.status-dot {width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: var(--muted); flex: 0 0 auto;}
.status-dot.configured {background: var(--positive);}
.last-sync {margin-left: auto; color: var(--muted);}
.muted {color: var(--muted); font-weight: 400;}
.notice {display: flex; align-items: center; gap: 12px; padding: 15px 18px; background: var(--gold-soft); border: 1px solid color-mix(in srgb,var(--gold) 15%,transparent); border-radius: 10px; font-size: 11px; line-height: 1.5; margin-bottom: 12px;}
.notice a {margin-left: auto; color: var(--gold); white-space: nowrap; font-weight: 550;}
.notice-icon {width: 18px; height: 18px; border: 1px solid var(--gold); color: var(--gold); border-radius: 50%; text-align: center; flex: 0 0 auto; font-family: Georgia;}
.section-title {display: flex; justify-content: space-between; align-items: center; margin: 31px 0px 17px; gap: 14px;}
.section-title p {margin-top: 7px;}
.period-tag {border: 1px solid var(--border); padding: 7px 11px; border-radius: 6px; color: var(--muted); font-size: 10px; white-space: nowrap;}
.metrics-grid {display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 16px;}
.metric-card {border: 1px solid var(--border); border-radius: 14px; padding: 20px 21px 16px; box-shadow: var(--shadow); min-height: 166px; background: var(--surface);}
.metric-top {display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 550; min-height: 25px;}
.metric-icon {background: var(--soft); color: var(--gold); display: grid; place-items: center; font-size: 17px; flex: 0 0 auto;}
.metric-value {font-size: 30px; font-weight: 550; letter-spacing: -1px; line-height: 1.4; margin: 13px 0px 7px; font-variant-numeric: tabular-nums;}
.metric-comparison {display: flex; align-items: center; gap: 8px; font-size: 10px; margin-bottom: 17px;}
.change {border-radius: 4px; padding: 3px 5px; background: var(--soft); font-weight: 600;}
.good {color: var(--positive); background: color-mix(in srgb,var(--positive) 8%,transparent);}
.bad {color: var(--negative); background: color-mix(in srgb,var(--negative) 8%,transparent);}
.neutral, .delta {color: var(--muted);}
.metric-baseline {padding-top: 12px; border-top: 1px solid var(--border); font-size: 10px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px;}
.metric-baseline strong {color: var(--text); font-weight: 500;}
.profit-card {background: var(--gold-soft); border-color: color-mix(in srgb,var(--gold) 26%,var(--border));}
.profit-card .metric-icon {background: color-mix(in srgb,var(--gold) 10%,transparent);}
.incomplete {font-size: 9px; color: var(--gold); display: block; margin-top: 8px;}
.footnote {font-size: 10px; line-height: 1.5; margin-top: 11px;}
.chart-card {margin-top: 32px; margin-bottom:24px; padding: 27px 26px 18px; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow);}
.chart-header {display: flex; align-items: center; justify-content: space-between; gap: 20px;}
.chart-header .eyebrow {font-size: 9px; margin-bottom: 7px;}
.segmented {display: flex; border: 1px solid var(--border); background: var(--soft); padding: 3px; border-radius: 7px;}
.segmented button {border: 0px; background: none; color: var(--muted); padding: 7px 10px; font-size: 10px; border-radius: 5px; white-space: nowrap;}
.segmented button.selected {color: var(--text); background: var(--surface); box-shadow: rgba(0, 0, 0, 0.027) 0px 1px 5px;}
.chart-legend {display: flex; align-items: center; gap: 20px; margin: 24px 0px 12px; flex-wrap: wrap;}
.chart-legend button {border: 0px; background: none; color: var(--text); font-size: 10px; display: flex; align-items: center; gap: 7px; padding: 0px;}
.chart-legend button.off {opacity: 0.4;}
.chart-legend i {width: 6px; height: 6px; border-radius: 50%;}
.blue {background: rgb(49, 95, 155);}
.gold {background: rgb(192, 160, 94);}
.green {background: rgb(74, 147, 117);}
.chart-legend > span {font-size: 9px; color: var(--muted); margin-left: auto;}
.chart-container {height: 270px; position: relative;}
.chart-empty {position: absolute; inset: 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--surface);}
.chart-empty[hidden] {display: none;}
.empty-chart-icon {font-size: 30px; color: var(--gold); background: var(--gold-soft); width: 56px; height: 56px; display: grid; place-items: center; border-radius: 15px;}
.chart-empty h3 {font-size: 15px; margin: 16px 0px 7px;}
.chart-empty p {font-size: 11px;}
.text-link {font-size: 11px; color: var(--gold); margin-top: 18px;}
.chart-caption {font-size: 9px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 15px; display: flex; gap: 8px; align-items: center;}
.chart-dates {display: flex; align-items: end; gap: 12px; margin-top: 16px;}
.chart-dates[hidden] {display: none;}
footer {display: flex; justify-content: space-between; gap: 15px; margin-top: 32px; padding-top: 21px; border-top: 1px solid var(--border); color: var(--muted);}
.footer-dot {color: var(--gold); padding: 0px 6px;}
label {display: block; color: var(--text); font-size: 11px; font-weight: 500; margin: 18px 0px;}
input, select {width: 100%; min-width: 0px; border: 1px solid var(--border); color: var(--text); background: var(--surface); padding: 12px 13px; border-radius: 8px; display: block; margin-top: 8px; outline: none; font-size: 12px;}
input:focus, select:focus {border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb,var(--gold) 8%,transparent);}
input::placeholder {color: var(--muted);}
.field-help {font-size: 10px; margin: 12px 0px 17px;}
.settings-grid {display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 20px;}
.settings-card {padding: 26px; border: 1px solid var(--border); border-radius: 14px; margin-bottom: 22px; box-shadow: var(--shadow);}
.settings-card > p {margin-top: 8px;}
.settings-heading {display: flex; align-items: center; gap: 12px;}
.settings-heading h2 {font-size: 18px;}
.settings-heading p {margin-top: 5px;}
.integration-mark {display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--soft); font-size: 24px; font-family: Georgia; color: var(--gold); flex: 0 0 auto;}
.integration-mark.meta {font-size: 30px; color: rgb(65, 130, 192);}
.badge {margin-left: auto; font-size: 9px; color: var(--muted); background: var(--soft); padding: 6px 8px; border-radius: 5px;}
.inline-form {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px;}
.inline-form input {flex: 1 1 0%; min-width: 120px; margin: 0px;}
.empty-small {padding: 27px; background: var(--soft); border-radius: 9px; margin-top: 20px; text-align: center; font-size: 11px; color: var(--muted);}
.mapping-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 0px 20px;}
.account-row {display: flex; align-items: center; gap: 12px;}
.account-row input {width: 16px; margin: 0px;}
.account-row span {margin-left: auto; color: var(--muted); font-size: 10px;}
.source-row {display: flex; justify-content: space-between; font-size: 11px; gap: 10px; margin: 20px 0px;}
.source-row span {color: var(--muted);}
.error-text {color: var(--negative); font-size: 10px; margin-bottom: 12px;}
.table-wrap {overflow-x: auto; margin-top: 20px;}
table {border-collapse: collapse; width: 100%; font-size: 11px; white-space: nowrap;}
th {text-align: left; font-weight: 500; color: var(--muted); font-size: 10px; padding: 13px 15px; background: var(--soft);}
td {padding: 14px 15px; border-bottom: 1px solid var(--border);}
.table-empty {text-align: center; padding: 30px; color: var(--muted);}
.range-form {display: flex; gap: 14px; align-items: end; margin-bottom: 25px;}
.range-form label {margin: 0px;}
.range-form input {min-width: 170px;}
.flash {background: var(--nav); border: 1px solid var(--border); border-radius: 9px; padding: 15px 18px; margin-bottom: 20px; font-size: 12px; display: flex; justify-content: space-between; align-items: center;}
.dismiss {border: 0px; background: none; color: var(--muted); font-size: 20px;}
.login-shell {max-width: 900px; min-height: 680px; margin: 60px auto;}
.login-shell main {padding: 35px 45px 24px; display: flex; flex-direction: column;}
.login-top {display: flex; justify-content: space-between; align-items: center;}
.login-brand {font: 23px Georgia; letter-spacing: 4px;}
.login-brand span {color: var(--gold); font-size: 7px; vertical-align: top; margin-left: 3px;}
.login-box {width:100%; max-width:460px; margin:65px auto 60px;}
.login-box h1 {font-size: 30px;}
.login-box > p {margin-bottom: 30px;}
.login-box label {margin: 23px 0px;}
.login-box input {min-height:56px; padding:16px 18px; font-size:16px;}
.full {width: 100%; justify-content: space-between; margin-top: 6px;}
.login-note {font-size: 10px; color: var(--muted); text-align: center; margin-top: 27px;}
.login-shell footer {margin-top: auto; flex-shrink: 0;}
@media (max-width: 1200px) {
  main {padding: 32px 27px 20px;}
  .sidebar {height: 100vh; width: 116px;}
  .metric-card {padding: 17px 15px;}
  .metric-top {font-size: 10px;}
  .metric-value {font-size: 26px;}
  .settings-heading {flex-wrap: wrap;}
  .badge {margin-left: 0px;}
}
@media (max-width: 950px) {
  .metrics-grid {grid-template-columns: repeat(2, minmax(0px, 1fr));}
  .chart-header {align-items: start; flex-direction: column;}
  .settings-grid {grid-template-columns: 1fr;}
  .settings-card {margin-bottom: 18px;}
  .settings-grid {gap: 0px;}
  .connection-strip {gap: 15px;}
  .last-sync {width: 100%; margin: 0px;}
  .mapping-grid {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 600px) {
  .shell {margin: 0px; border: 0px; border-radius: 0px; min-height: 100vh;}
  .sidebar {position: fixed; top: auto; bottom: 0px; width: 100%; z-index: 10; flex-direction: row; background: var(--surface); border-right: 0px; border-top: 1px solid var(--border);}
  .brand {font-size: 29px; margin-right: 10px;}
  .sidebar-rule, .avatar, .sidebar-bottom form {display: none;}
  .sidebar nav {flex-direction: row; gap: 0px; justify-content: space-around;}
  .nav-item {padding: 5px; gap: 4px; width: 64px;}
  .nav-label {font-size: 8px;}
  .icon {width: 20px; height: 20px;}
  .sidebar-bottom {margin: 0px;}
  .sidebar .icon-button {font-size: 22px; width: 32px;}
  main {padding: 27px 17px 90px;}
  h1 {font-size: 30px;}
  .eyebrow {font-size: 8px;}
  .page-header {gap: 8px; margin-bottom: 20px;}
  .page-header .button {font-size: 10px; padding: 10px;}
  .page-header .period-tag {display: none;}
  .connection-strip {font-size: 9px; gap: 15px;}
  .connection-strip > div {gap: 5px;}
  .notice {font-size: 10px; padding: 12px; flex-wrap: wrap;}
  .notice a {margin-left: 30px;}
  .notice > div {flex: 1 1 0%;}
  .section-title {margin-top: 26px;}
  .section-title h2 {font-size: 17px;}
  .section-title .period-tag {font-size: 8px;}
  .metrics-grid {gap: 10px;}
  .metric-card {padding: 14px 12px; min-height: 156px;}
  .metric-top {align-items: start;}
  .metric-icon {font-size: 13px;}
  .metric-value {font-size: 25px; margin-top: 12px;}
  .metric-comparison {font-size: 8px; gap: 4px;}
  .metric-baseline {font-size: 8px;}
  .incomplete {font-size: 8px;}
  .footnote {font-size: 8px;}
  .chart-card {padding: 20px 15px 15px; margin-top: 24px;}
  .chart-header h2 {font-size: 18px;}
  .chart-legend {gap: 13px;}
  .chart-legend button {font-size: 9px;}
  .chart-legend > span {display: none;}
  .chart-container {height: 240px;}
  .chart-caption {font-size: 8px; line-height: 1.5;}
  .segmented {width: 100%;}
  .segmented button {flex: 1 1 0%; padding: 8px 6px;}
  .settings-card {padding: 20px 16px;}
  .mapping-grid {grid-template-columns: 1fr;}
  .account-row {flex-wrap: wrap;}
  .account-row span {width: 100%; margin-left: 28px;}
  .range-form {flex-wrap: wrap; gap: 10px;}
  .range-form label {flex: 1 1 0%;}
  .range-form input {min-width: 0px;}
  .range-form .button {width: 100%;}
  .chart-dates {flex-wrap: wrap;}
  .chart-dates label {flex: 1 1 0%; margin: 0px;}
  footer {font-size: 8px; gap: 8px; flex-wrap: wrap;}
  .login-shell {margin: 0px; min-height: 100vh;}
  .login-shell main {padding: 25px;}
  .login-box {margin-top: 70px;}
  .login-box h1 {font-size: 29px;}
}
@media (max-width: 340px) {
  .metrics-grid {grid-template-columns: 1fr;}
  .page-header {flex-wrap: wrap;}
}
.mobile-logout {display: none;}
@media (max-width: 600px) {
  .mobile-logout {display: block;}
}
.shell:not(.login-shell) main {padding-top: 20px;}
.page-header {margin-bottom: 14px;}
.page-header .eyebrow {flex-basis: 100%; margin-bottom: 0px; font-size: 9px;}
.page-header h1 {font-size: 28px; margin: 0px; letter-spacing: -0.8px;}
.connection-strip {padding-bottom: 12px; margin-bottom: 16px;}
@media (max-width: 600px) {
  .shell:not(.login-shell) main {padding-top: 16px;}
  .page-header h1 {font-size: 25px;}
  .page-header p {flex-basis: 100%; font-size: 9px;}
  .page-header .eyebrow {font-size: 7px; letter-spacing: 1.4px;}
  .connection-strip {padding-bottom: 10px; margin-bottom: 13px;}
}
@media (max-width: 600px) {
  .sidebar {display: grid; align-items: center; padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); height: calc(67px + env(safe-area-inset-bottom));}
  .sidebar nav, .sidebar-bottom {display: contents;}
  .sidebar .brand {margin: 0px; place-items: center; line-height: 1;}
  .sidebar .nav-item {width: 100%; height: 50px; min-width: 0px; padding: 6px 4px; gap: 5px; justify-content: center;}
  .sidebar .nav-label {line-height: 12px; white-space: nowrap;}
  .sidebar .icon {display: block; width: 20px; height: 20px;}
  .sidebar .theme-toggle {display: grid; place-items: center; width: 40px; height: 50px; line-height: 1; padding: 0px;}
  .shell:not(.login-shell) main {padding-bottom: calc(90px + env(safe-area-inset-bottom));}
}
.toast-region {position: fixed; top: 20px; right: 24px; z-index: 100; display: flex; flex-direction: column; gap: 10px; width: min(420px, -32px + 100vw); max-height: calc(100dvh - 110px); overflow-y: auto; pointer-events: none;}
.toast {display: flex; align-items: flex-start; gap: 12px; padding: 17px 18px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; box-shadow: rgba(16, 43, 75, 0.125) 0px 8px 32px; pointer-events: auto; animation: 0.18s ease-out 0s 1 normal none running toast-enter; transition: opacity 0.18s, transform 0.18s; flex: 0 0 auto;}
.toast-warning {background: var(--gold-soft); border-color: color-mix(in srgb,var(--gold) 25%,var(--border));}
.toast-content {flex: 1 1 0%; min-width: 0px; font-size: 12px; line-height: 1.55;}
.toast-content strong {font-size: 12px; font-weight: 600;}
.toast-content ul {margin: 8px 0px 10px; padding-left: 16px;}
.toast-content li + li {margin-top: 5px;}
.toast-content a {font-size: 11px; color: var(--gold); font-weight: 550;}
.toast-close {border: 0px; background: none; color: var(--muted); padding: 0px; line-height: 20px; font-size: 22px; flex: 0 0 auto; cursor: pointer; width: 22px; height: 22px;}
.toast-close:hover {color: var(--text);}
.toast-leaving {opacity: 0; transform: translateY(-8px); pointer-events: none;}
@keyframes toast-enter {
  0% {opacity: 0; transform: translateY(-8px);}
  100% {opacity: 1; transform: translateY(0px);}
}
@media (max-width: 600px) {
  .toast-region {top: 12px; right: 16px;}
  .toast {padding: 14px; gap: 10px;}
  .toast-content {font-size: 11px;}
}
@media (prefers-reduced-motion: reduce) {
  .toast {animation: auto ease 0s 1 normal none running none; transition: none;}
}
.period-control {position: relative; width: 320px; max-width: 100%;}
.period-control > span {display: block; font-size: 12px; margin-bottom: 8px;}
.period-field {width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); text-align: left;}
.period-field > span:last-child {color: var(--gold); font-size: 20px;}
.period-field[aria-expanded="true"] {border-color: var(--gold);}
.period-calendar {position: absolute; top: calc(100% + 8px); left: 0px; width: 340px; max-width: calc(-34px + 100vw); padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: rgba(16, 43, 75, 0.15) 0px 12px 40px; z-index: 40;}
.period-calendar[hidden] {display: none;}
.calendar-heading {display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px;}
.calendar-month {font-size: 16px; text-transform: capitalize;}
.calendar-heading > div {display: flex; gap: 6px;}
.calendar-heading button {width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 24px; line-height: 1;}
.calendar-weekdays, .calendar-days {display: grid; grid-template-columns: repeat(7, minmax(0px, 1fr)); gap: 4px;}
.calendar-weekdays {margin-bottom: 8px; text-align: center; color: var(--muted); font-size: 11px;}
.calendar-day {height: 36px; border: 0px; border-radius: 7px; background: transparent; color: var(--text); font-size: 12px;}
.calendar-day.in-range {background: var(--nav); color: var(--text);}
.calendar-day.endpoint {background: rgb(16, 43, 75); color: rgb(255, 255, 255);}
.calendar-day:hover {box-shadow: inset 0 0 0 1px var(--gold);}
html[data-theme="dark"] .calendar-day.endpoint {background: rgb(237, 242, 248); color: rgb(16, 43, 75);}
.calendar-hint {font-size: 11px; color: var(--muted); line-height: 1.5; margin: 14px 0px;}
.calendar-actions {display: flex; justify-content: flex-end;}
.calendar-actions .button {font-size: 11px; padding: 10px 12px; width: auto;}
@media (max-width: 600px) {
  .period-control {width: 100%;}
  .period-calendar {width: 340px; padding: 16px;}
  .calendar-actions .button {width: auto;}
}
.calendar-heading .calendar-selectors {gap: 4px; min-width: 0px; flex: 1 1 0%;}
.calendar-selectors select {width: auto; min-width: 0px; padding: 7px 17px 7px 5px; margin: 0px; border: 0px; border-radius: 6px; background-color: var(--surface); color: var(--text); font-size: 14px; font-weight: 650; cursor: pointer;}
.calendar-selectors .calendar-month {flex: 1 1 0%;}
.calendar-selectors .calendar-year {width: 84px; flex: 0 0 auto;}
.calendar-selectors select:hover {background-color: var(--nav);}
.calendar-selectors select:focus-visible {outline: 2px solid var(--gold); outline-offset: 1px;}
.calendar-selectors option {background: var(--surface); color: var(--text); font-weight: 400;}
.instruction-title {display: flex; align-items: center; flex-wrap: wrap; gap: 10px;}
.instruction-title h2 {margin: 0px;}
.instruction-trigger {padding: 5px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--gold); font-size: 11px; white-space: nowrap;}
.instruction-trigger:hover {background: var(--gold-soft); border-color: var(--gold);}
.instruction-dialog {width: min(680px, -32px + 100vw); max-height: calc(100dvh - 40px); padding: 0px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: rgba(0, 0, 0, 0.267) 0px 20px 80px;}
.instruction-dialog::backdrop {background: rgba(12, 24, 40, 0.6);}
.instruction-header {position:relative;display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 68px 22px 26px; min-height:68px; border-bottom: 1px solid var(--border);}
.instruction-header h2 {font-size: 20px; margin: 0px;}
.instruction-header .instruction-close {position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:none;border:0;color:var(--muted);font-size:27px;line-height:1;cursor:pointer;}
.instruction-body {padding: 20px 26px; font-size: 13px; line-height: 1.7;}
.instruction-body p {margin: 0px 0px 16px;}
.instruction-body h3 {font-size: 15px; margin: 22px 0px 10px;}
.instruction-body ol {padding-left: 22px; margin: 0px 0px 18px;}
.instruction-body li + li {margin-top: 10px;}
.instruction-body a {color: var(--gold); text-decoration: underline; text-underline-offset: 3px;}
.instruction-body a.button {color:var(--text);text-decoration:none;}
.instruction-body a.button.primary {color:var(--surface);}
.instruction-body code {background: var(--nav); padding: 2px 4px; border-radius: 4px; overflow-wrap: anywhere;}
.instruction-footer {padding: 16px 26px; border-top: 1px solid var(--border); text-align: right;}
@media (max-width: 600px) {
  .instruction-header {padding:18px 68px 18px 18px;}
  .instruction-header h2 {font-size: 17px;}
  .instruction-body {padding: 18px; font-size: 12px;}
  .instruction-footer {padding: 14px 18px;}
}
.webhook-settings {margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border);}
.webhook-settings h3 {margin: 0px; font-size: 15px;}
.webhook-settings label {margin-top: 16px;}
.webhook-settings .field-help {line-height: 1.6; overflow-wrap: anywhere;}
.metric-icon {width: 80px; height: 80px; border-radius: 18px;}
.metric-icon svg {display: block; width: 60px; height: 60px;}
.metric-top {min-height: 80px; gap: 14px;}
.metric-top > span:first-child {min-width: 0; overflow-wrap: anywhere;}
@media (max-width: 600px) {
  .metric-icon {width: 72px; height: 72px; border-radius: 16px;}
  .metric-icon svg {width: 54px; height: 54px;}
  .metric-top {flex-wrap: wrap; min-height: 112px; gap: 10px;}
  .metric-top > span:first-child {width: 100%; min-height: 30px;}
  .metric-icon {margin-left: auto;}
}
.period-calendar-icon {display: grid; place-items: center; flex: 0 0 auto;}
.period-calendar-icon svg {display: block; width: 20px; height: 20px;}
.empty-chart-icon svg {display: block; width: 30px; height: 30px;}
.dashboard-periods {display: flex; align-items: center; gap: 4px; flex-wrap: wrap; background: var(--soft); border: 1px solid var(--border); border-radius: 10px; padding: 4px; width: fit-content;}
.dashboard-periods a {padding: 9px 15px; border-radius: 7px; color: var(--muted); font-size: 14px; font-weight: 550;}
.dashboard-periods a:hover {color: var(--text);}
.dashboard-periods a.selected {background: var(--surface); color: var(--text); box-shadow: var(--shadow);}
.dashboard-period-title p {margin-top: 10px;}
@media (max-width: 600px) {
  .dashboard-periods {width: 100%; gap: 2px;}
  .dashboard-periods a {flex: 1 1 0%; text-align: center; padding: 8px 6px; font-size: 10px; white-space: nowrap;}
  .dashboard-period-title > div {width: 100%;}
}
.sidebar-bottom .icon-button {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 96px; height: 56px; line-height: 1;}
.sidebar-bottom {gap: 8px;}
.sidebar-bottom form {margin: 0px;}
@media (max-width: 600px) {
  .sidebar {padding-left: 8px; padding-right: 8px;}
  .sidebar-bottom form {display: block;}
  .sidebar-bottom .icon-button, .sidebar .theme-toggle {display: flex; width: 100%; height: 50px; gap: 5px; padding: 0px;}
  .sidebar .nav-item {padding-left: 1px; padding-right: 1px;}
}
.brand-caption {display: block; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 14px; text-align: center;}
@media (max-width: 600px) {
  .sidebar .brand {flex-direction: column; justify-content: center;}
}
.sidebar .brand {display: flex; flex-direction: column; align-items: center; line-height: 1; color: var(--text);}
.brand > svg {display: block; flex: 0 0 auto;}
.brand-caption {text-transform: uppercase;}
.brand-caption {font-weight: 500;}
.sidebar .brand {width: 88px;}
.brand-caption {color: var(--muted);}
@media (max-width: 600px) {
  .sidebar .brand {width: 48px; height: 50px;}
  .brand-caption {line-height: 8px;}
}
.brand > svg {width: 60px; height: 32px;}
.brand-caption {font-size: 7px; letter-spacing: 1px; margin-top: 4px;}
@media (max-width: 600px) {
  .brand > svg {width: 34px; height: 23px;}
  .brand-caption {font-size: 4.5px; letter-spacing: 0.35px; margin-top: 2px;}
}
.calendar-actions .calendar-today {margin-right: auto; color: var(--gold); padding-left: 8px; padding-right: 8px;}
.calendar-actions {gap: 6px;}
:root {--text: #102b4b; --border: #d5dce5; --gold: #987329;}
html[data-theme="dark"] {--text: #f1f4f8; --border: #485465; --gold: #dec087;}
.sidebar, .settings-card, .chart-card {background: var(--surface);}
.connection-strip {border-bottom-color: var(--border);}
.metric-icon, .integration-mark {background: var(--soft);}
.nav-item {color: var(--muted);}
.sidebar .nav-item.active {box-shadow: inset 0 0 0 1px var(--border);}
input, select {border-color: var(--border);}
.calendar-day.outside-month {color: var(--muted);}
:root {--bg: #f6f7f8; --surface: #fff; --soft: #f7f9fc; --nav: #eef3f9; --gold-soft: #faf7ee; --shadow: 0 5px 20px #172b4d05;}
html[data-theme="dark"] {--bg: #181c22; --surface: #222730; --soft: #2a313c; --nav: #353e4b; --gold-soft: #302f2c; --shadow: 0 5px 20px #00000012;}
.shell {background: var(--surface);}
:root {--muted: #445267;}
html[data-theme="dark"] {--muted: #c3ccda;}
p {font-size: 13px;}
.page-header p {font-size: 12px;}
.nav-label {font-weight: 500;}
.connection-strip {font-size: 12px;}
.field-help, .source-row, .error-text, .empty-small, .account-row span {font-size: 12px;}
.footnote, .chart-caption {font-size: 11px; line-height: 1.6;}
.metric-top {font-size: 18px; line-height: 1.35; font-weight: 600;}
.metric-comparison, .metric-baseline, .incomplete {font-size: 11px;}
.section-title p {font-size: 12px;}
.badge, .period-tag {font-size: 11px;}
.settings-heading p {font-size: 12px;}
.calendar-hint, .calendar-weekdays {font-size: 12px;}
footer {font-size: 11px;}
@media (max-width: 600px) {
  .page-header p, .connection-strip {font-size: 11px;}
  .metric-top {font-size: 15px;}
  .metric-comparison, .metric-baseline, .incomplete {font-size: 10px;}
  .section-title p {font-size: 11px;}
  .footnote, .chart-caption {font-size: 10px;}
  .field-help, .source-row, .empty-small, .account-row span {font-size: 11px;}
  .badge, .period-tag {font-size: 10px;}
}
.nav-label {font-size: 9px;}
@media (max-width: 600px) {
  .sidebar .nav-label {font-size: 8px;}
}
.currency-summary {display: flex; flex-wrap: wrap; gap: 16px; margin: 20px 0px;}
.currency-summary > div {display: flex; flex-direction: column; gap: 8px; background: var(--soft); border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; min-width: 180px;}
.currency-summary span {color: var(--gold); font-size: 18px;}
.rate-pagination {display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0px;}
.rate-pagination span {font-size: 12px;}
#rate-history-status {margin-top: 12px;}
.currency-edit-grid {display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 18px; margin-top: 22px; max-width: 860px;}
.currency-edit-card {background: var(--soft); border: 1px solid var(--border); border-radius: 12px; padding: 20px;}
.currency-card-title {display: flex; align-items: center; gap: 12px;}
.currency-symbol {display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--surface); color: var(--gold); font: 26px Georgia, serif;}
.currency-card-title h3 {margin: 0px 0px 3px; font-size: 16px;}
.currency-card-title .muted {font-size: 11px;}
.currency-current {margin: 18px 0px; font-size: 18px;}
.currency-current > span {font-size: 12px; color: var(--muted);}
.currency-edit-form {display: grid; gap: 14px;}
.currency-edit-form label {margin: 0px;}
.currency-edit-form .button {justify-self: start; margin-top: 2px; height: 40px;}
.currency-explanation {margin-top: 20px; border-left: 2px solid var(--gold); padding: 3px 0px 3px 14px;}
.currency-explanation strong {font-size: 13px;}
.currency-explanation p {margin-top: 5px;}
.currency-details {margin-top: 16px; max-width: 860px; color: var(--muted); font-size: 12px;}
.currency-details summary {cursor: pointer;}
.currency-details p {margin-top: 10px;}
.ads-mode-form {margin-top: 20px;}
.ads-mode-options {display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 16px; max-width: 860px; margin-bottom: 16px;}
.ads-mode-option {display: flex; align-items: flex-start; gap: 12px; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--soft); margin: 0px; cursor: pointer;}
.ads-mode-option:has(input:checked) {border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold);}
.ads-mode-option input {width: 17px; height: 17px; margin: 2px 0px 0px; flex: 0 0 auto; accent-color: var(--gold);}
.ads-mode-option strong {display: block; font-size: 14px; margin-bottom: 7px;}
.ads-mode-option small {display: block; color: var(--muted); font-size: 12px; line-height: 1.6;}
.manual-expense-form {display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px;}
.manual-expense-form label {margin: 0px;}
.manual-expense-form .button {height: 42px; flex: 0 0 auto;}
.ads-mode-form > .button {height: 40px;}
@media (max-width: 600px) {
  .currency-edit-grid, .ads-mode-options {grid-template-columns: 1fr;}
  .currency-edit-card {padding: 16px;}
  .manual-expense-form label {flex: 1 1 0%; min-width: 120px;}
  .manual-expense-form .button {width: 100%;}
}
@media (max-width: 600px) {
  .sidebar {grid-template-columns: repeat(6, minmax(0px, 1fr)); gap: 2px;}
  .sidebar .brand {display: none;}
}
.advertising-filter {display:flex; align-items:flex-end; flex-wrap:wrap; gap:10px; margin-top:24px;}
.advertising-filter label {margin:0;}
.advertising-actions {display:flex; align-items:center; gap:6px;}
.list-pagination {display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin-top:18px;}
.list-pagination span {margin-right:auto; color:var(--muted); font-size:12px;}
.refresh-available {padding:10px 14px; background:var(--nav); border:1px solid var(--border); border-radius:10px; margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; gap:12px;}
.refresh-available[hidden] {display:none;}
.actual-title {margin-bottom:16px}
.forecast-section {margin:28px 0}
.forecast-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.forecast-card {border:1px solid var(--border);border-radius:12px;background:var(--soft);padding:18px;display:flex;flex-direction:column;gap:10px}
.forecast-card > span {font-size:12px;font-weight:600;color:var(--text)}
.forecast-card strong {font-size:24px;font-weight:600;color:var(--text)}
.forecast-card small {font-size:11px;color:var(--muted)}
.mapping-required {display:flex;align-items:center;justify-content:space-between;gap:20px;margin:16px 0;padding:16px;border:1px solid var(--gold);border-radius:12px;background:var(--gold-soft)}
.mapping-required p {margin-top:6px}
@media(max-width:800px){.forecast-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.mapping-required{align-items:flex-start;flex-direction:column}.forecast-grid{gap:10px}.forecast-card{padding:14px}.forecast-card strong{font-size:22px}}

.notification-symbol {position:relative;display:block;width:23px;height:23px;flex-shrink:0;}
.notification-symbol svg {width:100%;height:100%;}
.notification-count {position:absolute;top:-7px;right:-10px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;border-radius:10px;background:var(--gold);color:var(--surface);font-size:10px;font-weight:700;}
.notification-item {display:flex;gap:12px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--border);line-height:1.6;}
.notification-item:last-of-type {margin-bottom:20px;}
.notification-dialog {max-width:620px;}
@media(max-width:600px){.sidebar {grid-template-columns:repeat(7,minmax(0,1fr));}.sidebar-bottom .notification-toggle {width:100%;}.notification-toggle .nav-label {display:block;}}

@media(max-width:600px){.sidebar .nav-item,.sidebar-bottom .icon-button,.sidebar-bottom form {width:100%;min-width:0;}.sidebar .icon,.sidebar .notification-symbol {width:20px;height:20px;}.sidebar-bottom .icon-button {border-radius:13px;}}
/* Keep the badge outside the icon's alignment box. */
.sidebar-bottom .notification-toggle {position:relative;}
.notification-symbol {position:static;}
.notification-count {top:3px;right:10px;}
@media(max-width:600px){
 .sidebar-bottom .notification-toggle {justify-content:center;gap:5px;}
 .sidebar .notification-symbol {display:block;width:20px;height:20px;}
 .sidebar .notification-count {top:1px;right:4px;}
}

.expense-dialog {max-width:540px;}
.expense-dialog .manual-expense-form {display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:20px;}
.expense-dialog .manual-expense-form label {width:100%;margin:0;}
.expense-dialog .manual-expense-form input,.expense-dialog .manual-expense-form select {width:100%;}
.expense-dialog-actions {display:flex;justify-content:flex-end;gap:10px;margin-top:8px;}
.ads-settings > [data-add-expense] {margin-top:18px;}

.ads-block-heading {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;}
.calendar-manual {display:flex;gap:10px;margin-top:14px;}
.calendar-manual label {flex:1;min-width:0;margin:0;font-size:12px;}
.calendar-manual input {width:100%;min-width:0;margin-top:5px;padding:9px;}
@media(max-width:600px){.ads-block-heading {align-items:flex-start;}.ads-block-heading .button {white-space:nowrap;padding:10px;font-size:12px;}}

.calendar-heading > div:last-child {align-items:center;flex-shrink:0;}
.calendar-heading button {display:grid;place-items:center;padding:0;}
.calendar-heading button svg {display:block;width:16px;height:16px;}
.advertising-filter .period-field,.advertising-filter > .button {height:48px;}
.advertising-filter > .button {display:inline-flex;align-items:center;justify-content:center;margin-bottom:0;}
.advertising-filter .period-control {width:320px;max-width:100%;}
.advertising-filter {display:grid;grid-template-columns:minmax(0,320px) auto;align-items:end;max-width:470px;}
.advertising-filter .period-control {width:100%;}
.advertising-filter > .button {width:auto;white-space:nowrap;}

.button.filter-reset {display:inline-flex;align-items:center;justify-content:center;gap:7px;color:var(--negative);background:color-mix(in srgb,var(--negative) 8%,var(--surface));border-color:color-mix(in srgb,var(--negative) 40%,var(--border));}
.button.filter-reset:hover {background:color-mix(in srgb,var(--negative) 15%,var(--surface));border-color:var(--negative);}
.filter-reset svg {width:16px;height:16px;flex-shrink:0;}

.calendar-manual input::placeholder {color:var(--muted);opacity:.6;}

.calendar-day.outside-month:not(.endpoint) {color:color-mix(in srgb,var(--text) 28%,var(--surface));}
.calendar-day.outside-month.endpoint {color:var(--surface);}
html[data-theme="dark"] .calendar-day.outside-month.endpoint {color:var(--bg);}

.period-picker .calendar-manual input {width:100%;min-width:0;height:40px;padding:9px;margin:5px 0 0;font-size:14px;}
.period-picker .calendar-manual label {margin:0;min-width:0;font-size:12px;}
.period-picker .calendar-actions .button {width:auto;flex:0 0 auto;}
.period-picker .period-field {min-height:48px;}
.page-header h1,.page-header p {margin-top:0;margin-bottom:0;}

.settings-tabs {display:flex;gap:4px;padding:4px;margin:0 0 24px;width:fit-content;max-width:100%;overflow-x:auto;background:var(--soft);border:1px solid var(--border);border-radius:10px;}
.settings-tabs [role="tab"] {flex-shrink:0;border:0;border-radius:7px;padding:10px 16px;background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;}
.settings-tabs [aria-selected="true"] {background:var(--surface);color:var(--text);box-shadow:var(--shadow);}
.settings-tabs [role="tab"]:focus-visible {outline:2px solid var(--gold);outline-offset:-2px;}
[data-settings-panel][hidden] {display:none;}
@media(max-width:600px){.settings-tabs {width:100%;}.settings-tabs [role="tab"] {padding:10px 12px;font-size:13px;}}

/* Notifications have a distinct surface in both themes. */
:root {--notice-bg:#fff3d9;--notice-text:#49320d;--notice-accent:#a76809;--notice-border:#d7aa58;--notice-shadow:0 10px 32px rgba(41,31,13,.24);}
html[data-theme="dark"] {--notice-bg:#463921;--notice-text:#fff0ce;--notice-accent:#f1c469;--notice-border:#b58c42;--notice-shadow:0 10px 32px rgba(0,0,0,.5);}
.toast,.toast-warning {background:var(--notice-bg);color:var(--notice-text);border:1px solid var(--notice-border);border-left:5px solid var(--notice-accent);box-shadow:var(--notice-shadow);}
.toast-content {font-size:14px;font-weight:500;line-height:1.6;}
.toast-content strong {font-size:14px;font-weight:700;}
.toast-content a {font-size:13px;color:var(--notice-text);font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.toast .notice-icon,.notification-item .notice-icon {color:var(--notice-accent);flex-shrink:0;}
.toast-close {color:var(--notice-text);width:28px;height:28px;border-radius:6px;}
.toast-close:hover {background:color-mix(in srgb,var(--notice-accent) 18%,transparent);color:var(--notice-text);}
.notification-item {margin:0 0 12px;padding:14px 16px;background:var(--notice-bg);color:var(--notice-text);border:1px solid var(--notice-border);border-left:4px solid var(--notice-accent);border-radius:10px;font-weight:500;}
.notification-item p {margin:0;color:inherit;}
@media(max-width:600px){.toast-content,.toast-content strong {font-size:14px;}}

/* Shared navigation treatment for settings and dashboard periods. */
.settings-tabs,.dashboard-periods {display:flex;align-items:stretch;flex-wrap:nowrap;gap:24px;width:100%;max-width:100%;padding:0;background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;overflow-x:auto;scrollbar-width:none;}
.settings-tabs::-webkit-scrollbar,.dashboard-periods::-webkit-scrollbar {display:none;}
.settings-tabs [role="tab"],.dashboard-periods a {position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px 2px 14px;border:0;border-radius:0;background:transparent;color:var(--muted);font-size:14px;font-weight:600;white-space:nowrap;box-shadow:none;transition:color .15s ease;}
.settings-tabs [role="tab"]::after,.dashboard-periods a::after {content:"";position:absolute;bottom:0;left:0;right:0;height:3px;border-radius:3px 3px 0 0;background:transparent;}
.settings-tabs [role="tab"]:hover,.dashboard-periods a:hover {background:transparent;color:var(--text);}
.settings-tabs [aria-selected="true"],.dashboard-periods a.selected {background:transparent;color:var(--text);box-shadow:none;}
.settings-tabs [aria-selected="true"]::after,.dashboard-periods a.selected::after {background:var(--gold);}
.settings-tabs [role="tab"]:focus-visible,.dashboard-periods a:focus-visible {outline:2px solid var(--gold);outline-offset:-2px;border-radius:4px;}
.dashboard-period-title > div {width:100%;min-width:0;}
@media(max-width:600px){.settings-tabs,.dashboard-periods {gap:20px;}.settings-tabs [role="tab"],.dashboard-periods a {font-size:13px;min-height:44px;padding:10px 1px 13px;}.dashboard-periods {gap:0;justify-content:space-between;}.dashboard-periods a {flex:0 0 auto;}}

.login-box .button.full {min-height:56px;padding:16px 18px;font-size:16px;display:flex;align-items:center;justify-content:space-between;}

.footer-currency {display:flex;align-items:center;gap:16px;}
.footer-currency form {margin:0;}
.footer-currency select {width:auto;min-width:94px;margin:0;padding:8px 28px 8px 10px;border:1px solid var(--border);border-radius:8px;color:var(--text);background-color:var(--soft);font-size:12px;cursor:pointer;}

.toast {position:relative;padding-right:68px;min-height:68px;}
.toast-close {position:absolute;top:2px;right:2px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;}

.sidebar .nav-label-mobile {display:none;}
@media(max-width:600px){.sidebar .nav-label-desktop {display:none;}.sidebar .nav-label-mobile {display:block;}}

.instruction-header .instruction-close svg,.toast-close svg {display:block;width:24px;height:24px;flex:none;}

.notification-history-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px;}
.notification-history-heading h3 {margin:0;}
.notification-history-item {display:flex;gap:12px;align-items:flex-start;justify-content:space-between;}
.notification-delete {flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:6px;border:0;border-radius:6px;background:transparent;color:var(--notice-text);cursor:pointer;}
.notification-delete svg {width:20px;height:20px;}
.notification-delete:hover {background:color-mix(in srgb,var(--notice-accent) 18%,transparent);}
@media(max-width:600px){.notification-history-heading {align-items:flex-start;flex-direction:column;}}

[data-clear-notifications][hidden] {display:none;}

[data-warning-settings][hidden] {display:none;}
.cron-command {display:flex;align-items:center;gap:12px;margin:16px 0;padding:14px;background:var(--surface-alt,#f4f7fb);border:1px solid var(--border);border-radius:12px;}
.cron-command pre {flex:1;min-width:0;margin:0;overflow:auto;font-size:13px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;}
.cron-command .button {flex-shrink:0;}
#settings-cron ol {padding-left:22px;line-height:1.8;}#settings-cron li+li {margin-top:12px;}
.statistics-status {color:var(--muted);font-size:12px;margin:0;}
@media (min-width: 601px) {
}
@media(max-width:640px){.cron-command {align-items:stretch;flex-direction:column;}.cron-command .button {align-self:flex-start;}.cron-task .section-title {align-items:flex-start;}}

.cron-fields{display:grid;grid-template-columns:minmax(150px,240px) 1fr;gap:10px 20px;margin:20px 0}.cron-fields dt{color:var(--muted);font-size:14px}.cron-fields dd{margin:0;overflow-wrap:anywhere}@media(max-width:640px){.cron-fields{grid-template-columns:1fr;gap:5px}.cron-fields dd{margin-bottom:10px}}

/* Shared two-column metric layout for dashboard and analytics. */
.metric-card {display:grid;grid-template-columns:minmax(0,1fr) 80px;column-gap:16px;align-content:start;}
.metric-top {display:contents;}
.metric-top > span:first-child {grid-column:1;grid-row:1;min-height:0;width:auto;overflow-wrap:normal;}
.metric-card .metric-icon {grid-column:2;grid-row:1 / 4;align-self:start;margin:0;}
.metric-card .metric-value {grid-column:1;grid-row:2;min-width:0;overflow-wrap:anywhere;}
.metric-card .metric-comparison {grid-column:1;grid-row:3;min-width:0;flex-wrap:wrap;}
.metric-card .metric-baseline,.metric-card > .incomplete {grid-column:1 / -1;}
@media (max-width:600px) {
  .metric-card {grid-template-columns:minmax(0,1fr) 72px;column-gap:10px;}
}

@media (min-width:601px) {
}
@media (max-width:600px) {
}

.forecast-card {display:grid;grid-template-columns:minmax(0,1fr) 80px;gap:14px 16px;align-content:start;}
.forecast-card > .forecast-label {grid-column:1;grid-row:1;font-size:18px;line-height:1.35;}
.forecast-card > .metric-icon {grid-column:2;grid-row:1 / 3;color:var(--gold);background:var(--surface);align-self:start;}
.forecast-card > strong {grid-column:1;grid-row:2;min-width:0;overflow-wrap:anywhere;}
.forecast-card > small {grid-column:1 / -1;}
@media (max-width:600px) {
  .forecast-card {grid-template-columns:minmax(0,1fr) 72px;column-gap:10px;}
  .forecast-card > .forecast-label {font-size:15px;}
}

@media (max-width:600px) {
  .metric-card,.forecast-card {grid-template-columns:minmax(0,1fr) 50px;column-gap:8px;}
  .metric-card .metric-icon,.forecast-card .metric-icon {width:50px;height:50px;border-radius:12px;}
  .metric-card .metric-icon svg,.forecast-card .metric-icon svg {width:40px;height:40px;}
  .metric-top,.forecast-card > .forecast-label {font-size:12px;line-height:1.35;}
  .metric-top > span:first-child,.forecast-card > .forecast-label {height:calc(3 * 1.35 * 12px);min-height:calc(3 * 1.35 * 12px);align-self:start;}
}

@media (max-width:600px) {
}

.settings-actions {display:flex;align-items:center;flex-wrap:wrap;gap:10px;}
.settings-actions > .inline-form {margin:0;gap:10px;}

.history-import-form {display:flex;align-items:flex-end;flex-wrap:wrap;gap:16px;}
.history-import-form > label,.history-import-form [data-history-custom] label {margin:0;}
.history-import-form select {min-width:180px;}
.history-import-form [data-history-custom]:not([hidden]) {display:flex;gap:12px;flex-wrap:wrap;}
[data-history-progress]:not([hidden]) {display:flex;align-items:center;gap:18px;margin:24px 0;}
.history-spinner {width:32px;height:32px;flex:0 0 auto;border:3px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:history-spin 1s linear infinite;}
@keyframes history-spin {to {transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){.history-spinner{animation:none;}}

#sync-confirm [hidden] {display:none !important;}

/* One header component and spacing contract for all main pages. */
main > .page-header {display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:56px;margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid var(--border);}
.page-header .page-header-content {display:flex;align-items:baseline;flex-wrap:wrap;gap:12px 28px;min-width:0;}
.page-header h1 {margin:0;font-size:28px;line-height:1.2;}
.page-header .page-header-description {display:flex;align-items:center;flex-wrap:wrap;gap:28px;font-size:12px;line-height:1.5;margin:0;}
.page-header-description > span + span,.page-header .statistics-status {border-left:1px solid var(--border);padding-left:28px;}
.page-header .statistics-status {margin:0;font-size:12px;line-height:1.5;}
.page-header-actions {flex:0 0 auto;display:flex;align-items:center;}
.page-header-actions form {margin:0;}
main > .page-header + * {margin-top:0;}
main > .page-header + section > .section-title:first-child {margin-top:0;}
@media (max-width:600px) {
  main > .page-header {gap:16px;min-height:76px;margin-bottom:16px;border-bottom:1px solid var(--border);}
  .page-header .page-header-content {display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
  .page-header h1 {font-size:25px;}
  .page-header .page-header-description,.page-header .statistics-status {border:0;padding:0;margin:0;font-size:11px;line-height:1.5;flex-basis:auto;}
  .page-header-content:has(.statistics-status) > .page-header-description {display:none;}
  .page-header-description > span + span {border:0;padding:0;}
  .page-header-actions {max-width:45%;}
  .page-header-actions .button {font-size:10px;padding:10px;}
}

main > footer {align-items:center;}
@media (max-width:600px) {
  main > footer {flex-wrap:nowrap;align-items:center;gap:10px;}
  .footer-currency {gap:12px;white-space:nowrap;}
  .footer-currency select {min-width:84px;font-size:11px;}
  .chart-card .chart-header {flex-direction:row;align-items:center;gap:12px;}
  .chart-header > div {min-width:0;flex:1;}
  .chart-card .chart-header h2 {font-size:16px;line-height:1.35;}
  .chart-period {display:flex;flex-direction:column;gap:2px;flex:0 0 auto;text-align:right;font-size:9px;padding:6px 8px;}
}

.analytics-overview-header {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;margin-bottom:20px;}
.analytics-overview-header > .section-title {grid-column:1;grid-row:1;margin:0;}
.analytics-overview-header > .range-form {grid-column:2;grid-row:1;margin:0;}
@media (max-width:600px) {
  .analytics-overview-header {grid-template-columns:minmax(0,1fr);gap:26px;}
  .analytics-overview-header > .range-form {grid-column:1;grid-row:1;}
  .analytics-overview-header > .section-title {grid-column:1;grid-row:2;}
}

.dashboard-overview-header {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;margin-bottom:20px;}
.dashboard-overview-header > .section-title {margin:0;}
.dashboard-overview-header .actual-title {margin:0;}
.dashboard-overview-header > .dashboard-periods {width:auto;gap:24px;}
@media (max-width:600px) {
  .dashboard-overview-header {grid-template-columns:minmax(0,1fr);gap:26px;}
  .dashboard-overview-header > .dashboard-periods {grid-column:1;grid-row:1;width:100%;gap:0;}
  .dashboard-overview-header > .section-title {grid-column:1;grid-row:2;}
}

.analytics-overview-header .period-calendar {left:auto;right:0;}

.sync-api-warning {padding:16px 18px;background:var(--notice-bg);color:var(--notice-text);border:1px solid var(--notice-border);border-left:4px solid var(--notice-accent);border-radius:10px;line-height:1.6;}