/* Sobat WA: neutral, inset dashboard inspired by nuxt-shadcn-dashboard.
   Presentation only. Load AFTER styles.css; existing state classes and APIs stay intact. */
:root {
  --bg:#101012; --bg2:#18181b; --bg3:#222225; --sidebar-bg:#101012;
  --card:#18181b; --card-hover:#202023; --card-solid:#18181b;
  --border:#2b2b30; --border-hover:#45454c; --border-active:#71717a;
  --text:#f4f4f5; --text-dim:#c0c0c9; --text-muted:#ababB5;
  --accent:#f4f4f5; --accent2:#d4d4d8; --accent3:#e4e4e7;
  --accent-dim:#27272a; --accent-glow:transparent;
  --success:#4ade80; --warning:#facc15; --danger:#fb7185;
  --grad:linear-gradient(#f4f4f5,#f4f4f5);
  --grad2:linear-gradient(#e4e4e7,#e4e4e7);
  --grad-subtle:linear-gradient(#202023,#202023);
  --glass:#1d1d20; --glass2:#27272a;
  --shadow:0 12px 32px #0004; --shadow-sm:0 1px 2px #0002; --shadow-glow:none;
  --radius:12px; --radius-sm:8px; --radius-xs:6px;
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --font-heading:'Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
* { box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:var(--font); font-size:14px; }
::selection { background:#52525b; color:#fff; }
::-webkit-scrollbar { width:7px; height:7px; }
::-webkit-scrollbar-thumb { background:#3f3f46; border:2px solid var(--bg2); border-radius:8px; }
::-webkit-scrollbar-thumb:hover { background:#71717a; }
.bg-glow,.bg-glow-secondary { display:none; }
.sidebar {
  width:248px; background:var(--sidebar-bg); border:0;
  position:fixed; inset:0 auto 0 0; display:flex; flex-direction:column;
}
.sidebar-header { padding:24px 20px 16px; border:0; }
.sidebar-header .brand { display:flex; align-items:center; gap:10px; }
.sidebar-header .brand-icon {
  display:grid; place-items:center; width:34px; height:34px;
  border:1px solid var(--border); border-radius:9px; background:var(--card);
  font-size:20px; filter:grayscale(1);
}
.sidebar-header h2 {
  font:600 16px/1.4 var(--font); letter-spacing:-.4px;
  color:var(--text); background:none; -webkit-text-fill-color:currentColor;
}
.sidebar-header .subtitle { font-size:14px; color:var(--text-dim); margin:8px 0 16px; }
.instance-select-wrapper { margin-top:14px; }
#instanceSelect,#loginInstanceSelect {
  min-height:40px; padding:9px 12px; border-radius:8px;
  background:var(--card)!important; border:1px solid var(--border);
  color:var(--text)!important; font-size:14px!important; font-weight:500!important;
}
select,option,optgroup,select option {
  background:var(--bg2)!important; color:var(--text)!important; font-size:14px;
}
select option:hover,select option:focus,select option:checked { background:#3f3f46!important; color:#fff!important; }
.sidebar-nav { flex:1; min-height:0; overflow-y:auto; padding:0 12px 12px; }
.nav-label { padding:20px 10px 8px; font-size:14px; font-weight:500; text-transform:none; letter-spacing:0; color:var(--text-dim); opacity:1; }
.nav-item {
  display:flex; align-items:center; gap:10px; min-height:40px;
  margin-bottom:3px; padding:9px 10px; border-radius:7px;
  color:var(--text-dim); font-size:14px; cursor:pointer;
}
.nav-item::before { display:none; }
.nav-item:hover { background:#202023; color:var(--text); }
.nav-item.active { background:#27272a; color:var(--text); font-weight:500; box-shadow:inset 0 0 0 1px #ffffff08; }
.nav-item .icon { width:20px; font-size:17px; flex-shrink:0; filter:grayscale(1); opacity:.85; }
.nav-item.sub-item,.sidebar-sub-menu .nav-item { font-size:14px!important; }
.sidebar-sub-menu .nav-item.active { color:var(--text)!important; }
.sidebar-footer { padding:16px 20px; border-top:1px solid var(--border); }
.sidebar-footer .status { font-size:14px; color:var(--text-dim); }
.sidebar-footer .status .dot { background:var(--text-muted); box-shadow:none; animation:none; }
.sidebar-footer a { font-size:14px; color:var(--text-dim); }
#btnRestartBot { font-size:14px!important; min-height:32px; }
.main {
  margin:10px 10px 10px 248px; height:calc(100vh - 20px); height:calc(100dvh - 20px);
  padding:32px; background:#141416; border:1px solid var(--border); border-radius:14px;
  overflow-y:auto; min-width:0; scrollbar-gutter:stable;
}
.page-header { margin-bottom:28px; animation:none; }
.page-header h1 { font-size:28px; line-height:1.3; font-weight:600; letter-spacing:-.8px; color:var(--text); }
.page-header h1 .emoji { font-size:24px; filter:grayscale(1); }
.page-header p { font-size:16px; line-height:1.6; color:var(--text-dim); }
.hero-flex-container { gap:24px; margin-bottom:28px; align-items:stretch; animation:none; }
.hero-left { flex:1.2; padding:12px 0; }
.hero-right { flex:1; min-width:280px; }
.hero-badge {
  background:var(--bg3); border:1px solid var(--border); color:var(--text-dim);
  border-radius:6px; font-size:14px; font-weight:500; letter-spacing:0; margin-bottom:16px;
}
.dot-blink { background:var(--text-dim); animation:none; }
.hero-title { font-size:clamp(28px,3vw,40px); font-weight:600; line-height:1.15; letter-spacing:-1.3px; }
.accent-text-glow { background:none; color:var(--text); -webkit-text-fill-color:currentColor; filter:none; }
.hero-subtitle { font-size:16px; line-height:1.65; margin-bottom:24px; }
.hero-actions { gap:10px; margin-bottom:16px; }
.hero-info-footer { font-size:14px; color:var(--text-dim); }
.code-terminal-card { background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:none; }
.code-terminal-card:hover { border-color:var(--border-hover); box-shadow:none; }
.terminal-bar,.terminal-footer { background:var(--bg2); border-color:var(--border); }
.terminal-code-body { background:var(--bg); font-size:14px; color:var(--text-dim); }
.terminal-tab,.terminal-badge,.stat-lbl,.stat-val { font-size:14px; }
.code-url,.stat-val { color:var(--text); }
.code-response { color:var(--success); }
.footer-stat { border-color:var(--border); }
.overview-stats { gap:16px; margin-bottom:28px; }
.overview-stat-item,.stat-card,.card,.product-card,.image-card,.dashboard-hub-card,.product-manage-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:none; animation:none;
}
.overview-stat-item,.stat-card,.product-card { padding:20px; }
.card { padding:24px; margin-bottom:20px; }
.overview-stat-item:hover,.stat-card:hover,.card:hover,.product-card:hover,.image-card:hover,.dashboard-hub-card:hover {
  transform:none; border-color:var(--border-hover); box-shadow:none;
}
.overview-stat-item::before,.stat-card::after,.product-card::after,.dashboard-hub-card::before { display:none; }
.overview-stat-item .stat-icon { font-size:20px; filter:grayscale(1); margin-bottom:14px; }
.overview-stat-item .stat-value,.stat-card .value { font-size:30px; font-weight:600; letter-spacing:-1px; font-variant-numeric:tabular-nums; color:var(--text); }
.overview-stat-item .stat-label,.stat-card .label { font-size:14px; text-transform:none; letter-spacing:0; font-weight:500; }
.overview-stat-item .stat-sub,.stat-card .sub { font-size:14px; letter-spacing:0; text-transform:none; color:var(--text-dim); }
.overview-stat-item .stat-sub { padding:3px 8px; border-radius:6px; background:var(--bg3); }
.card-title,.section-title { font-size:18px; font-weight:600; letter-spacing:-.3px; color:var(--text); }
.catalog-pretitle,.product-label-badge,.pricing-label,.pricing-sub,.context-info,.footer-action-link,.product-id-path { font-size:14px; letter-spacing:0; text-transform:none; }
.catalog-main-title { font-size:24px; font-weight:600; }
.catalog-desc,.hub-desc { font-size:16px; }
.product-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); gap:16px; }
.product-card-title { font-size:18px; font-weight:600; }
.pricing-card { background:var(--bg); border-color:var(--border); border-radius:8px; }
.pricing-val { font-weight:600; font-size:18px; }
.product-card-footer { gap:12px; }
.card-status-pill { font-size:14px; font-weight:500; border-radius:6px; }
.card-status-pill.active { background:#123224; color:#86efac; }
.card-status-pill.active .status-dot { background:#4ade80; animation:none; }
.card-status-pill.inactive { background:var(--bg3); color:var(--text-dim); }
.hub-grid { gap:16px; margin-bottom:28px; }
.dashboard-hub-card { padding:20px; }
.dashboard-hub-card .hub-icon-wrapper {
  background:var(--bg3); color:var(--text); border:1px solid var(--border); border-radius:8px; width:40px; height:40px;
}
.dashboard-hub-card:hover .hub-icon-wrapper { background:#303036; color:var(--text); border-color:var(--border-hover); box-shadow:none; }
.dashboard-hub-card .hub-title { font-size:16px; font-weight:600; }
.dashboard-hub-card .hub-desc { font-size:14px; line-height:1.5; }
.btn { min-height:36px; padding:8px 14px; font-size:14px; font-weight:500; letter-spacing:0; border-radius:7px; border:1px solid transparent; box-shadow:none; }
.btn:hover,.btn-hero-primary:hover,.login-box button:hover { transform:none; box-shadow:none; }
.btn-primary,.btn-hero-primary { background:#f4f4f5; color:#18181b; box-shadow:none; }
.btn-primary:hover,.btn-hero-primary:hover { background:#d4d4d8; box-shadow:none; }
.btn-ghost,.btn-hero-secondary { background:var(--card); border-color:var(--border); color:var(--text); }
.btn-ghost:hover,.btn-hero-secondary:hover { background:var(--bg3); border-color:var(--border-hover); color:var(--text); }
.btn-sm { font-size:14px; padding:6px 10px; min-height:32px; }
.btn-success { background:#123224; border-color:#22553c; color:#86efac; }
.btn-danger { background:#341820; border-color:#612635; color:#fda4af; }
.btn:disabled,button:disabled { opacity:.5; cursor:not-allowed; }
:where(button,a,input,textarea,select,[tabindex]):focus-visible { outline:2px solid #a1a1aa; outline-offset:3px; }
textarea,.flow-step-content textarea,.flow-triggers-area,.flow-form-input,.form-group input,.fe-search-input,.fe-editor-textarea,.login-box input {
  background:var(--bg)!important; border:1px solid var(--border); color:var(--text);
  border-radius:8px; font-size:14px; line-height:1.6; box-shadow:none;
}
textarea:focus,.flow-step-content textarea:focus,.flow-form-input:focus,.form-group input:focus,.fe-search-input:focus,.login-box input:focus {
  border-color:#71717a; box-shadow:0 0 0 2px #71717a33;
}
.form-group label,.flow-meta-group label { font-size:14px; text-transform:none; letter-spacing:0; font-weight:500; }
.flow-card,.flow-step-card,.flow-accordion-header { background:var(--card); font-size:14px; }
.flow-step-card:hover,.flow-accordion-header:hover { background:var(--card-hover); border-color:var(--border-hover); }
.flow-card .step-num { background:var(--bg3); color:var(--text); border:1px solid var(--border); font-size:14px; }
.flow-card .type-badge,.flow-card .file-path,.flow-step-upload .file-name,.flow-step-actions .btn { font-size:14px; }
.flow-add-buttons { flex-wrap:wrap; }
.flow-add-buttons .btn { font-size:14px; }
.flow-step-image-preview img,.flow-step-video-preview video { max-width:100%; }
.text-file,.fe-header-card,.fe-table-card { border-color:var(--border); }
.text-file-body,.flow-accordion-body { font-size:14px; }
.history-table,.fe-table { font-size:14px; }
.history-table thead th,.fe-table th { font-size:14px; font-weight:500; letter-spacing:0; text-transform:none; background:var(--bg); }
.history-table tbody tr:hover,.fe-table tr:hover { background:var(--bg3); }
.fe-table tr { border-color:var(--border); }
.fe-table-card { overflow-x:auto; }
.fe-file-name,.fe-breadcrumbs,.fe-btn-icon,.fe-crumb { font-size:14px; }
.fe-search-box { min-width:min(100%,220px); }
.fe-item-actions { min-width:max-content; }
.upload-zone { border:1px dashed #52525b; background:var(--card); padding:32px; }
.upload-zone:hover,.upload-zone.dragover { background:var(--bg3); border-color:#a1a1aa; }
.upload-zone .hint,.image-card .info .name,.image-card .info .size,.product-manage-detail p { font-size:14px; }
.image-card:hover img { transform:none; }
.badge,.tag { font-size:14px; background:var(--bg3); color:var(--text); }
.broadcast-stat-mini { background:var(--bg); }
.broadcast-stat-mini .label { font-size:14px; text-transform:none; letter-spacing:0; }
.terminal-console { background:#101012; color:#d4d4d8; border-color:var(--border); box-shadow:none; font-size:14px; }
.futuristic-date-selector { background:var(--bg); }
.date-option { font-size:14px; font-weight:500; }
.date-option.active { background:#3f3f46; color:#fff!important; box-shadow:none; }
.futuristic-date-input { background:var(--bg)!important; color:var(--text)!important; font-size:14px; color-scheme:dark; }
.futuristic-date-input::-webkit-calendar-picker-indicator { filter:none; }
.bar-chart .bar { background:#a1a1aa; box-shadow:none; border-radius:4px 4px 0 0; }
.bar-chart .bar:hover { box-shadow:none; }
.bar-chart .bar-label,.bar-chart .bar-value { font-size:14px; }
.slider { background:#3f3f46; }
input:checked + .slider { background:#f4f4f5; }
.modal-overlay { padding:16px; background:#0009; backdrop-filter:blur(4px); }
.modal-box { background:var(--card-solid); border:1px solid var(--border); border-radius:12px; max-height:calc(100dvh - 32px); overflow-y:auto; box-shadow:var(--shadow); }
.modal-box::before,.login-box::before,.login-box::after { display:none; }
.modal-header { padding:20px 24px; }
.modal-header h3 { font-size:18px; font-weight:600; }
.modal-body,.sync-modal-body { padding:24px; }
.sync-progress-container { background:var(--bg); }
.sync-progress-bar { background:#d4d4d8; box-shadow:none; }
.sync-progress-text,.sync-step-item,.sync-step-num,.sync-log-area { font-size:14px; }
.toast { background:var(--card-solid); box-shadow:var(--shadow); backdrop-filter:none; border-radius:8px; max-width:calc(100vw - 32px); }
.toast.success { background:var(--card-solid); border:1px solid #22553c; color:#86efac; }
.toast.error { background:var(--card-solid); border:1px solid #612635; color:#fda4af; }
.login-box { background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-sm); backdrop-filter:none; padding:40px; animation:none; }
.login-box .logo { filter:grayscale(1); font-size:40px; }
.login-box h1 { font-size:24px; font-weight:600; }
.login-box p { font-size:16px; }
.login-box button { background:#f4f4f5; color:#18181b; font-weight:500; letter-spacing:0; }
.login-error { font-size:14px; }
.mobile-header { background:var(--sidebar-bg); border-color:var(--border); }
.brand-mobile>span:first-child { filter:grayscale(1); }
.sidebar-overlay { background:#0009; backdrop-filter:blur(2px); }
.back-btn,.empty-state p { font-size:14px; }
@media (max-width:1100px) {
  .main { padding:24px; }
  .hero-flex-container { flex-direction:column; }
  .hero-right { min-width:0; width:100%; }
  .overview-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px) {
  .sidebar { width:280px; z-index:100; transform:translateX(-100%); transition:transform .2s ease; }
  .sidebar.open { transform:translateX(0); }
  .main { margin:56px 0 0; height:calc(100vh - 56px); height:calc(100dvh - 56px); padding:24px 16px; border:0; border-radius:0; }
  .mobile-header { display:flex; }
  .page-header h1 { font-size:24px; }
  .hero-title { font-size:30px; }
  .hero-actions { flex-wrap:wrap; }
  .overview-stats,.stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .overview-stat-item,.stat-card { padding:16px; }
  .card { padding:18px; }
  .product-grid,.broadcast-grid { grid-template-columns:minmax(0,1fr); }
  .flow-card { flex-wrap:wrap; }
  .flow-card .file-path { overflow-wrap:anywhere; }
  .product-manage-card { flex-wrap:wrap; gap:16px; padding:16px; }
  .product-manage-actions { flex-wrap:wrap; }
  .modal-box { margin:0; max-width:100%; }
  .modal-header,.modal-body,.sync-modal-body { padding:18px; }
  .fe-editor-modal { width:100%!important; }
  .fe-editor-textarea { height:50dvh; }
  .history-table { display:block; overflow-x:auto; }
  .flow-meta-grid,.delay-inputs-group { grid-template-columns:minmax(0,1fr); }
  .login-box { padding:32px 24px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}