/* ── THEME VARIABLES ─────────────────────────────────── */
:root {
  /* Widgemo navbar color */
  --nav-bg: #2b2d3a;
  --nav-border: #3c3e50;
  --nav-text: #fff;
  --nav-sub: rgba(255,255,255,.6);
  --nav-div: rgba(255,255,255,.2);
  --nav-tab-bg: rgba(255,255,255,.12);
  --nav-tab-border: rgba(255,255,255,.2);
  --nav-tab-text: rgba(255,255,255,.8);
  --nav-tab-active-bg: #fff;
  --nav-tab-active-text: #2b2d3a;
  --nav-btn-border: rgba(255,255,255,.35);
  --nav-btn-text: rgba(255,255,255,.85);

  /* Light mode (default) */
  --bg: #fdf3e3;
  --surface: #fff8f0;
  --surface2: #fdefd8;
  --surface3: #fae3c0;
  --border: #f0d9b0;
  --border2: #e8c990;
  --accent: #e8604a;
  --accent2: #3cbfbf;
  --warn: #f5a623;
  --danger: #c0392b;
  --text: #3d2b1a;
  --text2: #7a5c3a;
  --text3: #b08050;
  --input-bg: #fdf3e3;
  --input-border: #e8c990;
  --tag-bg: #fae3c0;
  --tag-text: #7a5c3a;
  --sep: #f0d9b0;
  --scrollbar: #f0d9b0;
  --chart-bg: #fdf3e3;
  --svg-bg: #fdf9f4;
  --svg-lane-alt: rgba(232,96,74,0.03);
  --svg-grid: #f0d9b0;
  --svg-label: #7a5c3a;
  --svg-node-fill: #fff8f0;
  --svg-desc: #5a3e28;
  --svg-actor: #fff;
  --list-item-bg: #fff8f0;
  --list-item-border: #e8c990;
  --list-item-ts: #b08050;
  --list-item-desc: #2c1a0e;
  --list-item-sys: #7a5c3a;
  --list-item-int: #b08050;
  --datetime-scheme: light;
  --toast-bg: #fff8f0;
  --toast-border: #e8c990;
  --toast-shadow: rgba(150,80,20,.2);
  --empty-icon-bg: #fff8f0;
  --empty-h3: #7a5c3a;
}

html.dark {
  --bg: #13111e;
  --surface: #1c1a2e;
  --surface2: #242038;
  --surface3: #2e2a46;
  --border: #3a3560;
  --border2: #4a4575;
  --accent: #f07060;
  --accent2: #45d0d0;
  --warn: #f5a623;
  --danger: #e05555;
  --text: #ccc8e8;
  --text2: #a8a0cc;
  --text3: #7870aa;
  --input-bg: #1c1a2e;
  --input-border: #3a3560;
  --tag-bg: #2e2a46;
  --tag-text: #a8a0cc;
  --sep: #3a3560;
  --scrollbar: #3a3560;
  --chart-bg: #13111e;
  --svg-bg: #13111e;
  --svg-lane-alt: rgba(240,112,96,0.04);
  --svg-grid: #2a2545;
  --svg-label: #a8a0cc;
  --svg-node-fill: #1c1a2e;
  --svg-desc: #c8c0f0;
  --svg-actor: #fff;
  --list-item-bg: #1c1a2e;
  --list-item-border: #3a3560;
  --list-item-ts: #7870aa;
  --list-item-desc: #e8e2ff;
  --list-item-sys: #a8a0cc;
  --list-item-int: #7870aa;
  --datetime-scheme: dark;
  --toast-bg: #242038;
  --toast-border: #3a3560;
  --toast-shadow: rgba(0,0,0,.5);
  --empty-icon-bg: #1c1a2e;
  --empty-h3: #a8a0cc;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;transition:background .25s,color .25s}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* ── BANNER ──────────────────────────────────────────── */
.banner{background:var(--nav-bg);border-bottom:1px solid var(--nav-border);
  padding:0 24px;height:68px;display:flex;align-items:center;gap:16px;
  position:sticky;top:0;z-index:100;box-shadow:0 2px 16px rgba(0,0,0,.3)}
.banner::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15) 30%,rgba(255,255,255,.15) 70%,transparent)}
.logo-mark{width:42px;height:42px;border-radius:10px;flex-shrink:0;overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.3)}
.logo-mark img{width:42px;height:42px;display:block;object-fit:cover}
.brand{display:flex;flex-direction:column;gap:1px}
.brand-name{font-family:'Nunito',sans-serif;font-size:1.45rem;font-weight:900;letter-spacing:-.02em;
  color:var(--nav-text);text-shadow:0 1px 4px rgba(0,0,0,.2);line-height:1}
