:root {
  --bg: #0a0e1a;
  --panel: #121c36;
  --panel-2: #0f1730;
  --line: #252d47;
  --line-2: #2e3a5c;
  --txt: #e2e8f8;
  --txt-2: #8896b3;
  --txt-3: #5a6a8a;
  --brand: #00d4aa;
  --brand-2: #f5c049;
  --ok: #00d4aa;
  --link: #9bcfff;
  --chrome: #0f1424;
  --chrome-2: #161d30;
  --chrome-3: #1e2640;
  --surface: #0e1731;
  --surface-2: #0f1730;
  --surface-hover: #122246;
  --table-border: #213155;
  --btn-primary-bg: #17305f;
  --btn-primary-border: #31589d;
  --btn-primary-txt: #dce9ff;
  --btn-secondary-bg: #11274f;
  --btn-secondary-border: #31589d;
  --btn-secondary-txt: #cfe3ff;
  --accent-soft: rgba(0, 212, 170, 0.12);
  --accent-soft-border: rgba(0, 212, 170, 0.35);
  --status-neutral-border: #38528f;
  --status-neutral-text: #c2daff;
}

html[data-theme='light'] {
  --bg: #f4f8ff;
  --panel: #ffffff;
  --panel-2: #eef4ff;
  --line: #d6e1f4;
  --txt: #13203d;
  --txt-2: #4e5e86;
  --txt-3: #6f7ea2;
  --brand: #2d6fd2;
  --brand-2: #1e8fd4;
  --ok: #1b9e6a;
  --link: #2d6fd2;
  --chrome: #eef3fb;
  --chrome-2: #f8fbff;
  --chrome-3: #e8f0ff;
  --surface: #ffffff;
  --surface-2: #f4f8ff;
  --surface-hover: #edf4ff;
  --table-border: #d6e1f4;
  --btn-primary-bg: #e9f1ff;
  --btn-primary-border: #b8caea;
  --btn-primary-txt: #2f4f8c;
  --btn-secondary-bg: #eef5ff;
  --btn-secondary-border: #b8caea;
  --btn-secondary-txt: #2f4f8c;
  --accent-soft: rgba(31, 141, 112, 0.12);
  --accent-soft-border: rgba(31, 141, 112, 0.4);
  --status-neutral-border: #b2c4e4;
  --status-neutral-text: #355280;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, sans-serif;
  background: var(--bg);
  color: var(--txt);
}
html[data-theme='light'] body {
  background: #f4f7fb;
}
html[data-theme='light'] tbody tr:nth-child(even) td {
  background: rgba(63, 98, 164, 0.05);
}
html[data-theme='light'] tbody tr:hover td {
  background: rgba(63, 98, 164, 0.11);
}
html[data-theme='light'] .account-focus {
  background: linear-gradient(180deg, #ffffff, #f2f6ff);
}
html[data-theme='light'] .account-chip {
  border-color: #adc1ea;
  color: #2c4779;
  background: rgba(63, 98, 164, 0.09);
}
html[data-theme='light'] .mobile-bottom-nav {
  background: rgba(255, 255, 255, 0.94);
}
html[data-theme='light'] .review-grid textarea,
html[data-theme='light'] .review-grid select,
html[data-theme='light'] .review-grid input {
  background: #ffffff;
}
html[data-theme='light'] .setting-field textarea {
  background: #ffffff;
}

a { color: var(--link); }

.app-layout { min-height: 100vh; display: grid; grid-template-columns: 280px 1fr; }

.sidebar {
  border-right: 1px solid var(--line);
  background: var(--chrome);
  display: flex;
  flex-direction: column;
}

.sidebar-header { display: flex; align-items: center; gap: 8px; padding: 14px 14px 12px; border-bottom: 1px solid var(--line); }
.sidebar-logo-icon-img {
  width: 22px;
  height: 22px;
  max-width: 22px;
  max-height: 22px;
  border-radius: 6px;
  border: 1px solid var(--line);
  object-fit: contain;
  display: block;
  background: transparent;
}
.sidebar-logo-text { display: flex; align-items: center; }
.sidebar-app-name { display: block; font-size: 14px; font-weight: 650; letter-spacing: -0.1px; }
.idx-mark { color: var(--brand-2); font-style: italic; font-weight: 800; }

.sidebar-nav { padding: 10px 8px 12px; overflow-y: auto; }
.nav-section-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--txt-3);
  text-transform: uppercase;
  letter-spacing: 0.9px;
  padding: 0 8px 5px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid transparent;
  color: var(--txt-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  transition: all .15s;
  margin-bottom: 2px;
  text-decoration: none;
}
.nav-item svg { flex-shrink: 0; opacity: .78; width: 15px; height: 15px; }
.nav-item:hover { background: var(--chrome-3); border-color: var(--line-2); color: var(--txt); }
.nav-item.active { background: linear-gradient(90deg, var(--accent-soft), transparent); border-color: var(--accent-soft-border); color: var(--brand); font-weight: 600; }
.nav-item.active svg { opacity: 1; stroke: var(--brand); }

