:root {
  color-scheme: light;
  --ink-strong: #121714;
  --ink: #252b27;
  --muted: #5f6963;
  --soft: #747d77;
  --line: #d9ddd7;
  --line-strong: #c2c9c2;
  --canvas: #f5f5f1;
  --surface: #ffffff;
  --surface-soft: #f8f8f5;
  --sidebar-bg: #1d2420;
  --sidebar-hover: #28312c;
  --sidebar-active: #303a34;
  --forest: #245746;
  --forest-deep: #1c4035;
  --emerald: #247052;
  --emerald-soft: #e9f2ed;
  --orange: #c9501f;
  --orange-soft: #f9ece6;
  --red: #b63d3d;
  --red-soft: #f9eaea;
  --amber: #8a601b;
  --amber-soft: #f8f0dd;
  --focus: #2e8062;
  --shadow-sm: 0 1px 2px rgba(18, 23, 20, .045), 0 6px 18px rgba(18, 23, 20, .025);
  --shadow-lg: 0 22px 70px rgba(18, 23, 20, .18);
  --radius: 12px;
  --sidebar: 256px;
  --topbar: 80px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 17px;
  font-family: "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }
html {
  min-width: 320px;
  min-height: 100%;
  background: var(--canvas);
  scroll-padding-top: calc(var(--topbar) + 16px);
}
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-size: var(--text-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea {
  font: inherit;
  line-height: 1.35;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button, [role="button"] { touch-action: manipulation; }
img { display: block; max-width: 100%; }
strong, b { font-variant-numeric: tabular-nums lining-nums; }
h1, h2, h3, h4, p { overflow-wrap: anywhere; }
p { text-wrap: pretty; }
::selection { color: var(--ink-strong); background: #d7e9df; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.ui-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.boot-screen,
.login-screen {
  min-height: 100vh;
  padding: clamp(24px, 5vw, 72px);
}

.boot-screen {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  color: var(--muted);
}

.brand-mark {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  color: #fff;
  background: var(--orange);
  box-shadow: var(--shadow-sm);
  font-size: 17px;
  font-weight: 800;
}

.login-screen {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(300px, 1.15fr) minmax(360px, .85fr);
  align-items: center;
  gap: clamp(48px, 9vw, 140px);
  overflow: hidden;
  background: var(--sidebar-bg);
}
.login-screen::after {
  position: absolute;
  z-index: -1;
  inset: 0 0 0 58%;
  content: "";
  background: var(--canvas);
}
.login-story {
  width: min(100%, 620px);
  color: #fff;
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(64px, 10vh, 104px);
}
.login-brand small,
.sidebar-brand small {
  display: block;
  margin-bottom: 2px;
  color: rgba(255, 255, 255, .66);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}
.login-brand b { font-size: 15px; }
.login-story .eyebrow { color: #adc8bc; }
.login-story h1 {
  max-width: 620px;
  margin: 14px 0 18px;
  color: #f5f6f4;
  font-size: clamp(36px, 4.4vw, 56px);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.login-story > p {
  max-width: 570px;
  margin: 0;
  color: rgba(255, 255, 255, .76);
  font-size: 16px;
  line-height: 1.7;
}
.login-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 50px;
  border-top: 1px solid rgba(255, 255, 255, .13);
}
.login-points div {
  min-width: 0;
  padding: 18px 20px 0 0;
}
.login-points div + div {
  padding-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, .13);
}
.login-points span {
  display: block;
  margin-bottom: 12px;
  color: #e08a64;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .08em;
}
.login-points b {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
}
.login-points small {
  display: block;
  color: rgba(255, 255, 255, .66);
  font-size: 14px;
  line-height: 1.45;
}
.login-card {
  width: min(100%, 420px);
  justify-self: end;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 18px 50px rgba(18, 23, 20, .09);
}
.login-card h2 {
  margin: 30px 0 8px;
  color: var(--ink-strong);
  font-size: 25px;
  font-weight: 670;
  letter-spacing: -.03em;
}
.login-card > p {
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.login-card label > span {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
}
.login-code,
.login-input {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink-strong);
  background: var(--surface-soft);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.login-input {
  font-size: 15px;
  font-weight: 550;
  letter-spacing: normal;
  text-transform: none;
}
.login-card form { display: grid; gap: 14px; }
.login-code:focus {
  border-color: var(--focus);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(46, 128, 98, .12);
}
.login-input:focus {
  border-color: var(--focus);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(46, 128, 98, .12);
}
.auth-switch {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 0;
  border: 0;
  color: var(--forest);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  text-align: center;
}
.auth-switch:hover { color: var(--orange); }
.login-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.5;
}
.login-note .ui-icon {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--emerald);
}

.app-shell {
  min-height: 100vh;
  padding-left: var(--sidebar);
}
.sidebar {
  position: fixed;
  z-index: 30;
  inset: 0 auto 0 0;
  display: flex;
  width: var(--sidebar);
  flex-direction: column;
  overflow-y: auto;
  padding: 20px 14px 0;
  color: #fff;
  background: var(--sidebar-bg);
  scrollbar-color: rgba(255, 255, 255, .14) transparent;
  scrollbar-width: thin;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 2px 8px 24px;
}
.sidebar-brand b {
  display: block;
  font-size: 15px;
  font-weight: 650;
}
.side-label {
  margin: 22px 12px 9px;
  color: rgba(255, 255, 255, .48);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
}
.side-nav {
  display: grid;
  gap: 3px;
}
.side-nav button {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  color: rgba(255, 255, 255, .72);
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 560;
  text-align: left;
  transition: color .16s ease, background .16s ease;
}
.side-nav button::before {
  position: absolute;
  inset: 10px auto 10px -14px;
  width: 3px;
  content: "";
  border-radius: 0 2px 2px 0;
  background: transparent;
}
.side-nav button:hover {
  color: #fff;
  background: var(--sidebar-hover);
}
.side-nav button.is-active {
  color: #fff;
  background: var(--sidebar-active);
}
.side-nav button.is-active::before { background: var(--orange); }
.nav-icon {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  flex: 0 0 auto;
  color: #9ab8ab;
}
.nav-icon .ui-icon {
  width: 17px;
  height: 17px;
}
.side-nav button.is-active .nav-icon { color: #d9e7e0; }
.decision-nav {
  padding-bottom: 12px;
}
.decision-nav button {
  min-height: 42px;
  font-size: 13px;
}
.decision-nav .nav-icon .ui-icon {
  width: 15px;
  height: 15px;
}
.side-bottom {
  margin: auto -14px 0;
  padding: 18px 22px 20px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: var(--sidebar-bg);
}
.server-line {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, .6);
  font-size: 13px;
  line-height: 1.45;
}
.status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  margin-top: 3px;
  border-radius: 50%;
  background: #65b88f;
}
.text-button {
  min-height: 40px;
  padding: 0;
  border: 0;
  color: rgba(255, 255, 255, .62);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
}
.text-button:hover { color: #fff; }

.workspace { min-width: 0; }
.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  min-height: var(--topbar);
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 11px clamp(22px, 3vw, 44px);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 0 rgba(18, 23, 20, .02);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.top-title {
  min-width: 0;
}
.top-title > span {
  display: none;
  color: var(--soft);
  font-size: 13px;
  font-weight: 650;
}
.topbar h1 {
  margin: 0 0 3px;
  color: var(--ink-strong);
  font-size: 16px;
  font-weight: 680;
  letter-spacing: -.015em;
}
.topbar p {
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}
.page {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 36px clamp(22px, 3vw, 44px) 72px;
}

.eyebrow {
  display: inline-block;
  color: var(--emerald);
  font-size: 13px;
  font-weight: 720;
  letter-spacing: .015em;
  text-transform: none;
}
.page-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 26px;
}
.page-intro h2 {
  margin: 7px 0 6px;
  color: var(--ink-strong);
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 670;
  line-height: 1.18;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.page-intro p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.intro-meta {
  min-width: 230px;
  padding: 4px 0 4px 20px;
  border-left: 1px solid var(--line-strong);
}
.intro-meta span {
  display: block;
  margin-bottom: 4px;
  color: var(--soft);
  font-size: 13px;
}
.intro-meta strong {
  display: block;
  font-size: 14px;
  font-weight: 620;
}

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 680;
  line-height: 1;
  transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.button .ui-icon {
  width: 15px;
  height: 15px;
}
.button:disabled {
  opacity: .58;
  cursor: wait;
}
.button.primary {
  color: #fff;
  background: var(--forest);
}
.button.primary:hover:not(:disabled) {
  background: var(--forest-deep);
  box-shadow: 0 5px 14px rgba(28, 64, 53, .16);
}
.button.secondary {
  color: var(--ink);
  border-color: var(--line-strong);
  background: #fff;
}
.button.secondary:hover:not(:disabled) {
  border-color: #aeb4ad;
  background: var(--surface-soft);
}
.button.ghost {
  color: var(--forest);
  border-color: transparent;
  background: var(--emerald-soft);
}
.button.ghost:hover:not(:disabled) { background: #ddebe4; }
.button.danger {
  color: #fff;
  background: var(--red);
}
.button.full {
  width: 100%;
  margin-top: 14px;
}
.anchor-button { text-decoration: none; }
.with-icon { display: inline-flex; align-items: center; gap: 7px; }

.card,
.coverage-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(290px, .65fr);
  gap: 12px;
}
.profit-hero {
  display: flex;
  min-height: 236px;
  flex-direction: column;
  padding: 28px;
  color: #fff;
  border-radius: var(--radius);
  background: #203f34;
  box-shadow: var(--shadow-sm);
}
.hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.hero-head span {
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
}
.hero-head b {
  display: block;
  margin-top: 9px;
  color: #f7f8f7;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -.05em;
}
.hero-head b.is-positive { color: #f7f8f7 !important; }
.hero-head b.is-negative { color: #ffc0ba !important; }
.accuracy-badge {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 6px;
  color: rgba(255, 255, 255, .76);
  background: rgba(255, 255, 255, .04);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.accuracy-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d8a170;
}
.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: auto;
  padding-top: 38px;
}
.hero-metrics div {
  min-width: 0;
  padding: 14px 20px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .13);
}
.hero-metrics div + div { padding-left: 20px; }
.hero-metrics span {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, .68);
  font-size: 12px;
}
.hero-metrics b {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 16px;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coverage-card {
  display: flex;
  min-height: 236px;
  flex-direction: column;
  padding: 25px;
}
.card-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .015em;
  text-transform: none;
}
.coverage-value {
  display: block;
  margin: 15px 0 2px;
  color: var(--ink-strong);
  font-size: 36px;
  font-weight: 670;
  line-height: 1.1;
  letter-spacing: -.045em;
}
.coverage-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.progress {
  height: 7px;
  margin: 18px 0 10px;
  overflow: hidden;
  border-radius: 2px;
  background: #e8ebe7;
}
.progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--orange);
}
.coverage-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.coverage-card .button { margin-top: auto; }