.brand-sub{font-family:'DM Mono',monospace;font-size:.62rem;color:var(--nav-sub);
  letter-spacing:.08em;text-transform:uppercase}
.bdiv{width:1px;height:28px;background:var(--nav-div);margin:0 4px;flex-shrink:0}
.mode-tabs{display:flex;gap:3px;background:var(--nav-tab-bg);border:1px solid var(--nav-tab-border);
  border-radius:9px;padding:3px}
.mode-tab{font-family:'Nunito',sans-serif;font-size:.8rem;font-weight:700;padding:5px 14px;border-radius:7px;
  border:none;cursor:pointer;background:transparent;color:var(--nav-tab-text);transition:all .2s;
  display:flex;align-items:center;gap:5px;white-space:nowrap}
.mode-tab:hover{color:var(--nav-text);background:rgba(255,255,255,.15)}
.mode-tab.active{background:var(--nav-tab-active-bg);color:var(--nav-tab-active-text);
  box-shadow:0 2px 8px rgba(0,0,0,.2)}
.mode-tab svg{width:13px;height:13px}
.banner-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.nav-btn{display:inline-flex;align-items:center;gap:6px;font-family:'Nunito',sans-serif;
  font-size:.8rem;font-weight:700;padding:5px 14px;border-radius:7px;border:1px solid var(--nav-btn-border);
  background:transparent;color:var(--nav-btn-text);cursor:pointer;transition:all .2s;white-space:nowrap}
.nav-btn svg{width:13px;height:13px;flex-shrink:0}
.nav-btn:hover{background:rgba(255,255,255,.15);color:#fff}

/* theme toggle button */
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:8px;border:1px solid var(--nav-btn-border);background:transparent;
  cursor:pointer;color:var(--nav-btn-text);transition:all .2s;flex-shrink:0}
.theme-btn:hover{background:rgba(255,255,255,.15);color:#fff}
.theme-btn svg{width:16px;height:16px}

/* ── LAYOUT ──────────────────────────────────────────── */
.app-layout{display:grid;grid-template-columns:360px 1fr;height:calc(100vh - 68px)}

/* ── SIDEBAR ─────────────────────────────────────────── */
.sidebar{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;transition:background .25s,border-color .25s}
.sidebar-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--surface2);transition:background .25s}
.sidebar-tab{flex:1;padding:11px 4px;font-family:'Nunito',sans-serif;font-size:.73rem;font-weight:700;
  text-align:center;cursor:pointer;background:transparent;border:none;color:var(--text3);
  border-bottom:2px solid transparent;transition:all .2s;letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-tab:hover{color:var(--text2)}
.sidebar-tab.active{color:var(--accent);border-bottom-color:var(--accent);background:rgba(232,96,74,.04)}
.sidebar-panel{display:none;flex-direction:column;overflow-y:auto;flex:1;padding:18px;gap:14px}
.sidebar-panel.active{display:flex}

/* ── FORM ────────────────────────────────────────────── */
.fg{display:flex;flex-direction:column;gap:5px}
.fl{font-family:'DM Mono',monospace;font-size:.68rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text3)}
input[type=text],input[type=number],input[type=datetime-local],select,textarea{
  width:100%;padding:8px 11px;background:var(--input-bg);border:1px solid var(--input-border);
  border-radius:10px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:.875rem;
  outline:none;transition:border-color .2s,box-shadow .2s,background .25s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,96,74,.14)}
