*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --navy:#0f2240;--navy2:#1b3460;--blue:#2563c8;--blue2:#185fa5;
  --gold:#d4a017;--surface:#f4f3ef;--surface2:#eceae4;--card:#ffffff;
  --border:#e0ddd6;--border2:#c8c4bc;--text:#1a1a1a;--text2:#4a4a4a;
  --muted:#8a8880;--green:#1a7a4a;--green-bg:#e8f5ee;
  --amber:#a05c00;--amber-bg:#fef3e2;--red:#c0392b;--red-bg:#fce8e8;
  --purple:#5a1fa0;--purple-bg:#f0e8f8;
}
html,body{height:100%;font-family:'DM Sans',sans-serif;background:var(--surface);color:var(--text);font-size:14px;line-height:1.5;}
/* LOGIN */
#login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--navy);background-image:radial-gradient(ellipse at 20% 50%,rgba(37,99,200,.15) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(212,160,23,.08) 0%,transparent 50%);}
.login-wrap{width:100%;max-width:420px;padding:2rem;animation:fadeUp .5s ease both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.login-card{background:#fff;border-radius:20px;padding:2.5rem 2.25rem 2rem;box-shadow:0 24px 64px rgba(0,0,0,.18),0 4px 12px rgba(0,0,0,.08);}
.login-logo{display:block;width:240px;margin:0 auto 1rem;}
.login-bar{height:2px;background:linear-gradient(90deg,var(--navy),var(--blue),var(--gold));border-radius:2px;margin-bottom:1.25rem;}
.login-title{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:3px;color:var(--navy);text-align:center;margin-bottom:.25rem;}
.login-sub{font-size:12px;color:var(--muted);text-align:center;margin-bottom:1.5rem;line-height:1.6;}
.google-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:.8rem 1rem;border:1.5px solid var(--border);border-radius:10px;background:#fff;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;color:var(--text);transition:all .15s;}
.google-btn:hover{background:var(--surface);border-color:var(--border2);}
.login-footer{font-size:11px;color:var(--muted);text-align:center;margin-top:1.25rem;}
.login-vet{font-size:10px;color:var(--muted);text-align:center;letter-spacing:2px;text-transform:uppercase;margin-top:.5rem;}
/* APP */
#app{display:none;flex-direction:column;height:100vh;overflow:hidden;}
#app.visible{display:flex;}
/* NAV */
.topnav{height:54px;background:var(--navy);display:flex;align-items:center;padding:0 1.25rem;gap:.75rem;flex-shrink:0;border-bottom:3px solid var(--blue);box-shadow:0 2px 12px rgba(0,0,0,.2);}
.nav-logo{height:30px;width:auto;filter:brightness(0) invert(1);opacity:.95;}
.nav-div{color:rgba(255,255,255,.25);font-size:1.1rem;margin:0 2px;}
.nav-label{font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:2px;color:rgba(255,255,255,.55);}
.nav-space{flex:1;}
.nav-tabs{display:flex;gap:2px;}
.nav-tab{font-size:11px;font-weight:500;color:rgba(255,255,255,.5);padding:.35rem .8rem;border-radius:6px;cursor:pointer;letter-spacing:.5px;text-transform:uppercase;transition:all .12s;white-space:nowrap;}
.nav-tab:hover{color:#fff;background:rgba(255,255,255,.08);}
.nav-tab.active{color:#fff;background:rgba(255,255,255,.15);}
.nav-avatar{width:32px;height:32px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;color:#fff;cursor:pointer;margin-left:.5rem;flex-shrink:0;border:2px solid rgba(255,255,255,.15);}
/* SHELL */
.shell{display:flex;flex:1;overflow:hidden;}
/* SIDEBAR */
.sidebar{width:210px;flex-shrink:0;background:var(--card);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;padding:1rem 0;}
.sb-section{font-size:10px;font-weight:500;color:var(--muted);letter-spacing:2px;text-transform:uppercase;padding:.25rem 1rem .5rem;}
.sb-item{display:flex;align-items:center;gap:8px;padding:.5rem 1rem;font-size:13px;color:var(--text2);cursor:pointer;border-left:2px solid transparent;transition:all .12s;}
.sb-item:hover{background:var(--surface);color:var(--text);}
.sb-item.active{background:#eef3fd;color:var(--blue);border-left-color:var(--blue);font-weight:500;}
.sb-icon{font-size:14px;width:16px;text-align:center;flex-shrink:0;}
.sb-badge{margin-left:auto;background:var(--blue);color:#fff;font-size:10px;font-weight:500;border-radius:10px;padding:1px 6px;min-width:18px;text-align:center;}
.sb-badge.warn{background:var(--amber-bg);color:var(--amber);}
.sb-space{flex:1;}
.sb-user{padding:.75rem 1rem;border-top:1px solid var(--border);font-size:12px;color:var(--muted);}
.sb-user strong{display:block;color:var(--text);font-size:13px;margin-bottom:1px;}
/* CONTENT */
.content{flex:1;overflow-y:auto;padding:1.25rem;display:flex;flex-direction:column;gap:1rem;}
.page{display:none;}
.page.active{display:contents;}
/* SLA */
.sla-banner{background:var(--amber-bg);border:1px solid #f0d060;border-radius:8px;padding:.6rem 1rem;display:flex;align-items:center;gap:.6rem;font-size:12px;color:#7a5000;}
.sla-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex-shrink:0;}
.sla-action{margin-left:auto;font-weight:500;color:var(--amber);cursor:pointer;}
/* HEADER */
.page-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:.25rem;}
.page-title{font-family:'Bebas Neue',sans-serif;font-size:1.7rem;color:var(--navy);letter-spacing:1px;line-height:1;}
.page-meta{font-size:12px;color:var(--muted);margin-top:2px;}
.header-actions{display:flex;gap:.5rem;}
/* BTNS */
.btn{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;padding:.4rem .9rem;border-radius:7px;cursor:pointer;border:none;transition:all .12s;}
.btn-primary{background:var(--navy);color:#fff;}.btn-primary:hover{background:var(--navy2);}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text2);}.btn-ghost:hover{background:var(--surface);}
/* STATS */
.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:.9rem 1rem;border-top:3px solid var(--blue);transition:box-shadow .15s;}
.stat-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.06);}
.stat-card.gold{border-top-color:var(--gold);}
.stat-card.green{border-top-color:var(--green);}
.stat-card.navy{border-top-color:var(--navy);}
.stat-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:.3rem;}
.stat-val{font-family:'Bebas Neue',sans-serif;font-size:2.2rem;color:var(--navy);line-height:1;}
.stat-sub{font-size:11px;color:var(--muted);margin-top:.2rem;}
/* TWO COL */
.two-col{display:grid;grid-template-columns:1fr 340px;gap:.75rem;align-items:start;}
.right-col{display:flex;flex-direction:column;gap:.75rem;}
/* CARDS */
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:box-shadow .15s;}
.card:hover{box-shadow:0 4px 16px rgba(0,0,0,.06);}
.card-head{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid var(--border);}
.card-title{font-size:13px;font-weight:500;color:var(--text);}
.card-count{font-size:11px;color:var(--muted);margin-left:auto;}
.card-body{padding:.75rem 1rem;}
/* QUEUE */
.q-item{display:flex;flex-direction:column;gap:6px;padding:.9rem 0;border-bottom:1px solid var(--border);transition:all .3s;}
.q-item:last-child{border-bottom:none;}
.q-item.out{opacity:0;transform:translateX(8px);}
.q-top{display:flex;align-items:flex-start;gap:.5rem;}
.q-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px;}
.q-title{font-size:13px;font-weight:500;color:var(--text);flex:1;line-height:1.4;}
.q-age{font-size:11px;color:var(--muted);margin-left:auto;white-space:nowrap;padding-top:2px;}
.q-meta{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;}
.tag{font-size:10px;font-weight:500;padding:2px 7px;border-radius:4px;letter-spacing:.3px;}
.tag-blog{background:#e8eef8;color:#185fa5;}
.tag-email{background:#f0e8f8;color:#5a1fa0;}
.tag-social{background:#e8f5ee;color:#1a7a4a;}
.tag-flag{background:#fff3cd;color:#8a5c00;}
.tag-pre{background:#f4f3ef;color:#8a8880;}
.tag-in{background:#fef3e2;color:#a05c00;}
.tag-post{background:#e8f5ee;color:#1a7a4a;}
.q-flag{display:flex;align-items:center;gap:5px;background:#fffbeb;border:1px solid #f0d060;border-radius:5px;padding:4px 9px;font-size:11px;color:#8a5c00;}
.q-actions{display:flex;gap:.4rem;flex-wrap:wrap;}
.qa{font-size:11px;font-weight:500;padding:3px 10px;border-radius:5px;cursor:pointer;border:none;font-family:'DM Sans',sans-serif;transition:all .12s;}
.qa-approve{background:#e8f5ee;color:#1a7a4a;}.qa-approve:hover{background:#c8eedd;}
.qa-revise{background:#fef3e2;color:#a05c00;}.qa-revise:hover{background:#fde8c0;}
.qa-reject{background:#fce8e8;color:#c0392b;}.qa-reject:hover{background:#f9d0d0;}
/* PIPELINE */
.pipe-row{display:flex;gap:.3rem;align-items:center;}
.pipe-stage{flex:1;text-align:center;}
.pipe-lbl{font-size:9px;color:#8a8880;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px;}
.pipe-num{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;line-height:1;}
.pipe-arrow{color:#e0ddd6;font-size:16px;flex-shrink:0;padding-top:12px;}
/* AGENTS */
.agent-item{display:flex;align-items:center;gap:.6rem;padding:.55rem 0;border-bottom:1px solid var(--border);}
.agent-item:last-child{border-bottom:none;}
.ast{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.ast.running{background:#1a7a4a;box-shadow:0 0 0 3px #e8f5ee;}
.ast.pending{background:#d4a017;}
.ast.idle{background:#d0d0d0;}
.a-name{font-size:12px;font-weight:500;color:var(--text);flex:1;}
.a-task{font-size:11px;color:var(--muted);}
.a-time{font-size:10px;color:var(--muted);margin-left:auto;white-space:nowrap;}
/* KEYWORDS */
.kw-item{display:flex;align-items:center;gap:.5rem;padding:.5rem 0;border-bottom:1px solid var(--border);}
.kw-item:last-child{border-bottom:none;}
.kw-word{font-size:12px;font-weight:500;color:var(--text);flex:1;}
.kw-vol{font-size:11px;color:var(--muted);width:48px;text-align:right;}
.kw-diff{font-size:10px;font-weight:500;padding:2px 7px;border-radius:4px;}
.kwd-easy{background:#e8f5ee;color:#1a7a4a;}
.kwd-med{background:#fef3e2;color:#a05c00;}
.kwd-hard{background:#fce8e8;color:#c0392b;}
/* CALENDAR */
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;}
.cal-day-lbl{font-size:10px;color:var(--muted);text-align:center;padding:4px 0;text-transform:uppercase;letter-spacing:.5px;}
.cal-cell{min-height:52px;border-radius:6px;border:1px solid var(--border);background:var(--surface);padding:3px 4px;font-size:10px;transition:border-color .12s;}
.cal-cell.today{border-color:var(--blue);background:#f0f4ff;}
.cal-cell.has{background:var(--card);cursor:pointer;}
.cal-cell.has:hover{border-color:var(--navy);}
.cal-num{font-size:10px;color:var(--muted);margin-bottom:2px;}
.cal-num.tn{color:var(--blue);font-weight:500;}
.cal-dot{height:14px;border-radius:3px;margin-bottom:1px;padding:0 3px;font-size:9px;font-weight:500;display:flex;align-items:center;white-space:nowrap;overflow:hidden;}
.cd-blog{background:#e8eef8;color:#185fa5;}
.cd-email{background:#f0e8f8;color:#5a1fa0;}
.cd-social{background:#e8f5ee;color:#1a7a4a;}
/* COMING SOON */
.coming-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:1rem;color:var(--muted);}
.coming-soon .big{font-family:'Bebas Neue',sans-serif;font-size:3rem;color:var(--border2);letter-spacing:2px;}
/* SCROLLBAR */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}