/* ===========================================================
   AI Web Command — SaaS control center
   Premium, quiet, dense operational design system
   =========================================================== */

:root{
  --bg:#FFFFFF;
  --bg-soft:#F8F9FB;
  --bg-soft-2:#F2F4F8;
  --surface:#FFFFFF;

  --text:#06223F;
  --text-secondary:#456078;
  --text-tertiary:#72879A;

  --border:#E4E7EC;
  --border-strong:#D2D7E0;

  --accent:#117AD1;
  --accent-dark:#0B5EA8;
  --accent-soft:#E8F3FC;
  --orange:#F28C38;

  --success:#16A34A;
  --success-soft:#E9F7EF;
  --warning:#C9681D;
  --warning-soft:#FDEFE3;
  --danger:#C4211C;
  --danger-soft:#FBEAEA;
  --neutral-soft:#F2F4F8;

  --radius-sm:7px;
  --radius-md:10px;
  --radius-lg:14px;

  --shadow-sm:0 1px 2px rgba(6,34,63,0.05);
  --shadow-md:0 6px 20px rgba(6,34,63,0.10);
  --shadow-lg:0 20px 50px rgba(6,34,63,0.18);

  --sidebar-w:236px;
  --header-h:60px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;background:var(--bg-soft);color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:13.5px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-0.015em;color:var(--text);}
p{margin:0;}
a{color:inherit;text-decoration:none;}
svg.icon{width:16px;height:16px;stroke-width:2px;flex-shrink:0;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}

/* ---------- App shell ---------- */
.app{display:flex;min-height:100vh;}
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);
  position:fixed;top:0;bottom:0;left:0;display:flex;flex-direction:column;z-index:60;
}
.sidebar-head{padding:18px 18px 14px;border-bottom:1px solid var(--border);}
.org-switcher{
  display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;cursor:pointer;border:1px solid transparent;
}
.org-switcher:hover{background:var(--bg-soft);border-color:var(--border);}
.org-mark{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--accent),#36A8EA);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex-shrink:0;}
.org-name{font-size:13.5px;font-weight:650;}
.org-plan{font-size:10.5px;color:var(--text-tertiary);}
.org-switcher svg{margin-left:auto;color:var(--text-tertiary);}

.nav{flex:1;overflow-y:auto;padding:12px 10px;}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:13.3px;font-weight:500;
  color:var(--text-secondary);margin-bottom:1px;cursor:pointer;
}
.nav-item svg{color:var(--text-tertiary);}
.nav-item:hover{background:var(--bg-soft);color:var(--text);}
.nav-item:hover svg{color:var(--orange);}
.nav-item.active{background:var(--accent-soft);color:var(--accent-dark);font-weight:650;}
.nav-item.active svg{color:var(--accent);}
.nav-badge{margin-left:auto;font-size:10px;font-weight:700;background:var(--danger-soft);color:var(--danger);padding:1px 6px;border-radius:10px;}

.sidebar-foot{padding:12px;border-top:1px solid var(--border);}
.account-row{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;cursor:pointer;}
.account-row:hover{background:var(--bg-soft);}
.avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#36A8EA);color:#fff;font-size:12px;font-weight:650;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.account-name{font-size:12.8px;font-weight:600;}
.account-email{font-size:11px;color:var(--text-tertiary);}
.logout-button{display:flex;align-items:center;gap:7px;width:100%;margin-top:7px;padding:8px;border:0;border-radius:7px;background:transparent;color:var(--text-secondary);font:inherit;font-size:12px;font-weight:600;cursor:pointer;}
.logout-button:hover{background:var(--bg-soft);color:var(--text);}

/* Main column */
.main{margin-left:var(--sidebar-w);flex:1;min-width:0;display:flex;flex-direction:column;}
.header{
  height:var(--header-h);background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:sticky;top:0;z-index:50;
}
.header-left{display:flex;align-items:center;gap:14px;}
.page-heading{font-size:15px;font-weight:650;}
.site-context{
  display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-secondary);
  border:1px solid var(--border);border-radius:7px;padding:5px 10px;cursor:pointer;
}
.site-context:hover{background:var(--bg-soft);}
.header-right{display:flex;align-items:center;gap:8px;}
.icon-btn{
  width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:none;
  display:flex;align-items:center;justify-content:center;color:var(--text-secondary);cursor:pointer;position:relative;
}
.icon-btn:hover{background:var(--bg-soft);border-color:var(--border);}
.icon-btn .dot-badge{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--danger);border:1.5px solid #fff;}
.search-box{
  display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:8px;padding:6px 10px;
  color:var(--text-tertiary);font-size:12.8px;min-width:220px;cursor:pointer;
}
.search-box kbd{margin-left:auto;font-size:10.5px;border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:var(--text-tertiary);}

.content{padding:22px 26px 60px;max-width:1320px;margin:0 auto;width:100%;}