.sidebar-footer { margin-top: auto; border-top: 1px solid var(--line); padding: 14px 12px; position: relative; z-index: 2; }
.user-menu-trigger {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--chrome-2);
  color: var(--txt);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin-bottom: 12px;
}
.user-menu-trigger:hover { border-color: var(--line-2); background: var(--chrome-3); }
.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand);
  color: #000;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.user-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.user-name {
  max-width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 600;
}
.user-role {
  font-size: 11px;
  color: var(--txt-2);
  text-transform: capitalize;
}
.user-menu-arrow {
  margin-left: auto;
  color: var(--txt-2);
  font-size: 12px;
  transition: transform .15s ease;
}
.user-menu-trigger[aria-expanded='true'] .user-menu-arrow {
  transform: rotate(180deg);
}
.user-menu-panel {
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--chrome);
  padding: 10px;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(100% - 6px);
  z-index: 38;
  max-height: min(68vh, 460px);
  overflow: auto;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.35);
}
.user-menu-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--txt-2);
  margin-bottom: 8px;
}
.user-menu-theme-group {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--chrome-2);
}
.theme-option {
  flex: 1;
  min-height: 36px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--txt-2);
  padding: 0 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.theme-option:last-child { border-right: 0; }
.theme-option.active {
  background: var(--accent-soft);
  color: var(--brand);
}
.menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  opacity: 0.95;
  flex-shrink: 0;
}
.user-menu-actions {
  display: grid;
  gap: 8px;
}
.user-menu-btn {
  border: 1px solid var(--line-2);
  background: var(--chrome-2);
  color: var(--txt);
  border-radius: 18px;
  padding: 8px 14px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.user-menu-btn-danger {
  border-color: #e24949;
  background: rgba(226, 73, 73, 0.1);
  color: #e24949;
}
.build-text { font-size: 11px; color: var(--txt-3); margin-bottom: 8px; text-align: center; letter-spacing: 0.6px; }
.copyright { font-size: 11px; color: var(--txt-3); text-align: center; line-height: 1.5; }

.main-wrapper { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: 54px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  background: var(--chrome);
}
.topbar-title { font-size: 15px; font-weight: 600; color: var(--txt); flex: 1; }
.topbar-menu-btn {
  color: var(--txt-2);
  padding: 6px;
  border-radius: 6px;
  display: none;
  border: 0;
  background: transparent;
}
.topbar-menu-btn:hover { background: var(--chrome-3); color: var(--txt); }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.quick-actions-btn {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-txt);
  border: 1px solid var(--btn-secondary-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
}
.install-btn { background: rgba(0, 212, 170, 0.15); color: var(--brand); border: 1px solid rgba(0, 212, 170, 0.4); border-radius: 8px; padding: 8px 12px; font-weight: 700; }

.main-content { padding: 24px; }
.card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  padding: 20px;
}
.card h1 { margin-top: 0; font-size: 22px; }
.muted { color: var(--txt-2); }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.kpi {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: var(--surface-2);
}
.kpi span { display: block; color: var(--txt-2); font-size: 12px; }
.kpi strong { font-size: 20px; }

.section-title { margin-top: 20px; margin-bottom: 10px; }
.action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 14px;
}
.quick-btn {
  border: 1px solid var(--btn-primary-border);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-txt);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  cursor: pointer;
}
.dashboard-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 10px;
  margin: 12px 0;
}
.panel-soft {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: var(--surface-2);
}
.panel-soft h3 {
  margin: 2px 0 8px;
}
.progress-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(49, 88, 157, 0.18);
  border: 1px solid var(--line);
  overflow: hidden;
  margin: 6px 0 8px;
}
.progress-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #48d597, #8fd3ff);
}
.compact-list {
  margin: 8px 0 0;
  padding-left: 18px;
}
.compact-list li {
  margin: 4px 0;
}

.table-wrap {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  margin-top: 14px;
  overflow-x: auto;
}
.table-wrap h3 { margin: 4px 0 10px; font-size: 16px; }
.sparkline { display: block; width: 100%; height: 130px; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
th, td {
  border-bottom: 1px solid var(--table-border);
  padding: 8px;
  text-align: left;
}
th { color: var(--txt-2); font-weight: 600; }
tbody tr:nth-child(even) td {
  background: rgba(17, 28, 55, 0.18);
}
tbody tr:hover td {
  background: rgba(49, 88, 157, 0.16);
}
.table-wrap td input[type='number'],
.table-wrap td input[type='date'],
.table-wrap td select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  background: var(--surface);
  color: var(--txt);
  width: 100%;
}
.table-wrap td button {
  border: 1px solid var(--btn-primary-border);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-txt);
  border-radius: 8px;
  padding: 6px 9px;
  cursor: pointer;
  margin-right: 6px;
}

