:root {
  --bg: #0b0f14; --panel: #0f141b; --panel-2: #111823; --text: #e6edf3; --muted: #9fb0c3;
  --inc:#6ae3ff; --exp:#ff6b6b; --ast:#47d18c; --dbt:#f472b6;
  --accent: #6ae3ff; --green: #47d18c; --red: #ff6b6b; --yellow: #ffd166; --shadow: 0 10px 30px rgba(0,0,0,.35); --radius: 16px;
  --series-1:#6ae3ff; --series-2:#47d18c; --series-3:#ffd166; --series-4:#ff6b6b; --series-5:#a78bfa; --series-6:#f472b6;
}
*{box-sizing:border-box} html,body{height:100%} body{margin:0;background:linear-gradient(180deg,#070a0e,var(--bg));color:var(--text);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a{color:var(--accent);text-decoration:none}
.app{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.sidebar{background:radial-gradient(100% 100% at 0% 0%,#0e131a,#0a0e13);padding:24px;border-right:1px solid #16202d}
.logo{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.logo-badge{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,#00eaff,#0072ff);display:grid;place-items:center;box-shadow:var(--shadow)}
.logo-badge b{font-size:18px;color:#00131d}
.nav{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.nav button{appearance:none;border:0;background:transparent;color:var(--muted);text-align:left;padding:10px 12px;border-radius:10px;cursor:pointer}
.nav button.active,.nav button:hover{background:#0f1722;color:var(--text)}
.main{padding:24px}
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){.app{grid-template-columns:1fr}.sidebar{position:sticky;top:0;z-index:3}.grid.cols-3{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.grid.cols-3{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid #182433;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.card h3{margin:0 0 8px 0;font-size:14px;color:var(--muted);font-weight:600}
.metric{font-size:28px;font-weight:700;letter-spacing:.2px}
.row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.btn{appearance:none;border:1px solid #1c2b3d;background:#0f1722;color:#d6e2ef;padding:10px 14px;border-radius:12px;cursor:pointer;transition:transform .06s ease}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(90deg,#00e5ff,#00b3ff);color:#00131d;border:0}
.btn.ghost{background:transparent;border-color:#223349}
.btn.danger{background:linear-gradient(90deg,#ff4757,#ff3838);color:#fff;border:0}
input,select{background:#0a1018;border:1px solid #1b2a3d;color:var(--text);padding:9px 10px;border-radius:10px;width:100%}
table{width:100%;border-collapse:collapse}
th,td{padding:8px 10px;border-bottom:1px solid #1a2636;vertical-align:top}
th{color:var(--muted);font-weight:600;text-align:left;position:relative}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid #223349;background:#0b1320;color:#cfe6ff}
.pill i{width:8px;height:8px;border-radius:999px;background:var(--accent)}
canvas{width:100%;height:300px;display:block;touch-action:none}
.footer-note{margin-top:8px;color:var(--muted);font-size:12px}
.hidden{display:none}
.danger{color:var(--red)} .okay{color:var(--green)} .number{font-variant-numeric:tabular-nums}
.tag{font-size:11px;padding:2px 8px;border-radius:999px;background:#0e1622;border:1px solid #203249;color:#9ab4cf}
.inline-help{font-size:12px;color:var(--muted)}
.search-wrap{position:relative}
.search-list{position:absolute;left:0;right:0;top:38px;background:#0b1320;border:1px solid #203249;border-radius:10px;max-height:200px;overflow:auto;z-index:5}
.search-item{padding:8px 10px;cursor:pointer;border-bottom:1px solid #152233}
.search-item:hover{background:#0f1a2a}
.flex-col{display:flex;flex-direction:column;gap:8px}
.switch{display:inline-flex;gap:8px;align-items:center}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.cell-disabled input, .cell-disabled select{opacity:.5; pointer-events:none; background:#0a1018; border-color:#1b2a3d;}

.th-tooltip{position:fixed; z-index:1000; max-width:320px; padding:10px 12px; border-radius:10px;
  background:rgba(11,19,32,.98); border:1px solid #203249; color:#cfe6ff; font-size:12px; line-height:1.35; box-shadow:0 6px 22px rgba(0,0,0,.35); pointer-events:none;}

.legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.legend .k{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);border:1px solid #203249;background:#0b1320;padding:4px 8px;border-radius:999px}
.legend .dot{width:10px;height:10px;border-radius:999px}
.legend.compact{display:flex;flex-wrap:wrap;gap:6px;margin-top:0;margin-bottom:8px;padding:0}
.legend.compact .k{font-size:11px;padding:3px 6px;gap:5px}
.legend.compact .dot{width:8px;height:8px}

/* ===== Pipeline Builder styles ===== */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@900&display=swap');

.pb-header-title, .page-header-title{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 8px 0;
}

.pb-title-text, .page-title-text{
  font-family:'Orbitron', 'Neura Path Bold', system-ui, -apple-system, sans-serif;
  font-weight:900;
  font-size:28px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  background:linear-gradient(90deg, #47d18c 0%, #6ae3ff 25%, #47d18c 50%, #6ae3ff 75%, #47d18c 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:rollingGradient 4s linear infinite;
  position:relative;
  display:inline-block;
  padding:4px 0;
}

.pb-title-text::after{
  content:'Pipeline Builder';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(90deg, rgba(71,209,140,0.4) 0%, rgba(106,227,255,0.4) 25%, rgba(71,209,140,0.4) 50%, rgba(106,227,255,0.4) 75%, rgba(71,209,140,0.4) 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:rollingGradient 4s linear infinite;
  filter:blur(12px);
  z-index:-1;
  opacity:0.6;
}

.page-title-text::after{
  content:attr(data-text);
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(90deg, rgba(71,209,140,0.4) 0%, rgba(106,227,255,0.4) 25%, rgba(71,209,140,0.4) 50%, rgba(106,227,255,0.4) 75%, rgba(71,209,140,0.4) 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:rollingGradient 4s linear infinite;
  filter:blur(12px);
  z-index:-1;
  opacity:0.6;
  pointer-events:none;
}

@keyframes rollingGradient{
  0%{background-position:0% 50%}
  100%{background-position:300% 50%}
}

/* ===== Tour Mode Styles ===== */
.tour-overlay{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:9999;
  pointer-events:auto;
  animation:fadeIn 0.3s ease-out;
}

.tour-spotlight-svg{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.tour-tooltip{
  position:fixed;
  z-index:10001;
  pointer-events:auto;
  animation:slideIn 0.3s ease-out;
  max-width:400px;
}

.tour-tooltip-content{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid #182433;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
}

.tour-modal-backdrop{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.8);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10000;
  backdrop-filter:blur(4px);
  animation:fadeIn 0.3s ease-out;
}

.tour-welcome-modal{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid #182433;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:32px;
  max-width:500px;
  text-align:center;
  animation:scaleIn 0.3s ease-out;
}

@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

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

@keyframes scaleIn{
  from{
    opacity:0;
    transform:scale(0.95);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

.pipeline-head .hint{color:var(--muted); font-size:12px}

/* Add Node button group */
.pb-add-node-group{position:relative;display:inline-flex;align-items:center;gap:8px}
.pb-btn-add-node{
  background:linear-gradient(135deg,#00e5ff,#00b3ff);
  color:#00131d;
  border:0;
  padding:10px 20px;
  border-radius:12px;
  font-weight:700;
  font-size:13px;
  letter-spacing:.5px;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,229,255,.3),inset 0 1px 0 rgba(255,255,255,.2);
  transition:all .2s ease;
  backdrop-filter:blur(10px);
}
.pb-btn-add-node:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,229,255,.4),inset 0 1px 0 rgba(255,255,255,.3);
}
.pb-btn-add-node.active{
  background:linear-gradient(135deg,#00b3ff,#0088cc);
  box-shadow:0 4px 12px rgba(0,179,255,.4),inset 0 1px 0 rgba(255,255,255,.2);
}

.pb-add-node-options{
  display:flex;
  gap:6px;
  align-items:center;
  opacity:0;
  transform:translateX(-20px) scale(0.9);
  pointer-events:none;
  transition:all .3s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width:0;
  overflow:hidden;
}
.pb-add-node-options.open{
  opacity:1;
  transform:translateX(0) scale(1);
  pointer-events:auto;
  max-width:500px;
}

.pb-btn-node-type{
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.2);
  color:var(--text);
  padding:8px 14px;
  border-radius:10px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  backdrop-filter:blur(10px);
  transition:all .15s ease;
  white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.1);
}
.pb-btn-node-type:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.1));
  border-color:rgba(255,255,255,.3);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.15);
}
.pb-btn-node-type:active{
  transform:translateY(0);
}
.pipeline-wrap{position:relative;height:70vh;min-height:520px;border-radius:20px;border:1px solid #182433;
  background:radial-gradient(1200px 600px at 10% 0%, #0c131f 0%, #0a0f17 55%, #070a0e 100%);
  overflow:hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  cursor: grab;}
.pipeline-wrap:active{cursor: grabbing;}
#pbEdges{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible}
.pb-node{
  position:absolute; min-width:220px; max-width:280px; padding:12px 14px;
  border-radius:18px; color:var(--text);
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 25px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
  cursor:grab; user-select:none; transform:translateZ(0);
  transition:box-shadow .15s ease, transform .15s ease, border-color .15s;
}
.pb-node:active{cursor:grabbing}
.pb-node:hover{box-shadow: 0 16px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08); }
.pb-node.hovering{box-shadow: 0 16px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08);}

.pb-node .type{font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.9; margin-bottom:6px; display:flex; align-items:center; gap:8px}
.pb-node .type .dot{width:8px;height:8px;border-radius:999px;box-shadow:0 0 18px currentColor}
.pb-node .name{font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pb-node .big{font-variant-numeric:tabular-nums; font-size:22px; font-weight:800; margin-top:6px}
.pb-node .sub{font-size:12px; color:var(--muted)}
.pb-node .spark{height:32px; margin-top:10px; border-radius:12px; background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); overflow:hidden}
.pb-node .badges{display:flex; gap:6px; margin-top:8px}
.pb-node .badge{font-size:10px; padding:3px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04)}
.pb-node .ports{position:absolute; inset:0; pointer-events:none}
.pb-port{position:absolute; width:14px; height:14px; border-radius:999px; pointer-events:auto;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.2); backdrop-filter: blur(2px);
  box-shadow:0 0 0 0 rgba(255,255,255,.0); transition:box-shadow .15s, background .15s}
.pb-port:hover{background:#fff; box-shadow:0 0 0 8px rgba(255,255,255,.06)}
.pb-port[data-pos="left"]{left:-7px; top:50%; transform:translate(-50%,-50%)}
.pb-port[data-pos="right"]{right:-7px; top:50%; transform:translate(50%,-50%)}
.pb-port[data-pos="top"]{top:-7px; left:50%; transform:translate(-50%,-50%)}
.pb-port[data-pos="bottom"]{bottom:-7px; left:50%; transform:translate(-50%,50%)}
.glow-inc{outline:1px solid rgba(49,195,255,.2); box-shadow:0 0 20px rgba(49,195,255,.25) inset}
.glow-exp{outline:1px solid rgba(255,143,90,.2); box-shadow:0 0 20px rgba(255,143,90,.25) inset}
.glow-ast{outline:1px solid rgba(139,220,101,.2); box-shadow:0 0 20px rgba(139,220,101,.25) inset}
.glow-dbt{outline:1px solid rgba(255,107,107,.2); box-shadow:0 0 20px rgba(255,107,107,.25) inset}
.pb-edge{fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linecap:round; filter:drop-shadow(0 6px 16px rgba(38,120,255,.35)); stroke-dasharray:6 6; animation:flow 2s linear infinite}
@keyframes flow{to{stroke-dashoffset:-120}}
.pb-edge-hit{stroke:transparent; stroke-width:14; fill:none; pointer-events:all}
.edge-label{font-size:11px; fill:#cfe6ff; paint-order:stroke; stroke:#0a0f17; stroke-width:3px}
.panel{display:flex; gap:8px; flex-wrap:wrap}
.panel .btn.small{padding:6px 10px; font-size:12px; border-radius:10px}
.edge-list{max-height:320px; overflow:auto}
.edge-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid #132033}
.edge-row:last-child{border-bottom:0}
.pb-pill{ margin-left:.6rem; padding:.15rem .5rem; border-radius:999px; font-size:.8rem; opacity:.85 }
.pb-pill.auto{ background:#39424a }
.pb-pill.import{ background:#0b704f }
.pb-pill.existing{ background:#334155 }

/* === Flow Details Modal === */
.mm-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);display:grid;place-items:center;z-index:9999}
.mm-modal{width:min(420px,90vw);background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid #182433;border-radius:16px;box-shadow:var(--shadow);padding:16px}
.mm-modal h4{margin:0 0 8px 0}
.mm-modal .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mm-modal .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
.mm-modal .note{font-size:12px;color:var(--muted);margin-top:6px}

/* === Google Sheets Integration Styles === */
.mode-banner{background:linear-gradient(90deg,#0b704f,#0a5a3f);padding:8px 12px;border-radius:8px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;font-size:12px;position:relative}
.mode-banner.local{background:linear-gradient(90deg,#334155,#223349)}
.mode-banner .mode-label{font-weight:600;color:#fff}
.mode-banner .mode-status{color:rgba(255,255,255,.8)}
.mode-info-icon{opacity:0.5;cursor:help;font-size:14px;transition:opacity 0.2s}
.mode-info-icon:hover{opacity:0.8}
.mode-tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;background:var(--panel);border:1px solid var(--panel-2);border-radius:8px;padding:12px;font-size:12px;color:var(--text);max-width:280px;z-index:10000;box-shadow:var(--shadow);pointer-events:none;opacity:0;transition:opacity 0.2s}
.mode-tooltip.show{opacity:1}
.mode-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--panel-2)}
.sheet-health{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.sheet-health-item{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #182433}
.sheet-health-item:last-child{border-bottom:0}
.loading-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:grid;place-items:center;z-index:10000}
.loading-spinner{border:3px solid #223349;border-top-color:var(--accent);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.notification{position:fixed;top:20px;right:20px;background:var(--panel);border:1px solid #182433;border-radius:12px;padding:12px 16px;box-shadow:var(--shadow);z-index:10001;max-width:400px;animation:slideIn 0.3s ease}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.notification.error{border-color:var(--red)}
.notification.success{border-color:var(--green)}
#queueBadge{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}

/* === Contribution Columns Visual Distinction === */
.contribution-col{background:rgba(106,227,255,.05);border-left:2px solid rgba(106,227,255,.2);border-right:2px solid rgba(106,227,255,.2)}
.contribution-col input,.contribution-col select{background:rgba(106,227,255,.03);border-color:rgba(106,227,255,.15)}

/* === Timeline Slider === */
.timeline-slider{
  position:relative; width:100%; height:60px; margin-top:8px; margin-bottom:8px;
  padding:0 40px; cursor:pointer; user-select:none;
}
.timeline-slider-canvas{
  position:absolute; left:0; top:0; width:100%; height:100%;
  pointer-events:none; z-index:2; /* Above track, below window - for muted curves */
  border-radius:8px; /* Match track border radius */
}
.timeline-slider-canvas-colored{
  position:absolute; left:0; top:0; width:100%; height:100%;
  pointer-events:none; z-index:4; /* Above window - for colored curves inside window */
  border-radius:8px;
}
.timeline-slider-track{
  position:absolute; left:40px; right:40px; top:0; bottom:0;
  border-radius:8px;
  background:#0000005b; /* Jet black background */
  border:1px solid rgba(255,255,255,0.06);
  z-index:1; /* Below canvas so curves are visible */
  pointer-events:none; /* Allow clicks to pass through to window/handles */
}
.timeline-slider-window{
  position:absolute; top:50%; transform:translateY(-50%);
  height:100%; border-radius:12px;
  background:linear-gradient(180deg, rgba(100,150,255,0.15), rgba(100,150,255,0.08));
  border:2px solid rgba(100,150,255,0.4);
  box-shadow:0 0 20px rgba(100,150,255,0.2), 
              inset 0 0 30px rgba(100,150,255,0.12),
              inset 0 0 0 1px rgba(255,255,255,0.15);
  backdrop-filter:blur(12px);
  transition:box-shadow 0.15s ease, border-color 0.15s ease;
  cursor:grab;
  z-index:3;
}
.timeline-slider-window:hover{
  box-shadow:0 0 24px rgba(100,150,255,0.3), 
              inset 0 0 40px rgba(100,150,255,0.18),
              inset 0 0 0 1px rgba(255,255,255,0.2);
  border-color:rgba(100,150,255,0.5);
}
.timeline-slider-window:active{
  cursor:grabbing;
  box-shadow:0 0 28px rgba(100,150,255,0.4), 
              inset 0 0 50px rgba(100,150,255,0.25),
              inset 0 0 0 1px rgba(255,255,255,0.25);
  border-color:rgba(100,150,255,0.6);
}
.timeline-slider-handle{
  position:absolute; top:50%; transform:translateY(-50%);
  width:8px; height:30px; border-radius:4px;
  background:linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0.12));
  border:1px solid rgba(255,255,255,0.3);
  box-shadow:0 2px 8px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.15);
  backdrop-filter:blur(8px);
  cursor:ew-resize;
  opacity:0; transition:opacity 0.15s ease, transform 0.15s ease;
  z-index:4;
}
.timeline-slider:hover .timeline-slider-handle,
.timeline-slider-handle.dragging{
  opacity:1;
}
.timeline-slider-handle:hover,
.timeline-slider-handle.dragging{
  transform:translateY(-50%) scale(1.2);
  background:linear-gradient(180deg, rgba(106,227,255,0.3), rgba(106,227,255,0.15));
  border-color:rgba(106,227,255,0.5);
  box-shadow:0 0 12px rgba(106,227,255,0.4), inset 0 0 0 1px rgba(255,255,255,0.2);
}
.timeline-slider-handle-left{
  left:0;
}
.timeline-slider-handle-right{
  right:0;
}

/* ===== Simulation Augments Styles ===== */
.augments-panel{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:16px;
  margin-top:12px;
}

.augment-card{
  background:linear-gradient(180deg, rgba(15,20,27,0.8), rgba(17,24,35,0.8));
  border:1px solid #182433;
  border-radius:var(--radius);
  padding:16px;
  transition:transform 0.1s ease, box-shadow 0.1s ease;
}

.augment-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  border-color:#223349;
}

.augment-card-header{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:12px;
}

.augment-card-icon{
  width:40px;
  height:40px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  flex-shrink:0;
}

.augment-card-title{
  flex:1;
  min-width:0;
}

.augment-card-actions{
  display:flex;
  gap:4px;
  flex-shrink:0;
}

.augment-card-body{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.augment-card-meta{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.augment-status-badge{
  padding:4px 8px;
  border-radius:6px;
  font-size:11px;
  font-weight:600;
  border:1px solid;
}

.augment-timeline-preview{
  height:24px;
  background:#0a1018;
  border:1px solid #1b2a3d;
  border-radius:6px;
  position:relative;
  overflow:hidden;
}

.augment-editor-backdrop{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.8);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10000;
  backdrop-filter:blur(4px);
}

.augment-editor-modal{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid #182433;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  max-width:600px;
  width:90%;
  max-height:90vh;
  overflow-y:auto;
}

.effect-editor{
  padding:12px;
  background:#0a1018;
  border:1px solid #1b2a3d;
  border-radius:8px;
}

/* ===== Augment Control Panel Toggles ===== */
.augment-control-panel{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.augment-toggle-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 0;
}

.augment-toggle-wrapper{
  position:relative;
  width:48px;
  height:24px;
}

.augment-toggle-switch{
  width:48px;
  height:24px;
  background:linear-gradient(180deg, #2a3441, #1a2330);
  border:2px solid #3a4552;
  border-radius:12px;
  position:relative;
  cursor:pointer;
  transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2);
}

.augment-toggle-switch::before{
  content:'';
  position:absolute;
  width:18px;
  height:18px;
  background:linear-gradient(180deg, #e0e0e0, #b0b0b0);
  border-radius:50%;
  top:1px;
  left:1px;
  transition:transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:0 2px 4px rgba(0,0,0,0.3), inset 0 1px 2px rgba(255,255,255,0.5);
}

.augment-toggle-switch.enabled{
  background:linear-gradient(180deg, #4a5a6a, #3a4a5a);
  border-color:#5a6a7a;
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2), 0 0 12px rgba(71,209,140,0.3);
}

.augment-toggle-switch.enabled::before{
  transform:translateX(24px);
  background:linear-gradient(180deg, #fff, #e0e0e0);
  box-shadow:0 2px 4px rgba(0,0,0,0.3), inset 0 1px 2px rgba(255,255,255,0.6);
}

.augment-toggle-switch:hover{
  transform:scale(1.05);
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.3);
}

.augment-toggle-switch.enabled:hover{
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.3), 0 0 16px rgba(71,209,140,0.4);
}

.augment-toggle-switch:active{
  transform:scale(0.98);
}

.augment-indicator-light{
  position:absolute;
  top:50%;
  right:-8px;
  transform:translateY(-50%);
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ff6b6b;
  box-shadow:0 0 8px rgba(255,107,107,0.5);
  transition:all 0.2s ease;
  opacity:0.6;
}

.augment-indicator-light.on{
  background:#47d18c;
  box-shadow:0 0 12px rgba(71,209,140,0.8), 0 0 20px rgba(71,209,140,0.4);
  opacity:1;
  animation:pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow{
  0%, 100%{
    box-shadow:0 0 12px rgba(71,209,140,0.8), 0 0 20px rgba(71,209,140,0.4);
  }
  50%{
    box-shadow:0 0 16px rgba(71,209,140,1), 0 0 28px rgba(71,209,140,0.6);
  }
}

@media (max-width:720px){
  .card .row[style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
  }
}

/* ===== Chart Control Strip (Compact) ===== */
.chart-control-strip{
  padding:12px 16px;
  /* Card grows naturally to accommodate all augment rows */
  overflow:visible;
}

.chart-control-strip .control-strip-header{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.chart-control-strip .control-strip-content{
  display:flex;
  align-items:flex-start;
  gap:16px;
  min-height:48px;
}

.chart-control-strip .control-strip-left{
  flex:0 0 auto;
  display:flex;
  align-items:center;
}

.chart-control-strip .control-strip-divider{
  width:1px;
  height:32px;
  background:rgba(255,255,255,0.1);
  flex-shrink:0;
}

.chart-control-strip .control-strip-right{
  flex:1;
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  align-self:stretch;
  gap:12px;
  min-width:0;
}

.augments-header-compact{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  white-space:nowrap;
}


.alt-toggles-compact{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}

.alt-toggle-compact{
  margin:0;
}

.alt-toggle-compact .pill{
  font-size:12px;
  padding:4px 8px;
}

.alt-toggle-compact .pill .dot{
  width:6px;
  height:6px;
}

.alt-toggle-locked{
  opacity:0.65;
  cursor:not-allowed;
  position:relative;
}

.alt-toggle-locked::after{
  content:'🔒';
  position:absolute;
  right:-18px;
  top:50%;
  transform:translateY(-50%);
  font-size:10px;
  opacity:0.6;
  pointer-events:none;
}

.alt-toggle-locked:hover{
  opacity:0.75;
}

.alt-toggle-locked input[type="checkbox"]{
  cursor:not-allowed;
  pointer-events:none;
}

.alt-toggle-locked .pill{
  opacity:0.7;
}

.augment-control-panel-compact{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:flex-start;
  align-content:flex-start;
  flex:1;
  min-width:0;
  /* No height restriction - card grows to accommodate all rows */
  overflow:visible;
}

.augment-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:8px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  cursor:pointer;
  transition:all 0.2s ease;
  font-size:11px;
  color:var(--muted);
  position:relative;
  user-select:none;
  white-space:nowrap;
  max-width:140px;
}

.augment-chip:hover{
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.12);
  transform:translateY(-1px);
}

.augment-chip.enabled{
  background:rgba(71,209,140,0.1);
  border-color:rgba(71,209,140,0.3);
  color:var(--text);
  box-shadow:0 0 8px rgba(71,209,140,0.15);
}

.augment-chip-toggle-wrapper{
  position:relative;
  width:20px;
  height:12px;
  flex-shrink:0;
}

.augment-chip-toggle{
  width:20px;
  height:12px;
  background:linear-gradient(180deg, #2a3441, #1a2330);
  border:1px solid #3a4552;
  border-radius:6px;
  position:relative;
  cursor:pointer;
  transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);
}

.augment-chip-toggle::before{
  content:'';
  position:absolute;
  width:8px;
  height:8px;
  background:linear-gradient(180deg, #e0e0e0, #b0b0b0);
  border-radius:50%;
  top:1px;
  left:1px;
  transition:transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:0 1px 2px rgba(0,0,0,0.3);
}

.augment-chip-toggle.enabled{
  background:linear-gradient(180deg, #4a5a6a, #3a4a5a);
  border-color:#5a6a7a;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.3), 0 0 6px rgba(71,209,140,0.3);
}

.augment-chip-toggle.enabled::before{
  transform:translateX(8px);
  background:linear-gradient(180deg, #fff, #e0e0e0);
}

.augment-chip-indicator{
  position:absolute;
  top:50%;
  right:-6px;
  transform:translateY(-50%);
  width:4px;
  height:4px;
  border-radius:50%;
  background:#ff6b6b;
  box-shadow:0 0 4px rgba(255,107,107,0.5);
  transition:all 0.2s ease;
  opacity:0.6;
}

.augment-chip-indicator.on{
  background:#47d18c;
  box-shadow:0 0 6px rgba(71,209,140,0.8);
  opacity:1;
}

.augment-chip-icon{
  font-size:12px;
  line-height:1;
  flex-shrink:0;
}

.augment-chip-name{
  font-size:11px;
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:80px;
}

.augment-chip-empty{
  font-size:11px;
  color:var(--muted);
  font-style:italic;
  padding:4px 0;
}

/* ===== Account Integration Page Styles ===== */

/* Two-Column Grid Layout */
.account-integration-grid {
  min-height: 600px;
}

.account-integration-column {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 16px;
}

.account-integration-column-header {
  flex-shrink: 0;
}

/* Connection Canvas */
.connection-canvas {
  pointer-events: none;
}

.connection-line {
  stroke: var(--green);
  stroke-width: 2;
  fill: none;
  opacity: 0.4;
  transition: opacity 0.2s ease, stroke-width 0.2s ease;
  /* Add smooth path transitions */
  vector-effect: non-scaling-stroke;
}

.connection-line:hover,
.connection-line.highlighted {
  opacity: 1;
  stroke-width: 3;
}

.connection-line.overridden {
  stroke: var(--yellow);
}

/* Search and Filter Bar */
.search-filter-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.search-filter-bar input,
.search-filter-bar select {
  flex: 1;
  min-width: 150px;
}

/* Side Drawer */
.side-drawer-backdrop {
  transition: opacity 0.3s ease;
}

.side-drawer-backdrop:not(.hidden) {
  opacity: 1;
}

.side-drawer {
  transition: transform 0.3s ease;
}

.side-drawer:not(.hidden) {
  transform: translateX(0);
}

/* Collapsible Sections */
.collapsible-section {
  margin-bottom: 16px;
}

.collapsible-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--panel-2);
  border: 1px solid #182433;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease;
}

.collapsible-section-header:hover {
  background: #111823;
}

.collapsible-section-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.collapsible-section-toggle {
  font-size: 12px;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.collapsible-section.collapsed .collapsible-section-toggle {
  transform: rotate(-90deg);
}

.collapsible-section-content {
  max-height: 2000px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  opacity: 1;
}

.collapsible-section.collapsed .collapsible-section-content {
  max-height: 0;
  opacity: 0;
}

/* Connection Status Indicators */
.connection-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid;
}

.connection-status-pill.connected {
  background: rgba(71, 209, 140, 0.1);
  border-color: var(--green);
  color: var(--green);
}

.connection-status-pill.overridden {
  background: rgba(255, 209, 102, 0.1);
  border-color: var(--yellow);
  color: var(--yellow);
}

.connection-status-pill.unconnected {
  background: rgba(159, 176, 195, 0.1);
  border-color: var(--muted);
  color: var(--muted);
}

.connection-status-icon {
  font-size: 14px;
  line-height: 1;
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
  .account-integration-grid > div {
    grid-template-columns: 1fr !important;
  }
  
  .account-integration-grid > div > div:first-child,
  .account-integration-grid > div > div:last-child {
    max-width: 100% !important;
    justify-self: stretch !important;
  }
  
  .account-integration-column {
    margin-bottom: 24px;
  }
  
  .side-drawer {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .search-filter-bar {
    flex-direction: column;
  }
  
  .search-filter-bar input,
  .search-filter-bar select {
    width: 100%;
  }
  
  .side-drawer {
    width: 100% !important;
  }
  
  .connection-canvas {
    display: none; /* Hide connection lines on mobile for performance */
  }
}

/* Account Integration Card Enhancements */
.connected-account-card,
.tmm-node-card {
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.connected-account-card:hover,
.tmm-node-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.connected-account-card.connected,
.tmm-node-card.connected {
  border-color: var(--green);
}

.connected-account-card.overridden,
.tmm-node-card.overridden {
  border-color: var(--yellow);
  background: rgba(255, 209, 102, 0.05);
}

/* Weekly Check-In Wizard Styles */
.checkin-step-indicator {
  flex: 1;
  height: 4px;
  background: #182433;
  border-radius: 2px;
  transition: background 0.3s ease;
}

.checkin-step-indicator.active {
  background: var(--green);
}

.checkin-step-indicator.completed {
  background: var(--green);
  opacity: 0.7;
}

.btn.small {
  padding: 6px 12px;
  font-size: 12px;
}