select option{background:var(--surface2)}
input::placeholder{color:var(--text3)}
input[type=datetime-local]{color-scheme:var(--datetime-scheme)}
.ts-field.hidden{display:none!important}

/* ── BUTTONS ─────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:'Nunito',sans-serif;font-size:.83rem;font-weight:700;padding:8px 14px;
  border-radius:10px;border:none;cursor:pointer;transition:all .2s;white-space:nowrap}
.btn svg{width:14px;height:14px;flex-shrink:0}
.btn-p{background:linear-gradient(135deg,var(--accent),#c04535);color:#fff;
  box-shadow:0 2px 10px rgba(232,96,74,.3)}
.btn-p:hover{transform:translateY(-1px);box-shadow:0 4px 18px rgba(232,96,74,.45)}
.btn-s{background:var(--surface2);color:var(--text2);border:1px solid var(--border)}
.btn-s:hover{background:var(--surface3);color:var(--text)}
.btn-g{background:transparent;color:var(--nav-btn-text);border:1px solid var(--nav-btn-border);
  font-size:.76rem;padding:5px 11px}
.btn-g:hover{background:rgba(255,255,255,.15);color:#fff}
.btn-outline{background:transparent;color:var(--text2);border:1px solid var(--border);font-size:.76rem;padding:5px 11px}
.btn-outline:hover{background:var(--surface3);color:var(--text);border-color:var(--accent)}
.btn-d{background:rgba(192,57,43,.1);color:var(--danger);border:1px solid rgba(192,57,43,.2);
  font-size:.73rem;padding:4px 9px}
.btn-d:hover{background:rgba(192,57,43,.2)}
.btn-full{width:100%}.btn-sm{font-size:.73rem;padding:5px 10px}
.btn-row{display:flex;gap:8px}

/* ── SECTION HEADERS ─────────────────────────────────── */
.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.st{font-family:'Nunito',sans-serif;font-size:.82rem;font-weight:800;color:var(--text3);
  text-transform:uppercase;letter-spacing:.06em}

/* ── INTERACTION BLOCKS ──────────────────────────────── */
.iblock{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:11px;
  display:flex;flex-direction:column;gap:9px;position:relative;transition:background .25s}
.iblock::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  border-radius:3px 0 0 3px;background:linear-gradient(180deg,var(--accent),var(--accent2))}
.ih{display:flex;align-items:center;justify-content:space-between}
.il{font-family:'DM Mono',monospace;font-size:.68rem;color:var(--accent);text-transform:uppercase;letter-spacing:.08em}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* ── INTERACTION REORDER ─────────────────────────────── */
.iblock-header-left{display:flex;align-items:center;gap:7px}
.reorder-btns{display:flex;flex-direction:column;gap:2px}
.reorder-btn{width:20px;height:13px;background:var(--surface3);border:1px solid var(--border);
  border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--text3);transition:all .15s;padding:0;font-size:9px;line-height:1}
.reorder-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.iblock .seq-badge{display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;border-radius:10px;background:var(--accent);color:#fff;
  font-family:'DM Mono',monospace;font-size:.68rem;font-weight:800;flex-shrink:0;padding:0 5px}
/* ── INTERACTION REORDER ─────────────────────────────── */
.iblock-header-left{display:flex;align-items:center;gap:8px}
.reorder-btns{display:flex;flex-direction:column;gap:1px}
.reorder-btn{width:20px;height:14px;background:var(--surface3);border:1px solid var(--border);
  border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--text3);transition:all .15s;padding:0;font-size:9px;line-height:1}
.reorder-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.iblock .seq-badge{display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;
  font-family:'DM Mono',monospace;font-size:.65rem;font-weight:700;flex-shrink:0}


/* ── EVENT LIST ──────────────────────────────────────── */
.elist{display:flex;flex-direction:column;gap:5px}
.eitem{background:var(--surface2);border:1px solid var(--border);border-radius:10px;
  padding:9px 11px;cursor:pointer;transition:all .15s;position:relative;overflow:hidden}
