:root {

  --bg: #f3f5f9;
  --bg-soft: #e9edf4;
  --card: #ffffff;
  --card-solid: #ffffff;

  --surface-2: #f8fafd;
  --line: #dce3ec;
  --line-soft: #eaf0f7;
  --hairline: rgba(17, 28, 45, .12);
  --text: #14203a;
  --text-dim: #56657f;
  --text-faint: #8695ab;
  --brand: #1d63d2;
  --brand-600: #1550b0;
  --brand-400: #4e8fef;
  --brand-soft: #e8f0fd;

  --accent: #d9a441;
  --teal: #0e9aa8;
  --warn: #a9741a;
  --danger: #c4404a;
  --ok: #1b7f5c;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 4px 16px rgba(17, 28, 45, .1);
  --sidebar-w: 208px;
  --rail: #0c1424;
  --rail-dim: #8fa3bd;

  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  --mnav-h: 59px;
}

* { box-sizing: border-box; }


[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);

  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

body { background-image: none; }

a { color: var(--brand); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: .2px; }
.muted { color: var(--text-dim); }
.small { font-size: 12.5px; }
.tiny { font-size: 11.5px; }
.error-text { color: var(--danger); font-size: 13px; margin: 0; }


.login-wrap {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;

  background:
    radial-gradient(900px 520px at 18% 12%, #1a4b9d55, transparent 62%),
    radial-gradient(760px 460px at 82% 88%, rgba(217, 164, 65, .16), transparent 60%),
    linear-gradient(160deg, #050a16 0%, #0a1a38 42%, #0e2a5c 100%);
  position: relative;
  overflow: hidden;
}

.login-wrap::before,
.login-wrap::after {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
}
.login-wrap::before {
  background-image:
    linear-gradient(to right, #7cb0f01a 1px, transparent 1px),
    linear-gradient(to bottom, #7cb0f01a 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}
.login-wrap::after {
  background: conic-gradient(from 210deg at 50% 50%, transparent 0deg, #7cb0f014 60deg, transparent 130deg);
  animation: login-sweep 18s linear infinite;
}
@keyframes login-sweep {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .login-wrap::after { animation: none; }
}
.login-card { position: relative; z-index: 1; }


.login-card {
  background: linear-gradient(180deg, #101c34e6, #0a1628f2);
  border: 1px solid #7cb0f033;
  box-shadow: 0 24px 60px #04070f66, 0 0 0 1px #ffffff0a inset, 0 0 40px #7cb0f014;
  backdrop-filter: blur(6px);
}
.login-card h1 { color: #eef6ff; }
.login-card .muted { color: #9fb6cc; }
.login-card .field > span { color: #9fb6cc; }
.login-card input {
  background: #0a1628;
  border-color: #2a4570;
  color: #eef6ff;
}
.login-card input:focus { border-color: var(--brand-400); box-shadow: 0 0 0 3px var(--brand-400)22; }
.login-card .error-text { color: var(--brand-400); }
.login-card .btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-400));
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(31, 122, 95, .27);
}
.login-credit {
  margin: 2px 0 0;
  text-align: center;
  font-size: 11.5px;
  letter-spacing: .4px;
  color: #7d93aa;
}

.captcha-row { display: grid; grid-template-columns: 118px 1fr; gap: 10px; }
.captcha-question {
  background: #0a1628;
  border: 1px dashed #2a4570;
  border-radius: var(--radius-sm);
  color: #a9cdf5;
  font: inherit;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 9px 4px;
  cursor: pointer;
  user-select: none;
}
.captcha-question:hover { border-color: var(--brand-400); color: #cdf3ff; }

.login-card {
  width: min(400px, 100%);
  border-radius: 18px;
  padding: 28px;
  display: grid;
  gap: 14px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-lg { margin-bottom: 6px; }
.brand-mark {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: transparent;
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px; color: #fff;
  flex: none;
  overflow: hidden;
  box-shadow: 0 4px 14px var(--brand-400)29;
}

.brand-mark img { width: 100%; height: 100%; display: block; }
.brand h1 { font-size: 18px; }
.field { display: grid; gap: 6px; }
.field > span { font-size: 12.5px; color: var(--text-dim); }

input, select, textarea {
  width: 100%;
  background: #0e1526;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 9px 11px;
  font: inherit;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand); }
select.input { width: auto; min-width: 128px; }

.btn {
  border: 1px solid var(--line);
  background: #1b2438;
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font: inherit;
  cursor: pointer;
  transition: .15s;
  white-space: nowrap;
}
.btn:hover { border-color: var(--brand); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; }
.btn-danger { background: rgba(31, 122, 95, .13); border-color: rgba(31, 122, 95, .33); color: var(--brand-400); }

.btn-warn { background: #f5a52422; border-color: #f5a52466; color: #f7c46c; }
.btn-warn:hover { border-color: #f5a524; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }


.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100dvh; }

.sidebar {
  border-right: 1px solid var(--line-soft);
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: 0; height: 100dvh;
  background: var(--rail)cc;
  backdrop-filter: blur(8px);
}
.nav { display: grid; gap: 3px; overflow-y: auto; }
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: var(--radius-sm);
  color: var(--text-dim); font-size: 13.5px;
}
.nav a:hover { background: #ffffff08; color: var(--text); }
.nav a.active { background: var(--brand-soft); color: var(--brand-400); font-weight: 600; }
.nav .badge { margin-left: auto; }
.sidebar-foot { margin-top: auto; display: grid; gap: 8px; }
.sync-state { line-height: 1.5; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-soft);
  position: sticky; top: 0; z-index: 20;
  background: var(--rail)e6; backdrop-filter: blur(10px);
  flex-wrap: wrap;
}
.topbar-left h2 { font-size: 17px; }

.topbar-left { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; }
.topbar-titles { display: grid; gap: 2px; min-width: 0; }
.topbar-titles h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.topbar-titles #page-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: auto; }
@media (min-width: 1101px) {

  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; flex-wrap: nowrap; align-items: center; }
  .topbar-left { flex: 1 1 auto; min-width: 0; }
  .topbar-right { margin-left: 0; justify-content: flex-end; }
}
@media (min-width: 1101px) and (max-width: 1399px) {
  .topbar-titles #page-sub { display: none; }
}
@media (min-width: 1400px) {
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; flex-wrap: nowrap; align-items: center; }
  .topbar-left { flex: 1 1 auto; min-width: 0; }
  .topbar-right { margin-left: 0; justify-content: flex-end; }
}

.view {
  padding: 20px 22px 90px; display: grid; gap: 18px; align-content: start;
  grid-template-columns: minmax(0, 1fr); min-width: 0;
}

.mobile-nav { display: none; }


.card {
  background: var(--card-solid);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 16px;
  min-width: 0;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.card-head h3 { font-size: 14.5px; }
.card-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }

.grid { display: grid; gap: 14px; }
.grid-kpi { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }


.kpi { display: grid; gap: 6px; }
.kpi .label { font-size: 12.5px; color: var(--text-dim); display: flex; gap: 5px; align-items: center; }
.kpi .value {
  font-size: clamp(16px, 4.6vw, 22px);
  font-weight: 650;
  letter-spacing: .3px;
  overflow-wrap: anywhere;
}
.kpi .sub { font-size: 12px; color: var(--text-faint); }
.delta { font-size: 12px; font-weight: 600; }
.delta.up { color: var(--ok); }
.delta.down { color: var(--danger); }
.delta.flat { color: var(--text-faint); }


.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }

th, td { padding: 9px 10px; text-align: left; white-space: nowrap; }
th {
  color: var(--text-dim); font-weight: 500; font-size: 12px;
  border-bottom: 1px solid var(--line); position: sticky; top: 0;
  background: var(--card-solid);
}
td { border-bottom: 1px solid var(--line-soft); }
th:first-child, td:first-child { text-align: left; }
tbody tr:hover { background: #ffffff06; }
td.num { font-variant-numeric: tabular-nums; }
.sub-name { display: block; font-size: 11.5px; color: var(--text-faint); }


.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  background: #ffffff12; color: var(--text-dim);
}
.badge.ok { background: #2fbf7122; color: #6ee7a5; }
.badge.info { background: var(--brand)22; color: #8fb6f5; }
.badge.warn { background: #f5a52422; color: #f7c46c; }
.badge.danger { background: rgba(31, 122, 95, .13); color: var(--brand-400); }
.badge.shadow { background: #ffffff10; color: var(--text-dim); }
.badge.gray { background: #ffffff0d; color: var(--text-faint); }

.pill-row { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line-soft); }
.tabs button {
  background: none; border: none; color: var(--text-dim);
  padding: 8px 12px; cursor: pointer; font: inherit;
  border-bottom: 2px solid transparent;
}
.tabs button.active { color: var(--text); border-bottom-color: var(--brand); font-weight: 600; }


.notice {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  background: var(--brand)10;
  border-radius: var(--radius-sm);
  padding: 11px 13px; font-size: 12.8px; color: #c6d3ea; line-height: 1.6;
}
.notice.warn { border-left-color: var(--warn); background: #f5a52410; }
.notice.danger { border-left-color: var(--danger); background: var(--brand)10; }
.notice.ok { border-left-color: var(--ok); background: #2fbf7110; }


.chart { width: 100%; height: 240px; display: block; overflow: visible; }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); }
.chart-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }
.chart-tip {
  position: absolute; pointer-events: none;
  background: #0e1526f2; border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 9px; font-size: 12px;
  box-shadow: var(--shadow); z-index: 40; white-space: nowrap;
}
.chart-host { position: relative; }


.modal-host {
  position: fixed; inset: 0; z-index: 80;
  background: #060a14cc; backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 20px;
}
.modal {
  width: min(760px, 100%); max-height: 88dvh; overflow-y: auto;
  background: var(--card-solid); border: 1px solid var(--line);
  border-radius: 16px; padding: 20px; box-shadow: var(--shadow);
  display: grid; gap: 14px;
}
.modal.wide { width: min(1000px, 100%); }

.toast-host {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: grid; gap: 8px; max-width: min(380px, 90vw);
}
.toast {
  background: #16203af2; border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 10px; padding: 11px 13px; font-size: 13px;
  box-shadow: var(--shadow); animation: slide-in .18s ease-out;
}
.toast.ok { border-left-color: var(--ok); }
.toast.warn { border-left-color: var(--warn); }
.toast.error { border-left-color: var(--danger); }
@keyframes slide-in { from { transform: translateY(8px); opacity: 0; } }


.form-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stepper { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.stepper .step {
  font-size: 12px; color: var(--text-faint);
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-soft);
}
.stepper .step.active { color: var(--brand-400); border-color: var(--brand); background: var(--brand-soft); }
.stepper .step.done { color: #6ee7a5; border-color: #2fbf7155; }

.drop {
  border: 1.5px dashed var(--line); border-radius: var(--radius);
  padding: 28px; text-align: center; color: var(--text-dim);
  cursor: pointer; transition: .15s;
}
.drop:hover, .drop.over { border-color: var(--brand); background: var(--brand-soft); }

.map-grid { display: grid; gap: 8px; }
.map-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--line-soft);
}
.map-row .sys-field { font-size: 12.8px; }
.map-row .sys-field .req { color: var(--danger); margin-left: 4px; }

.kv { display: grid; grid-template-columns: 128px 1fr; gap: 6px 12px; font-size: 12.8px; }
.kv dt { color: var(--text-faint); }
.kv dd { margin: 0; word-break: break-all; }

.diff { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.diff .was { color: var(--brand-400); }
.diff .now { color: #6ee7a5; }

.empty { text-align: center; color: var(--text-faint); padding: 34px 12px; font-size: 13px; }
.skeleton { background: linear-gradient(90deg, #ffffff08, #ffffff14, #ffffff08); border-radius: 8px; height: 14px; }


@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .view { padding: 14px 14px 96px; }
  .topbar { padding: 12px 14px; }

  .topbar-right { width: 100%; }
  .topbar-right .input { flex: 1; min-width: 0; }
  .grid { gap: 11px; }
  .grid-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 13px; }
  .card-head h3 { font-size: 14px; }
  .kpi .value { font-size: 19px; }
  .kpi .sub { line-height: 1.45; }
  .notice { font-size: 12.4px; padding: 10px 11px; }
  .topbar-left h2 { font-size: 16px; }
  .toast-host { left: 14px; right: 14px; bottom: 84px; max-width: none; }
  .mobile-nav {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    background: var(--rail)f2; backdrop-filter: blur(12px);
    border-top: 1px solid var(--line-soft);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .mobile-nav a {
    display: grid; gap: 3px; place-items: center;
    font-size: 10.5px; color: var(--text-faint); padding: 5px 0; position: relative;
  }
  .mobile-nav a.active { color: var(--brand-400); }
  .mobile-nav a .dot {
    position: absolute; top: 2px; right: 22%;
    background: var(--danger); color: #fff;
    border-radius: 999px; font-size: 9.5px; padding: 0 5px; font-weight: 700;
  }
  .map-row { grid-template-columns: 1fr; }
  .kpi .value { font-size: 20px; }
  th, td { padding: 8px; }
}



body { background-image: none; }

.login-wrap { background-color: var(--rail); }


.sidebar {
  background: var(--rail);
  border-right: none;
  color: #fff;
}
.sidebar .brand strong { color: #fff; }

.sidebar .brand > div { display: grid; line-height: 1.3; min-width: 0; }
.sidebar .brand strong { white-space: nowrap; font-size: 13.5px; letter-spacing: .2px; }
.sidebar .brand .muted { font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; }
.sidebar .muted, .sidebar .sync-state { color: var(--rail-dim); }
.sidebar .btn-ghost { color: #cfe0f0; border-color: #ffffff2e; background: transparent; }
.sidebar .btn-ghost:hover { border-color: var(--brand); }
.nav a { color: var(--rail-dim); }
.nav a:hover { background: #ffffff12; color: #fff; }
.nav a.active { background: var(--brand); color: #fff; font-weight: 600; }
.nav a.active .badge { background: #ffffff2e; color: #fff; }


.topbar { background: #fff; box-shadow: 0 1px 0 var(--line-soft); }

input, select, textarea { background: #fff; }

.btn { background: #fff; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: #ef3d4c; border-color: #ef3d4c; }
.btn-danger { background: #fdeaed; border-color: #e0344a55; color: var(--danger); }
.btn-danger:hover { background: #fbd9de; }

.btn-warn { background: #fdf3e0; border-color: #e0a33a66; color: #9a6413; }
.btn-warn:hover { background: #fbe9cd; border-color: #e0a33a; }

th { background: var(--surface-2); }
tbody tr:hover { background: var(--brand-soft); }

.badge { background: var(--bg-soft); color: var(--text-dim); }
.badge.ok { background: #178a5518; color: #0f6b42; }
.badge.info { background: #e6efff; color: #2a58b8; }
.badge.warn { background: #fdf3e0; color: #9a6413; }
.badge.danger { background: #fdeaed; color: #b3243a; }
.badge.shadow, .badge.gray { background: var(--bg-soft); color: var(--text-faint); }

.notice { background: #eef4ff; color: #33475b; }
.notice.warn { background: #fdf7eb; border-left-color: #e0a33a; }
.notice.danger { background: #fdf0f2; }
.notice.ok { background: #eef8f2; }

.chart-tip { background: #fff; }
.modal-host { background: var(--text)66; }
.modal { box-shadow: 0 18px 50px var(--text)33; }
.toast { background: #fff; }
.drop { background: #fff; }


.switch {
  position: relative; display: inline-block; width: 34px; height: 20px;
  flex: none;
}
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span {
  position: absolute; inset: 0; border-radius: 999px; background: #c9d2dc; transition: .18s;
}
.switch span::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: .18s; box-shadow: 0 1px 3px var(--text)33;
}
.switch input:checked + span { background: var(--brand); }
.switch input:checked + span::after { transform: translateX(14px); }
.switch input:disabled + span { opacity: .45; }


.tabs { border-bottom: 1px solid var(--line-soft); }
.tabs button { color: var(--text-dim); font-weight: 500; }
.tabs button.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }


.table-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 10px; margin-top: 4px;
  border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text-dim);
}


.cond-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) minmax(110px, .9fr) minmax(90px, .8fr) minmax(120px, 1fr) minmax(90px, .8fr) 32px;
  gap: 8px; align-items: end;
  padding: 10px 0; border-bottom: 1px dashed var(--line-soft);
}
.cond-row .field > span { font-size: 11.5px; }
@media (max-width: 1100px) {
  .cond-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


.slot-grid { display: grid; gap: 3px; font-size: 11px; }
.slot-grid .slot-head { display: grid; grid-template-columns: 54px repeat(24, 1fr); gap: 3px; color: var(--text-faint); }
.slot-grid .slot-row { display: grid; grid-template-columns: 54px repeat(24, 1fr); gap: 3px; align-items: center; }
.slot-grid .slot-cell {
  height: 16px; border-radius: 3px; background: var(--bg-soft); cursor: pointer;
  border: 1px solid transparent;
}
.slot-grid .slot-cell.on { background: var(--brand); }
.slot-grid .slot-label { color: var(--text-dim); }


.daterange { position: relative; display: inline-block; }
.daterange-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 7px 10px; font-size: 12.5px; color: var(--text); cursor: pointer;
}
.daterange-btn:hover { border-color: var(--brand); }
.daterange-label { font-variant-numeric: tabular-nums; }
.daterange-icon { opacity: .6; }
.daterange-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 70;
  display: flex; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 16px 40px var(--text)2e; overflow: hidden;
}
.daterange-presets {
  display: grid; align-content: start; gap: 2px; padding: 10px 8px;
  border-right: 1px solid var(--line-soft); min-width: 156px;
  max-height: 360px; overflow-y: auto;
}
.daterange-group {
  padding: 8px 10px 3px; font-size: 10.5px; letter-spacing: .4px;
  text-transform: uppercase; color: var(--text-faint);
}
.daterange-preset { display: block; width: 100%; }
.daterange-preset {
  text-align: left; background: none; border: none; cursor: pointer;
  padding: 7px 10px; border-radius: 6px; font: inherit; font-size: 12.5px;
  color: var(--text-dim); white-space: nowrap;
}
.daterange-preset:hover { background: var(--bg-soft); color: var(--text); }
.daterange-preset.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.daterange-cal { padding: 12px; }
.daterange-nav {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft);
}
.daterange-nav-title {
  min-width: 168px; text-align: center; font-size: 12.5px;
  font-weight: 600; color: var(--text);
}
.daterange-nav-btn {
  width: 26px; height: 26px; border: 1px solid var(--line); background: #fff;
  border-radius: 6px; cursor: pointer; font: inherit; font-size: 13px;
  color: var(--text-dim); line-height: 1; display: grid; place-items: center;
}
.daterange-nav-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }


.cell-id {
  display: block; font-size: 11px; color: var(--text-faint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tabs .tab-chip {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 7px;
  background: #6b7a8d; color: #fff; border-radius: 999px;
  padding: 2px 7px; font-size: 11px; font-weight: 500;
}
.tabs button.active .tab-chip { background: var(--brand); }
.tab-chip-x { opacity: .85; font-size: 10px; }
.tabs .tab-hint { margin-left: 7px; font-size: 11.5px; color: var(--text-faint); }

.colfilter { position: relative; display: inline-block; }
.colfilter-btn {
  border: none; background: none; cursor: pointer; color: var(--text-faint);
  font-size: 10px; padding: 0 2px;
}
.colfilter-btn.active { color: var(--brand); }
.colfilter-pop {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 12px 30px var(--text)26; padding: 10px; min-width: 150px;
}
.colfilter-row {
  display: flex; align-items: center; gap: 7px; padding: 4px 2px;
  font-size: 12.5px; color: var(--text); cursor: pointer; white-space: nowrap;
}
.colfilter-row input { width: auto; margin: 0; }
.colfilter-sep { height: 1px; background: var(--line-soft); margin: 6px 0; }

.colfilter-pop.colfilter-pop-float {
  position: fixed; top: 0; left: 0; z-index: 400;
  max-height: 70vh; overflow-y: auto;
}

th .sortable { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; }
th .sortable:hover { color: var(--brand); }
th .sortable.active { color: var(--text); font-weight: 600; }
.sort-icon { font-size: 10px; opacity: .55; }
th .sortable.active .sort-icon { opacity: 1; color: var(--brand); }


.tz-input { width: auto; min-width: 210px; font-size: 12.5px; }
input:disabled, select:disabled {
  background: var(--bg-soft); color: var(--text-dim); cursor: not-allowed;
}


.tz-picker { position: relative; display: inline-block; }
.tz-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 200px; justify-content: space-between;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 7px 10px; font-size: 12.5px; color: var(--text); cursor: pointer;
}
.tz-btn:hover { border-color: var(--brand); }
.tz-caret { font-size: 9px; color: var(--text-faint); }
.tz-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 80;
  width: 320px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 16px 40px var(--text)2e; padding: 8px;
}
.tz-search { margin-bottom: 6px; }
.tz-list { max-height: 300px; overflow-y: auto; }
.tz-group {
  padding: 8px 8px 4px; font-size: 10.5px; letter-spacing: .4px;
  text-transform: uppercase; color: var(--text-faint);
}
.tz-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 7px 8px; border-radius: 6px; font: inherit; font-size: 12.5px;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.tz-item:hover { background: var(--bg-soft); }
.tz-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.tz-offset { color: var(--text-faint); font-size: 11.5px; }


@media (max-width: 900px) {
  .tz-pop.tz-pop-sheet {
    position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto;
    width: auto; max-height: 72dvh; z-index: 220;
    display: flex; flex-direction: column;
    border-radius: 16px; padding: 12px;
    box-shadow: 0 -8px 30px #0000004d;
  }
  .tz-pop-sheet .tz-list { max-height: none; flex: 1 1 auto; overflow-y: auto; }
  .tz-pop-sheet .tz-item { padding: 11px 10px; font-size: 13.5px; }
  .tz-pop-sheet .tz-search { padding: 9px 10px; }

  .tz-btn { min-width: 0; }
}


.table-wrap {

  max-height: calc(100vh - 300px);
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}
.table-wrap table { width: max-content; min-width: 100%; }
.table-wrap th { background: var(--surface-2); z-index: 2; }


.table-wrap table.resized { table-layout: fixed; }
.table-wrap table.resized th,
.table-wrap table.resized td {
  overflow: hidden;
  text-overflow: ellipsis;
}
th .col-grip {

  position: absolute; top: 0; right: 0; bottom: 0;
  width: 8px; cursor: col-resize; z-index: 5;
}
th .col-grip:hover { background: linear-gradient(90deg, transparent, rgba(31, 122, 95, .33)); }
body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none; }

.colpick {
  display: grid; grid-template-columns: 200px 1fr 300px;
  gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  background: #fff; min-height: 320px;
}
.colgroups { border-right: 1px solid var(--line-soft); padding: 8px; display: grid; align-content: start; gap: 2px; }
.colgroup {
  display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; cursor: pointer; font: inherit; font-size: 13px;
  padding: 9px 10px; border-radius: 7px; color: var(--text); text-align: left;
}
.colgroup:hover { background: var(--bg-soft); }
.colgroup.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.collist { padding: 8px; overflow-y: auto; max-height: 360px; border-right: 1px solid var(--line-soft); }
.colrow {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  border-radius: 7px; font-size: 13px; cursor: pointer;
}
.colrow:hover { background: var(--bg-soft); }
.colrow.all { font-weight: 600; background: var(--bg-soft); }
.colrow input { width: auto; margin: 0; }
.colpick-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--line-soft); font-size: 13px;
}
.colpicked { max-height: 310px; overflow-y: auto; padding: 8px; }
.picked-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 8px; border: 1px solid var(--line-soft); border-radius: 7px;
  padding: 7px 6px 7px 10px; margin-bottom: 6px; font-size: 12.5px;
  background: #fff; cursor: grab;
}
.picked-row:active { cursor: grabbing; }
.picked-row.dragging { opacity: .45; }
.picked-row.drop-target {
  border-color: var(--brand); background: var(--brand-soft);
  box-shadow: 0 -2px 0 var(--brand) inset;
}
.drag-handle {
  color: var(--text-faint); font-size: 13px; line-height: 1;
  user-select: none; letter-spacing: -2px;
}
.picked-x { opacity: .55; }
.picked-x:hover { opacity: 1; }
.picked-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.creative-tag {
  display: inline-block; padding: 2px 7px; border-radius: 999px;
  background: var(--bg-soft); color: var(--text-dim); font-size: 11px;
  border: 1px solid var(--line-soft);
}


.rank-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; font-size: 13px; margin-bottom: 6px; flex-wrap: wrap;
}
.rank-subhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 0 0 6px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11.5px; color: var(--text-faint);
}


.name-line { display: inline-flex; align-items: center; gap: 6px; }
.rule-btn {
  border: 1px solid var(--line); background: #fff; border-radius: 6px;
  width: 22px; height: 22px; display: inline-grid; place-items: center;
  cursor: pointer; font-size: 12px; color: var(--text-dim); padding: 0;
  flex: none;
}
.rule-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

.rule-cell {
  display: grid;
  justify-items: center;
  gap: 2px;
}
.rule-state {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  line-height: 1.2;
}
.rule-state.on { color: #178a55; }
.rule-state.off { color: #98a2b3; }
.rule-cell .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

.rule-mode-select {
  min-width: 168px;
  font-size: 12.5px;
}

.edit-btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text-dim);
  border-radius: 6px;
  padding: 0 6px;
  line-height: 18px;
  font-size: 12px;
  cursor: pointer;
}
.edit-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }


.filterbar { display: none; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.filterbar.on {
  display: flex; background: #fff8f8; border: 1px solid #ffd9dd;
  border-radius: 8px; padding: 7px 10px;
}
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-soft); color: var(--brand);
  border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 600;
}
.filter-chip-x { cursor: pointer; opacity: .75; }
.filter-chip-x:hover { opacity: 1; }


tfoot td {
  border-top: 1px solid var(--line); border-bottom: none;
  background: var(--surface-2); font-weight: 600; color: var(--text);
  position: sticky; bottom: 0;
}
tfoot td:first-child { text-align: left; }


.table-wrap table:not(.js-frozen):not(.plain) th:nth-child(1), .table-wrap table:not(.js-frozen):not(.plain) td:nth-child(1),
.table-wrap table:not(.js-frozen):not(.plain) th:nth-child(2), .table-wrap table:not(.js-frozen):not(.plain) td:nth-child(2),
.table-wrap table:not(.js-frozen):not(.plain) th:nth-child(3), .table-wrap table:not(.js-frozen):not(.plain) td:nth-child(3) {
  position: sticky; z-index: 3; background: #fff;
}

.table-wrap table:not(.js-frozen):not(.plain) th:nth-child(1), .table-wrap table:not(.js-frozen):not(.plain) td:nth-child(1) {
  left: 0; width: 44px; min-width: 44px; max-width: 44px; padding: 9px 6px;
}
.table-wrap table:not(.js-frozen):not(.plain) th:nth-child(2), .table-wrap table:not(.js-frozen):not(.plain) td:nth-child(2) {
  left: 44px; width: 78px; min-width: 78px; max-width: 78px; padding: 9px 8px;
}
.table-wrap table:not(.js-frozen):not(.plain) th:nth-child(3), .table-wrap table:not(.js-frozen):not(.plain) td:nth-child(3) {
  left: 122px; min-width: 140px; white-space: nowrap;
}
.table-wrap table:not(.js-frozen):not(.plain) th:nth-child(4), .table-wrap table:not(.js-frozen):not(.plain) td:nth-child(4) { width: 100%; }
.table-wrap table:not(.js-frozen):not(.plain) thead th:nth-child(-n+3) { z-index: 4; background: var(--surface-2); }



.table-wrap table.js-frozen td { overflow: hidden; text-overflow: ellipsis; }
.table-wrap table.js-frozen th.freeze-col,
.table-wrap table.js-frozen td.freeze-col {
  position: sticky; z-index: 3; background: #fff;
}
.table-wrap table.js-frozen thead th.freeze-col { z-index: 6; background: var(--surface-2); }
.table-wrap table.js-frozen tfoot td.freeze-col { z-index: 5; background: var(--surface-2); }

.table-wrap table.js-frozen th.freeze-edge,
.table-wrap table.js-frozen td.freeze-edge {
  border-right: 1px solid var(--line);
  box-shadow: 8px 0 10px -8px rgba(18, 35, 47, .35);
}
.table-wrap table.js-frozen tbody tr:hover td.freeze-col { background: var(--brand-soft); }


.quickrule { border: 1px solid var(--brand) !important; background: #fffafa !important; }
.quickrule-row {
  display: grid;
  grid-template-columns: 1.3fr 1.5fr 1fr 1fr 1.2fr auto;
  gap: 8px; align-items: end;
}
.quickrule-row .field > span { font-size: 11.5px; }
@media (max-width: 1100px) {
  .quickrule-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .colpick { grid-template-columns: 1fr; }
  .colgroups { border-right: none; border-bottom: 1px solid var(--line-soft); grid-auto-flow: column; }
}
.daterange-months { display: flex; gap: 18px; }
.daterange-month { text-align: center; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.daterange-week, .daterange-days {
  display: grid; grid-template-columns: repeat(7, 28px); gap: 2px;
}
.daterange-week span { text-align: center; font-size: 11px; color: var(--text-faint); }
.daterange-day {
  height: 26px; border: none; background: none; cursor: pointer; font: inherit;
  font-size: 12px; color: var(--text); border-radius: 6px;
}
.daterange-day:hover { background: var(--bg-soft); }
.daterange-day.blank { cursor: default; }

.daterange-tz-row {
  display: grid;
  gap: 4px;
  padding: 6px 6px 4px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 6px;
}
.daterange-tz-label { font-size: 11px; color: var(--text-faint); }
.daterange-tz { width: 100%; }
.daterange-tz-hint { font-size: 10.5px; color: var(--text-faint); padding: 0 6px 6px; line-height: 1.4; }
.daterange-day.in-range { background: var(--brand-soft); color: var(--brand); }
.daterange-day.edge { background: var(--brand); color: #fff; font-weight: 600; }
.daterange-day.today { box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 900px) {

  .daterange { position: static; }
  .daterange-pop {
    position: fixed; inset: 12px; z-index: 200;
    flex-direction: column; max-height: none; overflow-y: auto;
    border-radius: 14px;
  }

  .daterange-presets {
    border-right: none; border-bottom: 1px solid var(--line-soft);
    grid-auto-flow: row; grid-template-columns: 1fr 1fr;
    min-width: 0; max-height: none;
  }
  .daterange-group { grid-column: 1 / -1; }

  .daterange-tz-row, .daterange-tz-hint { grid-column: 1 / -1; }
  .daterange-preset { white-space: normal; text-align: center; }
  .daterange-months { flex-direction: column; }
  .daterange-week, .daterange-days { grid-template-columns: repeat(7, 1fr); }
  .daterange-day { height: 30px; font-size: 12.5px; }
}


.quickrule-rows { display: grid; gap: 6px; }
.quickrule-row-multi {
  display: grid;
  grid-template-columns: 124px 1.2fr 1.2fr .8fr 34px 34px;
  gap: 8px; align-items: center;
}

.quickrule-row-multi.gate { grid-template-columns: 124px 1.1fr 1fr 1.2fr .8fr 34px 34px; }
.quickrule-unit { text-align: center; }
.quickrule-conn { font-size: 12px; padding: 6px 8px; font-weight: 600; color: var(--brand); }

.quickrule-block { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line-soft); }
.quickrule-block:first-of-type { border-top: none; margin-top: 6px; padding-top: 0; }
.quickrule-block-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.quickrule-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 700;
}
.quickrule-row-inline { display: flex; gap: 14px; flex-wrap: wrap; }
.quickrule-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text); cursor: pointer;
}
.quickrule-check input { width: auto; }
.quickrule .quickrule-block .btn-sm { margin-top: 6px; }

.quickrule-library { background: var(--bg-soft); border-radius: 10px; padding: 8px 10px; margin-top: 8px; }
.quickrule-library .quickrule-row-inline { align-items: center; }
.quickrule-block.is-locked { opacity: .55; pointer-events: none; }
.quickrule-block.is-hidden { display: none; }
.rule-lib-select { width: 330px; min-width: 220px; flex: 0 1 330px; }
.toolbar-sep { width: 1px; height: 22px; background: var(--line); margin: 0 6px; }

.budget-status .table-wrap { max-height: 300px; overflow: auto; }
.budget-status .table-wrap th:nth-child(-n+3),
.budget-status .table-wrap td:nth-child(-n+3) {
  position: static; left: auto; width: auto; min-width: 0; max-width: none;
}
.budget-status .table-wrap th,
.budget-status .table-wrap td { white-space: nowrap; }
.budget-status .table-wrap th:nth-child(1),
.budget-status .table-wrap td:nth-child(1) { width: 100%; }
.budget-status .table-wrap th:nth-child(4),
.budget-status .table-wrap td:nth-child(4) { width: auto; }

.api-access-page .table-wrap th:nth-child(-n+3),
.api-access-page .table-wrap td:nth-child(-n+3) {
  position: static; left: auto; width: auto; min-width: 0; max-width: none;
}
.api-access-page .table-wrap th,
.api-access-page .table-wrap td { white-space: nowrap; }
.api-access-page .table-wrap td:nth-child(1) { width: 100%; }
.quickrule .field > span { font-size: 11.5px; }

@media (max-width: 1200px) {
  .quickrule-row-multi { grid-template-columns: 1fr 1fr; }
}




.mads { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: 100%; }


.mads-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mads-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 11px; border-radius: 999px; white-space: nowrap;
  background: var(--card); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--text); cursor: pointer; line-height: 1;
}
.mads-chip:active { transform: scale(.97); }
.mads-chip.brand { background: var(--brand-soft); border-color: transparent; color: var(--brand); font-weight: 600; }
.mads-chip.locked { border-style: dashed; color: var(--text-dim); cursor: default; }
.mads-chip .mads-caret { font-size: 9px; opacity: .65; }

.mads-hint { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-dim); flex-wrap: wrap; }
.mads-hint .spacer { flex: 1 1 auto; }
.mads-hint .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; }
.mads-iconbtn {
  width: 28px; height: 28px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--line); color: var(--text-dim); cursor: pointer; font-size: 13px;
}


.mads-filterbar {
  display: none; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px;
  background: var(--brand-soft); color: var(--brand); font-size: 11.5px;
}
.mads-filterbar.on { display: flex; }
.mads-filterbar .txt { flex: 1 1 auto; line-height: 1.5; }
.mads-filterbar .x {
  width: 22px; height: 22px; border-radius: 7px; flex: 0 0 auto; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand)26; font-size: 12px;
}


.mads-list { border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; min-width: 0; max-width: 100%; }
.mads-hscroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; max-width: 100%; }
.mads-hscroll::-webkit-scrollbar { height: 5px; }
.mads-hscroll::-webkit-scrollbar-thumb { background: #b9c3d0; border-radius: 3px; }
.mads-hrow { display: flex; align-items: stretch; width: max-content; min-width: 100%; border-bottom: 1px solid var(--line-soft); }
.mads-hrow:last-child { border-bottom: 0; }
.mads-hrow.tapable { cursor: pointer; }
.mads-hrow.tapable:active { background: var(--bg-soft); }

.mads-freeze {
  position: sticky; left: 0; z-index: 2; flex: 0 0 172px; width: 172px;
  display: flex; align-items: center; gap: 8px; padding: 9px 10px;
  background: var(--card); border-right: 1px solid var(--line);
}
.mads-hhead .mads-freeze { background: var(--bg-soft); z-index: 3; }
.mads-hhead .mads-cell { background: var(--bg-soft); color: var(--text-dim); padding-top: 9px; padding-bottom: 9px; }
.mads-hhead .mads-cell b { font-size: 11px; font-weight: 600; }
.mads-hhead .mads-cell i { display: none; }

.mads-nm { min-width: 0; flex: 1 1 auto; }
.mads-n { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mads-i { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mads-tail { display: flex; align-items: center; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
.mads-rule {
  font-size: 10px; padding: 1px 6px; border-radius: 6px; cursor: pointer; white-space: nowrap;
  background: var(--brand-soft); color: var(--brand); border: 1px solid transparent;
}
.mads-rule.off { background: var(--bg-soft); color: var(--text-faint); border-color: var(--line); }

.mads-metrics { display: flex; flex: 0 0 auto; }
.mads-cell {
  flex: 0 0 96px; width: 96px; padding: 9px 8px; border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column; justify-content: center; gap: 1px; background: var(--card);
}
.mads-cell:last-child { border-right: 0; }
.mads-cell b { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.mads-cell i { font-style: normal; font-size: 10px; color: var(--text-faint); }
.mads-cell.wide { flex-basis: 132px; width: 132px; }
.mads-cell.num b { text-align: left; }

.mads-empty { padding: 26px 14px; text-align: center; color: var(--text-dim); font-size: 13px; }


.mads-total {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  padding: 9px 12px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--line);
  font-size: 11px; color: var(--text-dim);
}
.mads-total b { color: var(--text); font-variant-numeric: tabular-nums; }
.mads-pager { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-dim); padding-bottom: 4px; }
.mads-pager .spacer { flex: 1 1 auto; }
.mads-pager select {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 4px 6px; font-size: 11.5px; flex: 0 0 auto; width: auto; max-width: 104px;
}
.mads-pager button {
  width: 30px; height: 28px; border-radius: 8px; background: var(--card); border: 1px solid var(--line);
  color: var(--text); font-size: 13px; cursor: pointer; line-height: 1;
}
.mads-pager button:disabled { opacity: .35; cursor: default; }


.mads-sheetwrap { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; }
.mads-scrim { position: absolute; inset: 0; background: #06101c8c; opacity: 0; transition: opacity .2s; }
.mads-sheetwrap.show .mads-scrim { opacity: 1; }
.mads-sheet {
  position: relative; width: 100%; max-height: 88vh; overflow-y: auto;
  background: var(--card); border-radius: 20px 20px 0 0; border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px var(--text)33; padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(12px); opacity: .5; transition: transform .2s, opacity .2s;
  -webkit-overflow-scrolling: touch;
}
.mads-sheetwrap.show .mads-sheet { transform: translateY(0); opacity: 1; }
.mads-grab { width: 40px; height: 4px; border-radius: 3px; background: var(--line); margin: 0 auto 12px; }
.mads-sheet h3 { font-size: 14px; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mads-sheet h3 .sub { margin-left: auto; font-size: 11.5px; font-weight: 400; color: var(--text-dim); }
.mads-sec { display: block; font-size: 11.5px; color: var(--text-dim); margin: 16px 0 8px; }
.mads-sheet .mads-sec:first-child { margin-top: 0; }

.mads-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px; border-radius: 12px; background: var(--bg-soft); margin-bottom: 8px;
  font-size: 13.5px; cursor: pointer;
}
.mads-opt.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.mads-opt .sub { color: var(--text-dim); font-size: 11.5px; font-weight: 400; }
.mads-opt.danger { color: var(--danger); }

.mads-field { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; background: var(--bg-soft); font-size: 13px; }
.mads-field input { border: 0; background: transparent; color: var(--text); font-size: 13px; width: 100%; outline: none; font-family: inherit; }
.mads-rowline { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 8px; font-size: 11.5px; color: var(--text-dim); }
.mads-rowline b { color: var(--brand); }
.mads-rowline .link { color: var(--brand); cursor: pointer; }
.mads-picklist { max-height: 236px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mads-pick { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; background: var(--bg-soft); margin-bottom: 8px; font-size: 13.5px; cursor: pointer; }
.mads-pick em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mads-pick small { color: var(--text-faint); font-size: 11.5px; margin-left: auto; flex: 0 0 auto; }
.mads-box {
  width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line); background: var(--card);
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 12px; color: transparent;
}
.mads-pick.on .mads-box { background: var(--brand); border-color: transparent; color: #fff; }
.mads-chipset { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 8px; }
.mads-actions { display: flex; gap: 8px; margin-top: 14px; }
.mads-actions .btn { flex: 1 1 auto; }
.mads-note { display: flex; gap: 6px; font-size: 11.5px; color: var(--text-dim); line-height: 1.55; padding: 2px 2px 8px; }


.mads-calhead { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 10px; }
.mads-calhead b { font-size: 13.5px; }
.mads-calweek { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: 10.5px; color: var(--text-dim); text-align: center; margin-bottom: 6px; }
.mads-calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mads-calday {
  height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft); font-size: 12.5px; cursor: pointer; font-variant-numeric: tabular-nums;
}
.mads-calday.empty { background: transparent; cursor: default; }
.mads-calday.off { opacity: .3; cursor: default; }
.mads-calday.in { background: var(--brand-soft); color: var(--brand); }
.mads-calday.edge { background: var(--brand); color: #fff; font-weight: 600; }


@media (max-width: 900px) {
  body.mads-active .topbar-right #account-filter,
  body.mads-active .topbar-right #range-filter-slot,
  body.mads-active .topbar-right #timezone-slot { display: none; }

  body.mads-active .topbar-right #autorefresh-toggle { display: none; }

  body.mads-active .topbar-right #mode-toggle { display: none; }

  body.mads-active .topbar {

    display: none;
  }
  body.mads-active .topbar-left { display: none; }
  body.mads-active .topbar-right {
    display: flex; width: 100%; margin: 0; padding: 0;
  }
  body.mads-active .topbar-right > * { display: none; }
  body.mads-active .topbar-right > #range-filter-slot { display: inline-flex; }

  body.mads-active .topbar { padding: 10px 12px 6px; }
  body.mads-active .topbar-left h2 { font-size: 16px; }

  body.mads-active #view { padding: 10px 12px calc(var(--mnav-h) + 20px + var(--sab)); }

  body.mads-active .modal-host { padding: 0; place-items: end stretch; }
  body.mads-active .modal,
  body.mads-active .modal.wide {
    width: 100%; max-height: 94dvh; border-radius: 18px 18px 0 0;
    padding: 14px 14px calc(16px + env(safe-area-inset-bottom));
  }
}
.mads-active .main { padding-bottom: 10px; }

@media (max-width: 480px) {
  .mads-freeze { flex-basis: 150px; width: 150px; }
  .mads-cell { flex-basis: 90px; width: 90px; }
}


body.mads-dark {

  --bg: #0a1020;
  --bg-soft: #141d33;
  --card: #111a2e;
  --card-solid: #111a2e;
  --surface-2: #16203a;
  --line: #24304c;
  --line-soft: #1b2540;
  --hairline: rgba(255, 255, 255, .12);
  --text: #e9eef8;
  --text-dim: #9daac4;
  --text-faint: #74829c;
  --brand: #4b8ff0;
  --brand-600: #2f6fd6;
  --brand-400: #6fa8f7;
  --brand-soft: #14294d;
  --accent: #e8b04b;
  --ok: #46c08d;
  --danger: #ff7a7f;
  --warn: #e8b04b;
  --shadow: 0 10px 30px #00000066;
  background: var(--bg);
  color: var(--text);
}
body.mads-dark .topbar { background: #101a2c; box-shadow: 0 1px 0 var(--line-soft); }
body.mads-dark .topbar h2, body.mads-dark .topbar-left h2 { color: var(--text); }
body.mads-dark .mobile-nav { background: var(--rail)f2; border-top-color: var(--line); }
body.mads-dark .mobile-nav a.active { color: var(--brand); }

body.mads-dark .btn { background: #1b2437; border-color: var(--line); color: var(--text); }
body.mads-dark .btn-primary { background: var(--brand); border-color: transparent; color: #fff; }
body.mads-dark .btn-ghost { background: transparent; color: var(--text-dim); }
body.mads-dark .btn-danger { background: #3a1b1b; border-color: #ff7a7a55; color: var(--brand-400); }
body.mads-dark .btn-warn { background: #33280d; border-color: #fbbf2455; color: #fbbf24; }

body.mads-dark .badge { background: #ffffff12; color: var(--text-dim); }
body.mads-dark .badge.ok { background: #12301f; color: #4ade80; }
body.mads-dark .badge.info { background: #12233f; color: #8fb6f5; }
body.mads-dark .badge.warn { background: #33280d; color: #fbbf24; }
body.mads-dark .badge.danger { background: #3a1b1b; color: var(--brand-400); }
body.mads-dark .badge.shadow, body.mads-dark .badge.gray { background: #ffffff0d; color: var(--text-faint); }

body.mads-dark .toast { background: #1b2437; color: var(--text); box-shadow: 0 6px 20px #00000066; }
body.mads-dark .modal-host { background: #04070ecc; }
body.mads-dark .modal { background: #141b2b; border-color: var(--line); }

body.mads-dark input,
body.mads-dark select,
body.mads-dark textarea { background: #1b2437; color: var(--text); border-color: var(--line); }
body.mads-dark .input { background: #1b2437; border-color: var(--line); color: var(--text); }

body.mads-dark .table-wrap { background: transparent; }
body.mads-dark table th, body.mads-dark table td { background: transparent; color: var(--text); border-color: var(--line-soft); }
body.mads-dark thead th { background: #182234; color: var(--text-dim); }
body.mads-dark tbody tr:hover td { background: #ffffff08; }
body.mads-dark tfoot td { background: #182234; color: var(--text); }

body.mads-dark .drop,
body.mads-dark .colfilter-pop { background: #182234; border-color: var(--line); }
body.mads-dark .colfilter-row:hover { background: #ffffff10; }


body.mads-dark .daterange-pop,
body.mads-dark .tz-pop { background: #182234; border-color: var(--line); }
body.mads-dark .daterange-preset:hover,
body.mads-dark .daterange-day:hover,
body.mads-dark .tz-item:hover { background: #ffffff12; }
body.mads-dark .daterange-nav-btn {
  background: #1b2437; border-color: var(--line); color: var(--text-dim);
}
body.mads-dark .daterange-nav-btn:hover { background: var(--brand-soft); color: var(--brand); }
body.mads-dark .daterange-tz,
body.mads-dark .tz-search { background: #1b2437; border-color: var(--line); color: var(--text); }
body.mads-dark .daterange-day.today { box-shadow: inset 0 0 0 1px var(--line); }
body.mads-dark .chart-tip { background: #1b2437; color: var(--text); border-color: var(--line); }
body.mads-dark .notice { background: #12233f; border-color: var(--line); border-left-color: var(--brand); }
body.mads-dark .notice.warn { background: #33280d; }
body.mads-dark .notice.danger { background: #3a1b1b; }
body.mads-dark .notice.ok { background: #12301f; }
body.mads-dark .empty { color: var(--text-dim); }
body.mads-dark .skeleton { background: #1b2437; }
body.mads-dark .switch span { background: #39445c; }
body.mads-dark .switch input:checked + span { background: var(--brand); }
body.mads-dark .rule-state.off { color: var(--text-faint); }
body.mads-dark .quickrule { background: #182234 !important; }
body.mads-dark .cell-id, body.mads-dark .muted { color: var(--text-dim); }


body.mads-dark .table-wrap table:not(.js-frozen):not(.plain) td:nth-child(-n+3),
body.mads-dark .table-wrap table.js-frozen td.freeze-col {
  background: var(--card-solid);
}
body.mads-dark .table-wrap table:not(.js-frozen):not(.plain) thead th:nth-child(-n+3),
body.mads-dark .table-wrap table.js-frozen thead th.freeze-col,
body.mads-dark .table-wrap table.js-frozen tfoot td.freeze-col,
body.mads-dark .table-wrap th,
body.mads-dark .table-wrap tfoot td {
  background: #182234;
}
body.mads-dark .table-wrap table:not(.js-frozen):not(.plain) tbody tr:hover td:nth-child(-n+3),
body.mads-dark .table-wrap table.js-frozen tbody tr:hover td.freeze-col {
  background: var(--brand-soft);
}


.mads-head { display: flex; align-items: center; gap: 8px; padding: 2px 0 8px; }
.mads-head h1 { margin: 0; font-size: 19px; font-weight: 600; flex: 1 1 auto; min-width: 0; letter-spacing: .2px; }
.mads-head .tools { display: flex; gap: 6px; flex: 0 0 auto; }

.mads-daterange { flex: 0 0 auto; display: inline-flex; align-items: center; }
.mads-daterange .daterange-btn { height: 32px; padding: 0 9px; font-size: 12px; border-radius: 10px; }
.mads-daterange .daterange-icon { display: none; }
.mads-head h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mads-iconbtn {
  width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--line); color: var(--text-dim); cursor: pointer;
}
.mads-iconbtn svg { width: 18px; height: 18px; }
.mads-iconbtn:active { transform: scale(.94); }
.mads-iconbtn.quit { color: var(--danger); }

.mads-iconbtn.mads-burger { display: none; }
@media (max-width: 900px) {
  .mads-iconbtn.mads-burger { display: inline-flex; }
}


@media (max-width: 900px) {
  body.mads-active .modal { width: 100%; max-width: 100vw; overflow-x: hidden; }

  body.mads-active .modal > * { min-width: 0; }
  body.mads-active .modal .table-wrap { max-width: 100%; overflow-x: auto; }
  body.mads-active .modal .table-wrap table { min-width: 0; }
  body.mads-active .modal .kv { grid-template-columns: 92px 1fr; gap: 6px 10px; font-size: 12.5px; }
  body.mads-active .modal .kv dd { word-break: break-all; overflow-wrap: anywhere; }

  body.mads-active .modal .grid,
  body.mads-active .modal .grid-2,
  body.mads-active .modal .grid-kpi { grid-template-columns: 1fr !important; gap: 10px !important; }
  body.mads-active .modal .row { flex-wrap: wrap; }
  body.mads-active .modal select,
  body.mads-active .modal input,
  body.mads-active .modal textarea { max-width: 100%; }
  body.mads-active .modal .field { min-width: 0; }
  body.mads-active .modal .field > span { font-size: 11.5px; }

  body.mads-active .modal .quickrule-row-multi,
  body.mads-active .modal .quickrule-row-multi.gate { grid-template-columns: 1fr 1fr; }
  body.mads-active .modal .quickrule-row-multi > * { min-width: 0; }
  body.mads-active .modal .quickrule-conn,
  body.mads-active .modal .quickrule-conn-slot { width: 100%; }
  body.mads-active .modal .quickrule-step { flex: 0 0 auto; }
  body.mads-active .modal .chart { height: 170px; }
  body.mads-active .modal .chart-host { min-height: 170px; }
  body.mads-active .modal .card { padding: 10px; }
  body.mads-active .modal .empty { padding: 16px 8px; font-size: 12.5px; }

  body.mads-active .modal .muted.tiny { display: block; width: 100%; }
}

.mads-sheet { overflow-x: hidden; }
.mads-pick em { min-width: 0; }
.mads-pick small { min-width: 0; max-width: 46%; overflow: hidden; text-overflow: ellipsis; }


@media (max-width: 900px) {
  .mads-head { padding: 8px 0 12px; }

  body.mads-active .mads-head {
    position: sticky;
    top: 0;
    z-index: 30;
    margin: 0 -12px;
    padding: 8px 12px 10px;
    background: var(--card-solid);
    border-bottom: 1px solid var(--line-soft);
  }
}



.xc-bubble { display: none; }


.xm-fab { display: none; }

@media (max-width: 900px) {
  .xm-fab {
    position: fixed; right: 16px;

    bottom: calc(76px + env(safe-area-inset-bottom));
    z-index: 45;
    display: flex; align-items: center; gap: 7px;
    padding: 6px 13px 6px 6px; border: none; border-radius: 999px;
    background: var(--card-solid); color: var(--text);
    box-shadow: 0 8px 22px rgba(16, 24, 40, .22), 0 2px 6px rgba(0, 0, 0, .12);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }

  .xm-fab[hidden] { display: none; }

  .xm-fab.stacked { bottom: calc(150px + env(safe-area-inset-bottom)); }
  .xm-fab:active { transform: scale(.95); }
  .xm-fab-face {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(140deg, var(--brand), #1550b0); color: #fff;
    font-size: 14px; font-weight: 700; line-height: 1;
  }
  .xm-fab-text { font-size: 13px; font-weight: 600; }
}


.watch-table { overflow-x: auto; border-radius: 10px; }
.watch-table table { width: max-content; min-width: 100%; }
.watch-table td.items { max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.watch-table td.extra {
  white-space: normal; min-width: 240px; max-width: 420px;
  color: var(--text-dim); line-height: 1.6;
}


.xc-mail { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; }
.xc-mail-thread {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: grid; gap: 10px; align-content: start; padding-right: 4px;
}
.xc-mail-reply { flex: 0 0 auto; }

@media (max-width: 900px) {
  body.xc-full .modal .xc-mail { flex: 1 1 auto; min-height: 0; }

  body.xc-full .modal .xc-mail-reply textarea { max-height: 34vh; }
}

@media (max-width: 900px) {
  .xc-bubble {
    position: fixed;
    right: 16px;

    bottom: calc(76px + env(safe-area-inset-bottom));
    width: 60px; height: 60px; padding: 0; border: none; border-radius: 50%;
    background: var(--brand); cursor: pointer; z-index: 40;
    box-shadow: 0 8px 22px rgba(31, 122, 95, .4), 0 2px 6px #00000026;
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  .xc-bubble:active { transform: scale(0.94); }
  .xc-bubble img { width: 100%; height: 100%; border-radius: 50%; display: block; }
  .xc-bubble-badge {
    position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px;
    padding: 0 5px; border-radius: 10px; background: var(--brand); color: #fff;
    font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center;
    border: 2px solid #fff;
  }
  body.mads-dark .xc-bubble-badge { border-color: var(--rail); }


  body.xc-full .modal-host { padding: 0; place-items: stretch; }
  body.xc-full .modal {
    width: 100%; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    border-radius: 0; overflow: hidden;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; gap: 10px;
  }
  body.xc-full .modal .xc-chat {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px;
  }

  body.xc-full .modal .xc-grip { display: none !important; }
  body.xc-full .modal .xc-stage {
    flex: 1 1 auto; min-height: 0; height: auto !important; max-height: none;
  }
  body.xc-full .modal textarea { resize: none; min-height: 52px; }

  body.xc-full .modal .xc-preview-inner {
    display: flex; flex-direction: column; gap: 8px; height: 100%;
  }
  body.xc-full .modal .xc-msgs {
    flex: 1 1 auto; min-height: 64px; max-height: none !important;
    background: var(--bg); border: 1px solid var(--line-soft);
    border-radius: 10px; padding: 8px;
  }
  body.xc-full .modal .xc-live {
    flex: 0 1 auto; max-height: 55vh !important; margin-top: 0;
  }


  .xc-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .xc-card-top .who { font-weight: 650; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .xc-card-line {
    font-size: 13px; color: #3b4453; margin-top: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .xc-card-line.two {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    white-space: normal;
  }
  .xc-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: #6b7280; }
  .xc-card-foot .ord { margin-left: auto; }
  .xc-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: 0 0 auto; }
  body.mads-dark .xc-card-line { color: #8b95a8; }
  body.mads-dark .xc-card-foot { color: #8b95a8; }


  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { white-space: nowrap; flex: 0 0 auto; }


  body.topbar-inline .topbar {
    flex-wrap: nowrap; align-items: center; gap: 4px;
    padding: 6px 12px 10px;
  }
  body.topbar-inline .topbar-left { flex: 0 0 auto; min-width: 0; }
  body.topbar-inline .topbar-right {
    flex: 1 1 auto; min-width: 0; width: auto; margin-left: auto; flex-wrap: nowrap;
    justify-content: flex-end;
  }

  body.topbar-inline .topbar-right #refresh-btn {
    width: var(--ctl-h); height: var(--ctl-h); padding: 0; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px; line-height: 1;
  }

  body.topbar-inline .topbar-titles h2 { font-size: 16px; }
  body.topbar-inline .topbar-right { gap: 4px; }
  body.topbar-inline .topbar-left { gap: 4px; }
  body.topbar-inline .topbar-right #store-filter-slot { flex: 0 0 auto; }
  body.topbar-inline .topbar-right #store-filter-slot select { flex: 0 0 auto; max-width: 84px; }
  body.topbar-inline .topbar-right select,
  body.topbar-inline .topbar-right .input {
    flex: 0 1 auto; min-width: 0; max-width: 40vw; padding-left: 8px; padding-right: 6px;
  }
  body.topbar-inline .topbar-right #store-filter-slot,
  body.topbar-inline .topbar-right #range-filter-slot { flex: 0 1 auto; min-width: 0; }
  body.topbar-inline .topbar-right .daterange-btn {
    padding: 0 6px; max-width: 40vw; overflow: hidden; font-size: 11.5px;
  }
  body.topbar-inline .topbar-right .daterange-icon { display: none; }
}



.view.view-chat { padding: 0; display: block; }


.agent-page {
  display: flex; flex-direction: column;
  height: calc(100dvh - 68px);
  min-height: 380px;
}

.agent-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: 4px 2px 10px;
}
.agent-row { display: flex; gap: 9px; align-items: flex-start; }
.agent-row.me { flex-direction: row-reverse; }
.agent-av {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 600;
  background: var(--bg-soft); color: var(--text-dim);
}
.agent-av.bot { background: linear-gradient(140deg, var(--brand), #1550b0); color: #fff; }
.agent-stack { max-width: 720px; display: grid; gap: 8px; }

.agent-row.wide .agent-stack { width: min(920px, 100%); max-width: 100%; }
.agent-bub {
  padding: 9px 12px; border-radius: var(--radius); font-size: 14px; line-height: 1.7;
  background: var(--bg-soft); color: var(--text); white-space: pre-wrap; word-break: break-word;
}

.agent-row:not(.me) .agent-bub {
  background: var(--card-solid);
  border: 1px solid var(--line);
  padding: 12px 14px;
}
.agent-row.me .agent-bub { background: var(--brand-soft); }
.agent-stamp { font-size: 11px; color: var(--text-faint); }
.agent-row.me .agent-stamp { text-align: right; }

.agent-model {
  font-size: 11px; color: var(--text-faint); opacity: 0.85; letter-spacing: 0.2px;
}

.agent-analysis { margin-top: 8px; }
.agent-analysis > summary {
  cursor: pointer; font-size: 12px; color: var(--text-faint);
  list-style: none; display: inline-flex; align-items: center; gap: 5px;
}
.agent-analysis > summary::-webkit-details-marker { display: none; }
.agent-analysis > summary::before { content: "▸"; font-size: 10px; }
.agent-analysis[open] > summary::before { content: "▾"; }
.agent-analysis > summary:hover { color: var(--text); }
.agent-analysis-body {
  margin-top: 6px; padding-left: 10px;
  border-left: 2px solid var(--line);
  font-size: 13px; line-height: 1.7; color: var(--text-dim);
}
.agent-cursor::after {
  content: "▍"; color: var(--brand); animation: agent-blink 1s steps(2, start) infinite;
}
@keyframes agent-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .agent-cursor::after { animation: none; } }


.agent-status {
  display: inline-flex; align-items: center; gap: 8px; align-self: start;
  font-size: 12.5px; color: var(--text-dim);
  background: var(--bg-soft); border: 1px solid var(--line-soft);
  padding: 6px 12px; border-radius: 999px;
}
.agent-status .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex: 0 0 auto;
  animation: agent-pulse 1.1s ease-in-out infinite;
}
@keyframes agent-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .agent-status .dot { animation: none; } }


.agent-card {
  background: var(--card-solid); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; max-width: 720px;
}

.agent-row.wide .agent-card { max-width: 100%; }
.agent-card-h {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 13px; border-bottom: 1px solid var(--line-soft); background: var(--bg-soft);
}
.agent-card-h strong { font-size: 13.5px; }

.agent-card-h-actions {
  margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

.agent-window-bar {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap;
}
.agent-card-b { padding: 12px 13px; display: grid; gap: 10px; min-width: 0; }

.agent-card-b > * { min-width: 0; }



.table-responsive { overflow-x: auto; overflow-y: hidden; max-width: 100%; -webkit-overflow-scrolling: touch; }
.agent-card .table-responsive table { width: max-content; min-width: 100%; }
.agent-card .table-responsive th:first-child,
.agent-card .table-responsive td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--card-solid);
}
.agent-card .table-responsive thead th:first-child,
.agent-card .table-responsive tbody tr:hover td:first-child { background: var(--bg-soft); }

.table-responsive::-webkit-scrollbar { height: 10px; }
.table-responsive::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 6px;
}
.table-responsive::-webkit-scrollbar-track { background: transparent; }

.agent-card .text-end { text-align: right; }
.agent-card .text-nowrap { white-space: nowrap; }
.agent-card .table-sm th,
.agent-card .table-sm td { padding: 7px 9px; }
.agent-card-f {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 11px 13px; border-top: 1px solid var(--line-soft); background: var(--bg-soft);
}
.agent-kv { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 7px 12px; margin: 0; font-size: 13px; }
.agent-kv dt { color: var(--text-dim); }
.agent-kv dd { margin: 0; }
.agent-num { font-variant-numeric: tabular-nums; }
.agent-big { font-size: 16.5px; font-weight: 600; }
.agent-warn {
  font-size: 12.5px; line-height: 1.65; color: var(--warn);
  border-left: 2px solid var(--warn); padding-left: 10px;
}
.agent-note { font-size: 12px; color: var(--text-faint); line-height: 1.6; }
.agent-why {
  font-size: 12.5px; line-height: 1.65; color: var(--text-dim);
  border-left: 2px solid var(--line); padding-left: 10px;
}


.agent-compose {
  display: grid; gap: 10px;
  padding: 10px 0 6px;
  border-top: 1px solid var(--line-soft);
  background: var(--bg);
}
.agent-quick { display: flex; gap: 7px; flex-wrap: wrap; }

.agent-compose-top {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.agent-compose-top > .agent-quick { flex: 1 1 auto; min-width: 0; }
.agent-compose-top > .agent-modes { flex: 0 0 auto; }
.agent-chip {
  font: inherit; font-size: 12.5px; padding: 6px 11px; border-radius: 999px; cursor: pointer;
  background: var(--card-solid); border: 1px solid var(--line); color: var(--text-dim);
}
.agent-chip:hover { border-color: var(--brand); color: var(--brand); }


.agent-empty { padding: 10px 2px 4px; display: grid; gap: 10px; }
.agent-empty h2 { margin: 0; font-size: 22px; letter-spacing: .2px; color: var(--text); }
.agent-empty p { margin: 0; font-size: 12px; color: var(--text-faint); }
.agent-empty-list { display: grid; gap: 8px; margin-top: 2px; }
.agent-empty-card {
  display: flex; align-items: center; gap: 9px; text-align: left;
  padding: 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); font-size: 13px; cursor: pointer;
}
.agent-empty-card i {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center; font-style: normal; font-size: 13px;
}
.agent-empty-card b { font-weight: 600; }
.agent-empty-card span { margin-left: auto; color: var(--text-faint); }
.agent-empty-card:hover { border-color: var(--brand); }
.agent-disclaimer {
  font-size: 11px; color: var(--text-faint); padding: 4px 2px 5px;
  position: sticky; top: 0; z-index: 6; background: var(--bg);
}
.agent-follow { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px 0 6px; }
.agent-table-more {
  display: block; width: 100%; margin-top: 6px; padding: 8px 0;
  font-size: 12px; color: var(--text-dim); background: transparent;
  border: 1px dashed var(--line); border-radius: 8px; cursor: pointer;
}
.agent-table-more:hover { border-color: var(--brand); color: var(--brand); }

.agent-card tr.hot td { background: var(--brand-soft); }
.agent-card tr.hot td:first-child { box-shadow: inset 3px 0 0 var(--brand); font-weight: 600; }
.hot-tag {
  margin-left: 6px; padding: 1px 6px; border-radius: 5px;
  font-size: 9.5px; color: #fff; background: var(--brand); vertical-align: 1px;
}
.agent-card-acts { display: flex; gap: 7px; flex-wrap: wrap; padding-top: 8px; }
.agent-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.agent-kpis > div {
  background: var(--bg-soft); border: 1px solid var(--line-soft);
  border-radius: 9px; padding: 6px 4px; text-align: center;
}
.agent-kpis small { display: block; font-size: 9.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-kpis b { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text); }

.agent-box {
  display: grid; gap: 8px;
  background: var(--card-solid); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px 10px;
}
.agent-box:focus-within { border-color: var(--brand); }
.agent-box-foot { display: flex; align-items: center; gap: 8px; }
.agent-box-left { display: flex; gap: 6px; }
.agent-box-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.agent-hint { font-size: 11.5px; color: var(--text-faint); }

.agent-grip {
  width: 30px; height: 34px; flex: 0 0 auto;
  border: none; background: transparent; color: var(--text-faint);
  cursor: ns-resize; font-size: 15px; line-height: 1; border-radius: 6px;
  touch-action: none; padding: 0;
}
.agent-grip:hover { background: var(--bg-soft); color: var(--text); }
.agent-icon {
  width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; cursor: pointer;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: transparent;
  color: var(--text-dim); font-size: 15px; line-height: 1;
}
.agent-icon:hover { border-color: var(--brand); color: var(--brand); }
.agent-icon[disabled] { opacity: .45; cursor: not-allowed; }

.agent-icon[data-on="1"] {
  border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent);
}

.agent-say {
  display: flex; align-items: flex-start; gap: 7px; max-width: 720px;
  padding: 6px 9px; border-radius: var(--radius-sm);
  background: var(--bg-soft); border: 1px dashed var(--line);
  font-size: 13px; line-height: 1.6; color: var(--text-dim);
}
.agent-say-btn {
  flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center;
  cursor: pointer; border-radius: 50%; border: 1px solid var(--line);
  background: transparent; color: var(--text-dim); font-size: 12px; line-height: 1; padding: 0;
}
.agent-say-btn:hover { border-color: var(--brand); color: var(--brand); }
.agent-say-text { word-break: break-word; }

.agent-audio-pick { display: none; }


.agent-modes {
  display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--line);
}
.agent-mode-btn {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: 11.5px; line-height: 1.6; padding: 3px 10px; border-radius: 999px;
  color: var(--text-dim); white-space: nowrap;
}
.agent-mode-btn[data-on="1"] {
  background: var(--card-solid); color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.agent-voice-pill {
  font-size: 11.5px; line-height: 1.6; padding: 3px 9px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--text-dim);
  white-space: nowrap;
}
.agent-voice-pill[data-state="listening"] { color: var(--brand); border-color: var(--brand); }
.agent-voice-pill[data-state="speaking"] { color: var(--ok); border-color: var(--ok); }
.agent-voice-pill[data-state="check"] { color: var(--warn); border-color: var(--warn); }
.agent-voice-pill[hidden] { display: none; }
.voice-body { display: grid; gap: 10px; }
.voice-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.voice-sep {
  display: flex; align-items: center; gap: 10px;
  margin-top: 4px; font-size: 11.5px; color: var(--text-faint);
}
.voice-sep::before, .voice-sep::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--line-soft);
}

.agent-instance-line { font-size: 13px; color: var(--text-dim); }
.agent-instance-line strong { color: var(--text); }

.agent-instance-chip {
  font-size: 11px; line-height: 1.6; padding: 2px 8px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--text-dim);
  white-space: nowrap;
}

.perm-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
}
.perm-name { font-size: 13px; }

.agent-perm-banner {
  font-size: 11.5px; line-height: 1.6; padding: 2px 9px; border-radius: 999px;
  background: var(--brand-soft); border: 1px solid var(--brand); color: var(--brand);
  cursor: pointer; white-space: nowrap;
}
.agent-perm-banner[hidden] { display: none; }

.cd-pill {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; line-height: 1.7; white-space: nowrap; border: 1px solid transparent;
}
.cd-pill.none { color: var(--text-faint); border-color: var(--line-soft); }
.cd-pill.ready { color: var(--text-dim); background: var(--bg-soft); border-color: var(--line); }
.cd-pill.counting { color: var(--warn); border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.cd-pill.armed { color: var(--danger); border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.cd-pill.fired { color: var(--ok); border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }

.agent-input {
  border: none; outline: none; font: inherit; font-size: 15px;
  background: transparent; color: var(--text); padding: 2px;

  display: block; resize: vertical; line-height: 1.7; width: 100%;
  min-height: 116px; max-height: 70vh; overflow-y: auto;
}
.agent-input::placeholder { color: var(--text-faint); }
.agent-send { height: 36px; padding: 0 22px; border-radius: 9px; font-size: 14px; }
.agent-gate { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-faint); }
.agent-gate .on { color: var(--ok); }
.agent-gate .off { color: var(--warn); }

@media (max-width: 900px) {

  .agent-page { height: calc(100dvh - 63px - var(--sat) - var(--sab) - var(--mnav-h)); }
  .agent-stack, .agent-card { max-width: none; }


  body.chat-page .topbar-right { display: none; }
  body.chat-page .topbar { padding-bottom: 4px; }
  body.chat-page .agent-page { height: calc(100dvh - 59px - var(--sat) - var(--sab) - var(--mnav-h)); }

  .agent-compose-top { flex-wrap: wrap; }
  .agent-compose-top > .agent-quick { flex: 1 1 100%; }


  .agent-log { gap: 14px; }
  .agent-row { gap: 8px; }
  .agent-row:not(.me) .agent-bub {
    background: transparent; border: 0; padding: 0; border-radius: 0;
  }
  .agent-row.me .agent-bub {
    background: var(--bg-soft); border: 1px solid var(--line-soft);
    border-radius: 20px; padding: 9px 14px; max-width: 84%;
  }

  .agent-row.me .agent-av { display: none; }
  .agent-av { width: 26px; height: 26px; font-size: 11px; }
  .agent-stamp { font-size: 10px; }


  .agent-card { border-radius: 16px; box-shadow: 0 1px 3px rgba(16, 24, 40, .07); }
  .agent-card-h { padding: 10px 12px; }
  .agent-card-b { padding: 10px 12px; }


  .agent-compose { padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .agent-quick { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .agent-chip { flex: 0 0 auto; }
  .agent-box {
    border-radius: 22px; padding: 9px 11px;
    box-shadow: 0 2px 12px rgba(16, 24, 40, .10);
  }

  .agent-input { min-height: 44px; max-height: 34vh; font-size: 16px; }
  .agent-hint { display: none; }
  .agent-send { height: 34px; padding: 0 16px; border-radius: 17px; }
  .agent-gate { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .agent-gate > * { flex: 0 0 auto; }
}


.agent-prev { background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.agent-prev-h { font-size: 12.5px; color: var(--text-dim); margin-bottom: 6px; }
.agent-prev-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.agent-prev-k { color: var(--text-dim); font-size: 13px; }
.agent-prev-b { color: var(--text-dim); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.agent-prev-arrow { color: var(--text-dim); }
.agent-prev-a { font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.agent-prev-d { font-size: 12.5px; font-weight: 600; color: var(--brand); }
.agent-prev-un { font-size: 12.5px; color: var(--text-dim); margin-top: 6px; }
.agent-guards { display: flex; flex-wrap: wrap; gap: 6px; }
.agent-guard-pill { display: inline-flex; gap: 4px; background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: 999px; padding: 2px 9px; font-size: 12px; color: var(--text-dim); }
.agent-guard-v { color: var(--text); font-weight: 600; }




:root {
  --radius: 12px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px -14px rgba(16, 24, 40, .18);
}


.card {
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.card-head {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 12px;
}
.card-head h3 { letter-spacing: .2px; }


.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card-solid);
}
.table-wrap table { font-size: 13px; }
.table-wrap th {
  background: var(--surface-2);
  color: var(--text-dim);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .2px;
  border-bottom: 1px solid var(--line);
}
.table-wrap td { border-bottom: 1px solid var(--line-soft); }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.table-wrap tbody tr:hover { background: #fafbfc; }

.table-wrap td, .kpi .value, .metric, .num { font-variant-numeric: tabular-nums; }
.table-wrap tbody tr:hover td { background: transparent; }
.table-wrap tbody tr { transition: background .12s ease; }


.badge { border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 600; }
.badge.ok     { background: #eaf7f0; color: #0f9d58; }
.badge.info   { background: #e6eefc; color: #1550b0; }
.badge.warn   { background: #fff7e6; color: #b26a00; }
.badge.danger { background: #fdeceb; color: #d93025; }
.badge.shadow { background: var(--bg-soft); color: var(--text-dim); }
.badge.gray   { background: var(--bg-soft); color: var(--text-dim); }


.btn {
  border-radius: var(--radius-sm);
  font-weight: 550;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent);
  outline-offset: 1px;
}
input, select, textarea { border-radius: var(--radius-sm); }
input:focus, select:focus, textarea:focus { border-color: var(--brand); }


.kpi .value { font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.kpi .label { color: var(--text-dim); }


body.mads-dark {
  --radius: 12px;
  --radius-sm: 9px;
}
body.mads-dark .card { border-color: var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); }
body.mads-dark .table-wrap { border-color: var(--line); background: var(--card-solid); }
body.mads-dark .table-wrap th { background: #171b21; color: var(--text-dim); }
body.mads-dark .table-wrap td { border-bottom-color: var(--line-soft); }
body.mads-dark .table-wrap tbody tr:hover { background: #171b21; }
body.mads-dark .badge.ok     { background: #0f2419; color: #3ecf8e; }
body.mads-dark .badge.info   { background: #101c2e; color: #6aa8ff; }
body.mads-dark .badge.warn   { background: #241d0f; color: #f2b83c; }
body.mads-dark .badge.danger { background: #2a1414; color: #ff6b6b; }
body.mads-dark .badge.shadow,
body.mads-dark .badge.gray   { background: #1c2127; color: var(--text-dim); }
body.mads-dark input, body.mads-dark select, body.mads-dark textarea {
  background: #171b21; border-color: var(--line); color: var(--text);
}




.table-wrap { scrollbar-width: thin; }
.table-wrap th, .table-wrap td { padding: 8px 10px; }

.table-wrap thead th {
  position: sticky; top: 0; z-index: 4;
  background: var(--card-solid);
  box-shadow: inset 0 -1px 0 var(--line);
}
.table-wrap table.js-frozen thead th.freeze-col { z-index: 5; background: var(--card-solid); }
.table-wrap::-webkit-scrollbar { height: 9px; }
.table-wrap::-webkit-scrollbar-track { background: var(--bg-soft); border-radius: 99px; }
.table-wrap::-webkit-scrollbar-thumb { background: #c9ced6; border-radius: 99px; }
.table-wrap::-webkit-scrollbar-thumb:hover { background: #b3bac4; }
body.mads-dark .table-wrap::-webkit-scrollbar-thumb { background: #39404a; }
body.mads-dark .table-wrap::-webkit-scrollbar-track { background: #171b21; }

.table-wrap table.js-frozen th.freeze-col,
.table-wrap table.js-frozen td.freeze-col { box-shadow: 1px 0 0 var(--line); }


.table-wrap td.num, .table-wrap td[data-num="1"] { text-align: left; font-variant-numeric: tabular-nums; }


.mobile-nav {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #ffffff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 18px -12px rgba(16, 24, 40, .35);
}
.mobile-nav a { min-height: 54px; font-size: 11px; gap: 2px; }
.mobile-nav a.active { color: var(--brand); font-weight: 700; }
body.mads-dark .mobile-nav {
  background: #101a2c;
  border-top-color: var(--line);
  box-shadow: 0 -6px 18px -12px rgba(0, 0, 0, .7);
}
body.mads-dark .mobile-nav a.active { color: var(--brand); }


@media (max-width: 900px) {
  .view { padding: 14px 12px calc(78px + env(safe-area-inset-bottom, 0px)); gap: 14px; }
  .card { padding: 13px; }
  .kpi .value { font-size: 20px; }
  .btn { padding: 9px 13px; }
  .table-wrap th, .table-wrap td { padding: 9px 10px; }
  .mads-hrow { min-height: 56px; }
  .mads-hrow.tapable:active { background: var(--brand-soft); }
  .mads-hscroll { scrollbar-width: thin; }
}


@media (hover: none) {
  .nav a:hover { background: transparent; }
  .table-wrap tbody tr:hover { background: transparent; }
  .table-wrap tbody tr:active { background: var(--bg-soft); }
}


.mcard-list { display: grid; gap: 10px; }
.mcard {
  background: var(--card-solid); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 11px; display: grid; gap: 8px;
}
.mcard-l1 { display: flex; align-items: center; gap: 7px; min-width: 0; }
.mcard-nm { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard-amt { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }
.mcard-quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mcard-quad > div {
  background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: 9px;
  padding: 6px 4px; text-align: center;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.mcard-quad small { display: block; color: var(--text-dim); font-size: 10.5px; min-height: 27px; }
.mcard-quad b { font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: auto; padding-top: 2px; }

.mcard-quad.mcard-quad2 { margin-top: -1px; }
.mcard-quad2 small { font-size: 10px; line-height: 1.28; }
.mcard-quad2 b { font-size: 13px; }
.mcard-more {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  color: var(--brand); font-weight: 700; font-size: 13px;
  border-top: 1px dashed var(--line); padding-top: 7px; cursor: pointer;
}
.mcard-more span { color: var(--text-dim); font-weight: 400; font-size: 11.5px; }
.mcard-acts { display: flex; gap: 8px; }
.mcard-rule { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.mcard-rule small { color: var(--text-dim); font-size: 11px; }
.mcard-rule .mads-rule { font-size: 11px; padding: 2px 7px; }

.mcard-rule .rule-btn { width: 26px; height: 26px; font-size: 13px; border-radius: 8px; }
.mcard-rule .rule-state { font-size: 11.5px; cursor: pointer; }


.msheet-back { position: fixed; inset: 0; background: rgba(20, 22, 26, .38); z-index: 90; display: flex; align-items: flex-end; }
.msheet {
  width: 100%; max-height: 88%; background: var(--card-solid);
  border-top-left-radius: 20px; border-top-right-radius: 20px; border-top: 1px solid var(--line);
  box-shadow: 0 -14px 40px -18px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column; animation: msheet-in .16s ease-out;
}
@keyframes msheet-in { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }
.msheet-grab { width: 38px; height: 4px; border-radius: 99px; background: var(--line); margin: 8px auto 2px; }
.msheet-head { display: flex; align-items: center; gap: 8px; padding: 4px 14px 10px; }
.msheet-head b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msheet-body { overflow-y: auto; padding: 0 14px 10px; display: grid; gap: 12px; }
.msheet-grp > small { display: block; color: var(--text-dim); font-size: 11.5px; margin-bottom: 6px; }
.msheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.msheet-cell { background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: 9px; padding: 7px 8px; min-width: 0; }
.msheet-cell small { display: block; color: var(--text-dim); font-size: 10.5px; }
.msheet-cell b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.msheet-note { font-size: 10px; color: var(--text-faint); margin-top: 2px; }
.msheet-foot { border-top: 1px solid var(--line); padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.mads-dark .msheet-cell { background: #171b21; border-color: var(--line-soft); }


.agent-prev { border-left: 2px solid var(--brand); }
.agent-prev-a { font-size: 17px; }
.agent-guard-pill { font-size: 12.5px; padding: 3px 10px; }
.agent-card-f { gap: 9px; }

@media (max-width: 900px) {

  .agent-kv { grid-template-columns: 68px minmax(0, 1fr); gap: 6px 10px; font-size: 13.5px; }
  .agent-kv dd { overflow-wrap: anywhere; }
  .agent-card-b { padding: 12px; gap: 11px; }
  .agent-prev { padding: 11px 12px; }

  .agent-card-f { display: flex; gap: 8px; }
  .agent-card-f .btn { flex: 1 1 0; padding: 11px 10px; font-size: 14px; }
  .agent-card-f .agent-note { flex-basis: 100%; }

  .agent-input { min-height: 44px; }

  .agent-composer, .agent-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}
body.mads-dark .agent-prev { background: #171b21; border-color: var(--line-soft); }




.kv dt, .kv dd { padding: 6px 0; }
.kv dt { font-size: 12.5px; }
.kv dd { overflow-wrap: anywhere; }
.kv dt, .kv dd { border-top: 1px solid var(--line-soft); }
.kv dt:first-of-type, .kv dd:first-of-type { border-top: 0; }
.mono { font-family: ui-monospace, Consolas, "SF Mono", monospace; font-size: 12.5px; letter-spacing: .2px; }


.field { display: grid; gap: 5px; }
.field > span:first-child { font-size: 12.5px; color: var(--text-dim); }
.field .muted.tiny { font-size: 11.5px; line-height: 1.45; }


@media (max-width: 900px) {
  .modal { max-height: 92vh; }
  .modal > .modal-body, .modal .modal-body { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

  .entity-editor { grid-template-columns: 1fr !important; gap: 10px !important; }

  .entity-actions {
    position: sticky; bottom: 0; margin: 6px -12px -12px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--card-solid); border-top: 1px solid var(--line-soft);
  }
  .entity-actions .btn { flex: 1 1 auto; }
}


.card.quickrule { display: grid; gap: 12px; }
.quickrule-block { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.quickrule-block:first-of-type { padding-top: 0; border-top: 0; }
.quickrule-block-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.quickrule-block-head strong { font-size: 13.5px; }
.quickrule-block-head .muted.tiny { flex-basis: 100%; color: var(--text-dim); font-size: 11.5px; }
.quickrule-step {
  display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 700; flex: none;
}
.quickrule-row-inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.quickrule-row-inline select.input { min-width: 200px; }
@media (max-width: 900px) {
  .quickrule-row-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .quickrule-row-inline select.input { grid-column: 1 / -1; min-width: 0; width: 100%; }
  .quickrule-row-inline .btn { width: 100%; padding: 10px; }
  .quickrule-block .btn-sm { padding: 9px 12px; }
}


.nav a[href="#/agent"]:not(.active) { color: var(--brand); font-weight: 600; }
.nav a[href="#/agent"] {
  margin-top: 8px; padding-top: 11px; border-top: 1px solid #ffffff1a;
}


body:not(.mads-dark) .sidebar {
  background: #ffffff;
  border-right: 1px solid var(--line);
  backdrop-filter: none;
}
body:not(.mads-dark) .sidebar, body:not(.mads-dark) .brand b { color: var(--text); }

body:not(.mads-dark) .brand strong { color: var(--text); }
body:not(.mads-dark) .nav a { color: var(--text-dim); }
body:not(.mads-dark) .nav a:hover { background: var(--bg-soft); color: var(--text); }
body:not(.mads-dark) .nav a.active { background: var(--brand); color: #fff; font-weight: 600; }
body:not(.mads-dark) .nav a.active .badge { background: #ffffff2e; color: #fff; }
body:not(.mads-dark) .sidebar .muted, body:not(.mads-dark) .sidebar .sync-state { color: var(--text-faint); }
body:not(.mads-dark) .brand-mark { background: var(--brand); box-shadow: 0 4px 14px rgba(232, 69, 44, .26); }

body:not(.mads-dark) .sidebar-foot .btn,
body:not(.mads-dark) .sidebar .btn { background: var(--card-solid); border-color: var(--line); color: var(--text); }
body:not(.mads-dark) .log-out, body:not(.mads-dark) .sidebar .btn-danger { background: var(--brand); border-color: var(--brand); color: #fff; }


.quickrule-row-inline { flex-wrap: wrap; }
.quickrule-row-inline select.input { flex: 1 1 240px; min-width: 0; }
.quickrule-row-inline .btn { flex: 0 0 auto; }




.switch { position: relative; transition: background .18s ease, border-color .18s ease; }
.switch span::after { transition: transform .18s cubic-bezier(.4, 0, .2, 1), width .18s cubic-bezier(.4, 0, .2, 1); }
.switch:active span::after { width: 19px; }


.btn-primary { transition: transform .08s ease, filter .15s ease, box-shadow .15s ease; }
.btn-primary:active { transform: translateY(1px) scale(.995); filter: brightness(.96); }
.btn-primary:hover { box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--brand) 70%, transparent); }


.skeleton {
  background: linear-gradient(90deg, var(--bg-soft) 25%, #ffffff80 37%, var(--bg-soft) 63%);
  background-size: 400% 100%; animation: sk 1.3s ease infinite; border-radius: 6px;
  color: transparent !important; min-height: 12px; display: inline-block; min-width: 42px;
}
body.mads-dark .skeleton { background: linear-gradient(90deg, #171b21 25%, #26303c 37%, #171b21 63%); background-size: 400% 100%; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }


.ui-spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--brand) 28%, transparent);
  border-top-color: var(--brand); display: inline-block; vertical-align: -2px;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


.pulse-dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.pulse-dot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--brand); opacity: .55; animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(.7); opacity: .6; } 100% { transform: scale(1.5); opacity: 0; } }


.tip { position: relative; }
.tip[data-tip]::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  background: #1b1e23f2; color: #fff; font-size: 12px; line-height: 1.45; padding: 5px 9px; border-radius: 7px;
  white-space: pre-line; max-width: 260px; opacity: 0; pointer-events: none; transition: opacity .14s ease; z-index: 80;
}
.tip:hover::after, .tip:focus-visible::after { opacity: 1; }


.badge, .mcard, .agent-card, .msheet { animation: fadein .16s ease-out; }
@keyframes fadein { from { opacity: .55; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .skeleton, .ui-spinner, .pulse-dot::after, .badge, .mcard, .agent-card, .msheet { animation: none; }
}



@media (max-width: 900px) {

  body { -webkit-tap-highlight-color: transparent; }
  .btn:hover { border-color: var(--line); }
  .btn-primary:hover { filter: none; }
  .btn:active { transform: translateY(1px); }


  .mobile-nav {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    padding: 4px 2px calc(4px + var(--sab));
    padding-left: calc(2px + var(--sal));
    padding-right: calc(2px + var(--sar));
    background: #fffffff5; backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 18px -14px rgba(16, 24, 40, .45);
  }
  .mobile-nav a {
    display: grid; place-items: center; gap: 1px;
    min-height: 50px; padding: 5px 0 4px;
    position: relative; border-radius: 12px;
    color: var(--text-faint); font-size: 11px; line-height: 1.15;
    transition: color .15s, background .15s;
  }
  .mobile-nav a .mtab-ic { font-size: 17px; line-height: 1; }
  .mobile-nav a.active { color: var(--brand); font-weight: 700; }

  .mobile-nav a.active::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 22px; height: 2.5px; border-radius: 0 0 3px 3px; background: var(--brand);
  }
  .mobile-nav a:active { background: var(--bg-soft); }

  .mobile-nav .mtab-dot {
    position: absolute; top: 3px; left: calc(50% + 6px);
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    background: var(--danger); color: #fff; font-size: 9.5px; font-weight: 700;
    display: grid; place-items: center; line-height: 1;
  }
  body.mads-dark .mobile-nav { background: #101a2cf5; }
  body.mads-dark .mobile-nav a:active { background: #ffffff0f; }


  .view { padding: 14px 12px calc(var(--mnav-h) + 20px + var(--sab)); }
  .toast-host { bottom: calc(var(--mnav-h) + 18px + var(--sab)); }


  .topbar { padding-top: calc(12px + var(--sat)); }


  input, select, textarea { font-size: 16px; }
  .tz-input { font-size: 15px; }


  @keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .view.page-in { animation: page-in .2s ease-out; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .view.page-in { animation: none; }
}



@media (max-width: 900px) {

  .agent-page { height: calc(100dvh - 51px - var(--sat) - var(--sab) - var(--mnav-h)); }

  .agent-compose { padding: 6px 10px calc(8px + var(--sab)); gap: 8px; }

  .agent-compose-top { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 2px; scrollbar-width: none; }
  .agent-compose-top::-webkit-scrollbar { display: none; }

  .agent-instance-chip { display: none; }


  .agent-box { border-radius: 20px; padding: 8px 8px 6px 12px; }
  .agent-input { min-height: 44px; max-height: 30vh; }
  .agent-box-foot { gap: 6px; }
  .agent-box-left { gap: 4px; }
  .agent-box-right { gap: 8px; }
  .agent-icon { width: 32px; height: 32px; font-size: 15px; }
  .agent-more { border-color: var(--line); background: var(--bg-soft); }

  .agent-grip, .agent-image { display: none; }

  .agent-voice-pill { flex: 1 1 100%; order: 9; margin-top: 4px; }

  .agent-modes { padding: 2px; }
  .agent-mode-btn { padding: 4px 9px; font-size: 12px; border-radius: 13px; }
  .agent-send { height: 34px; padding: 0 16px; border-radius: 17px; }


  .agent-gate { display: none; }

  .agent-compose.has-perm-banner .agent-gate {
    display: flex; flex-wrap: nowrap; overflow-x: auto; padding: 0 2px;
  }


  .agent-sheet-host { position: fixed; inset: 0; z-index: 70; }
  .agent-sheet-mask { position: absolute; inset: 0; background: var(--rail)66; }
  .agent-sheet {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--card-solid); color: var(--text);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 34px -12px rgba(16, 24, 40, .45);
    padding: 12px 14px calc(14px + var(--sab));
    max-height: 80dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    animation: sheet-up .2s ease-out;
  }
  @keyframes sheet-up { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }
  .agent-sheet::before {
    content: ""; display: block; width: 36px; height: 4px; border-radius: 99px;
    background: var(--line); margin: 0 auto 10px;
  }
  .agent-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 10px; }
  .agent-sheet-head strong { font-size: 15px; }
  .agent-sheet-x {
    width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--line); background: transparent; color: var(--text-dim);
    font: inherit; font-size: 13px;
  }

  .agent-sheet-gate {
    display: grid; gap: 8px; padding: 11px 12px; margin-bottom: 10px;
    background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: 12px;
    font-size: 12.5px; color: var(--text-dim);
  }
  .agent-sheet-gate > span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .agent-sheet-gate .btn { padding: 7px 12px; font-size: 12.5px; }
  .agent-sheet-row {
    display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
    padding: 13px 6px; border: 0; border-top: 1px solid var(--line-soft);
    background: transparent; color: var(--text); font: inherit; font-size: 14.5px; cursor: pointer;
  }
  .agent-sheet-row:active { background: var(--bg-soft); border-radius: 10px; }
  .agent-sheet-ic { width: 22px; text-align: center; font-size: 16px; flex: none; }
  .agent-sheet-tip { margin: 12px 2px 0; font-size: 11.5px; line-height: 1.6; color: var(--text-faint); }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .agent-sheet { animation: none; }
}



@media (max-width: 900px) {
  :root {
    --radius: 14px;
    --radius-sm: 10px;

    --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
    --hairline: rgba(60, 60, 67, .14);
    --card-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 24px -16px rgba(16, 24, 40, .22);
  }
  body.mads-dark {
    --hairline: rgba(255, 255, 255, .13);
    --card-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  }
  body { font-size: 15px; }


  .card, .mcard, .agent-card, .notice, .kpi {
    border-radius: 16px;
    border-color: var(--hairline);
  }
  .card, .mcard, .notice {
    box-shadow: var(--card-shadow);
  }
  .card { padding: 15px; }
  .card-head h3 { font-size: 15px; }
  .small { font-size: 13px; }
  .tiny { font-size: 12px; }
  .notice { padding: 12px 13px; font-size: 13.5px; }


  .topbar { padding: calc(10px + var(--sat)) 12px 10px; row-gap: 6px; }
  .topbar-right {
    flex-wrap: nowrap; overflow-x: auto; gap: 6px;
    margin: 0 -12px; padding: 0 12px 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .topbar-right::-webkit-scrollbar { display: none; }

  .topbar-right > *, .topbar-right .input, .topbar-right .btn, .topbar-right select,
  .topbar-right .daterange { flex: 0 0 auto; }
  .topbar-right .input, .topbar-right select { min-width: 0; max-width: 48vw; }
  .daterange-btn { padding: 7px 10px; }
  .daterange-btn .daterange-label { font-size: 13px; }

  .topbar-right #timezone-slot { display: none; }


  .mads-chips {
    flex-wrap: wrap; overflow: visible; gap: 6px; row-gap: 6px;
    margin: 0; padding: 0 0 2px;
  }
  .mads-chips > * { flex: 0 0 auto; }

  .mads-hint {
    flex-wrap: wrap; overflow: visible; gap: 6px; row-gap: 4px;
    margin: 0 -12px; padding: 0 12px 2px;
  }
  .mads-hint > * { flex: 0 1 auto; }
  .mads-hint .spacer { display: none; }
  .mads-head { padding: 2px 0 6px; }
  .mads-head h1 { font-size: 18px; }


  .btn { border-radius: 12px; transition: transform .06s var(--ease-ios), background .15s; }
  .btn-sm { border-radius: 10px; }
  .btn:active { transform: scale(.97); }
  .btn-primary { box-shadow: 0 6px 16px -8px rgba(255, 77, 91, .75); }


  .mobile-nav {
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--hairline);
    box-shadow: none;
  }
  body.mads-dark .mobile-nav {
    background: rgba(16, 24, 40, .82);
  }
  .mobile-nav a { font-size: 10.5px; }
  .mobile-nav a .mtab-ic { font-size: 19px; }


  .nav a, .drawer-panel a, .mads-hrow { min-height: 44px; }

  .mcard:active, .card:active, .msheet:active { transform: scale(.995); }


  .drawer-panel, .agent-sheet { transition: transform .28s var(--ease-ios); }


  html, body { overscroll-behavior: contain; }
}


.pull-ind {
  position: fixed; left: 50%; z-index: 65;
  top: calc(var(--sat) + 58px);
  display: flex; align-items: center; gap: 8px;
  padding: 7px 13px 7px 10px; border-radius: 999px;
  background: var(--card-solid); border: 1px solid var(--line);
  box-shadow: 0 8px 22px -10px rgba(16, 24, 40, .45);
  font-size: 12.5px; color: var(--text-dim); white-space: nowrap;
  --pull-p: 0; --pull-y: 0px;
  transform: translate(-50%, var(--pull-y));
  transition: transform .12s linear, opacity .15s;
}
.pull-ind[hidden] { display: none; }

.pull-ring {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--brand) calc(var(--pull-p) * 360deg), var(--line) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent 62%, #000 64%);
  mask: radial-gradient(farthest-side, transparent 62%, #000 64%);
}
.pull-ind.ready .pull-ring { background: conic-gradient(var(--brand) 360deg, var(--line) 0); }
.pull-ind.busy .pull-ring {
  background: conic-gradient(#0000 0 25%, var(--brand) 25% 100%);
  animation: pull-spin .7s linear infinite;
}
@keyframes pull-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pull-ind.busy .pull-ring { animation: none; } }


.todo-card { display: grid; gap: 0; }
.todo-card .card-head { padding-bottom: 6px; }
.todo-total {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 700;
  display: grid; place-items: center;
}
.todo-done { color: var(--ok); font-size: 15px; font-weight: 700; }
.todo-list { display: grid; }
.todo-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 4px; border-top: 1px solid var(--line-soft);
  cursor: pointer; border-radius: 8px;
  transition: background .12s cubic-bezier(.32, .72, 0, 1);
}
.todo-row:first-child { border-top: 0; }
.todo-row:not(.zero):hover { background: var(--bg-soft); }
.todo-row:not(.zero):active { background: var(--brand-soft); }
.todo-row.zero { cursor: default; }
.todo-ic { width: 22px; text-align: center; font-size: 15px; flex: none; }
.todo-txt { display: grid; gap: 1px; min-width: 0; }
.todo-txt b { font-size: 14px; font-weight: 600; }
.todo-txt small { font-size: 11.5px; color: var(--text-faint); }
.todo-row.zero .todo-txt b { color: var(--text-faint); font-weight: 500; }
.todo-n {
  margin-left: auto; font-size: 16px; font-weight: 700; color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.todo-n.gray { color: var(--text-faint); font-weight: 500; font-size: 14px; }
.todo-go { color: var(--text-faint); font-size: 17px; flex: none; }


.mcard-hour { gap: 9px; }

.hourcard { display: grid; gap: 10px; }
.hourcard.wide { padding: 16px 18px; }
.hour-head { display: flex; align-items: baseline; gap: 10px; }
.hour-head strong { font-size: 15px; letter-spacing: .2px; }
.hour-total {
  margin-left: auto; font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hour-days { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hour-days::-webkit-scrollbar { display: none; }
.hour-day {
  flex: 0 0 auto; padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--line); font-size: 12px; color: var(--text-dim); cursor: pointer;
}
.hour-day.on { background: var(--brand-soft); border-color: transparent; color: var(--brand); font-weight: 600; }
.hour-cur { font-size: 11.5px; color: var(--text-faint); margin-left: 4px; }
.hourbars { margin-top: 2px; }
.hb-row { display: flex; align-items: flex-end; gap: 2px; height: 104px; }
.hb-col { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; min-width: 0; }

.hb-col { position: relative; }
.hb-tip {
  position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--card-solid);
  font-size: 11px; font-weight: 600; line-height: 1.3; padding: 3px 7px;
  border-radius: 7px; white-space: nowrap; z-index: 2; pointer-events: none;
  box-shadow: 0 6px 16px -8px rgba(17, 28, 45, .55);
}
.hb-bar {
  flex: 1; height: 100%; padding: 0; border: 0; background: transparent;
  display: flex; align-items: flex-end; cursor: pointer; border-radius: 4px;
}
.hb-bar i {
  display: block; width: 100%; min-height: 3px;
  border-radius: 4px 4px 3px 3px;
  background: linear-gradient(180deg, #4e8fef, var(--brand));
}
.hb-bar.zero i { height: 3px !important; background: var(--line); }

.hb-bar.peak i { background: linear-gradient(180deg, #f0c165, #d9a441); }
.hb-bar.on i { box-shadow: 0 0 0 2px var(--card-solid), 0 0 0 3.5px var(--brand); }
.hb-bar:active i { filter: brightness(.92); }
.hb-ticks { position: relative; height: 15px; margin-top: 5px; }
.hb-ticks span {
  position: absolute; transform: translateX(-50%);
  font-size: 10px; color: var(--text-faint); white-space: nowrap;
}

.hb-ticks span:last-child { transform: none; left: auto !important; right: 0; }
.hour-foot { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-dim); }
.hour-foot b { color: var(--text); font-variant-numeric: tabular-nums; }
.hour-tag {
  padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: var(--brand-soft); color: var(--brand);
}



@media (min-width: 901px) {
  :root {
    --radius: 12px;
    --radius-sm: 10px;
    --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
    --hairline: rgba(60, 60, 67, .14);
    --card-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 28px -20px rgba(16, 24, 40, .28);
  }
  body.mads-dark {
    --hairline: rgba(255, 255, 255, .12);
    --card-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  }


  body:not(.mads-dark) .sidebar {
    background: rgba(246, 247, 249, .72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-right: 1px solid var(--hairline);
  }
  body.mads-dark .sidebar {
    background: rgba(14, 20, 33, .72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-right: 1px solid var(--hairline);
  }
  .nav a {
    border-radius: 8px; font-size: 13.5px; padding: 8px 10px;
    transition: background .12s var(--ease-ios), color .12s var(--ease-ios);
  }
  body:not(.mads-dark) .nav a:hover { background: rgba(120, 120, 128, .1); }
  body:not(.mads-dark) .nav a.active { background: var(--brand); color: #fff; box-shadow: 0 4px 12px -6px rgba(255, 77, 91, .7); }


  .topbar {
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--hairline);
    box-shadow: none;

    padding: 10px 20px;
    gap: 10px;
  }
  .topbar-right { gap: 6px; }
  .topbar-titles h2 { font-size: 16px; }
  body.mads-dark .topbar {
    background: rgba(16, 26, 44, .78);
    border-bottom: 1px solid var(--hairline);
    box-shadow: none;
  }


  .card {
    border-radius: 14px;
    border: 1px solid var(--hairline);
    box-shadow: var(--card-shadow);
  }
  .card-head h3 { font-size: 15px; letter-spacing: .2px; }
  .card-head { padding-bottom: 10px; }


  .table-wrap { border-radius: 12px; }
  .table-wrap th {
    background: rgba(120, 120, 128, .06);
    font-size: 12px; font-weight: 600; color: var(--text-dim);
    border-bottom: 1px solid var(--hairline);
    padding: 9px 10px;
  }
  body.mads-dark .table-wrap th { background: rgba(255, 255, 255, .05); }
  .table-wrap td { border-bottom: 1px solid rgba(60, 60, 67, .09); padding: 9px 10px; }
  body.mads-dark .table-wrap td { border-bottom-color: rgba(255, 255, 255, .07); }
  .table-wrap tbody tr:last-child td { border-bottom: 0; }
  .table-wrap tbody tr { transition: background .1s var(--ease-ios); }
  .table-wrap tbody tr:hover { background: rgba(120, 120, 128, .07); }
  body.mads-dark .table-wrap tbody tr:hover { background: rgba(255, 255, 255, .05); }


  .btn { border-radius: 10px; transition: background .12s var(--ease-ios), transform .06s var(--ease-ios); }
  .btn:hover { border-color: var(--hairline); background: rgba(120, 120, 128, .1); }
  .btn:active { transform: scale(.98); }
  .btn-sm { border-radius: 9px; }
  body:not(.mads-dark) .btn-primary { box-shadow: 0 6px 16px -10px rgba(255, 77, 91, .8); }
  body:not(.mads-dark) .btn-primary:hover { background: var(--brand); filter: brightness(1.06); }
  input, select, textarea { border-radius: 10px; }
  input:focus, select:focus, textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3.5px rgba(255, 77, 91, .18);
  }
  body.mads-dark input:focus, body.mads-dark select:focus, body.mads-dark textarea:focus {
    box-shadow: 0 0 0 3.5px rgba(255, 77, 91, .28);
  }
  .badge { border-radius: 7px; font-weight: 600; }


  .tabs { gap: 4px; border-bottom: 1px solid var(--hairline); }
  .tabs button { border-radius: 8px 8px 0 0; }


  .modal-host {
    background: rgba(20, 22, 26, .32);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
  .modal {
    border-radius: 18px;
    border: 1px solid var(--hairline);
    box-shadow: 0 24px 70px -22px rgba(16, 24, 40, .5), 0 2px 8px rgba(16, 24, 40, .08);
  }


  .daterange-pop, .tz-pop, .colfilter-pop {
    border-radius: 14px;
    border: 1px solid var(--hairline);
    box-shadow: 0 20px 50px -22px rgba(16, 24, 40, .45), 0 2px 6px rgba(16, 24, 40, .06);
  }


  .toast {
    border-radius: 999px;
    box-shadow: 0 14px 34px -16px rgba(16, 24, 40, .5);
  }


  * { scrollbar-width: thin; scrollbar-color: rgba(120, 120, 128, .45) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb {
    background: rgba(120, 120, 128, .4); border-radius: 999px;
    border: 3px solid transparent; background-clip: content-box;
  }
  ::-webkit-scrollbar-thumb:hover { background: rgba(120, 120, 128, .6); background-clip: content-box; }
  ::-webkit-scrollbar-track { background: transparent; }
}

:root { --ctl-h: 37px; }
@media (max-width: 900px) { :root { --ctl-h: 38px; } }


.btn, .btn-sm, .btn-icon, .nav-burger,
.input, select, .tz-btn, .daterange-btn,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]):not([type="range"]) {
  height: var(--ctl-h);
}

.btn, .btn-sm, .btn-icon, .nav-burger {
  padding-top: 0; padding-bottom: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.input, select, .tz-btn, .daterange-btn { padding-top: 0; padding-bottom: 0; }

textarea, textarea.input, select[multiple] {
  height: auto; min-height: var(--ctl-h); padding-top: 9px; padding-bottom: 9px;
}


@media (max-width: 900px) {
  .hide-narrow { display: none; }
}


.agent-chip, .agent-mode-btn, .agent-icon, .agent-grip { height: var(--ctl-h); }
.agent-icon { width: var(--ctl-h); }
.agent-grip { width: 30px; }

.agent-modes { padding: 0; }


@media (max-width: 900px) {
  .card-head .row, .card-head .actions { min-width: 0; }
  .tabs { min-width: 0; }
}



.mobile-nav { max-width: 100vw; }
.mobile-nav a, .mobile-nav a > * { min-width: 0; }
.mobile-nav .mtab-lb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.memory-src { font-size: 11.5px; color: var(--text-faint); font-weight: 400; }

@media (max-width: 720px) {
  .agent-compose .agent-box {
    display: flex; align-items: flex-end; gap: 4px;
    border: 0 !important; border-radius: 26px !important;
    background: var(--bg-soft) !important; box-shadow: none !important;
    padding: 4px 4px 4px 14px !important; min-height: 42px;
  }
  .agent-compose .agent-box .agent-input {
    flex: 1 1 auto; min-width: 0; border: 0 !important; background: transparent !important;
    box-shadow: none !important; padding: 8px 2px !important;
    height: 22px !important; min-height: 22px !important; max-height: 104px;
    resize: none; font-size: 15px; line-height: 22px; overflow-y: auto;
  }
  .agent-compose .agent-box-foot {
    position: static !important; display: flex; align-items: center;
    gap: 2px; flex: 0 0 auto; border: 0 !important; padding: 0 !important;
    margin: 0 !important; background: transparent !important;
  }
  .agent-compose .agent-box-left { display: flex; align-items: center; gap: 0; }
  .agent-compose .agent-box-left button {
    width: 34px; height: 34px; padding: 0 !important; margin: 0 !important;
    background: transparent !important; border: 0 !important; border-radius: 50% !important;
    box-shadow: none !important; color: var(--text-dim); font-size: 17px;
  }
  .agent-compose .agent-box-right { display: flex; align-items: center; }
  .agent-compose .agent-box-right .agent-hint,
  .agent-compose .agent-box-right .grip { display: none !important; }
  .agent-compose .agent-box-right .agent-send {
    width: 34px; height: 34px; min-width: 34px; border-radius: 50%;
    padding: 0 !important; display: grid; place-items: center;
    font-size: 0 !important; line-height: 0;
    border: 0 !important; box-shadow: none !important;
  }
  .agent-compose .agent-box-right .agent-send::after {
    content: "↑"; font-size: 18px; font-weight: 700; line-height: 1;
  }
}

@media (max-width: 720px) {
  .modal.sheet {
    position: fixed; inset: 0; width: 100%; max-width: 100%;
    height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0;
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--bg);
  }
  .modal.sheet > .card-head {
    position: sticky; top: 0; z-index: 20; margin: 0 !important;
    padding: 12px 14px 10px; background: var(--card-solid);
    border-bottom: 1px solid var(--line-soft);
  }
  .modal.sheet > .card-head h3 { font-size: 16px; margin: 0; }
  .modal.sheet > .grid {
    flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 12px; display: block !important;
  }
  .modal.sheet .quickrule {
    border: 0; background: transparent; box-shadow: none;
    padding: 0; display: grid; gap: 10px;
  }
  .modal.sheet .quickrule > .card-head { display: none; }
  .modal.sheet .quickrule-block {
    background: var(--card-solid); border: 1px solid var(--line-soft);
    border-radius: 14px; padding: 12px; margin: 0 !important;
  }
  .modal.sheet .quickrule-block-head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .modal.sheet .quickrule-block-head strong { font-size: 13.5px; }

  .modal.sheet .quickrule-block-head .muted.tiny { display: none; }
  .modal.sheet .quickrule-step {
    width: 22px; height: 22px; border-radius: 50%; flex: none;
    background: var(--brand); color: #fff; font-size: 12px; font-weight: 700;
    display: grid; place-items: center;
  }
  .modal.sheet .quickrule-row-multi { display: grid; grid-template-columns: 1fr; gap: 6px; }
  .modal.sheet .quickrule-row-inline { display: flex; flex-wrap: wrap; gap: 8px; }
  .modal.sheet .quickrule-row-inline > * { flex: 1 1 46%; min-width: 0; }
  .modal.sheet .quickrule-preview {
    background: #12161f; color: #cbd3e1; border-radius: 14px;
    padding: 12px; font-size: 11.5px; line-height: 1.75; margin: 0;
  }
  .modal.sheet .quickrule-save {
    position: sticky; bottom: 0; z-index: 20; margin: 0 !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--card-solid); border-top: 1px solid var(--line-soft);
  }
  .modal.sheet .quickrule-save .btn {
    width: 100%; height: 44px; font-size: 15px; border-radius: 12px;
  }
}

@media (max-width: 720px) {
  .modal.sheet .quickrule-row-inline > *, .modal.sheet select, .modal.sheet input { max-width: 100%; min-width: 0; }
  .modal.sheet .quickrule-row-inline select { flex: 1 1 100%; }
  .modal.sheet .quickrule-library .quickrule-row-inline button { flex: 1 1 46%; }

  .modal.sheet .quickrule > .muted.tiny,
  .modal.sheet .quickrule .card-head + .muted.tiny { display: none; }
  .modal.sheet .quickrule-save {
    position: sticky; bottom: 0;
    margin: 0 -12px calc(-1 * env(safe-area-inset-bottom)) !important;
  }
  .modal.sheet .quickrule-save .btn { width: 100%; }
}

@media (max-width: 720px) {
  .modal.sheet .rsheet-foot {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--card-solid);
    border-top: 1px solid var(--line-soft);
    box-shadow: 0 -8px 24px rgba(16, 24, 40, .08);
  }
  .modal.sheet .rsheet-foot .quickrule-preview {
    max-height: 74px; overflow-y: auto;
    font-size: 11px; line-height: 1.6; padding: 9px 11px; border-radius: 12px;
  }
  .modal.sheet .rsheet-foot .quickrule-save {
    position: static !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; background: transparent !important;
  }
  .modal.sheet .grid { padding-bottom: 260px !important; }
  .modal.sheet .quickrule { padding-bottom: 20px; }
  .modal.sheet .modal, .modal.sheet { overscroll-behavior: contain; }
}

@media (max-width: 720px) {
  .modal.sheet .quickrule {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
}

@media (max-width: 720px) {
  .modal.sheet .quickrule { grid-template-columns: minmax(0, 1fr) !important; }
  .modal.sheet .quickrule > * { min-width: 0 !important; max-width: 100% !important; }
  .modal.sheet .quickrule-row-multi,
  .modal.sheet .quickrule-row-multi.gate { grid-template-columns: minmax(0, 1fr) !important; }
  .modal.sheet > .grid { overflow-x: hidden; }
}

@media (max-width: 720px) {
  .modal.sheet .quickrule-row-inline {
    display: grid !important; grid-template-columns: 1fr 1fr;
    gap: 8px; align-items: center;
  }
  .modal.sheet .quickrule-row-inline > * {
    width: 100% !important; min-width: 0 !important; max-width: 100% !important; flex: none !important;
  }
  .modal.sheet .quickrule-row-inline button {
    padding-left: 6px !important; padding-right: 6px !important;
    white-space: normal; line-height: 1.25; font-size: 12.5px;
  }
  .modal.sheet .quickrule-library .quickrule-row-inline > :first-child { grid-column: 1 / -1; }
}

.custom-budget.is-hidden { display: none !important; }
@media (max-width: 720px) {
  .modal.sheet .quickrule-row-inline .field { min-width: 0 !important; }
  .modal.sheet .quickrule-row-inline select,
  .modal.sheet .quickrule-row-inline input { width: 100% !important; }
  .modal.sheet .quickrule-row-inline .custom-budget { grid-column: 1 / -1; }

  .modal.sheet .custom-budget { display: grid !important; grid-template-columns: 1fr 1fr auto; align-items: end; }
}

@media (max-width: 720px) {
  .modal.sheet .custom-budget { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
  .modal.sheet .custom-budget .field > input[type="number"] { margin-bottom: 6px; }
  .modal.sheet .custom-hint {
    grid-column: 1 / -1; margin-top: 2px; padding: 7px 9px;
    background: var(--brand-soft); color: var(--brand); border-radius: 8px;
    font-size: 11.5px; font-weight: 600;
  }
}

@media (max-width: 720px) {
  .modal.sheet .custom-budget.is-hidden { display: none !important; }
}

@media (max-width: 720px) {
  .agent-row.me .agent-stack { max-width: 84%; min-width: 0; }
  .agent-row.me .agent-bub {
    max-width: 100%; width: fit-content;
    word-break: normal; overflow-wrap: anywhere;
  }
}

@media (max-width: 720px) {
  .agent-analysis > summary {
    background: var(--bg-soft); border-radius: 8px;
    padding: 4px 9px; font-size: 11.5px; margin-top: 2px;
  }
  .agent-analysis[open] > summary { background: var(--brand-soft); color: var(--brand); }
}

.agent-status { display: none !important; }

.agent-status-row { display: none !important; }

@media (max-width: 720px) {
  .agent-card .table-responsive th:first-child,
  .agent-card .table-responsive td:first-child {
    position: static !important;
    box-shadow: none !important;
  }

  .agent-card .table-responsive td:first-child,
  .agent-card .table-responsive th:first-child {
    max-width: 46vw; white-space: normal; word-break: break-word;
  }
}

.agent-page { position: relative; }
.agent-topmore {
  position: absolute; top: 2px; right: 6px; z-index: 30;
  width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: transparent; color: var(--text-dim);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.agent-topmore:hover { background: var(--bg-soft); color: var(--text); }
.agent-menu {
  position: absolute; top: 40px; right: 8px; z-index: 31;
  min-width: 132px; padding: 5px;
  background: var(--card-solid); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 10px 28px rgba(16, 24, 40, .18);
}
.agent-menu.is-hidden { display: none !important; }
.agent-menu-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 11px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); font-size: 13.5px; cursor: pointer;
}
.agent-menu-item:hover { background: var(--bg-soft); color: var(--danger, #d43b3b); }

@media (max-width: 720px) {
  .agent-topmore {
    position: fixed !important;
    top: 62px; right: 10px;
    z-index: 45;
    background: var(--card-solid);
    box-shadow: 0 2px 10px rgba(16, 24, 40, .12);
  }
}

.agent-page-head {
  display: flex; justify-content: flex-end; align-items: center;
  padding: 2px 6px 0; height: 0; overflow: visible;
}
.agent-page-head .agent-topmore {
  position: absolute !important; top: 2px; right: 8px;
  box-shadow: none; background: transparent;
}
@media (max-width: 720px) {
  .agent-page-head .agent-topmore {
    position: fixed !important; top: 58px; right: 8px;
    background: var(--card-solid); box-shadow: 0 2px 10px rgba(16, 24, 40, .12);
  }
  .agent-log { padding-top: 26px; }
}

.brand { align-items: center; }
.brand > div { display: flex; flex-direction: column; justify-content: center; }
.brand h1 { margin: 0; line-height: 1.15; }
.brand-lg h1 { font-size: 20px; }
.brand p.muted { margin: 2px 0 0; line-height: 1.3; }

@media (max-width: 900px) {
  .modal.sheet {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(200px + env(safe-area-inset-bottom, 0px));
  }
  .modal.sheet > .grid,
  .modal.sheet .modal-body,
  .modal.sheet .modal-body > .grid,
  .modal.sheet .quickrule {
    overflow: visible !important;
    flex: 0 0 auto !important;
    max-height: none !important;
  }
}