/* ═══════════════════════════════════════════════════════════
   SyncQ v3 — "Nerve Center"
   A living dashboard where data flows visually
═══════════════════════════════════════════════════════════ */

/* ── Theme tokens ──────────────────────────────────────── */
:root,[data-theme="dark"]{
  --void:        #050507;
  --bg:          #0a0a0f;
  --surface:     #111118;
  --raised:      #18181f;
  --float:       #1f1f28;
  --hover:       #262632;

  --line-0:      rgba(255,255,255,.03);
  --line-1:      rgba(255,255,255,.06);
  --line-2:      rgba(255,255,255,.10);
  --line-3:      rgba(255,255,255,.18);

  --t1:          #f0f0f4;
  --t2:          #9898a8;
  --t3:          #55556a;

  --accent:      #2563eb;
  --accent-s:    rgba(37,99,235,.12);
  --accent-g:    rgba(37,99,235,.30);

  --hs:          #ff7a59;
  --hs-s:        rgba(255,122,89,.10);
  --qb:          #14B84A;
  --qb-s:        rgba(20,184,74,.10);

  --ok:          #14B84A;
  --ok-s:        rgba(20,184,74,.10);
  --warn:        #fbbf24;
  --warn-s:      rgba(251,191,36,.10);
  --err:         #f87171;
  --err-s:       rgba(248,113,113,.10);

  --r:           10px;
  --r-s:         6px;
  --r-l:         16px;
  --r-xl:        24px;
  --r-f:         9999px;

  --mono:        'JetBrains Mono',monospace;
  color-scheme:dark;
}
[data-theme="light"]{
  --void:        #f4f4f8;
  --bg:          #ffffff;
  --surface:     #f7f7fa;
  --raised:      #ededf2;
  --float:       #e4e4ec;
  --hover:       #dcdce6;
  --line-0:      rgba(0,0,0,.03);
  --line-1:      rgba(0,0,0,.06);
  --line-2:      rgba(0,0,0,.10);
  --line-3:      rgba(0,0,0,.18);
  --t1:          #111118;
  --t2:          #6a6a80;
  --t3:          #9898a8;
  color-scheme:light;
}

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px;-webkit-font-smoothing:antialiased}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);color:var(--t1);
  line-height:1.5;min-height:100vh;overflow-x:hidden;
  transition:background .2s,color .2s;
}
a{color:var(--accent);text-decoration:none}
button,select,input,textarea{font-family:inherit}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:10px}
img{display:block}

/* ── Keyframes ─────────────────────────────────────────── */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideR{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@keyframes glow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5)}}
@keyframes flowRight{0%{transform:translateX(-100%)}100%{transform:translateX(200%)}}
@keyframes flowLeft{0%{transform:translateX(200%)}100%{transform:translateX(-100%)}}
@keyframes orbit{0%{transform:rotate(0deg) translateX(60px) rotate(0deg)}100%{transform:rotate(360deg) translateX(60px) rotate(-360deg)}}
@keyframes breathe{0%,100%{opacity:.5;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
@keyframes ripple{0%{box-shadow:0 0 0 0 var(--accent-g)}100%{box-shadow:0 0 0 20px transparent}}
@keyframes particleFloat{
  0%{transform:translateY(0) translateX(0);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translateY(-60px) translateX(20px);opacity:0}
}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 0 currentColor}50%{box-shadow:0 0 0 5px transparent}}
@keyframes tbDrift1{
  0%,100%{transform:translate(0,0)}25%{transform:translate(30px,-5px)}50%{transform:translate(-15px,4px)}75%{transform:translate(20px,-3px)}
}
@keyframes tbDrift2{
  0%,100%{transform:translate(0,0)}25%{transform:translate(-25px,5px)}50%{transform:translate(18px,-4px)}75%{transform:translate(-10px,6px)}
}
@keyframes tbDrift3{
  0%,100%{transform:translate(0,0)}25%{transform:translate(12px,5px)}50%{transform:translate(-22px,-6px)}75%{transform:translate(15px,3px)}
}
@keyframes tbDrift4{
  0%,100%{transform:translate(0,0)}25%{transform:translate(-18px,-4px)}50%{transform:translate(25px,5px)}75%{transform:translate(-8px,-6px)}
}
@keyframes syncFlowR{
  0%{left:-3%;opacity:0;transform:translateY(-50%) scale(.6)}
  10%{opacity:.9;transform:translateY(-50%) scale(1)}
  90%{opacity:.9;transform:translateY(-50%) scale(1)}
  100%{left:103%;opacity:0;transform:translateY(-50%) scale(.6)}
}
@keyframes syncFlowL{
  0%{left:103%;opacity:0;transform:translateY(-50%) scale(.6)}
  10%{opacity:.9;transform:translateY(-50%) scale(1)}
  90%{opacity:.9;transform:translateY(-50%) scale(1)}
  100%{left:-3%;opacity:0;transform:translateY(-50%) scale(.6)}
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT — Full viewport, no scroll needed
═══════════════════════════════════════════════════════════ */
.shell{
  display:grid;
  grid-template-rows:52px 1fr;
  grid-template-columns:var(--nav-w,260px) 1fr var(--cop-w,320px);
  grid-template-areas:
    "hdr hdr hdr"
    "nav main copilot";
  height:100vh;overflow:hidden;
  transition:grid-template-columns .35s cubic-bezier(.4,0,.2,1);
}
/* Collapsed states — controlled by data attributes on .shell */
.shell[data-nav="collapsed"]{ --nav-w:56px }
.shell[data-copilot="collapsed"]{ --cop-w:0px }

/* ═══════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════ */
.hdr{
  grid-area:hdr;
  display:flex;align-items:center;gap:12px;
  padding:0 16px;
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line-1);
  z-index:100;
}
.hdr-brand{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0}
.hdr-logo{width:26px;height:26px;border-radius:var(--r-s)}
.hdr-name{
  font-size:15px;font-weight:700;letter-spacing:-.4px;
  color:var(--t1);
}
[data-theme="light"] .hdr-name{
  background:#2563eb;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hdr-sep{width:1px;height:20px;background:var(--line-2);flex-shrink:0}

/* Glowing pulse orb — live status indicator */
.pulse-orb{
  width:10px;height:10px;border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 8px var(--ok),0 0 20px rgba(20,184,74,.2);
  animation:breathe 3s ease infinite;
  flex-shrink:0;
}
.pulse-orb.warn{background:var(--warn);box-shadow:0 0 8px var(--warn),0 0 20px rgba(251,191,36,.2)}
.pulse-orb.err{background:var(--err);box-shadow:0 0 8px var(--err),0 0 20px rgba(248,113,113,.2)}
.hdr-status{font-size:11px;color:var(--t2);font-weight:500}
.hdr-status strong{color:var(--t1)}

/* Cmd+K trigger */
.hdr-cmd{
  display:flex;align-items:center;gap:8px;
  background:var(--raised);border:1px solid var(--line-1);
  border-radius:var(--r);padding:6px 14px;
  cursor:pointer;transition:.15s;min-width:200px;
}
.hdr-cmd:hover{border-color:var(--line-3);background:var(--float)}
.hdr-cmd i{color:var(--t3);font-size:12px}
.hdr-cmd span{color:var(--t3);font-size:12px;flex:1}
.hdr-cmd kbd{
  font-family:var(--mono);font-size:10px;font-weight:600;
  color:var(--t3);background:var(--surface);
  border:1px solid var(--line-2);border-radius:4px;
  padding:1px 6px;
}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:3px}
.hdr-btn{
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r);background:transparent;border:none;
  color:var(--t2);cursor:pointer;font-size:13px;transition:.15s;position:relative;
}
.hdr-btn:hover{background:var(--raised);color:var(--t1)}
.hdr-btn.danger:hover{color:var(--err)}
a.hdr-btn{text-decoration:none;display:inline-flex}
.classic-label{font-size:10px;font-weight:600}
@media(max-width:768px){.classic-label{display:none}}
.hdr-btn .ndot{
  position:absolute;top:6px;right:6px;width:7px;height:7px;
  background:var(--err);border-radius:50%;border:2px solid var(--bg);
  display:none;
}
.hdr-btn .ndot.active{
  display:block;
}

