*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --cyan:#06B6D4;
  --cyan-dim:#06B6D410;
  --cyan-b:#06B6D430;
  --cyan-hover:#0891B2;
  /* SQL editor token colors */
  --sql-kw:#0891B2;
  --sql-str:#16a34a;
  --sql-num:#d97706;
  --sql-cmt:#94A3B8;
  --sql-op:#7c3aed;
  --sql-fn:#be185d;
  /* ── Radius scale ── */
  --r-sm:4px; --r:6px; --r-md:8px; --r-lg:10px; --r-xl:12px;
  /* ── Spacing scale ── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  /* ── Font scale ── */
  --f-xs:10px; --f-sm:11px; --f-base:13px; --f-md:14px; --f-lg:15px; --f-xl:16px;
  /* ── Semantic colors ── */
  --c-success:#22c55e; --c-success-bg:#f0fdf4; --c-success-bd:#bbf7d0; --c-success-tx:#166534;
  --c-danger:#ef4444;  --c-danger-bg:#fef2f2;  --c-danger-bd:#fecaca;  --c-danger-tx:#991b1b;
  --c-warning:#f59e0b; --c-warning-bg:#fffbeb; --c-warning-bd:#fde68a; --c-warning-tx:#92400e;
  --c-info:#3b82f6;    --c-info-bg:#eff6ff;    --c-info-bd:#bfdbfe;    --c-info-tx:#1e40af;
}
[data-theme=dark]{
  --sql-kw:#22d3ee;
  --sql-str:#4ade80;
  --sql-num:#fb923c;
  --sql-cmt:#666666;
  --sql-op:#a78bfa;
  --sql-fn:#f472b6;
  --c-success-bg:#052e16; --c-success-bd:#166534; --c-success-tx:#4ade80;
  --c-danger-bg:#450a0a;  --c-danger-bd:#991b1b;  --c-danger-tx:#f87171;
  --c-warning-bg:#431407; --c-warning-bd:#92400e; --c-warning-tx:#fbbf24;
  --c-info-bg:#172554;    --c-info-bd:#1e40af;    --c-info-tx:#93c5fd;
}

[data-theme=light]{
  --bg:#fafafa;
  --bg2:#f5f5f5;
  --sur:#ffffff;
  --sur2:#fafafa;
  --bd:#e5e5e5;
  --bd2:#d4d4d4;
  --tx:#111111;
  --tx2:#666666;
  --mu:#999999;
  --shadow:0 1px 3px rgba(0,0,0,.05);
  --shadow-md:0 4px 8px rgba(0,0,0,.07);
  --shadow-lg:0 8px 24px rgba(0,0,0,.10);
}

[data-theme=dark]{
  --bg:#000000;
  --bg2:#0a0a0a;
  --sur:#111111;
  --sur2:#1a1a1a;
  --bd:#282828;
  --bd2:#3a3a3a;
  --tx:#ededed;
  --tx2:#888888;
  --mu:#555555;
  --shadow:none;
  --shadow-md:none;
  --shadow-lg:0 0 0 1px rgba(255,255,255,.06),0 8px 24px rgba(0,0,0,.8);
}

html,body{height:100%;overflow:hidden;font-family:'Inter',sans-serif;font-weight:400;background:var(--bg);color:var(--tx);transition:background .3s,color .3s;}
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
*:focus{outline:none;}
*:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px;}

/* ── Scrollbars ─────────────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--mu);}

/* ── Empty state component ──────────────────────────────────────── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 24px;gap:10px;text-align:center;}
.empty-state-icon{color:var(--bd2);margin-bottom:2px;}
.empty-state-title{font-size:14px;font-weight:600;color:var(--tx);line-height:1.3;}
.empty-state-desc{font-size:12.5px;color:var(--mu);max-width:280px;line-height:1.55;}
.empty-state .btn{margin-top:4px;}

/* ── Skeleton shimmer ───────────────────────────────────────────── */
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel{background:linear-gradient(90deg,var(--bd) 25%,var(--bg2) 50%,var(--bd) 75%);background-size:200% 100%;animation:shimmer 1.5s ease infinite;border-radius:var(--r);}

/* ===================== LOGIN ===================== */
#login-screen{
  position:fixed;inset:0;z-index:9999;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  animation:fadeIn .4s ease;
}

.login-container{
  width:400px;
  animation:slideUp .4s ease;
}

.login-brand{
  text-align:center;
  margin-bottom:32px;
}

.login-orbit{
  font-size:42px;
  font-weight:700;
  letter-spacing:-2px;
  color:var(--tx);
  line-height:1;
}

.login-orbit span{color:var(--cyan);}


.login-card{
  background:var(--sur);
  border:1px solid var(--bd);
  border-radius:10px;
  padding:32px;
  box-shadow:var(--shadow-lg);
}

.login-title{font-size:18px;font-weight:600;margin-bottom:6px;}
.login-sub{font-size:13px;color:var(--tx2);margin-bottom:24px;}

.login-field{margin-bottom:16px;}
.login-field label{display:block;font-size:11px;font-weight:600;color:var(--tx2);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px;}
.login-field input{
  width:100%;background:var(--bg2);border:1px solid var(--bd);
  border-radius:6px;padding:11px 14px;color:var(--tx);
  font-family:'Inter',sans-serif;font-size:14px;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.login-field input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-dim);}

.login-btn{
  width:100%;padding:12px;border-radius:6px;border:none;
  background:var(--cyan);color:#fff;font-family:'Inter',sans-serif;
  font-size:14px;font-weight:600;cursor:pointer;
  transition:all .2s;margin-top:8px;
  position:relative;overflow:hidden;
}
.login-btn:hover{background:var(--cyan-hover);}
.login-btn:active{transform:translateY(0);}

/* ===================== SETUP WIZARD ===================== */
#setup-wizard{
  position:fixed;inset:0;z-index:10000;
  background:var(--bg);
  display:none;align-items:center;justify-content:center;
  animation:fadeIn .4s ease;
}
.wz-container{width:440px;animation:slideUp .4s ease;}
.wz-brand{text-align:center;margin-bottom:28px;}
.wz-card{background:var(--sur);border:1px solid var(--bd);border-radius:10px;padding:32px;box-shadow:var(--shadow-lg);}
.wz-steps{display:flex;gap:6px;margin-bottom:24px;}
.wz-dot{flex:1;height:3px;border-radius:2px;background:var(--bd);transition:background .3s;}
.wz-dot.active{background:var(--cyan);}
.wz-title{font-size:17px;font-weight:600;margin-bottom:4px;}
.wz-sub{font-size:13px;color:var(--tx2);margin-bottom:22px;}
.wz-field{margin-bottom:14px;}
.wz-field label{display:block;font-size:11px;font-weight:600;color:var(--tx2);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px;}
.wz-field input{
  width:100%;background:var(--bg2);border:1px solid var(--bd);
  border-radius:6px;padding:11px 14px;color:var(--tx);
  font-family:'Inter',sans-serif;font-size:14px;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.wz-field input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-dim);}