.page-title-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:4px;}
.page-title-row h1{font-size:21px;}
.page-sub{color:var(--text-secondary);font-size:13px;margin-bottom:22px;max-width:620px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;justify-content:center;padding:8px 14px;border-radius:8px;
  font-size:13px;font-weight:600;border:1px solid var(--border-strong);background:#fff;color:var(--text);
  cursor:pointer;transition:background .12s ease,border-color .12s ease;white-space:nowrap;
}
.btn:hover{background:var(--bg-soft);}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);}
.btn svg,.button-primary svg{color:#fff;stroke:currentColor;flex:0 0 auto;}
.btn-primary svg,.button-primary svg{color:#fff;}
.btn-danger{background:#fff;border-color:var(--danger);color:var(--danger);}
.btn-danger:hover{background:var(--danger-soft);}
.btn-ghost{border-color:transparent;background:transparent;color:var(--text-secondary);}
.btn-ghost:hover{background:var(--bg-soft);color:var(--text);}
.btn-sm{padding:6px 10px;font-size:12.3px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-block{width:100%;}

/* ---------- Panels / cards (compact, not oversized) ---------- */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);}
.panel-pad{padding:16px 18px;}
.plugin-onboarding{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 24px;align-items:start;padding:20px 0 24px;margin-bottom:18px;border-bottom:1px solid var(--border);}
.plugin-onboarding h2{font-size:17px;margin:0 0 6px;}
.plugin-onboarding p{font-size:13px;color:var(--text-secondary);max-width:700px;margin:0;line-height:1.55;}
.plugin-onboarding ol{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;list-style:none;counter-reset:step;margin:10px 0 0;padding:0;}
.plugin-onboarding li{counter-increment:step;font-size:12.5px;line-height:1.5;color:var(--text-secondary);padding-left:31px;position:relative;}
.plugin-onboarding li:before{content:counter(step);position:absolute;left:0;top:0;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:var(--bg-soft);color:var(--accent);font-weight:700;}
.overview-onboarding-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;}
@media(max-width:760px){.plugin-onboarding{grid-template-columns:1fr}.plugin-onboarding .btn{justify-self:start}.plugin-onboarding ol{grid-template-columns:1fr;gap:12px}}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;}
.panel-title{font-size:13.8px;font-weight:650;}
.panel-sub{color:var(--text-secondary);font-size:12px;margin-top:2px;}

.grid{display:grid;gap:14px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:1fr 1fr;}
.grid-2-1{grid-template-columns:1.6fr 1fr;}
@media(max-width:1080px){.grid-4{grid-template-columns:repeat(2,1fr);}.grid-3{grid-template-columns:repeat(2,1fr);}.grid-2,.grid-2-1{grid-template-columns:1fr;}}
@media(max-width:640px){.grid-4{grid-template-columns:1fr;}}

.metric-box{padding:14px 16px;}
.metric-label{font-size:11px;font-weight:650;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;}
.metric-value{font-size:21px;font-weight:700;margin-top:5px;font-variant-numeric:tabular-nums;}
.metric-sub{font-size:11.5px;color:var(--text-tertiary);margin-top:3px;}
.metric-sub.ok{color:var(--success);}
.metric-sub.warn{color:var(--warning);}

/* ---------- Tables (dense) ---------- */
table{width:100%;border-collapse:collapse;}
th{text-align:left;font-size:11px;font-weight:650;color:var(--text-secondary);padding:0 12px 8px;border-bottom:1px solid var(--border-strong);text-transform:uppercase;letter-spacing:.02em;}
td{padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--bg-soft);}
.cell-strong{font-weight:650;}
.cell-muted{color:var(--text-secondary);}
.mono{font-family:'SFMono-Regular',Consolas,Menlo,monospace;font-size:12.2px;}
.row-link{display:flex;flex-direction:column;}
.row-link .sub{font-size:11.5px;color:var(--text-tertiary);}

/* ---------- Status pills ---------- */
.status{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:650;padding:2px 9px;border-radius:20px;}
.status-success{background:var(--success-soft);color:var(--success);}
.status-warning{background:var(--warning-soft);color:var(--warning);}
.status-danger{background:var(--danger-soft);color:var(--danger);}
.status-neutral{background:var(--neutral-soft);color:var(--text-secondary);}
.status-accent{background:var(--accent-soft);color:var(--accent-dark);}
.status svg{width:11px;height:11px;}