/* ── Notification Panel ──────────────────────────────── */
.notif-panel{
  display:none;position:absolute;top:44px;right:60px;width:340px;max-height:420px;
  background:var(--surface);border:1px solid var(--line-1);border-radius:10px;
  box-shadow:0 8px 32px rgba(0,0,0,.25);z-index:999;overflow:hidden;
}
.notif-panel.open{display:block}
.notif-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid var(--line-0);
}
.notif-title{font-size:13px;font-weight:700;color:var(--t1)}
.notif-mark-all{
  font-size:10px;color:var(--accent);background:none;border:none;cursor:pointer;
  font-family:inherit;font-weight:600;
}
.notif-mark-all:hover{text-decoration:underline}
.notif-list{overflow-y:auto;max-height:360px}
.notif-item{
  display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line-0);
  cursor:pointer;transition:background .1s;
}
.notif-item:hover{background:var(--raised)}
.notif-item.unread{background:color-mix(in srgb, var(--accent) 5%, var(--surface))}
.notif-item-icon{
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;flex-shrink:0;
}
.notif-item-icon.import{background:rgba(20,184,74,.12);color:#14B84A}
.notif-item-icon.instruction{background:rgba(14,165,233,.12);color:#0ea5e9}
.notif-item-icon.error{background:rgba(220,38,38,.12);color:#dc2626}
.notif-item-icon.payment{background:rgba(37,99,235,.12);color:#2563eb}
.notif-item-body{flex:1;min-width:0}
.notif-item-title{font-size:12px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-item-msg{font-size:11px;color:var(--t3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-item-time{font-size:9px;color:var(--t4);margin-top:2px}
.notif-empty{
  padding:40px 20px;text-align:center;color:var(--t4);font-size:12px;
}
.notif-empty i{font-size:24px;margin-bottom:8px;display:block;opacity:.4}
.theme-btn .fa-sun{display:none}
.theme-btn .fa-moon{display:inline}
[data-theme="light"] .theme-btn .fa-sun{display:inline}
[data-theme="light"] .theme-btn .fa-moon{display:none}
.hdr-avatar{
  width:30px;height:30px;border-radius:50%;
  background:#2563eb;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:#fff;cursor:pointer;
  border:2px solid transparent;transition:.15s;flex-shrink:0;
}
.hdr-avatar:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-g)}
.hdr-avatar-wrap{position:relative}
.hdr-account-menu{
  display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:5000;
  background:var(--surface);border:1px solid var(--line-1);border-radius:var(--r-m);
  box-shadow:0 12px 40px rgba(0,0,0,.4);min-width:220px;padding:6px 0;
  animation:fadeUp .15s ease;
}
.hdr-account-menu.open{display:block}
.ham-header{padding:10px 14px}
.ham-name{font-size:13px;font-weight:700;color:var(--t1)}
.ham-email{font-size:11px;color:var(--t4);margin-top:1px}
.ham-sep{height:1px;background:var(--line-0);margin:4px 0}
.ham-item{
  display:flex;align-items:center;gap:10px;width:100%;padding:8px 14px;
  border:none;background:transparent;color:var(--t2);font-size:12px;
  cursor:pointer;transition:.1s;text-decoration:none;text-align:left;
}
.ham-item:hover{background:var(--bg-1);color:var(--t1)}
.ham-item i{width:16px;text-align:center;font-size:12px;color:var(--t3)}
.ham-item:hover i{color:var(--accent)}
.ham-danger{color:var(--err)}
.ham-danger:hover{background:rgba(239,68,68,.08)}
.ham-danger i,.ham-danger:hover i{color:var(--err)}

/* Company selector */
.hdr-company{
  display:flex;align-items:center;gap:6px;
  background:var(--raised);border:1px solid var(--line-1);
  border-radius:var(--r);padding:5px 10px;
  cursor:pointer;transition:.15s;
}
.hdr-company:hover{border-color:var(--line-3)}
.hdr-company i{color:var(--qb);font-size:11px;flex-shrink:0}
.hdr-company select{
  background:none;border:none;color:var(--t1);
  font-size:12px;font-weight:500;cursor:pointer;outline:none;
  font-family:inherit;min-width:90px;
}
.hdr-company select option{background:var(--raised)}

/* Connection chips */
.chip{
  display:flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:var(--r-f);
  font-size:11px;font-weight:500;border:1px solid;
  cursor:pointer;transition:.15s;
}
.chip-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.chip.hs{background:var(--hs-s);border-color:rgba(255,122,89,.2);color:var(--hs)}
.chip.hs .chip-dot{background:var(--hs);animation:dotPulse 2s infinite;color:var(--hs)}
.chip.qb{background:var(--qb-s);border-color:rgba(20,184,74,.2);color:var(--qb)}
.chip.qb .chip-dot{background:var(--qb);animation:dotPulse 2s infinite;color:var(--qb)}
.chip.off{opacity:.5;filter:grayscale(1)}
.chip.hs.disconnected{background:var(--err-s);border-color:rgba(248,113,113,.2);color:var(--err);animation:hsDisconnectPulse 2s infinite}
.chip.hs.disconnected .chip-dot{background:var(--err);animation:none}
@keyframes hsDisconnectPulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 8px var(--err-s)}}

/* Env pill toggle — icon-only, compact */
.env-pill{
  display:flex;align-items:center;background:var(--raised);
  border:1px solid var(--line-1);border-radius:var(--r-f);
  padding:2px;gap:1px;opacity:.65;transition:.15s;
}
.env-pill:hover{opacity:1}
.env-opt{
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:var(--t3);
  cursor:pointer;transition:.15s;
}
.env-opt.active{background:var(--accent);color:#fff}
.env-opt.sandbox.active{background:var(--warn);color:#111}

/* Connect/Disconnect QuickBooks in header */
.qb-conn-wrap{display:flex;align-items:center;flex-shrink:0}
.hdr-connect-qb{height:26px;cursor:pointer;transition:.15s;flex-shrink:0}
.hdr-connect-qb:hover{opacity:.85}
.qb-disconnect-btn{
  display:flex;align-items:center;gap:5px;
  padding:4px 12px;border-radius:var(--r);
  background:var(--err-s);border:1px solid rgba(248,113,113,.2);
  color:var(--err);font-size:11px;font-weight:600;
  cursor:pointer;transition:.15s;font-family:inherit;
  white-space:nowrap;
}
.qb-disconnect-btn:hover{background:var(--err);color:#fff;border-color:var(--err)}
.qb-disconnect-btn i{font-size:11px}
.qb-delete-btn{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:var(--r);
  background:transparent;border:1px solid rgba(248,113,113,.15);
  color:var(--t3);font-size:12px;
  cursor:pointer;transition:.15s;margin-left:6px;
}
.qb-delete-btn:hover{background:var(--err);color:#fff;border-color:var(--err)}

/* ── Welcome Screen (first-install gratitude) ────────── */
.welcome-screen{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100%;
  background:var(--surface);border:1px solid var(--line-1);
  border-radius:var(--r-l);padding:24px 32px;text-align:center;
  animation:fadeUp .5s ease;position:relative;overflow:hidden;
  box-sizing:border-box;
}
.welcome-screen::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 30% 20%,rgba(255,122,89,.06) 0%,transparent 50%),
    radial-gradient(ellipse at 70% 20%,rgba(20,184,74,.06) 0%,transparent 50%),
    radial-gradient(ellipse at 50% 60%,rgba(37,99,235,.08) 0%,transparent 55%);
  pointer-events:none;
}
/* Floating sparkle particles */
.welcome-sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.welcome-sparkle{
  position:absolute;width:4px;height:4px;border-radius:50%;
  background:var(--accent);opacity:0;
  animation:welcomeSparkle 3s ease-in-out infinite;
}
.welcome-sparkle:nth-child(1){top:15%;left:20%;animation-delay:0s;background:#ff7a59}
.welcome-sparkle:nth-child(2){top:10%;left:75%;animation-delay:.5s;background:#14B84A}
.welcome-sparkle:nth-child(3){top:25%;left:50%;animation-delay:1s;background:var(--accent)}
.welcome-sparkle:nth-child(4){top:70%;left:15%;animation-delay:1.5s;background:#fbbf24}
.welcome-sparkle:nth-child(5){top:65%;left:80%;animation-delay:.8s;background:#ff7a59}
.welcome-sparkle:nth-child(6){top:80%;left:45%;animation-delay:2s;background:#14B84A}
.welcome-sparkle:nth-child(7){top:40%;left:10%;animation-delay:.3s;background:#fbbf24}
.welcome-sparkle:nth-child(8){top:35%;left:90%;animation-delay:1.2s;background:var(--accent)}
@keyframes welcomeSparkle{
  0%,100%{opacity:0;transform:scale(0) translateY(0)}
  20%{opacity:1;transform:scale(1) translateY(-10px)}
  50%{opacity:.8;transform:scale(1.5) translateY(-25px)}
  80%{opacity:.3;transform:scale(.8) translateY(-40px)}
}
/* Logo with celebration ring */
.welcome-logo{
  width:88px;height:88px;border-radius:50%;
  background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(255,122,89,.08));
  border:2px solid rgba(37,99,235,.15);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;position:relative;z-index:1;
  animation:welcomeLogoPop .6s cubic-bezier(.34,1.56,.64,1) .2s backwards;
}
.welcome-logo img{width:52px;height:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.15))}
@keyframes welcomeLogoPop{
  from{opacity:0;transform:scale(.5)}
  to{opacity:1;transform:scale(1)}
}
/* Celebration emoji burst */
.welcome-emoji{
  font-size:36px;margin-bottom:16px;position:relative;z-index:1;
  animation:welcomeEmojiBounce .8s cubic-bezier(.34,1.56,.64,1) .4s backwards;
}
@keyframes welcomeEmojiBounce{
  from{opacity:0;transform:scale(0) rotate(-20deg)}
  to{opacity:1;transform:scale(1) rotate(0)}
}
.welcome-heading{
  font-size:26px;font-weight:800;color:var(--t1);margin:0 0 8px;
  letter-spacing:-.4px;position:relative;z-index:1;
  animation:fadeUp .5s ease .3s backwards;
}
.welcome-sub{
  font-size:15px;color:var(--t2);max-width:460px;line-height:1.7;
  margin:0 0 28px;position:relative;z-index:1;
  animation:fadeUp .5s ease .4s backwards;
}
.welcome-sub strong{color:var(--t1)}
/* Value badges */
.welcome-badges{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  margin-bottom:32px;position:relative;z-index:1;
}
.welcome-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:20px;font-size:11px;font-weight:600;
  background:var(--raised);border:1px solid var(--line-0);color:var(--t2);
  animation:fadeUp .4s ease backwards;
}
.welcome-badge:nth-child(1){animation-delay:.5s}
.welcome-badge:nth-child(2){animation-delay:.6s}
.welcome-badge:nth-child(3){animation-delay:.7s}
.welcome-badge i{font-size:12px}
.welcome-badge i.hs-c{color:var(--hs)}
.welcome-badge i.qb-c{color:var(--qb)}
.welcome-badge i.ac-c{color:var(--accent)}
/* CTA button */
.welcome-cta{
  padding:12px 32px;font-size:14px;font-weight:600;
  border:none;border-radius:var(--r);cursor:pointer;
  background:var(--accent);
  color:#fff;position:relative;z-index:1;
  box-shadow:0 4px 16px rgba(37,99,235,.3);
  transition:all .2s;
  animation:fadeUp .5s ease .8s backwards;
}
.welcome-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(37,99,235,.4);
}
.welcome-cta i{margin-right:6px}
/* Trial banner */
.welcome-trial-banner{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 18px;border-radius:20px;font-size:12px;
  background:linear-gradient(135deg,rgba(251,191,36,.15),rgba(251,191,36,.08));
  border:1px solid rgba(251,191,36,.3);color:#f59e0b;
  margin-bottom:12px;position:relative;z-index:1;
  animation:fadeUp .4s ease .3s backwards;
}
.welcome-trial-banner i{font-size:14px}
.welcome-trial-banner strong{color:#f59e0b}
/* Value grid */
.welcome-value-row{
  display:flex;align-items:center;gap:18px;justify-content:center;flex-wrap:wrap;
  margin:12px auto;position:relative;z-index:1;
  animation:fadeUp .4s ease .5s backwards;
}
.welcome-value-row span{
  font-size:12px;font-weight:600;color:var(--t2);white-space:nowrap;
}
.welcome-value-row i{color:var(--accent);margin-right:4px}
.welcome-value-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  max-width:480px;margin:10px auto;position:relative;z-index:1;
  animation:fadeUp .4s ease .5s backwards;
}
.welcome-value-card{
  display:flex;flex-direction:column;gap:2px;
  padding:10px 12px;border-radius:var(--r);
  background:var(--raised);border:1px solid var(--line-1);
  text-align:left;font-size:10px;color:var(--t2);line-height:1.35;
  transition:border-color .2s,box-shadow .2s;
}
.welcome-value-card:hover{border-color:var(--line-2);box-shadow:0 2px 12px rgba(255,255,255,.04)}
.welcome-value-card strong{font-size:11px;color:var(--t1)}
.welcome-value-icon{font-size:14px;color:var(--t1);margin-bottom:1px}
/* Reassurance line */
.welcome-reassure{
  display:flex;align-items:center;gap:16px;justify-content:center;
  margin-top:10px;font-size:11px;color:var(--t3);position:relative;z-index:1;
  animation:fadeUp .4s ease .9s backwards;
}
.welcome-reassure span{display:flex;align-items:center;gap:4px}
.welcome-reassure i{font-size:10px;color:var(--ok)}
/* Step indicator */
.welcome-step{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;
  color:var(--t3);margin-bottom:20px;position:relative;z-index:1;
  animation:fadeUp .4s ease .15s backwards;
}
.welcome-step-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 6px rgba(37,99,235,.4);
}
.welcome-step-dot.dim{background:var(--line-2);box-shadow:none}

/* ── QuickBooks Onboarding Banner ─────────────────────── */
.qb-onboard{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100%;
  background:var(--surface);border:1px solid var(--line-1);
  border-radius:var(--r-l);padding:24px 32px;text-align:center;
  animation:fadeUp .4s ease;position:relative;overflow:hidden;
  box-sizing:border-box;
}
.qb-onboard::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(20,184,74,.06) 0%,transparent 70%);
  pointer-events:none;
}
.qb-onboard-icon{
  width:72px;height:72px;border-radius:50%;
  background:var(--qb-s);border:2px solid rgba(20,184,74,.2);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;animation:breathe 3s ease infinite;
}
.qb-onboard-icon img{width:40px;height:40px}
.qb-onboard h2{font-size:20px;font-weight:700;color:var(--t1);margin:0 0 6px}
.qb-onboard p{font-size:13px;color:var(--t2);max-width:420px;line-height:1.6;margin:0 0 20px}
.qb-onboard-connect{
  cursor:pointer;transition:transform .15s,box-shadow .15s;height:36px;
}
.qb-onboard-connect:hover{
  transform:scale(1.03);box-shadow:0 4px 20px rgba(20,184,74,.25);
}
.qb-onboard-env{
  display:flex;align-items:center;gap:10px;margin-bottom:16px;
}
.qb-onboard-env-label{font-size:12px;color:var(--t3);font-weight:600}
.qb-onboard-env-toggle{display:flex;gap:4px}
.qb-env-btn{
  padding:6px 14px;border-radius:var(--r-f);font-size:11px;font-weight:600;
  border:1px solid var(--line-1);background:var(--raised);color:var(--t3);
  cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:5px;
}
.qb-env-btn:hover{border-color:var(--t3)}
.qb-env-btn.active{background:var(--qb-s);border-color:var(--qb);color:var(--qb)}
.qb-onboard-notes{
  display:flex;flex-direction:column;gap:10px;
  margin-top:24px;max-width:400px;width:100%;
}
.qb-note{
  display:flex;align-items:flex-start;gap:10px;
  text-align:left;font-size:12px;color:var(--t2);
  background:var(--raised);border:1px solid var(--line-0);
  border-radius:var(--r);padding:10px 14px;
}
.qb-note i{color:var(--qb);font-size:13px;margin-top:1px;flex-shrink:0}
.qb-note strong{color:var(--t1)}
/* Dimmed header company selector when QB disconnected */
.hdr-company.qb-disabled{opacity:.35;pointer-events:none;filter:grayscale(1)}
/* Pulsing ring on header Connect button */
@keyframes qbPulseRing{
  0%{box-shadow:0 0 0 0 rgba(20,184,74,.4)}
  70%{box-shadow:0 0 0 8px rgba(20,184,74,0)}
  100%{box-shadow:0 0 0 0 rgba(20,184,74,0)}
}
.hdr-connect-qb.pulse{animation:qbPulseRing 2s infinite;border-radius:4px}

/* ═══════════════════════════════════════════════════════════
   LEFT NAV — Vertical, icon + label
═══════════════════════════════════════════════════════════ */
.nav{
  grid-area:nav;
  background:var(--surface);
  border-right:1px solid var(--line-0);
  display:flex;flex-direction:column;
  padding:12px;gap:2px;
  overflow-y:auto;overflow-x:hidden;
  transition:padding .35s cubic-bezier(.4,0,.2,1);
  position:relative;
}
/* Collapse toggle at top of nav */
.nav-toggle{
  display:flex;align-items:center;justify-content:flex-end;
  margin-bottom:4px;flex-shrink:0;
}
.nav-toggle-btn{
  width:30px;height:30px;border-radius:var(--r-s);
  background:transparent;border:1px solid var(--line-1);
  color:var(--t3);cursor:pointer;display:flex;
  align-items:center;justify-content:center;font-size:12px;
  transition:.15s;flex-shrink:0;
}
.nav-toggle-btn:hover{background:var(--raised);color:var(--t1);border-color:var(--line-3)}
.nav-toggle-btn i{transition:transform .35s cubic-bezier(.4,0,.2,1)}
/* Collapsed nav */
.shell[data-nav="collapsed"] .nav{padding:12px 6px}
.shell[data-nav="collapsed"] .nav-section,
.shell[data-nav="collapsed"] .nav-item span:not(.nav-badge),
.shell[data-nav="collapsed"] .nav-item .nav-badge{
  opacity:0;width:0;height:0;overflow:hidden;margin:0;padding:0;
  transition:opacity .2s;
}
.shell[data-nav="collapsed"] .nav-item{
  justify-content:center;padding:9px 0;gap:0;
}
.shell[data-nav="collapsed"] .nav-item i{margin:0}
.shell[data-nav="collapsed"] .nav-toggle{justify-content:center}
.shell[data-nav="collapsed"] .nav-toggle-btn i{transform:rotate(180deg)}
/* Tooltip for collapsed nav items */
.shell[data-nav="collapsed"] .nav-item{position:relative}
.shell[data-nav="collapsed"] .nav-item::after{
  content:attr(data-tip);
  position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
  background:var(--float);border:1px solid var(--line-2);color:var(--t1);
  font-size:11px;font-weight:500;white-space:nowrap;
  padding:5px 10px;border-radius:var(--r-s);
  box-shadow:0 4px 16px rgba(0,0,0,.3);
  opacity:0;pointer-events:none;z-index:200;
  transition:opacity .15s;
}
.shell[data-nav="collapsed"] .nav-item:hover::after{opacity:1}

.nav-section{
  font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.8px;color:var(--t3);
  padding:12px 10px 4px;
  white-space:nowrap;overflow:hidden;
  transition:opacity .2s;
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:var(--r);
  font-size:12px;font-weight:500;color:var(--t2);
  cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);
  border:1px solid transparent;
  text-decoration:none;white-space:nowrap;overflow:hidden;
}
.nav-item:hover{background:var(--raised);color:var(--t1)}
.nav-item.active{background:var(--accent-s);color:var(--accent);border-color:rgba(37,99,235,.15)}
.nav-item i{width:18px;text-align:center;font-size:13px;flex-shrink:0}
.nav-item .nav-badge{
  margin-left:auto;
  font-size:10px;font-weight:700;
  background:var(--err-s);color:var(--err);
  padding:1px 7px;border-radius:var(--r-f);
  transition:opacity .2s;
}
.nav-item .nav-badge.ok{background:var(--ok-s);color:var(--ok)}

/* Quick actions cluster at bottom */
.nav-spacer{flex:1}

/* ═══════════════════════════════════════════════════════════
   MAIN — The Nerve Center
═══════════════════════════════════════════════════════════ */
.main{
  grid-area:main;
  overflow-x:hidden;overflow-y:auto;
  padding:12px 16px;
  display:flex;flex-direction:column;gap:10px;
}

/* ── Sync Toolbar (compact single-line bar) ───────────── */
.sync-toolbar{
  display:flex;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--line-0);
  border-radius:var(--r);padding:6px 12px;
  flex-shrink:0;position:relative;
}
/* Platform mini-badges in toolbar */
.sync-tb-platform{
  display:flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:var(--r-s);
  font-size:11px;font-weight:600;
  border:1px solid var(--line-1);background:var(--raised);
}
.sync-tb-platform i{font-size:13px}
/* QuickBooks symbol mark — official brand icon */
.qb-logo-icon{width:18px;height:18px;border-radius:50%;flex-shrink:0}
.rp-head-icon .qb-logo-icon{width:24px;height:24px}
.sync-tb-platform.hs{color:var(--hs)}
.sync-tb-platform.qb{color:var(--qb)}
.sync-tb-platform .tb-count{
  font-family:var(--mono);font-weight:700;font-size:12px;color:var(--t1);
}
/* Animated pipe between platforms */
.sync-tb-pipe{
  flex:1;height:3px;border-radius:2px;
  background:var(--line-1);position:relative;overflow:hidden;
  min-width:40px;
}
.sync-tb-pipe::after{
  content:'';position:absolute;top:0;left:0;
  width:30%;height:100%;border-radius:2px;
  opacity:0;transition:opacity .3s;
}
/* Idle — subtle shimmer */
.sync-toolbar.idle .sync-tb-pipe::after{
  background:linear-gradient(90deg,var(--line-2),var(--line-3),var(--line-2));
  animation:flowRight 4s linear infinite;opacity:.5;
}
/* Push → left to right (HS to QuickBooks) */
.sync-toolbar.syncing-toqb .sync-tb-pipe::after{
  background:linear-gradient(90deg,var(--hs),var(--accent),var(--qb));
  animation:flowRight 1.2s linear infinite;opacity:1;
}
/* Pull → right to left (QuickBooks to HS) */
.sync-toolbar.syncing-tohs .sync-tb-pipe::after{
  background:linear-gradient(90deg,var(--qb),var(--accent),var(--hs));
  animation:flowLeft 1.2s linear infinite;opacity:1;
}
/* Syncing status label */
.sync-tb-status{
  display:none;align-items:center;gap:5px;
  font-size:10px;font-weight:600;color:var(--accent);
  white-space:nowrap;
}
.sync-tb-status .sync-spinner{
  width:12px;height:12px;border:2px solid var(--line-2);
  border-top-color:var(--accent);border-radius:50%;
  animation:spin .6s linear infinite;
}
.sync-toolbar.syncing-toqb .sync-tb-status,
.sync-toolbar.syncing-tohs .sync-tb-status{display:flex}
/* Platform badge glow when syncing */
.sync-toolbar.syncing-toqb .sync-tb-platform.qb{
  border-color:var(--qb);box-shadow:0 0 8px rgba(20,184,74,.3);
}
.sync-toolbar.syncing-toqb .sync-tb-platform.hs{
  border-color:var(--hs);box-shadow:0 0 8px rgba(255,122,89,.3);
}
.sync-toolbar.syncing-tohs .sync-tb-platform.hs{
  border-color:var(--hs);box-shadow:0 0 8px rgba(255,122,89,.3);
}
.sync-toolbar.syncing-tohs .sync-tb-platform.qb{
  border-color:var(--qb);box-shadow:0 0 8px rgba(20,184,74,.3);
}
/* Sync button in toolbar */
.sync-tb-btn{
  display:flex;align-items:center;gap:5px;
  padding:5px 14px;border-radius:var(--r);
  font-size:11px;font-weight:600;cursor:pointer;
  border:none;transition:.15s;color:#fff;
}
.sync-tb-btn:hover{filter:brightness(1.1)}
.sync-tb-btn:active{transform:scale(.97)}
.sync-tb-btn.toqb{background:linear-gradient(135deg,#14B84A,#14B84A)}
.sync-tb-btn.primary{background:#2563eb}
.sync-tb-btn.tohs{background:linear-gradient(135deg,#c2410c,#ff7a59)}
/* Sync pulse orb — living heartbeat between platforms */
.sync-orb{
  position:relative;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;cursor:default;
}
.sync-orb-core{
  width:28px;height:28px;border-radius:50%;
  background:#2563eb;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:#fff;z-index:2;
  box-shadow:0 0 12px var(--accent-g);
  animation:orbPulse 3s ease-in-out infinite;
}
.sync-orb-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1.5px dashed rgba(37,99,235,.25);
  animation:spin 12s linear infinite;
}
.sync-orb-ripple{
  position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid rgba(37,99,235,.15);
  animation:orbRipple 3s ease-out infinite;
}
@keyframes orbPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 12px var(--accent-g)}
  50%{transform:scale(1.08);box-shadow:0 0 20px var(--accent-g),0 0 40px rgba(56,189,248,.1)}
}
@keyframes orbRipple{
  0%{transform:scale(1);opacity:.6}
  100%{transform:scale(1.8);opacity:0}
}
/* Orb changes during sync */
.sync-toolbar.syncing-toqb .sync-orb-core,
.sync-toolbar.syncing-tohs .sync-orb-core{
  animation:orbPulse 1s ease-in-out infinite;
  box-shadow:0 0 20px var(--accent-g),0 0 40px rgba(37,99,235,.15);
}
.sync-toolbar.syncing-toqb .sync-orb-core i::before{content:"\f061"}
.sync-toolbar.syncing-tohs .sync-orb-core i::before{content:"\f060"}
.sync-toolbar.syncing-toqb .sync-orb-ring,
.sync-toolbar.syncing-tohs .sync-orb-ring{
  animation:spin 3s linear infinite;
  border-color:rgba(37,99,235,.5);
}
.sync-toolbar.syncing-toqb .sync-orb-ripple,
.sync-toolbar.syncing-tohs .sync-orb-ripple{
  animation:orbRipple 1s ease-out infinite;
  border-color:rgba(37,99,235,.3);
}
/* Inline stats in toolbar */
.sync-tb-stats{
  display:flex;align-items:center;gap:12px;
  margin-left:auto;
}
.sync-tb-stat{
  display:flex;align-items:center;gap:5px;
  font-size:11px;color:var(--t2);
}
.sync-tb-stat-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.sync-tb-stat-dot.ok{background:var(--ok)}
.sync-tb-stat-dot.accent{background:var(--accent)}
.sync-tb-stat-dot.hs{background:var(--hs)}
.sync-tb-stat-val{font-family:var(--mono);font-weight:700;font-size:12px;color:var(--t1)}
/* Live feed toggle in toolbar */
.sync-tb-feed-btn{
  display:flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:var(--r-s);
  background:var(--raised);border:1px solid var(--line-1);
  font-size:10px;font-weight:600;color:var(--t2);
  cursor:pointer;transition:.15s;
}
.sync-tb-feed-btn:hover{border-color:var(--line-3);color:var(--t1)}
.sync-tb-feed-btn .feed-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--ok);animation:breathe 2s ease infinite;
}
.sync-tb-feed-btn i.chevron{
  font-size:8px;transition:transform .2s;
}
.sync-tb-feed-btn.open i.chevron{transform:rotate(180deg)}
/* Sync-flow particles — activated on push/pull/sync */
.sync-tb-particles{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  border-radius:inherit;
}
.sync-tb-particle{
  position:absolute;width:5px;height:5px;border-radius:50%;
  opacity:0;top:50%;transform:translateY(-50%);
}
/* Push (left→right) particles */
.sync-toolbar.syncing-toqb .sync-tb-particle{
  animation:syncFlowR 1.4s ease-in-out infinite;
}
.sync-toolbar.syncing-toqb .sync-tb-particle:nth-child(1){background:var(--hs);animation-delay:0s}
.sync-toolbar.syncing-toqb .sync-tb-particle:nth-child(2){background:var(--accent);animation-delay:.25s;top:35%}
.sync-toolbar.syncing-toqb .sync-tb-particle:nth-child(3){background:var(--qb);animation-delay:.5s;top:65%}
.sync-toolbar.syncing-toqb .sync-tb-particle:nth-child(4){background:var(--hs);animation-delay:.75s;top:40%}
.sync-toolbar.syncing-toqb .sync-tb-particle:nth-child(5){background:var(--accent);animation-delay:1s;top:60%}
.sync-toolbar.syncing-toqb .sync-tb-particle:nth-child(6){background:var(--qb);animation-delay:1.2s}
/* Pull (right→left) particles */
.sync-toolbar.syncing-tohs .sync-tb-particle{
  animation:syncFlowL 1.4s ease-in-out infinite;
}
.sync-toolbar.syncing-tohs .sync-tb-particle:nth-child(1){background:var(--qb);animation-delay:0s}
.sync-toolbar.syncing-tohs .sync-tb-particle:nth-child(2){background:var(--accent);animation-delay:.25s;top:35%}
.sync-toolbar.syncing-tohs .sync-tb-particle:nth-child(3){background:var(--hs);animation-delay:.5s;top:65%}
.sync-toolbar.syncing-tohs .sync-tb-particle:nth-child(4){background:var(--qb);animation-delay:.75s;top:40%}
.sync-toolbar.syncing-tohs .sync-tb-particle:nth-child(5){background:var(--accent);animation-delay:1s;top:60%}
.sync-toolbar.syncing-tohs .sync-tb-particle:nth-child(6){background:var(--hs);animation-delay:1.2s}
/* Idle — gentle random drift */
.sync-toolbar.idle .sync-tb-particle{opacity:.4}
.sync-toolbar.idle .sync-tb-particle:nth-child(1){left:12%;top:30%;background:var(--hs);animation:tbDrift1 6s ease-in-out infinite}
.sync-toolbar.idle .sync-tb-particle:nth-child(2){left:30%;top:60%;background:var(--accent);animation:tbDrift2 7s ease-in-out infinite .5s}
.sync-toolbar.idle .sync-tb-particle:nth-child(3){left:52%;top:35%;background:var(--qb);animation:tbDrift3 5.5s ease-in-out infinite 1.2s}
.sync-toolbar.idle .sync-tb-particle:nth-child(4){left:70%;top:65%;background:var(--ok);animation:tbDrift4 6.5s ease-in-out infinite 2s}
.sync-toolbar.idle .sync-tb-particle:nth-child(5){left:85%;top:25%;background:var(--accent);animation:tbDrift1 7.5s ease-in-out infinite 3s}
.sync-toolbar.idle .sync-tb-particle:nth-child(6){left:45%;top:55%;background:var(--hs);animation:tbDrift3 5s ease-in-out infinite 1.8s}

/* ── Live Feed Drawer (collapsible under toolbar) ───── */
.feed-drawer{
  background:var(--surface);border:1px solid var(--line-0);
  border-radius:var(--r);overflow:hidden;
  max-height:0;opacity:0;
  transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s,margin .3s;
  flex-shrink:0;margin-top:-10px;
}
.feed-drawer.open{
  max-height:180px;opacity:1;margin-top:0;
}
.feed-drawer-body{max-height:170px;overflow-y:auto}
.tick{
  display:flex;align-items:center;gap:10px;
  padding:7px 14px;
  border-bottom:1px solid var(--line-0);
  transition:.15s;animation:fadeUp .3s ease;
}
.tick:hover{background:var(--hover)}
.tick:last-child{border-bottom:none}
.tick-icon{
  width:24px;height:24px;border-radius:var(--r-s);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;flex-shrink:0;
}
.tick-icon.ok{background:var(--ok-s);color:var(--ok)}
.tick-icon.err{background:var(--err-s);color:var(--err)}
.tick-icon.warn{background:var(--warn-s);color:var(--warn)}
.tick-icon.sync{background:var(--accent-s);color:var(--accent)}
.tick-body{flex:1;min-width:0}
.tick-text{font-size:11px;color:var(--t2);line-height:1.3}
.tick-text strong{color:var(--t1);font-weight:600}
.tick-time{font-family:var(--mono);font-size:9px;color:var(--t3);margin-top:1px}
.tick-amount{
  font-family:var(--mono);font-size:12px;font-weight:600;
  color:var(--t1);white-space:nowrap;flex-shrink:0;
}

/* ── Record Preview Panels ─────────────────────────────── */
.record-preview{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  flex:1;min-height:0;
}
.record-preview.qb-hidden{grid-template-columns:1fr}
.record-preview.qb-hidden .rp-qb{display:none}

/* Panel wrapper */
.rp-panel{
  background:var(--surface);
  border:1px solid var(--line-0);
  border-radius:var(--r-l);
  display:flex;flex-direction:column;
  overflow:hidden;min-height:0;
  transition:.15s;
}
.rp-panel:hover{border-color:var(--line-2)}

/* Panel header */
.rp-head{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;
  border-bottom:1px solid var(--line-0);
  flex-shrink:0;
}
.rp-head-icon{
  width:32px;height:32px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;
}
.rp-hs .rp-head-icon{background:var(--hs-s);color:var(--hs)}
.rp-qb .rp-head-icon{background:var(--qb-s);color:var(--qb)}
.rp-head-info{flex:1;min-width:0}
.rp-head-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-head-sub{font-size:10px;color:var(--t3);margin-top:1px}
.rp-head-amts{
  display:flex;flex-direction:column;gap:2px;flex-shrink:0;align-items:flex-end;
}
.rp-head-amt{
  font-family:var(--mono);font-size:13px;font-weight:700;
  color:var(--t1);white-space:nowrap;flex-shrink:0;
  padding:3px 10px;border-radius:var(--r-s);
  background:rgba(255,255,255,.04);border:1px solid var(--line-1);
}
.rp-head-bal{
  font-family:var(--mono);font-size:10px;font-weight:600;
  white-space:nowrap;padding:1px 8px;border-radius:var(--r-s);
}
.rp-head-bal.paid{color:var(--ok);background:var(--ok-s)}
.rp-head-bal.due{color:#dc2626;background:rgba(220,38,38,.1)}
.rp-type-select{
  background:var(--raised);border:1px solid var(--line-1);
  border-radius:var(--r-s);color:var(--t2);
  font-size:10px;font-weight:600;
  padding:3px 8px;cursor:pointer;outline:none;
  font-family:inherit;transition:.15s;
}
.rp-type-select:hover{border-color:var(--line-3);color:var(--t1)}
.rp-type-select option{background:var(--raised)}

/* Status badge in header */
.rp-status{
  display:flex;align-items:center;gap:4px;
  font-size:10px;font-weight:600;
  padding:3px 8px;border-radius:var(--r-f);
}
.rp-status.linked{background:rgba(255,255,255,.06);color:var(--t2)}
.rp-status.unlinked{background:rgba(255,255,255,.06);color:var(--t3)}
.rp-status-dot{width:5px;height:5px;border-radius:50%;background:currentColor}

/* Panel body */
.rp-body{
  padding:14px 16px;overflow-y:auto;flex:1;
  display:flex;flex-direction:column;gap:12px;
}

/* Field list (key-value pairs) */
.rp-fields{display:flex;flex-direction:column;gap:0}
.rp-field{
  display:flex;align-items:flex-start;gap:8px;
  padding:7px 0;border-bottom:1px solid var(--line-0);
}
.rp-field:last-child{border-bottom:none}
.rp-field.mapped{background:rgba(20,184,74,.04);border-left:2px solid var(--qb);padding-left:8px;margin-left:-10px;margin-right:-2px}
.rp-field.mapped .rp-field-label{color:var(--qb)}
.rp-field.mapped .rp-field-label::after{content:' \f0ec';font-family:'Font Awesome 6 Free';font-weight:900;font-size:7px;margin-left:4px;opacity:.5}
.rp-field.unmapped{opacity:.7;border-left:2px solid var(--line-2);padding-left:8px;margin-left:-10px;margin-right:-2px}
.rp-field.unmapped .rp-field-label{color:var(--t3)}
.rp-field.qb-field{background:rgba(20,184,74,.06);border-left:2px solid var(--qb) !important;padding-left:8px;margin-left:-10px;margin-right:-2px}
.rp-field.qb-field .rp-field-label{color:var(--qb) !important}
.rp-field.qb-field .rp-field-label::before{content:'\f3e2 ';font-family:'Font Awesome 6 Brands';font-size:9px;margin-right:3px;opacity:.7}
.rp-fields-divider{
  font-size:9px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.8px;
  padding:8px 0 4px;border-bottom:1px solid var(--line-0);
}
.rp-field-label{
  font-size:10px;font-weight:600;color:var(--t3);
  text-transform:uppercase;letter-spacing:.3px;
  min-width:90px;flex-shrink:0;padding-top:2px;
}
.rp-field-value{
  font-size:12px;color:var(--t1);font-weight:500;
  word-break:break-word;flex:1;
}
.rp-field-value a{color:var(--accent);font-size:12px}
.rp-field-value .mono{font-family:var(--mono);font-size:11px;color:var(--t2)}
.rp-field-value .tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:var(--r-f);
  font-size:10px;font-weight:600;
}
.rp-field-value .tag.ok{background:var(--ok-s);color:var(--ok)}
.rp-field-value .tag.warn{background:var(--warn-s);color:var(--warn)}
.rp-field-value .tag.accent{background:var(--accent-s);color:var(--accent)}
.rp-field-value .tag.hs{background:var(--hs-s);color:var(--hs)}
.rp-field-value .tag.qb{background:var(--qb-s);color:var(--qb)}

/* Section divider inside panel */
.rp-divider{
  font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.6px;color:var(--t3);
  padding:4px 0 2px;
  border-bottom:1px solid var(--line-1);
}

/* Line items table */
.rp-line-items{
  width:100%;border-collapse:collapse;
  font-size:11px;
}
.rp-line-items thead{position:sticky;top:0;z-index:1}
.rp-line-items th{
  text-align:left;padding:6px 8px;
  font-size:9px;font-weight:700;color:var(--t3);
  text-transform:uppercase;letter-spacing:.4px;
  background:var(--raised);
  border-bottom:1px solid var(--line-1);
}
.rp-line-items th:last-child{text-align:right}
.rp-line-items td{
  padding:7px 8px;color:var(--t2);
  border-bottom:1px solid var(--line-0);
  vertical-align:top;
}
.rp-line-items td:last-child{text-align:right;font-family:var(--mono);font-weight:600;color:var(--t1);white-space:nowrap}
.rp-line-items tr:last-child td{border-bottom:none}
.rp-line-items tr:hover td{background:var(--hover)}
.rp-line-items .li-product{font-weight:600;color:var(--t1)}
.rp-line-items .li-desc{font-size:10px;color:var(--t3);margin-top:2px}
.rp-line-items .li-qty{font-family:var(--mono);text-align:center}

/* Line items total row */
.rp-line-total{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px;background:var(--raised);
  border-radius:var(--r-s);margin-top:4px;
}
.rp-line-total-label{font-size:11px;font-weight:600;color:var(--t2)}
.rp-line-total-val{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--t1)}

/* Empty/placeholder state */
.rp-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:24px 16px;text-align:center;
}
.rp-empty-icon{
  width:44px;height:44px;border-radius:50%;
  background:var(--raised);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--t3);
}
.rp-empty-text{font-size:12px;color:var(--t3)}
.rp-empty-text strong{color:var(--t2);font-weight:600}

/* Panel footer link */
.rp-foot{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 16px;border-top:1px solid var(--line-0);
  flex-shrink:0;
}
.rp-foot a{
  font-size:11px;font-weight:500;color:var(--t3);
  display:flex;align-items:center;gap:5px;transition:.15s;
}
.rp-foot a:hover{color:var(--accent)}
.rp-foot a i{font-size:9px}
.rp-foot-note{font-size:9px;color:var(--t3);opacity:.7;display:flex;align-items:center;gap:4px}
.rp-foot-note i{font-size:8px}

