:root {
  --bg: #f1f2f4;
  --surface: #ffffff;
  --ink: #303030;
  --sub: #616161;
  --line: #e1e3e5;
  --nav: #ebedef;
  --nav-hover: #e3e5e7;
  --nav-active: #ffffff;
  --dark: #1a1a1a;
  --green: #29845a;
  --green-soft: #e3f1e9;
  --red: #b42318;
  --blue: #005bd3;
  --shadow: 0 1px 2px rgba(0,0,0,.05);
  --radius: 10px;
}

html, body {
  color: var(--ink);
  background: var(--bg);
  font-size: 14px;
}

button, a, input, select, textarea {
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #005bd3;
  outline-offset: 2px;
}

/* Top header */
.topbar {
  height: 56px;
  grid-template-columns: 240px minmax(320px, 620px) 1fr;
  gap: 20px;
  padding: 0 16px;
  color: #fff;
  background: #1a1a1a;
  border-bottom: 1px solid #303030;
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 2px 8px rgba(0,0,0,.16);
}

.store-mark {
  gap: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 650;
}

.store-logo {
  width: 32px;
  height: 32px;
  color: #174d31;
  background: #d7f0df;
  border-radius: 8px;
}

.global-search {
  height: 36px;
  color: #e3e3e3;
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.075));
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.16);
}

.global-search:focus-within {
  color: #202223;
  background: #fff;
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.24), 0 2px 7px rgba(0,0,0,.22);
}