.calendar-pro-card .kpi strong {
  font-size: 16px;
  line-height: 1.3;
}
.calendar-toolbar {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 0.9fr auto;
  gap: 8px;
  margin: 8px 0 10px;
  align-items: center;
}
.calendar-toolbar input,
.calendar-toolbar select {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  background: var(--surface);
  color: var(--txt);
}
.calendar-alerts-wrap {
  background: linear-gradient(180deg, rgba(16, 32, 61, 0.46), rgba(12, 21, 42, 0.46));
}
.calendar-manage-wrap {
  background: linear-gradient(180deg, rgba(14, 31, 63, 0.5), rgba(9, 19, 38, 0.5));
}
.calendar-manage-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr 0.9fr 0.8fr 0.9fr 1.6fr;
  gap: 8px;
}
.calendar-manage-grid input,
.calendar-manage-grid select {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  background: var(--surface);
  color: var(--txt);
}
.calendar-alert-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: rgba(8, 19, 38, 0.45);
  margin-bottom: 8px;
}
.calendar-alert-item:last-child {
  margin-bottom: 0;
}
.calendar-alert-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.calendar-alert-date {
  color: var(--txt-2);
}
.calendar-alert-clock {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  color: var(--txt);
  background: rgba(49, 88, 157, 0.18);
}
.calendar-alert-note {
  color: var(--txt);
}
.impact-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  border: 1px solid var(--status-neutral-border);
  color: var(--status-neutral-text);
  white-space: nowrap;
}
.impact-low {
  border-color: #3f8c67;
  color: #a9f0cf;
  background: rgba(38, 131, 93, 0.2);
}
.impact-medium {
  border-color: #c7a252;
  color: #ffdc95;
  background: rgba(199, 162, 82, 0.19);
}
.impact-high {
  border-color: #d17a36;
  color: #ffc48f;
  background: rgba(209, 122, 54, 0.2);
}
.impact-very-high {
  border-color: #d65858;
  color: #ffb2b2;
  background: rgba(214, 88, 88, 0.2);
}

.help-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 14px;
}
.help-tab {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  background: var(--surface);
  color: var(--txt-2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.help-tab:hover {
  border-color: var(--line-2);
  color: var(--txt);
}
.help-tab.active {
  border-color: var(--btn-primary-border);
  background: rgba(49, 88, 157, 0.18);
  color: var(--txt);
}
.help-pane {
  display: none;
}
.help-pane.active {
  display: block;
}
.help-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.help-module-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  padding: 10px;
}
.help-module-card h3 {
  margin: 0 0 6px;
  font-size: 14px;
}
.help-module-card p {
  margin: 0;
  font-size: 12px;
}
.help-step-list {
  margin: 0;
  padding-left: 20px;
}
.help-step-list li {
  margin: 8px 0;
}
.help-infra-note {
  margin-top: 8px;
  color: var(--txt-2);
  font-size: 12px;
}
.help-code-block {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--txt);
  padding: 10px;
  overflow: auto;
  font-size: 12px;
  line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.help-guide-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 10px;
}
.help-guide-sidebar {
  margin-top: 0;
}
.help-guide-sidebar input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  background: var(--surface);
  color: var(--txt);
}
.help-guide-filters {
  display: grid;
  gap: 8px;
}
.help-guide-filters select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  background: var(--surface);
  color: var(--txt);
}
.help-guide-list {
  margin-top: 10px;
  display: grid;
  gap: 8px;
  max-height: 560px;
  overflow: auto;
  padding-right: 2px;
}
.help-guide-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--txt);
  text-align: left;
  padding: 10px;
  cursor: pointer;
}
.help-guide-card:hover {
  border-color: var(--line-2);
  background: var(--surface-hover);
}
.help-guide-card.active {
  border-color: #2f6cc5;
  background: rgba(47, 108, 197, 0.18);
}
.help-guide-card-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}
.help-guide-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--txt-2);
  font-size: 11px;
  margin-bottom: 6px;
}
.help-guide-card p {
  margin: 0;
  color: var(--txt-2);
  font-size: 12px;
  line-height: 1.45;
}
.help-guide-detail {
  margin-top: 0;
}
.help-guide-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.help-guide-head h3 {
  margin: 0 0 4px;
  color: var(--txt);
}
.help-guide-meta {
  display: grid;
  gap: 6px;
  justify-items: end;
}
.help-guide-summary {
  margin: 0 0 8px;
  color: var(--txt-2);
}
.help-guide-warning {
  border: 1px solid rgba(212, 143, 31, 0.45);
  background: rgba(212, 143, 31, 0.14);
  color: var(--txt);
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 12px;
  margin-bottom: 10px;
}
.help-guide-warning strong {
  color: #ffe1aa;
}
.help-guide-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.guide-toc-link {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--txt-2);
  padding: 5px 10px;
  font-size: 11px;
  cursor: pointer;
}
.guide-toc-link:hover {
  border-color: var(--line-2);
  color: var(--txt);
}
.help-guide-content h4 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--txt);
}
.help-guide-checklist {
  margin: 0 0 10px;
  padding-left: 20px;
}
.help-guide-checklist li {
  margin: 5px 0;
  color: var(--txt-2);
  font-size: 12px;
}
.help-guide-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.help-guide-sections {
  display: grid;
  gap: 8px;
}
.help-guide-section {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  padding: 8px 10px;
}
.help-guide-section summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--txt);
}
.help-guide-section-body {
  margin-top: 8px;
  color: var(--txt-2);
  font-size: 12px;
  line-height: 1.55;
}
.help-guide-content {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  padding: 10px;
  color: var(--txt-2);
  font-size: 12px;
  line-height: 1.55;
}
.help-guide-prose {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
  padding: 14px;
  color: var(--txt);
  line-height: 1.65;
  max-height: 72vh;
  overflow: auto;
}
.help-guide-prose h1,
.help-guide-prose h2,
.help-guide-prose h3,
.help-guide-prose h4 {
  margin-top: 18px;
  margin-bottom: 8px;
  color: var(--txt);
  scroll-margin-top: 72px;
}
.help-guide-prose h1 {
  font-size: 22px;
}
.help-guide-prose h2 {
  font-size: 18px;
}
.help-guide-prose h3 {
  font-size: 15px;
}
.help-guide-prose p {
  margin: 8px 0;
  color: var(--txt-2);
}
.help-guide-prose ul,
.help-guide-prose ol {
  margin: 8px 0 10px 18px;
  padding: 0;
}
.help-guide-prose li {
  margin: 4px 0;
  color: var(--txt-2);
}
.help-guide-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
}
.help-guide-prose th,
.help-guide-prose td {
  border-bottom: 1px solid var(--table-border);
  padding: 8px 9px;
  font-size: 12px;
}
.help-guide-prose th {
  color: var(--txt);
  font-weight: 700;
}
.help-guide-prose code,
.help-guide-prose pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.help-guide-prose pre {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--txt);
  padding: 10px;
  overflow: auto;
}
.help-guide-prose a {
  color: var(--link);
  text-decoration: underline;
}
.help-guide-prose blockquote {
  border-left: 3px solid var(--btn-primary-border);
  margin: 10px 0;
  padding: 4px 10px;
  color: var(--txt-2);
}