.wz-err{font-size:12px;color:#ef4444;margin-bottom:12px;display:none;}
.wz-err.show{display:block;}
.wz-foot{display:flex;gap:8px;margin-top:20px;}
.wz-btn-p{flex:1;}
.wz-btn-s{}

/* ===================== ADMIN PANEL ===================== */
#admin-panel{display:none;width:100vw;height:100vh;flex-direction:column;background:var(--bg);}
#admin-panel.visible{display:flex;}
.adm-header{height:52px;border-bottom:1px solid var(--bd);display:flex;align-items:center;padding:0 20px;gap:12px;background:var(--sur);flex-shrink:0;}
.adm-header-logo{height:28px;width:auto;}
.adm-badge{font-size:9px;font-weight:600;color:var(--mu);background:var(--bg2);border:1px solid var(--bd);border-radius:4px;padding:2px 7px;text-transform:uppercase;letter-spacing:.8px;}
.adm-layout{flex:1;display:flex;overflow:hidden;}
.adm-sidebar{width:220px;min-width:220px;box-shadow:1px 0 0 var(--bd),2px 0 8px rgba(0,0,0,.04);display:flex;flex-direction:column;background:var(--bg2);overflow:hidden;}
.adm-sb-top{padding:14px 10px;}
.adm-sb-section{padding:14px 10px 4px;font-size:9px;font-weight:600;color:var(--mu);text-transform:uppercase;letter-spacing:1.5px;}
.adm-sb-list{flex:1;overflow-y:auto;padding:4px 10px;scrollbar-width:none;}
.adm-sb-list::-webkit-scrollbar{display:none;}
.adm-sb-footer{padding:10px 10px;border-top:1px solid var(--bd);}
.adm-sb-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--r-md);cursor:pointer;font-size:13px;font-weight:500;color:var(--tx2);transition:background .15s,color .15s;user-select:none;margin-bottom:1px;position:relative;}
.adm-sb-item:hover{background:var(--sur);color:var(--tx);}
.adm-sb-item.selected{background:var(--cyan-dim);color:var(--cyan);font-weight:600;}
.adm-sb-item.selected::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:2.5px;height:16px;background:var(--cyan);border-radius:2px;}
.adm-sb-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.adm-sb-dot.active{background:#22c55e;}
.adm-sb-dot.suspended{background:#f59e0b;}
.adm-main{flex:1;overflow-y:auto;padding:20px 24px;}
.adm-page-title{font-size:20px;font-weight:700;letter-spacing:-.4px;margin-bottom:3px;}
.adm-page-sub{font-size:13px;color:var(--tx2);margin-bottom:20px;}
.adm-section-title{font-size:11px;font-weight:600;color:var(--mu);text-transform:uppercase;letter-spacing:.8px;margin:28px 0 12px;}
.adm-card{background:var(--sur);border:1px solid var(--bd);border-radius:10px;overflow:hidden;}
.adm-table{width:100%;border-collapse:collapse;font-size:13px;}
.adm-table th{padding:10px 16px;text-align:left;font-size:11px;font-weight:600;color:var(--mu);text-transform:uppercase;letter-spacing:.8px;background:var(--bg2);border-bottom:1px solid var(--bd);}
.adm-table td{padding:12px 16px;border-bottom:1px solid var(--bd);color:var(--tx);}
.adm-table tr:last-child td{border-bottom:none;}
.adm-table tr:hover td{background:var(--bg2);}
.adm-status{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;}
.adm-status.active{background:#dcfce7;color:#166534;}
[data-theme=dark] .adm-status.active{background:#14532d40;color:#4ade80;}
.adm-status.suspended{background:#fef9c3;color:#854d0e;}
[data-theme=dark] .adm-status.suspended{background:#42220040;color:#facc15;}
.adm-actions{display:flex;gap:6px;justify-content:flex-end;}
.adm-empty{text-align:center;padding:48px 16px;color:var(--mu);font-size:13px;}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
.stat-card{background:var(--sur);border:1px solid var(--bd);border-radius:var(--r-md);padding:14px 16px;}
    .skel{background:linear-gradient(90deg,var(--bd) 25%,var(--bg) 50%,var(--bd) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:4px;}
    .skel-lbl{height:10px;width:55%;margin-bottom:10px;}
    .skel-val{height:22px;width:35%;}
    @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.stat-label{font-size:11px;font-weight:600;color:var(--mu);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px;}
.stat-value{font-size:22px;font-weight:700;color:var(--tx);}
.stat-sub{font-size:11px;color:var(--tx2);margin-top:3px;}
.ctr-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;margin:2px;}
.ctr-pill.running{background:#dcfce7;color:#166534;}
.ctr-pill.exited,.ctr-pill.not_found{background:#fee2e2;color:#991b1b;}
.ctr-pill.paused{background:#fef9c3;color:#854d0e;}
[data-theme=dark] .ctr-pill.running{background:#14532d40;color:#4ade80;}
[data-theme=dark] .ctr-pill.exited,[data-theme=dark] .ctr-pill.not_found{background:#7f1d1d40;color:#f87171;}
[data-theme=dark] .ctr-pill.paused{background:#42220040;color:#facc15;}

/* ===================== APP ===================== */
#app{
  display:none;width:100vw;height:100vh;
  flex-direction:row;overflow:hidden;
}
#app.visible{display:flex;}

/* ===================== SIDEBAR ===================== */
#sidebar{
  width:220px;min-width:220px;height:100%;
  background:var(--bg2);
  box-shadow:1px 0 0 var(--bd),2px 0 8px rgba(0,0,0,.04);
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:width .3s ease;
  z-index:10;
}

.sb-top{
  height:52px;
  padding:0 16px;
  border-bottom:1px solid var(--bd);
  display:flex;flex-direction:column;justify-content:center;
  flex-shrink:0;
}

.sb-orbit{
  font-size:24px;font-weight:700;
  letter-spacing:-1px;color:var(--tx);
  line-height:1;
}
.sb-orbit span{color:var(--cyan);}

.sb-byline{
  display:flex;align-items:center;gap:4px;
  margin-top:3px;
  justify-content:flex-start;
}
.sb-by-text{font-size:8px;color:var(--mu);letter-spacing:.8px;text-transform:uppercase;font-weight:500;}
.sb-by-logo-dark{height:12px;width:auto;opacity:0.5;display:none;}
.sb-by-logo-light{height:12px;width:auto;opacity:0.5;}
[data-theme=dark] .sb-by-logo-dark{display:inline;}
[data-theme=dark] .sb-by-logo-light{display:none;}

.sb-nav{flex:1;overflow-y:auto;padding:8px 8px;scrollbar-width:none;}
.sb-nav::-webkit-scrollbar{display:none;}

.sb-section{
  font-size:9.5px;font-weight:700;color:var(--mu);
  text-transform:uppercase;letter-spacing:1px;
  padding:6px 10px 4px;
  user-select:none;
}

.sb-item{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:var(--r-md);
  cursor:pointer;color:var(--tx2);font-size:13px;font-weight:500;
  transition:background .15s,color .15s;user-select:none;
  margin-bottom:1px;position:relative;
}
.sb-item:hover{color:var(--tx);background:var(--sur);}
.sb-item.on{color:var(--cyan);background:var(--cyan-dim);font-weight:600;}
.sb-item.on::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2.5px;height:16px;background:var(--cyan);border-radius:2px;
}
.sb-item svg{
  width:15px;height:15px;flex-shrink:0;
  stroke:currentColor;fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
}

.sb-foot{
  padding:10px 10px;border-top:1px solid var(--bd);
  flex-shrink:0;
}
.sb-sep{height:1px;background:var(--bd);margin:8px 0;}

.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--cyan-dim);border:1.5px solid var(--cyan-b);color:var(--cyan);font-weight:700;font-size:13px;cursor:pointer;transition:all .2s;font-family:'Inter',sans-serif;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.user-avatar:hover{background:var(--cyan-b);}

/* Dropdown shared transition */
.user-dropdown,.notif-dropdown{
  visibility:hidden;opacity:0;
  transform:translateY(-6px) scale(.98);
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;
}
.user-dropdown.open,.notif-dropdown.open{
  visibility:visible;opacity:1;
  transform:translateY(0) scale(1);
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear 0s;
}

/* User dropdown */
.user-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--sur);border:1px solid var(--bd);border-radius:8px;box-shadow:var(--shadow-lg);z-index:9000;min-width:220px;overflow:hidden;padding:0;}
.ud-head{padding:14px 16px 12px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--bd);}
.ud-avatar{width:36px;height:36px;border-radius:50%;background:var(--cyan-dim);border:1.5px solid var(--cyan-b);color:var(--cyan);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ud-info{flex:1;min-width:0;}
.ud-name{font-size:13px;font-weight:600;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ud-role{font-size:10px;color:var(--mu);text-transform:uppercase;letter-spacing:.8px;margin-top:1px;}
.ud-sep{height:1px;background:var(--bd);}
.ud-item{display:flex;width:100%;padding:10px 16px;gap:10px;align-items:center;justify-content:space-between;font-size:13px;border:none;background:transparent;cursor:pointer;color:var(--tx2);font-family:'Inter',sans-serif;transition:background .15s,color .15s;text-align:left;white-space:nowrap;}
.ud-item:hover{background:var(--bg2);color:var(--tx);}
.ud-item-icon{width:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.7;}
.ud-logout{color:#ef4444 !important;border-top:1px solid var(--bd);}
.ud-logout:hover{background:#fef2f210 !important;color:#ef4444 !important;}
[data-theme=dark] .ud-logout:hover{background:#ef444410 !important;}

/* Theme toggle switch */
.theme-row{display:flex;width:100%;padding:10px 16px;align-items:center;justify-content:space-between;cursor:pointer;transition:background .15s;border:none;background:transparent;font-family:'Inter',sans-serif;gap:10px;}
.theme-row:hover{background:var(--bg2);}
.theme-row-label{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--tx2);}
.theme-row:hover .theme-row-label{color:var(--tx);}
.toggle-track{width:34px;height:19px;border-radius:10px;background:var(--bd2);position:relative;transition:background .3s;flex-shrink:0;}
[data-theme=dark] .toggle-track{background:var(--cyan);}
.toggle-thumb{width:15px;height:15px;border-radius:50%;background:var(--sur);position:absolute;top:2px;left:2px;transition:transform .25s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 4px rgba(0,0,0,.25);}
[data-theme=dark] .toggle-thumb{transform:translateX(15px);}

/* ===================== MAIN ===================== */
#main{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;overflow:hidden;}

#topbar{
  padding:0 24px;height:52px;
  box-shadow:0 1px 0 var(--bd),0 2px 8px rgba(0,0,0,.04);
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;background:var(--sur);
}
#page-title{font-size:15px;font-weight:700;color:var(--tx);letter-spacing:-.2px;}
/* ETL icon button states (uses .notif-btn as base) */
.etl-ok{border-color:#22c55e40 !important;color:#22c55e !important;}
.etl-ok:hover{border-color:#22c55e !important;background:#22c55e0d !important;}
.etl-err{border-color:#ef444440 !important;color:#ef4444 !important;}
.etl-err:hover{border-color:#ef4444 !important;background:#ef44440d !important;}
.etl-idle{border-color:#f59e0b40 !important;color:#f59e0b !important;}
.etl-idle:hover{border-color:#f59e0b !important;background:#f59e0b0d !important;}
.etl-sync{border-color:var(--cyan-b) !important;color:var(--cyan) !important;}
.etl-sync svg{animation:spin .8s linear infinite;}

#content{
  flex:1;overflow-y:auto;padding:0;min-height:0;
  animation:fadeIn .2s ease;
}
#content.padded{padding:20px 24px;}

/* ===================== COMPONENTS ===================== */
.card{
  background:var(--sur);border:1px solid var(--bd);
  border-radius:var(--r-md);padding:16px 20px;margin-bottom:10px;
  transition:border-color .15s;
}
.card:hover{border-color:var(--bd2);}
.card-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.panel-hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;gap:16px;}
.panel-hd-left{display:flex;flex-direction:column;gap:2px;}
.panel-hd-title{font-size:15px;font-weight:700;color:var(--tx);letter-spacing:-.2px;}
.panel-hd-sub{font-size:12px;color:var(--mu);margin-top:2px;}
.panel-hd-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.card-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--mu);}

.fg{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
.fg-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.fg-full{grid-column:1/-1;}

label{font-size:11px;font-weight:600;color:var(--tx2);text-transform:uppercase;letter-spacing:.8px;}

input,textarea,select{
  background:var(--bg2);border:1px solid var(--bd);
  border-radius:6px;padding:9px 12px;color:var(--tx);
  font-family:'Inter',sans-serif;font-size:13px;
  outline:none;width:100%;transition:border-color .2s,box-shadow .2s;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-dim);
}
textarea{resize:vertical;min-height:70px;}
select option{background:var(--sur);}

.btn{
  padding:8px 16px;border-radius:6px;border:none;cursor:pointer;
  font-size:12px;font-weight:600;font-family:'Inter',sans-serif;
  transition:all .15s;position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:5px;
}
.btn::after{
  content:'';position:absolute;inset:0;background:white;
  opacity:0;transition:opacity .2s;
}
.btn:active::after{opacity:.1;}
.btn:disabled,.btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none;}
.btn-p{background:var(--cyan);color:#fff;}
.btn-p:hover{background:var(--cyan-hover);}
.btn-o{background:transparent;border:1px solid var(--bd);color:var(--tx2);}
.btn-o:hover{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-dim);}
.btn-d{background:transparent;border:1px solid #fca5a533;color:#ef4444;}
.btn-d:hover{background:#fca5a510;}
.btn-lg{padding:10px 20px;font-size:13px;border-radius:7px;}
.btn-sm{padding:5px 10px;font-size:11px;border-radius:5px;}
.btn-row{display:flex;gap:8px;margin-top:14px;align-items:center;}

.alert{padding:9px 14px;border-radius:var(--r);font-size:12.5px;margin-top:10px;display:none;border:1px solid;line-height:1.45;}
.alert.show{display:block;animation:slideDown .18s ease;}
.a-ok{background:var(--c-success-bg);border-color:var(--c-success-bd);color:var(--c-success-tx);}
[data-theme=dark] .a-ok{background:#065f4618;border-color:#166534;color:#4ade80;}
.a-err{background:var(--c-danger-bg);border-color:var(--c-danger-bd);color:var(--c-danger-tx);}
[data-theme=dark] .a-err{background:#450a0a18;border-color:#991b1b;color:#f87171;}
.a-inf{background:var(--c-info-bg);border-color:var(--c-info-bd);color:var(--c-info-tx);}
[data-theme=dark] .a-inf{background:#17255418;border-color:#1e40af;color:#93c5fd;}

table{width:100%;border-collapse:collapse;font-size:13px;}
th{
  text-align:left;padding:8px 14px;color:var(--mu);
  font-size:10px;text-transform:uppercase;letter-spacing:.8px;
  border-bottom:1px solid var(--bd);font-weight:700;background:var(--bg2);
  position:sticky;top:0;z-index:1;
}
td{padding:10px 14px;border-bottom:1px solid var(--bd);color:var(--tx);transition:background .12s;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--bg2);}

.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--r-sm);font-size:11px;font-weight:600;border:1px solid;line-height:1.4;}
.b-ok{background:#ecfdf5;border-color:#6ee7b7;color:#065f46;}
[data-theme=dark] .b-ok{background:#065f4615;border-color:#6ee7b720;color:#6ee7b7;}
.b-err{background:#fef2f2;border-color:#fca5a5;color:#991b1b;}
[data-theme=dark] .b-err{background:#991b1b15;border-color:#fca5a520;color:#fca5a5;}
.b-partial{background:#fffbeb;border-color:#fcd34d;color:#92400e;}
[data-theme=dark] .b-partial{background:#92400e15;border-color:#fcd34d20;color:#fcd34d;}
.etl-run-banner{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;border:1px solid;margin-bottom:12px;font-size:12px;font-weight:500;line-height:1.4;}
.etl-run-banner.running{background:#eff6ff;border-color:#93c5fd;color:#1e40af;}
[data-theme=dark] .etl-run-banner.running{background:#1e40af15;border-color:#93c5fd30;color:#93c5fd;}
.etl-run-banner.done-ok{background:#ecfdf5;border-color:#6ee7b7;color:#065f46;}
[data-theme=dark] .etl-run-banner.done-ok{background:#065f4615;border-color:#6ee7b730;color:#6ee7b7;}
.etl-run-banner.done-partial{background:#fffbeb;border-color:#fcd34d;color:#92400e;}
[data-theme=dark] .etl-run-banner.done-partial{background:#92400e15;border-color:#fcd34d30;color:#fcd34d;}
.etl-run-banner.done-err{background:#fef2f2;border-color:#fca5a5;color:#991b1b;}
[data-theme=dark] .etl-run-banner.done-err{background:#991b1b15;border-color:#fca5a530;color:#fca5a5;}
.etl-run-banner .spin-sm{width:12px;height:12px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0;}
.b-adm{background:#f5f3ff;border-color:#c4b5fd;color:#5b21b6;}
[data-theme=dark] .b-adm{background:#5b21b615;border-color:#c4b5fd20;color:#c4b5fd;}
.b-vie{background:#eff6ff;border-color:#93c5fd;color:#1e40af;}
[data-theme=dark] .b-vie{background:#1e40af15;border-color:#93c5fd20;color:#93c5fd;}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px;}
.stat{
  background:var(--sur);border:1px solid var(--bd);border-radius:var(--r-md);padding:14px 16px;
  transition:border-color .15s;
}
.stat:hover{border-color:var(--bd2);}
.stat-lbl{font-size:10px;color:var(--mu);text-transform:uppercase;letter-spacing:.8px;margin-bottom:5px;font-weight:600;}
.stat-val{font-size:22px;font-weight:700;color:var(--tx);letter-spacing:-.5px;}
.stat-sub{font-size:11px;color:var(--mu);margin-top:2px;}

.iframe-wrap{
  flex:1;min-height:0;overflow:hidden;
}
.iframe-wrap iframe{width:100%;height:100%;border:none;}
.iframe-empty{
  flex:1;min-height:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;color:var(--mu);
  background:var(--sur);border:1.5px dashed var(--bd);border-radius:var(--r-md);
}
.dash-shell{display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--bg);}
.dash-tabs-bar{
  flex-shrink:0;padding:0 20px;
  border-bottom:1px solid var(--bd);background:var(--sur);
  display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
}
.dash-tabs-bar::-webkit-scrollbar{display:none;}
.dash-onboard{padding:16px 20px 0;flex-shrink:0;}
.iframe-empty-icon{color:var(--bd2);opacity:.7;}

.cfg-tabs{display:flex;gap:4px;margin-bottom:20px;border-bottom:2px solid var(--bd);padding-bottom:0;}
.cfg-tab{padding:9px 18px;border:none;background:transparent;color:var(--tx2);cursor:pointer;font-size:13px;font-family:'Inter',sans-serif;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;border-radius:6px 6px 0 0;}
.cfg-tab:hover{color:var(--tx);background:var(--bg2);}
.cfg-tab.on{color:var(--cyan);border-bottom-color:var(--cyan);font-weight:600;background:var(--cyan-dim);}
.cfg-tab.danger.on{color:#ef4444;border-bottom-color:#ef4444;background:#fef2f2;}
[data-theme=dark] .cfg-tab.danger.on{background:#ef444410;}
.cfg-conn-box{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--bd);border-radius:8px;padding:10px 12px;font-family:'Courier New',monospace;font-size:12px;color:var(--tx);margin-top:4px;}
.cfg-conn-box span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cfg-copy-btn{flex-shrink:0;padding:4px 10px;border-radius:6px;border:1px solid var(--bd);background:transparent;color:var(--tx2);cursor:pointer;font-size:11px;font-family:'Inter',sans-serif;transition:all .15s;}
.cfg-copy-btn:hover{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-dim);}
.cfg-steps{background:var(--bg2);border:1px solid var(--bd);border-radius:8px;padding:14px 16px;margin-top:12px;}
.cfg-step{display:flex;gap:10px;align-items:flex-start;padding:6px 0;font-size:13px;color:var(--tx2);border-bottom:1px solid var(--bd);}
.cfg-step:last-child{border-bottom:none;}
.cfg-step-num{width:20px;height:20px;border-radius:50%;background:var(--cyan-dim);color:var(--cyan);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.cfg-step code{font-family:'Courier New',monospace;font-size:11px;background:var(--sur);border:1px solid var(--bd);border-radius:4px;padding:1px 5px;color:var(--cyan);}

/* MODELS */
.models-layout{display:grid;grid-template-columns:180px 1fr;gap:12px;height:100%;padding:16px 20px;}
.models-cats{
  background:var(--sur);border:1px solid var(--bd);border-radius:8px;
  overflow:hidden;height:100%;display:flex;flex-direction:column;
  box-shadow:var(--shadow);
}
.models-cats-title{
  padding:14px 16px;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:2px;color:var(--mu);
  border-bottom:1px solid var(--bd);flex-shrink:0;
}
.cats-scroll{flex:1;overflow-y:auto;padding:6px;}
.cat-item{
  padding:9px 12px;border-radius:8px;cursor:pointer;
  font-size:13px;font-weight:500;color:var(--tx2);
  transition:background .15s,color .15s;margin-bottom:2px;position:relative;
}
.cat-item:hover{color:var(--tx);background:var(--bg2);}
.cat-item.on{color:var(--cyan);background:var(--cyan-dim);font-weight:600;}
.cat-item.on::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:2.5px;height:14px;background:var(--cyan);border-radius:2px;}

.models-main{
  background:var(--sur);border:1px solid var(--bd);border-radius:8px;
  padding:0 20px 20px;overflow-y:auto;height:100%;box-shadow:var(--shadow);
}
.models-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px;}
.model-item{
  display:flex;align-items:flex-start;gap:8px;padding:10px 12px;
  border-radius:var(--r);background:var(--bg2);border:1px solid var(--bd);
  transition:border-color .12s,background .12s;
}
.model-item:hover{border-color:var(--cyan);}
.model-item.on{border-color:var(--cyan);background:var(--cyan-dim);}
.model-item input[type=checkbox]{width:15px;height:15px;accent-color:var(--cyan);flex-shrink:0;cursor:pointer;margin-top:2px;}
.model-item-body{flex:1;min-width:0;}
.model-name{font-size:12px;color:var(--tx);font-weight:500;cursor:pointer;}
.model-sub{font-size:10px;color:var(--mu);margin-top:1px;}
.model-fields-tag{display:inline-flex;align-items:center;gap:4px;margin-top:5px;font-size:10px;padding:2px 7px;border-radius:4px;font-weight:600;}
.model-fields-tag.configured{background:#ecfdf5;color:#065f46;border:1px solid #6ee7b740;}
[data-theme=dark] .model-fields-tag.configured{background:#065f4615;color:#6ee7b7;border-color:#6ee7b720;}
.model-fields-tag.unconfigured{background:#fef9c3;color:#854d0e;border:1px solid #fde04740;}
[data-theme=dark] .model-fields-tag.unconfigured{background:#854d0e15;color:#fde047;border-color:#fde04720;}
.model-cfg-btn{flex-shrink:0;padding:3px 8px;font-size:10px;border-radius:5px;border:1px solid var(--bd);background:transparent;color:var(--tx2);cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s;}
.model-cfg-btn:hover{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-dim);}

/* EXPLORER */
.explorer-wrap{display:grid;grid-template-columns:210px 1fr;gap:12px;height:100%;padding:16px 20px;}
.ex-sidebar{background:var(--sur);border:1px solid var(--bd);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow);}
.ex-sb-head{padding:9px 10px 9px 14px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--mu);border-bottom:1px solid var(--bd);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;}
.ex-sb-sys-btn{font-size:9px;font-weight:600;padding:2px 7px;border-radius:5px;border:1px solid var(--bd);background:transparent;color:var(--mu);cursor:pointer;font-family:'Inter',sans-serif;letter-spacing:.3px;transition:all .15s;white-space:nowrap;}
.ex-sb-sys-btn:hover{border-color:var(--cyan);color:var(--cyan);}
.ex-sb-sys-btn.on{border-color:var(--cyan);background:var(--cyan-dim);color:var(--cyan);}
.ex-sb-search{padding:8px;flex-shrink:0;}
.ex-tables{flex:1;overflow-y:auto;padding:4px;}
.ex-tbl{padding:8px 10px;border-radius:8px;cursor:pointer;margin-bottom:2px;transition:all .2s;}
.ex-tbl:hover{background:var(--bg2);}
.ex-tbl.on{background:var(--cyan-dim);border:1.5px solid var(--cyan-b);}
.ex-tbl-name{font-size:12px;color:var(--tx);font-weight:500;}
.ex-tbl-sub{font-size:10px;color:var(--mu);}
.ex-tbl-section{font-size:9px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:1.5px;padding:10px 10px 4px;pointer-events:none;}
.ex-tbl-sys{opacity:.5;cursor:default;}
.ex-main{display:flex;flex-direction:column;overflow:hidden;gap:8px;}
#er-panel{flex:1;min-height:60px;background:var(--bg2);border:1px solid var(--bd);border-radius:8px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;}
#er-diagram{flex:1;min-height:0;overflow:hidden;}
#sql-shelf{height:32px;border-top:1px solid var(--bd);background:var(--bg2);flex-shrink:0;display:flex;align-items:stretch;cursor:ns-resize;user-select:none;overflow:hidden;}
.shelf-toggle{display:flex;align-items:center;gap:5px;padding:0 10px 0 12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--mu);border-right:1px solid var(--bd);flex-shrink:0;cursor:pointer;transition:color .15s;white-space:nowrap;}
.shelf-toggle:hover{color:var(--cyan);}
.shelf-tabs{display:flex;align-items:stretch;flex:1;overflow-x:auto;min-width:0;}
.sq-tab{display:flex;align-items:center;gap:5px;padding:0 10px 0 12px;font-size:11px;font-weight:500;color:var(--tx2);cursor:pointer;border-right:1px solid var(--bd);flex-shrink:0;white-space:nowrap;transition:background .15s;}
.sq-tab:hover{background:var(--sur);}
.sq-tab.on{background:var(--sur);color:var(--tx);border-bottom:2px solid var(--cyan);}
.sq-tab-close{width:14px;height:14px;border-radius:3px;border:none;background:transparent;color:var(--mu);cursor:pointer;font-size:13px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;}
.sq-tab-close:hover{background:var(--bd2);color:var(--tx);}
.shelf-add{display:flex;align-items:center;padding:0 12px;border:none;border-left:1px solid var(--bd);background:transparent;color:var(--mu);cursor:pointer;font-size:17px;flex-shrink:0;transition:color .15s;}
.shelf-add:hover{color:var(--cyan);}
#sql-panel{background:var(--sur);border:1px solid var(--bd);border-radius:8px;overflow:hidden;box-shadow:var(--shadow);flex-shrink:0;display:none;flex-direction:column;}
.sq-body{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:10px;gap:8px;}
.sq-editor-row{display:flex;gap:8px;flex-shrink:0;align-items:stretch;min-height:130px;}
.sq-editor-wrap{flex:1;min-width:0;border:1px solid var(--bd);border-radius:8px;overflow:hidden;transition:border-color .2s;display:flex;flex-direction:column;}
.sq-editor-wrap:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-dim);}
.sq-btn-col{display:flex;flex-direction:column;gap:5px;flex-shrink:0;}
/* CodeMirror Orbit theme */
.cm-s-orbit.CodeMirror{background:var(--bg2);color:var(--tx);font-family:'JetBrains Mono','Fira Code','Courier New',monospace;font-size:12.5px;line-height:1.65;height:100%;border:none;}
.cm-s-orbit .CodeMirror-gutters{background:var(--bg);border-right:1px solid var(--bd);}
.cm-s-orbit .CodeMirror-linenumber{color:var(--mu);font-size:11px;}
.cm-s-orbit .CodeMirror-cursor{border-left:2px solid var(--cyan);}
.cm-s-orbit .CodeMirror-selected,.cm-s-orbit .CodeMirror-focused .CodeMirror-selected{background:var(--cyan-dim);}
.cm-s-orbit .CodeMirror-activeline-background{background:var(--sur);}
.cm-s-orbit .cm-keyword{color:var(--sql-kw);font-weight:600;}
.cm-s-orbit .cm-string,.cm-s-orbit .cm-string-2{color:var(--sql-str);}
.cm-s-orbit .cm-number{color:var(--sql-num);}
.cm-s-orbit .cm-comment{color:var(--sql-cmt);font-style:italic;}
.cm-s-orbit .cm-operator{color:var(--sql-op);}
.cm-s-orbit .cm-def{color:var(--sql-kw);}
.cm-s-orbit .cm-builtin{color:var(--sql-fn);}
.cm-s-orbit .cm-variable,.cm-s-orbit .cm-variable-2{color:var(--tx);}
.cm-s-orbit .cm-atom{color:var(--sql-num);}
/* Autocomplete dropdown */
.CodeMirror-hints{background:var(--sur);border:1px solid var(--bd);border-radius:8px;box-shadow:var(--shadow-md);font-family:'Inter',sans-serif;font-size:12px;padding:4px;}
.CodeMirror-hint{padding:5px 10px;border-radius:5px;color:var(--tx2);}
li.CodeMirror-hint-active{background:var(--cyan-dim);color:var(--cyan) !important;}
/* Saved queries sidebar redesign */
.sq-saved-item{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:6px;cursor:pointer;margin-bottom:2px;transition:background .15s;border:1px solid transparent;}
.sq-saved-item:hover{background:var(--bg2);border-color:var(--bd);}
.sq-saved-icon{color:var(--mu);flex-shrink:0;display:flex;align-items:center;}
.sq-saved-name{font-size:11px;color:var(--tx);font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sq-saved-del{flex-shrink:0;width:18px;height:18px;border-radius:4px;border:none;background:transparent;color:var(--mu);cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .15s;opacity:0;}
.sq-saved-item:hover .sq-saved-del{opacity:1;}
.sq-saved-del:hover{background:#fca5a520;color:#ef4444;}
/* Icon ghost button (for Refrescar/Actualizar) */
.btn-ghost{background:transparent;border:none;color:var(--mu);cursor:pointer;border-radius:6px;padding:5px 7px;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-family:'Inter',sans-serif;font-weight:500;transition:background .15s,color .15s;}
.btn-ghost:hover{background:var(--bg2);color:var(--tx);}
.btn-ghost svg{stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}
.sq-results{flex:1;overflow:auto;}
.sq-export-wrap{position:relative;flex-shrink:0;}
.sq-export-menu{position:fixed;background:var(--sur);border:1px solid var(--bd);border-radius:8px;box-shadow:var(--shadow-md);overflow:hidden;min-width:130px;z-index:9000;display:none;}
.sq-export-menu button{display:block;width:100%;padding:8px 12px;text-align:left;font-size:12px;border:none;background:transparent;cursor:pointer;color:var(--tx2);font-family:'Inter',sans-serif;transition:background .15s;}
.sq-export-menu button:hover{background:var(--bg2);color:var(--tx);}

/* ── STUDIO SQL ──────────────────────────────────────────────── */
.studio-wrap{display:flex;height:100%;overflow:hidden;}
.studio-sidebar{width:240px;flex-shrink:0;border-right:1px solid var(--bd);display:flex;flex-direction:column;overflow:hidden;background:var(--bg2);}
.studio-sb-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 8px;flex-shrink:0;}
.studio-sb-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--mu);}
.studio-model-list{flex:1;overflow-y:auto;padding:4px;}
.studio-model-item{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:6px;cursor:pointer;font-size:12.5px;transition:background .15s;}
.studio-model-item:hover{background:var(--sur);}
.studio-model-item.active{background:var(--cyan-dim);color:var(--cyan);}
.studio-model-icon{width:14px;height:14px;flex-shrink:0;opacity:.6;}
.studio-model-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.studio-model-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:1px 5px;border-radius:4px;flex-shrink:0;}
.studio-model-badge.view{background:#a855f720;color:#a855f7;}
.studio-model-badge.table{background:var(--cyan-dim);color:var(--cyan);}
.studio-model-del{flex-shrink:0;width:20px;height:20px;border-radius:4px;border:none;background:transparent;color:var(--mu);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s,background .15s,color .15s;}
.studio-model-item:hover .studio-model-del{opacity:.6;}
.studio-model-del:hover{opacity:1!important;background:#ef444415;color:#ef4444;}
.studio-main{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.studio-editor-area{flex-shrink:0;display:flex;flex-direction:column;height:260px;border-bottom:1px solid var(--bd);}
.studio-toolbar{display:flex;align-items:center;gap:6px;padding:6px 10px;flex-shrink:0;border-bottom:1px solid var(--bd);background:var(--bg2);}
.studio-toolbar-left{display:flex;align-items:center;gap:6px;}
.studio-toolbar-right{display:flex;align-items:center;gap:6px;margin-left:auto;}
.studio-hint{font-size:10.5px;color:var(--mu);padding:0 4px;}
.studio-kbd{display:inline-flex;align-items:center;padding:1px 5px;border:1px solid var(--bd2);border-radius:3px;font-size:10px;font-family:'Inter',monospace;color:var(--mu);background:var(--bg);}
.studio-status-bar{height:22px;border-top:1px solid var(--bd);background:var(--bg2);display:flex;align-items:center;padding:0 12px;flex-shrink:0;gap:12px;}
.studio-status-item{font-size:10.5px;color:var(--mu);display:flex;align-items:center;gap:4px;}
.studio-editor-wrap{flex:1;overflow:hidden;}
.studio-results-area{flex:1;overflow:auto;background:var(--bg);}
.studio-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--mu);gap:8px;padding:40px;}
.studio-results-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.studio-results-table th{position:sticky;top:0;background:var(--bg2);padding:7px 12px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--mu);border-bottom:1px solid var(--bd);white-space:nowrap;}
.studio-results-table td{padding:8px 12px;border-bottom:1px solid var(--bd);color:var(--tx);font-family:'JetBrains Mono','Courier New',monospace;font-size:12px;white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis;}
.studio-results-table tr:last-child td{border-bottom:none;}
.studio-results-table tr:hover td{background:var(--sur);}
.studio-results-meta{padding:8px 12px;font-size:11px;color:var(--mu);border-top:1px solid var(--bd);background:var(--bg2);flex-shrink:0;}
.studio-er-panel{width:0;flex-shrink:0;border-left:0 solid var(--bd);overflow:hidden;transition:width .3s ease;background:var(--bg);display:flex;flex-direction:column;}
.studio-er-panel.open{width:360px;border-left-width:1px;}
.studio-er-head{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;border-bottom:1px solid var(--bd);flex-shrink:0;}
/* ── FUENTES DE DATOS ─────────────────────────────── */
.fuentes-layout{display:flex;height:100%;overflow:hidden;}
.fuentes-list{width:210px;flex-shrink:0;border-right:1px solid var(--bd);display:flex;flex-direction:column;background:var(--bg2);overflow:hidden;}
.fuentes-list-head{padding:12px 14px 6px;flex-shrink:0;}
.fuentes-list-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--mu);}
.fuentes-list-body{flex:1;overflow-y:auto;padding:4px 6px;}
.fuente-src-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background .15s;position:relative;}
.fuente-src-item:hover{background:var(--sur);}
.fuente-src-item.active{background:var(--cyan-dim);}
.fuente-src-logo{width:34px;height:34px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.fuente-src-meta{flex:1;min-width:0;}
.fuente-src-name{font-size:13px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fuente-src-type{font-size:11px;color:var(--mu);margin-top:1px;}
.fuente-src-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.fuente-src-dot.ok{background:#22c55e;}
.fuente-src-dot.err{background:#ef4444;}
.fuente-src-dot.unk{background:var(--mu);opacity:.5;}
.fuentes-list-foot{padding:8px 8px 10px;flex-shrink:0;border-top:1px solid var(--bd);}
.fuente-add-btn{width:100%;padding:8px 12px;border:1.5px dashed var(--bd);border-radius:8px;background:transparent;color:var(--mu);font-size:12px;font-family:'Inter',sans-serif;display:flex;align-items:center;gap:6px;justify-content:center;transition:all .2s;cursor:pointer;}
.fuente-add-btn:hover{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-dim);}
.fuentes-detail{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.fuentes-detail-hd{display:flex;align-items:center;gap:14px;padding:16px 24px 0;flex-shrink:0;}
.fuentes-detail-logo{width:44px;height:44px;border-radius:12px;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.fuentes-detail-title{font-size:15px;font-weight:700;}
.fuentes-detail-status{font-size:12px;color:var(--mu);margin-top:3px;}
.fuentes-detail-tabs{padding:12px 24px 0;flex-shrink:0;border-bottom:2px solid var(--bd);display:flex;gap:0;}
.fuente-dtab{padding:9px 16px;border:none;background:transparent;color:var(--tx2);cursor:pointer;font-size:13px;font-family:'Inter',sans-serif;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;border-radius:4px 4px 0 0;}
.fuente-dtab:hover{color:var(--tx);background:var(--bg2);}
.fuente-dtab.on{color:var(--cyan);border-bottom-color:var(--cyan);font-weight:600;background:var(--cyan-dim);}
.fuentes-detail-body{flex:1;overflow-y:auto;padding:20px 24px;}
.fuente-src-item.disabled{opacity:.4;pointer-events:none;cursor:default;}
.fuente-src-badge{font-size:9.5px;font-weight:700;background:var(--bg2);color:var(--mu);padding:2px 7px;border-radius:20px;letter-spacing:.3px;flex-shrink:0;border:1px solid var(--bd);}
.fuente-src-sep{height:1px;background:var(--bd);margin:8px 6px 4px;}
.fuente-src-sep-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--mu);padding:4px 10px 6px;}
.fuente-src-logo-dim{opacity:.55;filter:grayscale(.5);}
.icon-btn{background:transparent;border:none;padding:3px 5px;border-radius:5px;cursor:pointer;color:var(--mu);display:inline-flex;align-items:center;transition:background .15s,color .15s;}
.icon-btn:hover{background:var(--bg2);color:var(--tx);}
.icon-btn-danger:hover{background:#fca5a510;color:#ef4444;}
.src-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px;}
.src-type-card{border:1.5px solid var(--bd);border-radius:10px;padding:14px 10px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:border-color .15s,background .15s;position:relative;}
.src-type-card:not(.disabled):hover{border-color:var(--cyan);background:var(--cyan-dim);}
.src-type-card.selected{border-color:var(--cyan);background:var(--cyan-dim);}
.src-type-card.disabled{opacity:.4;pointer-events:none;}
.src-type-logo{width:36px;height:36px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.src-type-label{font-size:12px;font-weight:600;color:var(--tx);text-align:center;}
.src-type-badge{position:absolute;top:6px;right:6px;font-size:9px;font-weight:700;background:var(--bg2);color:var(--mu);padding:2px 6px;border-radius:20px;border:1px solid var(--bd);}

/* MODALS */
.modal-ov{
  position:fixed;inset:0;background:#00000050;
  display:none;align-items:center;justify-content:center;
  z-index:9000;backdrop-filter:blur(4px);
}
.modal-ov.show{display:flex;animation:fadeIn .2s ease;}
.modal{
  background:var(--sur);border:1px solid var(--bd);
  border-radius:8px;padding:24px;width:440px;max-width:95vw;
  box-shadow:var(--shadow-lg);animation:slideUp .25s ease;
}
.modal-title{font-size:16px;font-weight:700;margin-bottom:18px;}
.modal-foot{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;}

/* ANIMATIONS */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.sp{
  display:inline-block;width:12px;height:12px;
  border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%;animation:spin .6s linear infinite;
  flex-shrink:0;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ER */
.er-link{fill:none;stroke:var(--cyan);stroke-width:1.5;opacity:.5;}

/* ETL Table Cards */
.etl-table-card {
  background:var(--sur);border:1px solid var(--bd);border-radius:8px;
  overflow:hidden;transition:all .2s;cursor:pointer;
}
.etl-table-card:hover { border-color:var(--cyan);box-shadow:var(--shadow-md); }
.etl-table-card.expanded { border-color:var(--cyan); }
.etl-table-card-header {
  display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
}
.etl-table-card-body {
  display:none;border-top:1px solid var(--bd);padding:14px 16px;background:var(--bg2);
}
.etl-table-card.expanded .etl-table-card-body { display:block; }
.etl-table-card-chevron {
  transition:transform .2s;font-size:12px;color:var(--mu);
}
.etl-table-card.expanded .etl-table-card-chevron { transform:rotate(180deg); }

.danger-zone{border-color:#fca5a5 !important;}
[data-theme=dark] .danger-zone{border-color:#ef444440 !important;}
.danger-zone .card-title{color:#ef4444 !important;}
.danger-list{display:flex;flex-direction:column;gap:4px;font-size:12px;padding:10px 12px;border-radius:8px;margin-bottom:8px;}
.danger-list-no{background:#fef2f2;border:1px solid #fca5a540;color:#991b1b;}
[data-theme=dark] .danger-list-no{background:#991b1b15;border-color:#fca5a530;color:#fca5a5;}
.danger-list-ok{background:#ecfdf5;border:1px solid #6ee7b740;color:#065f46;}
[data-theme=dark] .danger-list-ok{background:#065f4615;border-color:#6ee7b730;color:#6ee7b7;}

/* NOTIFICATION BELL */
.notif-btn{width:32px;height:32px;border-radius:6px;border:1px solid var(--bd);background:transparent;color:var(--tx2);cursor:pointer;transition:width .3s cubic-bezier(.4,0,.2,1),background .2s,border-color .2s,color .2s;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;overflow:hidden;white-space:nowrap;}
/* Bell keeps overflow:visible so badge renders outside button bounds */
#notif-bell{overflow:visible;}
#etl-label{display:inline-block;max-width:0;overflow:hidden;opacity:0;font-size:11px;font-weight:600;font-family:'Inter',sans-serif;vertical-align:middle;transition:max-width .3s cubic-bezier(.4,0,.2,1),opacity .2s,margin-left .3s;}
#etl-btn.etl-expanded{width:auto;padding:0 10px;}
#etl-btn.etl-expanded #etl-label{max-width:120px;opacity:1;margin-left:5px;}
.notif-btn svg{stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}
.notif-btn:hover{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-dim);}
.notif-btn.has-alerts{border-color:#ef4444;color:#ef4444;}
.notif-badge{position:absolute;top:-4px;right:-4px;min-width:15px;height:15px;border-radius:8px;background:#ef4444;color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--sur);padding:0 3px;font-family:'Inter',sans-serif;line-height:1;}
.notif-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--sur);border:1px solid var(--bd);border-radius:8px;box-shadow:var(--shadow-lg);z-index:9000;width:320px;overflow:hidden;}
.notif-hdr{padding:10px 14px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--mu);border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;}
.notif-hdr-clr{font-size:10px;font-weight:600;padding:3px 8px;border-radius:5px;border:1px solid var(--bd);background:transparent;color:var(--mu);cursor:pointer;font-family:'Inter',sans-serif;letter-spacing:0;text-transform:none;transition:all .15s;}
.notif-hdr-clr:hover{border-color:#ef4444;color:#ef4444;}
.notif-list{max-height:320px;overflow-y:auto;}
.notif-item{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-bottom:1px solid var(--bd);}
.notif-item:last-child{border-bottom:none;}
.notif-item-body{flex:1;min-width:0;}
.notif-item-time{font-size:10px;color:var(--mu);margin-bottom:3px;}
.notif-item-msg{color:#ef4444;font-size:11px;line-height:1.5;word-break:break-word;user-select:text;cursor:text;}
.notif-item-dismiss{flex-shrink:0;width:18px;height:18px;border-radius:4px;border:1px solid var(--bd);background:transparent;color:var(--mu);cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;transition:all .15s;margin-top:1px;}
.notif-item-dismiss:hover{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-dim);}
.notif-empty{padding:24px;text-align:center;color:var(--mu);font-size:12px;}

/* ONBOARDING */
.onboarding-card{background:var(--sur);border:1px solid var(--cyan-b);border-radius:8px;padding:20px;margin-bottom:16px;box-shadow:var(--shadow);}
.onboarding-step{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--bd);font-size:13px;color:var(--tx2);}
.onboarding-step:last-child{border-bottom:none;}
.onboarding-chk{width:20px;height:20px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;}
.ob-done{background:#ecfdf5;color:#065f46;border:1.5px solid #6ee7b740;}
[data-theme=dark] .ob-done{background:#065f4615;border-color:#6ee7b720;color:#6ee7b7;}
.ob-todo{background:var(--bg2);color:var(--mu);border:1px solid var(--bd);}


/* logo theme helpers */
.logo-light-only{height:14px;width:auto;opacity:0.55;}
.logo-dark-only{height:14px;width:auto;opacity:0.55;display:none;}
[data-theme=dark] .logo-light-only{display:none;}
[data-theme=dark] .logo-dark-only{display:inline;}