/* ---------- Attention list ---------- */
.attn-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--border);}
.attn-row:last-child{border-bottom:none;}
.attn-ic{width:28px;height:28px;border-radius:8px;background:var(--warning-soft);color:var(--warning);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.attn-ic.danger{background:var(--danger-soft);color:var(--danger);}
.attn-title{font-size:13px;font-weight:600;}
.attn-sub{font-size:11.5px;color:var(--text-tertiary);}

/* ---------- Empty state ---------- */
.empty-state{padding:44px 20px;text-align:center;color:var(--text-secondary);}
.empty-state > svg{width:30px;height:30px;color:var(--text-tertiary);margin-bottom:12px;}
.empty-state .title{font-weight:650;color:var(--text);margin-bottom:5px;font-size:14px;}
.empty-state .desc{font-size:13px;max-width:340px;margin:0 auto 16px;}

/* ---------- Tabs (in-page, SaaS style) ---------- */
.tabs-bar{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:20px;overflow-x:auto;}
.tab{padding:10px 4px;margin-right:22px;font-size:13.3px;font-weight:550;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;cursor:pointer;}
.tab:hover{color:var(--text);}
.tab.active{color:var(--text);border-bottom-color:var(--accent);font-weight:650;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ---------- Forms ---------- */
.field{margin-bottom:15px;}
.field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px;}
.field-help{font-size:11.5px;color:var(--text-tertiary);margin-top:5px;}
input[type="text"],input[type="password"],input[type="email"],input[type="number"],input[type="url"],select,textarea{
  width:100%;padding:8px 10px;border:1px solid var(--border-strong);border-radius:8px;font-size:13px;font-family:inherit;
  color:var(--text);background:#fff;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:2px solid var(--accent-soft);}
textarea{resize:vertical;min-height:80px;}

/* ---------- Switch ---------- */
.switch{position:relative;width:34px;height:19px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;position:absolute;}
.switch-track{position:absolute;inset:0;background:var(--border-strong);border-radius:20px;cursor:pointer;transition:background .15s ease;}
.switch-thumb{position:absolute;top:2px;left:2px;width:15px;height:15px;background:#fff;border-radius:50%;transition:transform .15s ease;box-shadow:var(--shadow-sm);}
.switch input:checked + .switch-track{background:var(--accent);}
.switch input:checked + .switch-track .switch-thumb{transform:translateX(15px);}

/* ---------- Modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(11,18,32,0.45);display:none;align-items:center;justify-content:center;z-index:300;}
.overlay.open{display:flex;}
.modal{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:520px;max-width:92vw;max-height:82vh;display:flex;flex-direction:column;}
.modal-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.modal-title{font-size:15px;font-weight:650;}
.modal-body{padding:18px 20px;overflow-y:auto;}
.modal-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;}
.modal-step-dots{display:flex;gap:5px;}
.modal-step-dots span{width:6px;height:6px;border-radius:50%;background:var(--border-strong);}
.modal-step-dots span.active{background:var(--accent);}

/* ---------- Toasts ---------- */
.toast-stack{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:400;}
.toast{background:var(--text);color:#fff;padding:10px 14px;border-radius:9px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:8px;font-size:13px;min-width:220px;}
.toast.success svg{color:#6FE0A0;}
.toast.error svg{color:#F5A3A0;}

/* ---------- Dropdown menu ---------- */
.dropdown{position:relative;}
.dropdown-menu{
  position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:1px solid var(--border);border-radius:10px;
  box-shadow:var(--shadow-md);min-width:200px;padding:6px;display:none;z-index:80;
}
.dropdown-menu.open{display:block;}
.dropdown-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;font-size:13px;cursor:pointer;color:var(--text);}
.dropdown-item:hover{background:var(--bg-soft);}
.dropdown-sep{height:1px;background:var(--border);margin:5px 0;}

/* ---------- Progress ---------- */
.progress-track{height:6px;border-radius:4px;background:var(--bg-soft-2);overflow:hidden;}
.progress-fill{height:100%;background:var(--accent);border-radius:4px;}

/* ---------- Utility ---------- */
.flex{display:flex;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.gap-8{gap:8px;}
.gap-12{gap:12px;}
.mt-14{margin-top:14px;}
.mb-14{margin-bottom:14px;}
.w-full{width:100%;}
.text-secondary{color:var(--text-secondary);}

@media(max-width:1024px){
  .sidebar{transform:translateX(-100%);transition:transform .2s ease;}
  .sidebar.open{transform:translateX(0);}
  .main{margin-left:0;}
  .sidebar-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:55;}
}
@media(max-width:640px){
  .content{padding:16px;}
  .grid-4,.grid-3,.grid-2,.grid-2-1{grid-template-columns:1fr;}
}

/* ===========================================================
   Auth screens — premium, interactive, corporate-lux
   =========================================================== */
.auth-shell{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;background:#fff;}
@media(max-width:960px){.auth-shell{grid-template-columns:1fr;}.auth-visual{display:none;}}

.auth-form-side{display:flex;flex-direction:column;justify-content:center;padding:48px 64px;}
@media(max-width:560px){.auth-form-side{padding:32px 24px;}}
.auth-logo{display:flex;align-items:center;margin-bottom:44px;line-height:0;}
.auth-logo img{display:block;width:100%;max-width:280px;height:auto;}
.auth-box{max-width:380px;width:100%;margin:0 auto;}
.auth-box h1{font-size:26px;letter-spacing:-0.02em;margin-bottom:8px;}
.auth-box .lead{color:var(--text-secondary);font-size:14px;margin-bottom:30px;}

.sso-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px;}
.sso-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;padding:11px;border:1px solid var(--border-strong);
  border-radius:9px;font-size:13.5px;font-weight:600;background:#fff;cursor:pointer;
}
.sso-btn:hover{background:var(--bg-soft);border-color:var(--text-tertiary);}
.auth-divider{display:flex;align-items:center;gap:12px;color:var(--text-tertiary);font-size:11.5px;margin:22px 0;text-transform:uppercase;letter-spacing:.04em;}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--border);}

.field-float{position:relative;margin-bottom:18px;}
.field-float input{
  width:100%;padding:18px 14px 8px;border:1.5px solid var(--border-strong);border-radius:10px;font-size:14px;
  background:#fff;transition:border-color .15s ease;
}
.field-float input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft);}
.field-float label{
  position:absolute;left:14px;top:15px;font-size:14px;color:var(--text-tertiary);pointer-events:none;
  transition:all .15s ease;background:transparent;
}
.field-float input:focus + label,
.field-float input:not(:placeholder-shown) + label{
  top:6px;font-size:10.5px;font-weight:650;color:var(--accent);
}
.field-float .toggle-visibility{
  position:absolute;right:12px;top:14px;background:none;border:none;color:var(--text-tertiary);cursor:pointer;padding:4px;
}
.auth-row-between{display:flex;justify-content:space-between;align-items:center;font-size:12.8px;margin-bottom:20px;}
.auth-row-between a{color:var(--accent);font-weight:600;}
.checkbox-row{display:flex;align-items:flex-start;gap:9px;font-size:12.8px;color:var(--text-secondary);line-height:1.5;}
.checkbox-row input{margin-top:3px;width:auto;}
.checkbox-row a{color:var(--accent);font-weight:600;}

