/* v2 layer on top of base.css: Old School Agency CI colours and fonts, the module sidebar, the executive dashboard and the AI team screens. */
:root{
  --accent:#FC2804; --accent-2:#FC9707; --brand-red:#FD172E; --brand-deep:#FC4803; --brand-grey:#54595F;
  --display:"Poppins","Noto Sans Thai","Leelawadee UI",Tahoma,sans-serif;
  --body:"Poppins","Noto Sans Thai","Leelawadee UI",Tahoma,sans-serif;
  --con:#FD172E; --edit:#FC9707; --ads:#FFFFFF; --ads-ink:#1F2124;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --accent:#FF4A26; --accent-2:#FC9707 } }
:root[data-theme="dark"]{ --accent:#FF4A26; --accent-2:#FC9707 }

.brand{display:flex;align-items:center;gap:10px}
.brand img{width:44px;height:auto}
.login .lbrand img{display:block;width:120px;height:auto;margin-bottom:6px}
.hero .hlogo{width:40px;height:auto;background:#fff;border-radius:8px;padding:3px}
.nav .badge{background:var(--accent);color:#fff;border-radius:9px;font-size:11px;padding:0 7px;font-weight:600}
.nav .soon{font-size:10px;color:var(--side-muted)}

/* login (same layout as ads-op): brand panel with drifting bubbles + form card */
.auth{min-height:100%;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:var(--bg)}
.auth-art{position:relative;overflow:hidden;background:linear-gradient(135deg,#FC2804,#FC4803 45%,#FC9707);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:40px;color:#fff}
.auth-art>img{width:min(320px,70%);background:#fff;border-radius:28px;padding:22px;box-shadow:0 20px 50px rgba(0,0,0,.25);position:relative}
.auth-tag{text-align:center;position:relative}.auth-tag b{display:block;font-family:var(--display);font-size:28px;letter-spacing:.02em}.auth-tag span{opacity:.92}
.bubbles span{position:absolute;bottom:-60px;border-radius:50%;background:rgba(255,255,255,.22);animation:rise linear infinite}
@keyframes rise{to{transform:translateY(-120vh) translateX(30px);opacity:0}}
.auth-form{display:grid;place-items:center;padding:24px 16px}
.auth-card{width:min(400px,100%);background:var(--surface);border-radius:18px;box-shadow:var(--shadow);padding:28px}
.auth-card form,.forgot,.forgot form{display:flex;flex-direction:column;gap:14px}
.auth-card h1{font-size:22px;font-weight:600}
.auth-card .lbrand img{width:84px;margin:0 0 6px}
.pwbox{display:flex;align-items:center;gap:6px}.pwbox input{flex:1}
.eye{all:unset;cursor:pointer;font-size:12px;color:var(--muted);padding:2px 6px;border-radius:6px}.eye:hover{color:var(--accent)}
.fstep{font-weight:600;color:var(--accent)}
.captcha{border-radius:8px;border:1px solid var(--line);height:50px}
.otp{text-align:center;font-family:monospace;font-size:22px;letter-spacing:.5em}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
@media (max-width:860px){.auth{grid-template-columns:minmax(0,1fr)}.auth-art{padding:28px 16px}.auth-art>img{width:160px;border-radius:20px;padding:12px}.auth-tag b{font-size:20px}}
@media (prefers-reduced-motion:reduce){.bubbles span{animation:none;display:none}}

/* executive dashboard */
.kpi.click{cursor:pointer} .kpi.click:hover{outline:1px solid var(--accent)}
.kpi small{display:block;color:var(--muted);font-size:12px}
.brief{border:1px solid var(--line);border-left:4px solid var(--accent-2);border-radius:8px;padding:14px 16px;background:var(--surface);display:flex;flex-direction:column;gap:8px}
.brief pre{margin:0;white-space:pre-wrap;font:inherit;line-height:1.7}
.brief .row b{flex:1}

/* AI team */
.agents{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.agent{padding:14px 16px;display:flex;flex-direction:column;gap:8px;border-top:4px solid color-mix(in srgb,var(--c) 82%,var(--muted))}
.agent .who{display:flex;align-items:center;gap:10px}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--c);color:var(--ink,#fff);display:grid;place-items:center;font-weight:700;font-family:var(--display);flex:none;box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--c)}
.agent .now{color:var(--muted);font-size:13px;min-height:20px}
.dot-state{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;background:var(--muted)}
.dot-state.working{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)} .dot-state.deliver,.dot-state.report{background:var(--accent-2)}
.dot-state.rest,.dot-state.offline{background:var(--bad)}
.out-table td{vertical-align:top} .out-table textarea{min-height:90px}
.cap{white-space:pre-wrap}
.flag{color:var(--warn);background:var(--warn-soft);border-radius:6px;padding:6px 10px;font-size:13px}
.thread{display:flex;flex-direction:column;gap:8px}
.thread div{background:var(--sunk);border-radius:8px;padding:8px 12px;font-size:13px}
.thread small{color:var(--muted);display:block}
.emoji-list{font-size:20px;letter-spacing:4px}
.copy{all:unset;cursor:pointer;color:var(--accent);font-size:12px;font-weight:600}

/* office */
.office-wrap{position:relative;border-radius:14px;overflow:hidden;background:#0B0C0D;box-shadow:var(--shadow)}
.office-wrap canvas{display:block;width:100%;height:auto;cursor:pointer}
.office-legend{position:absolute;left:14px;bottom:12px;display:flex;gap:8px;flex-wrap:wrap}
.office-legend button{all:unset;cursor:pointer;background:rgba(20,21,22,.82);color:#F2F0EE;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:5px 12px;font-size:12.5px;display:flex;align-items:center;gap:6px;backdrop-filter:blur(4px)}
.office-legend i{width:9px;height:9px;border-radius:50%;display:inline-block}
.office-hud{position:absolute;right:14px;top:12px;background:rgba(20,21,22,.82);color:#F2F0EE;border:1px solid rgba(252,40,4,.5);border-radius:10px;padding:8px 12px;font-size:12.5px;backdrop-filter:blur(4px)}
.office-hud b{color:#FC9707;font-size:16px}

/* printable output (PDF via the browser's print dialog) */
.print-only{display:none}
@media print{
  .print-only{display:block}
  .out-actions,.thread,.flag{display:none!important}
  .print-head{display:flex;align-items:center;gap:14px;border-bottom:3px solid #FC2804;padding-bottom:10px;margin-bottom:14px}
  .print-head img{width:70px}
  textarea{border:0!important;resize:none}
}
@media (max-width:860px){ .office-legend{position:static;padding:10px;background:#0B0C0D} }