html[data-theme='light'] .help-guide-warning {
  border-color: rgba(185, 123, 28, 0.45);
  background: rgba(185, 123, 28, 0.12);
}
html[data-theme='light'] .help-guide-warning strong {
  color: #8d5b12;
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.segment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.segment-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: var(--panel-2);
}
.segment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.segment-metrics {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--txt-2);
}
.segment-metrics b {
  color: var(--txt);
  font-weight: 700;
}
.tiny-sparkline {
  display: block;
  width: 136px;
  height: 34px;
}
.rank-spark-cell {
  min-width: 140px;
}
.mini-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 10px;
}
.mini-head { display: flex; justify-content: space-between; align-items: center; }
.badge {
  border: 1px solid var(--status-neutral-border);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--status-neutral-text);
}
.status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  border: 1px solid var(--status-neutral-border);
  color: var(--status-neutral-text);
  white-space: nowrap;
}
.status-planned {
  border-color: #5d6b8c;
  color: #bdc7de;
  background: rgba(93, 107, 140, 0.16);
}
.status-active {
  border-color: #2f6cc5;
  color: #beddff;
  background: rgba(47, 108, 197, 0.18);
}
.status-ready_payout {
  border-color: #17a26b;
  color: #a5f0cb;
  background: rgba(23, 162, 107, 0.18);
}
.status-rest_day {
  border-color: #d48f1f;
  color: #ffe1aa;
  background: rgba(212, 143, 31, 0.2);
}
.status-ready_next_cycle {
  border-color: #8b63de;
  color: #ddc7ff;
  background: rgba(139, 99, 222, 0.2);
}

.account-focus {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(180deg, #0f1834, #0c142d);
}
.account-focus-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.account-focus-title {
  font-size: 14px;
  font-weight: 700;
}
.account-focus-meta {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.account-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--status-neutral-border);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  color: var(--status-neutral-text);
  background: rgba(49, 88, 157, 0.16);
}
.account-chip-live {
  border-color: #17a26b;
  color: #a5f0cb;
  background: rgba(23, 162, 107, 0.2);
}
.account-chip-eval {
  border-color: #d49f1d;
  color: #ffecbd;
  background: rgba(212, 159, 29, 0.2);
}
.account-focus-pnl {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
}

#bulk-import-text {
  width: 100%;
  min-height: 140px;
  background: rgba(10, 18, 40, 0.42);
  color: var(--txt);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  resize: vertical;
}

body.modal-open {
  overflow: hidden;
}