.auth-submit{width:100%;padding:13px;border-radius:10px;font-size:14.5px;font-weight:650;background:var(--accent);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 10px 24px rgba(17,122,209,.28);}
.auth-submit:hover{background:var(--accent-dark);}
.auth-submit:disabled{opacity:.7;cursor:not-allowed;}
.auth-foot{text-align:center;font-size:13px;color:var(--text-secondary);margin-top:26px;}
.auth-foot a{color:var(--accent);font-weight:650;}

/* Right visual panel — premium animated */
.auth-visual{
  position:relative;overflow:hidden;background:radial-gradient(1200px 800px at 20% 0%, #0C3158 0%, #071B34 55%, #041326 100%);
  display:flex;flex-direction:column;justify-content:space-between;padding:52px 52px 44px;color:#fff;
}
.auth-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:orbFloat 14s ease-in-out infinite;}
.auth-orb.o1{width:340px;height:340px;background:#117AD1;top:-60px;left:-60px;animation-delay:0s;}
.auth-orb.o2{width:260px;height:260px;background:#3B1EE0;bottom:0;right:-40px;animation-delay:-5s;}
.auth-orb.o3{width:200px;height:200px;background:#4C86FF;bottom:20%;left:20%;animation-delay:-9s;}
@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(24px,-18px) scale(1.06);}
  66%{transform:translate(-18px,14px) scale(0.96);}
}
.auth-grid-overlay{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:44px 44px;
}
.auth-visual-top,.auth-visual-bottom{position:relative;z-index:2;}
.auth-badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:650;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:6px 13px;border-radius:20px;color:#DCE4F5;margin-bottom:26px;}
.auth-visual h2{font-size:30px;line-height:1.25;letter-spacing:-0.02em;color:#fff;max-width:420px;}
.auth-visual .sub{color:#AEB9D1;font-size:14.5px;margin-top:14px;max-width:400px;line-height:1.6;}

.mini-preview{
  position:relative;z-index:2;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:16px;margin-top:34px;backdrop-filter:blur(6px);
}
.mini-preview-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08);color:#DCE4F5;}
.mini-preview-row:last-child{border-bottom:none;}

.testi-carousel{position:relative;z-index:2;min-height:90px;}
.testi-slide{display:none;}
.testi-slide.active{display:block;}
.testi-slide p{font-size:14.5px;color:#E7ECF7;line-height:1.6;font-style:italic;}
.testi-slide .who{margin-top:12px;font-size:12.5px;color:#9AA5BD;font-weight:600;}
.testi-dots{display:flex;gap:6px;margin-top:16px;}
.testi-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.25);cursor:pointer;}
.testi-dots span.active{background:#fff;}