.global-search input::placeholder { color: #b5b5b5; }
.global-search:focus-within input::placeholder { color: #8c9196; }

.kbd {
  color: #c9cccf;
  background: rgba(0,0,0,.16);
  border-color: rgba(255,255,255,.28);
}

.top-link, .profile-button { color: #fff; }
.top-link { padding: 7px 9px; border-radius: 7px; font-weight: 600; text-decoration: none; }
.top-link:hover, .profile-button:hover { background: rgba(255,255,255,.1); }
.profile-button { padding: 4px 7px; border-radius: 8px; }
.avatar { width: 28px; height: 28px; color: #174d31; background: #b7d8c3; border-radius: 8px; }

/* Sidebar */
.sidebar {
  top: 56px;
  width: 240px;
  padding: 12px 8px;
  background: #ebedef;
  border-right: 1px solid #dcdfe2;
  box-shadow: none;
}

.nav-group { gap: 2px; }

.nav-item {
  min-height: 36px;
  gap: 9px;
  padding: 8px 10px;
  color: #303030;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}

.nav-item:hover {
  color: #202223;
  background: #e1e3e5;
  transform: none;
}

.nav-item.active {
  color: #202223;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  font-weight: 650;
}

.nav-item .icon {
  width: 20px;
  color: #6d7175;
  font-size: 13px;
}

.nav-item.active .icon { color: #303030; }

.nav-item .badge,
.nav-item.active .badge {
  color: #4a4a4a;
  background: #dfe1e3;
}

.nav-label {
  padding: 22px 10px 7px;
  color: #6d7175;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.sidebar-bottom {
  padding-top: 12px;
  border-top: 1px solid #d9dcdf;
}

/* Main layout */
.main {
  margin-left: 240px;
  padding-top: 56px;
  background: #f1f2f4;
}

.page {
  width: min(1180px, calc(100% - 48px));
  padding: 32px 0 72px;
}

.page-head {
  align-items: center;
  margin-bottom: 20px;
}

.page-head h1 {
  margin: 0 0 5px;
  color: #202223;
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -.02em;
}

.page-head p {
  color: #616161;
  font-size: 13px;
}

/* Buttons */
.button {
  min-height: 34px;
  padding: 7px 12px;
  color: #303030;
  background: linear-gradient(180deg, #fff, #f7f7f7);
  border: 1px solid #babfc3;
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
  font-size: 13px;
  font-weight: 600;
}

.button:hover {
  background: #f1f2f3;
  border-color: #8c9196;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  transform: none;
}

.button:disabled,
.button:disabled:hover {
  opacity: .48;
  cursor: not-allowed;
  background: #f7f7f7;
  border-color: #d5d5d5;
  box-shadow: none;
  transform: none;
}

.button:active { background: #e8e9ea; box-shadow: inset 0 1px 2px rgba(0,0,0,.08); }

.button.primary {
  color: #fff;
  background: #303030;
  border-color: #303030;
}

.button.primary:hover { color: #fff; background: #1f1f1f; border-color: #1f1f1f; }
.button.small { min-height: 28px; padding: 4px 9px; font-size: 12px; }

/* Cards and metrics */
.card {
  background: #fff;
  border: 1px solid #e1e3e5;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.metrics {
  gap: 16px;
  margin-bottom: 20px;
}

.metric {
  min-height: 112px;
  padding: 18px 20px;
}

.metric-label {
  color: #616161;
  font-size: 12px;
}

.metric-label span:last-child {
  color: #6d7175;
  font-size: 11px;
}

.metric-value {
  margin-top: 9px;
  color: #303030;
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -.02em;
}

.metric-note {
  margin-top: 4px;
  color: #616161;
  font-size: 12px;
}

.home-grid {
  grid-template-columns: minmax(0,1.55fr) minmax(300px,.75fr);
  gap: 20px;
}

.home-grid > .stack { gap: 16px; }

.section-title {
  min-height: 54px;
  padding: 15px 18px;
  border-bottom: 1px solid #e9eaeb;
}

.section-title h2,
.card-pad h2 {
  color: #303030;
  font-size: 15px !important;
  font-weight: 650;
}

.card-pad { padding: 18px; }
.empty { padding: 48px 20px; color: #616161; line-height: 1.5; }

/* Quick actions */
.quick-grid { gap: 12px; }

.quick {
  min-height: 82px;
  padding: 15px;
  color: #303030;
  background: rgba(255,255,255,.8);
  border: 1px solid #e1e3e5;
  border-radius: 9px;
  box-shadow: 0 1px 1px rgba(0,0,0,.02);
}

.quick:hover {
  background: #fff;
  border-color: #aeb4b9;
  box-shadow: 0 2px 5px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

.quick strong { color: #303030; font-size: 13px; font-weight: 650; }
.quick span { display: block; margin-top: 4px; color: #616161; font-size: 12px; line-height: 1.45; }

/* Lists */
.task {
  align-items: flex-start;
  gap: 11px;
  padding: 15px 18px;
  border-bottom: 1px solid #f1f1f1;
}

.task:last-child { border-bottom: 0; }

.task-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 6px;
  box-shadow: none;
}

.task strong { color: #303030; font-size: 13px; font-weight: 600; }
.task p { margin-top: 3px; color: #616161; font-size: 12px; line-height: 1.5; }

/* Tables and analytics */
.analytics-strip {
  background: #fff;
  border-bottom: 1px solid #e1e3e5;
  border-radius: 10px 10px 0 0;
}

.analytics-item { padding: 17px 20px; border-right-color: #e1e3e5; }
.analytics-item span { color: #616161; font-size: 12px; }
.analytics-item strong { margin-top: 5px; color: #303030; font-size: 20px; font-weight: 650; }

.table-tools {
  padding: 14px 16px;
  background: #fafbfb;
  border-bottom-color: #e1e3e5;
}

.field-inline {
  height: 36px;
  color: #303030;
  background: #fff;
  border: 1px solid #babfc3;
  border-radius: 8px;
}

.field-inline:focus { border-color: #005bd3; box-shadow: 0 0 0 1px #005bd3; outline: 0; }

.data-table th {
  padding: 11px 14px;
  color: #616161;
  background: #f7f7f8;
  border-bottom-color: #e1e3e5;
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.data-table td { padding: 12px 14px; border-bottom-color: #f0f0f0; }
.data-table tbody tr:hover { background: #f7f8f8; }
.thumb { width: 42px; height: 42px; border-color: #e1e3e5; border-radius: 7px; }
.muted { color: #616161; }

.pill {
  padding: 3px 8px;
  color: #4a4a4a;
  background: #e4e5e7;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

.pill.active, .pill.paid, .pill.shipped { color: #17613f; background: #e3f1e9; }
.pill.pending, .pill.unfulfilled { color: #6b4f00; background: #fff2cf; }

/* Forms and drawers */
.drawer { background: #f6f6f7; box-shadow: -12px 0 32px rgba(0,0,0,.14); }
.drawer-head { height: 64px; padding: 0 20px; border-bottom-color: #e1e3e5; }
.drawer-head h2 { color: #303030; font-size: 17px; font-weight: 650; }
.drawer-body { padding: 18px; }
.drawer-section { padding: 18px; background: #fff; border-color: #e1e3e5; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.drawer-section h3 { color: #303030; font-weight: 650; }
.input { min-height: 40px; color: #303030; border-color: #babfc3; border-radius: 8px; }
.input:focus { border-color: #005bd3; box-shadow: 0 0 0 1px #005bd3; }
.drawer-foot { border-top-color: #e1e3e5; }

.login-view { background: #f1f2f4; }
.login-card { border-color: #e1e3e5; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }

@media (max-width: 980px) {
  .topbar { grid-template-columns: auto 1fr auto; }
  .sidebar { top: 56px; }
  .main { margin-left: 0; }
  .page { width: min(100% - 32px,1180px); }
  .home-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .topbar { padding: 0 8px; gap: 8px; }
  .page { width: min(100% - 20px,1180px); padding-top: 22px; }
  .metrics { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric { min-height: 104px; padding: 14px; }
  .metric-value { font-size: 22px; }
  .quick-grid { grid-template-columns: 1fr; }
  .table-tools { display: grid; }
}

@media (max-width: 430px) {
  .global-search { display: none; }
  .topbar { grid-template-columns: 1fr auto; }
  .metrics { grid-template-columns: 1fr; }
  .page-head { align-items: flex-start; }
}

/* Collapsible navigation */
.nav-accordion { display: grid; }
.nav-parent { position: relative; transition: color .15s ease, background .15s ease, font-weight .15s ease; }
.nav-parent:hover { background: #f5f5f5; }
.nav-parent.active { color: #0958d9; background: #f4f8ff; box-shadow: none; font-weight: 650; }
.nav-parent.active .icon,.nav-parent.active .nav-arrow { color: #1677ff; }
.nav-parent .badge { margin-left: auto; }
.nav-arrow { width: 18px; margin-left: 2px; color: #6d7175; text-align: center; transition: transform .2s ease; }
.nav-accordion.open .nav-arrow { transform: rotate(180deg); }
.nav-submenu { overflow: hidden; display: grid; max-height: 0; opacity: 0; transition: max-height .24s ease, opacity .18s ease, padding .24s ease; }
.nav-accordion.open .nav-submenu { max-height: 190px; padding: 3px 0 5px; opacity: 1; }
.nav-subitem { min-height: 34px; margin: 2px 7px 2px 29px; padding: 7px 11px; color: #616161; background: transparent; border: 0; border-radius: 7px; text-align: left; font-size: 12px; cursor: pointer; transition: color .15s ease,background .15s ease,font-weight .15s ease; }
.nav-subitem:hover:not(.active) { color: #303030; background: #f5f5f5; }
.nav-subitem.active { color: #1677ff; background: #e8f3ff; font-weight: 650; }
.sidebar-collapse-button { margin-bottom: 5px; border-top: 1px solid #d9dcdf; border-radius: 0; }
.sidebar-collapse-button:hover { transform: none; }
body.sidebar-collapsed .sidebar { width: 72px; }
body.sidebar-collapsed .main { margin-left: 72px; }
body.sidebar-collapsed .topbar { grid-template-columns: 72px minmax(320px,620px) 1fr; }
body.sidebar-collapsed .store-mark > span:last-child,
body.sidebar-collapsed .sidebar .nav-text,
body.sidebar-collapsed .sidebar .nav-label,
body.sidebar-collapsed .sidebar .badge,
body.sidebar-collapsed .sidebar .nav-arrow,
body.sidebar-collapsed .sidebar .nav-submenu { display: none; }
body.sidebar-collapsed .store-mark { justify-content: center; }
body.sidebar-collapsed .sidebar { padding-inline: 10px; }
body.sidebar-collapsed .sidebar .nav-item,
body.sidebar-collapsed .sidebar .nav-parent { justify-content: center; padding-inline: 8px; }
body.sidebar-collapsed .sidebar .icon { width: 24px; font-size: 15px; }

/* Analytics dashboard */
.dashboard-controls { display: flex; align-items: center; gap: 8px; }
.range-select { min-width: 132px; font-weight: 600; }
.dashboard-metrics { grid-template-columns: repeat(4,1fr); }
.analytics-metric { min-height: 126px; cursor: pointer; transition: border-color .15s,box-shadow .15s,transform .15s; }
.analytics-metric:hover { border-color: #b7b9bb; transform: translateY(-1px); }
.analytics-metric.selected { border-color: #29845a; box-shadow: 0 0 0 1px #29845a,0 2px 8px rgba(41,132,90,.12); }
.analytics-metric:focus-visible { outline: 2px solid #005bd3; outline-offset: 2px; }
.metric-period { padding: 2px 7px; color: #6d7175; background: #f1f2f3; border-radius: 12px; font-size: 10px; }
.metric-change { margin-top: 5px; color: #616161; font-size: 11px; line-height: 1.45; }
.metric-change span { font-weight: 650; }
.metric-change.positive span { color: #177c4c; }
.metric-change.negative span { color: #b42318; }
.metric-change.neutral span { color: #6d7175; }
.analytics-chart-card { margin-bottom: 20px; }
.analytics-chart-card .section-title { align-items: center; }
.analytics-chart-card .section-title p { margin: 3px 0 0; color: #616161; font-size: 11px; }
.chart-legend { display: flex; align-items: center; gap: 6px; color: #616161; font-size: 11px; }
.chart-legend span { width: 18px; height: 2px; display: inline-block; margin-left: 8px; border-radius: 2px; }
.chart-legend .visitor { background: #29845a; }
.chart-legend .sales { background: #7357c7; }
.chart-legend .previous { display:inline-block;width:18px;height:0;border-top:2px dashed #8c9196;margin:0 6px 2px 13px; }
.chart-wrap { position: relative; height: 350px; padding: 18px 20px 20px; }
.chart-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #616161; background: rgba(255,255,255,.88); font-size: 12px; }
.analytics-sources-card { margin-top: 16px; overflow: hidden; }
.analytics-sources-card > .section-title p { margin: 3px 0 0; color: #616161; font-size: 12px; font-weight: 400; }
.source-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.source-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 18px; border-top: 1px solid #eee; }
.source-row:nth-child(odd) { border-right: 1px solid #eee; }
.source-row > div:first-child,.source-values { display: flex; flex-direction: column; gap: 3px; }
.source-row span,.source-empty { color: #616161; font-size: 12px; }
.source-values { text-align: right; }
.source-values strong { font-size: 16px; color: #303030; }
.source-empty { padding: 24px 18px; border-top: 1px solid #eee; grid-column: 1/-1; text-align: center; }
.traffic-overview { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px; }
.ga4-panel { margin-bottom:18px;overflow:hidden; }
.ga4-panel-head { padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:18px; }
.ga4-panel-head>div { display:flex;align-items:center;gap:12px; }
.ga4-logo { width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#f9ab00,#e37400);color:#fff;display:grid;place-items:center;font-weight:800;font-size:18px; }
.ga4-panel h2 { margin:0;font-size:15px; }
.ga4-panel p { margin:3px 0 0;color:#616161;font-size:12px; }
.ga4-panel p.connected { color:#17613f; }
.ga4-panel p.pending { color:#8a6116; }
.looker-placeholder { min-height:130px;border-top:1px solid #eee;background:#fafafa;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px;text-align:center; }
.looker-placeholder span { color:#616161;font-size:12px; }
.looker-embed { height:620px;border-top:1px solid #eee;background:#f6f6f7; }
.looker-embed iframe { width:100%;height:100%;border:0;display:block; }
.traffic-stat { padding:18px;display:grid;gap:6px; }
.traffic-stat>span,.traffic-stat small { color:#616161;font-size:12px; }
.traffic-stat strong { color:#303030;font-size:25px;line-height:1.15; }
.traffic-layout { display:grid;grid-template-columns:minmax(300px,.8fr) minmax(520px,1.4fr);gap:18px;align-items:start; }
.traffic-layout .section-title p { margin:3px 0 0;color:#616161;font-size:12px;font-weight:400; }
.traffic-source-chart { padding:5px 18px 20px; }
.traffic-source-row { padding-top:16px; }
.traffic-source-head { display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px; }
.traffic-source-head span { color:#616161;font-size:12px; }
.traffic-source-track { height:8px;background:#eef0f1;border-radius:99px;overflow:hidden;margin-top:8px; }
.traffic-source-track i { display:block;height:100%;min-width:2px;background:linear-gradient(90deg,#29845a,#69a985);border-radius:inherit; }
.traffic-landing-card .data-table { min-width:620px; }
.landing-path { max-width:330px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

@media (max-width: 980px) {
  body.sidebar-collapsed .main { margin-left: 0; }
  body.sidebar-collapsed .topbar { grid-template-columns: auto 1fr auto; }
  .sidebar-collapse-button { display: none; }
  .dashboard-metrics { grid-template-columns:repeat(2,1fr); }
  .traffic-layout { grid-template-columns:1fr; }
}
@media (max-width: 720px) {
  .dashboard-metrics { grid-template-columns: repeat(2,1fr); }
  .dashboard-controls { align-items: stretch; }
  .chart-wrap { height: 300px; padding-inline: 10px; }
  .chart-legend { display: none; }
  .source-list { grid-template-columns: 1fr; }
  .source-row:nth-child(odd) { border-right: 0; }
  .traffic-overview { grid-template-columns:1fr; }
  .ga4-panel-head { align-items:flex-start;flex-direction:column; }
}
@media (max-width: 430px) {
  .dashboard-metrics { grid-template-columns: 1fr; }
  .dashboard-controls { flex-direction: column; }
  .range-select { width: 100%; }
}
.ga4-data{border-top:1px solid #e3e3e3;padding:18px}.ga4-data-loading,.ga4-data-error{padding:28px;text-align:center;color:#616161}.ga4-data-error{color:#b42318}.ga4-live-metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.ga4-live-metrics>div{padding:14px;border:1px solid #e3e3e3;border-radius:10px;background:#fafafa}.ga4-live-metrics span{display:block;color:#616161;font-size:12px}.ga4-live-metrics strong{display:block;margin-top:6px;font-size:20px}.ga4-live-breakdown{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.ga4-live-breakdown section{border:1px solid #e3e3e3;border-radius:10px;padding:14px}.ga4-live-breakdown h3{margin:0 0 10px;font-size:14px}.ga4-live-breakdown p{display:flex;justify-content:space-between;margin:0;padding:8px 0;border-bottom:1px solid #f1f1f1}.ga4-live-breakdown p:last-child{border:0}@media(max-width:900px){.ga4-live-metrics{grid-template-columns:repeat(2,1fr)}.ga4-live-breakdown{grid-template-columns:1fr}}