.action-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
}
.action-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 18, 0.72);
}
.action-modal-panel {
  position: relative;
  width: min(560px, calc(100% - 28px));
  margin: 88px auto 0;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: linear-gradient(180deg, #121d3a, #0b1430);
  box-shadow: 0 28px 58px rgba(0, 0, 0, 0.5);
  padding: 16px;
  transform: translateY(10px);
  opacity: 0;
  transition: opacity .16s ease, transform .16s ease;
}
.action-modal.open .action-modal-panel {
  transform: translateY(0);
  opacity: 1;
}
.action-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.action-modal-title {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.2px;
}
.action-modal-close {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #1a2546;
  color: var(--txt);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.action-modal-close:hover {
  border-color: #4866a6;
  background: #20305c;
}
.action-modal-message {
  margin: 0;
  color: var(--txt-2);
  white-space: pre-line;
  line-height: 1.55;
  font-size: 14px;
}
.action-modal-input-wrap {
  margin-top: 12px;
  display: grid;
  gap: 6px;
}
.action-modal-input-wrap[hidden] {
  display: none !important;
}
.action-modal-input-label {
  font-size: 12px;
  color: var(--txt-2);
}
.action-modal-input-wrap input {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--surface);
  color: var(--txt);
}
.action-modal-input-wrap input:focus {
  outline: none;
  border-color: #4a78cf;
  box-shadow: 0 0 0 3px rgba(74, 120, 207, 0.2);
}
.action-modal-input-hint {
  margin: 0;
  color: var(--txt-3);
  font-size: 12px;
}
.action-modal-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.action-modal-btn {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 600;
}
.action-modal-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.action-modal-btn-cancel {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-txt);
  border-color: var(--btn-secondary-border);
}
.action-modal-btn-confirm {
  background: rgba(0, 212, 170, 0.15);
  color: #8ff5db;
  border-color: rgba(0, 212, 170, 0.45);
}
.action-modal-btn-danger {
  background: rgba(226, 73, 73, 0.14);
  color: #ffced8;
  border-color: rgba(226, 73, 73, 0.55);
}

html[data-theme='light'] .action-modal-backdrop {
  background: rgba(16, 28, 52, 0.38);
}
html[data-theme='light'] .action-modal-panel {
  background: linear-gradient(180deg, #ffffff, #edf3ff);
  border-color: #cfdbee;
  box-shadow: 0 24px 56px rgba(19, 32, 61, 0.22);
}
html[data-theme='light'] .action-modal-close {
  background: #f3f7ff;
  border-color: #cfdbee;
  color: #1f2d4d;
}
html[data-theme='light'] .action-modal-message,
html[data-theme='light'] .action-modal-input-label {
  color: #4e5e86;
}
html[data-theme='light'] .action-modal-input-wrap input {
  background: #ffffff;
  border-color: #cfdbee;
  color: #13203d;
}
html[data-theme='light'] .action-modal-btn-cancel {
  background: #f2f7ff;
  color: #2f4f8c;
  border-color: #b8caea;
}
html[data-theme='light'] .action-modal-btn-confirm {
  background: rgba(31, 141, 112, 0.13);
  color: #1f7a5f;
  border-color: rgba(31, 141, 112, 0.45);
}
html[data-theme='light'] .action-modal-btn-danger {
  background: rgba(200, 64, 84, 0.13);
  color: #9f2b44;
  border-color: rgba(200, 64, 84, 0.4);
}

.quick-actions-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
}
.quick-actions-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 18, 0.65);
}
.quick-actions-panel {
  position: relative;
  width: min(760px, calc(100% - 32px));
  margin: 70px auto 0;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.quick-actions-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
}
.quick-actions-head input {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--surface);
  color: var(--txt);
}
.quick-actions-list {
  max-height: 420px;
  overflow-y: auto;
  padding: 8px;
}
.qa-item {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--txt);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
}
.qa-item:hover,
.qa-item.active {
  border-color: var(--line-2);
  background: rgba(49, 88, 157, 0.16);
}
.qa-item-label {
  font-size: 13px;
  font-weight: 600;
}
.qa-item-hint {
  color: var(--txt-2);
  font-size: 12px;
}
.qa-empty {
  color: var(--txt-2);
  padding: 16px 12px;
}

.risk-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.risk-alert-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.risk-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}
.risk-filter-row input[type='text'],
.risk-filter-row select {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--txt);
  padding: 7px 9px;
  font-size: 12px;
}
.risk-filter-row input[type='text'] {
  min-width: 260px;
  flex: 1 1 320px;
}
.risk-filter-row select {
  min-width: 140px;
}
.risk-open-only {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--txt-2);
}
.risk-open-only input {
  width: 15px;
  height: 15px;
}
.risk-alert {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  display: grid;
  gap: 3px;
}
.risk-alert strong {
  font-size: 13px;
}
.risk-alert span {
  color: var(--txt-2);
  font-size: 12px;
}
.risk-low {
  border-color: #2f6cc5;
  background: rgba(47, 108, 197, 0.14);
}
.risk-medium {
  border-color: #d48f1f;
  background: rgba(212, 143, 31, 0.17);
}
.risk-high {
  border-color: #c14040;
  background: rgba(193, 64, 64, 0.17);
}
.status-low {
  border-color: #2f6cc5;
  color: #beddff;
  background: rgba(47, 108, 197, 0.18);
}
.status-medium {
  border-color: #d48f1f;
  color: #ffe1aa;
  background: rgba(212, 143, 31, 0.2);
}
.status-high {
  border-color: #c14040;
  color: #ffc6c6;
  background: rgba(193, 64, 64, 0.2);
}

.timeline-type {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--status-neutral-border);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--status-neutral-text);
}
.timeline-type-pnl {
  border-color: #2f6cc5;
  color: #beddff;
  background: rgba(47, 108, 197, 0.18);
}
.timeline-type-day-close {
  border-color: #17a26b;
  color: #a5f0cb;
  background: rgba(23, 162, 107, 0.16);
}
.timeline-type-payout {
  border-color: #d48f1f;
  color: #ffe1aa;
  background: rgba(212, 143, 31, 0.2);
}
.timeline-type-neutral {
  border-color: #5d6b8c;
  color: #bdc7de;
  background: rgba(93, 107, 140, 0.16);
}