.eitem::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--border);transition:background .2s}
.eitem:hover{border-color:var(--accent);background:var(--surface3)}
.eitem:hover::before,.eitem.sel::before{background:var(--accent)}
.eitem.sel{border-color:var(--accent);background:rgba(232,96,74,.06)}
.edesc{font-size:.83rem;font-weight:600;color:var(--text);margin-bottom:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emeta{font-family:'DM Mono',monospace;font-size:.68rem;color:var(--text3);display:flex;gap:6px;flex-wrap:wrap}
.etag{background:var(--tag-bg);padding:1px 6px;border-radius:4px;color:var(--tag-text)}
.elevel-info{background:rgba(60,191,191,.18);color:#2a9d8f;font-weight:700}
.elevel-warning{background:rgba(245,166,35,.18);color:#c47c00;font-weight:700}
.elevel-error{background:rgba(232,96,74,.18);color:#e8604a;font-weight:700}
.elevel-debug{background:rgba(119,136,170,.15);color:#5566aa;font-weight:700}
html.dark .elevel-info{background:rgba(69,208,208,.15);color:#45d0d0}
html.dark .elevel-warning{background:rgba(245,176,48,.15);color:#f5b030}
html.dark .elevel-error{background:rgba(240,112,96,.15);color:#f07060}
html.dark .elevel-debug{background:rgba(136,153,200,.12);color:#99aacc}
.eacts{display:flex;gap:5px;margin-top:7px}

/* ── CHART PANE ──────────────────────────────────────── */
.cpane{background:var(--chart-bg);overflow:auto;display:flex;flex-direction:column;transition:background .25s}
.ctbar{background:var(--surface);border-bottom:1px solid var(--border);padding:9px 18px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex-shrink:0;transition:background .25s}
.tlbl{font-family:'DM Mono',monospace;font-size:.68rem;color:var(--text3);
  text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.tsel{background:var(--input-bg);border:1px solid var(--input-border);color:var(--text);
  padding:4px 9px;border-radius:7px;font-size:.78rem;font-family:'DM Sans',sans-serif;
  outline:none;cursor:pointer;transition:background .25s}
.tsel:focus{border-color:var(--accent)}
.tz-select{max-width:180px;text-overflow:ellipsis}
.tchk{display:flex;align-items:center;gap:5px;font-size:.78rem;color:var(--text2);
  cursor:pointer;white-space:nowrap}
.tchk input{accent-color:var(--accent);cursor:pointer}
.tdiv{width:1px;height:18px;background:var(--border);margin:0 2px}
.cvport-wrap{position:relative;flex:1;overflow:hidden;display:flex;flex-direction:column}
.cvport{flex:1;overflow:auto;padding:20px;background:var(--chart-bg);transition:background .25s}
/* Floating diagram sliders */
.diag-vslider-wrap{position:absolute;right:44px;top:50%;transform:translateY(-50%);
  z-index:150;display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:auto}
.diag-hslider-wrap{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  z-index:150;display:flex;flex-direction:row;align-items:center;gap:3px;pointer-events:auto}
.diag-vslider-wrap.diag-slider-hidden,.diag-hslider-wrap.diag-slider-hidden{display:none}
.diag-vslider{writing-mode:vertical-lr;direction:rtl;height:140px;width:20px;
  cursor:pointer;accent-color:var(--accent);opacity:.65;transition:opacity .15s}
.diag-hslider{width:140px;height:20px;cursor:pointer;accent-color:var(--accent);opacity:.65;transition:opacity .15s}
.diag-vslider:hover,.diag-hslider:hover{opacity:1}
#diagram-legend{position:absolute;top:12px;right:12px;background:var(--surface);border:1px solid var(--border);
  border-radius:9px;padding:8px 12px;z-index:200;display:flex;flex-direction:column;gap:5px;
  box-shadow:0 2px 12px rgba(0,0,0,.15);transition:background .25s,border-color .25s,opacity .25s}
#diagram-legend.legend-hidden{display:none}
#diagram-legend.legend-table-hidden{display:none}
#diagram-legend.legend-dim{opacity:.2;border-color:transparent}
.leg-item{display:flex;align-items:center;gap:8px}
.leg-line{display:inline-block;width:18px;border-bottom:2px solid currentColor;flex-shrink:0}
.leg-line-proc{border-style:dashed}
.leg-label{font-family:'DM Mono',monospace;font-size:.7rem;color:var(--text2);white-space:nowrap}
#legend-toggle-btn.active{background:var(--surface3);border-color:var(--accent);color:var(--accent)}
#tl-reverse-btn.active{background:var(--surface3);border-color:var(--accent);color:var(--accent)}
.sbanner{font-family:'Nunito',sans-serif;font-size:1.1rem;font-weight:800;color:var(--text2);
  text-align:center;padding:0 0 10px;letter-spacing:-.01em}
.sbanner .ssub{font-family:'DM Mono',monospace;font-size:.62rem;color:var(--text3);
  text-transform:uppercase;letter-spacing:.1em;font-weight:400;display:block;margin-top:2px}
.estate{display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;min-height:380px;gap:14px;color:var(--text3)}
.estate-icon{width:60px;height:60px;background:var(--empty-icon-bg);border:1px solid var(--border);
  border-radius:14px;display:flex;align-items:center;justify-content:center;opacity:.8}
.estate-icon svg{width:30px;height:30px}
.estate h3{font-family:'Nunito',sans-serif;font-size:.95rem;color:var(--empty-h3);font-weight:700}
.estate p{font-size:.83rem;text-align:center;max-width:270px;line-height:1.6}

/* ── MODE INDICATOR ──────────────────────────────────── */
.mind{display:inline-flex;align-items:center;gap:5px;font-family:'DM Mono',monospace;font-size:.63rem;
  text-transform:uppercase;letter-spacing:.08em;padding:3px 9px;border-radius:6px;font-weight:500}
.mind.tl{background:rgba(232,96,74,.12);color:var(--accent);border:1px solid rgba(232,96,74,.25)}
.mind.fl{background:rgba(60,191,191,.12);color:var(--accent2);border:1px solid rgba(60,191,191,.3)}
.mind.tb{background:rgba(140,100,220,.12);color:var(--text2);border:1px solid rgba(140,100,220,.25)}
.mdot{width:6px;height:6px;border-radius:50%;background:currentColor;
  animation:pd 2s ease-in-out infinite}
@keyframes pd{0%,100%{opacity:1}50%{opacity:.4}}

/* ── TOAST ───────────────────────────────────────────── */
.toast{position:fixed;bottom:22px;right:22px;background:var(--toast-bg);
  border:1px solid var(--toast-border);border-radius:12px;padding:11px 15px;
  font-size:.83rem;color:var(--text);z-index:9999;box-shadow:0 8px 32px var(--toast-shadow);
  opacity:0;transform:translateY(8px);transition:all .3s;max-width:300px;
  display:flex;align-items:center;gap:9px}
.toast.show{opacity:1;transform:translateY(0)}
.sep{height:1px;background:var(--sep);margin:2px 0}

/* ── INLINE ADD FORM (systems/actors) ───────────────── */
.inline-add-form{background:var(--surface2);border:1px solid var(--border);
  border-radius:10px;padding:11px;display:flex;flex-direction:column;gap:8px;
  margin-top:4px;border-left:3px solid var(--accent2)}
/* ── DRAG AND DROP ───────────────────────────────────── */
.eitem.dragging{opacity:.4}
.eitem.drag-over{border-color:var(--accent);background:rgba(232,96,74,.1)}
.drag-handle{cursor:grab;margin-right:6px;color:var(--text3);font-size:.85rem;user-select:none}
.drag-handle:active{cursor:grabbing}

.hint{font-size:.7rem;color:var(--text3);line-height:1.5}
.req{color:var(--accent1);margin-left:2px}

/* ── ABOUT MODAL ─────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9998;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:32px 28px 28px;max-width:320px;width:90%;position:relative;text-align:center;
  box-shadow:0 12px 48px rgba(0,0,0,.4);transition:background .25s,border-color .25s}
.modal-close{position:absolute;top:10px;right:12px;background:transparent;border:none;
  cursor:pointer;color:var(--text3);font-size:1rem;line-height:1;padding:4px 6px;
  border-radius:6px;transition:color .2s,background .2s}
.modal-close:hover{color:var(--text);background:var(--surface3)}
.about-logo{width:56px;height:56px;border-radius:12px;overflow:hidden;margin:0 auto 12px;
  box-shadow:0 2px 12px rgba(0,0,0,.25)}
.about-logo img{width:56px;height:56px;display:block;object-fit:cover}
.about-title{font-family:'Nunito',sans-serif;font-size:1.5rem;font-weight:900;
  color:var(--text);letter-spacing:-.02em;margin-bottom:2px}
.about-sub{font-family:'DM Mono',monospace;font-size:.65rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--text3);margin-bottom:16px}
.about-version{font-size:.85rem;color:var(--text2);margin-bottom:6px}
.about-version strong{color:var(--accent);font-family:'DM Mono',monospace}
.about-copy{font-size:.82rem;color:var(--text3);margin-bottom:14px}
.about-copy a{color:var(--text2);text-decoration:none}
.about-copy a:hover{color:var(--accent)}
.about-link{display:inline-block;font-family:'Nunito',sans-serif;font-size:.82rem;font-weight:700;
  color:var(--accent);border:1px solid rgba(232,96,74,.35);border-radius:8px;
  padding:6px 18px;text-decoration:none;transition:all .2s}
.about-link:hover{background:rgba(232,96,74,.1);border-color:var(--accent)}

/* ── FILTER BAR ──────────────────────────────────────── */
.filter-toggle-btn{display:inline-flex;align-items:center;gap:5px;position:relative}
.filter-toggle-active{border-color:var(--accent)!important;color:var(--accent)!important}
.filter-badge{display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;border-radius:999px;font-size:.6rem;
  font-weight:800;min-width:16px;height:16px;padding:0 4px;margin-left:2px;
  font-family:'DM Mono',monospace;line-height:1}
.fbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:7px 18px;flex-shrink:0;transition:background .25s}
.fbar.fbar-hidden{display:none}
.fsearch{background:var(--input-bg);border:1px solid var(--input-border);color:var(--text);
  padding:5px 10px;border-radius:8px;font-size:.78rem;font-family:'DM Sans',sans-serif;
  outline:none;width:220px;flex-shrink:0;transition:background .25s,border-color .2s}
.fsearch:focus{border-color:var(--accent)}
.fbar-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1}
.fbar-clear{margin-left:auto;flex-shrink:0}

/* Multichoice dropdown */
.fdd{position:relative}
.fdd-btn{background:var(--surface2);border:1px solid var(--border);color:var(--text2);
  padding:4px 9px;border-radius:8px;font-size:.75rem;font-family:'DM Sans',sans-serif;
  cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;
  transition:border-color .2s,color .2s,background .2s}
.fdd-btn:hover{border-color:var(--accent2);color:var(--text)}
.fdd-btn-active{border-color:var(--accent)!important;color:var(--accent)!important;
  background:rgba(232,96,74,.08)!important}
.fdd-count{background:var(--accent);color:#fff;border-radius:999px;font-size:.6rem;
  font-weight:800;min-width:16px;height:16px;padding:0 4px;display:inline-flex;
  align-items:center;justify-content:center;font-family:'DM Mono',monospace}
.fdd-arrow{font-size:.6rem;opacity:.7;margin-left:1px}
.fdd-panel{position:absolute;top:calc(100% + 5px);left:0;z-index:500;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:8px 4px;min-width:160px;max-height:240px;overflow-y:auto;
  box-shadow:0 8px 32px rgba(0,0,0,.18);
  display:none;flex-direction:column;gap:1px}
.fdd-panel.fdd-open{display:flex}
.fdd-opt{display:flex;align-items:center;gap:8px;padding:5px 10px;cursor:pointer;
  border-radius:7px;font-size:.8rem;color:var(--text);white-space:nowrap;
  transition:background .15s}
.fdd-opt:hover{background:var(--surface2)}
.fdd-opt input{accent-color:var(--accent);cursor:pointer;flex-shrink:0}
.fdd-empty{font-size:.75rem;color:var(--text3);padding:6px 10px;font-style:italic}

/* ── DATA SOURCE INTEGRATION ─────────────────────────────── */
/* Status dot */
.ds-dot{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--text3);vertical-align:middle;margin-right:5px;flex-shrink:0}
.ds-dot.connected{background:#2ecc71}

/* Banner button wrapper + dropdown */
.ds-banner-wrap{position:relative}
.ds-nav-btn{position:relative}
.ds-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:600;
  background:var(--nav-bg);border:1px solid var(--nav-div);border-radius:10px;
  padding:5px 4px;min-width:180px;box-shadow:0 8px 32px rgba(0,0,0,.35);
  display:flex;flex-direction:column;gap:1px}
.ds-menu-item{display:flex;align-items:center;gap:8px;padding:7px 12px;
  background:transparent;border:none;color:var(--nav-text);cursor:pointer;
  border-radius:7px;font-size:.8rem;font-family:'DM Sans',sans-serif;
  transition:background .15s;white-space:nowrap;text-align:left}
.ds-menu-item svg{width:13px;height:13px;flex-shrink:0;opacity:.75}
.ds-menu-item:hover{background:rgba(255,255,255,.12)}
.ds-menu-danger{color:#ff7b7b}
.ds-menu-danger:hover{background:rgba(255,80,80,.12)}
.ds-menu-divider{height:1px;background:var(--nav-div);margin:3px 8px}

/* Config modal */
.ds-config-card{max-width:440px;text-align:left}
.ds-config-card .about-title{text-align:left}
.ds-config-card .about-sub{text-align:left}

/* Panel */
.ds-panel-header{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;flex-wrap:wrap;gap:6px}
.ds-status-bar{display:flex;align-items:center;gap:4px;font-size:.72rem}
.ds-status-text{color:var(--text3)}
.ds-status-text strong{color:var(--text2)}

/* Results */
.ds-result-list{display:flex;flex-direction:column;gap:5px}
.ds-result-item{background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;padding:7px 10px;display:flex;flex-direction:column;gap:4px;
  transition:border-color .2s}
.ds-result-item.ds-imported{opacity:.55;border-color:var(--accent2)}
.ds-result-desc{font-size:.78rem;color:var(--text);font-weight:500;line-height:1.3}
.ds-result-meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.ds-result-sys{font-size:.67rem;background:var(--tag-bg);color:var(--tag-text);
  border-radius:4px;padding:1px 6px;font-family:'DM Mono',monospace}
.ds-result-actor{font-size:.67rem;color:var(--text3);font-family:'DM Mono',monospace}
.ds-result-ts{font-size:.66rem;color:var(--text3);margin-left:auto}
.ds-add-btn{align-self:flex-start;margin-top:2px}

/* ── CONFIRM MODAL ───────────────────────────────────── */
.confirm-card{max-width:360px;text-align:center}
.confirm-title{font-family:'Nunito',sans-serif;font-size:1.05rem;font-weight:800;color:var(--text);margin:0 0 10px}
.confirm-msg{font-size:.88rem;color:var(--text2);margin:0 0 22px;line-height:1.55}
.confirm-btns{display:flex;gap:10px;justify-content:center}

/* ── TABLE SELECTION ─────────────────────────────────── */
.tbl-sel-bar{display:flex;align-items:center;gap:10px;padding:7px 12px;
  background:var(--surface2);border-bottom:1px solid var(--border);
  font-size:.8rem;color:var(--text2);flex-shrink:0}
.tbl-sel-count{font-family:'DM Mono',monospace;font-weight:700;color:var(--accent)}
.tbl-row-sel{background:rgba(232,96,74,.07)!important}
html.dark .tbl-row-sel{background:rgba(240,112,96,.07)!important}