.section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 34px 0 12px;
}
.section-title h3 {
  margin: 3px 0 0;
  color: var(--ink-strong);
  font-size: 17px;
  font-weight: 660;
  letter-spacing: -.02em;
}
.section-title p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.stat-card {
  min-height: 132px;
  padding: 20px;
}
.stat-card span {
  color: var(--muted);
  font-size: 13px;
}
.stat-card strong {
  display: block;
  margin: 16px 0 6px;
  color: var(--ink-strong);
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -.035em;
}
.stat-card small {
  display: block;
  color: var(--soft);
  font-size: 12px;
  line-height: 1.4;
}
.stat-card strong.is-positive { color: var(--emerald); }
.stat-card strong.is-negative { color: var(--red); }
.breakdown-card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
}
.breakdown-item {
  min-width: 0;
  padding: 19px 20px;
  border-right: 1px solid var(--line);
}
.breakdown-item:last-child { border: 0; }
.breakdown-item span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
}
.breakdown-item b {
  display: block;
  overflow: hidden;
  color: var(--ink-strong);
  font-size: 14px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.breakdown-item b.expense { color: var(--red); }

.empty-state,
.loading-state {
  display: grid;
  min-height: 360px;
  place-items: center;
  align-content: center;
  padding: 40px;
  text-align: center;
}
.empty-state > div,
.loading-state > div { justify-items: center; }
.state-icon {
  display: grid;
  width: 46px;
  height: 46px;
  margin: 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--forest);
  background: var(--surface-soft);
}
.empty-state h2,
.loading-state h2 {
  margin: 16px 0 6px;
  color: var(--ink-strong);
  font-size: 19px;
}
.empty-state p,
.loading-state p {
  max-width: 480px;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.loader-ring {
  width: 38px;
  height: 38px;
  border: 3px solid #dde4df;
  border-top-color: var(--emerald);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.alert {
  margin: 12px 0;
  padding: 12px 13px;
  border: 1px solid #e7bcbc;
  border-radius: 8px;
  color: #842f2f;
  background: var(--red-soft);
  font-size: 13px;
  line-height: 1.45;
}

.toast-root {
  position: fixed;
  z-index: 100;
  right: 20px;
  bottom: 20px;
  display: grid;
  gap: 8px;
  pointer-events: none;
}
.toast {
  max-width: 380px;
  padding: 12px 14px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: var(--sidebar-bg);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  animation: toast-in .16s ease both;
}
.toast.is-error { background: #8e3131; }
.mobile-menu,
.mobile-nav { display: none; }
.global-progress {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 8px 20px;
  color: #704d15;
  border-bottom: 1px solid #e5d3aa;
  background: #faf3e2;
  font-size: 13px;
}
.global-progress i {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(138, 96, 27, .22);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

.link-button {
  min-height: 36px;
  padding: 0;
  border: 0;
  color: var(--forest);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}
.link-button:hover { color: var(--orange); }
.link-button .ui-icon {
  width: 14px;
  height: 14px;
}
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
.is-positive { color: var(--emerald) !important; }
.is-negative { color: var(--red) !important; }

.method-note {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 14px;
  padding: 15px 17px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f0f3ef;
}
.method-note > .ui-icon {
  width: 18px;
  height: 18px;
  color: var(--forest);
}
.method-note > div { flex: 1; }
.method-note b {
  display: block;
  margin-bottom: 2px;
  color: var(--ink-strong);
  font-size: 13px;
}
.method-note p {
  max-width: 800px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.method-note > span {
  padding-left: 16px;
  color: var(--emerald);
  border-left: 1px solid var(--line-strong);
  font-size: 12px;
  font-weight: 680;
  white-space: nowrap;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.module-grid.compact-modules { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.module-tile {
  position: relative;
  display: grid;
  min-height: 126px;
  grid-template-columns: 36px 1fr;
  align-content: start;
  gap: 12px;
  padding: 16px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: border-color .16s ease, background .16s ease;
}
.module-tile:hover {
  border-color: var(--line-strong);
  background: #fdfdfb;
}
.module-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: var(--forest);
  border: 1px solid #dce6e0;
  border-radius: 8px;
  background: var(--emerald-soft);
}
.module-icon .ui-icon {
  width: 17px;
  height: 17px;
}
.module-tile h3 {
  margin: 2px 0 5px;
  color: var(--ink-strong);
  font-size: 14px;
  font-weight: 660;
}
.module-tile p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.48;
}
.module-tile > i {
  position: absolute;
  right: 14px;
  bottom: 12px;
  display: grid;
  color: var(--soft);
  font-style: normal;
}
.module-tile > i .ui-icon {
  width: 14px;
  height: 14px;
}

.product-intro { align-items: center; }
.intro-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}
.mini-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 0 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.mini-stat-row div {
  min-width: 0;
  padding: 13px 16px;
  border-right: 1px solid var(--line);
}
.mini-stat-row div:last-child { border: 0; }
.mini-stat-row span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
}
.mini-stat-row b {
  display: block;
  overflow: hidden;
  color: var(--ink-strong);
  font-size: 15px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
}
.toolbar select {
  min-width: 160px;
  height: 46px;
  padding: 0 34px 0 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: #fff;
  font-size: 13px;
}
.toolbar select:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(46, 128, 98, .1);
}
.search-field {
  display: flex;
  min-width: 240px;
  height: 46px;
  flex: 1;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}
.search-field > span {
  display: grid;
  color: var(--soft);
}
.search-field .ui-icon {
  width: 16px;
  height: 16px;
}
.search-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 14px;
}
.search-field:focus-within {
  border-color: var(--focus);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(46, 128, 98, .1);
}
.result-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 2px 8px;
  color: var(--muted);
  font-size: 13px;
}
.result-line span {
  color: var(--ink);
  font-weight: 650;
}
.product-table {
  overflow: hidden;
}
.product-table-head,
.product-row {
  display: grid;
  grid-template-columns: minmax(270px, 2.5fr) repeat(5, minmax(76px, .75fr)) 72px;
  gap: 12px;
  align-items: center;
}
.product-table-head {
  min-height: 44px;
  padding: 0 13px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
  font-size: 12px;
  font-weight: 650;
}
.product-list { display: grid; }
.product-row {
  min-height: 94px;
  padding: 12px 13px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  transition: background .14s ease;
}
.product-row:last-child { border-bottom: 0; }
.product-row:hover { background: #fbfbf8; }
.product-main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
}
.product-main > div:last-child { min-width: 0; }
.product-main h3 {
  margin: 0 0 5px;
  overflow: hidden;
  color: var(--ink-strong);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-main p {
  margin: 0 0 7px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-avatar {
  display: grid;
  width: 48px;
  height: 58px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--emerald);
  background: var(--emerald-soft);
  font-weight: 700;
}
.product-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-avatar.large {
  width: 72px;
  height: 86px;
  grid-row: 1 / 3;
}
.status-chip {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.15;
}
.status-chip.is-success {
  color: #245f49;
  border-color: #cee2d7;
  background: var(--emerald-soft);
}
.status-chip.is-warning {
  color: #795319;
  border-color: #ead7ae;
  background: var(--amber-soft);
}
.status-chip.is-danger {
  color: #963737;
  border-color: #ebc7c7;
  background: var(--red-soft);
}
.product-cell { min-width: 0; }
.product-cell span,
.product-cell small {
  display: none;
  color: var(--muted);
  font-size: 12px;
}
.product-cell b {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-cell small { margin-top: 2px; }
.row-action {
  min-height: 40px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--forest);
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}
.row-action:hover {
  border-color: #9db4aa;
  background: var(--emerald-soft);
}
.load-more {
  display: flex;
  min-width: 220px;
  margin: 16px auto 0;
}
.no-result {
  display: grid;
  min-height: 140px;
  place-items: center;
  align-content: center;
  gap: 5px;
  color: var(--muted);
}
.no-result b { color: var(--ink); }
.no-result span { font-size: 13px; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.form-field {
  display: block;
  min-width: 0;
}
.form-field > span {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 620;
}
.form-field > div {
  display: flex;
  height: 48px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}
.form-field input,
.form-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: var(--surface-soft);
  font-size: 14px;
}
.form-field > div input {
  min-width: 0;
  height: 100%;
  padding: 0 11px;
  border: 0;
  outline: 0;
  border-radius: 0;
  background: transparent;
}
.form-field > div i {
  display: grid;
  min-width: 42px;
  place-items: center;
  color: var(--muted);
  border-left: 1px solid var(--line);
  background: #eff1ee;
  font-size: 12px;
  font-style: normal;
}
.form-field textarea {
  min-height: 112px;
  resize: vertical;
  padding: 11px;
  line-height: 1.5;
}
.form-field > input {
  height: 48px;
  padding: 0 11px;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field > div:focus-within {
  border-color: var(--focus);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(46, 128, 98, .1);
}
.form-field small {
  display: block;
  margin-top: 5px;
  color: var(--soft);
  font-size: 12px;
  line-height: 1.4;
}
.full-field { grid-column: 1 / -1; }
.toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}
.toggle-field {
  display: flex;
  min-height: 64px;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  background: #fbfbf8;
}
.toggle-field:has(input:focus-visible) {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(46, 128, 98, .1);
}
.toggle-field input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.toggle-field > span {
  position: relative;
  width: 31px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #c6cbc7;
  transition: background .16s ease;
}
.toggle-field > span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  content: "";
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  transition: transform .16s ease;
}
.toggle-field input:checked + span { background: var(--emerald); }
.toggle-field input:checked + span::after { transform: translateX(13px); }
.toggle-field b {
  display: block;
  font-size: 13px;
  font-weight: 620;
}
.toggle-field small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.calculator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
  align-items: start;
  gap: 12px;
}
.calculator-form { padding: 22px; }
.calculator-rule-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f7f9f8;
}
.calculator-rule-card.is-active {
  border-color: #c9ddd3;
  background: #f2f8f5;
}
.calculator-rule-card > .toggle-field { margin-bottom: 14px; }
.commission-rule-card { margin-bottom: 2px; }
.rule-inline-preview {
  padding: 10px;
  border: 1px solid #dbe6e0;
  border-radius: 7px;
  background: rgba(255, 255, 255, .72);
}
.rule-inline-preview span,
.rule-inline-preview small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.rule-inline-preview b {
  display: block;
  margin: 3px 0 2px;
  color: var(--forest);
  font-size: 15px;
}
.shipping-rule-grid { margin-bottom: 13px; }
.shipping-rule-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 9px;
}
.shipping-rule-save {
  margin-top: 9px;
  padding: 10px;
  border: 1px solid #dbe6e0;
  border-radius: 7px;
  background: rgba(255, 255, 255, .72);
}
.shipping-rule-footer .toggle-field,
.shipping-rule-preview {
  min-height: 55px;
  padding: 10px;
  border: 1px solid #dbe6e0;
  border-radius: 7px;
  background: rgba(255, 255, 255, .72);
}
.shipping-rule-preview span,
.shipping-rule-preview small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.shipping-rule-preview b {
  display: block;
  margin: 3px 0 2px;
  color: var(--forest);
  font-size: 15px;
}
.rule-disclosure {
  margin: 11px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.form-field.is-disabled { opacity: .52; }
.form-field.is-disabled input { cursor: not-allowed; }
.calculator-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 4px;
}
.calculator-actions .button { width: 100%; }
.form-section-title {
  margin: 2px 0 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.form-section-title:not(:first-child) { margin-top: 25px; }
.form-section-title > div,
.block-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}
.form-section-title > div > span,
.block-heading > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #d7e4dd;
  border-radius: 6px;
  color: var(--forest);
  background: var(--emerald-soft);
  font-size: 12px;
  font-weight: 700;
}
.form-section-title b {
  display: block;
  color: var(--ink-strong);
  font-size: 14px;
}
.form-section-title small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 12px;
}
.calculator-result {
  position: sticky;
  top: calc(var(--topbar) + 18px);
  min-height: 510px;
  overflow: hidden;
  color: var(--ink);
  border: 1px solid #d8ddd8;
  border-radius: var(--radius);
  background: #f4f6f3;
  box-shadow: 0 14px 38px rgba(26, 51, 42, .09);
  scroll-margin-top: calc(var(--topbar) + 12px);
}
.calculator-result.has-result {
  border-color: #cbd5cf;
}
.optimization-result {
  padding: 20px;
  color: #4b2b19;
  border-bottom: 1px solid #ead6c8;
  background: #fff6ef;
}
.optimization-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.result-kicker {
  display: block;
  color: #b94b21;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .13em;
}
.optimization-head b {
  display: block;
  margin-top: 5px;
  color: #38251b;
  font-size: 15px;
}
.optimization-head small {
  display: block;
  max-width: 310px;
  margin-top: 4px;
  color: #775f50;
  font-size: 13px;
  line-height: 1.45;
}
.optimization-head > strong {
  flex: 0 0 auto;
  color: #9f3f1d;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -.04em;
}
.optimization-alternatives {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}
.optimization-alternatives > div {
  padding: 11px 12px;
  border: 1px solid #eadbd1;
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
}
.optimization-alternatives > div.is-selected {
  border-color: #c55b31;
  background: #fff;
  box-shadow: inset 3px 0 #c55b31;
}
.optimization-alternatives span,
.optimization-alternatives b,
.optimization-alternatives small { display: block; }
.optimization-alternatives span,
.optimization-alternatives small { color: #79685e; font-size: 13px; }
.optimization-alternatives b { margin: 3px 0; color: #38251b; font-size: 15px; }
.calculator-placeholder {
  display: grid;
  min-height: 510px;
  align-content: center;
  justify-items: center;
  padding: 36px;
  text-align: center;
}
.calculator-placeholder > div {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid #cddbd4;
  border-radius: 8px;
  color: var(--forest);
  background: var(--emerald-soft);
  font-size: 20px;
  font-weight: 700;
}
.calculator-placeholder h3 {
  margin: 16px 0 5px;
  color: var(--ink-strong);
  font-size: 17px;
  font-weight: 640;
}
.calculator-placeholder p {
  max-width: 280px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.calculator-placeholder ul {
  display: grid;
  width: 100%;
  gap: 0;
  margin: 28px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
  text-align: left;
}
.calculator-placeholder li {
  padding: 10px 0;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.calculator-placeholder li::before {
  margin-right: 8px;
  color: var(--emerald);
  content: "—";
}
.result-hero {
  padding: 25px 24px 23px;
  color: #fff;
  background: #214d40;
}
.result-hero.is-negative {
  background: #693a35;
}
.result-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.result-hero .result-kicker { color: #ffd1b4; }
.result-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  color: #d9eee5;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  font-size: 13px;
  font-weight: 700;
}
.result-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #55d89e;
  box-shadow: 0 0 0 3px rgba(85, 216, 158, .14);
}
.result-hero.is-negative .result-status { color: #ffe1da; }
.result-hero.is-negative .result-status i {
  background: #ff9f8d;
  box-shadow: 0 0 0 3px rgba(255, 159, 141, .14);
}
.result-profit-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-top: 20px;
}
.result-profit-label {
  display: block;
  color: rgba(255, 255, 255, .73);
  font-size: 14px;
}
.result-profit-row strong {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-size: clamp(38px, 4vw, 50px);
  font-weight: 720;
  line-height: 1;
  letter-spacing: -.05em;
}
.result-margin-pill {
  min-width: 112px;
  padding: 10px 12px;
  color: #173c31;
  border-radius: 9px;
  background: #f0f8f4;
  text-align: right;
}
.result-hero.is-negative .result-margin-pill {
  color: #542c29;
  background: #fff0ec;
}
.result-margin-pill span,
.result-margin-pill b { display: block; }
.result-margin-pill span { font-size: 13px; }
.result-margin-pill b { margin-top: 2px; font-size: 18px; }
.result-hero > p {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .7);
  font-size: 14px;
  line-height: 1.5;
}
.result-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  padding: 16px;
}
.result-kpi {
  min-height: 112px;
  padding: 15px;
  border: 1px solid #dfe4df;
  border-radius: 9px;
  background: #fff;
  box-shadow: inset 3px 0 #7c9a8d;
}
.result-kpi.is-vat { box-shadow: inset 3px 0 #6083a0; }
.result-kpi.is-tax { box-shadow: inset 3px 0 #b27b32; }
.result-kpi.is-cash { box-shadow: inset 3px 0 #2f7d5c; }
.result-kpi.is-cash.is-negative { box-shadow: inset 3px 0 #b44a42; }
.result-kpi span,
.result-kpi b,
.result-kpi small {
  display: block;
}
.result-kpi span {
  color: #59635d;
  font-size: 14px;
  font-weight: 700;
}
.result-kpi b {
  margin-top: 7px;
  color: #183d32;
  font-size: 20px;
  line-height: 1.15;
}
.result-kpi.is-vat b { color: #365f7b; }
.result-kpi.is-tax b { color: #76501b; }
.result-kpi.is-cash.is-negative b { color: var(--red); }
.result-kpi small {
  margin-top: 6px;
  color: #737c77;
  font-size: 13px;
  line-height: 1.4;
}
.result-breakdown {
  overflow: hidden;
  margin: 0 16px;
  border: 1px solid #dfe4df;
  border-radius: 9px;
  background: #fff;
}
.result-breakdown header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid #e6e9e5;
  background: #fafbf9;
}
.result-breakdown header span,
.result-breakdown header small { display: block; }
.result-breakdown header span {
  color: var(--ink-strong);
  font-size: 15px;
  font-weight: 750;
}
.result-breakdown header small { color: var(--muted); font-size: 13px; }
.result-breakdown header > b {
  color: #59635d;
  font-size: 14px;
}
.profit-result-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 16px;
  border-bottom: 1px solid #eceeeb;
}
.profit-result-line:last-child { border: 0; }
.profit-result-line span { color: #59635d; font-size: 14px; }
.profit-result-line b { color: var(--ink-strong); font-size: 14px; }
.profit-result-line.is-income b { color: #246448; }
.profit-result-line.is-expense b { color: #a4433b; }
.result-rule-note {
  margin: 14px 16px 10px;
  padding: 13px 14px;
  color: #29483d;
  border: 1px solid #d4e2db;
  border-radius: 9px;
  background: #edf4f0;
}
.result-rule-note b { display: block; font-size: 14px; }
.result-rule-note p {
  margin: 4px 0 0;
  color: #53685f;
  font-size: 14px;
  line-height: 1.5;
}
.result-disclosure {
  margin: 0;
  padding: 2px 17px 18px;
  color: #6b746f;
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 580px) {
  .optimization-head,
  .result-profit-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .optimization-head > strong { font-size: 29px; }
  .optimization-alternatives,
  .result-kpis { grid-template-columns: 1fr; }
  .result-margin-pill { text-align: left; }
  .result-kpi { min-height: 0; }
  .result-breakdown header {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
}

.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(290px, .65fr);
  align-items: start;
  gap: 12px;
}
.settings-form { padding: 22px; }
.settings-shipping-rules {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid #d5e2db;
  border-radius: 9px;
  background: #f3f8f5;
}
.settings-shipping-rules > .toggle-field:first-child { margin-bottom: 14px; }
.settings-shipping-rules > .toggle-field:last-child { margin-top: 4px; }
.settings-block + .settings-block {
  margin-top: 26px;
  padding-top: 23px;
  border-top: 1px solid var(--line);
}
.block-heading {
  align-items: flex-start;
  margin-bottom: 17px;
}
.block-heading h3 {
  margin: 1px 0 3px;
  color: var(--ink-strong);
  font-size: 15px;
  font-weight: 650;
}
.block-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.settings-side {
  display: grid;
  gap: 10px;
}
.transfer-card { padding: 21px; }
.transfer-card h3 {
  margin: 16px 0 7px;
  color: var(--ink-strong);
  font-size: 18px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.025em;
}
.transfer-card p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.transfer-card > div {
  display: flex;
  gap: 7px;
}
.security-card {
  padding: 21px;
  color: #fff;
  border-radius: var(--radius);
  background: #233c33;
}
.security-card > .ui-icon {
  display: block;
  width: 20px;
  height: 20px;
  margin-bottom: 18px;
  color: #bcd2c8;
}
.security-card > span {
  color: #a9c5b8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
}
.security-card h3 {
  margin: 12px 0 6px;
  font-size: 16px;
  font-weight: 630;
  line-height: 1.25;
}
.security-card p {
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  line-height: 1.55;
}

.module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.module-header > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
}
.module-large-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  flex: 0 0 auto;
  color: var(--forest);
  border: 1px solid #d5e3dc;
  border-radius: 9px;
  background: var(--emerald-soft);
}
.module-large-icon .ui-icon {
  width: 22px;
  height: 22px;
}
.module-header h2 {
  margin: 3px 0 3px;
  color: var(--ink-strong);
  font-size: 20px;
  font-weight: 660;
  letter-spacing: -.025em;
}
.module-header p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.module-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.module-kpi {
  min-height: 112px;
  padding: 16px;
}
.module-kpi span {
  color: var(--muted);
  font-size: 12px;
}
.module-kpi strong {
  display: block;
  margin: 13px 0 4px;
  color: var(--ink-strong);
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -.03em;
}
.module-kpi small {
  color: var(--soft);
  font-size: 12px;
}
.module-kpi.is-positive strong { color: var(--emerald); }
.module-kpi.is-negative strong { color: var(--red); }
.module-kpi.is-accent strong { color: var(--orange); }
.module-kpi.is-warning strong { color: var(--amber); }
.insight-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  padding: 12px 14px;
  color: #245f49;
  border: 1px solid #c8ded3;
  border-radius: 8px;
  background: #eef5f1;
}
.insight-strip i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--emerald);
}
.insight-strip p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
.insight-strip.is-warning {
  color: #745017;
  border-color: #e4d1a9;
  background: var(--amber-soft);
}
.insight-strip.is-warning i { background: var(--amber); }
.module-toolbar { margin-top: 12px; }
.toolbar-count {
  min-width: 76px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.decision-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.decision-card {
  position: relative;
  padding: 16px;
  overflow: hidden;
}
.decision-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  content: "";
  background: #a8afaa;
}
.decision-card.is-critical::before { background: var(--red); }
.decision-card.is-warning::before { background: var(--amber); }
.decision-card.is-opportunity::before { background: var(--orange); }
.decision-card.is-healthy::before { background: var(--emerald); }
.decision-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.decision-head > div { min-width: 0; }
.decision-head h3 {
  margin: 8px 0 3px;
  overflow: hidden;
  color: var(--ink-strong);
  font-size: 14px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.decision-head p {
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.badge-row span {
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: #58605b;
  background: var(--surface-soft);
  font-size: 12px;
  font-weight: 620;
}
.badge-row.large {
  gap: 6px;
  margin-top: 15px;
}
.badge-row.large span {
  padding: 5px 8px;
  font-size: 12px;
}
.severity-pill {
  align-self: start;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 12px;
  font-weight: 680;
}
.is-critical .severity-pill {
  color: #963737;
  border-color: #ebc7c7;
  background: var(--red-soft);
}
.is-warning .severity-pill {
  color: #795319;
  border-color: #ead7ae;
  background: var(--amber-soft);
}
.is-opportunity .severity-pill {
  color: #91421f;
  border-color: #ebcabb;
  background: var(--orange-soft);
}
.is-healthy .severity-pill {
  color: #245f49;
  border-color: #cee2d7;
  background: var(--emerald-soft);
}
.decision-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 14px 0;
}
.decision-metrics div {
  min-width: 0;
  padding: 8px;
  border: 1px solid #ecece7;
  border-radius: 6px;
  background: var(--surface-soft);
}
.decision-metrics span {
  display: block;
  margin-bottom: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.decision-metrics b {
  display: block;
  overflow: hidden;
  font-size: 12px;
  font-weight: 630;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recommendation {
  min-height: 32px;
  margin: 0 0 8px;
  color: #4b544f;
  font-size: 12px;
  line-height: 1.5;
}
.disclosure-card {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}
.disclosure-card b {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}
.disclosure-card p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.disclosure-card > span {
  align-self: start;
  color: var(--soft);
  font-size: 12px;
  white-space: nowrap;
}

.overlay {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
}
.overlay-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(18, 23, 20, .64);
}
.sheet,
.modal {
  position: relative;
  z-index: 1;
  width: min(100%, 700px);
  max-height: calc(100vh - 40px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-lg);
  animation: modal-in .16s ease both;
}
.sheet {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(100%, 640px);
  max-height: 100vh;
  border-radius: 0;
  animation-name: sheet-in;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes sheet-in { from { opacity: .85; transform: translateX(20px); } }
.sheet-header,
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}
.sheet-header h2,
.modal-header h2 {
  margin: 5px 0 3px;
  color: var(--ink-strong);
  font-size: 18px;
  font-weight: 660;
  line-height: 1.25;
  letter-spacing: -.025em;
}
.sheet-header p,
.modal-header p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.close-button {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: #fff;
  cursor: pointer;
}
.close-button:hover {
  color: var(--ink);
  background: var(--surface-soft);
}
.close-button .ui-icon {
  width: 16px;
  height: 16px;
}
.sheet-body,
.modal-body {
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  padding: 20px 22px 28px;
}
.product-sheet-summary {
  display: grid;
  grid-template-columns: 72px repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.product-sheet-summary > div:not(.product-avatar) {
  padding: 11px;
  border: 1px solid #ecece7;
  border-radius: 7px;
  background: var(--surface-soft);
}
.product-sheet-summary span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
}
.product-sheet-summary b { font-size: 13px; }
.source-banner {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 17px;
  padding: 10px 12px;
  color: #315f4c;
  border: 1px solid #cadecf;
  border-radius: 7px;
  background: var(--emerald-soft);
  font-size: 12px;
}
.cost-source-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  padding: 11px 12px;
  border: 1px solid #cadecf;
  border-radius: 8px;
  color: #315f4c;
  background: var(--emerald-soft);
}
.cost-source-banner.is-account-override { color: #735321; border-color: #ead7a9; background: var(--amber-soft); }
.cost-source-banner.is-missing,
.cost-source-banner.is-ambiguous { color: #7a4b28; border-color: #edd0bb; background: #fff6ef; }
.cost-source-banner > .ui-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.cost-source-banner > div { min-width: 0; flex: 1; }
.cost-source-banner span,
.cost-source-banner b,
.cost-source-banner small { display: block; }
.cost-source-banner span { font-size: 12px; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; }
.cost-source-banner b { margin-top: 2px; color: var(--ink); font-size: 12px; }
.cost-source-banner small { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.cost-source-banner .button { min-height: 32px; padding: 0 9px; font-size: 12px; }
.cost-apply-field {
  margin: 16px 0 0;
  padding: 0;
  border: 0;
}
.cost-apply-field legend {
  margin-bottom: 8px;
  color: var(--ink-strong);
  font-size: 12px;
  font-weight: 750;
}
.cost-apply-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cost-apply-options label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  cursor: pointer;
}
.cost-apply-options label:has(input:checked) {
  border-color: #9fc8b5;
  background: var(--emerald-soft);
  box-shadow: 0 0 0 2px rgba(46, 128, 98, .08);
}
.cost-apply-options input { margin: 2px 0 0; accent-color: var(--emerald); }
.cost-apply-options span,
.cost-apply-options b,
.cost-apply-options small { display: block; min-width: 0; }
.cost-apply-options b { color: var(--ink-strong); font-size: 12px; }
.cost-apply-options small { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.cost-apply-field > p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.cost-persistence-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0;
  padding: 10px 11px;
  color: var(--forest);
  border: 1px solid #cfe1d7;
  border-radius: 8px;
  background: var(--emerald-soft);
}
.cost-persistence-note > .ui-icon { width: 17px; height: 17px; flex: 0 0 auto; }
.cost-persistence-note span,
.cost-persistence-note b,
.cost-persistence-note small { display: block; }
.cost-persistence-note b { color: var(--ink-strong); font-size: 12px; }
.cost-persistence-note small { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.cost-scope-field { margin: 16px 0 12px; }
.form-field > select {
  width: 100%;
  height: 48px;
  padding: 0 34px 0 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: #fbfbf8;
  font: inherit;
}
.form-field > select:focus { outline: 0; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(46, 128, 98, .1); }
.modal { width: min(100%, 720px); }
.item-modal { width: min(100%, 780px); }
.detail-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.detail-metrics div {
  padding: 11px;
  border: 1px solid #ecece7;
  border-radius: 7px;
  background: var(--surface-soft);
}
.detail-metrics span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
}
.detail-metrics b { font-size: 13px; }
.recommendation-box {
  margin-top: 13px;
  padding: 14px;
  border-left: 3px solid var(--orange);
  background: var(--orange-soft);
}
.recommendation-box span {
  color: #8f421f;
  font-size: 12px;
  font-weight: 720;
  letter-spacing: .08em;
}
.recommendation-box p {
  margin: 7px 0 0;
  color: #643a27;
  font-size: 13px;
  line-height: 1.55;
}
.evidence-box { margin-top: 16px; }
.evidence-box h3 {
  margin: 0 0 9px;
  font-size: 13px;
}
.evidence-box ul {
  margin: 0;
  padding-left: 17px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 13px 22px;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}
.warning-note,
.danger-note,
.safe-banner {
  margin-bottom: 15px;
  padding: 12px 13px;
  border: 1px solid #ead7ae;
  border-radius: 7px;
  color: #745017;
  background: var(--amber-soft);
  font-size: 12px;
  line-height: 1.55;
}
.safe-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #245f49;
  border-color: #cee2d7;
  background: var(--emerald-soft);
  font-weight: 650;
}
.safe-banner .ui-icon {
  width: 16px;
  height: 16px;
}
.danger-note {
  color: #842f2f;
  border-color: #ebc7c7;
  background: var(--red-soft);
}
.danger-note b,
.danger-note span { display: block; }
.danger-note span { margin-top: 3px; }
.diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-bottom: 15px;
}
.diff-block {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.diff-block h3 {
  margin: 0 0 8px;
  font-size: 13px;
}
.diff-block div {
  display: grid;
  gap: 3px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.diff-block span {
  color: var(--muted);
  font-size: 12px;
}
.diff-block b {
  overflow-wrap: anywhere;
  font-size: 12px;
  font-weight: 620;
}
.confirm-modal { width: min(100%, 500px); }

.status-chip.is-neutral {
  color: #56605a;
  border-color: #d8dbd7;
  background: #f1f2ef;
}

.ads-overview-card {
  display: grid;
  grid-template-columns: 48px minmax(260px, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  margin-top: 12px;
  padding: 17px 18px;
  color: #fff;
  border-radius: var(--radius);
  background: #263a32;
  box-shadow: var(--shadow-sm);
}
.ads-overview-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: #ffd3bd;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 9px;
  background: rgba(255, 255, 255, .05);
}
.ads-overview-icon .ui-icon { width: 22px; height: 22px; }
.ads-overview-copy h3 {
  margin: 3px 0 2px;
  font-size: 17px;
  font-weight: 640;
  letter-spacing: -.02em;
}
.ads-overview-copy p {
  max-width: 700px;
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
}
.ads-overview-card .eyebrow { color: #eaa07e; }
.ads-overview-card > .button {
  color: #fff;
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
}
.ads-overview-card > .button:hover { background: rgba(255, 255, 255, .11); }
.ads-overview-metrics {
  display: flex;
  gap: 0;
}
.ads-overview-metrics div {
  min-width: 90px;
  padding: 0 15px;
  border-left: 1px solid rgba(255, 255, 255, .11);
}
.ads-overview-metrics span,
.ads-overview-metrics b { display: block; }
.ads-overview-metrics span { color: rgba(255, 255, 255, .68); font-size: 12px; }
.ads-overview-metrics b { margin-top: 4px; font-size: 15px; }

.ads-page-intro { align-items: center; }
.ads-intro-actions { flex-wrap: wrap; justify-content: flex-end; }
.ads-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .65fr);
  gap: 12px;
}
.ads-command-hero {
  min-height: 270px;
  padding: 25px;
  color: #fff;
  border-radius: var(--radius);
  background: #223d34;
  box-shadow: var(--shadow-sm);
}
.ads-command-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.ads-command-top span {
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
}
.ads-command-top strong {
  display: block;
  margin-top: 10px;
  color: #fff;
  font-size: clamp(37px, 4vw, 52px);
  font-weight: 640;
  line-height: 1;
  letter-spacing: -.055em;
}
.ads-command-top .ads-source-badge {
  padding: 7px 8px;
  color: #efb69d;
  border: 1px solid rgba(239, 182, 157, .22);
  border-radius: 5px;
  background: rgba(201, 80, 31, .08);
  font-size: 12px;
  font-weight: 720;
  letter-spacing: .08em;
}
.ads-command-hero > p {
  max-width: 660px;
  margin: 13px 0 0;
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
}
.ads-command-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.ads-command-metrics div { padding: 15px 17px 0 0; }
.ads-command-metrics div + div { padding-left: 17px; border-left: 1px solid rgba(255, 255, 255, .12); }
.ads-command-metrics span,
.ads-command-metrics b { display: block; }
.ads-command-metrics span { color: rgba(255, 255, 255, .66); font-size: 12px; }
.ads-command-metrics b { margin-top: 5px; font-size: 17px; font-weight: 620; }

.ads-guardrail-card {
  min-height: 270px;
  padding: 20px;
}
.ads-guardrail-head { display: flex; align-items: center; gap: 12px; }
.ads-guardrail-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--forest);
  border: 1px solid #d8e6df;
  border-radius: 8px;
  background: var(--emerald-soft);
}
.ads-guardrail-card h3 {
  margin: 4px 0 0;
  color: var(--ink-strong);
  font-size: 21px;
  font-weight: 660;
  letter-spacing: -.035em;
}
.ads-guardrail-card > p {
  margin: 14px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.ads-guardrail-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.ads-guardrail-row span { color: var(--muted); }
.ads-guardrail-row b { color: var(--ink-strong); }
.ads-coverage { margin-top: 7px; }
.ads-coverage > div:first-child { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.ads-coverage .progress { margin: 6px 0 0; }
.ads-guardrail-card .button { margin-top: 13px; }

.ads-measurement-alert {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 12px;
  padding: 13px 15px;
  color: #6f4d16;
  border: 1px solid #e4d0a5;
  border-radius: var(--radius);
  background: var(--amber-soft);
}
.ads-measurement-alert > .ui-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.ads-measurement-alert > div { flex: 1; }
.ads-measurement-alert b { display: block; font-size: 13px; }
.ads-measurement-alert p { margin: 2px 0 0; font-size: 12px; line-height: 1.5; }
.ads-measurement-alert .button { min-height: 36px; color: #6f4d16; border-color: #d8bd82; background: rgba(255, 255, 255, .35); }

.ai-connection-strip {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 10px;
  padding: 11px 14px;
  color: #4c5a52;
  border: 1px solid #d7dfda;
  border-radius: 8px;
  background: #f0f3f0;
}
.ai-connection-strip > .ui-icon { width: 17px; height: 17px; flex: 0 0 auto; color: var(--forest); }
.ai-connection-strip > div { flex: 1; }
.ai-connection-strip b,
.ai-connection-strip p { display: block; margin: 0; }
.ai-connection-strip b { color: var(--ink); font-size: 12px; }
.ai-connection-strip p { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.ai-connection-strip > span { color: var(--emerald); font-size: 12px; font-weight: 650; white-space: nowrap; }
.ai-connection-strip.is-local > .ui-icon { color: var(--muted); }
.ai-connection-strip.is-local > span { color: var(--muted); }

.ads-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.ai-strategy-card {
  margin-top: 28px;
  overflow: hidden;
}
.ai-strategy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border-bottom: 1px solid var(--line);
}
.ai-strategy-head > div { display: flex; min-width: 0; align-items: center; gap: 13px; }
.ai-mark {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  flex: 0 0 auto;
  color: #9f421d;
  border: 1px solid #efd0c1;
  border-radius: 9px;
  background: var(--orange-soft);
}
.ai-mark .ui-icon { width: 21px; height: 21px; }
.ai-strategy-head h3 { margin: 2px 0; color: var(--ink-strong); font-size: 18px; letter-spacing: -.025em; }
.ai-strategy-head p { margin: 0; color: var(--soft); font-size: 12px; }
.ai-warning {
  padding: 10px 20px;
  color: #73501a;
  border-bottom: 1px solid #ead8b4;
  background: var(--amber-soft);
  font-size: 12px;
}
.ai-summary {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: #fafaf7;
}
.ai-summary span { color: var(--orange); font-size: 12px; font-weight: 740; letter-spacing: .09em; }
.ai-summary p { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.6; }
.ad-priority-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}
.ad-priority-card { position: relative; min-height: 210px; padding: 15px; overflow: hidden; }
.ad-priority-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; content: ""; background: var(--line-strong); }
.ad-priority-card.is-danger::before { background: var(--red); }
.ad-priority-card.is-warning::before { background: var(--amber); }
.ad-priority-card.is-success::before { background: var(--emerald); }
.ad-priority-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ad-priority-head small { color: var(--soft); font-size: 12px; }
.ad-priority-card h4 { margin: 13px 0 5px; color: var(--ink-strong); font-size: 14px; }
.ad-priority-card > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.ad-priority-card > div:last-child { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.ad-priority-card > div:last-child span,
.ad-priority-card > div:last-child b { display: block; }
.ad-priority-card > div:last-child span { margin-bottom: 4px; color: var(--soft); font-size: 12px; text-transform: uppercase; }
.ad-priority-card > div:last-child b { color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.5; }
.ad-decision-chip {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 12px;
  font-weight: 680;
}
.ad-decision-chip.is-danger { color: #913535; border-color: #ebc7c7; background: var(--red-soft); }
.ad-decision-chip.is-warning { color: #755118; border-color: #e8d4ac; background: var(--amber-soft); }
.ad-decision-chip.is-success { color: #245f49; border-color: #cee2d7; background: var(--emerald-soft); }
.ad-experiment-strip { padding: 0 20px 20px; }
.ad-experiment-strip .section-title { margin-top: 12px; }
.ad-experiment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.ad-experiment-grid article { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fbfbf8; }
.ad-experiment-grid span { color: var(--orange); font-size: 12px; font-weight: 700; }
.ad-experiment-grid h4 { margin: 8px 0 5px; color: var(--ink-strong); font-size: 13px; }
.ad-experiment-grid p { margin: 0 0 9px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.ad-experiment-grid b,
.ad-experiment-grid small { display: block; font-size: 12px; line-height: 1.45; }
.ad-experiment-grid b { color: var(--ink); font-weight: 610; }
.ad-experiment-grid small { margin-top: 8px; padding-top: 8px; color: var(--soft); border-top: 1px solid var(--line); }
.ai-guardrail { display: flex; align-items: center; gap: 9px; padding: 12px 20px; color: #4e5a53; border-top: 1px solid var(--line); background: #eff2ee; font-size: 12px; }
.ai-guardrail .ui-icon { width: 15px; height: 15px; color: var(--forest); }

.ads-section-title { align-items: center; }
.ads-section-title > div > p { margin-top: 3px; }
.ad-campaign-list { display: grid; gap: 10px; }
.ad-campaign-card { position: relative; overflow: hidden; }
.ad-campaign-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; content: ""; background: var(--line-strong); }
.ad-campaign-card.is-danger::before { background: var(--red); }
.ad-campaign-card.is-warning::before { background: var(--amber); }
.ad-campaign-card.is-success::before { background: var(--emerald); }
.ad-campaign-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 17px;
  border-bottom: 1px solid var(--line);
}
.ad-campaign-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.ad-campaign-card h4 { margin: 7px 0 2px; color: var(--ink-strong); font-size: 15px; }
.ad-campaign-card header p { margin: 0; color: var(--soft); font-size: 12px; }
.ad-campaign-metrics { display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: 1px solid var(--line); }
.ad-campaign-metrics > div { min-width: 0; padding: 12px 15px; border-right: 1px solid var(--line); }
.ad-campaign-metrics > div:last-child { border: 0; }
.ad-campaign-metrics span,
.ad-campaign-metrics b { display: block; }
.ad-campaign-metrics span { color: var(--muted); font-size: 12px; }
.ad-campaign-metrics b { margin-top: 5px; overflow: hidden; color: var(--ink-strong); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.ad-campaign-decision { display: grid; grid-template-columns: 140px 1fr; align-items: start; gap: 14px; padding: 14px 17px; }
.ad-campaign-decision b { display: block; color: var(--ink); font-size: 12px; font-weight: 620; }
.ad-campaign-decision p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.ad-campaign-card > footer { display: flex; gap: 24px; padding: 10px 17px; color: var(--muted); border-top: 1px solid var(--line); background: #fafaf7; font-size: 12px; }
.ad-campaign-card > footer b { color: var(--ink); }
.ads-empty-campaign { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 15px; padding: 20px; }
.ads-empty-campaign .state-icon { margin: 0; }
.ads-empty-campaign h3 { margin: 0 0 3px; color: var(--ink-strong); font-size: 15px; }
.ads-empty-campaign p { margin: 0; color: var(--muted); font-size: 12px; }
.ads-empty-campaign > div:last-child { display: flex; gap: 7px; }

.ad-filter-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.ad-filter-tabs button { min-height: 30px; padding: 0 9px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; font-size: 12px; }
.ad-filter-tabs button.is-active { color: var(--forest); border-color: #b9d1c5; background: var(--emerald-soft); font-weight: 680; }
.ad-opportunity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ad-opportunity-card { position: relative; padding: 15px; overflow: hidden; }
.ad-opportunity-card::before { position: absolute; inset: 0 0 auto; height: 3px; content: ""; background: var(--line-strong); }
.ad-opportunity-card.is-danger::before { background: var(--red); }
.ad-opportunity-card.is-warning::before { background: var(--amber); }
.ad-opportunity-card.is-success::before { background: var(--emerald); }
.ad-opportunity-main { display: flex; min-width: 0; align-items: center; gap: 10px; }
.ad-opportunity-main > div:last-child { min-width: 0; }
.ad-opportunity-main h4 { margin: 6px 0 2px; overflow: hidden; color: var(--ink-strong); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ad-opportunity-main p { margin: 0; color: var(--soft); font-size: 12px; }
.ad-opportunity-metrics { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 14px; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.ad-opportunity-metrics > div { padding: 9px 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ad-opportunity-metrics > div:nth-child(2n) { border-right: 0; }
.ad-opportunity-metrics > div:nth-last-child(-n + 2) { border-bottom: 0; }
.ad-opportunity-metrics span,
.ad-opportunity-metrics b { display: block; }
.ad-opportunity-metrics span { color: var(--muted); font-size: 12px; }
.ad-opportunity-metrics b { margin-top: 3px; color: var(--ink); font-size: 13px; }
.ad-opportunity-reason { min-height: 42px; margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.ad-opportunity-card .button { min-height: 36px; }
.ads-disclosure { margin-top: 22px; }

.ad-campaign-modal { width: min(100%, 920px); }
.ad-campaign-modal .modal-body { max-height: min(74vh, 760px); }
.ads-settings-modal { width: min(100%, 680px); }
.ad-form-section + .ad-form-section { margin-top: 25px; padding-top: 22px; border-top: 1px solid var(--line); }
.form-select {
  width: 100%;
  height: 48px;
  padding: 0 34px 0 11px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
  font-size: 13px;
}
.form-select:focus { border-color: var(--focus); background: #fff; box-shadow: 0 0 0 3px rgba(46, 128, 98, .1); }
.ad-product-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.ad-product-picker > label { display: flex; min-width: 0; align-items: center; gap: 9px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fbfbf8; cursor: pointer; }
.ad-product-picker > label:has(input:checked) { border-color: #a9c7b8; background: var(--emerald-soft); }
.ad-product-picker input { width: 15px; height: 15px; flex: 0 0 auto; accent-color: var(--forest); }
.ad-product-picker .product-avatar { width: 34px; height: 42px; }
.ad-product-picker > label > div { min-width: 0; }
.ad-product-picker b,
.ad-product-picker small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-product-picker b { color: var(--ink); font-size: 12px; }
.ad-product-picker small { margin-top: 2px; color: var(--muted); font-size: 12px; }
.ad-barcode-field { margin-top: 10px; }
.ad-barcode-field textarea { min-height: 74px; }
.ad-live-disclosure { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; padding: 11px 12px; color: #4c5a52; border: 1px solid #d5dfd9; border-radius: 7px; background: #eff3f0; font-size: 12px; line-height: 1.5; }
.ad-live-disclosure .ui-icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--forest); }
.csv-helper { margin: 13px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }

/* Operational intelligence: alerts, history, safe CSV and automation */
.account-switcher {
  display: flex;
  min-width: 214px;
  height: 56px;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.account-switcher:hover {
  border-color: #a8beb3;
  background: var(--emerald-soft);
  box-shadow: 0 4px 14px rgba(25, 63, 47, .06);
}
.account-switcher-icon {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  color: var(--forest);
  background: var(--emerald-soft);
}
.account-switcher-icon .ui-icon { width: 16px; height: 16px; }
.account-switcher-copy { min-width: 0; flex: 1; }
.account-switcher-copy small,
.account-switcher-copy b,
.account-switcher-copy em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-switcher-copy small { color: var(--emerald); font-size: 12px; font-weight: 760; line-height: 1; letter-spacing: .045em; }
.account-switcher-copy b { margin-top: 2px; max-width: 132px; color: var(--ink-strong); font-size: 13px; line-height: 1.15; }
.account-switcher-copy em { margin-top: 2px; color: var(--soft); font-size: 12px; font-style: normal; line-height: 1; }
.account-switcher > .ui-icon:last-child { width: 13px; height: 13px; flex: 0 0 auto; color: var(--soft); }

.account-modal { width: min(100%, 920px); }
.account-modal .modal-body { max-height: calc(100vh - 110px); }
.account-isolation-note,
.credential-privacy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 13px;
  padding: 11px 12px;
  border: 1px solid #cadcd3;
  border-radius: 8px;
  color: #456055;
  background: #f0f6f2;
}
.account-isolation-note > .ui-icon,
.credential-privacy > .ui-icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--forest); }
.account-isolation-note b,
.account-isolation-note span,
.credential-privacy b,
.credential-privacy span { display: block; }
.account-isolation-note b,
.credential-privacy b { color: var(--ink); font-size: 12px; }
.account-isolation-note span,
.credential-privacy span { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.account-local-note { margin-bottom: 12px; padding: 10px 12px; border: 1px solid #ead7a9; border-radius: 7px; color: #76591f; background: var(--amber-soft); font-size: 12px; line-height: 1.5; }
.account-list { display: grid; gap: 8px; }
.account-row {
  display: grid;
  grid-template-columns: 42px minmax(210px, 1fr) minmax(155px, .65fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}
.account-row.is-active { border-color: #9bbdad; box-shadow: inset 3px 0 var(--forest); background: #fbfdfb; }
.account-monogram { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 10px; color: #fff; background: var(--forest); font-size: 16px; font-weight: 720; }
.account-row.is-hepsiburada .account-monogram { background: #d95713; }
.account-row.is-hepsiburada.is-active { border-color: #efb38e; box-shadow: inset 3px 0 #e85d10; background: #fffaf6; }
.account-identity { min-width: 0; }
.account-identity > div { display: flex; min-width: 0; align-items: center; gap: 7px; }
.account-identity h3 { margin: 0; overflow: hidden; color: var(--ink-strong); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.active-account-badge { padding: 3px 5px; border-radius: 4px; color: var(--forest); background: var(--emerald-soft); font-size: 12px; font-weight: 780; letter-spacing: .08em; }
.marketplace-chip { padding: 3px 5px; border-radius: 4px; color: #315f4c; background: #e9f3ed; font-size: 12px; font-weight: 760; white-space: nowrap; }
.marketplace-chip.is-hepsiburada { color: #9a3d0d; background: #fff0e5; }
.account-identity p,
.account-identity small { display: block; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-identity p { margin-top: 3px; color: var(--muted); font-size: 12px; }
.account-identity small { margin-top: 4px; color: var(--soft); font-size: 12px; }
.account-connection span,
.account-connection small { display: block; }
.account-connection span { display: flex; align-items: center; gap: 5px; color: var(--amber); font-size: 12px; font-weight: 650; }
.account-connection span.is-verified { color: var(--forest); }
.account-connection span .ui-icon { width: 13px; height: 13px; }
.account-connection small { margin-top: 4px; color: var(--soft); font-size: 12px; }
.account-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.account-actions .button { min-height: 34px; padding: 0 10px; font-size: 12px; }
.current-account-label { padding: 8px 9px; color: var(--forest); font-size: 12px; font-weight: 650; white-space: nowrap; }
.account-icon-button { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: #fff; cursor: pointer; }
.account-icon-button:hover { color: var(--forest); border-color: #a9c1b5; background: var(--emerald-soft); }
.account-icon-button.is-danger:hover { color: var(--red); border-color: #e2b9b9; background: var(--red-soft); }
.account-icon-button:disabled { opacity: .45; cursor: not-allowed; }
.account-icon-button .ui-icon { width: 14px; height: 14px; }
.account-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); }
.account-modal-footer b,
.account-modal-footer span { display: block; }
.account-modal-footer b { color: var(--ink); font-size: 12px; }
.account-modal-footer > div > span { margin-top: 2px; color: var(--soft); font-size: 12px; }
.account-back { display: flex; align-items: center; gap: 6px; margin: -4px 0 12px; padding: 0; border: 0; color: var(--forest); background: transparent; cursor: pointer; font-size: 12px; font-weight: 650; }
.account-back .ui-icon { width: 13px; height: 13px; transform: rotate(180deg); }
.account-form { padding-top: 2px; }
.marketplace-picker { display: block; margin-bottom: 13px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.credential-guide { display: flex; align-items: flex-start; gap: 8px; padding: 10px 11px; border: 1px solid #ead7a9; border-radius: 7px; color: #76591f; background: var(--amber-soft); font-size: 12px; line-height: 1.5; }
.credential-guide .ui-icon { width: 16px; height: 16px; flex: 0 0 auto; }
.account-switcher.is-hepsiburada .account-switcher-icon { color: #c94b0b; background: #fff0e5; }
.account-switcher.is-hepsiburada .account-switcher-copy small { color: #c94b0b; }
.account-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.account-confirm-modal { width: min(100%, 580px); }

.alert-button {
  position: relative;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #fff;
  cursor: pointer;
}
.alert-button:hover,
.alert-button.has-alerts { color: var(--forest); border-color: #aec2b8; background: var(--emerald-soft); }
.alert-button b {
  position: absolute;
  top: -6px;
  right: -7px;
  display: grid;
  min-width: 19px;
  height: 19px;
  place-items: center;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 10px;
  color: #fff;
  background: var(--red);
  font-size: 12px;
  font-weight: 750;
}
.row-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.row-action.is-history { display: grid; place-items: center; padding: 0; }
.row-action.is-history .ui-icon { width: 14px; height: 14px; }
.row-action.is-history span { display: none; }
.product-table-head,
.product-row { grid-template-columns: minmax(270px, 2.5fr) repeat(5, minmax(76px, .75fr)) 118px; }
.time-machine-entry {
  display: grid;
  width: 100%;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  margin: 0 0 17px;
  padding: 11px 12px;
  text-align: left;
  border: 1px solid #cbdcd3;
  border-radius: 8px;
  color: var(--forest);
  background: #f0f6f2;
  cursor: pointer;
}
.time-machine-entry > .ui-icon:first-child {
  width: 32px;
  height: 32px;
  padding: 7px;
  border-radius: 7px;
  color: #fff;
  background: var(--forest);
}
.time-machine-entry span { min-width: 0; }
.time-machine-entry b,
.time-machine-entry small { display: block; }
.time-machine-entry b { font-size: 13px; }
.time-machine-entry small { margin-top: 2px; color: var(--muted); font-size: 12px; }
.time-machine-entry > .ui-icon:last-child { width: 15px; height: 15px; }
.time-machine-entry:hover { border-color: #98b8a8; background: var(--emerald-soft); }

.automation-card { padding: 20px; overflow: hidden; }
.automation-card-head { display: flex; align-items: center; gap: 11px; }
.automation-card-head > div { min-width: 0; flex: 1; }
.automation-card-head h3 { margin: 4px 0 0; color: var(--ink-strong); font-size: 15px; }
.automation-card-head > i { width: 8px; height: 8px; border-radius: 50%; background: var(--soft); box-shadow: 0 0 0 4px #eceeeb; }
.automation-card.is-enabled .automation-card-head > i { background: var(--emerald); box-shadow: 0 0 0 4px var(--emerald-soft); }
.automation-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 8px; color: var(--forest); background: var(--emerald-soft); }
.automation-icon .ui-icon { width: 18px; height: 18px; }
.automation-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 17px 0 12px; }
.automation-facts div { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); }
.automation-facts span,
.automation-facts b,
.automation-facts small { display: block; }
.automation-facts span { color: var(--muted); font-size: 12px; }
.automation-facts b { margin-top: 4px; color: var(--ink); font-size: 12px; line-height: 1.35; }
.automation-facts small { margin-top: 3px; color: var(--soft); font-size: 12px; line-height: 1.35; }
.automation-error { margin-bottom: 11px; padding: 9px 10px; border: 1px solid #ebc7c7; border-radius: 7px; color: #842f2f; background: var(--red-soft); font-size: 12px; line-height: 1.45; }
.history-link { display: flex; width: 100%; min-height: 40px; align-items: center; gap: 8px; margin-top: 12px; padding: 0; text-align: left; border: 0; border-top: 1px solid var(--line); color: var(--forest); background: transparent; cursor: pointer; font-size: 12px; font-weight: 650; }
.history-link .ui-icon { width: 15px; height: 15px; }
.history-link:hover { color: var(--orange); }

.csv-preview-modal { width: min(100%, 1040px); }
.csv-preview-modal .modal-body { max-height: calc(100vh - 190px); }
.csv-summary-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-bottom: 14px; }
.csv-summary-grid > div { padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.csv-summary-grid span { display: block; color: var(--muted); font-size: 12px; }
.csv-summary-grid b { display: block; margin-top: 4px; color: var(--ink-strong); font-size: 17px; }
.csv-summary-grid .is-create { border-color: #cde1d7; background: var(--emerald-soft); }
.csv-summary-grid .is-update { border-color: #d8dcce; background: #f3f4ed; }
.csv-summary-grid .is-error { border-color: #ebc7c7; background: var(--red-soft); }
.csv-summary-grid .is-warning { border-color: #ead7ae; background: var(--amber-soft); }
.csv-file-errors { display: grid; gap: 4px; margin-bottom: 14px; padding: 12px 13px; border: 1px solid #ebc7c7; border-radius: 7px; color: #842f2f; background: var(--red-soft); font-size: 12px; }
.csv-file-errors b { margin-bottom: 2px; font-size: 13px; }
.csv-ignored-note,
.csv-limit-note { margin: -4px 0 13px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.csv-limit-note { margin: 12px 0 0; text-align: center; }
.csv-selection-bar { position: sticky; z-index: 2; top: -20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 -1px 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.96); box-shadow: 0 5px 16px rgba(18,23,20,.05); backdrop-filter: blur(8px); }
.csv-selection-bar > div:first-child b,
.csv-selection-bar > div:first-child span { display: block; }
.csv-selection-bar b { color: var(--ink-strong); font-size: 13px; }
.csv-selection-bar span { color: var(--muted); font-size: 12px; }
.csv-selection-bar > div:last-child { display: flex; gap: 12px; }
.csv-selection-bar .text-button,
.alert-toolbar .text-button { color: var(--forest); }
.csv-selection-bar .text-button:hover,
.alert-toolbar .text-button:hover { color: var(--orange); }
.csv-preview-list { display: grid; gap: 7px; }
.csv-preview-row { display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: start; gap: 7px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.csv-preview-row.is-error { border-color: #ebc7c7; background: #fffafa; }
.csv-preview-row.is-create { border-color: #cde1d7; }
.csv-row-check { display: grid; place-items: center; padding-top: 2px; }
.csv-row-check input { width: 16px; height: 16px; accent-color: var(--forest); }
.csv-row-main { min-width: 0; }
.csv-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.csv-row-head > div { min-width: 0; }
.csv-row-head b,
.csv-row-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csv-row-head b { color: var(--ink-strong); font-size: 13px; }
.csv-row-head small { margin-top: 2px; color: var(--muted); font-size: 12px; }
.csv-row-head > span { flex: 0 0 auto; padding: 3px 6px; border-radius: 5px; color: var(--forest); background: var(--emerald-soft); font-size: 12px; font-weight: 700; }
.is-error .csv-row-head > span { color: var(--red); background: var(--red-soft); }
.csv-cell-changes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.csv-cell-changes > div { display: flex; min-height: 26px; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid #e2e3dd; border-radius: 6px; background: var(--surface-soft); font-size: 12px; }
.csv-cell-changes span { color: var(--muted); }
.csv-cell-changes del { color: #8a5f5f; }
.csv-cell-changes ins { color: var(--forest); font-weight: 700; text-decoration: none; }
.csv-cell-changes .ui-icon { width: 11px; height: 11px; color: var(--soft); }
.csv-row-message { margin: 7px 0 0; padding: 6px 8px; border-radius: 5px; font-size: 12px; }
.csv-row-message.is-error { color: #842f2f; background: var(--red-soft); }
.csv-row-message.is-warning { color: #745017; background: var(--amber-soft); }
.csv-preview-footer { align-items: center; }
.csv-preview-footer > div { min-width: 0; flex: 1; }
.csv-preview-footer > div b,
.csv-preview-footer > div span { display: block; }
.csv-preview-footer > div b { font-size: 12px; }
.csv-preview-footer > div span { color: var(--muted); font-size: 12px; }

.cost-history-modal { width: min(100%, 800px); }
.history-principle { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 13px; padding: 11px 12px; border: 1px solid #cbdcd3; border-radius: 7px; color: #456055; background: #f0f6f2; font-size: 12px; line-height: 1.5; }
.history-principle .ui-icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--forest); }
.cost-history-list { display: grid; gap: 7px; }
.cost-history-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; }
.history-type-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 8px; color: var(--forest); background: var(--emerald-soft); }
.history-type-icon .ui-icon { width: 17px; height: 17px; }
.cost-history-row.is-rollback .history-type-icon { color: var(--amber); background: var(--amber-soft); }
.cost-history-row > div { min-width: 0; }
.cost-history-row > div > div { display: flex; justify-content: space-between; gap: 10px; }
.cost-history-row > div > div span { color: var(--emerald); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.cost-history-row > div > div small { color: var(--soft); font-size: 12px; }
.cost-history-row h3 { margin: 3px 0 2px; overflow: hidden; color: var(--ink-strong); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.cost-history-row p { margin: 0; color: var(--muted); font-size: 12px; }
.history-locked { color: var(--soft); font-size: 12px; }
.rollback-meta { display: grid; grid-template-columns: 90px 1fr; gap: 8px 12px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; font-size: 12px; }
.rollback-meta span { color: var(--muted); }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

.product-history-modal { width: min(100%, 980px); }
.product-history-modal .modal-body { max-height: calc(100vh - 110px); }
.history-product-heading { display: flex; min-width: 0; align-items: center; gap: 11px; }
.history-product-heading > div { min-width: 0; }
.history-product-heading .product-avatar { width: 42px; height: 50px; }
.history-product-heading h2,
.history-product-heading p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-range-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.history-range-bar > div { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); }
.history-range-bar button,
.history-metric-tabs button,
.alert-toolbar > div button { min-height: 30px; padding: 0 11px; border: 0; border-radius: 5px; color: var(--muted); background: transparent; cursor: pointer; font-size: 12px; font-weight: 650; }
.history-range-bar button.is-active,
.history-metric-tabs button.is-active,
.alert-toolbar > div button.is-active { color: #fff; background: var(--forest); }
.history-range-bar > span { color: var(--muted); font-size: 12px; }
.history-current-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
.history-current-grid > div { min-width: 0; padding: 11px 13px; border-right: 1px solid var(--line); }
.history-current-grid > div:last-child { border: 0; }
.history-current-grid span,
.history-current-grid b,
.history-current-grid small { display: block; }
.history-current-grid span { color: var(--muted); font-size: 12px; }
.history-current-grid b { margin-top: 4px; overflow: hidden; color: var(--ink-strong); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.history-current-grid small { margin-top: 2px; color: var(--soft); font-size: 12px; }
.history-current-grid small.is-up { color: var(--emerald); }
.history-current-grid small.is-down { color: var(--red); }
.history-metric-tabs { display: flex; gap: 3px; overflow-x: auto; padding: 4px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); }
.history-metric-tabs button { flex: 1 0 auto; }
.history-chart { margin-top: 8px; padding: 12px 12px 7px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(180deg, #fff, #fafaf7); }
.history-chart svg { display: block; width: 100%; height: auto; max-height: 260px; overflow: visible; }
.history-grid-line { fill: none; stroke: #e6e7e1; stroke-width: 1; stroke-dasharray: 4 5; }
.history-chart-axis { display: flex; justify-content: space-between; padding: 0 23px; color: var(--soft); font-size: 12px; }
.history-chart-empty { display: grid; min-height: 220px; place-items: center; align-content: center; gap: 7px; margin-top: 8px; border: 1px dashed var(--line-strong); border-radius: 9px; color: var(--muted); background: var(--surface-soft); text-align: center; }
.history-chart-empty .ui-icon { width: 25px; height: 25px; color: var(--forest); }
.history-chart-empty b { color: var(--ink); font-size: 13px; }
.history-chart-empty span { font-size: 12px; }
.history-events-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 22px 0 8px; }
.history-events-title h3 { margin: 3px 0 0; color: var(--ink-strong); font-size: 15px; }
.history-events-title > span { color: var(--soft); font-size: 12px; }
.history-event-list { display: grid; }
.history-event-list article { position: relative; display: grid; grid-template-columns: 16px 1fr; gap: 8px; padding-bottom: 13px; }
.history-event-list article::before { position: absolute; top: 13px; bottom: 0; left: 5px; width: 1px; content: ""; background: var(--line); }
.history-event-list article:last-child::before { display: none; }
.history-event-dot { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 2px; border: 3px solid #dce9e2; border-radius: 50%; background: var(--forest); }
.history-event-list time { color: var(--soft); font-size: 12px; }
.history-event-list p { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 0; }
.history-event-list p span { padding: 5px 7px; border-radius: 5px; color: var(--muted); background: var(--surface-soft); font-size: 12px; }
.history-event-list p b { color: var(--ink); }
.history-event-list p strong { color: var(--forest); }

.alerts-modal { width: min(100%, 820px); }
.alerts-modal .modal-body { max-height: calc(100vh - 110px); }
.alert-summary { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 11px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
.alert-summary > div { padding: 10px 12px; border-right: 1px solid var(--line); }
.alert-summary > div:last-child { border: 0; }
.alert-summary span,
.alert-summary b { display: block; }
.alert-summary span { color: var(--muted); font-size: 12px; }
.alert-summary b { margin-top: 3px; color: var(--ink-strong); font-size: 16px; }
.alert-summary .is-critical { background: var(--red-soft); }
.alert-summary .is-critical b { color: var(--red); }
.alert-summary .is-warning { background: var(--amber-soft); }
.alert-summary .is-warning b { color: var(--amber); }
.alert-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.alert-toolbar > div { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); }
.alert-list { display: grid; gap: 7px; }
.alert-row { position: relative; display: grid; width: 100%; grid-template-columns: 8px minmax(0, 1fr) 20px; align-items: center; gap: 10px; padding: 12px; text-align: left; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; cursor: pointer; }
.alert-row:hover { border-color: #aebeb6; background: #fbfcfa; }
.alert-row > i { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); }
.alert-row.is-critical > i { background: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.alert-row.is-warning > i { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
.alert-row.is-resolved { opacity: .6; }
.alert-row > div { min-width: 0; }
.alert-row > div > div { display: flex; justify-content: space-between; gap: 12px; }
.alert-row > div > div span { color: var(--emerald); font-size: 12px; font-weight: 750; text-transform: uppercase; }
.alert-row.is-critical > div > div span { color: var(--red); }
.alert-row.is-warning > div > div span { color: var(--amber); }
.alert-row time { color: var(--soft); font-size: 12px; }
.alert-row h3 { margin: 3px 0; overflow: hidden; color: var(--ink-strong); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.alert-row p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.alert-row small { display: block; margin-top: 5px; color: var(--soft); font-size: 12px; }
.alert-row > .ui-icon { width: 15px; height: 15px; color: var(--soft); }
.alerts-evaluated { margin: 13px 0 0; color: var(--soft); font-size: 12px; text-align: center; }

@media (max-width: 1120px) {
  .account-row { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .account-connection { grid-column: 2; }
  .account-actions { grid-column: 3; grid-row: 1 / span 2; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .ads-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .ad-priority-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad-opportunity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad-campaign-metrics { grid-template-columns: repeat(3, 1fr); }
  .ad-campaign-metrics > div:nth-child(3) { border-right: 0; }
  .ad-campaign-metrics > div:nth-child(-n + 3) { border-bottom: 1px solid var(--line); }
  .module-grid,
  .module-grid.compact-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-side { grid-template-columns: 1fr 1fr; }
  .product-table-head,
  .product-row {
    grid-template-columns: minmax(250px, 2.5fr) repeat(3, minmax(74px, .75fr)) 68px;
  }
  .product-table-head span:nth-child(3),
  .product-table-head span:nth-child(4),
  .product-row > .product-cell:nth-child(3),
  .product-row > .product-cell:nth-child(4) { display: none; }
  .breakdown-card { grid-template-columns: repeat(2, 1fr); }
  .breakdown-item:nth-child(2) { border-right: 0; }
  .breakdown-item:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 860px) {
  .login-screen {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    background: var(--canvas);
  }
  .login-screen::after,
  .login-story { display: none; }
  .login-card { justify-self: center; }
  .app-shell {
    padding-bottom: calc(66px + env(safe-area-inset-bottom));
    padding-left: 0;
  }
  .sidebar { display: none; }
  .topbar {
    min-height: 64px;
    padding: 9px 15px;
  }
  .top-title > span { display: block; }
  .account-switcher { width: 42px; min-width: 42px; height: 42px; padding: 0; justify-content: center; }
  .account-switcher-icon { width: 100%; height: 100%; background: transparent; }
  .account-switcher-copy,
  .account-switcher > .ui-icon:last-child { display: none; }
  .topbar h1 { font-size: 15px; }
  .topbar p { display: none; }
  .top-actions .secondary { display: none; }
  .top-actions .button {
    min-width: 42px;
    padding: 0 12px;
  }
  .top-actions .button span { display: none; }
  .page { padding: 22px 15px 36px; }
  .page-intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .page-intro h2 { font-size: 25px; }
  .intro-meta {
    width: 100%;
    padding: 10px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .intro-actions { width: 100%; }
  .intro-actions .button { flex: 1; }
  .ads-intro-actions .button { min-width: 135px; }
  .hero-grid,
  .calculator-layout { grid-template-columns: 1fr; }
  .ads-hero-grid { grid-template-columns: 1fr; }
  .ads-overview-card { grid-template-columns: 48px 1fr auto; }
  .ads-overview-metrics { grid-column: 2 / -1; grid-row: 2; }
  .ads-overview-card > .button { grid-column: 3; grid-row: 1; }
  .ad-experiment-grid { grid-template-columns: 1fr; }
  .profit-hero,
  .coverage-card { min-height: 210px; }
  .calculator-result {
    position: static;
    min-height: 420px;
  }
  .calculator-placeholder { min-height: 420px; }
  .mini-stat-row { grid-template-columns: repeat(2, 1fr); }
  .mini-stat-row div:nth-child(2) { border-right: 0; }
  .mini-stat-row div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .toolbar {
    align-items: stretch;
    flex-wrap: wrap;
  }
  .search-field { flex-basis: 100%; }
  .toolbar select { flex: 1; }
  .product-table-head,
  .product-row {
    grid-template-columns: minmax(0, 1fr) repeat(2, 78px) 64px;
  }
  .product-table-head span:nth-child(5),
  .product-row > .product-cell:nth-child(5) { display: none; }
  .module-header { align-items: flex-start; }
  .module-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .method-note { align-items: flex-start; }
  .sheet { width: 100%; }
  .mobile-nav {
    position: fixed;
    z-index: 40;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    min-height: 64px;
    padding: 5px 6px max(5px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .98);
  }
  .mobile-nav button {
    display: grid;
    min-width: 0;
    min-height: 48px;
    place-items: center;
    align-content: center;
    gap: 3px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    color: var(--muted);
    background: transparent;
    font-size: 12px;
  }
  .mobile-nav .ui-icon {
    width: 17px;
    height: 17px;
  }
  .mobile-nav button.is-active {
    color: var(--forest);
    background: var(--emerald-soft);
  }
}

@media (max-width: 580px) {
  .login-screen { padding: 16px; }
  .login-card {
    padding: 24px;
    border-radius: 10px;
  }
  .top-actions .button { min-height: 42px; }
  .stat-grid { gap: 8px; }
  .ads-kpi-grid { gap: 8px; }
  .stat-card {
    min-height: 108px;
    padding: 14px;
  }
  .stat-card strong { font-size: 18px; }
  .profit-hero { padding: 19px; }
  .hero-head {
    align-items: flex-start;
    flex-direction: column-reverse;
    gap: 12px;
  }
  .hero-head b { font-size: 36px; }
  .hero-metrics {
    grid-template-columns: 1fr 1fr;
    padding-top: 28px;
  }
  .hero-metrics div:last-child { grid-column: 1 / -1; }
  .hero-metrics div:nth-child(3) {
    margin-top: 12px;
    padding-left: 0;
  }
  .module-grid,
  .module-grid.compact-modules { grid-template-columns: 1fr; }
  .ads-overview-card { grid-template-columns: 42px 1fr; gap: 12px; }
  .ads-overview-icon { width: 42px; height: 42px; }
  .ads-overview-metrics { grid-column: 1 / -1; grid-row: auto; }
  .ads-overview-metrics div { flex: 1; }
  .ads-overview-card > .button { grid-column: 1 / -1; grid-row: auto; width: 100%; }
  .ads-command-hero { min-height: 300px; padding: 19px; }
  .ads-command-top { flex-direction: column-reverse; }
  .ads-command-top strong { font-size: 36px; }
  .ads-command-metrics { grid-template-columns: 1fr 1fr; margin-top: 34px; }
  .ads-command-metrics div:last-child { grid-column: 1 / -1; margin-top: 12px; padding-left: 0; border-left: 0; }
  .ads-measurement-alert { align-items: flex-start; flex-wrap: wrap; }
  .ads-measurement-alert .button { width: 100%; }
  .ai-connection-strip { align-items: flex-start; flex-wrap: wrap; }
  .ai-connection-strip > span { width: 100%; padding-left: 28px; }
  .ai-strategy-head { align-items: stretch; flex-direction: column; padding: 16px; }
  .ai-strategy-head .button { width: 100%; }
  .ai-summary { grid-template-columns: 1fr; gap: 7px; padding: 15px 16px; }
  .ad-priority-grid { grid-template-columns: 1fr; padding: 9px; }
  .ad-priority-card { min-height: 0; }
  .ad-experiment-strip { padding: 0 14px 14px; }
  .ad-campaign-card > header { align-items: flex-start; }
  .ad-campaign-metrics { grid-template-columns: repeat(2, 1fr); }
  .ad-campaign-metrics > div,
  .ad-campaign-metrics > div:nth-child(3) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .ad-campaign-metrics > div:nth-child(2n) { border-right: 0; }
  .ad-campaign-metrics > div:nth-last-child(-n + 2) { border-bottom: 0; }
  .ad-campaign-decision { grid-template-columns: 1fr; gap: 8px; }
  .ad-campaign-card > footer { flex-wrap: wrap; gap: 9px 18px; }
  .ads-empty-campaign { grid-template-columns: 42px 1fr; }
  .ads-empty-campaign > div:last-child { grid-column: 1 / -1; flex-direction: column; }
  .ads-section-title { align-items: flex-start; flex-direction: column; }
  .ad-filter-tabs { width: 100%; }
  .ad-filter-tabs button { flex: 1; }
  .ad-opportunity-grid { grid-template-columns: 1fr; }
  .ad-product-picker { grid-template-columns: 1fr; }
  .module-tile { min-height: 116px; }
  .method-note {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .method-note > span {
    width: 100%;
    padding: 9px 0 0 31px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .product-table {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .product-table-head { display: none; }
  .product-list { gap: 8px; }
  .product-row {
    grid-template-columns: minmax(0, 1fr) 68px;
    min-height: 82px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    box-shadow: var(--shadow-sm);
  }
  .product-row > .product-cell { display: none !important; }
  .product-main h3 { max-width: 52vw; }
  .row-action { min-height: 42px; }
  .form-grid,
  .toggle-grid { grid-template-columns: 1fr; }
  .cost-apply-options { grid-template-columns: 1fr; }
  .full-field { grid-column: auto; }
  .calculator-form,
  .settings-form { padding: 17px; }
  .settings-side { grid-template-columns: 1fr; }
  .transfer-card > div { flex-direction: column; }
  .module-header {
    align-items: stretch;
    flex-direction: column;
    padding: 16px;
  }
  .module-header > div { align-items: flex-start; }
  .module-large-icon {
    width: 44px;
    height: 44px;
  }
  .module-header h2 { font-size: 18px; }
  .module-kpi-grid { gap: 8px; }
  .module-kpi {
    min-height: 104px;
    padding: 13px;
  }
  .module-kpi strong { font-size: 17px; }
  .decision-list { grid-template-columns: 1fr; }
  .decision-metrics { grid-template-columns: repeat(2, 1fr); }
  .disclosure-card {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .overlay { padding: 7px; }
  .modal {
    max-height: calc(100vh - 14px);
    border-radius: 9px;
  }
  .sheet { border-radius: 0; }
  .sheet-header,
  .modal-header { padding: 16px; }
  .sheet-body,
  .modal-body {
    max-height: calc(100vh - 100px);
    padding: 16px 16px 22px;
  }
  .product-sheet-summary { grid-template-columns: 66px 1fr; }
  .product-avatar.large {
    width: 66px;
    height: 80px;
  }
  .detail-metrics { grid-template-columns: repeat(2, 1fr); }
  .diff-grid { grid-template-columns: 1fr; }
  .modal-footer {
    align-items: stretch;
    flex-direction: column;
    padding: 12px 16px;
  }
  .modal-footer .button { width: 100%; }
  .toast-root {
    right: 10px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    left: 10px;
  }
  .toast { max-width: none; }
}

@media (max-width: 1120px) {
  .product-table-head,
  .product-row { grid-template-columns: minmax(250px, 2.5fr) repeat(3, minmax(74px, .75fr)) 112px; }
}

@media (max-width: 860px) {
  .product-table-head,
  .product-row { grid-template-columns: minmax(0, 1fr) repeat(2, 78px) 108px; }
  .csv-summary-grid { grid-template-columns: repeat(3, 1fr); }
  .history-current-grid { grid-template-columns: repeat(2, 1fr); }
  .history-current-grid > div:nth-child(2) { border-right: 0; }
  .history-current-grid > div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .alert-summary { grid-template-columns: repeat(2, 1fr); }
  .alert-summary > div:nth-child(2) { border-right: 0; }
  .alert-summary > div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 580px) {
  .alert-button { width: 40px; height: 42px; }
  .account-row { grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 9px; }
  .account-monogram { width: 38px; height: 38px; }
  .account-connection,
  .account-actions { grid-column: 2; grid-row: auto; }
  .account-actions { justify-content: flex-start; flex-wrap: wrap; }
  .account-actions .button { flex: 1 1 120px; }
  .current-account-label { padding-left: 0; }
  .account-modal-footer { align-items: stretch; flex-direction: column; }
  .account-modal-footer .button { width: 100%; }
  .account-form-actions { align-items: stretch; flex-direction: column-reverse; }
  .account-form-actions .button { width: 100%; }
  .product-row { grid-template-columns: minmax(0, 1fr) 96px; }
  .row-actions { grid-template-columns: 42px 1fr; }
  .row-action.is-history span { display: none; }
  .csv-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .csv-selection-bar { top: -16px; align-items: flex-start; flex-direction: column; }
  .csv-cell-changes { display: grid; }
  .csv-cell-changes > div { display: grid; grid-template-columns: minmax(85px, 1fr) auto 12px auto; }
  .csv-preview-footer { display: grid; grid-template-columns: 1fr 1fr; }
  .csv-preview-footer > div { grid-column: 1 / -1; }
  .csv-preview-footer .button { width: 100%; }
  .cost-history-row { grid-template-columns: 34px minmax(0, 1fr); }
  .cost-history-row > .button,
  .cost-history-row > .history-locked { grid-column: 2; justify-self: start; }
  .history-type-icon { width: 34px; height: 34px; }
  .confirm-actions { align-items: stretch; flex-direction: column; }
  .history-range-bar { align-items: flex-start; flex-direction: column; }
  .history-range-bar > div { width: 100%; }
  .history-range-bar button { flex: 1; }
  .history-current-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-metric-tabs button { flex-basis: 42%; }
  .history-chart { padding: 5px; overflow-x: auto; }
  .history-chart svg { min-width: 620px; }
  .alert-toolbar { align-items: flex-start; flex-direction: column; }
  .alert-toolbar > div { width: 100%; overflow-x: auto; }
  .alert-toolbar > div button { flex: 1 0 auto; }
  .alert-row { grid-template-columns: 8px minmax(0, 1fr); }
  .alert-row > .ui-icon { display: none; }
  .automation-facts { grid-template-columns: 1fr; }
}

/* Hosted takım çalışma alanı */
.invite-login-banner,
.invite-accept-card {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 16px;
  padding: 11px 12px;
  color: var(--forest);
  border: 1px solid #c9ded3;
  border-radius: 8px;
  background: var(--emerald-soft);
}
.invite-login-banner .ui-icon,
.invite-accept-card .ui-icon { width: 21px; height: 21px; flex: 0 0 auto; }
.invite-login-banner b,
.invite-login-banner span,
.invite-accept-card b,
.invite-accept-card span { display: block; }
.invite-login-banner b,
.invite-accept-card b { color: var(--ink-strong); font-size: 13px; }
.invite-login-banner span,
.invite-accept-card span { margin-top: 2px; color: var(--muted); font-size: 12px; }

.team-switcher {
  display: flex;
  min-width: 168px;
  height: 44px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}
.team-switcher > .ui-icon { width: 17px; height: 17px; color: var(--forest); }
.team-switcher > span { display: grid; min-width: 0; }
.team-switcher small { color: var(--soft); font-size: 12px; font-weight: 740; line-height: 1; letter-spacing: .08em; }
.team-switcher select {
  width: 128px;
  padding: 0;
  overflow: hidden;
  border: 0;
  outline: 0;
  color: var(--ink-strong);
  background: transparent;
  font-size: 13px;
  font-weight: 680;
  text-overflow: ellipsis;
}

.team-intro { align-items: center; }
.team-intro .intro-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.mobile-team-picker { display: none; }
.team-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.team-stat-grid article {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.team-stat-grid span,
.team-stat-grid b,
.team-stat-grid small { display: block; }
.team-stat-grid span { color: var(--muted); font-size: 12px; }
.team-stat-grid b { margin: 7px 0 4px; color: var(--ink-strong); font-size: 25px; font-weight: 680; }
.team-stat-grid small { color: var(--soft); font-size: 12px; }

.team-section {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.team-section > header {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 17px;
  border-bottom: 1px solid var(--line);
}
.team-section > header h2 { margin: 3px 0 0; color: var(--ink-strong); font-size: 15px; }
.board-section { margin-bottom: 20px; overflow: hidden; }
.task-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(225px, 1fr));
  gap: 0;
  overflow-x: auto;
  background: var(--surface-soft);
}
.task-column { min-width: 0; min-height: 300px; padding: 12px; border-right: 1px solid var(--line); }
.task-column:last-child { border-right: 0; }
.task-column > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.task-column > header b,
.task-column > header span { display: block; }
.task-column > header b { color: var(--ink-strong); font-size: 13px; }
.task-column > header span { margin-top: 2px; color: var(--soft); font-size: 12px; }
.task-column > header em {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 50%;
  color: var(--forest);
  background: var(--emerald-soft);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}
.task-column.is_blocked > header em,
.task-column.is-blocked > header em { color: var(--amber); background: var(--amber-soft); }
.task-column.is-done > header em { color: var(--muted); background: #eceeea; }
.task-column > div { display: grid; gap: 8px; }
.task-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 12px;
  overflow: hidden;
  border: 1px solid #e1e2dc;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 1px 2px rgba(18, 23, 20, .04);
  cursor: pointer;
  text-align: left;
}
.task-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; content: ""; background: #aeb5b0; }
.task-card.priority-high::before { background: var(--amber); }
.task-card.priority-urgent::before { background: var(--red); }
.task-card:hover { border-color: #aebeb6; box-shadow: 0 5px 18px rgba(18, 23, 20, .08); }
.task-priority { color: var(--emerald); font-size: 12px; font-weight: 760; letter-spacing: .06em; text-transform: uppercase; }
.priority-high .task-priority { color: var(--amber); }
.priority-urgent .task-priority { color: var(--red); }
.task-card h3 { margin: 6px 0 4px; color: var(--ink-strong); font-size: 13px; line-height: 1.35; }
.task-card p { display: -webkit-box; margin: 0 0 9px; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.task-card footer { display: flex; align-items: center; gap: 7px; color: var(--soft); font-size: 12px; }
.task-card footer span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-card footer time { margin-left: auto; white-space: nowrap; }
.task-card footer time.is-overdue { color: var(--red); font-weight: 700; }
.task-card footer em { display: inline-flex; align-items: center; gap: 2px; font-style: normal; }
.task-card footer .ui-icon { width: 11px; height: 11px; }
.task-empty { display: grid; min-height: 70px; place-items: center; color: var(--soft); font-size: 12px; text-align: center; }

.team-management-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: 20px; }
.member-list { padding: 5px 15px; }
.member-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) 130px auto; align-items: center; gap: 10px; min-height: 64px; border-bottom: 1px solid #ecece7; }
.member-row:last-child { border-bottom: 0; }
.member-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: var(--forest); background: var(--emerald-soft); font-size: 13px; font-weight: 750; }
.member-row > div:nth-child(2) { min-width: 0; }
.member-row b,
.member-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-row b { color: var(--ink-strong); font-size: 12px; }
.member-row small { margin-top: 3px; color: var(--soft); font-size: 12px; }
.member-row > select { height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-soft); font-size: 12px; }
.role-badge { justify-self: start; padding: 5px 7px; border-radius: 99px; color: var(--muted); background: #eff0ed; font-size: 12px; font-weight: 700; }
.role-badge.is-owner { color: var(--forest); background: var(--emerald-soft); }
.role-badge.is-admin { color: #765117; background: var(--amber-soft); }
.member-actions { display: flex; justify-content: flex-end; gap: 4px; }
.member-actions button,
.pending-invites button { padding: 5px 7px; border: 0; color: var(--forest); background: transparent; cursor: pointer; font-size: 12px; }
.member-actions button.is-danger { color: var(--red); }
.pending-invites { margin: 4px 15px 15px; padding-top: 13px; border-top: 1px solid var(--line); }
.pending-invites h3 { margin: 0 0 8px; font-size: 12px; }
.pending-invites article { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 6px; background: var(--surface-soft); }
.pending-invites article + article { margin-top: 5px; }
.pending-invites b,
.pending-invites small { display: block; }
.pending-invites b { font-size: 12px; }
.pending-invites small { margin-top: 2px; color: var(--soft); font-size: 12px; }
.activity-list { max-height: 390px; overflow-y: auto; padding: 8px 15px; }
.activity-list article { display: grid; grid-template-columns: 8px 1fr; gap: 9px; padding: 9px 0; border-bottom: 1px solid #ecece7; }
.activity-list article > i { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 3px var(--emerald-soft); }
.activity-list p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.activity-list p b { color: var(--ink); }
.activity-list time { display: block; margin-top: 3px; color: var(--soft); font-size: 12px; }
.team-rename-form { padding: 13px 15px 17px; border-top: 1px solid var(--line); }

.team-small-modal { width: min(100%, 590px); }
.role-explainer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 13px; }
.role-explainer p { margin: 0; padding: 9px; color: var(--muted); border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); font-size: 12px; line-height: 1.45; }
.role-explainer b { display: block; margin-bottom: 2px; color: var(--ink); }
.invite-result > span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.invite-result > label { display: flex; gap: 7px; }
.invite-result input { min-width: 0; flex: 1; height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); font-size: 12px; }
.invite-result small { display: block; margin: 9px 0 15px; color: var(--soft); font-size: 12px; line-height: 1.45; }

.task-modal { width: min(100%, 980px); }
.task-modal-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .7fr); max-height: calc(100vh - 112px); overflow: hidden; }
.task-modal-layout > .modal-body { max-height: none; }
.task-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-top: 16px; }
.task-form-actions .button.primary { margin-left: auto; }
.task-comments { display: grid; min-height: 0; grid-template-rows: auto 1fr auto; border-left: 1px solid var(--line); background: var(--surface-soft); }
.task-comments > header { display: flex; align-items: center; justify-content: space-between; padding: 15px; border-bottom: 1px solid var(--line); }
.task-comments h3 { margin: 0; font-size: 13px; }
.task-comments > header span { color: var(--soft); font-size: 12px; }
.task-comments > div { overflow-y: auto; padding: 10px 14px; }
.task-comments article { padding: 9px 0; border-bottom: 1px solid var(--line); }
.task-comments article > div { display: flex; justify-content: space-between; gap: 8px; }
.task-comments article b { font-size: 12px; }
.task-comments article time { color: var(--soft); font-size: 12px; }
.task-comments article p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.task-comments > form { padding: 11px 14px 15px; border-top: 1px solid var(--line); }
.task-comments textarea { width: 100%; min-height: 68px; padding: 9px; resize: vertical; border: 1px solid var(--line); border-radius: 7px; font-size: 12px; }

@media (max-width: 1260px) {
  .team-switcher { min-width: 44px; width: 44px; padding: 0; justify-content: center; }
  .team-switcher > span { position: absolute; width: 44px; height: 44px; opacity: 0; }
  .team-switcher select { width: 44px; height: 44px; cursor: pointer; }
}

@media (max-width: 1000px) {
  .team-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .team-management-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .mobile-nav.has-team { grid-template-columns: repeat(7, 1fr); }
  .team-switcher { display: none; }
  .mobile-team-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: -2px 0 16px;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
  }
  .mobile-team-picker span { color: var(--muted); font-size: 12px; font-weight: 620; }
  .mobile-team-picker select { min-width: 0; max-width: 60%; border: 0; color: var(--forest); background: transparent; font-size: 12px; font-weight: 700; text-align: right; }
  .task-board { grid-template-columns: repeat(4, minmax(245px, 1fr)); }
  .task-column { min-height: 260px; }
  .task-modal-layout { grid-template-columns: 1fr; max-height: calc(100vh - 100px); overflow-y: auto; }
  .task-modal-layout > .modal-body { overflow: visible; }
  .task-comments { min-height: 280px; border-top: 1px solid var(--line); border-left: 0; }
}

@media (max-width: 580px) {
  .team-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .team-stat-grid article { padding: 12px; }
  .team-intro .intro-actions { width: 100%; justify-content: stretch; }
  .team-intro .intro-actions .button { flex: 1 1 130px; }
  .member-row { grid-template-columns: 34px minmax(0, 1fr) auto; padding: 8px 0; }
  .member-row > select,
  .member-row > .role-badge { grid-column: 2; }
  .member-actions { grid-column: 3; grid-row: 1 / span 2; flex-direction: column; }
  .role-explainer { grid-template-columns: 1fr; }
  .invite-result > label { align-items: stretch; flex-direction: column; }
  .task-form-actions { align-items: stretch; flex-direction: column-reverse; }
  .task-form-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}