.mobile-bottom-nav {
  display: none;
}
.mobile-nav-item {
  border: 1px solid transparent;
  background: transparent;
  color: var(--txt-2);
  border-radius: 10px;
  padding: 7px 6px;
  min-height: 34px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-nav-item.active {
  border-color: var(--btn-primary-border);
  background: rgba(49, 88, 157, 0.18);
  color: var(--txt);
}

.form-inline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.form-inline select,
.form-inline input,
.form-inline button {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  background: var(--surface);
  color: var(--txt);
}
.form-inline button {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  cursor: pointer;
  color: var(--btn-primary-txt);
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.review-field-wide {
  grid-column: 1 / -1;
}
.review-grid textarea,
.review-grid select,
.review-grid input {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  background: var(--surface);
  color: var(--txt);
  width: 100%;
}
.review-grid textarea {
  resize: vertical;
  min-height: 84px;
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.settings-panel {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
}
.settings-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 10px 0;
}
.setting-field {
  display: grid;
  gap: 6px;
}
.setting-field span {
  font-size: 12px;
  color: var(--txt-2);
}
.setting-field input,
.setting-field select {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  background: var(--surface);
  color: var(--txt);
}
.setting-field textarea {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  background: var(--surface);
  color: var(--txt);
  width: 100%;
  resize: vertical;
  min-height: 120px;
}
.settings-inline {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.settings-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.settings-head-row h3 {
  margin: 0;
}
.settings-panel code {
  font-size: 11px;
  color: var(--link);
}

.backtest-import-wrap textarea {
  min-height: 170px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.45;
}
.backtest-import-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.webhook-grid {
  margin-top: 0;
}
.webhook-manage-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(420px, 1.35fr);
  gap: 12px;
}
.webhook-manage-grid code {
  word-break: break-all;
}
.webhook-analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}
.upload-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 4px;
}
.upload-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.upload-actions a {
  border: 1px solid var(--btn-primary-border);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-txt);
  border-radius: 8px;
  padding: 6px 9px;
  cursor: pointer;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
}
.upload-actions button {
  border: 1px solid var(--btn-primary-border);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-txt);
  border-radius: 8px;
  padding: 6px 9px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.upload-actions button:hover,
