:root {
  --ink: #2b2b2b;
  --muted: #68717e;
  --soft: #929aa5;
  --line: #e8edf2;
  --surface: #ffffff;
  --canvas: #f7f8fa;
  --forest: #286386;
  --forest-2: #00a7c6;
  --mint: #e9f7fa;
  --lime: #8ed0dc;
  --blue: #00a7c6;
  --blue-soft: #eaf8fb;
  --amber: #ff8819;
  --red: #e2777a;
  --shadow: 0 1px 3px rgba(43, 43, 43, 0.06);
  --radius: 12px;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }

button { color: inherit; }

.boot-screen {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  color: var(--muted);
}

.brand-mark {
  width: 41px;
  height: 41px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
}

.brand-mark span {
  width: 5px;
  display: block;
  border-radius: 6px;
  background: currentColor;
}

.brand-mark span:nth-child(1), .brand-mark span:nth-child(5) { height: 17px; opacity: .55; }
.brand-mark span:nth-child(2), .brand-mark span:nth-child(4) { height: 28px; opacity: .78; }
.brand-mark span:nth-child(3) { height: 39px; }

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--forest);
  text-decoration: none;
}

.brand-lockup .brand-mark { width: 34px; height: 34px; }
.brand-lockup .brand-mark span:nth-child(1), .brand-lockup .brand-mark span:nth-child(5) { height: 14px; }
.brand-lockup .brand-mark span:nth-child(2), .brand-lockup .brand-mark span:nth-child(4) { height: 23px; }
.brand-lockup .brand-mark span:nth-child(3) { height: 32px; }

.brand-name {
  font: 700 23px/1 "Onest", sans-serif;
  letter-spacing: -1px;
}

.brand-name b { color: var(--ink); font-weight: 800; }

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(420px, 47%) 1fr;
  background: #fff;
}

.login-panel {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 38px clamp(34px, 6vw, 96px);
}

.login-main {
  width: min(430px, 100%);
  margin: auto;
  padding: 44px 0 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--forest-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--forest-2);
  border-radius: 2px;
}

.login-main h1 {
  margin: 14px 0 12px;
  font: 700 clamp(34px, 4vw, 48px)/1.08 "Onest", sans-serif;
  letter-spacing: -2px;
}

.login-main > p {
  margin: 0 0 32px;
  color: var(--muted);
  line-height: 1.65;
}

.field { margin-bottom: 18px; }

.field label {
  display: block;
  margin-bottom: 8px;
  color: #34413c;
  font-size: 13px;
  font-weight: 700;
}

.input-wrap { position: relative; }

.input-wrap .icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #7f8d87;
}

.field input, .field select {
  width: 100%;
  height: 50px;
  border: 1px solid #dfe6e2;
  border-radius: 12px;
  outline: none;
  background: #fbfcfb;
  padding: 0 15px 0 45px;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.field select { padding-left: 14px; }

.field input:focus, .field select:focus {
  background: #fff;
  border-color: var(--forest-2);
  box-shadow: 0 0 0 4px rgba(35, 102, 80, .1);
}

.field-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: -5px 0 23px;
  font-size: 13px;
}

.check-label { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.check-label input { accent-color: var(--forest); }

.text-button {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--forest-2);
  font-weight: 700;
  cursor: pointer;
}

.primary-button {
  height: 50px;
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: var(--forest);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(23, 76, 60, .18);
  transition: transform .18s, background .18s;
}

