:root {
  --bg:#07111f; --sidebar:#091321; --surface:#101d2e; --raised:#152337;
  --hover:#1b2c42; --line:#223248; --strong-line:#334762; --text:#f4f7fc;
  --muted:#a6b4c8; --faint:#8c9db6; --accent:#78aeff; --bar:#3f8dff;
  --green:#67e1b3; --yellow:#ffd689; --red:#ff9caa;
  --glass:rgba(10,22,39,.87); --button:#f4f7fc; --button-text:#0b1729;
  --selected:#1765dd; --selected-text:#fff; --focus-wash:#172f50;
}
:root[data-theme="light"] {
  --bg:#f2f5fa; --sidebar:#fbfcff; --surface:#fff; --raised:#edf2fa;
  --hover:#e7eef9; --line:#dce5f1; --strong-line:#cbd9ed; --text:#102039;
  --muted:#526581; --faint:#5d718d; --accent:#1658b9; --bar:#246fe1;
  --green:#087350; --yellow:#86600d; --red:#a72a38; --glass:rgba(250,252,255,.9);
  --button:#102039; --button-text:#fff; --selected:#185fd1; --selected-text:#fff; --focus-wash:#e6efff;
}
body {font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Geist,sans-serif;}
.app {font-size:14px;}
.app .topbar {position:sticky;top:0;z-index:6;background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
.app .brand-icon {border-color:var(--strong-line);background:var(--raised);}
.app .brand {letter-spacing:-.055em;}
.app .top-actions {gap:7px;}
.app .top-actions .icon-button {border-radius:12px; width:41px;min-height:41px;}
.app .topbar .board-menu summary {
  min-height:41px;border-radius:12px;gap:7px;background:var(--surface);
}
.app .board-menu summary span {max-width:16ch;}
.app .sidebar > a[aria-current="page"] {background:var(--focus-wash);border-color:transparent;color:var(--accent);}
.app .app-content {
  max-width:1200px;padding-top:23px;outline:none;
}
.app .page-heading {
  min-height:42px;align-items:center;justify-content:space-between;gap:8px;
  display:flex;margin-bottom:12px;
}
.app .page-heading h1 {
  margin:0; font-size:clamp(28px,5vw,38px);font-weight:720;letter-spacing:-.055em;
}
.demo-label {
  padding:4px 8px;border:1px solid var(--line);border-radius:7px;color:var(--muted);
  font-size:10px;font-weight:600;
}
.period-toolbar {display:flex;gap:7px;margin-bottom:12px;align-items:center;}
.period-tabs {display:flex;gap:6px;}
.period-tab,.period-toolbar .icon-button {
  display:inline-flex;justify-content:center;align-items:center;min-height:43px;
  padding:0 13px;border-radius:12px;border:1px solid var(--line);background:var(--surface);
  color:var(--muted);font-size:13px;font-weight:610;white-space:nowrap;
}
.period-tab:hover,.period-toolbar .icon-button:hover {background:var(--hover);}
.period-tab[aria-current="page"] {
  color:var(--selected-text);background:var(--selected);border-color:transparent;
  box-shadow:0 5px 15px color-mix(in srgb,var(--selected),transparent 78%);
}
.period-toolbar .icon-button {padding:0;width:43px;}
.period-refresh svg {transition:transform .22s ease;}
.period-refresh:active svg {transform:rotate(50deg);}
.app .date-menu .popover-card {right:0;left:auto;}
.app .panel {border-radius:17px;}
.app .dashboard-metrics {
  grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:13px;
}
.app .dashboard-metrics .metric {
  grid-column:auto;padding:12px 13px;min-height:83px;
  display:flex;justify-content:space-between;gap:5px;
}
.dashboard-metrics .metric-top {font-size:11px;color:var(--muted);min-height:22px;}
.dashboard-metrics .metric-icon {color:var(--accent);background:none;border:none;width:24px;height:24px;}
.dashboard-metrics .metric-value {font-variant-numeric:tabular-nums;}
.dashboard-metrics .metric-hint {display:none;}
.order-funnel {padding:13px 13px 14px;margin-bottom:13px;}
.order-funnel header {
  display:flex;justify-content:space-between;align-items:center;padding-bottom:9px;
  border-bottom:1px solid var(--line);
}
.order-funnel header h2 {font-size:17px;}
.order-funnel header p {color:var(--muted);font-size:11px;}
.funnel-row {margin-top:10px;}
.funnel-row > div {
  display:grid;grid-template-columns:19px 1fr auto minmax(34px,auto);
  align-items:center;gap:6px;color:var(--muted);font-size:13px;
}
.funnel-row strong {color:var(--text);font-size:14px;font-variant-numeric:tabular-nums;}
.funnel-row small {text-align:right;color:var(--faint);}
.funnel-row svg {color:var(--accent);}
.funnel-row progress {height:6px;}
.funnel-row progress::-webkit-progress-value {background:linear-gradient(90deg,var(--selected),var(--bar));}
.app details.overview-details {
  margin-bottom:13px;padding:0 13px;border:1px solid var(--line);
}
.overview-details > summary {
  display:flex;align-items:center;justify-content:space-between;list-style:none;min-height:45px;
}
.overview-details > summary::-webkit-details-marker,.sale-card > summary::-webkit-details-marker {display:none;}
.overview-details[open] > summary svg {transform:rotate(180deg);}
.overview-details .metric {background:var(--raised);}
.app .bar > span {background:linear-gradient(var(--bar),color-mix(in srgb,var(--bar),var(--surface) 45%));}
.sales-list-head {display:flex;justify-content:flex-end;color:var(--muted);margin-bottom:6px;}
.sales-list-head h2 {font-size:13px;font-weight:550;}
.sales-list .table-filter {padding-inline:0;}
.sale-cards {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:start;}
.app details.sale-card {padding:0;border:1px solid var(--line);}
.sale-card > summary {
  list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 9px;
  align-items:center;padding:11px 12px!important;min-height:74px;
}
.sale-card .sale-name {font-size:15px;overflow-wrap:anywhere;}
.sale-value {font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums;}
.sale-meta {display:flex;align-items:center;gap:6px;font-size:10px;color:var(--faint);}
.sale-time {display:flex;align-items:center;justify-content:flex-end;gap:4px;color:var(--muted);font-size:11px;}
.sale-card[open] .sale-time svg {transform:rotate(90deg);}
.sale-product {grid-column:1/-1;color:var(--muted);font-size:12px;font-weight:500;}
.sale-card .status {
  font-size:10px;font-weight:700;letter-spacing:.035em;text-transform:uppercase;padding:2px 7px;
}
.sale-card .status.approved {background:color-mix(in srgb,var(--green),transparent 90%);border-color:color-mix(in srgb,var(--green),transparent 80%);}
.sale-card .status.pending {background:color-mix(in srgb,var(--yellow),transparent 90%);border-color:color-mix(in srgb,var(--yellow),transparent 80%);}
.sale-card dl {
  margin:0;padding:10px 12px 13px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
}
.sale-card dt {color:var(--faint);font-size:11px;}
.sale-card dd {margin:0;color:var(--text);font-size:13px;overflow-wrap:anywhere;}
.profile-card {display:flex;align-items:center;gap:10px;padding:14px 13px;margin-bottom:10px;}
.profile-avatar {
  display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:var(--selected);color:#fff;font-size:23px;font-weight:640;flex:none;
}
.profile-card > div {flex:1;min-width:0;overflow-wrap:anywhere;}
.profile-card p {color:var(--muted);font-size:12px;}
.profile-links {display:flex;gap:8px;margin-bottom:12px;}
.profile-links > a {display:flex;align-items:center;gap:6px;flex:1;padding:8px;min-width:0;}
.profile-links > a svg:last-child {margin-left:auto;color:var(--muted);}
.app .toggle input:checked + i {background:var(--selected);}
.app .toggle input:checked + i::after {background:#fff;}
.landing .hero-halo {background:radial-gradient(ellipse 65% 52% at 50% 79%,color-mix(in srgb,var(--bar),transparent 79%),transparent);}
.landing .hero h1 > span {background-image:linear-gradient(105deg,var(--text),var(--accent));}
.landing .product-preview,.auth .auth-card {border-radius:22px;}
@media (max-width:740px) {
  .app .topbar {
    min-height:57px;padding:4px 13px;padding-top:max(4px,env(safe-area-inset-top));
  }
  .app .app-content {padding:12px 13px calc(83px + env(safe-area-inset-bottom));}
  .period-toolbar {gap:5px;}
  .period-tabs {flex:1;gap:5px;min-width:0;}
  .period-tab {flex:1;padding-inline:5px;font-size:12px;min-height:41px;}
  .period-toolbar .icon-button {width:37px;min-height:41px;}
  .app .dashboard-metrics {grid-template-columns:repeat(2,minmax(0,1fr));}
  .app .dashboard-metrics .metric {min-height:74px;padding:9px 10px;}
  .app .dashboard-metrics .metric-value {font-size:clamp(18px,5vw,23px);}
  .sale-cards {grid-template-columns:1fr;}
  .app .mobile-nav {
    width:100%;max-width:none;min-width:0;bottom:0;border-radius:0;
    padding:4px 5px calc(4px + env(safe-area-inset-bottom));gap:0;
  }
  .app .mobile-nav .water-glass {
    background:var(--glass);border:0;border-top:1px solid var(--line);
    box-shadow:0 -8px 21px rgba(0,0,0,.13);
  }
  .app .mobile-nav .water-drop {
    top:4px;bottom:auto;height:48px;border-radius:14px;box-shadow:none;
    background:color-mix(in srgb,var(--accent),transparent 87%);
  }
  .app .mobile-nav a {min-height:50px;gap:4px;font-size:10px;letter-spacing:-.018em;}
  .app .mobile-nav [aria-current="page"],.app .mobile-nav .water-active {color:var(--accent);}
}
@media (max-width:350px) {
  .app .board-menu summary > svg:first-child {display:none;}
  .app .mobile-nav a {font-size:9px;}
  .app .app-content {padding-inline:10px;}
}
.profile-settings > .device-push {order:2;}