/* WebOffice Dashboard Pro — bahasa desain sama dengan auth-pro.
   Murni aditif: tidak menghapus utility lama. Dark mode via .theme-dark. */
:root {
  --wd-primary: #7e3af2;
  --wd-primary-dark: #5b21b6;
  --wd-accent: #0694a2;
  --wd-ink: #1a1c23;
  --wd-muted: #707275;
  --wd-line: #e9e8f2;
  --wd-card: #ffffff;
  --wd-soft: #f6f5ff;
  --wd-field: #ffffff;
}
.theme-dark {
  --wd-ink: #f4f5f7;
  --wd-muted: #9e9e9e;
  --wd-line: #2e3138;
  --wd-card: #1a1c23;
  --wd-soft: #22242c;
  --wd-field: #24262d;
}
/* ---- dashboard filter row (label + control side by side) ---- */
.wo-filterrow { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; max-width: 420px; }
.wo-filterrow > span { font-size: 12.5px; font-weight: 700; color: var(--wd-ink); white-space: nowrap; }
.wo-filterrow .wo-input { margin: 0 !important; }
/* ---- form fields (dashboard-wide, theme-aware) ---- */
.wo-field { display: block; margin-bottom: 14px; }
.wo-field > span { display: block; font-size: 12.5px; font-weight: 700; color: var(--wd-ink); margin-bottom: 7px; }
.wo-input, select.wo-input, textarea.wo-input {
  width: 100%; box-sizing: border-box;
  font-size: 13.5px; color: var(--wd-ink);
  background: var(--wd-field);
  border: 1.5px solid var(--wd-line);
  border-radius: 12px;
  padding: 11px 13px;
  transition: border-color .15s, box-shadow .15s;
}
.wo-input::placeholder { color: #a0aec0; }
.wo-input:focus {
  outline: none; border-color: var(--wd-primary);
  box-shadow: 0 0 0 4px rgba(126, 58, 242, .15);
}
/* ---- page head ---- */
.wo-pagehead { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 26px 0 18px; }
.wo-pagehead h2 { font-size: 26px; font-weight: 800; color: var(--wd-ink); margin: 0; letter-spacing: -.2px; }
.wo-hello { font-size: 13.5px; color: var(--wd-muted); margin: 4px 0 0; }
.wo-hello strong { color: var(--wd-ink); }
/* ---- stat cards ---- */
.wo-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.wo-stat {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  background: var(--wd-card); border: 1px solid var(--wd-line);
  border-radius: 16px; padding: 16px 18px;
  box-shadow: 0 10px 22px -14px rgba(76, 29, 149, .25);
}
.wo-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--wd-primary), var(--wd-accent)); }
.wo-stat-ic {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}
.wo-stat-ic.teal { background: linear-gradient(135deg, #14b8a6, #0e7490); }
.wo-stat-ic.amber { background: linear-gradient(135deg, #f59e0b, #b45309); }
.wo-stat-ic svg { width: 22px; height: 22px; }
.wo-stat-tx small { display: block; font-size: 11px; font-weight: 700;
  letter-spacing: .7px; text-transform: uppercase; color: var(--wd-muted); }
.wo-stat-tx b { font-size: 20px; font-weight: 800; color: var(--wd-ink); }
.wo-pill { display: inline-block; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 4px 12px; }
.wo-pill.ok { color: #046c4e; background: #def7ec; }
.theme-dark .wo-pill.ok { color: #31c48d; background: rgba(49,196,141,.14); }
.wo-pill.warn { color: #b43403; background: #feecdc; }
.theme-dark .wo-pill.warn { color: #ff5a1f; background: rgba(255,90,31,.14); }
.wo-pill.info { color: #1e429f; background: #e1effe; }
.theme-dark .wo-pill.info { color: #76a9fa; background: rgba(118,169,250,.14); }
/* ---- verify banner ---- */
.wo-banner-warn {
  background: linear-gradient(120deg, #b45309 0%, #92400e 60%, #78350f 100%) !important;
  color: #fef3c7 !important;
  box-shadow: 0 14px 26px -14px rgba(180, 83, 9, .6) !important;
}
.wo-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border: none !important; border-radius: 16px !important;
  background: linear-gradient(120deg, #7e3af2 0%, #6d28d9 60%, #4c1d95 100%) !important;
  box-shadow: 0 14px 26px -14px rgba(126, 58, 242, .6) !important;
}
.wo-banner a { background: rgba(255,255,255,.16); border-radius: 10px; padding: 8px 14px; }
.wo-banner a:hover { background: rgba(255,255,255,.28); }
/* ---- engine cards ---- */
.wo-engrid { display: grid; gap: 24px; margin-bottom: 2rem; }
@media (min-width: 768px) { .wo-engrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wo-card {
  position: relative; overflow: hidden;
  background: var(--wd-card); border: 1px solid var(--wd-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 34px -20px rgba(26, 28, 35, .25) !important;
  transition: transform .15s, box-shadow .15s;
}
.wo-card:hover { transform: translateY(-2px);
  box-shadow: 0 24px 40px -20px rgba(76, 29, 149, .35) !important; }
.wo-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--wd-primary), var(--wd-accent)); }
.wo-eng-top { display: flex; align-items: center; gap: 16px; }
.wo-eng-ic {
  flex-shrink: 0; width: 62px; height: 62px; border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wd-soft); border: 1px solid var(--wd-line);
}
.wo-eng-ic img { max-width: 40px; max-height: 40px; }
.wo-eng-ic svg { width: 26px; height: 26px; color: var(--wd-accent); }
.wo-eng-name { font-size: 15px; font-weight: 800; color: var(--wd-ink); margin: 0 0 10px; }
.wo-btn-sm {
  display: inline-block; font-size: 13px; font-weight: 800; color: #fff !important;
  padding: 9px 20px; border-radius: 11px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
  box-shadow: 0 10px 18px -10px rgba(126, 58, 242, .7);
  transition: transform .12s, filter .12s;
}
button.wo-btn-sm:hover, .wo-btn-sm:hover { filter: brightness(1.07); transform: translateY(-1px); }
.wo-btn-sm[disabled], .wo-btn-sm.disabled { filter: grayscale(.4); opacity: .75; cursor: not-allowed; transform: none; }
.wo-chartbox { background: var(--wd-soft); border: 1px solid var(--wd-line);
  border-radius: 14px; padding: 14px 16px; margin-top: 6px; }
.wo-chartbox canvas { max-height: 240px; }
/* ---- fixed-height chart area: never collapse ---- */
.wo-chartwrap { position: relative; height: 260px; margin-top: 8px; }
.wo-chartwrap canvas { max-height: none !important; }
/* ---- engine card header: icon + name + button, always aligned ---- */
.wo-eng-card { padding: 18px !important; }
.wo-eng-head { display: flex; align-items: center; gap: 14px; }
.wo-eng-meta { flex: 1; min-width: 0; }
.wo-eng-name { font-size: 15px; font-weight: 800; color: var(--wd-ink); margin: 0 0 10px !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-eng-meta .wo-btn-sm { margin: 0; }
/* ---- custom chart legend: compact grid, click to toggle ---- */
.wo-legend { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; margin-top: 12px; }
@media (max-width: 1100px) { .wo-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wo-legend-item {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  background: transparent; border: none; cursor: pointer; padding: 3px 4px; border-radius: 8px;
  font-size: 12px; font-weight: 600; color: var(--wd-muted); text-align: left;
}
.wo-legend-item:hover { background: var(--wd-soft); color: var(--wd-ink); }
.wo-legend-item.off { opacity: .35; }
.wo-legend-item span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-legend-swatch { flex-shrink: 0; width: 14px; height: 14px; border-radius: 4px; }
/* ---- sidebar & headmenu polish (override finit) ---- */
aside .wo-side-label { font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--wd-muted); padding: 18px 24px 6px; }
header .wo-balance-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700;
  background: var(--wd-soft); border: 1px solid var(--wd-line);
  border-radius: 999px; padding: 6px 13px; color: var(--wd-ink);
}
header .wo-balance-pill svg { width: 16px; height: 16px; color: var(--wd-primary); }
@media (max-width: 900px) { .wo-stats { grid-template-columns: 1fr; } }

/* ---- sidebar chrome ---- */
.wo-sidebar { background: var(--wd-card); border-right: 1px solid var(--wd-line); }
.wo-side-brand { padding: 22px 22px 6px; }
.wo-side-brand a { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.wo-logo { width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #8b5cf6, #5b21b6);
  box-shadow: 0 10px 18px -8px rgba(126, 58, 242, .6); }
.wo-logo img { width: 30px; height: 30px; object-fit: contain; }
.wo-word { font-size: 19px; font-weight: 800; color: var(--wd-ink); line-height: 1.1; }
.wo-word em { display: block; font-style: normal; font-size: 9.5px; font-weight: 800;
  letter-spacing: 2.2px; color: var(--wd-muted); }
.wo-side-label { font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--wd-muted); padding: 20px 26px 8px; }
.wo-navlist { list-style: none; margin: 0; padding: 0 14px; display: grid; gap: 4px; }
.wo-navlist > li { position: relative; }
.wo-nav {
  display: flex; align-items: center; gap: 12px;
  font-size: 13.5px; font-weight: 600; color: var(--wd-muted);
  padding: 10px 14px; border-radius: 12px; text-decoration: none;
  transition: background .15s, color .15s, box-shadow .15s;
  border: none; background: transparent; width: 100%; cursor: pointer; text-align: left;
}
.wo-nav:hover { background: var(--wd-soft); color: var(--wd-ink); }
button.wo-nav { font-family: inherit; }
.wo-nav-active, .wo-nav-active:hover {
  color: #fff !important;
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important;
  box-shadow: 0 10px 18px -10px rgba(126, 58, 242, .7);
}
.wo-nav-ic { flex-shrink: 0; width: 20px; height: 20px; display: inline-flex; }
.wo-nav-ic svg { width: 20px; height: 20px; }
.wo-nav-ic img { width: 20px; height: 20px; object-fit: contain; }
.wo-nav span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-chev { margin-left: auto; width: 16px; height: 16px; opacity: .7; }
.wo-chev svg { width: 16px; height: 16px; }
.wo-dot { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.wo-dot.on { background: #0e9f6e; box-shadow: 0 0 0 3px rgba(14,159,110,.2); }
.wo-dot.off { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.wo-lock { position: absolute; inset: 0; border-radius: 12px; background: rgba(0,0,0,.45); cursor: not-allowed; }
span.wo-nav.is-disabled { opacity: .65; cursor: not-allowed; }
span.wo-nav.is-disabled:hover { background: transparent; color: var(--wd-muted); }
.wo-soon { margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--wd-primary);
  background: rgba(126,58,242,.12); border: 1px solid rgba(126,58,242,.35);
  padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.wo-sub { list-style: none; margin: 6px 0 0; padding: 4px; display: grid; gap: 2px;
  background: var(--wd-soft); border: 1px solid var(--wd-line); border-radius: 12px; }
.wo-sub a { display: block; font-size: 13px; font-weight: 600; color: var(--wd-muted);
  padding: 8px 12px 8px 44px; border-radius: 9px; text-decoration: none; }
.wo-sub a:hover { color: var(--wd-primary); background: rgba(126,58,242,.08); }
.wo-usercard {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 14px 10px; padding: 12px;
  background: var(--wd-soft); border: 1px solid var(--wd-line); border-radius: 14px;
}
.wo-avatar {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #5b21b6);
}
.wo-avatar.sm { width: 36px; height: 36px; }
.wo-uinfo { min-width: 0; flex: 1; }
.wo-uinfo strong { display: block; font-size: 12.5px; color: var(--wd-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-uinfo .wo-pill { font-size: 10px; padding: 2px 8px; }
.wo-logout {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--wd-muted); background: transparent; border: 1px solid var(--wd-line); cursor: pointer;
  transition: color .15s, border-color .15s;
}
.wo-logout:hover { color: #e02424; border-color: #e02424; }
.wo-logout svg { width: 16px; height: 16px; }
/* ---- topbar chrome ---- */
.wo-top { background: var(--wd-card); border-bottom: 1px solid var(--wd-line); }
.wo-search input { border-radius: 12px !important; }
.wo-iconbtn {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--wd-muted); border-radius: 11px; transition: background .15s, color .15s;
}
.wo-iconbtn:hover { background: var(--wd-soft); color: var(--wd-primary); }
.wo-drop {
  background: var(--wd-card); border: 1px solid var(--wd-line); border-radius: 14px;
  box-shadow: 0 20px 36px -18px rgba(26,28,35,.35);
  color: var(--wd-ink);
}
.wo-drop-head { display: flex; align-items: center; gap: 10px; padding: 8px; }
.wo-drop-id { min-width: 0; }
.wo-drop-id strong { display: block; font-size: 13px; color: var(--wd-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-drop-id span { display: block; font-size: 11.5px; color: var(--wd-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-logoutlink:hover { color: #e02424 !important; }
button.wo-logoutlink { background: transparent; border: none; width: 100%; text-align: left; cursor: pointer; font-family: inherit; }
.wo-foot {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap;
  margin: 0; padding: 12px 24px;
  border-top: 1px solid var(--wd-line);
  font-size: 12px; color: var(--wd-muted);
}
.wo-foot nav { display: flex; gap: 16px; flex-wrap: wrap; }
.wo-foot nav a { color: var(--wd-muted); text-decoration: none; font-weight: 600; }
.wo-foot nav a:hover { color: var(--wd-primary); }
/* Pricing plans — single source of truth (syncfusion page + top-up page). */
.wo-plans { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: stretch; margin-top: 4px; }
.wo-plan { --plan: #8b5cf6; border: 1px solid var(--plan) !important; text-align: center; }
.wo-plan-bronze { --plan: #8b4513; }
.wo-plan-silver { --plan: #a9a9a9; }
.wo-plan-gold { --plan: #ffa500; }
.wo-plan > h4 { color: var(--plan) !important; }
.wo-plan-price { font-size: 15px; color: var(--wd-ink); font-weight: 600; }
.wo-plan-btn { display: inline-block; padding: 4px; border: none; border-radius: 6px; background-color: var(--plan); line-height: 0; cursor: pointer; }
.wo-plan-btn img { height: 30px; width: auto; }

/* ---- wizard steps (syncfusion) ---- */
.wo-step {
  background: var(--wd-card); border: 1px solid var(--wd-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 34px -22px rgba(26, 28, 35, .28) !important;
  padding: 26px 28px !important;
}
.wo-step h4 { font-size: 16px; font-weight: 800; color: var(--wd-ink); margin: 0 0 10px; }
.wo-step p { font-size: 13.5px; line-height: 1.65; color: var(--wd-muted); margin: 0 0 14px; }
.wo-step p a { color: var(--wd-primary); font-weight: 700; }
.wo-step .form-input { border-radius: 12px !important; padding: 12px 14px !important; font-size: 14px !important; }
.wo-step .relative { margin-top: 6px; }
/* ---- documentation section (engine pages) ---- */
.wo-doc-head { margin: 14px 0 0; }
.wo-doc-head h3 { font-size: 20px; font-weight: 800; color: var(--wd-ink); margin: 0 0 4px; letter-spacing: -.2px; }
.wo-doc-head p { font-size: 13px; color: var(--wd-muted); margin: 0; }
.wo-doc-h { font-size: 11.5px; font-weight: 800; color: var(--wd-muted); text-transform: uppercase; letter-spacing: .08em; margin: 18px 0 8px; }
.wo-doc-list { margin: 8px 0 0; padding-left: 20px; font-size: 13.5px; line-height: 1.8; color: var(--wd-muted); }
.wo-doc-list li { margin-bottom: 5px; }
.wo-step code { background: var(--wd-soft); border: 1px solid var(--wd-line); border-radius: 6px; padding: 1px 6px; font-size: 12px; color: var(--wd-ink); }
.wo-doc-flow { font-size: 12.5px; line-height: 2.05; color: var(--wd-muted); margin: 6px 0 0; }
.wo-doc-code { background: var(--wd-soft); border: 1px solid var(--wd-line); border-radius: 10px; padding: 12px 14px; font-size: 12px; line-height: 1.7; color: var(--wd-ink); overflow-x: auto; margin: 8px 0 0; }
/* ---- tab pills (usage / balance) ---- */
.wo-tabs { gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.wo-tabs > div { margin-right: 2px; }
.wo-tabs button { text-transform: capitalize; border-radius: 12px !important; font-weight: 700 !important; }
.wo-tabs button:not(.opacity-50) {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
  box-shadow: 0 10px 18px -10px rgba(126, 58, 242, .7);
}
/* ---- data tables ---- */
.wo-table {
  background: var(--wd-card); border: 1px solid var(--wd-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 34px -22px rgba(26, 28, 35, .28) !important;
  overflow: hidden;
}
.wo-table thead tr { background: var(--wd-soft) !important; }
.wo-table thead th { font-size: 11px; letter-spacing: .8px; padding: 14px 16px !important; }
.wo-table tbody td { padding: 13px 16px !important; font-size: 13px; }
.wo-table tbody tr { transition: background .12s; }
.wo-table tbody tr:hover { background: rgba(126, 58, 242, .05); }
.theme-dark .wo-table tbody tr:hover { background: rgba(126, 58, 242, .12); }
.wo-table nav button { border-radius: 9px !important; font-weight: 700; }
.wo-table nav button:hover { background: var(--wd-soft); }

.wo-claim-note { font-size: 12px; color: var(--wd-muted); margin: 8px 0 0; }
/* ---- api key list: max ~5 items, then scroll ---- */
.wo-keylist { max-height: 560px; overflow-y: auto; padding-right: 6px; }
.wo-keylist .wo-ticket:last-child { margin-bottom: 2px; }
/* ---- key action buttons: single horizontal row ---- */
.wo-keyactions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.wo-keyactions .wo-claim-note { margin: 0; }

/* ---- support tickets ---- */
.wo-ticket { border: 1px solid var(--wd-line); border-radius: 12px; padding: 12px 14px;
  margin-bottom: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.wo-ticket:hover { border-color: var(--wd-primary); }
.wo-ticket.active { border-color: var(--wd-primary); background: var(--wd-soft); }
.wo-ticket-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wo-ticket-top strong { font-size: 13px; color: var(--wd-ink); }
.wo-ticket-top .wo-pill { white-space: nowrap; flex-shrink: 0; }
.wo-ticket small { font-size: 11.5px; color: var(--wd-muted); }
.wo-thread { display: grid; gap: 10px; margin: 14px 0; max-height: 380px; overflow-y: auto; }
.wo-msg { background: var(--wd-soft); border: 1px solid var(--wd-line);
  border-radius: 12px; padding: 10px 14px; font-size: 13px; color: var(--wd-ink); }
.wo-msg small { display: block; font-size: 11px; color: var(--wd-muted); margin-bottom: 4px; }
.wo-msg p { margin: 0; line-height: 1.6; white-space: pre-wrap; }
.wo-msg.staff { border-color: var(--wd-primary); background: rgba(126,58,242,.07); }

/* ---- search palette + misc ---- */
.wo-search-drop { z-index: 30; max-height: 380px; overflow-y: auto; }
.wo-search-row {
  display: block; font-size: 13px; font-weight: 600; color: var(--wd-ink);
  padding: 8px 10px; border-radius: 9px; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wo-search-row:hover { background: var(--wd-soft); color: var(--wd-primary); }
.wo-spin-dark { border-color: rgba(126,58,242,.3); border-top-color: #7e3af2; }
/* ---- floating helpdesk ---- */
.wo-help { position: fixed; right: 22px; bottom: 22px; z-index: 40; }
.wo-help-fab {
  position: relative; width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  box-shadow: 0 16px 30px -10px rgba(126, 58, 242, .7);
  transition: transform .12s;
}
.wo-help-fab:hover { transform: translateY(-2px); }
.wo-help-fab svg { width: 26px; height: 26px; }
.wo-help-dot { position: absolute; top: 4px; right: 4px; width: 11px; height: 11px;
  border-radius: 50%; background: #0e9f6e; border: 2px solid #fff; }
.wo-help-panel {
  position: absolute; right: 0; bottom: 68px; width: 330px; max-width: calc(100vw - 44px);
  background: var(--wd-card); border: 1px solid var(--wd-line); border-radius: 18px;
  box-shadow: 0 28px 50px -20px rgba(26,28,35,.45); overflow: hidden;
}
.wo-help-head { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff; }
.wo-help-head strong { display: block; font-size: 14px; }
.wo-help-head span { font-size: 11.5px; opacity: .85; }
.wo-help-head button { background: rgba(255,255,255,.16); border: none; color: #fff;
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; }
.wo-help-search { margin: 12px 12px 4px !important; width: calc(100% - 24px) !important; }
.wo-help-list { max-height: 300px; overflow-y: auto; padding: 8px 12px; display: grid; gap: 8px; }
.wo-help-item { background: var(--wd-soft); border: 1px solid var(--wd-line);
  border-radius: 12px; padding: 10px 12px; }
.wo-help-item strong { display: block; font-size: 12.5px; color: var(--wd-ink); margin-bottom: 3px; }
.wo-help-item p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--wd-muted); }
.wo-help-ticket { display: block; text-align: center; margin: 4px 12px 6px; text-decoration: none; }
.wo-help-ai { font-size: 11px; color: var(--wd-muted); text-align: center; padding: 0 12px 12px; }
/* ---- helpdesk AI chat ---- */
.wo-help-chat { border-top: 1px solid var(--wd-line); padding: 10px 12px 12px; }
.wo-chat-thread { display: grid; gap: 8px; max-height: 220px; overflow-y: auto; margin-bottom: 10px; }
.wo-chat-thread:empty { display: none; }
.wo-chat-row { display: flex; gap: 8px; }
.wo-chat-row .wo-input { flex: 1; margin: 0 !important; }
.wo-chat-row .wo-btn-sm { flex-shrink: 0; }

/* ---- busy buttons ---- */
.wo-spin {
  display: inline-block; width: 14px; height: 14px; margin-right: 8px;
  vertical-align: -2px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: wo-rot .7s linear infinite;
}
@keyframes wo-rot { to { transform: rotate(360deg); } }
button.wo-busy, .wo-busy { opacity: .8; cursor: wait !important; }
.wo-auth .wo-btn .wo-spin { border-color: rgba(255,255,255,.4); border-top-color: #fff; }

/* ---- finance console ---- */
.wo-pill.danger { color: #9b1c1c; background: #fde8e8; }
.theme-dark .wo-pill.danger { color: #f98080; background: rgba(249,128,128,.14); }
.wo-pill.muted { color: #4b5563; background: #f3f4f6; }
.theme-dark .wo-pill.muted { color: #9ca3af; background: rgba(156,163,175,.12); }
.wo-fin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.wo-fin-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.wo-fin-filters .wo-input { width: auto; min-width: 150px; margin: 0 !important; }
.wo-fin-filters input[type="search"] { flex: 1 1 260px; min-width: 220px; }
.wo-fin-reset { font-size: 13px; font-weight: 700; color: var(--wd-muted); text-decoration: none; }
.wo-fin-reset:hover { color: var(--wd-primary); }
.wo-fin-txn { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--wd-primary); font-weight: 700; text-decoration: none; }
.wo-fin-txn:hover { text-decoration: underline; }
.wo-fin-table { table-layout: fixed; width: 100%; }
.wo-fin-table th, .wo-fin-table td { overflow: hidden; text-overflow: ellipsis; }
.wo-table.wo-fin-table thead th { padding-left: 10px !important; padding-right: 10px !important; }
.wo-table.wo-fin-table tbody td { padding-left: 10px !important; padding-right: 10px !important; }
.wo-fin-table .wo-pill { white-space: nowrap; }
.wo-fin-ellipsis { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-fin-actions { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; font-weight: 700; }
.wo-fin-actions a { color: var(--wd-primary); text-decoration: none; }
.wo-fin-actions a:hover { text-decoration: underline; }
.wo-fin-pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; font-size: 12px; color: var(--wd-muted); }
.wo-fin-pager nav { display: flex; gap: 6px; }
.wo-fin-pager nav a { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--wd-line); text-decoration: none; color: var(--wd-ink); font-weight: 700; }
.wo-fin-pager nav a.active { background: var(--wd-primary); color: #fff; border-color: var(--wd-primary); }
.wo-fin-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.wo-fin-kv { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px dashed var(--wd-line); font-size: 13px; }
.wo-fin-kv:last-child { border-bottom: 0; }
.wo-fin-kv span { color: var(--wd-muted); }
.wo-fin-kv b { text-align: right; font-weight: 700; color: var(--wd-ink); }
.wo-fin-form { margin-top: 16px; display: grid; gap: 12px; max-width: 680px; }
.wo-fin-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--wd-ink); }
.wo-fin-check input { margin-top: 3px; }
.wo-fin-preview { background: var(--wd-soft); border: 1px solid var(--wd-line); border-radius: 12px; padding: 10px 14px; font-size: 13px; color: var(--wd-ink); }
.wo-fin-warn { background: #feecdc; border: 1px solid #fbd5b5; color: #b43403; border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.55; }
.theme-dark .wo-fin-warn { background: rgba(255,90,31,.1); border-color: rgba(255,90,31,.25); color: #ffb59a; }
.wo-flash { border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.5; margin-bottom: 18px; border: 1px solid transparent; }
.wo-flash.ok { background: #def7ec; color: #046c4e; border-color: #bcf0da; }
.theme-dark .wo-flash.ok { background: rgba(49,196,141,.12); color: #31c48d; border-color: rgba(49,196,141,.25); }
.wo-flash.info { background: #e1effe; color: #1e429f; border-color: #c3ddfd; }
.theme-dark .wo-flash.info { background: rgba(118,169,250,.12); color: #76a9fa; border-color: rgba(118,169,250,.25); }
.wo-flash.error { background: #fde8e8; color: #9b1c1c; border-color: #f8b4b4; }
.theme-dark .wo-flash.error { background: rgba(249,128,128,.12); color: #f98080; border-color: rgba(249,128,128,.25); }
.wo-fin-events { display: grid; gap: 14px; }
.wo-fin-event { display: flex; gap: 12px; align-items: flex-start; }
.wo-fin-event-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--wd-primary); margin-top: 6px; flex-shrink: 0; box-shadow: 0 0 0 4px rgba(126,58,242,.12); }
.wo-fin-event-reason { font-size: 12.5px; color: var(--wd-muted); margin-top: 3px; }
@media (max-width: 1100px) { .wo-fin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .wo-fin-detail { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .wo-fin-stats { grid-template-columns: 1fr; } }