:root {
  --bg: #f4f7fb;
  --panel: #ffffff;
  --panel-soft: #f8faff;
  --line: #e4e9f2;
  --text: #162033;
  --muted: #6f7f95;
  --nav: #0f1a2c;
  --nav-soft: #17253c;
  --primary: #536dfe;
  --primary-dark: #3d57dc;
  --primary-soft: #eef1ff;
  --success: #16a66a;
  --danger: #e45464;
  --warning: #eda421;
  --purple: #8258e7;
  --shadow: 0 10px 35px rgba(27, 42, 73, .07);
  --radius: 15px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background: var(--bg); }
button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }

.boot-view {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  place-items: center;
  align-content: center;
  gap: 18px;
  background: var(--bg);
  color: var(--text);
}
html.crm-booting { background: var(--bg); }
html.crm-booting body { background: var(--bg); }
html.crm-booting .boot-view { display: grid; }
html.crm-booting #authView,
html.crm-booting #appView { display: none !important; }
.boot-view .brand { color: var(--text); }

.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(350px, 42%) 1fr; background: linear-gradient(135deg, #edf3ff, #fff 55%, #f7f4ff); }
.auth-brand-panel { background: linear-gradient(160deg, #0d192b 0%, #13243b 72%, #172b47 100%); color: #fff; padding: 34px 44px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 18px; color: #fff; letter-spacing: 0; }
.brand-home { width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; padding: 0; transition: opacity .16s ease, transform .16s ease; }
.brand-home:hover { opacity: .92; transform: translateY(-1px); }
.brand-home:active { transform: translateY(0) scale(.99); }
.brand-large { font-size: 21px; position: relative; z-index: 2; }
.brand-mark { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: #080b14; display: grid; place-items: center; overflow: hidden; box-shadow: 0 12px 28px rgba(83, 109, 254, .35); }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: auto; }
.brand span { min-width: 0; line-height: 1.08; }
.auth-art { position: relative; flex: 1; min-height: 360px; margin: 30px 0; }
.auth-orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .45; }
.orb-one { width: 260px; height: 260px; background: radial-gradient(circle at 30% 30%, #5874ff, transparent 70%); top: 30px; left: 15%; }
.orb-two { width: 220px; height: 220px; background: radial-gradient(circle at 40% 40%, #22b987, transparent 70%); bottom: 0; right: 2%; }
.mini-chart-card { position: absolute; width: 250px; height: 150px; padding: 18px; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: rgba(255,255,255,.09); backdrop-filter: blur(14px); box-shadow: 0 24px 55px rgba(0,0,0,.25); }
.mini-chart-card span { color: #dfe8ff; font-size: 13px; font-weight: 700; }
.mini-chart-card svg { width: 100%; margin-top: 16px; }
.card-a { left: 7%; top: 20%; transform: rotate(-4deg); }
.card-b { right: 3%; bottom: 16%; transform: rotate(5deg); }
.auth-copy { position: relative; z-index: 2; max-width: 520px; }
.auth-copy h1 { margin: 0 0 10px; font-size: 34px; }
.auth-copy p { margin: 0; color: #bfcde2; line-height: 1.65; }
.auth-form-panel { display: grid; place-items: center; padding: 40px 28px; }
.auth-card { width: min(470px, 100%); background: rgba(255,255,255,.94); border: 1px solid rgba(226,232,242,.95); border-radius: 22px; padding: 32px; box-shadow: 0 26px 70px rgba(31,45,76,.13); }
.auth-card-header { text-align: center; margin-bottom: 24px; }
.auth-card-header h2 { margin: 0; font-size: 25px; }
.auth-card-header p { margin: 7px 0 0; color: var(--muted); font-size: 14px; }
.form-stack { display: grid; gap: 14px; }
.form-stack label { display: grid; gap: 7px; color: #435168; font-size: 13px; font-weight: 700; }
.form-stack input, .form-stack select, .form-stack textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; background: #fff; color: var(--text); outline: none; transition: .16s ease; }
.form-stack input:focus, .form-stack select:focus, .form-stack textarea:focus, .control:focus { border-color: #9cacff; box-shadow: 0 0 0 3px rgba(83,109,254,.12); }
.password-wrap { display: grid; grid-template-columns: 1fr auto; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.password-wrap input { border: 0; border-radius: 0; }
.password-wrap .icon-btn { border-radius: 0; }
.form-inline { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.checkbox { display: inline-flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 8px !important; font-weight: 500 !important; color: var(--muted) !important; }
.checkbox input { width: auto; }
.text-btn { border: 0; background: transparent; color: var(--primary); padding: 0; cursor: pointer; font-weight: 700; }
.auth-divider { display: flex; align-items: center; gap: 10px; color: #9aa6b7; font-size: 12px; margin: 21px 0; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.auth-switch { text-align: center; color: var(--muted); font-size: 13px; }
.demo-credentials { margin-top: 18px; color: var(--muted); font-size: 12px; line-height: 1.8; background: #f7f9fd; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.demo-credentials summary { cursor: pointer; color: #40506a; font-weight: 700; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 235px minmax(0, 1fr); }
.sidebar { height: 100vh; position: sticky; top: 0; background: linear-gradient(180deg, var(--nav), #0b1524); padding: 20px 14px 16px; display: flex; flex-direction: column; z-index: 10; }
.sidebar .brand { padding: 2px 8px 22px; }
.sidebar .brand-home { color: #fff; flex-direction: column; justify-content: center; gap: 9px; text-align: center; }
.sidebar .brand-home .brand-mark { width: 72px; height: 72px; flex-basis: 72px; border-radius: 18px; box-shadow: 0 16px 36px rgba(83, 109, 254, .32); }
.sidebar .brand span { font-size: 13px; max-width: 170px; }
.nav-list { display: grid; gap: 7px; }
.nav-item { width: 100%; border: 1px solid transparent; border-radius: 12px; padding: 12px 13px; background: transparent; color: #d3dbea; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 650; line-height: 1.15; transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; }
.nav-icon { width: 23px; height: 23px; flex: 0 0 23px; border-radius: 8px; display: grid; place-items: center; color: #93a6c4; transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; }
.nav-icon svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav-item:hover { background: rgba(255,255,255,.065); border-color: rgba(255,255,255,.08); color: #fff; }
.nav-item:hover .nav-icon { color: #c7d4ec; background: rgba(255,255,255,.07); }
.nav-item.active { color: #fff; background: linear-gradient(90deg, #526bff, #6e7cff); border-color: rgba(255,255,255,.12); box-shadow: 0 12px 26px rgba(83,109,254,.34); }
.nav-item.active .nav-icon { color: #fff; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); }
.sidebar-user { margin-top: auto; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.055); border-radius: 14px; padding: 10px; display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; color: #fff; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #f0cfb8; color: #5b3424; font-size: 12px; font-weight: 800; }
.sidebar-user-copy { min-width: 0; display: grid; }
.sidebar-user-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.sidebar-user-copy span { color: #9eaec2; font-size: 10px; margin-top: 2px; }
.icon-btn { width: 36px; height: 36px; border: 0; border-radius: 9px; background: #f3f6fb; color: #55647a; cursor: pointer; display: grid; place-items: center; transition: background .16s ease, color .16s ease, transform .16s ease; }
.icon-btn.light { background: rgba(255,255,255,.08); color: #d4dceb; width: 31px; height: 31px; }

.main-content { min-width: 0; padding: 24px 27px 40px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 20px; }
.topbar h1 { margin: 0; font-size: 28px; line-height: 1.1; }
.topbar p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.top-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.control { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 10px; padding: 9px 11px; outline: none; min-height: 39px; }
.date-sep { color: var(--muted); }
.btn { border: 0; border-radius: 10px; padding: 10px 14px; min-height: 39px; cursor: pointer; font-weight: 750; transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, opacity .16s ease, transform .16s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active,
.nav-item:active,
.tab:active,
.view-switch button:active,
.settings-nav button:active,
.compare-chip:active,
.icon-btn:active { transform: translateY(0) scale(.985); }
.btn.primary { color: #fff; background: linear-gradient(135deg, var(--primary), #6659ef); box-shadow: 0 9px 18px rgba(83,109,254,.22); }
.btn.primary:hover { background: linear-gradient(135deg, var(--primary-dark), #5647dc); }
.btn.secondary { color: #415069; background: #fff; border: 1px solid var(--line); }
.btn.danger { color: #fff; background: var(--danger); }
.btn.success { color: #fff; background: var(--success); }
.btn.ghost { color: var(--primary); background: var(--primary-soft); }
.btn.small { padding: 7px 10px; min-height: 32px; font-size: 12px; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.page { display: none; }
.page.active { display: block; }
.page.page-reveal { animation: tabFloatIn .95s cubic-bezier(.16,1,.3,1) both; }
.page.page-leaving { display: block; animation: tabFloatOut .68s cubic-bezier(.4,0,.2,1) both; pointer-events: none; }
.main-content.is-tab-transitioning .topbar { opacity: .72; transform: translateY(-3px); transition: opacity .32s ease, transform .32s ease; }
.ui-enter { animation: uiReveal .26s cubic-bezier(.2,.8,.2,1) both; will-change: opacity, transform; }
.table-card tbody tr.ui-enter { animation: rowReveal .22s cubic-bezier(.2,.8,.2,1) both; }
.main-content.is-refreshing .page.active { opacity: .62; transition: opacity .16s ease; pointer-events: none; }
.main-content.is-refreshing .topbar { opacity: .82; transition: opacity .16s ease; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  inset: 0;
  margin: auto;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: #7f8da5;
  animation: spin .75s linear infinite;
}
@keyframes pageReveal {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes tabFloatIn {
  from { opacity: 0; transform: translateY(46px) scale(.965); filter: blur(6px); }
  45% { opacity: 1; filter: blur(1px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes tabFloatOut {
  from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  to { opacity: 0; transform: translateY(-28px) scale(.975); filter: blur(5px); }
}
@keyframes uiReveal {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes rowReveal {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes backdropReveal {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .page.page-reveal,
  .page.page-leaving,
  .ui-enter,
  .table-card tbody tr.ui-enter,
  .modal-backdrop { animation: none; }
  .main-content.is-refreshing .page.active,
  .main-content.is-refreshing .topbar,
  .main-content.is-tab-transitioning .topbar,
  .btn.is-loading::after { transition: none; animation: none; }
}
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.card-pad { padding: 17px; }
.kpi-grid { display: grid; grid-template-columns: repeat(7, minmax(125px, 1fr)); gap: 11px; }
.kpi-card { padding: 15px; min-width: 0; }
.kpi-label { color: var(--muted); font-size: 12px; transition: color .2s ease; }
.kpi-value { font-size: 23px; font-weight: 850; margin-top: 8px; letter-spacing: -.4px; transition: color .2s ease, opacity .18s ease, transform .18s ease; }
.kpi-foot { margin-top: 7px; font-size: 11px; color: var(--success); transition: color .2s ease, opacity .18s ease; }
.kpi-foot.negative { color: var(--danger); }
.section-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, .85fr); gap: 15px; margin-top: 15px; }
.three-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-top: 15px; }
.spend-kpis { margin-top: 13px; }
.spend-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-top: 15px; }
.revenue-kpi-editor { margin-top: 15px; }
.revenue-kpi-history-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; color: var(--muted); font-size: 11px; font-weight: 800; }
.revenue-kpi-history-head span { color: var(--text); font-size: 12px; }
.revenue-kpi-history { max-height: 260px; margin-top: 7px; border: 1px solid var(--line); border-radius: 10px; }
.revenue-kpi-history th { position: sticky; top: 0; z-index: 2; }
.compact-form { align-items: end; }
.form-action { align-self: end; }
.two-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 13px; }
.section-head h3 { margin: 0; font-size: 15px; }
.section-head p { margin: 0; color: var(--muted); font-size: 12px; }
.legend { display: flex; gap: 16px; color: var(--muted); font-size: 11px; margin-bottom: 7px; flex-wrap: wrap; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; }
.chart-wrap { min-height: 270px; overflow: hidden; }
.chart-svg { width: 100%; height: 280px; display: block; }
.chart-empty { height: 250px; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.rank-list { display: grid; gap: 9px; }
.rank-row { display: grid; grid-template-columns: 29px 1fr auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 11px; padding: 10px; }
.rank-index { width: 27px; height: 27px; border-radius: 8px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-weight: 850; font-size: 12px; }
.rank-main b { display: block; font-size: 13px; }
.rank-main small { display: block; color: var(--muted); margin-top: 2px; }
.rank-value { color: var(--success); font-weight: 850; font-size: 13px; }
.problem-list { display: grid; gap: 8px; }
.problem-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.problem-item:last-child { border-bottom: 0; }
.metric-list { display: grid; }
.metric-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.metric-row:last-child { border-bottom: 0; }
.metric-row span { color: var(--muted); }
.donut-box { display: flex; align-items: center; gap: 18px; }
.donut { width: 118px; aspect-ratio: 1; border-radius: 50%; position: relative; flex: 0 0 auto; }
.donut::after { content: ""; position: absolute; inset: 22px; background: #fff; border-radius: 50%; }
.donut-label { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center; font-size: 13px; font-weight: 850; }
.donut-label small { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; }

.filters-bar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 13px; margin-bottom: 13px; transition: background .2s ease, border-color .2s ease, opacity .18s ease, transform .18s ease; }
.filters-bar .control { min-width: 125px; }
.filters-bar .search { min-width: 220px; flex: 1; }
.table-card { overflow: hidden; transition: opacity .2s ease, transform .2s ease, border-color .2s ease, background .2s ease; }
.table-scroll { overflow: auto; max-width: 100%; }
table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--line); padding: 12px 13px; text-align: left; font-size: 12px; white-space: nowrap; transition: background .18s ease, color .18s ease, opacity .18s ease; }
th { position: relative; background: #f8faff; color: #59677c; font-size: 11px; font-weight: 800; text-transform: none; }
tbody tr:hover td { background: #fbfcff; }
tbody tr:last-child td { border-bottom: 0; }
.sortable { cursor: pointer; }
.sortable::after { content: "↕"; margin-left: 5px; color: #a1acbc; font-size: 10px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.positive { color: var(--success); font-weight: 750; }
.negative { color: var(--danger); font-weight: 750; }
.muted { color: var(--muted); }
.table-footer { padding: 11px 13px; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); font-size: 11px; border-top: 1px solid var(--line); }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border-radius: 999px; padding: 4px 8px; font-size: 10px; font-weight: 850; }
.pill.success { color: #11794e; background: #e9f8f1; }
.pill.danger { color: #ac3947; background: #fdebee; }
.pill.warning { color: #956400; background: #fff3d5; }
.pill.info { color: #3c55c7; background: #eef1ff; }
.pill.neutral { color: #5d697c; background: #eef1f5; }

.view-switch { display: inline-flex; background: #f1f4f9; border-radius: 9px; padding: 3px; transition: background .2s ease, opacity .18s ease, transform .18s ease; }
.view-switch button { border: 0; background: transparent; color: var(--muted); padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 11px; font-weight: 750; transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; }
.view-switch button.active { color: var(--primary); background: #fff; box-shadow: 0 3px 10px rgba(36,52,84,.08); }
.daily-matrix th.sticky, .daily-matrix td.sticky { position: sticky; left: 0; z-index: 3; background: #fff; box-shadow: 7px 0 12px rgba(30,44,71,.04); }
.daily-matrix th.sticky { background: #f8faff; z-index: 4; }
.daily-group-head { text-align: center; background: #f1f4ff; color: #4458bd; }

.compare-selector { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.compare-chip { border: 1px solid var(--line); border-radius: 9px; background: #fff; padding: 8px 10px; cursor: pointer; color: #536075; font-size: 12px; transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
.compare-chip.active { border-color: #9aa9ff; color: var(--primary); background: var(--primary-soft); font-weight: 750; }
.compare-grid { display: grid; grid-template-columns: minmax(360px, .9fr) minmax(0, 1.4fr); gap: 15px; margin-top: 15px; }

.upload-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 15px; }
.upload-card { padding: 17px; }
.dropzone { border: 1.5px dashed #aab7ca; background: #fafbfe; border-radius: 13px; min-height: 180px; display: grid; place-items: center; text-align: center; padding: 20px; transition: .15s ease; }
.dropzone.drag { border-color: var(--primary); background: var(--primary-soft); }
.dropzone .upload-icon { font-size: 30px; color: var(--primary); }
.dropzone h3 { margin: 8px 0 4px; font-size: 14px; }
.dropzone p { margin: 0 0 13px; color: var(--muted); font-size: 11px; }
.detect-list { display: grid; gap: 7px; margin-top: 13px; }
.detect-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.detect-row span { color: var(--muted); }
.stepper { display: flex; gap: 8px; margin-bottom: 15px; }
.step { flex: 1; display: flex; align-items: center; gap: 8px; color: #8b97a9; font-size: 11px; font-weight: 700; }
.step::before { content: attr(data-step); width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; background: #eef1f6; color: #7b8799; }
.step.active { color: var(--primary); }
.step.active::before { color: #fff; background: var(--primary); }

.keitaro-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.option-list { display: grid; gap: 9px; }
.option-row { border: 1px solid var(--line); border-radius: 11px; padding: 12px; display: flex; align-items: flex-start; gap: 10px; }
.option-row input { margin-top: 2px; }
.option-row b { display: block; font-size: 12px; }
.option-row p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.status-panel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 13px; }
.status-box { border: 1px solid var(--line); border-radius: 11px; padding: 12px; }
.status-box span { color: var(--muted); font-size: 10px; }
.status-box b { display: block; margin-top: 5px; font-size: 16px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 15px; }
.tab { border: 0; background: transparent; color: var(--muted); padding: 11px 12px; cursor: pointer; font-weight: 750; font-size: 12px; border-bottom: 2px solid transparent; transition: color .16s ease, border-color .16s ease, transform .16s ease; }
.tab.active { color: var(--primary); border-color: var(--primary); }
.user-actions { display: flex; gap: 6px; }
.user-cell { display: flex; align-items: center; gap: 9px; }
.user-mini-avatar { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #edf1ff; color: #4f64d4; font-weight: 800; font-size: 10px; }

.settings-shell { display: grid; grid-template-columns: 215px minmax(0, 1fr); gap: 15px; }
.settings-nav { padding: 8px; align-self: start; position: sticky; top: 20px; }
.settings-nav button { width: 100%; border: 0; border-radius: 9px; background: transparent; color: #59687e; text-align: left; padding: 10px 11px; cursor: pointer; font-size: 12px; font-weight: 700; transition: background .16s ease, color .16s ease, transform .16s ease; }
.settings-nav button.active { color: var(--primary); background: var(--primary-soft); }
.settings-panel { padding: 19px; }
.settings-section { display: none; }
.settings-section.active { display: block; }
.settings-section h3 { margin: 0 0 4px; }
.settings-section > p { margin: 0 0 18px; color: var(--muted); font-size: 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid label { display: grid; gap: 7px; color: #46546a; font-size: 12px; font-weight: 750; }
.form-grid input, .form-grid select { border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; outline: none; background: #fff; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; }
.notice { border: 1px solid #f1d69a; background: #fff7e7; color: #80601d; border-radius: 11px; padding: 11px 13px; font-size: 12px; line-height: 1.5; }
.info-notice { border-color: #cfd7ff; background: #f2f4ff; color: #4254ad; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(8,17,31,.48); display: grid; place-items: center; z-index: 100; padding: 20px; animation: backdropReveal .16s ease-out both; }
.modal { width: min(570px, 100%); max-height: 90vh; overflow: auto; background: #fff; border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 35px 90px rgba(0,0,0,.28); }
.modal-head { padding: 17px 19px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; }
.modal-body { padding: 19px; }
.modal-foot { padding: 14px 19px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); }

.toast-root { position: fixed; top: 18px; right: 18px; display: grid; gap: 9px; z-index: 200; }
.toast { width: min(380px, calc(100vw - 36px)); background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: 12px; box-shadow: 0 18px 50px rgba(23,36,63,.18); padding: 12px 14px; animation: toastIn .2s ease; font-size: 12px; line-height: 1.45; }
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--warning); }
@keyframes toastIn { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.loading { min-height: 300px; display: grid; place-items: center; color: var(--muted); }
.spinner { width: 34px; height: 34px; border: 3px solid #dfe5f0; border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty-state { padding: 40px 20px; text-align: center; color: var(--muted); }
.empty-state b { display: block; color: #4e5d72; margin-bottom: 5px; }

@media (max-width: 1280px) {
  .kpi-grid { grid-template-columns: repeat(4, minmax(125px, 1fr)); }
  .three-grid { grid-template-columns: 1fr 1fr; }
  .compare-grid { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .app-shell { grid-template-columns: 76px minmax(0, 1fr); }
  .sidebar { padding-inline: 9px; }
  .sidebar .brand span, .nav-item:not(.active) { font-size: 0; }
  .sidebar .brand { justify-content: center; padding-inline: 0; }
  .nav-item { justify-content: center; padding: 11px 0; font-size: 0; }
  .nav-icon { width: 28px; height: 28px; flex-basis: 28px; }
  .nav-icon svg { width: 18px; height: 18px; }
  .sidebar-user { grid-template-columns: 1fr; justify-items: center; }
  .sidebar-user-copy, .sidebar-user .icon-btn { display: none; }
  .topbar { align-items: flex-start; }
  .top-controls { max-width: 530px; }
  .section-grid, .upload-layout, .keitaro-layout, .settings-shell, .spend-grid { grid-template-columns: 1fr; }
  .settings-nav { position: static; display: flex; overflow: auto; }
  .settings-nav button { width: auto; white-space: nowrap; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand-panel { min-height: 270px; padding: 25px; }
  .auth-art { min-height: 160px; margin: 12px 0; }
  .mini-chart-card { width: 190px; height: 110px; padding: 12px; }
  .auth-copy h1 { font-size: 27px; }
}
@media (max-width: 720px) {
  .main-content { padding: 18px 14px 30px; }
  .topbar { display: block; }
  .top-controls { margin-top: 14px; justify-content: flex-start; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .three-grid, .two-grid, .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .auth-form-panel { padding: 24px 14px; }
  .auth-card { padding: 23px 18px; }
  .status-panel { grid-template-columns: 1fr; }
  .date-sep { display: none; }
  .top-controls .control { width: calc(50% - 5px); }
  .top-controls .btn { flex: 1; }
}

/* v8 Daily Report advanced filters */
.daily-main-toolbar{justify-content:space-between;align-items:center}
.daily-filters-panel{margin-bottom:15px;max-height:700px;overflow:hidden;transition:max-height .28s cubic-bezier(.2,.8,.2,1),padding .24s ease,opacity .2s ease,margin .24s ease,border-width .24s ease}
.daily-filters-panel.collapsed{max-height:0;padding-top:0;padding-bottom:0;margin-bottom:0;opacity:0;border-width:0}
.daily-filter-grid{display:grid;grid-template-columns:repeat(4,minmax(190px,1fr));gap:12px}
.daily-filter-group{display:flex;flex-direction:column;gap:6px;transition:opacity .2s ease,transform .2s ease}
.daily-filter-group>span{font-size:12px;font-weight:700;color:var(--muted)}
.daily-filter-group input,.daily-filter-group select{width:100%;min-width:0;border:1px solid var(--line);border-radius:9px;padding:9px 10px;background:#fff;color:var(--text);transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease}
.daily-range{display:grid;grid-template-columns:1fr 1fr;gap:6px}
@media(max-width:1250px){.daily-filter-grid{grid-template-columns:repeat(3,minmax(180px,1fr))}}
@media(max-width:900px){.daily-filter-grid{grid-template-columns:repeat(2,minmax(150px,1fr))}}
@media(max-width:620px){.daily-filter-grid{grid-template-columns:1fr}}

.bar-chart { display:flex; flex-direction:column; gap:14px; padding-top:4px; }
.bar-row { display:flex; flex-direction:column; gap:8px; }
.bar-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.bar-title { display:flex; flex-direction:column; gap:2px; min-width:0; }
.bar-title b { color:var(--text); font-size:15px; }
.bar-title small { color:var(--muted); font-size:12px; }
.bar-index { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:8px; background:#eef2ff; color:#536dfe; font-weight:700; margin-right:8px; }
.bar-track { width:100%; height:12px; background:#eef2ff; border-radius:999px; overflow:hidden; }
.bar-fill { height:100%; border-radius:999px; background:linear-gradient(90deg,#536dfe 0%, #6f5ef9 100%); }
.bar-value { white-space:nowrap; color:var(--text); font-weight:700; font-size:14px; }

/* MCP access */
.mcp-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.mcp-info-grid>div{display:flex;flex-direction:column;gap:5px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2,#f8fafc);min-width:0}
.mcp-info-grid span{font-size:12px;color:var(--muted)}
.mcp-info-grid code{overflow-wrap:anywhere;color:var(--text)}
.mcp-create-row{display:grid;grid-template-columns:1fr 180px auto;gap:12px;align-items:end;margin-top:14px}
.mcp-create-row label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--muted)}
.token-reveal{display:flex;gap:10px;align-items:center;margin-top:10px}
.token-reveal code{flex:1;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff;overflow-wrap:anywhere;color:var(--text)}
.code-block{margin:0;padding:14px;border:1px solid var(--line);border-radius:12px;background:#0f172a;color:#dbeafe;overflow:auto;font-size:12px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.success-notice{background:#ecfdf5!important;border-color:#a7f3d0!important;color:#065f46!important}
@media(max-width:800px){.mcp-info-grid{grid-template-columns:1fr}.mcp-create-row{grid-template-columns:1fr}.token-reveal{align-items:stretch;flex-direction:column}}

/* HASH tab */
.hash-layout{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:18px;align-items:start}
.hash-create-card{position:sticky;top:18px}
.hash-create-card textarea{width:100%;resize:vertical;min-height:150px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--panel);color:var(--text);font:inherit;line-height:1.5}
.hash-create-card textarea:focus,.hash-search-wrap input:focus{outline:2px solid rgba(83,109,254,.18);border-color:#536dfe}
.field-label{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:700;color:var(--text)}
.hash-help{margin:10px 0 14px;color:var(--muted);font-size:12px;line-height:1.5}
.hash-help code{padding:2px 5px;border-radius:6px;background:#eef2ff;color:#4053c7}
.full-width{width:100%}
.hash-table-head{padding:18px 18px 12px}
.hash-search-wrap{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hash-search-wrap input{min-width:280px}
.hash-code-btn{border:0;background:#eef2ff;color:#4053c7;border-radius:9px;padding:7px 10px;font-weight:800;letter-spacing:.4px;cursor:pointer}
.hash-code-btn:hover{background:#e1e7ff}
.actions-cell{text-align:right;white-space:nowrap}
.hash-result-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.hash-result-list span{background:#fff;border:1px solid rgba(83,109,254,.18);border-radius:9px;padding:6px 9px;font-size:12px}
@media(max-width:980px){.hash-layout{grid-template-columns:1fr}.hash-create-card{position:static}.hash-search-wrap input{min-width:0;width:100%}}

/* v15 Theme system */
:root {
  --chart-grid: #e7ebf3;
  --chart-label: #8b97a9;
  --chart-point: #ffffff;
  --input-bg: #ffffff;
  --table-head-bg: #f8faff;
  --row-hover-bg: #fbfcff;
  --raised-bg: #ffffff;
}

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

.theme-toggle {
  min-height: 39px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 11px;
  background: var(--panel);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  font-weight: 750;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.theme-toggle:hover { transform: translateY(-1px); border-color: var(--primary); }
.theme-icon { width: 18px; text-align: center; font-size: 17px; line-height: 1; }
.theme-label { font-size: 12px; }
.auth-form-panel { position: relative; }
.auth-theme-toggle { position: absolute; top: 20px; right: 22px; z-index: 5; }

html[data-theme="dark"] {
  --bg: #0b1120;
  --panel: #111827;
  --panel-soft: #151f31;
  --line: #273449;
  --text: #e8edf5;
  --muted: #93a3b8;
  --nav: #080e1a;
  --nav-soft: #18243a;
  --primary: #7c8cff;
  --primary-dark: #6576ef;
  --primary-soft: #202b52;
  --success: #39c98a;
  --danger: #ff7180;
  --warning: #f2b84b;
  --purple: #a783ff;
  --shadow: 0 14px 42px rgba(0, 0, 0, .28);
  --chart-grid: #2a374c;
  --chart-label: #91a0b5;
  --chart-point: #111827;
  --input-bg: #0f1726;
  --table-head-bg: #151f31;
  --row-hover-bg: #172235;
  --raised-bg: #111827;
}

html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] .auth-shell { background: linear-gradient(135deg, #080e1a, #0c1423 55%, #11152a); }
html[data-theme="dark"] .auth-brand-panel { background: linear-gradient(160deg, #060b14 0%, #0d1727 72%, #14213a 100%); }
html[data-theme="dark"] .auth-form-panel { background: radial-gradient(circle at 80% 12%, rgba(124,140,255,.12), transparent 32%); }
html[data-theme="dark"] .auth-card { background: rgba(17,24,39,.96); border-color: var(--line); box-shadow: 0 28px 75px rgba(0,0,0,.42); }
html[data-theme="dark"] .auth-card-header h2,
html[data-theme="dark"] .topbar h1,
html[data-theme="dark"] .settings-section h3,
html[data-theme="dark"] .modal-head h3 { color: var(--text); }
html[data-theme="dark"] .form-stack label,
html[data-theme="dark"] .form-grid label,
html[data-theme="dark"] .field-label { color: #c7d1df; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .control,
html[data-theme="dark"] .form-stack input,
html[data-theme="dark"] .form-stack select,
html[data-theme="dark"] .form-stack textarea,
html[data-theme="dark"] .form-grid input,
html[data-theme="dark"] .form-grid select,
html[data-theme="dark"] .daily-filter-group input,
html[data-theme="dark"] .daily-filter-group select,
html[data-theme="dark"] .hash-create-card textarea {
  background: var(--input-bg);
  color: var(--text);
  border-color: var(--line);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #697b91; }
html[data-theme="dark"] .password-wrap { border-color: var(--line); background: var(--input-bg); }
html[data-theme="dark"] .icon-btn { background: #1a2537; color: #c4cfde; }
html[data-theme="dark"] .theme-toggle { background: #151f31; color: #e5ebf4; border-color: #30405a; }
html[data-theme="dark"] .demo-credentials { background: #121c2c; color: var(--muted); border-color: var(--line); }
html[data-theme="dark"] .demo-credentials summary { color: #c8d2e0; }
html[data-theme="dark"] .auth-divider { color: #718198; }
html[data-theme="dark"] .sidebar { background: linear-gradient(180deg, #070c16, #090f1c); }
html[data-theme="dark"] .main-content { background: var(--bg); }
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .toast { background: var(--panel); border-color: var(--line); }
html[data-theme="dark"] .btn.secondary { color: #d2dbe8; background: #151f31; border-color: var(--line); }
html[data-theme="dark"] .btn.ghost { color: #aeb9ff; background: var(--primary-soft); }
html[data-theme="dark"] th { background: var(--table-head-bg); color: #9facbe; }
html[data-theme="dark"] tbody tr:hover td { background: var(--row-hover-bg); }
html[data-theme="dark"] .daily-matrix th.sticky,
html[data-theme="dark"] .daily-matrix td.sticky { background: var(--panel); box-shadow: 7px 0 12px rgba(0,0,0,.16); }
html[data-theme="dark"] .daily-matrix th.sticky { background: var(--table-head-bg); }
html[data-theme="dark"] .daily-group-head { background: #1a2644; color: #aab7ff; }
html[data-theme="dark"] .view-switch { background: #0e1726; }
html[data-theme="dark"] .view-switch button.active { background: #202b3f; color: #aab6ff; box-shadow: 0 3px 10px rgba(0,0,0,.22); }
html[data-theme="dark"] .compare-chip { background: #111b2b; color: #a9b5c6; border-color: var(--line); }
html[data-theme="dark"] .compare-chip.active { background: var(--primary-soft); color: #b9c2ff; border-color: #6172c7; }
html[data-theme="dark"] .dropzone { background: #0f1827; border-color: #41506a; }
html[data-theme="dark"] .step::before { background: #1b2638; color: #9cacbf; }
html[data-theme="dark"] .user-mini-avatar { background: #202b52; color: #bac3ff; }
html[data-theme="dark"] .settings-nav button { color: #9eacbf; }
html[data-theme="dark"] .notice { background: #2a2112; border-color: #66512a; color: #e7c77f; }
html[data-theme="dark"] .info-notice { background: #1b2443; border-color: #354574; color: #b8c3ff; }
html[data-theme="dark"] .success-notice { background: #102a22!important; border-color: #245a47!important; color: #86dfb9!important; }
html[data-theme="dark"] .modal-backdrop { background: rgba(2,6,14,.72); }
html[data-theme="dark"] .spinner { border-color: #2b3749; border-top-color: var(--primary); }
html[data-theme="dark"] .empty-state b { color: #c0c9d7; }
html[data-theme="dark"] .donut::after { background: var(--panel); }
html[data-theme="dark"] .rank-row,
html[data-theme="dark"] .option-row,
html[data-theme="dark"] .status-box,
html[data-theme="dark"] .mcp-info-grid>div { background: #121c2c; border-color: var(--line); }
html[data-theme="dark"] .pill.success { color: #7ee0b3; background: #143126; }
html[data-theme="dark"] .pill.danger { color: #ff9aa5; background: #3a1d25; }
html[data-theme="dark"] .pill.warning { color: #f2ce7e; background: #382d18; }
html[data-theme="dark"] .pill.info { color: #b9c3ff; background: #202b52; }
html[data-theme="dark"] .pill.neutral { color: #b5c0cf; background: #253043; }
html[data-theme="dark"] .bar-index,
html[data-theme="dark"] .bar-track { background: #202b52; }
html[data-theme="dark"] .bar-index { color: #b8c2ff; }
html[data-theme="dark"] .token-reveal code { background: #0e1726; color: var(--text); }
html[data-theme="dark"] .hash-help code,
html[data-theme="dark"] .hash-code-btn { background: #202b52; color: #bac3ff; }
html[data-theme="dark"] .hash-code-btn:hover { background: #293665; }
html[data-theme="dark"] .hash-result-list span { background: #131e30; border-color: #334371; }
html[data-theme="dark"] code:not(.code-block) { color: #c0c8ff; }
html[data-theme="dark"] ::selection { background: #536dfe; color: #fff; }

@media (max-width: 720px) {
  .theme-label { display: none; }
  .theme-toggle { width: 39px; padding-inline: 0; }
  .auth-theme-toggle { top: 12px; right: 12px; }
}