/* Payment History */
.rp-pmt-btn{
  display:flex;align-items:center;gap:6px;justify-content:center;
  width:100%;padding:8px;margin-top:6px;border-radius:var(--r);
  font-size:11px;font-weight:600;cursor:pointer;border:1px solid var(--line-1);
  background:var(--raised);color:var(--t2);font-family:inherit;transition:.15s;
}
.rp-pmt-btn:hover{border-color:var(--line-2);color:var(--t1);background:var(--float)}
.rp-pmt-btn i{font-size:10px}
.rp-pmt-btn.loading{pointer-events:none;opacity:.6}
.rp-pmt-section{margin-top:8px}
.rp-pmt-summary{
  display:flex;gap:12px;padding:8px 12px;background:var(--raised);border-radius:var(--r);
  border:1px solid var(--line-0);margin-bottom:8px;
}
.rp-pmt-stat{flex:1;text-align:center}
.rp-pmt-stat-label{font-size:9px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px}
.rp-pmt-stat-val{font-size:13px;font-weight:700;font-family:var(--mono);color:var(--t1);margin-top:2px}
.rp-pmt-stat-val.paid{color:#14B84A}
.rp-pmt-stat-val.due{color:#f59e0b}
.rp-pmt-table{width:100%;font-size:11px;border-collapse:collapse}
.rp-pmt-table th{text-align:left;font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);
  padding:4px 8px;border-bottom:1px solid var(--line-1);font-weight:600}
.rp-pmt-table td{padding:6px 8px;border-bottom:1px solid var(--line-0);color:var(--t2)}
.rp-pmt-table td.pmt-amount{font-family:var(--mono);font-weight:600;color:#14B84A}
.rp-pmt-table td.pmt-date{font-family:var(--mono);white-space:nowrap}
.rp-pmt-empty{font-size:11px;color:var(--t3);text-align:center;padding:12px;font-style:italic}

/* Projects & Sub-customers */
.rp-proj-list{margin-top:8px}
.rp-proj-card{
  border:1px solid var(--line-0);border-radius:var(--r);
  padding:10px 12px;margin-bottom:6px;background:var(--raised);transition:.15s;cursor:pointer;
}
.rp-proj-card:hover{border-color:var(--line-2);background:var(--float)}
.rp-proj-head{display:flex;align-items:center;gap:8px}
.rp-proj-icon{
  width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:11px;flex-shrink:0;
}
.rp-proj-icon.project{background:rgba(37,99,235,.1);color:var(--accent)}
.rp-proj-icon.job{background:rgba(245,158,11,.1);color:#f59e0b}
.rp-proj-info{flex:1;min-width:0}
.rp-proj-name{font-size:12px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-proj-meta{font-size:9px;color:var(--t3);margin-top:1px;display:flex;align-items:center;gap:6px}
.rp-proj-meta span{display:inline-flex;align-items:center;gap:3px}
.rp-proj-balance{
  font-size:12px;font-weight:700;font-family:var(--mono);flex-shrink:0;
}
.rp-proj-balance.zero{color:var(--t3)}
.rp-proj-balance.due{color:#dc2626}
.rp-proj-status{
  font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  padding:2px 6px;border-radius:10px;flex-shrink:0;
}
.rp-proj-status.active{background:rgba(22,163,74,.1);color:#16a34a}
.rp-proj-status.inactive{background:rgba(220,38,38,.1);color:#dc2626}
.rp-proj-details{
  display:none;margin-top:8px;padding-top:8px;border-top:1px solid var(--line-0);
  font-size:11px;color:var(--t2);
}
.rp-proj-card.expanded .rp-proj-details{display:block}
.rp-proj-detail-row{display:flex;gap:8px;padding:2px 0}
.rp-proj-detail-label{font-size:10px;font-weight:600;color:var(--t3);min-width:70px;flex-shrink:0}
.rp-proj-detail-val{font-size:11px;color:var(--t1)}
.rp-proj-section-title{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);
  padding:6px 0 4px;display:flex;align-items:center;gap:6px;
}
.rp-proj-section-title i{font-size:8px}
.rp-proj-empty{font-size:11px;color:var(--t3);text-align:center;padding:12px;font-style:italic}
.rp-proj-count{
  font-size:9px;font-weight:600;background:var(--accent-s);color:var(--accent);
  padding:1px 6px;border-radius:10px;margin-left:4px;
}
.rp-proj-open{
  font-size:9px;color:var(--accent);display:inline-flex;align-items:center;gap:3px;
  text-decoration:none;margin-left:auto;flex-shrink:0;
}
.rp-proj-open:hover{text-decoration:underline}
.rp-proj-link-btn{
  font-size:9px;color:#ff7a59;display:inline-flex;align-items:center;gap:3px;
  background:none;border:1px solid rgba(255,122,89,.3);border-radius:4px;
  padding:2px 8px;cursor:pointer;transition:.15s;flex-shrink:0;
}
.rp-proj-link-btn:hover{background:rgba(255,122,89,.08);border-color:#ff7a59}
.rp-proj-link-btn.linked{color:var(--ok);border-color:rgba(34,197,94,.3);cursor:default}
.rp-proj-link-btn:disabled{opacity:.6;cursor:wait}

/* Attachments */
.rp-att-btn{
  display:flex;align-items:center;gap:6px;justify-content:center;
  width:100%;padding:8px;margin-top:6px;border-radius:var(--r);
  font-size:11px;font-weight:600;cursor:pointer;border:1px solid var(--line-1);
  background:var(--raised);color:var(--t2);font-family:inherit;transition:.15s;
}
.rp-att-btn:hover{border-color:var(--line-2);color:var(--t1);background:var(--float)}
.rp-att-btn i{font-size:10px}
.rp-att-btn.loading{pointer-events:none;opacity:.6}
.rp-att-list{margin-top:8px}
.rp-att-item{
  display:flex;align-items:center;gap:10px;padding:8px 10px;
  border:1px solid var(--line-0);border-radius:var(--r);margin-bottom:4px;
  background:var(--raised);transition:.15s;
}
.rp-att-item:hover{border-color:var(--line-1);background:var(--float)}
.rp-att-icon{font-size:16px;color:var(--t3);flex-shrink:0;width:20px;text-align:center}
.rp-att-icon.pdf{color:#e74c3c}
.rp-att-icon.img{color:#3b82f6}
.rp-att-icon.doc{color:#2563eb}
.rp-att-icon.xls{color:#16a34a}
.rp-att-info{flex:1;min-width:0}
.rp-att-name{font-size:11px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-att-meta{font-size:9px;color:var(--t3);margin-top:1px}
.rp-att-dl{
  font-size:10px;color:var(--accent);cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;gap:3px;text-decoration:none;font-weight:500;
}
.rp-att-dl:hover{text-decoration:underline}
.rp-att-del{
  font-size:10px;color:var(--t3);cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;padding:3px;border-radius:var(--r);transition:.15s;
  text-decoration:none;opacity:.5;
}
.rp-att-del:hover{color:#dc2626;opacity:1;background:rgba(220,38,38,.08)}
.rp-att-upload{
  display:flex;align-items:center;gap:6px;justify-content:center;
  width:100%;padding:10px;margin-top:6px;border-radius:var(--r);
  border:1px dashed var(--line-2);cursor:pointer;transition:.15s;
  font-size:11px;color:var(--t3);background:transparent;font-family:inherit;
}
.rp-att-upload:hover{border-color:var(--accent);color:var(--accent);background:rgba(37,99,235,.04)}
.rp-att-upload.dragging{border-color:var(--accent);background:rgba(37,99,235,.08);color:var(--accent)}
.rp-att-upload i{font-size:12px}
.rp-att-upload.uploading{pointer-events:none;opacity:.6}
.rp-att-empty{font-size:11px;color:var(--t3);text-align:center;padding:10px;font-style:italic}
.rp-att-count{
  font-size:9px;font-weight:600;background:var(--accent-s);color:var(--accent);
  padding:1px 6px;border-radius:10px;margin-left:4px;
}

/* ═══════════════════════════════════════════════════════════
   RECORD SYNC VIEW — HubSpot App Card 3-column sync layout
═══════════════════════════════════════════════════════════ */
.hq-header{
  display:flex;align-items:center;gap:12px;
  padding:8px 0;flex-shrink:0;
}
.hq-back{
  display:flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:var(--r);
  background:var(--raised);border:1px solid var(--line-1);
  font-size:11px;font-weight:600;color:var(--t2);
  cursor:pointer;transition:.15s;text-decoration:none;
}
.hq-back:hover{background:var(--float);color:var(--t1)}
.hq-back i{font-size:10px}
.hq-header-info{flex:1;display:flex;flex-direction:column}
.hq-header-title{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}
.hq-header-title i{font-size:14px}
.hq-header-sub{font-size:11px;color:var(--t3);margin-top:2px}
.hq-header-badge{
  display:flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:var(--r-f);
  font-size:11px;font-weight:600;border:1px solid;
}
.hq-header-badge.hs{background:rgba(255,255,255,.06);border-color:var(--line-1);color:var(--t2)}
.hq-header-badge.qb{background:rgba(255,255,255,.06);border-color:var(--line-1);color:var(--t2)}
.hq-header-badge .qb-logo-icon{width:14px;height:14px}

/* 3-column grid */
.hq-grid{
  display:grid;
  grid-template-columns:1fr 240px 1fr;
  gap:12px;flex:1;min-height:0;
}

/* Sync center column */
.hq-center{
  display:flex;flex-direction:column;align-items:center;
  gap:14px;padding:16px 0;
}
.hq-mapping-card{
  background:var(--surface);border:1px solid var(--line-0);
  border-radius:var(--r-l);padding:18px 16px;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.hq-mapping-label{font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.5px}
.hq-mapping-flow{
  display:flex;align-items:center;gap:8px;width:100%;justify-content:center;
}
.hq-mapping-pill{
  display:flex;align-items:center;gap:5px;
  padding:6px 10px;border-radius:var(--r);
  font-size:11px;font-weight:600;
}
.hq-mapping-pill.hs{background:rgba(255,255,255,.06);color:var(--t2)}
.hq-mapping-pill.qb{background:rgba(255,255,255,.06);color:var(--t2)}
.hq-mapping-arrow{color:var(--t3);font-size:12px}

/* Target selector pills */
.hq-target-pills{
  display:flex;background:var(--raised);border-radius:var(--r-f);
  border:1px solid var(--line-1);overflow:hidden;width:100%;
}
.hq-target-pill{
  flex:1;padding:8px 4px;text-align:center;
  font-size:11px;font-weight:600;color:var(--t3);
  cursor:pointer;transition:.15s;border:none;background:none;
  font-family:inherit;
}
.hq-target-pill:hover{color:var(--t1);background:var(--float)}
.hq-target-pill.active{
  background:var(--qb);color:#fff;
  border-radius:var(--r-f);
  box-shadow:0 2px 8px rgba(20,184,74,.25);
}

/* Sync actions */
.hq-actions{display:flex;gap:6px;width:100%}
.hq-company-warn{
  padding:10px 14px;border-radius:var(--r);font-size:12px;line-height:1.5;
  margin-bottom:8px;display:flex;align-items:center;gap:10px;
}
.hq-company-warn i{font-size:16px;flex-shrink:0}
.hq-company-warn div{margin-top:-1px}
.hq-company-warn.warn-error{background:var(--hs-s);border:1px solid rgba(255,122,89,.25);color:var(--hs)}
.hq-company-warn.warn-caution{background:var(--hs-s);border:1px solid rgba(255,122,89,.25);color:var(--hs)}
.hq-company-warn .warn-action{
  display:inline-block;margin-top:6px;padding:4px 12px;border-radius:var(--r);
  font-size:11px;font-weight:700;cursor:pointer;border:none;
  background:#f59e0b;color:#fff;font-family:inherit;
}
.hq-company-warn .warn-action:hover{filter:brightness(1.1)}
.hq-line-warn{
  padding:10px 14px;border-radius:var(--r);font-size:12px;line-height:1.5;
  margin-bottom:8px;display:flex;align-items:flex-start;gap:10px;
  background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3);color:#92400e;
}
.hq-line-warn i{font-size:15px;flex-shrink:0;margin-top:2px;color:#f59e0b}
.hq-line-warn strong{color:#b45309}
.hq-sync-btn{
  flex:1;padding:10px 8px;border-radius:var(--r);
  font-size:12px;font-weight:700;cursor:pointer;
  border:none;color:#fff;font-family:inherit;
  background:var(--qb);
  transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px;
}
.hq-sync-btn:hover{opacity:.85}
.hq-sync-btn:active{transform:scale(.97)}
.hq-sync-btn.syncing{pointer-events:none;opacity:.7}
.hq-sync-btn:disabled{opacity:.25;cursor:not-allowed}
.hq-sync-btn:disabled:hover{opacity:.25}
.hq-pull-btn{background:var(--hs)}
.hq-pull-btn:hover{opacity:.85}

/* Extra actions bar (+ Invoice, Send Email) */
.hq-extra-actions{display:none;width:100%;margin-top:6px;gap:6px;flex-direction:column}
.hq-extra-actions.visible{display:flex}
.hq-new-btn{
  width:100%;padding:8px;border-radius:var(--r-s);
  font-size:11px;font-weight:700;cursor:pointer;
  border:1px dashed #14B84A;color:#14B84A;background:rgba(20,184,74,.04);
  font-family:inherit;transition:.15s;display:flex;align-items:center;justify-content:center;gap:6px;
}
.hq-new-btn:hover{background:rgba(20,184,74,.1);border-style:solid}
.hq-email-row{
  display:flex;gap:6px;align-items:stretch;width:100%;
}
.hq-email-input{
  flex:1;padding:6px 8px;border:1px solid var(--line-1);border-radius:var(--r-s);
  font-size:11px;font-family:inherit;background:var(--raised);color:var(--t1);
  outline:none;min-width:0;
}
.hq-email-input:focus{border-color:var(--accent)}
.hq-email-input::placeholder{color:var(--t4)}
.hq-email-btn{
  padding:6px 12px;border-radius:var(--r-s);border:none;
  font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;
  background:#2563eb;color:#fff;font-family:inherit;
  display:flex;align-items:center;gap:4px;transition:.15s;
}
.hq-email-btn:hover{filter:brightness(1.1);box-shadow:0 2px 8px rgba(59,130,246,.3)}
.hq-sync-btn .hq-spinner{
  width:14px;height:14px;border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;
  display:none;
}
.hq-sync-btn.syncing .hq-spinner{display:inline-block}
.hq-sync-btn.syncing .hq-sync-label{display:none}

/* Status indicator */
.hq-status{
  display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:600;
  padding:6px 12px;border-radius:var(--r-f);width:100%;justify-content:center;
}
.hq-status.ready{background:rgba(255,255,255,.06);color:var(--t2)}
.hq-status.syncing{background:rgba(255,255,255,.06);color:var(--t2)}
.hq-status.error{background:var(--err-s);color:var(--err)}
.hq-status.new{background:rgba(255,255,255,.06);color:var(--t3)}
.hq-status-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}

/* Sync error banner */
.hq-sync-error{
  background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.25);border-radius:var(--r);
  padding:8px 12px;font-size:11px;color:#dc2626;line-height:1.4;
  display:flex;align-items:flex-start;gap:8px;
}
.hq-sync-error i{flex-shrink:0;margin-top:2px}
.hq-sync-error-text{flex:1;word-break:break-word}

/* Field count */
.hq-field-count{font-size:10px;color:var(--t3);text-align:center;cursor:default;position:relative}
.hq-field-count strong{color:var(--t2)}

/* Field mapping popover */
.fm-popover{position:fixed;z-index:9999;background:var(--surface);border:1px solid var(--line-0);border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.15);padding:10px 14px;min-width:280px;max-width:400px;max-height:300px;overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .15s}
.fm-popover.visible{opacity:1;pointer-events:auto}
.fm-pop-title{font-size:11px;font-weight:700;color:var(--t1);margin-bottom:8px}
.fm-pop-table{width:100%;border-collapse:collapse;font-size:10px}
.fm-pop-table th{font-size:9px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;padding:3px 6px 5px;text-align:left;border-bottom:1px solid var(--line-0)}
.fm-pop-table td{padding:4px 6px;color:var(--t1);border-bottom:1px solid var(--line-0)}
.fm-pop-table tr:last-child td{border-bottom:none}
.fm-pop-arrow{text-align:center;color:var(--t3);font-size:8px;width:24px}
.fm-pop-sep td{font-size:9px;font-weight:700;color:var(--accent);padding-top:8px;border-bottom:1px solid var(--line-0)}

/* Sync history footer */
.hq-history{
  background:var(--surface);border:1px solid var(--line-0);
  border-radius:var(--r);flex-shrink:0;
  overflow:hidden;
}
.hq-history-head{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;cursor:pointer;
}
.hq-history-head i.chevron{font-size:8px;color:var(--t3);transition:transform .2s}
.hq-history-head.open i.chevron{transform:rotate(180deg)}
.hq-history-title{font-size:11px;font-weight:600;color:var(--t2);flex:1}
.hq-history-body{max-height:0;overflow-y:auto;transition:max-height .3s ease}
.hq-history-head.open+.hq-history-body{max-height:400px}
.hq-history-body .tick{display:flex;align-items:center;gap:10px;padding:7px 14px;border-top:1px solid var(--line-0)}
.hq-history-body .tick:first-child{border-top:none}
.hq-history-body .tick:hover{background:var(--bg)}
.tick-time{font-size:9px;color:var(--t3);font-family:var(--mono);white-space:nowrap;flex-shrink:0;min-width:130px}
.tick-user{font-size:11px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tick-dir{font-size:10px;font-weight:600;white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:4px;margin-left:auto}
.tick-dir i{font-size:9px}
.tick-dir.dir-export{background:rgba(255,122,89,.1);color:var(--hs)}
.tick-dir.dir-import{background:rgba(20,184,74,.1);color:var(--qb)}
.tick-dir.dir-new{background:var(--warn-s);color:var(--warn)}
.tick-dir.dir-synced{background:rgba(120,120,140,.1);color:var(--t2)}
.tick-app{font-size:10px}
.tick-hs{color:var(--hs)}
.tick-qb{color:var(--qb)}

/* QB Audit History */
.hq-audit-badge{
  font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:10px;
  background:rgba(20,184,74,.1);color:#14B84A;
}
.hq-audit-badge i{font-size:7px}
.hq-audit-table{width:100%;font-size:11px;border-collapse:collapse;margin-top:8px}
.hq-audit-table th{
  text-align:left;font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);
  padding:4px 8px;border-bottom:1px solid var(--line-1);font-weight:600;
}
.hq-audit-table td{padding:6px 8px;border-bottom:1px solid var(--line-0);color:var(--t2)}
.hq-audit-table td.audit-date{font-family:var(--mono);font-size:10px;white-space:nowrap;color:var(--t3)}
.hq-audit-table td.audit-event{font-weight:600;color:var(--t1)}
.hq-audit-table td.audit-user{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hq-audit-table td.audit-field{font-weight:500}
.hq-audit-table td.audit-old{color:var(--t3);text-decoration:line-through;font-size:10px}
.hq-audit-table td.audit-new{color:var(--accent);font-weight:500}
.hq-audit-link-row{margin-top:10px;text-align:center}
.hq-audit-ext-link{
  font-size:11px;font-weight:500;color:var(--qb);
  display:inline-flex;align-items:center;gap:5px;transition:.15s;text-decoration:none;
}
.hq-audit-ext-link:hover{color:var(--accent);text-decoration:underline}
.hq-audit-ext-link i{font-size:9px}
.hq-audit-empty{font-size:11px;color:var(--t3);text-align:center;padding:12px;font-style:italic}


/* ═══════════════════════════════════════════════════════════
   RIGHT PANEL — AI Copilot
═══════════════════════════════════════════════════════════ */
.copilot{
  grid-area:copilot;
  background:var(--surface);
  border-left:1px solid var(--line-0);
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:opacity .25s, transform .35s cubic-bezier(.4,0,.2,1);
}
/* Collapsed copilot — slides out and hides */
.shell[data-copilot="collapsed"] .copilot{
  opacity:0;pointer-events:none;
  transform:translateX(20px);
}
/* Copilot expand tab — visible when collapsed */
.copilot-expand{
  position:fixed;right:0;top:50%;transform:translateY(-50%);
  z-index:150;
  width:36px;padding:12px 0;
  background:var(--surface);border:1px solid var(--line-1);
  border-right:none;border-radius:var(--r) 0 0 var(--r);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  cursor:pointer;box-shadow:-4px 0 20px rgba(0,0,0,.15);
  opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;
  transform:translateX(10px);
}
.copilot-expand i{color:var(--accent);font-size:14px}
.copilot-expand .expand-label{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-size:10px;font-weight:600;color:var(--t2);
  letter-spacing:.5px;
}
.copilot-expand:hover{background:var(--raised);border-color:var(--accent)}
.shell[data-copilot="collapsed"] .copilot-expand{
  opacity:1;pointer-events:all;transform:translateX(0);
}
.copilot-head{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--line-0);
  flex-shrink:0;
}
/* Copilot close/collapse button */
.copilot-close{
  margin-left:auto;width:28px;height:28px;
  border-radius:var(--r-s);background:transparent;
  border:1px solid var(--line-1);color:var(--t3);
  cursor:pointer;display:flex;align-items:center;
  justify-content:center;font-size:11px;transition:.15s;
}
.copilot-close:hover{background:var(--raised);color:var(--t1);border-color:var(--line-3)}
.copilot-orb{
  width:32px;height:32px;border-radius:var(--r);
  background:#2563eb;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:#fff;flex-shrink:0;
  position:relative;
}
.copilot-orb::after{
  content:'';position:absolute;inset:-2px;border-radius:inherit;
  background:#2563eb;
  opacity:.3;filter:blur(6px);z-index:-1;
}
.copilot-info{flex:1}
.copilot-name{font-size:13px;font-weight:600}
.copilot-status{font-size:10px;color:var(--ok)}

/* Chat messages */
.copilot-msgs{
  flex:1;overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:12px;
}
.msg{
  max-width:92%;border-radius:var(--r-l);
  padding:12px 16px;font-size:12px;line-height:1.6;
  animation:fadeUp .25s ease;
}
.msg.ai{
  background:var(--raised);border:1px solid var(--line-1);
  align-self:flex-start;
  border-bottom-left-radius:var(--r-s);
}
.msg.ai .msg-header{
  display:flex;align-items:center;gap:6px;
  margin-bottom:6px;font-size:10px;font-weight:600;
  color:var(--accent);
}
.msg.ai .msg-header i{font-size:9px}
.msg.user{
  background:var(--accent);color:#fff;
  align-self:flex-end;
  border-bottom-right-radius:var(--r-s);
}
.msg code{
  font-family:var(--mono);font-size:11px;
  background:rgba(0,0,0,.2);padding:1px 5px;
  border-radius:3px;
}
.msg-insight{
  margin-top:8px;padding:8px 10px;
  background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.12);
  border-radius:var(--r-s);
  font-size:11px;color:var(--accent);
}
.msg-table{
  width:100%;border-collapse:collapse;
  margin-top:8px;font-size:11px;
}
.msg-table th{
  text-align:left;padding:4px 8px;
  font-size:10px;color:var(--t3);font-weight:600;
  border-bottom:1px solid var(--line-1);
}
.msg-table td{padding:4px 8px;color:var(--t2)}
.msg-table td:last-child{text-align:right;font-family:var(--mono);color:var(--t1);font-weight:600}

/* Suggested prompts */
.copilot-suggestions{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:0 16px 10px;flex-shrink:0;
}
.copilot-sug{
  padding:6px 12px;border-radius:var(--r-f);
  background:var(--raised);border:1px solid var(--line-1);
  font-size:11px;color:var(--t2);cursor:pointer;transition:.15s;
}
.copilot-sug:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-s)}

/* Input */
.copilot-input-wrap{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;
  border-top:1px solid var(--line-0);
  background:color-mix(in srgb, var(--raised) 60%, transparent);
  flex-shrink:0;
}
.copilot-input{
  flex:1;background:var(--surface);
  border:1px solid var(--line-1);border-radius:var(--r);
  color:var(--t1);font-size:13px;padding:10px 14px;
  outline:none;transition:.15s;resize:none;
  max-height:80px;
}
.copilot-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-g)}
.copilot-input::placeholder{color:var(--t3)}
.copilot-send{
  width:38px;height:38px;border-radius:var(--r);
  background:var(--accent);border:none;color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:14px;transition:.15s;flex-shrink:0;
}
.copilot-send:hover{background:#1d4ed8;box-shadow:0 4px 14px var(--accent-g)}

/* ═══════════════════════════════════════════════════════════
   AGENT FEED — AI-first primary interface
═══════════════════════════════════════════════════════════ */

/* ── Mode Switcher ────────────────────────────────────── */
.mode-switcher{
  display:flex;align-items:center;
  background:var(--raised);border:1px solid var(--line-1);
  border-radius:var(--r-f);padding:2px;gap:1px;
}
.mode-opt{
  padding:5px 14px;border-radius:var(--r-f);
  font-size:11px;font-weight:600;color:var(--t3);
  cursor:pointer;transition:.15s;border:none;
  background:transparent;font-family:inherit;
  display:flex;align-items:center;gap:5px;
}
.mode-opt:hover{color:var(--t1)}
.mode-opt.active{background:var(--accent);color:#fff}
.mode-opt.active.auto{background:var(--ok);color:#fff}
.mode-opt i{font-size:10px}

/* ── Agent Status Bar ─────────────────────────────────── */
.agent-status-bar{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;
  background:var(--surface);border:1px solid var(--line-0);
  border-radius:var(--r);flex-shrink:0;
}
.agent-orb{
  width:28px;height:28px;border-radius:50%;
  background:#2563eb;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:#fff;flex-shrink:0;
  position:relative;
}
.agent-orb.thinking{animation:breathe 1.5s ease infinite}
.agent-orb.idle{opacity:.6}
.agent-status-text{font-size:12px;color:var(--t2);flex:1}
.agent-status-text strong{color:var(--t1)}
.agent-mode-label{
  font-size:10px;font-weight:600;
  padding:3px 10px;border-radius:var(--r-f);
}
.agent-mode-label.plan{background:var(--accent-s);color:var(--accent)}
.agent-mode-label.interactive{background:var(--warn-s);color:var(--warn)}
.agent-mode-label.auto{background:var(--ok-s);color:var(--ok)}

/* ── Agent Usage Button ───────────────────────────────── */
.agent-usage-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:var(--r-f);
  border:1px solid var(--line-0);background:transparent;
  font-size:11px;color:var(--t3);cursor:pointer;transition:.15s;white-space:nowrap;
}
.agent-usage-btn:hover{background:var(--surface);color:var(--t1);border-color:var(--accent)}
.agent-usage-btn .fa-gauge-high{font-size:10px}
.agent-usage-text{font-size:10px}
.agent-usage-pop{
  position:absolute;top:100%;right:0;margin-top:6px;z-index:100;
  background:var(--raised);border:1px solid var(--accent);border-radius:var(--r-m);
  box-shadow:0 8px 32px rgba(0,0,0,.5),0 0 0 1px rgba(37,99,235,.2);padding:14px 16px;min-width:230px;
  animation:fadeUp .2s ease;
}
.agent-usage-pop .au-bar{height:10px;border-radius:5px;background:rgba(255,255,255,.08);margin:8px 0;overflow:hidden;border:1px solid var(--line-1)}
.agent-usage-pop .au-fill{height:100%;border-radius:5px;transition:width .4s ease;min-width:4px}
/* ── Agent Chat Toggle ────────────────────────────────── */
.agent-chat-toggle{
  display:none;align-items:center;gap:5px;
  padding:4px 10px;border-radius:var(--r-f);
  background:var(--raised);border:1px solid var(--line-1);
  font-size:10px;font-weight:600;color:var(--t2);
  cursor:pointer;transition:.15s;white-space:nowrap;
}
.agent-chat-toggle.visible{display:inline-flex}
.agent-chat-toggle:hover{background:var(--surface);color:var(--t1);border-color:var(--accent)}
.agent-chat-toggle i{font-size:8px;transition:transform .2s}
.agent-chat-toggle.collapsed i{transform:rotate(180deg)}

/* collapsed: hide chat messages, keep cards visible */
.agent-feed.chat-collapsed>.msg{
  display:none !important;
}
.agent-feed.chat-collapsed>.agent-chat-collapsed-bar{
  display:flex;
}
.agent-chat-collapsed-bar{
  display:none;align-items:center;justify-content:center;gap:8px;
  padding:8px 16px;border-radius:var(--r-s);
  background:var(--raised);border:1px dashed var(--line-1);
  font-size:11px;color:var(--t3);cursor:pointer;
  transition:.15s;flex-shrink:0;
}
.agent-chat-collapsed-bar:hover{background:var(--surface);color:var(--t2);border-color:var(--accent)}
.agent-chat-collapsed-bar i{font-size:10px}

/* ── Agent Feed Container ─────────────────────────────── */
#view_agent{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:hidden}
.agent-feed{
  flex:1;overflow-y:auto;
  display:flex;flex-direction:column;gap:12px;
  padding-bottom:16px;
}

/* ── Agent Messages in Feed ───────────────────────────── */
.agent-feed .msg{
  padding:12px 16px;border-radius:var(--r-l);
  font-size:13px;line-height:1.6;
  animation:fadeUp .3s ease;max-width:88%;flex-shrink:0;
}
.agent-feed .msg.ai{
  background:var(--surface);border:1px solid var(--line-0);
  color:var(--t1);align-self:flex-start;
}
.agent-feed .msg.user{
  background:var(--accent);color:#fff;
  align-self:flex-end;
}
.agent-feed .msg-header{
  display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;color:var(--accent);
  margin-bottom:6px;
}
.agent-feed .msg-header i{font-size:10px}
.agent-feed .msg strong{color:var(--t1)}
.agent-feed .msg.user strong{color:#fff}
.agent-feed .msg-insight{
  margin-top:8px;padding:8px 12px;
  background:var(--raised);border:1px solid var(--line-0);
  border-radius:var(--r-s);font-size:11px;color:var(--t2);
}

/* ── Action Cards ─────────────────────────────────────── */
.action-card{
  background:var(--surface);border:1px solid var(--line-1);
  border-radius:var(--r-l);overflow:hidden;
  animation:fadeUp .3s ease;transition:border-color .2s,opacity .2s;
  flex-shrink:0;
}
.action-card:hover{border-color:var(--line-2)}
.action-card.approved{border-color:rgba(20,184,74,.3)}
.action-card.rejected{border-color:rgba(248,113,113,.2);opacity:.55}
.action-card.executing{border-color:rgba(37,99,235,.3)}
.action-card.completed{border-color:rgba(20,184,74,.2)}

.ac-head{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--line-0);
}
.ac-icon{
  width:32px;height:32px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;flex-shrink:0;
}
.ac-icon.mapping{background:var(--accent-s);color:var(--accent)}
.ac-icon.sync{background:var(--ok-s);color:var(--ok)}
.ac-icon.conflict{background:var(--warn-s);color:var(--warn)}
.ac-icon.error{background:var(--err-s);color:var(--err)}
.ac-icon.field{background:var(--accent-s);color:var(--accent)}
.ac-icon.analysis{background:var(--ok-s);color:var(--ok)}
.ac-title{font-size:13px;font-weight:600;color:var(--t1);flex:1}
.ac-time{font-family:var(--mono);font-size:9px;color:var(--t3)}

.ac-badge{
  font-size:10px;font-weight:600;
  padding:3px 10px;border-radius:var(--r-f);
  display:flex;align-items:center;gap:4px;
}
.ac-badge.thinking{background:var(--accent-s);color:var(--accent)}
.ac-badge.proposed{background:var(--warn-s);color:var(--warn)}
.ac-badge.approved,.ac-badge.completed{background:var(--ok-s);color:var(--ok)}
.ac-badge.executing{background:var(--accent-s);color:var(--accent)}
.ac-badge.rejected{background:var(--err-s);color:var(--err)}
.ac-badge.auto{background:var(--ok-s);color:var(--ok)}

.ac-badge-dot{
  width:6px;height:6px;border-radius:50%;
  background:currentColor;flex-shrink:0;
}
.ac-badge.thinking .ac-badge-dot{animation:breathe 1.5s ease infinite}
.ac-badge.executing .ac-badge-dot{
  animation:spin .8s linear infinite;
  border:1.5px solid transparent;border-top-color:currentColor;
  background:transparent;width:8px;height:8px;border-radius:50%;
}

.ac-body{padding:12px 16px}
.ac-desc{font-size:12px;color:var(--t2);line-height:1.6}
.ac-desc strong{color:var(--t1)}
.ac-desc code{
  font-family:var(--mono);font-size:11px;
  background:var(--raised);padding:1px 5px;
  border-radius:3px;color:var(--accent);
}

.ac-impact{
  margin-top:10px;padding:10px 12px;
  background:var(--raised);border:1px solid var(--line-0);
  border-radius:var(--r-s);
}
.ac-impact-title{
  font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--t3);margin-bottom:6px;
}
.ac-impact-list{list-style:none;display:flex;flex-direction:column;gap:4px;padding:0;margin:0}
.ac-impact-item{
  display:flex;align-items:center;gap:6px;
  font-size:11px;color:var(--t2);
}
.ac-impact-item i{font-size:9px;width:14px;text-align:center;flex-shrink:0}
.ac-impact-item i.ok{color:var(--ok)}
.ac-impact-item i.warn{color:var(--warn)}
.ac-impact-item i.accent{color:var(--accent)}

.ac-details-toggle{
  display:flex;align-items:center;gap:5px;
  padding:6px 0 0;cursor:pointer;
  font-size:10px;font-weight:600;color:var(--t3);
  transition:.15s;border:none;background:none;font-family:inherit;
}
.ac-details-toggle:hover{color:var(--accent)}
.ac-details-toggle i{font-size:8px;transition:transform .2s}
.ac-details-toggle.open i{transform:rotate(180deg)}
.ac-details{max-height:0;overflow:hidden;transition:max-height .3s ease}
.ac-details.open{max-height:500px}
.ac-details-inner{
  padding:10px 0 0;border-top:1px solid var(--line-0);margin-top:10px;
}

.ac-foot{
  display:flex;align-items:center;gap:8px;
  padding:10px 16px;border-top:1px solid var(--line-0);
  background:color-mix(in srgb, var(--raised) 50%, transparent);
}
.ac-btn{
  padding:6px 16px;border-radius:var(--r);
  font-size:11px;font-weight:600;cursor:pointer;
  border:none;transition:.15s;font-family:inherit;
  display:flex;align-items:center;gap:5px;
}
.ac-btn:active{transform:scale(.97)}
.ac-btn.approve{background:var(--ok);color:#fff}
.ac-btn.approve:hover{filter:brightness(1.1)}
.ac-btn.reject{background:var(--err-s);color:var(--err);border:1px solid rgba(248,113,113,.15)}
.ac-btn.reject:hover{background:var(--err);color:#fff}
.ac-btn.modify{background:var(--raised);color:var(--t2);border:1px solid var(--line-1)}
.ac-btn.modify:hover{color:var(--t1);border-color:var(--line-3)}
.ac-btn i{font-size:10px}

.ac-auto-accepted{
  display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:500;color:var(--ok);
  padding:10px 16px;border-top:1px solid var(--line-0);
}
.ac-auto-accepted i{font-size:12px}

/* ── Thinking Indicator ───────────────────────────────── */
.thinking-indicator{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;
  background:var(--surface);border:1px solid var(--line-0);
  border-radius:var(--r-l);animation:fadeUp .3s ease;flex-shrink:0;
}
.thinking-dots{display:flex;gap:4px}
.thinking-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  animation:thinkingBounce 1.4s ease-in-out infinite;
}
.thinking-dot:nth-child(2){animation-delay:.2s}
.thinking-dot:nth-child(3){animation-delay:.4s}
.thinking-text{transition:opacity .2s ease;font-size:12px;color:var(--t3)}
@keyframes thinkingBounce{
  0%,60%,100%{transform:translateY(0);opacity:.4}
  30%{transform:translateY(-8px);opacity:1}
}

/* ── Progress Bar ─────────────────────────────────────── */
.ac-progress{
  margin-top:10px;background:var(--raised);
  border-radius:var(--r-f);height:4px;overflow:hidden;
}
.ac-progress-bar{
  height:100%;border-radius:var(--r-f);
  background:linear-gradient(90deg,var(--accent),var(--ok));
  transition:width .6s cubic-bezier(.4,0,.2,1);
}

/* ── Plan Cards (grouped actions) ─────────────────────── */
.plan-card{
  background:var(--surface);border:1px solid var(--line-1);
  border-radius:var(--r-l);overflow:hidden;
  animation:fadeUp .3s ease;flex-shrink:0;
}
.plan-card.all-approved{border-color:rgba(20,184,74,.3)}
.plan-head{
  display:flex;align-items:center;gap:12px;
  padding:16px 20px;
  background:rgba(37,99,235,.05);
  border-bottom:1px solid var(--line-0);
}
.plan-orb{
  width:38px;height:38px;border-radius:var(--r);
  background:#2563eb;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:#fff;flex-shrink:0;
}
.plan-title{font-size:15px;font-weight:700;color:var(--t1);flex:1}
.plan-count{font-size:11px;font-weight:600;color:var(--t3);font-family:var(--mono)}
.plan-actions{display:flex;flex-direction:column}
.plan-action{
  display:flex;align-items:center;gap:12px;
  padding:12px 20px;
  border-bottom:1px solid var(--line-0);
  transition:.15s;
}
.plan-action:last-child{border-bottom:none}
.plan-action:hover{background:var(--hover)}
.plan-action-num{
  width:24px;height:24px;border-radius:50%;
  background:var(--raised);border:1px solid var(--line-1);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:var(--t3);flex-shrink:0;
  transition:.3s;
}
.plan-action.done .plan-action-num{
  background:var(--ok);border-color:var(--ok);color:#fff;
}
.plan-action-body{flex:1}
.plan-action-title{font-size:12px;font-weight:600;color:var(--t1)}
.plan-action-desc{font-size:11px;color:var(--t3);margin-top:2px}
.plan-foot{
  display:flex;align-items:center;gap:8px;
  padding:14px 20px;
  border-top:1px solid var(--line-0);
  background:color-mix(in srgb, var(--raised) 50%, transparent);
}
.plan-approve-all{
  padding:8px 24px;border-radius:var(--r);
  font-size:12px;font-weight:700;cursor:pointer;
  border:none;color:#fff;font-family:inherit;
  background:linear-gradient(135deg,var(--ok),#14B84A);
  transition:.15s;display:flex;align-items:center;gap:6px;
}
.plan-approve-all:hover{filter:brightness(1.1);box-shadow:0 4px 16px rgba(20,184,74,.3)}
.plan-reject-all{
  padding:8px 16px;border-radius:var(--r);
  font-size:12px;font-weight:600;cursor:pointer;
  background:var(--raised);color:var(--t2);
  border:1px solid var(--line-1);font-family:inherit;transition:.15s;
}
.plan-reject-all:hover{color:var(--err);border-color:rgba(248,113,113,.3)}

/* ── Mapping Selector Card ────────────────────────────── */
.ms-card{
  background:var(--surface);border:1px solid var(--line-1);
  border-radius:var(--r-l);overflow:hidden;
  animation:fadeUp .3s ease;flex-shrink:0;
}
.ms-card.confirmed{border-color:rgba(20,184,74,.3)}
.ms-head{
  display:flex;align-items:center;gap:12px;
  padding:16px 20px;
  background:rgba(37,99,235,.05);
  border-bottom:1px solid var(--line-0);
}
.ms-orb{
  width:38px;height:38px;border-radius:var(--r);
  background:#2563eb;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:#fff;flex-shrink:0;
}
.ms-title{font-size:15px;font-weight:700;color:var(--t1);flex:1}
.ms-count{font-size:11px;font-weight:600;color:var(--accent);font-family:var(--mono)}
.ms-subtitle{
  padding:10px 20px;font-size:11px;color:var(--t3);
  border-bottom:1px solid var(--line-0);
  background:var(--raised);
}
.ms-group-label{
  padding:8px 20px 4px;font-size:9px;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;color:var(--t4);background:var(--bg);
  border-bottom:1px solid var(--line-0);
}
.ms-rows{
  display:flex;flex-direction:column;
  max-height:420px;overflow-y:auto;
  position:relative;
}
.ms-rows::-webkit-scrollbar{width:4px}
.ms-rows::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
.ms-rows-wrap{position:relative}
.ms-rows-wrap::before,.ms-rows-wrap::after{
  content:'';position:sticky;display:block;height:0;
  left:0;right:0;z-index:2;pointer-events:none;
  transition:height .2s;
}
.ms-rows-wrap::before{top:0;background:linear-gradient(to bottom,var(--surface),transparent)}
.ms-rows-wrap::after{bottom:0;background:linear-gradient(to top,var(--surface),transparent)}
.ms-rows.has-scroll-top::before{height:24px}
.ms-rows.has-scroll-bottom::after{height:24px}
.ms-scroll-fade-top,.ms-scroll-fade-bottom{
  position:sticky;z-index:2;display:block;height:0;
  pointer-events:none;transition:height .2s,opacity .2s;opacity:0;
}
.ms-scroll-fade-top{top:0;background:linear-gradient(to bottom,var(--surface) 0%,transparent 100%)}
.ms-scroll-fade-bottom{bottom:0;background:linear-gradient(to top,var(--surface) 0%,transparent 100%)}
.ms-scroll-fade-top.visible,.ms-scroll-fade-bottom.visible{height:28px;opacity:1}
.ms-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 20px;flex-wrap:wrap;
  border-bottom:1px solid var(--line-0);
  transition:.15s;cursor:pointer;
}
.ms-tip{
  width:100%;font-size:11px;color:var(--t3);
  padding-left:28px;margin-top:-2px;
  line-height:1.3;
}
.ms-tip b{color:var(--t2);font-weight:600}
.ms-row:last-child{border-bottom:none}
.ms-row:hover{background:var(--hover)}
.ms-row.selected{background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.ms-row.disabled{opacity:.35;pointer-events:none}
.ms-chk{
  width:18px;height:18px;border-radius:5px;
  border:2px solid var(--line-2);display:flex;
  align-items:center;justify-content:center;
  font-size:10px;color:transparent;transition:.15s;flex-shrink:0;
}
.ms-row.selected .ms-chk{background:var(--accent);border-color:var(--accent);color:#fff}
.ms-entity{
  display:flex;align-items:center;gap:6px;min-width:0;
}
.ms-entity-icon{
  width:26px;height:26px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;flex-shrink:0;
}
.ms-entity-icon.hs{background:var(--hs-s);color:var(--hs)}
.ms-entity-icon.qb{background:var(--qb-s);color:var(--qb)}
.ms-entity-name{font-size:12px;font-weight:600;color:var(--t1);white-space:nowrap}
.ms-arrow{
  font-size:10px;color:var(--t4);flex-shrink:0;
  margin:0 2px;
}
.ms-dir{
  padding:4px 8px;border-radius:var(--r-s);
  font-size:10px;font-weight:600;cursor:pointer;
  background:var(--raised);color:var(--t2);
  border:1px solid var(--line-1);font-family:inherit;
  outline:none;transition:.15s;min-width:0;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 6px center;
  padding-right:20px;
}
.ms-dir:focus{border-color:var(--accent)}
.ms-badges{display:flex;gap:4px;margin-left:auto;align-items:center;flex-shrink:0}
.ms-badge{
  font-size:9px;font-weight:700;letter-spacing:.3px;
  padding:2px 7px;border-radius:10px;text-transform:uppercase;
  white-space:nowrap;
}
.ms-badge.rec{background:var(--accent-s);color:var(--accent)}
.ms-badge.ess{background:var(--ok-s);color:var(--ok)}
.ms-badge.pop{background:var(--warn-s);color:var(--warn)}
.ms-badge.adv{background:var(--raised);color:var(--t3)}
.ms-badge.addon{background:linear-gradient(135deg,rgba(37,99,235,.15),rgba(255,122,89,.15));color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent)}
.ms-dep{font-size:9px;color:var(--t4);font-style:italic;white-space:nowrap}
.ms-foot{
  display:flex;align-items:center;gap:8px;
  padding:14px 20px;
  border-top:1px solid var(--line-0);
  background:color-mix(in srgb, var(--raised) 50%, transparent);
}
.ms-confirm-btn{
  padding:9px 24px;border-radius:var(--r);
  font-size:12px;font-weight:700;cursor:pointer;
  border:none;color:#fff;font-family:inherit;
  background:linear-gradient(135deg,var(--ok),#14B84A);
  transition:.15s;display:flex;align-items:center;gap:6px;
}
.ms-confirm-btn:hover{filter:brightness(1.1);box-shadow:0 4px 16px rgba(20,184,74,.3)}
.ms-confirm-btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.ms-cancel-btn{
  padding:8px 16px;border-radius:var(--r);
  font-size:12px;font-weight:600;cursor:pointer;
  background:var(--raised);color:var(--t2);
  border:1px solid var(--line-1);font-family:inherit;transition:.15s;
}
.ms-cancel-btn:hover{color:var(--err);border-color:rgba(248,113,113,.3)}
.ms-sel-info{font-size:11px;color:var(--t3);margin-left:auto;font-family:var(--mono)}
.ms-help{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 20px;font-size:11px;color:var(--t3);
  border-top:1px solid var(--line-0);
  background:color-mix(in srgb, var(--raised) 40%, transparent);
}
.ms-help i{color:var(--accent);font-size:14px;flex-shrink:0}
.ms-help a{color:var(--accent);text-decoration:none;font-weight:600}
.ms-help a:hover{text-decoration:underline}
.ms-custom{text-align:center;padding:12px 20px}
.ms-custom a{font-size:11px;color:var(--t3);cursor:pointer;transition:color .15s;text-decoration:none}
.ms-custom a:hover{color:var(--accent)}
.ms-custom a i{margin-left:4px;font-size:10px}

/* ── Agent Input Bar ──────────────────────────────────── */
.agent-input-bar{
  background:var(--bg);
  border-top:1px solid var(--line-0);
  padding:12px 0 0;flex-shrink:0;
  display:flex;flex-direction:column;gap:8px;
}
.agent-input-row{display:flex;align-items:flex-end;gap:8px}
.agent-textarea{
  flex:1;background:var(--surface);
  border:1px solid var(--line-1);border-radius:var(--r-l);
  color:var(--t1);font-size:13px;padding:12px 16px;
  outline:none;transition:.15s;resize:none;
  max-height:120px;min-height:44px;
  font-family:inherit;line-height:1.5;
}
.agent-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-g)}
.agent-textarea::placeholder{color:var(--t3)}
.agent-send{
  width:42px;height:42px;border-radius:var(--r);
  background:var(--accent);border:none;color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:15px;transition:.15s;flex-shrink:0;
}
.agent-send:hover{background:#1d4ed8;box-shadow:0 4px 14px var(--accent-g)}
.agent-history{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-bottom:6px}
.agent-history-label{font-size:10px;color:var(--t4);margin-right:2px}
.agent-history-item{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:var(--r-f);
  background:var(--bg-2);border:1px solid var(--line-0);
  font-size:10px;color:var(--t3);cursor:pointer;transition:.15s;max-width:200px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.agent-history-item:hover{border-color:var(--accent);color:var(--accent);background:var(--bg-1)}
.agent-history-item .fa-xmark{font-size:8px;color:var(--t4);margin-left:2px;opacity:0;transition:.15s}
.agent-history-item:hover .fa-xmark{opacity:1}
.agent-history-clear{font-size:9px;color:var(--t4);cursor:pointer;margin-left:4px;padding:2px 6px;border-radius:var(--r-s)}
.agent-history-clear:hover{color:var(--err)}
/* Agent visual components */
.ag-stats{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.ag-stat{
  flex:1;min-width:90px;padding:10px 12px;border-radius:var(--r-m);
  background:var(--bg-1);border:1px solid var(--line-0);text-align:center;
}
.ag-stat-val{font-size:18px;font-weight:800;line-height:1.2;margin-bottom:2px}
.ag-stat-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--t4);font-weight:600}
.ag-stat.green .ag-stat-val{color:#14B84A}
.ag-stat.red .ag-stat-val{color:#ef4444}
.ag-stat.accent .ag-stat-val{color:var(--accent)}
.ag-stat.gray .ag-stat-val{color:var(--t3)}
.ag-bar-chart{margin:10px 0;display:flex;flex-direction:column;gap:6px}
.ag-bar-row{display:flex;align-items:center;gap:8px}
.ag-bar-label{font-size:11px;color:var(--t2);min-width:100px;text-align:right;flex-shrink:0}
.ag-bar-track{flex:1;height:20px;background:var(--bg-1);border-radius:var(--r-s);overflow:hidden;border:1px solid var(--line-0)}
.ag-bar-fill{height:100%;border-radius:var(--r-s);transition:width .6s ease;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-size:9px;font-weight:700;color:#fff;min-width:fit-content}
.ag-bar-fill.c0{background:#2563eb}
.ag-bar-fill.c1{background:linear-gradient(90deg,#3b82f6,#60a5fa)}
.ag-bar-fill.c2{background:linear-gradient(90deg,#14B84A,#4ade80)}
.ag-bar-fill.c3{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.ag-bar-fill.c4{background:linear-gradient(90deg,#ef4444,#f87171)}
.ag-bar-fill.c5{background:linear-gradient(90deg,#ec4899,#f472b6)}
.ag-progress{margin:10px 0}
.ag-progress-track{height:22px;background:var(--bg-1);border-radius:var(--r-f);overflow:hidden;border:1px solid var(--line-0);position:relative}
.ag-progress-fill{height:100%;border-radius:var(--r-f);background:linear-gradient(90deg,#14B84A,#4ade80);transition:width .8s ease}
.ag-progress-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--t1)}
.agent-suggestions{display:flex;flex-wrap:wrap;gap:6px}
.agent-sug{
  padding:5px 12px;border-radius:var(--r-f);
  background:var(--raised);border:1px solid var(--line-1);
  font-size:11px;color:var(--t2);cursor:pointer;transition:.15s;
}
.agent-sug:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-s)}

/* ═══════════════════════════════════════════════════════════
   SYNC FEED — Continuous real-time sync stream
═══════════════════════════════════════════════════════════ */
#view_bulk{display:flex;flex-direction:column;min-height:0;overflow:hidden;gap:0}

/* ── Header bar ───────────────────────────────────────── */
.sf-header{
  display:flex;align-items:center;gap:12px;
  padding:0 0 14px;flex-shrink:0;
}
.sf-header-left{flex:1;display:flex;flex-direction:column;gap:2px}
.sf-header-left h2{font-size:18px;font-weight:800;margin:0;display:flex;align-items:center;gap:8px}
.sf-subtitle{font-size:11px;color:var(--t3);font-weight:400}
.sf-live-dot{
  width:8px;height:8px;border-radius:50%;background:var(--ok);
  animation:sfPulse 2s ease infinite;flex-shrink:0;
}
@keyframes sfPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(20,184,74,.4)}50%{opacity:.7;box-shadow:0 0 0 6px rgba(20,184,74,0)}}
.sf-live-dot.paused{background:var(--warn);animation:none}

/* ── Admin badge ─────────────────────────────────────── */
.sf-admin-badge{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  padding:3px 8px;border-radius:var(--r-f);
  background:rgba(37,99,235,.1);color:var(--accent);
  display:flex;align-items:center;gap:4px;white-space:nowrap;
}

/* ── Mode toggle ──────────────────────────────────────── */
.sf-mode{
  display:flex;align-items:center;gap:0;
  background:var(--raised);border-radius:var(--r);
  border:1px solid var(--line-1);overflow:hidden;
}
.sf-mode-opt{
  padding:7px 18px;font-size:11px;font-weight:600;
  cursor:pointer;border:none;background:none;
  color:var(--t3);font-family:inherit;transition:.15s;
  display:flex;align-items:center;gap:5px;
}
.sf-mode-opt:hover{color:var(--t1)}
.sf-mode-opt.active{background:var(--accent);color:#fff}
.sf-mode-opt.active.auto-mode{background:var(--ok);color:#fff}
.sf-mode-label{
  font-size:10px;font-weight:600;padding:3px 10px;border-radius:var(--r-f);
  margin-left:8px;
}
.sf-mode-label.approval{background:var(--accent-s);color:var(--accent)}
.sf-mode-label.auto{background:var(--ok-s);color:var(--ok)}

/* ── Subscriber label in feed items ──────────────────── */
.sf-item-subscriber{
  font-size:9px;color:var(--t4);font-weight:600;
  display:flex;align-items:center;gap:3px;
}
.sf-item-subscriber i{font-size:7px}

/* ── Stats bar ────────────────────────────────────────── */
.sf-stats{
  display:flex;align-items:center;gap:6px;
  padding:0 0 14px;flex-shrink:0;
  border-bottom:1px solid var(--line-0);
  flex-wrap:wrap;
}
.sf-stat{
  display:flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:var(--r);
  background:var(--raised);border:1px solid var(--line-0);
  font-size:11px;color:var(--t3);flex:1;min-width:120px;
}
.sf-stat-val{font-size:18px;font-weight:800;font-family:var(--mono);color:var(--t1);line-height:1}
.sf-stat-label{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--t3)}
.sf-stat i{font-size:14px;opacity:.5}
.sf-stat.ok .sf-stat-val{color:var(--ok)}
.sf-stat.err .sf-stat-val{color:var(--err)}
.sf-stat.warn .sf-stat-val{color:var(--warn)}
.sf-stat.accent .sf-stat-val{color:var(--accent)}


/* ── AI Query Bar ────────────────────────────────────── */
.sfq-bar{
  display:flex;flex-direction:column;gap:0;
  padding:12px 0 0;flex-shrink:0;
}
.sfq-input-row{
  display:flex;align-items:center;gap:8px;
}
.sfq-input-wrap{
  flex:1;position:relative;display:flex;align-items:center;
}
.sfq-input-wrap .sfq-icon{
  position:absolute;left:11px;font-size:12px;pointer-events:none;
  transition:color .2s;
  background:#2563eb;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.sfq-input-wrap:focus-within .sfq-icon{
  filter:brightness(1.3);
}
.sfq-input{
  width:100%;padding:9px 70px 9px 32px;border-radius:var(--r);
  border:1px solid var(--line-1);background:var(--raised);
  color:var(--t1);font-size:11px;font-family:inherit;
  outline:none;transition:.15s;
}
.sfq-input::placeholder{color:var(--t4);font-style:italic}
.sfq-input:focus{
  border-color:var(--accent);background:var(--surface);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 12%,transparent);
}
.sfq-actions{
  position:absolute;right:6px;display:flex;align-items:center;gap:4px;
}
.sfq-save-btn{
  display:none;align-items:center;gap:3px;
  padding:3px 8px;border-radius:var(--r-s);font-size:9px;font-weight:600;
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  background:var(--accent-s);color:var(--accent);cursor:pointer;
  font-family:inherit;transition:.15s;white-space:nowrap;
}
.sfq-save-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.sfq-save-btn i{font-size:8px}
.sfq-input-wrap.has-query .sfq-save-btn{display:flex}
.sfq-input-wrap.has-query .sfq-save-btn.saved{
  border-color:color-mix(in srgb,var(--ok) 30%,transparent);
  background:var(--ok-s);color:var(--ok);pointer-events:none;
}
.sfq-clear-btn{
  display:none;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;border:none;
  background:var(--line-1);color:var(--t3);cursor:pointer;
  font-size:9px;transition:.15s;
}
.sfq-clear-btn:hover{background:var(--err);color:#fff}
.sfq-input-wrap.has-query .sfq-clear-btn{display:flex}
.sfq-count{
  font-size:9px;color:var(--t4);font-family:var(--mono);white-space:nowrap;flex-shrink:0;
}

/* ── Saved Queries shelf ─────────────────────────────── */
.sfq-shelf{
  display:flex;align-items:center;gap:6px;
  padding:8px 0 0;overflow-x:auto;flex-shrink:0;
  scrollbar-width:none;
}
.sfq-shelf::-webkit-scrollbar{display:none}
.sfq-shelf-label{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--t4);white-space:nowrap;flex-shrink:0;
}
.sfq-saved{
  display:flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:var(--r-f);font-size:10px;
  border:1px solid var(--line-1);background:var(--raised);
  color:var(--t2);cursor:pointer;font-family:inherit;
  transition:.15s;white-space:nowrap;flex-shrink:0;max-width:240px;overflow:hidden;text-overflow:ellipsis;
}
.sfq-saved:hover{border-color:var(--accent);color:var(--t1);background:color-mix(in srgb,var(--accent) 5%,var(--raised))}
.sfq-saved.active{
  border-color:var(--accent);color:var(--accent);
  background:var(--accent-s);font-weight:600;
}
.sfq-saved i.sfq-saved-icon{
  font-size:9px;opacity:.5;flex-shrink:0;
}
.sfq-saved-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sfq-saved-del{
  display:flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;border:none;
  background:transparent;color:var(--t4);cursor:pointer;
  font-size:8px;transition:.15s;flex-shrink:0;margin-left:auto;
  opacity:0;
}
.sfq-saved:hover .sfq-saved-del{opacity:1}
.sfq-saved-del:hover{background:var(--err);color:#fff;opacity:1}
.sfq-empty-hint{
  font-size:10px;color:var(--t4);font-style:italic;
}

/* ── Filter tabs ──────────────────────────────────────── */
.sf-filters{
  display:flex;align-items:center;gap:6px;
  padding:8px 0 0;flex-shrink:0;
}
.sf-filter{
  padding:5px 12px;border-radius:var(--r-f);
  font-size:10px;font-weight:600;cursor:pointer;
  background:none;color:var(--t3);border:1px solid transparent;
  transition:.15s;font-family:inherit;
}
.sf-filter:hover{color:var(--t1);background:var(--raised)}
.sf-filter.active{background:var(--surface);color:var(--t1);border-color:var(--line-1)}
.sf-filter .sf-filter-count{
  font-size:9px;padding:1px 5px;border-radius:var(--r-f);
  background:var(--raised);margin-left:4px;font-family:var(--mono);
}
.sf-filter.active .sf-filter-count{background:var(--accent-s);color:var(--accent)}

/* ── Feed container ───────────────────────────────────── */
.sf-feed{flex:1;overflow-y:auto;min-height:0;padding:12px 0 0;display:flex;flex-direction:column;gap:4px}

/* ── Feed item ────────────────────────────────────────── */
.sf-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line-0);
  transition:.2s;flex-shrink:0;animation:fadeUp .25s ease;
}
.sf-item:hover{border-color:var(--line-1)}
.sf-item.pending{border-left:3px solid var(--accent)}
.sf-item.syncing{border-left:3px solid var(--warn);background:color-mix(in srgb,var(--warn) 3%,var(--surface))}
.sf-item.synced{border-left:3px solid var(--ok);opacity:.7}
.sf-item.failed{border-left:3px solid var(--err);background:color-mix(in srgb,var(--err) 3%,var(--surface))}
.sf-item.exception{border-left:3px solid var(--warn);background:color-mix(in srgb,var(--warn) 4%,var(--surface))}

/* item icon */
.sf-item-icon{
  width:32px;height:32px;border-radius:var(--r-s);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;flex-shrink:0;
}
.sf-item-icon.hs{background:var(--hs-s);color:var(--hs)}
.sf-item-icon.qb{background:var(--qb-s);color:var(--qb)}
.sf-item-icon.err{background:var(--err-s);color:var(--err)}
.sf-item-icon.warn{background:var(--warn-s);color:var(--warn)}

/* item body */
.sf-item-body{flex:1;min-width:0}
.sf-item-title{font-size:12px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-item-meta{font-size:10px;color:var(--t3);margin-top:1px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sf-item-mapping{
  font-size:9px;font-weight:600;padding:1px 6px;border-radius:var(--r-f);
  background:var(--raised);color:var(--t2);
}
.sf-item-time{font-family:var(--mono);font-size:9px;color:var(--t4)}
.sf-item-amount{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ok);white-space:nowrap}
.sf-item-err{font-size:10px;color:var(--err);margin-top:3px}

/* item status badge */
.sf-item-status{
  font-size:9px;font-weight:700;padding:3px 8px;border-radius:var(--r-f);
  text-transform:uppercase;letter-spacing:.3px;flex-shrink:0;
}
.sf-item-status.pending{background:var(--accent-s);color:var(--accent)}
.sf-item-status.syncing{background:var(--warn-s);color:var(--warn)}
.sf-item-status.synced{background:var(--ok-s);color:var(--ok)}
.sf-item-status.failed{background:var(--err-s);color:var(--err)}
.sf-item-status.exception{background:var(--warn-s);color:var(--warn)}

/* item actions (approval mode) */
.sf-item-actions{display:flex;gap:4px;flex-shrink:0}
.sf-act{
  padding:4px 10px;border-radius:var(--r-s);
  font-size:10px;font-weight:600;cursor:pointer;
  border:1px solid var(--line-1);background:var(--raised);
  color:var(--t2);font-family:inherit;transition:.15s;
}
.sf-act.approve{border-color:rgba(20,184,74,.3);color:var(--ok)}
.sf-act.approve:hover{background:var(--ok);color:#fff;border-color:var(--ok)}
.sf-act.skip{border-color:rgba(248,113,113,.2);color:var(--t3)}
.sf-act.skip:hover{background:var(--err-s);color:var(--err)}

/* ── Batch summary (auto mode) ────────────────────────── */
.sf-batch{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;border-radius:var(--r);
  background:color-mix(in srgb,var(--ok) 5%,var(--surface));
  border:1px solid color-mix(in srgb,var(--ok) 15%,var(--line-0));
  font-size:11px;color:var(--t2);flex-shrink:0;animation:fadeUp .25s ease;
}
.sf-batch-icon{
  width:28px;height:28px;border-radius:50%;
  background:var(--ok-s);color:var(--ok);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;flex-shrink:0;
}
.sf-batch-body{flex:1}
.sf-batch-title{font-weight:600;color:var(--t1)}
.sf-batch-time{font-family:var(--mono);font-size:9px;color:var(--t4);margin-left:auto;flex-shrink:0}

/* ── Empty state ──────────────────────────────────────── */
.sf-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:1;gap:8px;text-align:center;color:var(--t3);padding:40px 0;
}
.sf-empty i{font-size:28px;opacity:.2}

/* ═══════════════════════════════════════════════════════════
   COMMAND PALETTE
═══════════════════════════════════════════════════════════ */
.cmd-bg{
  position:fixed;inset:0;z-index:9000;
  background:rgba(0,0,0,.55);backdrop-filter:blur(8px);
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:min(18vh,140px);
  opacity:0;pointer-events:none;transition:.15s;
}
.cmd-bg.open{opacity:1;pointer-events:all}
.cmd-box{
  width:100%;max-width:540px;
  background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-xl);box-shadow:0 20px 60px rgba(0,0,0,.5);
  overflow:hidden;
  transform:scale(.97) translateY(-6px);transition:.15s;
}
.cmd-bg.open .cmd-box{transform:scale(1) translateY(0)}
.cmd-bar{
  display:flex;align-items:center;gap:10px;
  padding:14px 18px;border-bottom:1px solid var(--line-1);
}
.cmd-bar i{color:var(--t3);font-size:15px}
.cmd-bar input{flex:1;background:none;border:none;color:var(--t1);font-size:15px;outline:none}
.cmd-bar input::placeholder{color:var(--t3)}
.cmd-list{max-height:420px;overflow-y:auto;padding:6px}
.cmd-group{padding:8px 12px 4px;font-size:9px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.6px}
.cmd-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:var(--r);
  cursor:pointer;transition:.12s;
}
.cmd-row:hover,.cmd-row.sel{background:var(--hover)}
.cmd-row-ico{
  width:28px;height:28px;border-radius:var(--r-s);
  display:flex;align-items:center;justify-content:center;
  background:var(--float);color:var(--t2);font-size:11px;flex-shrink:0;
}
.cmd-row-txt{flex:1;font-size:13px;font-weight:500}
.cmd-foot{
  display:flex;gap:14px;padding:10px 18px;
  border-top:1px solid var(--line-0);font-size:10px;color:var(--t3);
}
.cmd-foot kbd{
  font-family:var(--mono);background:var(--float);
  border:1px solid var(--line-1);border-radius:3px;
  padding:1px 5px;font-size:10px;
}
.cmd-spinner{color:var(--t3);font-size:14px;flex-shrink:0}
.cmd-qb-group{
  padding:8px 12px 4px;font-size:9px;font-weight:700;color:var(--qb);
  text-transform:uppercase;letter-spacing:.6px;display:flex;align-items:center;gap:6px;
}
.cmd-qb-group img{width:14px;height:14px}
.cmd-qb-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:var(--r);cursor:pointer;transition:.12s;
}
.cmd-qb-row:hover{background:var(--hover)}
a.cmd-qb-row{text-decoration:none;color:inherit}
.cmd-qb-row .cmd-row-ico{background:rgba(20,184,74,.08);color:#14B84A}
.cmd-qb-row-info{flex:1;min-width:0}
.cmd-qb-row-title{font-size:13px;font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmd-qb-row-sub{font-size:10.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.cmd-qb-tag{
  font-size:9px;font-weight:600;color:var(--qb);background:rgba(20,184,74,.1);
  padding:2px 7px;border-radius:10px;flex-shrink:0;white-space:nowrap;
}
.cmd-qb-empty{padding:14px 12px;font-size:12px;color:var(--t3);text-align:center;font-style:italic}

/* ═══════════════════════════════════════════════════════════
   MODALS
═══════════════════════════════════════════════════════════ */
.overlay{
  position:fixed;inset:0;z-index:5000;
  background:rgba(0,0,0,.6);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:.2s;
}
.overlay.open{opacity:1;pointer-events:all}
.modal{
  background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-xl);box-shadow:0 24px 64px rgba(0,0,0,.5);
  width:100%;max-width:560px;overflow:hidden;
  transform:scale(.96) translateY(8px);transition:.2s;
}
.overlay.open .modal{transform:scale(1) translateY(0)}
.modal-head{
  display:flex;align-items:center;gap:12px;
  padding:18px 20px;border-bottom:1px solid var(--line-0);
}
.modal-ico{
  width:38px;height:38px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;
}
.modal-ttl{font-size:15px;font-weight:600}
.modal-sub{font-size:11px;color:var(--t3);margin-top:2px}
.modal-x{
  margin-left:auto;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-s);border:none;background:transparent;
  color:var(--t3);cursor:pointer;transition:.15s;
}
.modal-x:hover{background:var(--hover);color:var(--t1)}
.modal-body{padding:20px;max-height:65vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
.modal-body::-webkit-scrollbar{width:8px}
.modal-body::-webkit-scrollbar-track{background:transparent}
.modal-body::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px}
.modal-body::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--accent) 80%, #000)}
.modal-foot{
  display:flex;justify-content:flex-end;gap:8px;
  padding:14px 20px;border-top:1px solid var(--line-0);
  background:color-mix(in srgb, var(--raised) 50%, transparent);
}
.conv-mode-opt{display:flex;align-items:flex-start;gap:4px;padding:10px 14px;border:1px solid var(--b2);border-radius:8px;cursor:pointer;transition:all .15s}
.conv-mode-opt:hover{border-color:var(--accent);background:rgba(37,99,235,.04)}
.conv-mode-opt.active{border-color:var(--accent);background:rgba(37,99,235,.06)}
.conv-mode-opt input[type=radio]{margin-top:2px}

/* ── Buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:var(--r);
  font-size:12px;font-weight:600;cursor:pointer;border:none;
  transition:.15s;white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#1d4ed8;box-shadow:0 4px 12px var(--accent-g)}
.btn-ghost{background:var(--raised);color:var(--t2);border:1px solid var(--line-1)}
.btn-ghost:hover{background:var(--float);color:var(--t1)}
.btn-danger{background:var(--err-s);color:var(--err);border:1px solid rgba(248,113,113,.15)}
.btn-sm{padding:5px 10px;font-size:11px}

/* ── Forms ─────────────────────────────────────────────── */
.fg{margin-bottom:14px}
.fg:last-child{margin-bottom:0}
.lbl{display:block;font-size:11px;font-weight:500;color:var(--t2);margin-bottom:5px}
.inp{
  width:100%;background:var(--raised);border:1px solid var(--line-1);
  border-radius:var(--r);color:var(--t1);font-size:13px;
  padding:8px 12px;outline:none;transition:.15s;
}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-g)}
.chk-row{display:flex;align-items:flex-start;gap:10px;padding:7px 0}
.chk{width:16px;height:16px;accent-color:var(--qb);cursor:pointer}
.chk-lbl{font-size:12px;color:var(--t2);cursor:pointer}

/* ── Stat cards in modal ───────────────────────────────── */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.stat-card{background:var(--raised);border:1px solid var(--line-0);border-radius:var(--r);padding:12px}
.stat-lbl{font-size:10px;color:var(--t3);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.stat-val{font-size:15px;font-weight:600;color:var(--t1);margin-top:3px}
.stat-val.green{color:var(--ok)}

/* ── Account rows ─────────────────────────────────────── */
.acc-row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--line-0)}
.acc-lbl{font-size:11px;color:var(--t3);font-weight:500;white-space:nowrap;margin-right:12px}
.acc-val{font-size:12px;color:var(--t1);font-weight:600;text-align:right;word-break:break-all}

/* ── Alert ─────────────────────────────────────────────── */
.alert{padding:10px 12px;border-radius:var(--r-s);font-size:11px;display:flex;align-items:flex-start;gap:8px}
.alert-warn{background:var(--warn-s);border:1px solid rgba(251,191,36,.12);color:var(--warn)}
.alert-info{background:var(--accent-s);border:1px solid rgba(37,99,235,.12);color:var(--accent)}

/* ── Toast ─────────────────────────────────────────────── */
.toast-wrap{
  position:fixed;bottom:20px;right:340px;z-index:9000;
  display:flex;flex-direction:column;gap:8px;pointer-events:none;
  transition:right .35s cubic-bezier(.4,0,.2,1);
}
.shell[data-copilot="collapsed"]~.toast-wrap{right:20px}
.toast{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:var(--raised);border:1px solid var(--line-2);
  border-radius:var(--r);box-shadow:0 12px 40px rgba(0,0,0,.4);
  font-size:13px;color:var(--t1);pointer-events:all;max-width:340px;
  animation:slideR .25s ease;
}
.toast.ok{border-left:3px solid var(--ok)}
.toast.err{border-left:3px solid var(--err)}
.toast i{font-size:14px}
.toast.ok i{color:var(--ok)}
.toast.err i{color:var(--err)}

/* ── Loader ────────────────────────────────────────────── */
.loader-wrap{
  position:fixed;inset:0;z-index:9999;
  background:rgba(5,5,7,.88);backdrop-filter:blur(10px);
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;
}
.spinner{width:36px;height:36px;border:3px solid rgba(255,122,89,.3);border-top-color:#14B84A;border-radius:50%;animation:spin .7s linear infinite}
.loader-txt{font-size:13px;color:#fff;font-weight:500}

/* ── Responsive ────────────────────────────────────────── */
@media(max-width:1100px){
  .shell{ --nav-w:220px; --cop-w:280px }
  .shell[data-nav="collapsed"]{ --nav-w:56px }
  .shell[data-copilot="collapsed"]{ --cop-w:0px }
}
@media(max-width:900px){
  .shell{
    grid-template-columns:1fr!important;
    grid-template-rows:52px 1fr;
    grid-template-areas:"hdr" "main";
  }
  .nav,.copilot,.copilot-expand{display:none!important}
  .hdr-cmd,.env-pill,.chip,.hdr-company,.qb-conn-wrap{display:none!important}
  .sync-tb-stats,.sync-tb-pipe{display:none!important}
  .sync-toolbar{flex-wrap:wrap;justify-content:center}
  .record-preview{grid-template-columns:1fr!important}
  .hq-grid{grid-template-columns:1fr!important}
  .hq-center{order:-1}
}

/* ── Utility ───────────────────────────────────────────── */
.hidden{display:none!important}
.sec-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--t3);margin-bottom:8px}

/* ═══════════════════════════════════════════════════════════
   VIEW PANES — switchable main content areas
═══════════════════════════════════════════════════════════ */
.view-pane{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;overflow-y:auto;animation:fadeUp .3s ease}

/* ═══════════════════════════════════════════════════════════
   ENTITY MAPPINGS VIEW
═══════════════════════════════════════════════════════════ */

/* Header bar */
.em-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:4px 0;flex-shrink:0;
}
.em-header-info{display:flex;flex-direction:column}
.em-title{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}
.em-title i{color:var(--accent);font-size:14px}
.em-subtitle{font-size:11px;color:var(--t3);margin-top:2px}
.em-header-actions{display:flex;gap:8px}

/* Entity mapping cards list */
.em-list{display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1;padding-right:4px}

/* Individual entity card */
.em-card{
  display:flex;align-items:center;gap:16px;
  background:var(--surface);border:1px solid var(--line-0);
  border-radius:var(--r-l);padding:14px 20px;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  animation:fadeUp .35s ease both;
}
.em-card:nth-child(1){animation-delay:0s}
.em-card:nth-child(2){animation-delay:.05s}
.em-card:nth-child(3){animation-delay:.1s}
.em-card:nth-child(4){animation-delay:.15s}
.em-card:nth-child(5){animation-delay:.2s}
.em-card:hover{border-color:var(--line-2);box-shadow:0 4px 20px rgba(0,0,0,.15);transform:translateY(-1px)}
.em-card.disabled{opacity:.5}

/* Mapping flow: HS pill → direction → QB pill */
.em-card-mapping{display:flex;align-items:center;gap:12px;flex:1;min-width:0}

/* Entity pills */
.em-pill{
  display:flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:var(--r);
  font-size:12px;font-weight:600;white-space:nowrap;transition:.15s;
}
.em-pill.hs{background:var(--hs-s);color:var(--hs);border:1px solid rgba(255,122,89,.15)}
.em-pill.qb{background:var(--qb-s);color:var(--qb);border:1px solid rgba(20,184,74,.15)}
.em-pill i{font-size:13px}

/* Direction indicator */
.em-direction{display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0}
.em-dir-line{display:flex;align-items:center}
.em-dir-label{font-size:9px;color:var(--t3);font-weight:500;text-transform:uppercase;letter-spacing:.4px}
.em-dir-tip{font-size:8px;color:var(--t4);margin-left:2px;cursor:pointer}
.em-dir-tooltip{position:fixed;z-index:9999;background:var(--bg2,#222);color:var(--t1,#fff);font-size:11px;padding:8px 12px;border-radius:6px;max-width:260px;line-height:1.4;box-shadow:0 4px 12px rgba(0,0,0,.25);opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s;pointer-events:none}
.em-dir-tooltip.show{opacity:1;transform:translateY(0)}

/* Card meta (status + field count) */
.em-card-meta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.em-conflict-warn{font-size:10px;color:#d97706;background:rgba(217,119,6,.08);border:1px solid rgba(217,119,6,.15);border-radius:6px;padding:4px 10px;display:flex;align-items:center;gap:5px;flex-shrink:0}
.gs-step{display:none}.gs-step.active{display:block}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.gs-options{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.gs-opt{display:flex;align-items:flex-start;gap:4px;padding:14px 16px;border:2px solid var(--line-0);border-radius:12px;cursor:pointer;transition:all .2s}
.gs-opt:hover{border-color:var(--line-2);background:var(--raised)}
.gs-opt.selected{border-color:var(--accent);background:rgba(37,99,235,.08);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.gs-opt.selected .gs-opt-content i{transform:scale(1.1)}
.gs-opt input[type=radio]{margin-top:4px;accent-color:var(--accent)}
.gs-opt-content{display:flex;align-items:center;gap:12px;flex:1}
.gs-opt-content i{font-size:20px;width:28px;text-align:center;flex-shrink:0}
.gs-opt-content div{flex:1}.gs-opt-content strong{display:block;font-size:13px;color:var(--t1)}
.gs-opt-content span{display:block;font-size:11px;color:var(--t3);margin-top:2px}
.gs-checks{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.gs-check{display:flex;align-items:center;gap:4px;padding:12px 16px;border:2px solid var(--line-0);border-radius:12px;cursor:pointer;transition:all .15s}
.gs-check:hover{border-color:var(--accent)}
.gs-check:has(input:checked){border-color:var(--accent);background:rgba(37,99,235,.06)}
.gs-check input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}
.gs-check-content{display:flex;align-items:center;gap:12px;flex:1}
.gs-check-content i{font-size:18px;width:24px;text-align:center;flex-shrink:0}
.gs-check-content div{flex:1}.gs-check-content strong{display:block;font-size:13px;color:var(--t1)}
.gs-check-content span{display:block;font-size:11px;color:var(--t3);margin-top:1px}
.gs-dir-select{padding:4px 8px;border:1px solid var(--line-0);border-radius:6px;font-size:11px;font-weight:600;background:var(--bg);color:var(--accent);cursor:pointer;flex-shrink:0;min-width:80px;text-align:center}
.gs-dir-select:focus{outline:none;border-color:var(--accent)}
.gs-check:has(input:not(:checked)) .gs-dir-select{opacity:.3;pointer-events:none}
.gs-mode-toggle{display:flex;gap:4px;margin-bottom:16px;background:var(--raised);border-radius:var(--r-f);padding:3px;border:1px solid var(--line-0)}
.gs-mode-btn{flex:1;padding:7px 12px;border:none;border-radius:var(--r-f);font-size:11px;font-weight:600;cursor:pointer;background:transparent;color:var(--t3);font-family:inherit;transition:.15s;display:flex;align-items:center;justify-content:center;gap:5px}
.gs-mode-btn:hover{color:var(--t1)}
.gs-mode-btn.active{background:var(--accent);color:#fff;box-shadow:0 2px 6px var(--accent-g)}
.gs-presets{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.gs-preset{display:block;padding:14px 16px;border:2px solid var(--line-0);border-radius:12px;cursor:pointer;transition:all .15s}
.gs-preset:hover{border-color:var(--accent)}
.gs-preset.selected{border-color:var(--accent);background:rgba(37,99,235,.06)}
.gs-preset input{display:none}
.gs-preset-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.gs-preset-head strong{font-size:13px;color:var(--t1)}
.gs-preset-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 6px;border-radius:4px}
.gs-preset-badge.rec{background:rgba(20,184,74,.12);color:#14B84A}
.gs-preset-badge.pop{background:rgba(37,99,235,.12);color:#2563eb}
.gs-preset-desc{display:block;font-size:11.5px;color:var(--t2);font-weight:600}
.gs-preset-detail{display:block;font-size:11px;color:var(--t3);margin-top:4px;line-height:1.4}
.gs-nav{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.em-conflict-warn i{font-size:9px}
.em-field-count{font-size:11px;color:var(--t3);font-family:var(--mono)}

/* Card action buttons */
.em-card-actions{display:flex;gap:6px;flex-shrink:0}
.em-del-btn:hover{color:var(--err)!important;border-color:rgba(248,113,113,.2)!important;background:var(--err-s)!important}

/* ═══════════════════════════════════════════════════════════
   FIELD MAPPINGS DRILL-DOWN PANEL
═══════════════════════════════════════════════════════════ */
.em-field-panel{
  display:flex;flex-direction:column;gap:12px;
  flex:1;min-height:0;animation:fadeUp .3s ease;
}
.em-fp-header{
  display:flex;align-items:center;gap:16px;
  padding:4px 0;flex-shrink:0;
}
.em-fp-title{flex:1;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.em-fp-actions{margin-left:auto;display:flex;gap:8px}

/* ═══════════════════════════════════════════════════════════
   FIELD FLOW CANVAS — the "visually wow" section
═══════════════════════════════════════════════════════════ */
.fm-canvas{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;
  flex:1;min-height:0;
  background:var(--surface);border:1px solid var(--line-0);
  border-radius:var(--r-l);overflow-y:auto;overflow-x:hidden;
}
.fm-canvas::after{
  content:'';position:absolute;top:0;bottom:0;left:50%;
  width:1px;background:var(--line-1);z-index:1;
}

/* SVG overlay for bezier curves */
.fm-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}

/* Field columns */
.fm-col{display:flex;flex-direction:column;gap:0;overflow:visible;position:relative;z-index:1}
.fm-canvas-headers{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--line-0);
  border-radius:var(--r-l) var(--r-l) 0 0;overflow:hidden;
}
.fm-canvas-headers+.fm-canvas{border-top:none;border-radius:0 0 var(--r-l) var(--r-l)}
.fm-col-header{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;
  flex-shrink:0;
}
.fm-col-header.hs{background:color-mix(in srgb, var(--hs-s) 80%, var(--surface));color:var(--hs)}
.fm-col-header.qb{background:color-mix(in srgb, var(--qb-s) 80%, var(--surface));color:var(--qb)}
.fm-col-header img.qb-logo-icon{width:16px;height:16px}

/* Individual field cards */
.fm-field{
  display:flex;align-items:center;gap:8px;
  padding:10px 16px;border-bottom:1px solid var(--line-0);
  transition:all .15s;cursor:default;
  min-height:42px;box-sizing:border-box;
}
.fm-field:last-child{border-bottom:none}
.fm-field.mapped{background:transparent}
.fm-field.unmapped{opacity:.4;background:var(--raised)}
.fm-field.highlight{background:rgba(37,99,235,.06);box-shadow:inset 0 0 0 1px rgba(37,99,235,.15)}

/* ═══ Mapping Wizard ═══════════════════════════════════ */
.mw-wrap{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  min-height:100%;
  background:var(--surface);border:1px solid var(--line-1);
  border-radius:var(--r-l);padding:24px 16px;text-align:center;
  position:relative;overflow-y:auto;overflow-x:hidden;
  box-sizing:border-box;
}
.mw-wrap::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 20%,rgba(37,99,235,.07) 0%,transparent 60%),
             radial-gradient(ellipse at 20% 80%,rgba(255,122,89,.05) 0%,transparent 50%),
             radial-gradient(ellipse at 80% 80%,rgba(20,184,74,.05) 0%,transparent 50%);
  pointer-events:none;
}
.mw-step{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--accent);
  color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  padding:5px 14px;border-radius:20px;margin-bottom:24px;
  box-shadow:0 2px 10px rgba(37,99,235,.3);
}
.mw-step i{font-size:11px}

/* Hero: HS logo ↔ SVG curves ↔ QB logo */
.mw-hero{
  display:flex;align-items:center;gap:0;width:100%;max-width:520px;
  height:120px;margin-bottom:28px;position:relative;
}
.mw-hero-logo{
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;z-index:2;position:relative;
}
.mw-hero-logo.hs{
  background:var(--hs-s);border:2px solid rgba(255,122,89,.25);
  animation:breathe 3s ease infinite;
}
.mw-hero-logo.hs i{color:var(--hs);font-size:28px}
.mw-hero-logo.qb{
  background:var(--qb-s);border:2px solid rgba(20,184,74,.25);
  animation:breathe 3s ease infinite .5s;
}
.mw-hero-logo.qb img{width:36px;height:36px}
.mw-hero-svg{flex:1;height:100%;min-width:0}

/* Title + desc */
.mw-title{font-size:22px;font-weight:700;color:var(--t1);margin:0 0 8px;letter-spacing:-.3px}
.mw-desc{font-size:13px;color:var(--t2);max-width:480px;margin:0 0 32px;line-height:1.6}

/* Preset grid — 4-col desktop (7 cards: 4+3 rows) */
.mw-presets{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  width:calc(100% - 60px);margin:0 auto;position:relative;z-index:1;
}
.mw-preset{
  background:var(--raised);border:1.5px solid var(--line-1);
  border-radius:var(--r-m);padding:14px 14px 12px;cursor:pointer;
  transition:all .2s ease;text-align:left;position:relative;
  animation:fadeUp .4s ease both;
  animation-iteration-count:1;
  user-select:none;
}
.mw-preset:nth-child(1){animation-delay:.05s}
.mw-preset:nth-child(2){animation-delay:.1s}
.mw-preset:nth-child(3){animation-delay:.15s}
.mw-preset:nth-child(4){animation-delay:.2s}
.mw-preset:nth-child(5){animation-delay:.25s}
.mw-preset:nth-child(6){animation-delay:.3s}
.mw-preset:nth-child(7){animation-delay:.35s}
.mw-preset:nth-child(8){animation-delay:.4s}
.mw-preset:nth-child(9){animation-delay:.45s}
.mw-preset:nth-child(10){animation-delay:.5s}
.mw-preset:nth-child(11){animation-delay:.55s}
.mw-preset:hover{
  border-color:color-mix(in srgb,var(--accent) 50%,transparent);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(37,99,235,.1);
}
.mw-preset.selected{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 6%,var(--raised));
  box-shadow:0 4px 16px rgba(37,99,235,.18),0 0 0 1px rgba(37,99,235,.12);
}

/* Custom checkbox — top right of card */
.mw-preset-check{
  position:absolute;top:10px;right:10px;
  width:20px;height:20px;border-radius:5px;
  border:2px solid var(--line-2);background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  transition:all .15s ease;flex-shrink:0;
}
.mw-preset-check i{font-size:10px;color:#fff;opacity:0;transition:opacity .15s}
.mw-preset.selected .mw-preset-check{
  background:var(--accent);border-color:var(--accent);
  box-shadow:0 2px 8px rgba(37,99,235,.35);
}
.mw-preset.selected .mw-preset-check i{opacity:1}

/* Pill flow inside card */
.mw-preset-flow{
  display:flex;align-items:center;gap:6px;margin-bottom:8px;
  padding-right:28px; /* space for checkbox */
}
.mw-preset-flow .em-pill{font-size:10px;padding:3px 8px}
.mw-preset-flow .mw-arrow{
  flex-shrink:0;width:24px;height:14px;
}
.mw-preset-flow .mw-arrow line{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:3 2}
.mw-preset-flow .mw-arrow polygon{fill:var(--accent)}

.mw-preset-title{font-size:12px;font-weight:700;color:var(--t1);margin-bottom:3px}
.mw-preset-desc{font-size:10px;color:var(--t3);line-height:1.45;margin-bottom:8px}
.mw-preset-desc b{color:var(--t2);font-weight:600}

/* Direction select inside card */
.mw-preset-dir{
  width:100%;padding:4px 6px;font-size:10px;font-weight:500;
  background:var(--surface);border:1px solid var(--line-1);
  border-radius:var(--r-s);color:var(--t2);cursor:pointer;
  transition:border-color .15s;appearance:auto;
}
.mw-preset-dir:focus{border-color:var(--accent);outline:none}
.mw-preset.selected .mw-preset-dir{border-color:color-mix(in srgb,var(--accent) 40%,var(--line-1))}

/* Badge (top-left of card) */
.mw-preset-badge{
  display:inline-flex;align-items:center;gap:3px;
  font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  padding:2px 7px;border-radius:10px;margin-bottom:6px;
}
.mw-preset-badge.rec{background:var(--ok-s);color:var(--ok)}
.mw-preset-badge.ess{background:var(--accent-s);color:var(--accent)}
.mw-preset-badge.pop{background:var(--warn-s);color:var(--warn)}
.mw-preset-badge.adv{background:var(--raised);color:var(--t3);border:1px solid var(--line-1)}
.mw-preset-badge.addon{background:linear-gradient(135deg,rgba(37,99,235,.15),rgba(255,122,89,.15));color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent)}

/* Dependency tag */
.mw-preset-dep{
  display:flex;align-items:center;gap:4px;
  font-size:9px;color:var(--warn);font-weight:500;
  margin-top:2px;margin-bottom:4px;
}
.mw-preset-dep i{font-size:8px}

/* Locked card (complex — needs meeting) */
.mw-preset.locked{
  border-style:dashed;opacity:.7;
}
.mw-preset.locked:hover{transform:none;box-shadow:none;border-color:var(--line-1)}
.mw-preset.locked .mw-preset-check{display:none}
.mw-preset-meeting{
  display:flex;align-items:center;justify-content:center;gap:5px;
  width:100%;padding:5px 8px;font-size:10px;font-weight:600;
  background:var(--accent-s);color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);
  border-radius:var(--r-s);cursor:pointer;text-decoration:none;
  transition:all .15s;
}
.mw-preset-meeting:hover{background:var(--accent);color:#fff}
.mw-preset-meeting i{font-size:10px}

/* Help banner (below create button) */
.mw-help-banner{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:16px;padding:10px 18px;
  background:var(--raised);border:1px solid var(--line-0);
  border-radius:var(--r-m);font-size:11px;color:var(--t3);
  position:relative;z-index:1;
  animation:fadeUp .5s ease .9s backwards;
}
.mw-help-banner i{color:var(--accent);font-size:14px;flex-shrink:0}
.mw-help-banner a{color:var(--accent);text-decoration:none;font-weight:600}
.mw-help-banner a:hover{text-decoration:underline}

/* Create button bar */
.mw-create-bar{
  display:flex;align-items:center;justify-content:center;
  margin-top:24px;position:relative;z-index:1;
}
.mw-create-btn{
  padding:10px 28px;font-size:13px;font-weight:600;
  border-radius:var(--r-m);transition:all .2s;
}
.mw-create-btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.mw-create-btn:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(37,99,235,.3)}

/* Custom mapping link */
.mw-custom-link{
  margin-top:16px;position:relative;z-index:1;
}
.mw-custom-link a{
  font-size:11px;color:var(--t3);cursor:pointer;transition:color .15s;
  text-decoration:none;
}
.mw-custom-link a:hover{color:var(--accent)}
.mw-custom-link a i{margin-left:4px;font-size:10px}

/* Confirmation modal mapping list row */
.mw-confirm-row{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:var(--r-s);
  background:var(--raised);margin-bottom:6px;
  font-size:12px;
}
.mw-confirm-row .em-pill{font-size:10px;padding:3px 8px}
.mw-confirm-dir{font-size:10px;color:var(--t3);font-weight:500;flex-shrink:0}

/* SVG curve animations */
.mw-curve{
  fill:none;stroke-width:2;stroke-linecap:round;
  stroke-dasharray:8 4;
}
.mw-curve.c1{animation:none}
.mw-curve.c2{animation:none}
.mw-curve.c3{animation:none}
@keyframes mwFlow{
  0%{stroke-dashoffset:24}
  100%{stroke-dashoffset:0}
}
@keyframes mwFlowRev{
  0%{stroke-dashoffset:0}
  100%{stroke-dashoffset:24}
}
.mw-particle{display:none}
@keyframes mwDotFwd{
  0%{offset-distance:0%;opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{offset-distance:100%;opacity:0}
}
@keyframes mwDotRev{
  0%{offset-distance:100%;opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{offset-distance:0%;opacity:0}
}

/* Responsive */
@media(max-width:900px){
  .mw-presets{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:650px){
  .mw-presets{grid-template-columns:repeat(2,1fr)}
  .mw-hero{height:80px;max-width:320px}
  .mw-hero-logo{width:48px;height:48px}
  .mw-hero-logo.hs i{font-size:22px}
  .mw-hero-logo.qb img{width:28px;height:28px}
  .mw-title{font-size:18px}
}

/* ═══ Import Wizard (Step 4) ═══ */
.iw-wrap{
  display:none;flex-direction:column;align-items:center;
  padding:48px 24px 64px;max-width:680px;margin:0 auto;
  animation:fadeUp .5s ease;
}
.iw-step{
  font-size:11px;font-weight:600;color:var(--accent);letter-spacing:.5px;
  text-transform:uppercase;margin-bottom:18px;
  display:flex;align-items:center;gap:6px;
}
.iw-step i{font-size:13px}
.iw-hero{
  display:flex;align-items:center;gap:16px;margin-bottom:20px;
}
.iw-hero-logo{
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.iw-hero-logo.qb{background:#e8f5e9}
.iw-hero-logo.qb img{width:32px;height:32px}
.iw-hero-logo.hs{background:#fce4ec}
.iw-hero-logo.hs i{font-size:26px;color:var(--hs)}
.iw-hero-arrow{
  font-size:20px;color:var(--accent);animation:iwPulse 2s ease-in-out infinite;
}
@keyframes iwPulse{
  0%,100%{opacity:.4;transform:translateX(0)}
  50%{opacity:1;transform:translateX(4px)}
}
.iw-title{font-size:22px;font-weight:700;color:var(--t1);margin-bottom:6px;text-align:center}
.iw-desc{font-size:13px;color:var(--t3);text-align:center;margin-bottom:24px;max-width:520px;line-height:1.5}

.iw-warnings{
  width:100%;display:flex;flex-direction:column;gap:8px;margin-bottom:24px;
}
.iw-warn{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 14px;border-radius:var(--r);
  background:rgba(234,179,8,.06);border:1px solid rgba(234,179,8,.18);
  font-size:12px;color:var(--warn);line-height:1.4;
}
.iw-warn i{margin-top:2px;flex-shrink:0;font-size:13px}

.iw-queue{width:100%;display:flex;flex-direction:column;gap:10px;margin-bottom:20px}

.iw-card{
  background:var(--raised);border:1px solid var(--line-1);border-radius:var(--r-lg);
  padding:16px 18px;transition:all .25s;opacity:.5;pointer-events:none;
}
.iw-card.active{
  opacity:1;pointer-events:auto;
  border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 4px 16px rgba(37,99,235,.12);
}
.iw-card.done{
  opacity:.85;pointer-events:none;
  border-color:var(--ok);background:rgba(20,184,74,.04);
}
.iw-card.cancelled{
  opacity:.85;pointer-events:auto;
  border-color:var(--warn);
}
.iw-card-head{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;
}
.iw-card-num{
  width:26px;height:26px;border-radius:50%;
  background:var(--line-1);color:var(--t3);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;flex-shrink:0;
}
.iw-card.active .iw-card-num{background:var(--accent);color:#fff}
.iw-card.done .iw-card-num{background:var(--ok);color:#fff}
.iw-card-mapping{
  display:flex;align-items:center;gap:6px;flex:1;min-width:0;
}
.iw-card-mapping .em-pill{font-size:10px;padding:3px 8px}
.iw-card-dir{font-size:10px;color:var(--t3);flex-shrink:0}
.iw-card-status{font-size:11px;font-weight:600;color:var(--t3);margin-left:auto;white-space:nowrap}
.iw-card.done .iw-card-status{color:var(--ok)}

.iw-card-controls{
  display:none;flex-direction:column;gap:10px;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--line-0);
}
.iw-card.active .iw-card-controls,
.iw-card.cancelled .iw-card-controls{display:flex}

.iw-speed{display:flex;align-items:center;gap:6px}
.iw-speed-label{font-size:11px;color:var(--t3);font-weight:500;margin-right:4px}
.iw-speed-btn{
  padding:4px 12px;border-radius:var(--r-s);border:1px solid var(--line-1);
  background:transparent;color:var(--t2);font-size:11px;font-weight:600;
  cursor:pointer;transition:all .15s;
}
.iw-speed-btn:hover{border-color:var(--qb);color:var(--qb)}
.iw-speed-btn.sel{background:var(--qb);color:#fff;border-color:var(--qb)}
.iw-speed-hint{font-size:10px;color:var(--t4);margin-left:auto;font-style:italic}

.iw-progress{display:none;flex-direction:column;gap:4px}
.iw-card.importing .iw-progress{display:flex}
.iw-progress-bar{
  width:100%;height:6px;border-radius:3px;background:var(--line-1);overflow:hidden;
}
.iw-progress-fill{
  height:100%;border-radius:3px;background:var(--accent);
  transition:width .3s ease;width:0%;
}
.iw-progress-text{
  display:flex;justify-content:space-between;font-size:10px;color:var(--t3);
}

.iw-card-actions{display:flex;gap:8px;align-items:center}
.iw-card-done{
  display:none;padding:8px 12px;border-radius:var(--r);
  background:rgba(20,184,74,.08);font-size:12px;color:var(--ok);font-weight:600;
  margin-top:6px;
}
.iw-card.done .iw-card-done{display:flex;align-items:center;gap:6px}

.iw-fields-section{
  margin-top:8px;padding-top:8px;border-top:1px solid var(--line-0);
}
.iw-fields-header{
  display:flex;align-items:center;gap:6px;cursor:pointer;
  font-size:11px;font-weight:600;color:var(--t3);padding:2px 0;
}
.iw-fields-header:hover{color:var(--accent)}
.iw-fields-chevron{
  font-size:9px;transition:transform .2s;color:var(--t4);
}
.iw-fields-table{
  margin-top:6px;
}
.iw-fields-table table{
  width:100%;border-collapse:collapse;font-size:11px;
}
.iw-fields-table th{
  text-align:left;color:var(--t4);font-weight:600;font-size:10px;
  padding:3px 6px;border-bottom:1px solid var(--line-0);text-transform:uppercase;letter-spacing:.5px;
}
.iw-fields-table td{
  padding:4px 6px;color:var(--t2);border-bottom:1px solid var(--line-0);
}
.iw-fields-table td:nth-child(2){text-align:center;width:24px}
.iw-card .iw-fields-section{display:none}
.iw-card.active .iw-fields-section{display:block}

.iw-match-tip{
  display:none;margin-top:8px;padding:10px 12px;border-radius:var(--r);
  background:rgba(59,130,246,.06);border:1px solid rgba(59,130,246,.15);
  font-size:11px;color:var(--t2);line-height:1.5;gap:8px;
  align-items:flex-start;
}
.iw-card.active .iw-match-tip{display:flex}
.iw-match-tip>i{color:#3b82f6;margin-top:2px;flex-shrink:0;font-size:12px}
.iw-match-tip strong{color:var(--t1)}
.iw-match-tip em{font-style:normal;font-weight:600;color:var(--accent)}
.iw-match-warn{display:block;margin-top:4px;color:var(--warn);font-size:10px}

.iw-card.skipped{
  opacity:.8;pointer-events:auto;
  border-color:var(--t4);background:rgba(148,163,184,.04);
}
.iw-card.skipped .iw-card-num{background:var(--t4);color:#fff}
.iw-card.skipped .iw-card-controls{display:none}
.iw-card-skipped{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:8px;padding:8px 12px;border-radius:var(--r);
  background:rgba(148,163,184,.08);font-size:12px;color:var(--t3);
}
.iw-card-skipped>span{display:flex;align-items:center;gap:6px;font-weight:600}
.iw-card.skipped .iw-card-skipped{display:flex}
.btn-outline{
  background:transparent;border:1px solid var(--line-1);color:var(--t2);
  padding:5px 14px;border-radius:var(--r-s);font-size:11px;font-weight:600;
  cursor:pointer;transition:all .15s;
}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.iw-dep-warn{
  align-items:center;gap:8px;padding:8px 12px;border-radius:var(--r);
  background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);
  font-size:11px;color:var(--warn);font-weight:500;margin-top:6px;
}
.iw-dep-warn i{flex-shrink:0}

.iw-summary{
  text-align:center;padding:32px 24px;
}
.iw-summary-icon{
  font-size:48px;color:var(--ok);margin-bottom:12px;
}
.iw-summary h3{
  font-size:20px;font-weight:700;color:var(--t1);margin:0 0 20px;
}
.iw-summary-section{
  text-align:left;max-width:460px;margin:0 auto 16px;
  background:var(--raised);border:1px solid var(--line-1);
  border-radius:var(--r-lg);padding:14px 18px;
}
.iw-summary-label{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  margin-bottom:8px;display:flex;align-items:center;gap:6px;
}
.iw-summary-label.ok{color:var(--ok)}
.iw-summary-label.skip{color:var(--t3)}
.iw-summary-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 0;border-bottom:1px solid var(--line-0);
  font-size:13px;color:var(--t2);
}
.iw-summary-row:last-child{border-bottom:none}
.iw-summary-row.ok span:last-child{color:var(--ok);font-weight:600;font-size:12px}
.iw-summary-row.skip span{color:var(--t3)}
.iw-summary-hint{
  font-size:11px;color:var(--t4);margin:10px 0 0;line-height:1.5;
}
.iw-summary-actions{
  margin-top:24px;display:flex;justify-content:center;gap:12px;
}

.iw-historical{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:var(--r);
  background:var(--raised);border:1px solid var(--line-1);
  margin-bottom:16px;
}
.iw-historical input[type="checkbox"]{accent-color:var(--accent);width:16px;height:16px;cursor:pointer}
.iw-historical label{font-size:12px;color:var(--t2);cursor:pointer;line-height:1.4}
.iw-historical label strong{color:var(--t1)}

.iw-footer{
  display:flex;gap:12px;align-items:center;justify-content:center;margin-top:8px;
}

.em-alert-info{
  display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--r-s);
  background:rgba(37,99,235,.06);border:1px solid rgba(37,99,235,.18);margin-bottom:10px;
  animation:fadeUp .3s ease;
}
.em-alert-icon{font-size:16px;color:var(--accent);flex-shrink:0}
.em-alert-body{font-size:12px;color:var(--t2);line-height:1.45;flex:1}
.em-alert-body strong{color:var(--t1);font-weight:600}
.em-alert-dismiss{background:none;border:1px solid var(--accent);color:var(--accent);cursor:pointer;padding:4px 12px;font-size:11px;font-weight:600;flex-shrink:0;border-radius:var(--r-s);transition:all .15s;white-space:nowrap}
.em-alert-dismiss:hover{background:var(--accent);color:#fff}

/* ── Custom confirm dialog ── */
.sq-confirm-overlay{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;backdrop-filter:blur(4px)}
.sq-confirm-overlay.show{opacity:1}
.sq-confirm-box{background:var(--card);border:1px solid var(--line-1);border-radius:14px;padding:24px;max-width:400px;width:90%;box-shadow:0 16px 48px rgba(0,0,0,.35);transform:scale(.92);transition:transform .2s;display:flex;flex-direction:column;gap:16px}
.sq-confirm-overlay.show .sq-confirm-box{transform:scale(1)}
.sq-confirm-icon{width:44px;height:44px;border-radius:50%;background:rgba(239,68,68,.1);color:var(--err);display:flex;align-items:center;justify-content:center;font-size:18px}
.sq-confirm-title{font-size:15px;font-weight:700;color:var(--t1)}
.sq-confirm-msg{font-size:13px;color:var(--t2);line-height:1.5}
.sq-confirm-mapping{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--r-s);background:rgba(239,68,68,.05);border:1px solid rgba(239,68,68,.15)}
.sq-confirm-mapping .sq-cm-field{font-size:12px;font-weight:600;color:var(--t1);display:flex;align-items:center;gap:4px}
.sq-confirm-mapping .sq-cm-field i{font-size:10px;color:var(--t3)}
.sq-confirm-mapping .sq-cm-arrow{color:var(--t3);font-size:11px}
.sq-confirm-btns{display:flex;gap:8px;justify-content:flex-end}
.sq-confirm-btns .btn-cancel{padding:7px 16px;border-radius:var(--r-s);border:1px solid var(--line-1);background:var(--surface);color:var(--t2);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.sq-confirm-btns .btn-cancel:hover{border-color:var(--t3);color:var(--t1)}
.sq-confirm-btns .btn-remove{padding:7px 16px;border-radius:var(--r-s);border:1px solid var(--err);background:var(--err);color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.sq-confirm-btns .btn-remove:hover{background:#dc2626;border-color:#dc2626}
.em-fields-btn{
  padding:5px 12px;border-radius:var(--r-s);border:1px solid var(--line-2);
  background:transparent;color:var(--t1);font-size:11px;font-weight:600;
  cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:4px;
}
.em-fields-btn:hover{background:var(--bg-3);color:#fff}
.em-fields-btn i{font-size:10px}
.em-import-btn{
  padding:5px 12px;border-radius:var(--r-s);border:1px solid var(--ok);
  background:rgba(20,184,74,.08);color:var(--ok);font-size:11px;font-weight:600;
  cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:4px;
}
.em-import-btn:hover{background:var(--ok);color:#fff}
.em-import-btn i{font-size:10px}

@media(max-width:650px){
  .iw-wrap{padding:32px 16px 48px}
  .iw-hero-logo{width:44px;height:44px}
  .iw-title{font-size:18px}
}

/* ═══ Feedback Modal ═══ */
.fb-type-btn{
  flex:1;padding:6px 8px;border-radius:var(--r-s);border:1px solid var(--line-1);
  background:transparent;color:var(--t3);font-size:11px;cursor:pointer;transition:.15s;
}
.fb-type-btn:hover{border-color:var(--accent);color:var(--accent)}
.fb-type-btn.active{border-color:var(--accent);background:rgba(37,99,235,.1);color:var(--accent);font-weight:600}

/* ═══ Review Modal ═══ */
.rv-stars{display:flex;gap:6px;justify-content:center;margin:18px 0}
.rv-star{font-size:32px;color:var(--line-2);cursor:pointer;transition:.15s;padding:4px}
.rv-star:hover,.rv-star.active{color:#f59e0b}
.rv-star:hover ~ .rv-star{color:var(--line-2) !important}
.rv-stars:hover .rv-star{color:#f59e0b}
.rv-stars:hover .rv-star:hover ~ .rv-star{color:var(--line-2)}
.rv-phase{display:none;text-align:center}
.rv-phase.active{display:block}
.rv-thankyou{font-size:22px;font-weight:700;margin-bottom:8px}
.rv-sub{font-size:13px;color:var(--t3);line-height:1.5;margin-bottom:18px}
.rv-store-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px 0}
.rv-store-btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;
  border-radius:var(--r-m);font-size:13px;font-weight:600;cursor:pointer;
  text-decoration:none;transition:.15s;border:1px solid var(--line-1);
  background:var(--bg-2);color:var(--t1);
}
.rv-store-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--bg-1)}
.rv-store-btn .rv-ico{font-size:18px}
.rv-store-btn.hs:hover{border-color:#ff7a59;color:#ff7a59}
.rv-store-btn.qb:hover{border-color:#14B84A;color:#14B84A}
.rv-feedback-area{
  width:100%;min-height:80px;resize:vertical;padding:10px 12px;
  border:1px solid var(--line-1);border-radius:var(--r-m);
  background:var(--bg-1);color:var(--t1);font-size:13px;font-family:inherit;
  margin:12px 0;
}
.rv-feedback-area:focus{border-color:var(--accent);outline:none}
.rv-skip{font-size:11px;color:var(--t4);cursor:pointer;margin-top:10px}
.rv-skip:hover{color:var(--t2)}
.nav-review-pulse{position:relative}
.nav-review-pulse .fa-star{color:#f59e0b}

/* ═══ Live Activity View ═══ */
.la-header{
  display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;
}
.la-title{font-size:18px;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:8px}
.la-live-dot{
  width:8px;height:8px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 6px rgba(20,184,74,.5);
  animation:laPulse 2s ease-in-out infinite;
}
@keyframes laPulse{0%,100%{opacity:1}50%{opacity:.4}}
.la-live-dot.paused{background:var(--t4);box-shadow:none;animation:none}
.la-live-label{font-size:10px;font-weight:600;color:var(--ok);text-transform:uppercase;letter-spacing:.5px}
.la-live-label.paused{color:var(--t4)}
.la-pause-btn{
  margin-left:4px;padding:4px 10px;border-radius:var(--r-s);border:1px solid var(--line-1);
  background:transparent;color:var(--t2);font-size:11px;cursor:pointer;transition:.15s;
  display:flex;align-items:center;gap:4px;
}
.la-pause-btn:hover{border-color:var(--accent);color:var(--accent)}
.la-filters{display:flex;gap:4px;margin-left:auto}
.la-chip{
  padding:4px 10px;border-radius:var(--r-s);border:1px solid var(--line-1);
  background:transparent;color:var(--t3);font-size:11px;font-weight:500;
  cursor:pointer;transition:.15s;
}
.la-chip:hover{border-color:var(--accent);color:var(--accent)}
.la-chip.sel{background:var(--accent);color:#fff;border-color:var(--accent)}

.la-stats{
  display:flex;gap:10px;margin-bottom:16px;
}
.la-stat{
  flex:1;padding:12px 14px;border-radius:var(--r);
  background:var(--raised);border:1px solid var(--line-0);
}
.la-stat-val{font-size:20px;font-weight:700;color:var(--t1)}
.la-stat-lbl{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.3px;margin-top:2px}

.la-feed{
  display:flex;flex-direction:column;gap:1px;
  background:var(--line-0);border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-0);
}
.la-entry{
  display:flex;align-items:flex-start;gap:10px;
  padding:9px 14px;background:var(--surface);
  transition:background .2s;
}
.la-entry:hover{background:var(--raised)}
.la-entry.new{animation:laSlideIn .3s ease}
@keyframes laSlideIn{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}
.la-time{
  font-size:10px;color:var(--t4);font-family:var(--mono);
  min-width:105px;flex-shrink:0;margin-top:2px;
}
.la-dot-wrap{margin-top:4px;flex-shrink:0}
.la-dot{width:8px;height:8px;border-radius:50%;display:block}
.la-dot.ok{background:var(--ok)}
.la-dot.err{background:var(--err)}
.la-dot.warn{background:var(--warn)}
.la-dot.info{background:var(--accent)}
.la-dot.sys{background:#7dd3fc}
.la-msg{
  flex:1;min-width:0;font-size:12px;color:var(--t2);line-height:1.4;
}
.la-msg strong{color:var(--t1);font-weight:600}
.la-detail{font-size:11px;color:var(--t4);margin-top:2px}
.la-hs-link{
  color:var(--t4);font-size:14px;flex-shrink:0;margin-left:auto;padding:2px 6px;
  border-radius:var(--r-s);transition:.15s;text-decoration:none;
}
.la-hs-link:hover{color:#ff7a59;background:rgba(255,122,89,.1)}
.la-amount{
  font-size:12px;font-weight:600;color:var(--t1);
  font-family:var(--mono);white-space:nowrap;flex-shrink:0;margin-top:1px;
}
.la-empty{
  text-align:center;padding:48px 24px;color:var(--t4);
}
.la-empty i{font-size:32px;margin-bottom:10px;display:block;opacity:.3}
.la-empty p{font-size:13px}

/* Line items scroll indicator — sticky bar at panel bottom */
.rp-li-indicator{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 14px;cursor:pointer;
  background:rgba(255,122,89,.08);
  border-top:1px solid rgba(255,122,89,.18);
  font-size:11px;font-weight:600;color:var(--hs);
  flex-shrink:0;transition:background .2s,opacity .3s;
  animation:liBounce 2s ease 1;
}
.rp-li-indicator:hover{background:rgba(255,122,89,.14)}
.rp-li-indicator .li-badge{
  background:var(--hs);color:#fff;
  font-size:10px;font-weight:700;
  padding:1px 6px;border-radius:10px;min-width:18px;text-align:center;
}
.rp-li-indicator .li-chevron{
  font-size:9px;animation:liPulse 1.5s ease-in-out infinite;
}
.rp-li-indicator.at-bottom .li-chevron{transform:rotate(180deg);animation:none}
@keyframes liBounce{0%,100%{transform:translateY(0)}15%{transform:translateY(-3px)}30%{transform:translateY(0)}}
@keyframes liPulse{0%,100%{opacity:1;transform:translateY(0)}50%{opacity:.5;transform:translateY(2px)}}

/* Scroll fade gradient on rp-body */
.rp-body{position:relative}
.rp-body.has-more::after{
  content:'';position:sticky;bottom:0;left:0;right:0;
  display:block;height:28px;pointer-events:none;flex-shrink:0;
  background:linear-gradient(to bottom,transparent,var(--surface));
}

/* Record View — Warning banners */
.rp-warnings{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.rp-warn-bar{
  display:flex;align-items:flex-start;gap:10px;padding:10px 14px;
  border-radius:var(--r-m);font-size:12px;line-height:1.5;animation:fadeUp .3s ease;
}
.rp-warn-bar.err{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.22);color:var(--err)}
.rp-warn-bar.warn{background:rgba(234,179,8,.08);border:1px solid rgba(234,179,8,.22);color:var(--warn)}
.rp-warn-bar i:first-child{margin-top:2px;flex-shrink:0}
.rp-warn-bar span{flex:1;color:var(--t2)}
.rp-warn-bar strong{color:inherit}
.rp-warn-bar .err-hl{color:var(--err);font-weight:600}
.rp-warn-bar .warn-hl{color:var(--warn);font-weight:600}
.rp-warn-dismiss{
  background:none;border:none;color:var(--t3);cursor:pointer;font-size:11px;
  padding:2px 6px;border-radius:var(--r-s);flex-shrink:0;margin-top:-1px;
  transition:.15s;
}
.rp-warn-dismiss:hover{background:rgba(255,255,255,.06);color:var(--t1)}

/* Record View — Editable line items table */
.rp-line-edit{width:100%;border-collapse:collapse;font-size:11px;margin-top:6px}
.rp-line-edit thead th{
  padding:6px 8px;font-size:10px;text-transform:uppercase;font-weight:600;
  color:var(--t3);border-bottom:1px solid var(--line-1);text-align:left;
  letter-spacing:.3px;white-space:nowrap;
}
.rp-line-edit thead th:first-child{width:28px;text-align:center}
.rp-line-edit tbody td{
  padding:4px 6px;border-bottom:1px solid var(--line-0);vertical-align:middle;
}
.rp-line-edit .le-num{text-align:center;color:var(--t4);font-size:10px;font-weight:600}
.rp-line-edit .le-inp{
  width:100%;padding:4px 6px;font-size:11px;background:var(--raised);
  border:1px solid var(--line-1);border-radius:var(--r-s);color:var(--t1);
  font-family:inherit;
}
.rp-line-edit .le-inp:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px var(--accent-s)}
.rp-line-edit .le-sel{
  padding:4px 6px;font-size:11px;background:var(--raised);
  border:1px solid var(--line-1);border-radius:var(--r-s);color:var(--t1);
  font-family:inherit;cursor:pointer;min-width:70px;
}
.rp-line-edit .le-sel:focus{border-color:var(--accent);outline:none}
.rp-line-edit .le-num-inp{
  width:60px;padding:4px 6px;font-size:11px;background:var(--raised);
  border:1px solid var(--line-1);border-radius:var(--r-s);color:var(--t1);
  font-family:var(--mono);text-align:right;
}
.rp-line-edit .le-num-inp:focus{border-color:var(--accent);outline:none}
.rp-line-edit .le-amount{
  font-family:var(--mono);font-weight:600;color:var(--t2);text-align:right;
  white-space:nowrap;padding-right:8px;
}
.rp-line-edit .le-del{
  background:none;border:none;color:var(--t4);cursor:pointer;padding:4px 6px;
  border-radius:var(--r-s);font-size:11px;transition:.15s;
}
.rp-line-edit .le-del:hover{color:var(--err);background:var(--err-s)}
.rp-le-add{
  display:inline-flex;align-items:center;gap:6px;margin-top:6px;
  padding:5px 12px;font-size:11px;color:var(--hs);background:transparent;
  border:1px dashed rgba(255,122,89,.3);border-radius:var(--r-s);cursor:pointer;
  transition:.15s;
}
.rp-le-add:hover{background:var(--hs-s);border-color:var(--hs)}

/* Record View — Sync Actions Bar */
.rp-sync-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:10px 16px;margin-bottom:12px;
  background:var(--raised);border:1px solid var(--line-1);
  border-radius:var(--r-lg);animation:fadeUp .3s ease;
}
.rp-sync-bar.hidden{display:none}
.rp-sync-bar-label{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--t3);margin-right:4px;white-space:nowrap;
}
.rp-sync-btn{
  padding:5px 12px;font-size:11px;font-weight:600;border-radius:var(--r-s);
  cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  transition:.15s;border:1px solid transparent;white-space:nowrap;
}
.rp-sync-btn.resync{background:var(--ok);color:#fff;border-color:var(--ok)}
.rp-sync-btn.resync:hover{filter:brightness(1.1)}
.rp-sync-btn.create{background:rgba(20,184,74,.08);color:var(--ok);border-color:rgba(20,184,74,.25)}
.rp-sync-btn.create:hover{background:rgba(20,184,74,.16)}
.rp-sync-btn.alt{background:rgba(37,99,235,.08);color:var(--accent);border-color:rgba(37,99,235,.25)}
.rp-sync-btn.alt:hover{background:rgba(37,99,235,.16)}
.rp-sync-sep{width:1px;height:20px;background:var(--line-1);margin:0 4px;flex-shrink:0}
.rp-sync-email{
  display:flex;align-items:center;gap:0;min-width:160px;max-width:280px;margin-left:auto;
}
.rp-sync-email input{
  flex:1;padding:5px 10px;font-size:11px;background:var(--surface);
  border:1px solid var(--line-1);border-radius:var(--r-s) 0 0 var(--r-s);
  color:var(--t1);font-family:inherit;
}
.rp-sync-email input:focus{border-color:var(--accent);outline:none}
.rp-sync-email button{
  padding:5px 10px;background:var(--accent);color:#fff;border:1px solid var(--accent);
  border-radius:0 var(--r-s) var(--r-s) 0;cursor:pointer;font-size:12px;transition:.15s;
}
.rp-sync-email button:hover{filter:brightness(1.15)}

/* Record View — Line items totals footer */
.rp-line-totals{
  display:flex;flex-direction:column;gap:0;margin-top:8px;
  border-top:1px solid var(--line-1);
}
.rp-line-totals .rp-line-total{
  border-bottom:1px solid var(--line-0);padding:5px 0;
}
.rp-line-totals .rp-line-total.grand{
  border-bottom:none;border-top:1px solid var(--line-1);
  padding-top:8px;margin-top:2px;
}
.rp-line-totals .rp-line-total.grand .rp-line-total-label{font-weight:700;font-size:13px;color:var(--t1)}
.rp-line-totals .rp-line-total.grand .rp-line-total-val{font-weight:700;font-size:14px;color:var(--t1)}

/* Entity Settings — Customer-specific options */
.es-customer-opts{display:flex;flex-direction:column;gap:10px;margin-top:2px}
.es-customer-opts .chk-row{margin:0}
.es-customer-opts .es-date-row{margin-top:4px}
.es-cust-section-title{font-size:12px;font-weight:600;color:var(--t2);margin-bottom:4px;display:flex;align-items:center;gap:8px}
.es-cust-section-title i{color:var(--qb);font-size:11px}

/* Field card content */
.fm-field-name{font-size:12px;font-weight:600;color:var(--t1)}
.fm-field-id{font-size:9px;color:var(--t4);font-family:var(--mono);flex-shrink:0}
.fm-field-type{font-size:9px;color:var(--t3);text-transform:uppercase;font-weight:500;letter-spacing:.3px}

/* Connection dots */
.fm-field-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;transition:.2s}
.fm-field-dot.hs{background:var(--hs);box-shadow:0 0 6px rgba(255,122,89,.3)}
.fm-field-dot.qb{background:var(--qb);box-shadow:0 0 6px rgba(20,184,74,.3)}
.fm-field.unmapped .fm-field-dot{background:var(--t3);box-shadow:none;opacity:.4}

/* Delete button on field (appears on hover) */
.fm-field-del{
  margin-left:auto;width:22px;height:22px;
  border-radius:var(--r-s);border:1px solid rgba(239,68,68,.25);background:rgba(239,68,68,.06);
  color:var(--err);cursor:pointer;display:flex;align-items:center;
  justify-content:center;font-size:9px;opacity:1;transition:.15s;flex-shrink:0;
}
.fm-field-del:hover{background:var(--err);color:#fff;border-color:var(--err)}

/* HS fields: dot on right; QB fields: dot on left */
.fm-col-hs .fm-field{flex-direction:row}
.fm-col-hs .fm-field-dot{order:10}
.fm-col-qb .fm-field{flex-direction:row}
.fm-col-qb .fm-field-dot{order:-1}

/* ═══════════════════════════════════════════════════════════
   SVG FLOW LINES — animated bezier curves
═══════════════════════════════════════════════════════════ */
.fm-path{
  fill:none;stroke-width:1.5;stroke-linecap:round;
  opacity:.45;transition:opacity .2s,stroke-width .2s;
}
.fm-path.highlight{opacity:.8;stroke-width:2.5;filter:drop-shadow(0 0 3px rgba(37,99,235,.2))}
.fm-path-bg{fill:none;stroke:var(--line-1);stroke-width:1;stroke-linecap:round;opacity:.18}
.fm-link-fo{overflow:visible}
.fm-link-icon{
  font-size:10px;pointer-events:none;
  color:var(--t3);opacity:.5;transition:opacity .2s;
  display:flex;align-items:center;justify-content:center;
  width:16px;height:16px;
}

/* ═══════════════════════════════════════════════════════════
   LINE ITEM FIELD SECTION
═══════════════════════════════════════════════════════════ */
.fm-line-section{flex-shrink:0;animation:fadeUp .3s ease}
.fm-line-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0 6px;
}
.fm-line-header h3{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;color:var(--t1)}
.fm-line-header h3 i{color:var(--accent);font-size:12px}
.fm-canvas-lines{max-height:260px;flex:none;overflow-y:auto;overflow-x:hidden}

/* ═══════════════════════════════════════════════════════════
   LICENSE MANAGEMENT VIEW
═══════════════════════════════════════════════════════════ */

/* License usage bar */
.lic-bar-wrap{
  background:var(--surface);border:1px solid var(--line-0);
  border-radius:var(--r-l);padding:16px 20px;flex-shrink:0;
}
.lic-bar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.lic-bar-label{font-size:12px;font-weight:600;color:var(--t2)}
.lic-bar-count{font-size:12px;font-weight:700;color:var(--t1);font-family:var(--mono)}
.lic-bar-track{height:8px;background:var(--raised);border-radius:var(--r-f);overflow:hidden}
.lic-bar-fill{
  height:100%;border-radius:var(--r-f);
  background:linear-gradient(90deg,var(--accent),var(--ok));
  transition:width .4s cubic-bezier(.4,0,.2,1);
}
.lic-bar-fill.warn{background:linear-gradient(90deg,var(--warn),var(--err))}

/* User cards list */
.lic-list{display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1;padding-right:4px}

/* Individual user card */
.lic-card{
  display:flex;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--line-0);
  border-radius:var(--r-l);padding:12px 20px;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  animation:fadeUp .35s ease both;
}
.lic-card:hover{border-color:var(--line-2);box-shadow:0 4px 20px rgba(0,0,0,.15);transform:translateY(-1px)}
.lic-card:nth-child(1){animation-delay:0s}
.lic-card:nth-child(2){animation-delay:.04s}
.lic-card:nth-child(3){animation-delay:.08s}
.lic-card:nth-child(4){animation-delay:.12s}
.lic-card:nth-child(5){animation-delay:.16s}
.lic-card:nth-child(6){animation-delay:.20s}
.lic-card:nth-child(7){animation-delay:.24s}
.lic-card:nth-child(8){animation-delay:.28s}

/* Avatar circle */
.lic-avatar{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;flex-shrink:0;
  background:var(--accent);
}
.lic-avatar.admin{background:linear-gradient(135deg,#ff7a59,#fbbf24)}

/* User info */
.lic-info{flex:1;min-width:0}
.lic-name{font-size:13px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lic-email{font-size:11px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Role & status badges */
.lic-meta{display:flex;align-items:center;gap:8px;flex-shrink:0}
.lic-role{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:var(--r-f);font-size:10px;font-weight:600;
}
.lic-role.admin{background:var(--hs-s);color:var(--hs)}
.lic-role.user{background:var(--raised);color:var(--t3);border:1px solid var(--line-1)}
.lic-status{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:var(--r-f);font-size:10px;font-weight:600;
}
.lic-status.licensed{background:var(--ok-s);color:var(--ok)}
.lic-status.unlicensed{background:var(--raised);color:var(--t3);border:1px solid var(--line-1)}

/* Last active */
.lic-last{font-size:10px;color:var(--t3);white-space:nowrap;min-width:70px;text-align:right}

/* Actions */
.lic-actions{display:flex;gap:6px;flex-shrink:0}

/* ── Subscription card ─────────────────────────────────── */
.sub-card{
  background:var(--surface);border:1px solid var(--line-0);
  border-radius:var(--r-l);padding:16px 20px;flex-shrink:0;
  animation:fadeUp .3s ease both;
}
.sub-card-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.sub-card-plan{
  display:flex;align-items:center;gap:8px;
  font-size:15px;font-weight:700;color:var(--t1);
}
.sub-card-plan i{color:var(--accent);font-size:13px}
.sub-card-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
}
.sub-card-stat{
  background:var(--raised);border:1px solid var(--line-0);
  border-radius:var(--r);padding:10px 12px;
}
.sub-card-stat-lbl{
  font-size:10px;color:var(--t3);font-weight:600;
  text-transform:uppercase;letter-spacing:.4px;
}
.sub-card-stat-val{
  font-size:14px;font-weight:600;color:var(--t1);margin-top:3px;
  display:flex;align-items:center;gap:5px;
}
.sub-card-stat-val.green{color:var(--ok)}
.sub-card-stat-val.warn{color:var(--warn)}
.sub-card-stat-val.err{color:var(--err)}
.sub-cancel-banner{margin-top:14px}

/* ── Invoice history section ──────────────────────────── */
.inv-section{
  background:var(--surface);border:1px solid var(--line-0);
  border-radius:var(--r-l);padding:16px 20px;flex-shrink:0;
  animation:fadeUp .35s ease both;animation-delay:.05s;
}
.inv-section-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.inv-section-title{
  font-size:13px;font-weight:700;color:var(--t1);
  display:flex;align-items:center;gap:8px;
}
.inv-section-title i{color:var(--accent);font-size:12px}
.inv-status{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:var(--r-f);
  font-size:10px;font-weight:600;
}
.inv-status.paid{background:var(--ok-s);color:var(--ok)}
.inv-status.pending{background:var(--warn-s);color:var(--warn)}
.inv-status.failed{background:var(--err-s);color:var(--err)}
.inv-actions{display:flex;gap:4px}
.inv-actions button{
  background:var(--raised);border:1px solid var(--line-1);
  color:var(--t2);border-radius:var(--r-s);
  width:26px;height:26px;display:inline-flex;
  align-items:center;justify-content:center;
  cursor:pointer;font-size:10px;transition:.15s;font-family:inherit;
}
.inv-actions button:hover{background:var(--float);color:var(--t1)}

/* ── HubSpot Automations view ────────────────────────── */
.aut-info{
  background:var(--surface);border:1px solid var(--line-0);
  border-radius:var(--r);padding:12px 16px;
  font-size:12px;color:var(--t2);line-height:1.6;
  display:flex;align-items:flex-start;gap:10px;flex-shrink:0;
}
.aut-info i{color:var(--accent);font-size:13px;margin-top:2px;flex-shrink:0}
.aut-info code{
  background:var(--raised);padding:1px 6px;border-radius:var(--r-s);
  font-size:11px;font-family:var(--mono);color:var(--warn);
}
.aut-scanning{
  display:flex;align-items:center;gap:10px;
  padding:20px;font-size:12px;color:var(--t3);
}
.aut-scanning i{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.aut-list{display:flex;flex-direction:column;gap:8px}
.aut-card{
  background:var(--surface);border:1px solid var(--line-0);
  border-radius:var(--r);padding:14px 16px;
  display:flex;align-items:center;gap:14px;
  transition:.15s;cursor:pointer;animation:fadeUp .3s ease both;
}
.aut-card:hover{border-color:var(--accent);background:var(--raised)}
.aut-ico{
  width:36px;height:36px;border-radius:var(--r-s);
  background:var(--hs-s);color:var(--hs);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;
}
.aut-body{flex:1;min-width:0}
.aut-name{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:2px}
.aut-desc{font-size:11px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aut-meta{display:flex;align-items:center;gap:8px;flex-shrink:0}
.aut-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:var(--r-f);
  font-size:10px;font-weight:600;
}
.aut-badge.active{background:var(--ok-s);color:var(--ok)}
.aut-badge.paused{background:var(--warn-s);color:var(--warn)}
.aut-badge.draft{background:var(--raised);color:var(--t3)}
.aut-open{
  font-size:11px;color:var(--accent);font-weight:600;
  display:flex;align-items:center;gap:4px;white-space:nowrap;
}
.aut-open i{font-size:9px}
.aut-empty{
  text-align:center;padding:40px 20px;color:var(--t3);font-size:13px;
}
.aut-empty i{font-size:28px;margin-bottom:12px;display:block;color:var(--line-3)}

/* ── Autonomous Sync Dashboard ──────────────────────────────── */
.ap-desc{
  background:var(--surface);border:1px solid var(--line-0);border-radius:var(--r-l);
  padding:16px 20px;margin-bottom:12px;position:relative;
}
.ap-desc-close{
  position:absolute;top:10px;right:10px;width:24px;height:24px;
  border:none;background:transparent;color:var(--t3);cursor:pointer;
  border-radius:var(--r-s);display:flex;align-items:center;justify-content:center;
  font-size:12px;transition:.15s;
}
.ap-desc-close:hover{background:var(--raised);color:var(--t1)}
.ap-desc-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ap-desc-heading{font-size:11px;font-weight:700;color:var(--t1);margin-bottom:6px;display:flex;align-items:center;gap:5px}
.ap-desc-heading i{color:var(--accent);font-size:10px}
.ap-desc ul{margin:0;padding-left:16px;font-size:11.5px;color:var(--t3);line-height:1.7}
.ap-desc li{padding-left:2px}
@media(max-width:768px){.ap-desc-cols{grid-template-columns:1fr}}
.ap-kpi-row{
  display:grid;grid-template-columns:repeat(5,1fr);gap:12px;
  margin:16px 0;
}
.ap-kpi{
  background:var(--surface);border:1px solid var(--line-0);border-radius:var(--r);
  padding:16px;text-align:center;cursor:pointer;transition:.15s;
}
.ap-kpi:hover{border-color:var(--accent);background:var(--raised)}
.ap-kpi-val{font-size:24px;font-weight:800;font-family:var(--mono);color:var(--t1);line-height:1}
.ap-kpi-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);margin-top:6px;display:flex;align-items:center;justify-content:center;gap:4px}
.ap-dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.ap-dot.live{background:var(--ok);animation:pulse-dot 2s ease infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.3}}

/* Calendar strip */
.ap-calendar-wrap{
  background:var(--surface);border:1px solid var(--line-0);border-radius:var(--r);
  padding:16px;margin-bottom:16px;
}
.ap-cal-title{font-size:12px;font-weight:700;color:var(--t2);margin-bottom:12px;display:flex;align-items:center;gap:6px}
.ap-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.ap-cal-day{text-align:center;min-height:80px}
.ap-cal-day-name{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);font-weight:700;margin-bottom:6px}
.ap-cal-day-num{font-size:13px;font-weight:700;color:var(--t1);margin-bottom:8px}
.ap-cal-day.today .ap-cal-day-num{color:var(--accent);position:relative}
.ap-cal-day.today .ap-cal-day-num::after{content:'';position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:16px;height:2px;background:var(--accent);border-radius:1px}
.ap-cal-dot{
  display:inline-flex;align-items:center;justify-content:center;
  width:8px;height:8px;border-radius:50%;margin:1px;cursor:pointer;
  transition:.15s;
}
.ap-cal-dot:hover{transform:scale(1.5)}
.ap-cal-dot.executed{background:var(--ok)}
.ap-cal-dot.scheduled{background:var(--accent)}
.ap-cal-dot.watching{background:var(--warn)}
.ap-cal-dot.failed{background:var(--err)}
.ap-cal-dot.paused{background:var(--t3)}
.ap-cal-events{display:flex;flex-wrap:wrap;justify-content:center;gap:2px}

/* Filter tabs */
.ap-tabs{display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap}
.ap-tab{
  padding:6px 14px;border-radius:var(--r-f);
  font-size:11px;font-weight:600;background:var(--surface);
  color:var(--t3);border:1px solid var(--line-0);cursor:pointer;
  transition:.15s;
}
.ap-tab:hover{color:var(--t1);border-color:var(--line-2)}
.ap-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Instruction cards */
.ap-instr{
  background:var(--surface);border:1px solid var(--line-0);
  border-radius:var(--r);padding:14px 16px;margin-bottom:8px;
  display:flex;align-items:flex-start;gap:12px;
  transition:.15s;animation:fadeUp .3s ease both;
}
.ap-instr:hover{border-color:var(--line-2);background:var(--raised)}
.ap-instr-icon{
  width:32px;height:32px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;font-size:13px;flex-shrink:0;margin-top:2px;
}
.ap-instr-icon.sync_record{background:rgba(255,122,89,.12);color:var(--hs)}
.ap-instr-icon.sync_batch{background:rgba(255,122,89,.12);color:var(--hs)}
.ap-instr-icon.notify_email{background:rgba(245,158,11,.12);color:#f59e0b}
.ap-instr-icon.conditional{background:rgba(236,72,153,.12);color:#ec4899}
.ap-instr-icon.recurring_report{background:rgba(14,165,233,.12);color:#0ea5e9}
.ap-instr-icon.monitor{background:rgba(168,85,247,.12);color:#a855f7}
.ap-instr-body{flex:1;min-width:0}
.ap-instr-text{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:3px}
.ap-instr-meta{font-size:11px;color:var(--t3);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ap-instr-meta i{font-size:9px}
.ap-verify-links{display:inline-flex;gap:6px}
.ap-verify-links a{font-size:10px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:4px;transition:.15s}
.ap-verify-links .ap-link-hs{color:var(--hs);border:1px solid rgba(255,122,89,.2);background:rgba(255,122,89,.05)}
.ap-verify-links .ap-link-hs:hover{background:var(--hs);color:#fff;border-color:var(--hs)}
.ap-verify-links .ap-link-qb{color:var(--qb);border:1px solid rgba(20,184,74,.2);background:rgba(20,184,74,.05)}
.ap-verify-links .ap-link-qb:hover{background:var(--qb);color:#fff;border-color:var(--qb)}
.ap-instr-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.ap-instr-status{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:var(--r-f);
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;
}
.ap-instr-status.pending_approval{background:var(--warn-s);color:var(--warn)}
.ap-instr-status.queued,.ap-instr-status.scheduled{background:rgba(14,165,233,.12);color:#0ea5e9}
.ap-instr-status.executing{background:rgba(37,99,235,.12);color:#2563eb}
.ap-instr-status.executed{background:var(--ok-s);color:var(--ok)}
.ap-instr-status.failed{background:rgba(239,68,68,.12);color:#ef4444}
.ap-instr-status.cancelled{background:var(--raised);color:var(--t3)}
.ap-instr-status.paused{background:var(--warn-s);color:var(--warn)}
.ap-instr-status.condition_watching{background:rgba(245,158,11,.12);color:#f59e0b}
.ap-instr-status.draft{background:var(--raised);color:var(--t3)}
.ap-instr-actions{display:flex;gap:4px}
.ap-instr-actions button{
  padding:3px 8px;border-radius:var(--r-s);font-size:10px;
  font-weight:600;background:var(--raised);color:var(--t2);
  border:1px solid var(--line-0);cursor:pointer;transition:.15s;
}
.ap-instr-actions button:hover{border-color:var(--line-2);color:var(--t1)}
.ap-instr-actions button.approve{background:var(--ok-s);color:var(--ok);border-color:var(--ok)}
.ap-instr-actions button.cancel{background:rgba(239,68,68,.08);color:#ef4444;border-color:rgba(239,68,68,.3)}

/* Template grid */
.ap-tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:8px}
.ap-tpl-card{
  background:var(--surface);border:1px solid var(--line-0);border-radius:var(--r);
  padding:14px 12px;cursor:pointer;text-align:center;transition:.15s;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.ap-tpl-card:hover{border-color:var(--accent);background:var(--raised);transform:translateY(-1px)}
.ap-tpl-card i{font-size:20px;color:var(--accent)}
.ap-tpl-card strong{font-size:12px;color:var(--t1)}
.ap-tpl-card span{font-size:10px;color:var(--t3)}
.ap-preset-card{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border:1px solid var(--line-0);border-radius:var(--r-s);cursor:pointer;transition:.15s;
}
.ap-preset-card:hover{border-color:var(--accent);background:var(--raised)}
.ap-preset-card>i{font-size:14px;flex-shrink:0;width:28px;text-align:center}
.ap-preset-card>div{flex:1;min-width:0}
.ap-preset-card strong{font-size:11.5px;color:var(--t1);display:block}
.ap-preset-card span{font-size:10px;color:var(--t3);display:block;margin-top:1px}
.ap-tpl-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:var(--r-f);
  font-size:11px;font-weight:600;background:var(--accent-s);color:var(--accent);
}
.ap-search-results{
  max-height:200px;overflow-y:auto;border:1px solid var(--line-0);
  border-radius:var(--r-s);display:none;margin-top:4px;
}
.ap-search-item{
  padding:8px 12px;cursor:pointer;font-size:12px;color:var(--t1);
  border-bottom:1px solid var(--line-0);transition:.1s;
}
.ap-search-item:hover{background:var(--raised)}
.ap-search-item:last-child{border-bottom:none}
.ap-preview{
  background:var(--raised);border:1px solid var(--line-0);border-radius:var(--r-s);
  padding:12px 14px;
}
.ap-preview-label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);margin-bottom:6px}
.ap-preview-text{font-size:13px;color:var(--t1);font-weight:500;line-height:1.5}

/* Instruction detail modal */
.instr-det-row{display:flex;gap:8px;margin-bottom:8px;font-size:12px}
.instr-det-row .lbl{color:var(--t3);width:100px;flex-shrink:0;font-weight:600}
.instr-det-row .val{color:var(--t1);flex:1;word-break:break-word}
.instr-log-item{
  padding:8px 0;border-bottom:1px solid var(--line-0);font-size:11px;
  display:flex;align-items:center;gap:8px;
}
.instr-log-item:last-child{border-bottom:none}
.instr-log-action{font-weight:700;color:var(--accent);text-transform:uppercase;font-size:10px;width:70px;flex-shrink:0}
.instr-log-time{color:var(--t3);margin-left:auto;flex-shrink:0}

.btn-xs{padding:4px 8px;font-size:10px;border-radius:var(--r-s)}
.instr-fields .fg{margin-bottom:0}

@media(max-width:768px){
  .ap-kpi-row{grid-template-columns:repeat(3,1fr)}
  .ap-calendar{grid-template-columns:repeat(4,1fr)}
  .ap-tpl-grid{grid-template-columns:repeat(2,1fr)}
}

/* ── Copilot rule cards ──────────────────────────────── */
.cp-card{
  background:var(--surface);border:1px solid var(--line-1);border-radius:8px;
  padding:14px 16px;margin-bottom:8px;display:flex;align-items:center;gap:14px;
  transition:border-color .15s,background .15s;
}
.cp-card:hover{border-color:var(--accent);background:var(--raised)}
.cp-card-icon{
  width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:15px;flex-shrink:0;
}
.cp-card-icon.deal{background:rgba(37,99,235,.12);color:#2563eb}
.cp-card-icon.payment{background:rgba(20,184,74,.12);color:var(--qb)}
.cp-card-body{flex:1;min-width:0}
.cp-card-name{font-size:13px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-card-desc{font-size:11px;color:var(--t3);margin-top:2px}
.cp-card-meta{font-size:10px;color:var(--t4);margin-top:4px;display:flex;gap:12px;flex-wrap:wrap}
.cp-card-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.cp-tag{
  font-size:9px;font-weight:600;padding:2px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:.3px;
}
.cp-tag.sync{background:rgba(37,99,235,.12);color:#2563eb}
.cp-tag.email{background:rgba(20,184,74,.12);color:var(--qb)}
.cp-toggle{
  width:34px;height:18px;border-radius:9px;background:var(--line-2);cursor:pointer;
  position:relative;transition:background .2s;border:none;padding:0;
}
.cp-toggle.on{background:var(--ok)}
.cp-toggle::after{
  content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;
  border-radius:50%;background:#fff;transition:transform .2s;
}
.cp-toggle.on::after{transform:translateX(16px)}
.cp-empty{text-align:center;padding:40px 20px;color:var(--t3);font-size:13px}
.cp-empty i{font-size:28px;margin-bottom:12px;display:block;color:var(--line-3)}

/* ── Field review banner ─────────────────────────────── */
/* ── Entity settings modal ────────────────────────────── */
.es-section{}
.es-section-title{
  font-size:12px;font-weight:700;color:var(--t1);
  display:flex;align-items:center;gap:8px;
}
.es-section-title i{font-size:11px}
.es-divider{border-top:1px solid var(--line-0);margin:4px 0}
.es-hint{
  font-size:11px;color:var(--t3);line-height:1.5;
  display:flex;align-items:flex-start;gap:6px;margin-top:6px;
}
.es-hint i{color:var(--accent);font-size:10px;margin-top:3px;flex-shrink:0}
.es-hint code{
  background:var(--raised);padding:1px 5px;border-radius:var(--r-s);
  font-size:10px;font-family:var(--mono);color:var(--warn);
}
.es-import-label{
  font-size:12px;font-weight:600;color:var(--t1);margin-top:10px;
}
.es-date-row{display:flex;gap:12px;margin-top:8px}
.es-date-row .fg{flex:1}
.es-import-progress{
  margin-top:10px;padding:10px 12px;
  background:var(--raised);border:1px solid var(--line-0);
  border-radius:var(--r-s);
}
.es-progress-head{
  display:flex;justify-content:space-between;
  font-size:11px;font-weight:600;color:var(--t1);margin-bottom:6px;
}
.es-progress-track{
  height:6px;background:var(--line-0);border-radius:3px;overflow:hidden;
}
.es-progress-fill{
  height:100%;background:linear-gradient(90deg,var(--accent),var(--ok));
  border-radius:3px;transition:width .3s ease;
}
.es-progress-detail{
  font-size:10px;color:var(--t3);margin-top:6px;
}

/* ── Field review banner ─────────────────────────────── */
.field-review-banner{
  background:rgba(37,99,235,.07);
  border:1px solid var(--accent);border-left:3px solid var(--accent);
  border-radius:var(--r);padding:14px 16px;
  animation:fadeUp .3s ease both;flex-shrink:0;
}
.field-review-banner .frb-head{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
}
.field-review-banner .frb-title{
  font-size:13px;font-weight:700;color:var(--t1);flex:1;
}
.field-review-banner .frb-dismiss{
  background:none;border:none;color:var(--t3);cursor:pointer;
  font-size:12px;padding:2px 6px;border-radius:var(--r-s);transition:.15s;
}
.field-review-banner .frb-dismiss:hover{background:var(--raised);color:var(--t1)}
.field-review-banner .frb-body{
  font-size:12px;color:var(--t2);line-height:1.7;
}
.field-review-banner .frb-body strong{color:var(--t1)}
.field-review-banner .frb-body code{
  background:var(--raised);padding:1px 6px;border-radius:var(--r-s);
  font-size:11px;font-family:var(--mono);color:var(--warn);
}
.field-review-banner .frb-steps{
  margin-top:10px;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:6px;
}
.field-review-banner .frb-steps li{
  font-size:11px;color:var(--t2);display:flex;align-items:flex-start;gap:8px;
}
.field-review-banner .frb-steps li i{
  color:var(--accent);font-size:10px;margin-top:3px;flex-shrink:0;
}

/* ── Plan selector modal ─────────────────────────────── */
.plan-modal{
  background:var(--surface);border:1px solid var(--line-0);
  border-radius:var(--r-l);max-width:940px;width:95vw;
  max-height:90vh;overflow-y:auto;padding:24px;
  animation:fadeUp .25s ease both;
}
.plan-modal-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:20px;gap:16px;
}
.plan-modal-sub{
  font-size:12px;color:var(--t3);margin-top:4px;line-height:1.4;
}
.plan-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  padding-top:10px;
}
.plan-card{
  background:var(--raised);border:1px solid var(--line-0);
  border-radius:var(--r-l);padding:20px 16px;
  display:flex;flex-direction:column;position:relative;overflow:visible;
  transition:border-color .2s,box-shadow .2s;
}
.plan-card:hover{border-color:var(--line-1);box-shadow:0 4px 20px rgba(0,0,0,.08)}
.plan-card.current{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent),0 4px 20px var(--accent-g);
}
.plan-card.popular{border-color:var(--ok)}
.plan-popular-tag{
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  background:var(--ok);color:#fff;font-size:9px;font-weight:700;
  padding:2px 10px;border-radius:var(--r-f);letter-spacing:.5px;
  text-transform:uppercase;white-space:nowrap;z-index:1;
}
.plan-current-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--accent-s);color:var(--accent);
  font-size:9px;font-weight:700;padding:2px 8px;
  border-radius:var(--r-f);letter-spacing:.3px;
  text-transform:uppercase;margin-bottom:8px;
}
.plan-card-name{
  font-size:13px;font-weight:700;color:var(--t1);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;
}
.plan-card-label{
  font-size:10px;color:var(--accent);font-weight:600;
  text-transform:uppercase;letter-spacing:.3px;
}
.plan-card-price{
  font-size:28px;font-weight:800;color:var(--t1);
  margin:10px 0 2px;line-height:1;
}
.plan-card-price small{
  font-size:13px;font-weight:500;color:var(--t3);
}
.plan-card-price del{
  font-size:14px;font-weight:400;color:var(--t3);
  margin-right:4px;
}
.plan-card-save{
  display:inline-flex;align-items:center;gap:3px;
  background:var(--err-s);color:var(--err);
  font-size:9px;font-weight:700;padding:2px 7px;
  border-radius:var(--r-f);margin-top:4px;
}
.plan-card-meta{
  font-size:11px;color:var(--t3);line-height:1.6;
  margin:8px 0 14px;
}
.plan-card-meta strong{color:var(--t2);font-weight:600}
.plan-card-cta{margin-top:auto;padding-top:12px}
.plan-card-cta button{
  width:100%;padding:10px 12px;border:none;border-radius:var(--r);
  font-size:12px;font-weight:700;cursor:pointer;
  font-family:inherit;transition:all .15s;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.plan-cta-trial{
  background:#2563eb;color:#fff;
}
.plan-cta-trial:hover{filter:brightness(1.1);transform:translateY(-1px)}
.plan-cta-buy{
  background:var(--accent);color:#fff;
}
.plan-cta-buy:hover{filter:brightness(1.1);transform:translateY(-1px)}
.plan-cta-current{
  background:var(--surface);color:var(--t3);border:1px solid var(--line-1)!important;
  cursor:default;
}
.plan-card-divider{
  height:1px;background:var(--line-0);margin:14px 0;
}
.plan-card-features{
  list-style:none;padding:0;margin:0;
}
.plan-card-features li{
  font-size:11px;color:var(--t2);line-height:1.5;
  padding:2px 0;display:flex;align-items:flex-start;gap:6px;
}
.plan-card-features li i{
  color:var(--ok);font-size:9px;margin-top:3px;flex-shrink:0;
}
.plan-card-features li.highlight{
  color:var(--accent);font-weight:600;
}
.plan-card-features li.highlight i{color:var(--accent)}
.plan-card-note{
  font-size:10px;color:var(--err);font-weight:500;
  margin-top:8px;line-height:1.4;
}
.plan-trial-note{
  text-align:center;font-size:11px;color:var(--t3);
  margin-top:16px;line-height:1.5;
}
.plan-trial-note i{color:var(--accent);margin-right:4px}

@media(max-width:900px){
  .plan-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .plan-modal{padding:16px;width:100vw;max-width:100%;border-radius:0;max-height:100vh}
  .plan-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .sub-card-stats{grid-template-columns:1fr 1fr}
}

/* ── Auth screen ──────────────────────────────────────── */
.auth-screen{
  position:fixed;inset:0;z-index:10000;
  background:var(--void);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .3s;
}
.auth-screen.hidden{opacity:0;pointer-events:none}
.auth-card{
  background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-xl);box-shadow:0 24px 64px rgba(0,0,0,.5);
  width:100%;max-width:400px;overflow:hidden;
}
.auth-head{
  display:flex;align-items:center;gap:12px;
  padding:20px 24px;border-bottom:1px solid var(--line-0);
}
.auth-logo{
  width:38px;height:38px;flex-shrink:0;
  border-radius:var(--r);overflow:hidden;
}
.auth-logo img{width:auto;height:100%;display:block}
.auth-ttl{font-size:16px;font-weight:600;color:var(--t1)}
.auth-sub{font-size:11px;color:var(--t3);margin-top:2px}
.auth-body{padding:24px}
.auth-foot{
  padding:16px 24px;border-top:1px solid var(--line-0);
  background:color-mix(in srgb, var(--raised) 50%, transparent);
  text-align:center;
}
.auth-foot-txt{font-size:11px;color:var(--t3)}
.auth-msg{font-size:12px;color:var(--t3);margin-bottom:16px;line-height:1.5}
.auth-msg strong{color:var(--t1)}
.auth-err{font-size:11px;color:#dc2626;margin-top:8px;min-height:16px}
.auth-inp{
  width:100%;background:var(--raised);border:1px solid var(--line-1);
  border-radius:var(--r);color:var(--t1);font-size:18px;
  padding:9px 12px;outline:none;transition:.15s;letter-spacing:5px;text-align:center;
  font-family:'Inter',system-ui,sans-serif;
}
.auth-inp:focus{border-color:var(--t3);box-shadow:none}
.auth-inp::placeholder{color:var(--t3)}
.auth-btn{
  width:100%;margin-top:14px;padding:10px 16px;
  background:var(--t1);color:var(--bg);border:none;border-radius:var(--r);
  font-size:13px;font-weight:600;cursor:pointer;transition:.15s;
  font-family:'Inter',system-ui,sans-serif;
}
.auth-btn:hover{opacity:.85}
.auth-btn:active{transform:scale(.97)}
.auth-btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.auth-link{
  background:none;border:none;color:var(--t3);cursor:pointer;
  font-size:12px;font-weight:500;padding:0;margin-top:12px;
  font-family:'Inter',system-ui,sans-serif;
}
.auth-link:hover{color:var(--t1);text-decoration:underline}
.auth-timer{font-size:11px;color:var(--t3);margin-top:12px;text-align:center}
.auth-timer span{color:var(--t2);font-weight:600;font-family:var(--mono)}
.auth-code-row{display:flex;gap:8px;align-items:center}
.auth-code-row .auth-inp{flex:1}
.auth-loader{
  display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;border-radius:50%;animation:auth-spin .6s linear infinite;
  margin-right:6px;vertical-align:middle;
}
@keyframes auth-spin{to{transform:rotate(360deg)}}
.auth-step{display:none}
.auth-step.active{display:block}
.afm-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.afm-col{display:flex;flex-direction:column;min-height:0}
.afm-col-head{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.afm-col-head i{font-size:13px}
.afm-col-head.hs-head i{color:var(--hs)}
.afm-col-head.qb-head i{color:var(--qb)}
.afm-col-head span{font-size:12px;font-weight:600;color:var(--t2)}
.afm-search{width:100%;padding:7px 10px;border:1px solid var(--b2);border-radius:6px;font-size:12px;box-sizing:border-box;background:var(--bg);color:var(--t1);outline:none;transition:border-color .15s}
.afm-search:focus{border-color:var(--t3)}
.afm-search.hs-search:focus{border-color:var(--hs)}
.afm-search.qb-search:focus{border-color:var(--qb)}
.afm-list{flex:1;min-height:120px;max-height:220px;overflow-y:auto;border:1px solid var(--b2);border-radius:6px;background:var(--bg);margin-top:4px}
.afm-list-item{padding:6px 10px;cursor:pointer;font-size:12px;border-bottom:1px solid var(--b1);transition:background .1s}
.afm-list-item:last-child{border-bottom:none}
.afm-list-item:hover{background:var(--hover)}
.afm-list-item.hs-sel{background:var(--hs-s)}
.afm-list-item.qb-sel{background:var(--qb-s)}
.afm-list-item .afm-lbl{font-weight:500;color:var(--t1)}
.afm-list-item .afm-sub{font-size:10px;color:var(--t4);margin-top:1px}
.afm-chip{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px;font-size:12px;font-weight:600}
.afm-chip i{font-size:10px}
.afm-chip.hs-chip{background:var(--hs-s);border:1px solid rgba(255,122,89,.25);color:var(--hs)}
.afm-chip.qb-chip{background:var(--qb-s);border:1px solid rgba(20,184,74,.25);color:var(--qb)}
.afm-arrow{display:flex;align-items:center;justify-content:center;grid-column:1/-1;padding:2px 0}
.afm-arrow i{font-size:14px;color:var(--t4)}
.afm-empty{padding:16px;text-align:center;font-size:11px;color:var(--t4)}
@media(max-width:580px){.afm-cols{grid-template-columns:1fr;gap:12px}}
@keyframes mp-spin{to{transform:rotate(360deg)}}
#mp_steps .mp-step{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--t3);transition:color .2s}
#mp_steps .mp-step.active{color:var(--t1);font-weight:600}
#mp_steps .mp-step.done{color:var(--green,#14B84A)}
#mp_steps .mp-step i{width:16px;text-align:center;font-size:12px}