.upload-actions a:hover {
  filter: brightness(1.05);
}
.bt-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.bt-scope-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.bt-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 10px;
}
.bt-tab {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 12px;
  background: var(--surface);
  color: var(--txt-2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.bt-tab:hover {
  border-color: var(--line-2);
  color: var(--txt);
}
.bt-tab.active {
  border-color: var(--btn-primary-border);
  background: rgba(49, 88, 157, 0.18);
  color: var(--txt);
}
.bt-pane {
  display: none;
}
.bt-pane.active {
  display: block;
}
.bt-bar-track {
  width: 100%;
  min-width: 140px;
  height: 8px;
  border-radius: 999px;
  background: rgba(49, 88, 157, 0.22);
  border: 1px solid var(--line);
  overflow: hidden;
}
.bt-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4bcf96, #7bc8ff);
}
.bt-row-active td {
  background: rgba(47, 108, 197, 0.16) !important;
}
.bt-heatmap-wrap {
  overflow-x: auto;
}
.bt-heatmap {
  min-width: 860px;
  border-collapse: separate;
  border-spacing: 4px;
}
.bt-heatmap th,
.bt-heatmap td {
  border: 0;
  text-align: center;
  font-size: 12px;
  border-radius: 8px;
  padding: 7px 6px;
  white-space: nowrap;
}
.bt-heatmap th {
  color: var(--txt-2);
}
.bt-heat-empty {
  background: rgba(91, 111, 151, 0.12);
  color: var(--txt-3);
}
.bt-heat-pos {
  background: rgba(23, 162, 107, 0.2);
  color: #a5f0cb;
  border: 1px solid rgba(23, 162, 107, 0.45);
}
.bt-heat-neg {
  background: rgba(193, 64, 64, 0.2);
  color: #ffc6c6;
  border: 1px solid rgba(193, 64, 64, 0.45);
}
.bt-heat-flat {
  background: rgba(47, 108, 197, 0.16);
  color: #beddff;
  border: 1px solid rgba(47, 108, 197, 0.35);
}
html[data-theme='light'] .bt-row-active td {
  background: rgba(63, 98, 164, 0.14) !important;
}
html[data-theme='light'] .bt-tab.active {
  background: rgba(63, 98, 164, 0.15);
}
html[data-theme='light'] .bt-heat-empty {
  background: rgba(176, 194, 228, 0.25);
  color: #6f7ea2;
}
html[data-theme='light'] .bt-heat-pos {
  color: #1f7a5f;
}
html[data-theme='light'] .bt-heat-neg {
  color: #9f2b44;
}
html[data-theme='light'] .bt-heat-flat {
  color: #2f4f8c;
}

.btn-ghost {
  border: 1px solid #5d2a3b;
  background: #2a1420;
  color: #ffc7d7;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}

html[data-theme='light'] .user-menu-btn-danger {
  border-color: #ce627c;
  background: rgba(206, 98, 124, 0.12);
  color: #a33957;
}
html[data-theme='light'] .btn-ghost {
  border-color: #ce627c;
  background: rgba(206, 98, 124, 0.12);
  color: #a33957;
}
html[data-theme='light'] .status-low {
  color: #255ea8;
}
html[data-theme='light'] .status-medium {
  color: #8d5b12;
}
html[data-theme='light'] .status-high {
  color: #97343f;
}
html[data-theme='light'] .timeline-type-pnl {
  color: #255ea8;
}
html[data-theme='light'] .timeline-type-day-close {
  color: #1f7a5f;
}
html[data-theme='light'] .timeline-type-payout {
  color: #8d5b12;
}
html[data-theme='light'] .timeline-type-neutral {
  color: #44608b;
}
html[data-theme='light'] .quick-actions-backdrop {
  background: rgba(16, 28, 52, 0.32);
}
html[data-theme='light'] .quick-actions-panel {
  border-color: #cfdbee;
  box-shadow: 0 24px 56px rgba(19, 32, 61, 0.2);
}
html[data-theme='light'] .quick-actions-head {
  border-bottom-color: #d6e1f4;
}
html[data-theme='light'] .quick-actions-head input {
  background: #ffffff;
  border-color: #cfdbee;
  color: #13203d;
}
html[data-theme='light'] .qa-item:hover,
html[data-theme='light'] .qa-item.active {
  border-color: #b8caea;
  background: rgba(63, 98, 164, 0.14);
}
html[data-theme='light'] .pnl-pos {
  color: #1f7a5f;
}
html[data-theme='light'] .pnl-neg {
  color: #a33957;
}

.task-done {
  color: var(--txt-3);
  text-decoration: line-through;
}
.pnl-pos { color: #8ff5c2; font-weight: 600; }
.pnl-neg { color: #ffb6c1; font-weight: 600; }

.toast {
  position: fixed;
  right: 14px;
  bottom: 14px;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  border: 1px solid;
  z-index: 99;
}
.toast.ok { background: #123229; color: #a4f1cf; border-color: #27624d; }
.toast.err { background: #341a21; color: #ffbecd; border-color: #7a3145; }

@media (max-width: 980px) {
  .app-layout { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 30; transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar.open { transform: translateX(0); }
  .topbar-menu-btn { display: inline-flex; }
  .dashboard-split { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .webhook-manage-grid { grid-template-columns: 1fr; }
  .calendar-toolbar { grid-template-columns: 1fr; }
  .calendar-manage-grid { grid-template-columns: 1fr; }
  .main-content { padding: 16px 14px 88px; }
  .mobile-bottom-nav {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 45;
    border: 1px solid var(--line);
    background: var(--chrome);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  }
  .help-guide-layout {
    grid-template-columns: 1fr;
  }
  .help-guide-list {
    max-height: 300px;
  }
  .help-guide-prose {
    max-height: 62vh;
    padding: 12px;
  }
  .help-guide-head {
    flex-direction: column;
  }
  .help-guide-meta {
    justify-items: start;
  }
  .action-modal-panel {
    margin: 60px auto 0;
    padding: 14px;
  }
  .action-modal-title {
    font-size: 16px;
  }
  .user-menu-panel {
    max-height: min(56vh, 420px);
  }
}

/* ===== New Feature Styles (v1.5) ===== */

/* Theme toggle button */
.theme-toggle-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 7px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.theme-toggle-btn:hover { background: var(--hover); color: var(--text); }

/* Streak badge */
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: .82rem;
  font-weight: 600;
}
.streak-badge.win  { background: rgba(87,211,140,.15); color: #57d38c; }
.streak-badge.loss { background: rgba(212,106,106,.15); color: #d46a6a; }
.streak-badge.neutral { background: var(--surface); color: var(--text-muted); }

/* Tag chips */
.tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px 2px;
  background: rgba(143,211,255,.12);
  color: #8fd3ff;
  border-radius: 20px;
  font-size: .74rem;
  margin: 1px 2px;
  white-space: nowrap;
}
.tag-chips-row { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }

/* Trade note expansion panel inline in journal */
.trade-row-expandable { cursor: pointer; }
.trade-row-expandable:hover td { background: var(--hover) !important; }
.trade-note-row > td {
  padding: 0 !important;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.note-expand-inner {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: fadeInDown 0.15s ease;
}
.note-expand-inner label { font-size: .8rem; color: var(--text-muted); margin-bottom: 2px; }
.note-expand-inner textarea {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  font-size: .84rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 8px;
  font-family: inherit;
  box-sizing: border-box;
}
.note-expand-inner textarea:focus { outline: 2px solid var(--accent); }
.note-expand-inner .tag-input-field {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: .82rem;
  background: var(--bg);
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
}
.note-expand-inner .tag-input-field:focus { outline: 2px solid var(--accent); }
.note-expand-actions { display: flex; gap: 8px; align-items: center; }

/* Open positions widget */
.open-positions-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  background: rgba(255,193,7,.12);
  color: #ffc107;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
}

/* Enhanced equity chart area fill */
.equity-chart-wrap { position: relative; }
.equity-chart-wrap svg.sparkline { display: block; }
.sparkline-area { fill-opacity: 0.12; }

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Calendar Month Grid (v1.6) ────────────────────────── */
.cal-view-toggle { display:flex; gap:4px; align-items:center; }
.cal-view-active { background:var(--accent,#2d7ef7) !important; color:#fff !important; border-color:transparent !important; }
.cal-grid-nav { display:flex; align-items:center; gap:12px; margin:14px 0 8px; }
.cal-month-grid { margin-top:4px; }
.cal-grid-row { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:2px; }
.cal-grid-header { margin-bottom:4px; }
.cal-grid-days { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-cell-hdr { text-align:center; font-weight:700; font-size:11px; padding:4px 2px; background:var(--surface2,#16243f); border-radius:4px; }
.cal-cell { min-height:72px; border:1px solid var(--border-color,#2a3553); border-radius:4px; padding:4px 5px; font-size:10px; overflow:hidden; }
.cal-cell-empty { min-height:72px; border:1px solid transparent; }
.cal-cell-today { border-color:var(--accent,#2d7ef7) !important; background:rgba(45,126,247,.09); }
.cal-day-num { font-weight:700; font-size:12px; margin-bottom:3px; }
.cal-cell-event { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:1px 0; line-height:1.3; }
.cal-cell-event .impact-badge { font-size:9px; padding:1px 3px; max-width:100px; display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; }
.cal-cell-more { font-size:10px; color:var(--muted-color,#8899bb); margin-top:2px; }

/* ── Backtest Compare (v1.6) ───────────────────────────── */
.bt-compare-active { outline:2px solid var(--accent,#2d7ef7); outline-offset:1px; }
.bt-compare-section { margin-top:12px; }
.bt-compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px; }
.bt-compare-col h4 { margin:0 0 6px; }
.bt-compare-better td { color:var(--positive,#2ecc71); }
.bt-compare-worse td { color:var(--negative,#e74c3c); }

/* ── Webhook Detail Modal (v1.6) ───────────────────────── */
.info-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:9000; display:flex; align-items:center; justify-content:center; padding:16px; }
.info-modal { background:var(--surface,#0f1e38); border:1px solid var(--border-color,#2a3553); border-radius:8px; max-width:600px; width:100%; max-height:80vh; overflow-y:auto; padding:20px 24px; position:relative; }
.info-modal h3 { margin:0 0 12px; }
.info-modal pre { background:var(--surface2,#16243f); border-radius:4px; padding:10px; font-size:12px; overflow-x:auto; white-space:pre-wrap; word-break:break-all; }
.info-modal-close { position:absolute; top:12px; right:14px; background:none; border:none; font-size:18px; cursor:pointer; color:var(--text-color,#cdd9f0); }

/* ── Pineify-inspired v1.7 features ───────────────────── */
/* Daily PnL chart (journal report) */
.daily-pnl-chart { width:100%; height:auto; display:block; overflow:visible; }

/* Tag pill */
.tag-pill { display:inline-block; padding:2px 8px; border-radius:12px; background:rgba(45,126,247,.15); color:var(--accent,#2d7ef7); font-size:11px; font-weight:600; }

/* Backtest histogram SVG chart */
.bt-hist-wrap { min-width:180px; }
.bt-hist-chart { width:100%; height:auto; display:block; }

/* MFE/MAE scatter */
.bt-scatter-wrap { padding:4px 0 8px; }
.bt-scatter-wrap h3 { margin:0 0 6px; }
.bt-scatter-chart { width:100%; max-width:320px; height:auto; display:block; }

/* === v1.7 Help: Usage sub-nav & Changelog === */
.usage-section-nav{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.usage-nav-btn{padding:6px 14px;border-radius:20px;border:1px solid var(--border-color);background:transparent;color:var(--text-color);cursor:pointer;font-size:12px;font-weight:600;transition:all .15s;}
.usage-nav-btn.active,.usage-nav-btn:hover{background:var(--accent,#2d7ef7);color:#fff;border-color:var(--accent,#2d7ef7);}
.usage-sect{display:none;}
.usage-sect.active{display:block;}

.changelog-list{display:flex;flex-direction:column;gap:12px;margin-top:8px;}
.changelog-entry{border:1px solid var(--border-color);border-radius:8px;padding:14px 18px;background:var(--surface2,rgba(255,255,255,.04));}
.changelog-header{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.changelog-ver{font-size:17px;font-weight:700;color:var(--text-color);}
.changelog-date{font-size:12px;color:var(--muted-color);margin-left:2px;}
.changelog-badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:11px;font-weight:700;}
.changelog-badge-new{background:#2d7ef7;color:#fff;}
.changelog-badge-feat{background:#22c55e;color:#fff;}
.changelog-badge-fix{background:#f59e0b;color:#1a1a1a;}
.changelog-badge-init{background:#8b5cf6;color:#fff;}
.changelog-entry ul{margin:0;padding-left:18px;}
.changelog-entry li{margin-bottom:4px;font-size:13px;line-height:1.55;}