.primary-button:hover { background: #0f3d30; transform: translateY(-1px); }
.primary-button:disabled { opacity: .55; cursor: wait; transform: none; }

.demo-box {
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid #d9ebe4;
  border-radius: 12px;
  background: #f4faf7;
  color: #52615b;
  font-size: 12px;
  line-height: 1.55;
}

.demo-box button { margin-top: 5px; }
.login-footer { color: #9aa49f; font-size: 12px; }

.login-visual {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background:
    radial-gradient(circle at 92% 8%, rgba(201, 255, 102, .28), transparent 30%),
    linear-gradient(145deg, #0e3328, #1b5a46 63%, #31775f);
  color: #fff;
  padding: clamp(40px, 6vw, 90px);
  display: flex;
  align-items: center;
}

.login-visual::before, .login-visual::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
}

.login-visual::before { width: 620px; height: 620px; right: -190px; bottom: -280px; }
.login-visual::after { width: 380px; height: 380px; right: -80px; bottom: -160px; }

.login-visual-content { position: relative; z-index: 1; width: min(620px, 100%); }

.login-visual h2 {
  max-width: 550px;
  margin: 0 0 16px;
  font: 700 clamp(36px, 5vw, 64px)/1.05 "Onest", sans-serif;
  letter-spacing: -2.5px;
}

.login-visual h2 em { color: var(--lime); font-style: normal; }

.login-visual p {
  max-width: 500px;
  color: rgba(255,255,255,.72);
  font-size: 16px;
  line-height: 1.7;
}

.mini-dashboard {
  margin-top: 45px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  background: rgba(255,255,255,.1);
  box-shadow: 0 28px 70px rgba(0,0,0,.24);
  backdrop-filter: blur(14px);
  transform: rotate(-1deg);
}

.mini-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.mini-dots { display: flex; gap: 6px; }
.mini-dots i { width: 7px; height: 7px; background: rgba(255,255,255,.35); border-radius: 50%; }
.mini-chip { padding: 7px 10px; border-radius: 8px; background: rgba(255,255,255,.12); font-size: 10px; }
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mini-card { min-height: 84px; padding: 13px; border-radius: 12px; background: rgba(255,255,255,.1); }
.mini-card span { display: block; color: rgba(255,255,255,.62); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.mini-card strong { display: block; margin-top: 8px; font: 700 22px "Onest",sans-serif; }
.mini-card strong.good { color: var(--lime); }
.mini-chart { grid-column: 1 / -1; height: 110px; padding: 14px; border-radius: 12px; background: rgba(255,255,255,.08); }
.mini-chart svg { width: 100%; height: 100%; overflow: visible; }

.error-banner {
  margin: 0 0 16px;
  padding: 11px 13px;
  border-radius: 10px;
  background: #fff0ef;
  color: #a23c39;
  font-size: 13px;
}

.app-shell { min-height: calc(100vh - var(--platform-header-height)); }

.sidebar {
  position: fixed;
  inset: var(--platform-header-height) auto 0 0;
  width: 265px;
  height: calc(100vh - var(--platform-header-height));
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: 25px 20px 18px;
  background: #fff;
  border-right: 1px solid var(--line);
  overflow-y: auto;
  scrollbar-width: thin;
}

.sidebar .brand-lockup { margin: 0 11px 34px; }

.workspace-chip {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px;
  margin-bottom: 22px;
  border: 1px solid #e4e9e6;
  border-radius: 12px;
  background: #fbfcfd;
}

.workspace-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--forest);
  color: #fff;
  font: 700 13px "Onest", sans-serif;
}

.workspace-chip strong { display: block; font-size: 13px; }
.workspace-chip small { color: var(--muted); font-size: 10px; }

.nav-label {
  margin: 0 12px 8px;
  color: #a1aaa6;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.nav-list { display: grid; gap: 4px; }

.nav-item {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  padding: 0 12px;
  color: #53605b;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  transition: color .18s, background .18s;
}

.demo-data-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 12px 15px;
  border: 1px solid #ead9a7;
  border-radius: 12px;
  background: #fff9e9;
  color: #7b6422;
  font-size: 11px;
  line-height: 1.45;
}

.demo-data-banner strong { color: #624d13; }

.demo-data-banner.live-data-banner {
  border-color: #b9dcc8;
  background: #edf8f2;
  color: #356c50;
}

.demo-data-banner.live-data-banner strong { color: #174d36; }

.nav-item:hover { color: var(--forest-2); background: #f7f9fc; }
.nav-item.active { color: #222; background: #f4f6fd; }
.nav-item.active .nav-icon { background: #fff; }
.nav-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; }
.nav-item .pill { margin-left: auto; padding: 3px 6px; border-radius: 5px; background: #f0eee7; color: #8a6f35; font-size: 9px; text-transform: uppercase; }
.nav-spacer { flex: 1; }

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 10px 5px;
  border-top: 1px solid var(--line);
}

.user-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #e3efe9;
  color: var(--forest);
  font-weight: 800;
}

.user-meta { min-width: 0; flex: 1; }
.user-meta strong, .user-meta small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.user-meta strong { font-size: 12px; }
.user-meta small { color: var(--muted); font-size: 10px; margin-top: 2px; }

.icon-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: #66736e;
  cursor: pointer;
}

.icon-button:hover { color: var(--forest); border-color: #c9d8d1; }

.main-shell { margin-left: 265px; min-height: calc(100vh - var(--platform-header-height)); }

.topbar {
  position: sticky;
  top: var(--platform-header-height);
  z-index: 15;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 clamp(20px, 3vw, 42px);
  background: rgba(255,255,255,.9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.top-control {
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 0 12px;
  color: #49564f;
  font-size: 12px;
  font-weight: 600;
}

select.top-control { min-width: 215px; outline: none; cursor: pointer; }
.topbar .mobile-menu { display: none; margin-right: auto; }

.main-content { padding: 38px clamp(24px, 2.7vw, 44px) 55px; }

.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 28px;
}

.page-heading h1 {
  margin: 4px 0 7px;
  font: 600 27px/1.15 "Onest", sans-serif;
  letter-spacing: -1px;
}

.page-heading p { margin: 0; color: var(--muted); font-size: 13px; }

.heading-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.button {
  min-height: 41px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0 14px;
  color: #46524d;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .18s, transform .18s, background .18s;
}

.button:hover { border-color: #b9cdc4; transform: translateY(-1px); }
.button.primary { border-color: var(--forest-2); background: var(--forest-2); color: #fff; }
.button.soft { border-color: #cce8ed; background: #f1fafc; color: var(--forest); }
.button.outline-accent, .outline-accent { border-color: var(--forest-2); color: var(--forest-2); background: #fff; }
.button[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.country-tabs {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}

.country-tab {
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 0 14px;
  color: #63706a;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.country-tab.active { border-color: var(--forest-2); background: var(--forest-2); color: #fff; }

.confidence-card {
  position: relative;
  padding: 16px 18px;
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid #dce8e2;
  border-radius: 12px;
  background: #fff;
}

.confidence-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.confidence-title { display: flex; align-items: center; gap: 10px; }
.confidence-title .shield { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #eaf5ee; color: #62a376; }
.confidence-title strong { display: block; font-size: 12px; }
.confidence-title span { color: var(--muted); font-size: 10px; }
.updating-pill { border-radius: 99px; background: #fff4e9; color: #a46b2d; padding: 5px 9px; font-size: 10px; font-weight: 700; }
.confidence-bar { display: flex; height: 5px; overflow: hidden; border-radius: 5px; background: #edf1ef; }
.confidence-bar i:nth-child(1) { background: #77bb84; }
.confidence-bar i:nth-child(2) { background: #e7a455; }
.confidence-bar i:nth-child(3) { background: #55aab8; }
.confidence-legend { display: flex; gap: 25px; margin-top: 10px; color: var(--muted); font-size: 10px; }
.confidence-legend span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #77bb84; }
.confidence-legend span:nth-child(2)::before { background: #e7a455; }
.confidence-legend span:nth-child(3)::before { background: #55aab8; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 18px; }

.kpi-card {
  min-height: 128px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 15px rgba(27, 55, 45, .025);
}

.kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kpi-head span { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .055em; }
.kpi-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--forest); background: #eaf4ef; }
.kpi-value { margin-top: 14px; font: 700 25px/1 "Onest",sans-serif; letter-spacing: -.5px; }
.kpi-value.positive { color: #73b77f; }
.kpi-value.negative { color: #d9686d; }
.kpi-meta { display: flex; align-items: center; gap: 7px; margin-top: 9px; color: #8a9590; font-size: 10px; }
.trend-good { color: #479c61; font-weight: 700; }

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 5px 20px rgba(27,55,45,.025);
}

.panel + .panel { margin-top: 18px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.panel-title h2 { margin: 0 0 4px; font: 600 16px "Onest",sans-serif; }
.panel-title p { margin: 0; color: var(--muted); font-size: 10px; }
.segmented { display: flex; padding: 3px; border-radius: 9px; background: #f1f4f2; }
.segmented button { height: 30px; border: 0; border-radius: 7px; background: transparent; padding: 0 11px; color: #77817d; font-size: 10px; font-weight: 700; cursor: pointer; }
.segmented button.active { background: #fff; color: var(--forest-2); box-shadow: 0 2px 6px rgba(33,55,46,.1); }

.chart-wrap { padding: 14px 20px 18px; }
.pnl-chart-panel .panel-header { min-height: 66px; }
.chart-legend { min-height: 30px; display: flex; justify-content: flex-end; align-items: center; gap: 17px; margin: 0 0 2px; color: #373d3f; font-size: 12px; }
.chart-legend span { display: inline-flex; align-items: center; white-space: nowrap; }
.chart-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: #81c784; }
.chart-legend .legend-sales::before { background: #4db8d3; }
.chart-legend .legend-expenses::before { background: #fcb07e; }
.chart-menu { width: 26px; height: 26px; display: grid; place-items: center; margin-left: 4px; border: 0; background: transparent; color: #64748b; font-size: 17px; line-height: 1; cursor: default; }
.pnl-chart { width: 100%; height: 350px; display: block; }
.chart-grid-line { stroke: #e7e7e7; stroke-width: 1; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.chart-zero { stroke: #d2d7dc; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-label { fill: #6c757d; font-size: 11px; font-family: "Inter", sans-serif; }
.chart-x-label { font-size: 10px; }
.chart-axis-title { fill: #58616b; font: 600 10px "Inter", sans-serif; letter-spacing: .01em; }
.chart-profit-area { fill: url(#profitArea); }
.chart-sales-line, .chart-expense-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.chart-sales-line { stroke: #4db8d3; }
.chart-expense-line { stroke: #fcb07e; }
.profit-bar { filter: url(#chartShadow); opacity: .85; }
.profit-bar-positive { fill: #81c784; }
.profit-bar-negative { fill: #f89093; }
.chart-hit-area { fill: transparent; }
.chart-hover-line { opacity: 0; stroke: #9aa5af; stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.chart-column:hover .chart-hover-line, .chart-column:focus .chart-hover-line { opacity: .65; }

.statement-tools { display: flex; align-items: center; gap: 8px; }
.search-wrap { position: relative; }
.search-wrap .icon { position: absolute; top: 50%; left: 11px; transform: translateY(-50%); color: #89958f; }
.search-wrap input { width: 190px; height: 36px; border: 1px solid var(--line); border-radius: 9px; outline: none; padding: 0 10px 0 34px; font-size: 11px; }
.search-wrap input:focus { border-color: #a8c3b7; box-shadow: 0 0 0 3px rgba(35,102,80,.08); }

.statement-table { width: 100%; border-collapse: collapse; }
.statement-table th, .statement-table td { padding: 13px 20px; border-bottom: 1px solid #edf0ee; font-size: 12px; }
.statement-table th { color: #84908b; background: #fafbfa; text-align: right; font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
.statement-table th:first-child { text-align: left; }
.statement-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.statement-table tr:last-child td { border-bottom: 0; }
.statement-table .row-label { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.row-dot { width: 7px; height: 7px; border-radius: 50%; background: #a5b0ab; }
.row-dot.income { background: var(--blue); }
.row-dot.cost { background: #ef9b98; }
.row-dot.tax { background: var(--amber); }
.statement-table tr.subtotal td { font-weight: 700; }
.statement-table tr.total td { background: #eaf4ef; color: var(--forest); font-weight: 800; }
.amount-positive { color: #388d56; }
.amount-negative { color: #bd5450; }

.two-column { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .8fr); gap: 18px; margin-top: 18px; }

.country-breakdown { padding: 8px 20px 16px; }
.country-row { display: grid; grid-template-columns: minmax(130px, 1fr) 2.2fr 100px 85px; gap: 16px; align-items: center; padding: 13px 0; border-bottom: 1px solid #edf0ee; font-size: 11px; }
.country-row:last-child { border-bottom: 0; }
.country-name { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.country-bar { height: 7px; border-radius: 7px; background: #edf1ef; overflow: hidden; }
.country-bar i { display: block; height: 100%; border-radius: inherit; background: var(--forest-2); }
.country-row strong, .country-row small { text-align: right; }
.country-row small { color: var(--muted); }

.insight-panel { padding: 20px; color: #fff; background: var(--forest); border-color: var(--forest); }
.insight-panel .insight-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: rgba(201,255,102,.14); color: var(--lime); }
.insight-panel h3 { margin: 18px 0 9px; font: 600 17px/1.35 "Onest",sans-serif; }
.insight-panel p { margin: 0; color: rgba(255,255,255,.67); font-size: 12px; line-height: 1.6; }
.insight-stat { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.13); }
.insight-stat small { color: rgba(255,255,255,.6); }
.insight-stat strong { color: var(--lime); font: 700 20px "Onest",sans-serif; }

.page-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.shop-card, .team-card { padding: 20px; }
.shop-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.shop-flag { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #f3f6f4; font-size: 21px; }
.status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 99px; background: #eaf5ee; color: #43865a; font-size: 9px; font-weight: 700; }
.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #5aac70; }
.shop-card h3 { margin: 18px 0 4px; font: 600 15px "Onest",sans-serif; }
.shop-card p { margin: 0; color: var(--muted); font-size: 11px; }
.shop-meta { display: flex; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }

.empty-state {
  min-height: 500px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 50px 20px;
}

.empty-state-inner { max-width: 540px; }
.empty-visual { width: 100px; height: 100px; display: grid; place-items: center; margin: 0 auto 24px; border-radius: 30px; color: var(--forest); background: #e7f3ed; }
.empty-state h2 { margin: 0 0 10px; font: 600 25px "Onest",sans-serif; }
.empty-state p { margin: 0 auto 24px; color: var(--muted); line-height: 1.65; font-size: 13px; }
.roadmap-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 24px; text-align: left; }
.roadmap-item { display: flex; align-items: center; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: #4e5c56; font-size: 11px; font-weight: 600; }
.roadmap-item .check { color: var(--forest-2); }

.team-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, .7fr); gap: 18px; }
.member-list { padding: 4px 20px 12px; }
.member-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px 100px 78px; align-items: center; gap: 15px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.member-row:last-child { border-bottom: 0; }
.member-main { display: flex; align-items: center; gap: 11px; min-width: 0; }
.member-main .user-avatar { border-radius: 11px; }
.member-main strong, .member-main small { display: block; }
.member-main strong { font-size: 12px; }
.member-main small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.role-badge { justify-self: start; padding: 5px 8px; border-radius: 6px; background: #f1f4f2; color: #66726d; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.pending-member { opacity: .78; }
.pending-member .role-badge { background: #fff4d9; color: #966515; }
.member-date { color: var(--muted); font-size: 10px; text-align: right; }
.member-delete { justify-self: end; padding: 6px 8px; border: 1px solid #efc9c9; border-radius: 7px; background: #fff; color: #b64747; font-size: 10px; font-weight: 700; cursor: pointer; }
.member-delete:hover { background: #fff3f3; }
.member-delete:disabled { opacity: .5; cursor: wait; }
.member-self { color: var(--muted); font-size: 10px; text-align: right; }

.invite-panel { padding: 20px; }
.invite-panel h2 { margin: 0 0 6px; font: 600 16px "Onest",sans-serif; }
.invite-panel > p { margin: 0 0 22px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.invite-panel .field { margin-bottom: 13px; }
.invite-panel .field input, .invite-panel .field select { height: 44px; padding-left: 13px; font-size: 12px; }
.invite-panel .primary-button { height: 44px; margin-top: 5px; }
.password-help { margin: -6px 0 13px; color: #8a9590; font-size: 9px; line-height: 1.4; }

.overview-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -4px 0 14px;
  color: #737b86;
  font-size: 12px;
}

.overview-label strong { color: #34383e; }

.overview-periods {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 20px;
}

.period-card {
  overflow: hidden;
  min-height: 180px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
}

.period-band { display: grid; gap: 3px; padding: 15px 18px; color: #fff; background: #659bc4; }
.period-card.band-2 .period-band { background: #73b4aa; }
.period-card.band-3 .period-band { background: #75b7b4; }
.period-card.band-4 .period-band { background: #619aae; }
.period-band strong { font: 600 14px "Onest", sans-serif; }
.period-band span { font-size: 10px; opacity: .9; }
.period-body { display: grid; align-content: center; min-height: 116px; padding: 18px; }
.period-body > strong { font: 600 23px "Onest", sans-serif; }
.period-body > span { margin-top: 8px; color: var(--muted); font-size: 10px; }
.period-empty { display: grid; justify-items: center; gap: 6px; color: #7d858e; text-align: center; }
.period-empty strong { color: #363a40; font-size: 12px; }
.period-empty span { font-size: 10px; }

.partial-data-banner { border-color: #c9e4ea !important; background: #f2fafc !important; color: #397488 !important; }
.partial-data-banner strong { color: #286386 !important; }
.neutral-banner { border-color: #dce4ec; background: #f7fafc; color: #536272; }
.neutral-banner strong { color: #344252; }
.confidence-copy { margin: -2px 0 12px; padding: 9px 11px; border-radius: 6px; background: #f0f8fa; color: #59646e; font-size: 10px; }
.trend-warn { color: #c8792f; font-weight: 700; }

.pnl-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  flex-wrap: wrap;
}

.toolbar-search input { width: 220px; }
.toolbar-spacer { flex: 1; }
.provisional-pill { padding: 7px 10px; border: 1px solid #f0d7bf; border-radius: 99px; background: #fff8f1; color: #ad6a2d; font-size: 10px; font-weight: 600; }
.date-input { height: 41px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); font-size: 10px; }
.date-input input { width: 118px; border: 0; outline: 0; background: transparent; color: #3d444c; font-size: 11px; }

.pnl-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.pnl-summary-strip > div { min-height: 80px; display: grid; align-content: center; gap: 7px; padding: 14px 20px; border-right: 1px solid var(--line); }
.pnl-summary-strip > div:last-child { border-right: 0; }
.pnl-summary-strip span { color: #777f8a; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pnl-summary-strip strong { font: 600 21px "Onest", sans-serif; }
.pnl-summary-strip strong small { color: #6b7280; font: 600 12px "Inter", sans-serif; }
.accent-value { color: var(--forest-2); }

.statement-switcher { width: max-content; margin: 18px 0 10px; }
.statement-switcher button { min-width: 126px; }
.statement-note { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 10px; padding: 10px 12px; border: 1px solid #dcecef; border-radius: 8px; background: #f2fafc; color: #59646e; font-size: 11px; line-height: 1.45; }
.statement-note-icon { width: 18px; height: 18px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #dceff3; color: #1686a0; font-weight: 700; }
.statement-table-meta { min-height: 50px; display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-bottom: 1px solid #e8edf2; }
.statement-table-meta strong { font-size: 12px; }
.statement-table-meta > span { color: #6b7280; font-size: 11px; }
.statement-table-meta .statement-tools { margin-left: auto; }
.statement-panel { overflow: hidden; }
.statement-scroll { max-width: 100%; overflow: auto; }
.statement-matrix { width: max-content; min-width: 100%; }
.statement-matrix th, .statement-matrix td { min-width: 160px; height: 38px; padding: 0 16px; border-bottom: 1px solid #c9e8e7; white-space: nowrap; color: #2b2b2b; }
.statement-matrix th { height: 58px; background: #f7f8fa; color: #334155; font-size: 12px; font-weight: 600; letter-spacing: 0; }
.statement-matrix th:first-child, .statement-matrix td:first-child { position: sticky; left: 0; z-index: 3; min-width: 310px; max-width: 310px; background: #fff; text-align: left; }
.statement-matrix th:first-child { z-index: 7; background: #f7f8fa; }
.statement-matrix .total-column { position: sticky; right: 130px; z-index: 4; min-width: 160px; background: #fff; font-weight: 700; }
.statement-matrix .percent-column { position: sticky; right: 0; z-index: 4; min-width: 130px; background: #fff; font-weight: 700; }
.statement-matrix th.total-column, .statement-matrix th.percent-column { z-index: 7; }
.statement-matrix tr.parent-row td { color: #2b2b2b; font-weight: 600; }
.statement-matrix tr.child-row.reference-row td { color: #6b7280; }
.statement-matrix tr.total td { background: #dff3ef; color: #2b2b2b; font-weight: 700; }
.statement-matrix tr.total td.amount-negative { background: #fde0e1; color: #c5221f; }
.statement-matrix tr.total td.amount-positive { background: #dff3ef; color: #26744d; }
.statement-matrix tr.total td.amount-zero { background: #f3f5f6; color: #6b7280; }
.statement-matrix tr.total .percent-column { background: #dff3ef; color: #2b2b2b; }
.section-row td { height: 26px !important; padding: 0 12px !important; background: #f7f8fa !important; border-bottom-color: #c9e8e7 !important; }
.section-row td:first-child { z-index: 5; }
.section-row .total-column, .section-row .percent-column { z-index: 5; }
.section-row button { width: 100%; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: #6b7280; font-size: 10px; font-weight: 700; letter-spacing: 0; text-align: left; cursor: pointer; }
.section-row button span { width: 12px; font-size: 16px; line-height: 10px; }
.row-indent { width: 16px; flex: 0 0 auto; }
.row-tag { margin-left: 8px; padding: 3px 5px; border-radius: 5px; font-size: 8px; font-weight: 600; }
.row-tag.estimated { background: #edf7fa; color: #33798c; }
.row-tag.partial { background: #fff1e4; color: #ad682b; }
.row-tag.reference { background: #f0f2f6; color: #697486; }
.missing-value { color: #a16a35; font-size: 9px; font-weight: 600; }
.numeric-cell { font-variant-numeric: tabular-nums; }
.empty-cell { padding: 35px !important; color: #7b8490; text-align: center !important; }
.empty-chart { min-height: 260px; display: grid; place-items: center; color: var(--muted); font-size: 12px; }

.range-tabs { display: flex; justify-content: flex-end; gap: 6px; margin: -12px 0 22px; overflow-x: auto; }
.range-tabs button { padding: 9px 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #6f7781; font-size: 12px; cursor: pointer; white-space: nowrap; }
.range-tabs button.active { border-color: var(--forest-2); color: var(--forest-2); font-weight: 600; }
.section-heading { display: flex; justify-content: space-between; align-items: center; margin: 22px 0 12px; }
.section-heading h2 { margin: 0; font: 600 17px "Onest", sans-serif; }
.section-heading span { color: var(--muted); font-size: 11px; }
.metrics-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.metrics-grid.compact-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-tile { min-height: 82px; display: grid; align-content: center; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: var(--shadow); }
.metric-label { display: flex; align-items: center; justify-content: space-between; gap: 5px; overflow: hidden; color: #777f89; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.metric-tile strong { overflow: hidden; font: 600 18px "Onest", sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.metric-tile small { color: var(--muted); font-size: 9px; }

.table-scroll { max-width: 100%; overflow: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: right; font-size: 11px; white-space: nowrap; }
.data-table th { background: #fafbfc; color: #7b838e; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
.data-table th:first-child, .data-table td:first-child { text-align: left; }
.data-table tbody tr:hover td { background: #fbfdfe; }
.country-link { border: 0; background: transparent; padding: 0; color: #2e586b; font-weight: 600; cursor: pointer; }
.status-chip, .finance-chip { display: inline-flex; padding: 4px 7px; border-radius: 99px; background: #f2f4f6; color: #5e6874; font-size: 8px; font-weight: 700; }
.finance-chip.final { background: #edf8ef; color: #4c8956; }
.finance-chip.provisional { background: #fff3e8; color: #aa6b31; }
.data-table code { color: #52616e; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
.adjustment-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(330px, .6fr); gap: 18px; }

.skeleton { position: relative; overflow: hidden; background: #edf1ef; border-radius: 8px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); animation: shimmer 1.5s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

.toast-region { position: fixed; right: 24px; bottom: 24px; z-index: 100; display: grid; gap: 10px; }
.toast { min-width: 270px; max-width: 380px; padding: 13px 15px; border-radius: 11px; background: #173f33; color: #fff; box-shadow: 0 12px 32px rgba(0,0,0,.18); font-size: 12px; animation: toast-in .25s ease; }
.toast.error { background: #9c403e; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.mobile-overlay { display: none; }

@media (max-width: 1120px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-periods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .two-column, .team-layout, .adjustment-layout { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-visual { display: none; }
  .sidebar { transform: translateX(-100%); transition: transform .25s ease; }
  .sidebar.open { transform: translateX(0); }
  .mobile-overlay.show { display: block; position: fixed; inset: 0; z-index: 19; background: rgba(15,35,28,.35); backdrop-filter: blur(2px); }
  .main-shell { margin-left: 0; }
  .topbar { justify-content: flex-end; }
  .topbar .mobile-menu { display: grid; }
  .topbar .timezone { display: none; }
  .main-content { padding-top: 24px; }
}

@media (max-width: 620px) {
  .login-panel { padding: 26px 22px; }
  .page-heading { flex-direction: column; }
  .heading-actions { width: 100%; justify-content: flex-start; }
  .kpi-grid, .page-grid, .overview-periods, .metrics-grid, .pnl-summary-strip { grid-template-columns: 1fr; }
  select.top-control { width: 172px; min-width: 0; }
  .topbar { padding: 0 14px; }
  .topbar > .icon-button:not(.mobile-menu) { display: none; }
  .confidence-legend { gap: 10px; flex-wrap: wrap; }
  .panel-header { align-items: flex-start; flex-direction: column; }
  .pnl-toolbar, .pnl-toolbar-group, .date-range-control { width: 100%; }
  .date-range-control { flex-wrap: wrap; }
  .date-range-control input { flex: 1; min-width: 125px; }
  .statement-tools { width: 100%; }
  .search-wrap, .search-wrap input { width: 100%; }
  .statement-table th, .statement-table td { padding: 12px 13px; }
  .country-row { grid-template-columns: 1fr 1.3fr 70px; }
  .country-row small { display: none; }
  .roadmap-list { grid-template-columns: 1fr; }
  .member-row { grid-template-columns: 1fr auto; }
  .member-date { display: none; }
  .member-delete, .member-self { grid-column: 2; grid-row: 1 / span 3; }
}