/* The Operations Control console's own stylesheet, copied verbatim from atlasos-app web/console.html @ 07a19cd.
   The playbook's proposed screens are built from it so they read as the app ClearSite already has. Don't edit; recopy. */
  :root{
    --paper:#f4f2ec; --surface:#ffffff; --surface2:#eceae2; --ink:#1a2230; --ink2:#55606f; --ink3:#8a93a0;
    --blueprint:#1f3a5f; --rule:#c7cdd6; --rule2:#aab2bd;
    --cyan:#0a7d8c; --cyanbg:#dceef0; --amber:#b06a00; --amberbg:#f7ead2; --hivis:#e8a200;
    --red:#c2362f; --redbg:#f7ddda; --green:#3c7d4e; --greenbg:#dcecdf; --purple:#5b53a8; --blue:#2c6bb0;
    --mono:'Spline Sans Mono',monospace; --sans:'Archivo',system-ui,sans-serif;
  }
  [data-theme="dark"]{
    --paper:#0e131a; --surface:#161d27; --surface2:#1d2630; --ink:#e6edf3; --ink2:#9fadbd; --ink3:#6b7787;
    --blueprint:#7fa8d4; --rule:#2a3542; --rule2:#3a4756;
    --cyan:#3fc8d6; --cyanbg:#103138; --amber:#e0a83d; --amberbg:#2e2410; --hivis:#e8a200;
    --red:#e5645f; --redbg:#2e1614; --green:#5cb878; --greenbg:#15291b; --purple:#9089e0; --blue:#5b9bd5;
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased;}
  .app{display:grid;grid-template-columns:218px 1fr 300px;grid-template-rows:48px 1fr;height:100vh;min-height:600px;}
  .topbar{grid-column:1/4;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:2px solid var(--ink);background:var(--surface);}
  .brand{display:flex;align-items:center;gap:11px;}
  .brand .logo{width:26px;height:26px;background:var(--ink);border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--hivis);font-size:15px;}
  .brand b{font-weight:700;letter-spacing:.06em;font-size:15px;text-transform:uppercase;}
  .brand .tag{color:var(--ink3);font-size:10px;font-family:var(--mono);border-left:1px solid var(--rule);padding-left:11px;}
  .topstats{display:flex;gap:24px;}
  .topstat{display:flex;flex-direction:column;line-height:1.1;}
  .topstat .k{font-size:9px;color:var(--ink3);text-transform:uppercase;letter-spacing:.08em;}
  .topstat .v{font-size:14px;font-weight:600;font-family:var(--mono);}
  .live{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--cyan);font-family:var(--mono);font-weight:500;}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);animation:pulse 2s infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.25;}}

  .rule-strip{height:6px;background-image:repeating-linear-gradient(90deg,var(--rule2) 0,var(--rule2) 1px,transparent 1px,transparent 12px);}
  .rail{border-right:1px solid var(--rule);background:var(--surface);padding:14px 9px;overflow-y:auto;}
  .railhead{font-size:9px;color:var(--ink3);text-transform:uppercase;letter-spacing:.1em;padding:0 9px;margin:16px 0 7px;font-weight:600;}
  .railhead:first-child{margin-top:0;}
  .nav{display:flex;flex-direction:column;gap:2px;}
  .navitem{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:6px;color:var(--ink2);cursor:pointer;font-size:12.5px;font-weight:500;border-left:3px solid transparent;}
  .navitem:hover{background:var(--surface2);color:var(--ink);}
  .navitem.active{background:var(--surface2);color:var(--ink);border-left-color:var(--hivis);}
  .navitem i{font-size:16px;width:16px;}
  .agent{padding:9px 11px;border-radius:6px;border:1px solid var(--rule);margin-bottom:6px;cursor:pointer;}
  .agent:hover{border-color:var(--ink2);background:var(--surface2);}
  .agent.active{border-color:var(--ink);border-left:3px solid var(--hivis);}
  .agent .row{display:flex;align-items:center;justify-content:space-between;}
  .agent .nm{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;}
  .agent .nm i{font-size:15px;}
  .agent .sub{font-size:9.5px;color:var(--ink3);font-family:var(--mono);margin-top:4px;margin-left:23px;}
  .pill{font-size:8.5px;font-family:var(--mono);padding:2px 6px;border-radius:3px;text-transform:uppercase;letter-spacing:.05em;font-weight:500;}
  .pill.idle{background:var(--greenbg);color:var(--green);}
  .pill.work{background:var(--amberbg);color:var(--amber);}
  .pill.resp{background:var(--redbg);color:var(--red);}

  .main{overflow-y:auto;padding:18px;background:var(--paper);}
  .feed{border-left:1px solid var(--rule);background:var(--surface);padding:13px;overflow-y:auto;}
  .feedhead{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:var(--ink3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:11px;font-weight:600;}
  .event{padding:9px 11px;border-radius:6px;border:1px solid var(--rule);border-left:3px solid var(--ink3);margin-bottom:7px;cursor:pointer;background:var(--surface);}
  .event:hover{border-color:var(--ink2);}
  .event.red{border-left-color:var(--red);background:var(--redbg);}
  .event.amber{border-left-color:var(--hivis);}
  .event.blue{border-left-color:var(--blue);}
  .event.green{border-left-color:var(--green);}
  .event .er{display:flex;justify-content:space-between;align-items:center;}
  .event .et{font-size:9px;font-weight:600;font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--ink2);}
  .event .tm{font-size:9px;color:var(--ink3);font-family:var(--mono);}
  .event .eb{font-size:11px;color:var(--ink);margin-top:3px;}
  .event .em{font-size:9px;color:var(--ink3);font-family:var(--mono);margin-top:3px;}
  .event.red .et{color:var(--red);}

  h2.view{font-size:17px;font-weight:700;margin:0 0 2px;letter-spacing:-.01em;}
  .viewsub{font-size:11px;color:var(--ink3);font-family:var(--mono);margin-bottom:16px;display:flex;align-items:center;gap:8px;}
  .kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-bottom:18px;}
  .kpi{background:var(--surface);border:1px solid var(--rule);border-radius:7px;padding:11px 13px;border-top:3px solid var(--rule2);}
  .kpi .k{font-size:9px;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;font-weight:600;}
  .kpi .v{font-size:21px;font-weight:600;margin-top:3px;font-family:var(--mono);}
  .kpi .d{font-size:10px;color:var(--ink2);margin-top:1px;}
  .kpi.alert{border-top-color:var(--red);} .kpi.alert .v{color:var(--red);} .kpi.alert .d{color:var(--red);}
  .kpi.warn{border-top-color:var(--hivis);} .kpi.warn .d{color:var(--amber);}

  .card{background:var(--surface);border:1px solid var(--rule);border-radius:7px;padding:15px;margin-bottom:13px;}
  .card h3{font-size:9.5px;color:var(--ink3);text-transform:uppercase;letter-spacing:.09em;margin:0 0 12px;font-weight:600;display:flex;align-items:center;gap:7px;}
  .card h3::after{content:'';flex:1;height:1px;background:var(--rule);}
  .twocol{display:grid;grid-template-columns:1.3fr 1fr;gap:13px;}

  .step{display:flex;gap:11px;}
  .step .marker{display:flex;flex-direction:column;align-items:center;}
  .step .mk{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-family:var(--mono);font-weight:500;flex-shrink:0;}
  .step .mk.done{background:var(--green);color:#fff;}
  .step .mk.wait{background:var(--hivis);color:#fff;}
  .step .mk.todo{border:1.5px solid var(--rule2);color:var(--ink3);}
  .step .ln{width:2px;flex:1;background:var(--rule);min-height:13px;}
  .step .ln.done{background:var(--green);}
  .step .body{padding-bottom:13px;}
  .step .ti{font-size:12.5px;font-weight:600;}
  .step .ti.muted{color:var(--ink2);font-weight:400;}
  .step .tag{font-size:8.5px;font-family:var(--mono);padding:1px 5px;border-radius:3px;margin-left:7px;font-weight:500;}
  .tag.sys{background:var(--cyanbg);color:var(--cyan);} .tag.human{background:var(--amberbg);color:var(--amber);}
  .step .meta{font-size:10.5px;color:var(--ink3);margin-top:2px;}
  .step .meta.warn{color:var(--amber);font-weight:500;}

  .probe{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border:1px solid var(--rule);border-radius:5px;margin-bottom:6px;font-size:11px;}
  .v-pass{font-size:8.5px;font-family:var(--mono);padding:2px 7px;border-radius:3px;background:var(--greenbg);color:var(--green);font-weight:500;}
  .v-pend{font-size:8.5px;font-family:var(--mono);padding:2px 7px;border-radius:3px;background:var(--surface2);color:var(--ink3);font-weight:500;}
  .v-conv{font-size:8.5px;font-family:var(--mono);padding:2px 7px;border-radius:3px;background:var(--cyanbg);color:var(--cyan);font-weight:500;}
  .v-fault{font-size:8.5px;font-family:var(--mono);padding:2px 7px;border-radius:3px;background:var(--redbg);color:var(--red);font-weight:500;}
  .dep{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink2);margin-bottom:5px;}
  .dep i.ok{color:var(--green);} .dep i.wait{color:var(--amber);}
  .note{padding:10px 12px;border:1px solid var(--rule);border-radius:6px;background:var(--surface2);font-size:11px;color:var(--ink2);line-height:1.6;}
  .note b{color:var(--ink);}

  .sensors{display:flex;flex-wrap:wrap;gap:6px;}
  .sensor{font-size:9px;font-family:var(--mono);padding:3px 8px;border:1px solid var(--rule);border-radius:4px;color:var(--ink2);display:flex;align-items:center;gap:4px;font-weight:500;}
  .sensor i{font-size:11px;color:var(--green);}
  .qrow{padding:10px 12px;border:1px solid var(--rule);border-radius:6px;margin-bottom:7px;}
  .qrow .qh{display:flex;justify-content:space-between;align-items:center;}
  .qrow .qt{font-size:11px;font-weight:600;}
  .qrow .qa{font-size:10.5px;color:var(--ink2);margin-top:3px;}
  .qrow.flag{border-color:var(--hivis);border-left:3px solid var(--hivis);background:var(--amberbg);}
  .qrow.flag .qt,.qrow.flag .qa{color:var(--amber);}
  .qrow.cleared{border-color:var(--green);border-left:3px solid var(--green);}
  .plog{font-size:10.5px;font-family:var(--mono);color:var(--ink2);display:flex;gap:9px;padding:2px 0;}
  .plog .t{color:var(--ink3);}
  .plog.warn{color:var(--amber);}
  .cot{font-size:11.5px;color:var(--ink2);padding:7px 0 7px 17px;border-left:2px solid var(--rule);margin-left:5px;position:relative;line-height:1.55;}
  .cot::before{content:'';position:absolute;left:-5px;top:12px;width:8px;height:8px;border-radius:50%;background:var(--cyan);}
  .cot b{color:var(--ink);font-weight:600;}
  .btn{width:100%;padding:9px;background:var(--ink);border:1px solid var(--ink);border-radius:6px;color:#fff;font-family:var(--sans);font-size:12px;font-weight:600;cursor:pointer;margin-top:9px;letter-spacing:.02em;}
  .btn:hover{background:#2a3547;}
  .btn:disabled{background:var(--surface2);color:var(--ink3);border-color:var(--rule);cursor:default;}
  .btn.ghost{background:transparent;color:var(--ink);} .btn.ghost:hover{background:var(--surface2);}
  .signal{display:flex;gap:8px;flex-wrap:wrap;}
  .sig{font-size:9.5px;font-family:var(--mono);padding:3px 9px;border:1px solid var(--rule);border-radius:4px;color:var(--ink2);}

  .harnessgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
  .hcomp{border:1px solid var(--rule);border-radius:6px;padding:11px 13px;background:var(--surface);}
  .hcomp .hh{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;margin-bottom:8px;}
  .hcomp .hh i{font-size:15px;color:var(--cyan);}
  .hcomp .hh .cnt{margin-left:auto;font-size:9px;font-family:var(--mono);color:var(--ink3);}
  .hitem{font-size:10.5px;font-family:var(--mono);color:var(--ink2);padding:3px 0;display:flex;align-items:center;gap:6px;}
  .hitem i{font-size:12px;color:var(--ink3);}
  .ff{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px;}
  .ffchip{font-size:9px;font-family:var(--mono);padding:2px 7px;border-radius:3px;background:var(--surface2);color:var(--ink2);border:1px solid var(--rule);}
  ::-webkit-scrollbar{width:9px;height:9px;}::-webkit-scrollbar-thumb{background:var(--rule2);border-radius:4px;}::-webkit-scrollbar-track{background:transparent;}
  #csLaunch{position:fixed;right:22px;bottom:22px;width:52px;height:52px;border-radius:50%;background:var(--ink);
    color:var(--hivis);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;
    font-size:21px;cursor:pointer;z-index:9000;box-shadow:0 6px 22px rgba(0,0,0,.28);}
  #csChat{position:fixed;right:22px;bottom:22px;width:388px;max-width:calc(100vw - 28px);height:560px;max-height:calc(100vh - 40px);
    background:var(--surface);border:1px solid var(--rule2);border-radius:12px;z-index:9001;display:none;
    flex-direction:column;overflow:hidden;box-shadow:0 14px 44px rgba(0,0,0,.34);}
  #csChat.open{display:flex;}
  #csChat .csHead{display:flex;align-items:center;gap:9px;padding:11px 13px;border-bottom:2px solid var(--ink);background:var(--surface);}
  #csChat .csDot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--greenbg);}
  #csChat .csTitle{font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;}
  #csChat .csSub{font-size:9px;color:var(--ink3);font-family:var(--mono);}
  #csChat .csMode{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:9px;font-family:var(--mono);color:var(--ink3);cursor:pointer;user-select:none;}
  #csChat .csModeSw{width:30px;height:16px;border-radius:9px;background:var(--surface2);border:1px solid var(--rule);position:relative;transition:.15s;}
  #csChat .csModeSw::after{content:"";position:absolute;top:1px;left:1px;width:12px;height:12px;border-radius:50%;background:var(--ink3);transition:.15s;}
  #csChat.live .csModeSw{background:var(--cyanbg);border-color:var(--cyan);}
  #csChat.live .csModeSw::after{left:15px;background:var(--cyan);}
  #csChat .csX{cursor:pointer;color:var(--ink3);font-size:16px;width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  #csChat .csX:hover{background:var(--surface2);color:var(--ink);}
  #csChat .csBody{flex:1;overflow-y:auto;padding:13px;display:flex;flex-direction:column;gap:11px;}
  #csChat .csMsg{max-width:86%;font-size:12px;line-height:1.5;padding:9px 11px;border-radius:10px;}
  #csChat .csU{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:3px;}
  #csChat .csA{align-self:flex-start;background:var(--surface2);color:var(--ink);border-left:2px solid var(--blueprint);border-bottom-left-radius:3px;}
  #csChat .csA strong{font-weight:600;}
  #csChat .csGround{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px;}
  #csChat .csChip{font-size:8.5px;font-family:var(--mono);padding:2px 6px;border-radius:3px;background:var(--cyanbg);color:var(--cyan);border:1px solid var(--rule);}
  #csChat .csMeta{font-size:8.5px;font-family:var(--mono);color:var(--ink3);margin-top:6px;}
  #csChat .csThink{align-self:flex-start;font-size:10px;font-family:var(--mono);color:var(--ink3);display:flex;align-items:center;gap:7px;}
  #csChat .csThink .csBlink{width:6px;height:6px;border-radius:50%;background:var(--cyan);animation:csPulse 1s infinite;}
  @keyframes csPulse{0%,100%{opacity:.25;}50%{opacity:1;}}
  #csChat .csFoot{border-top:1px solid var(--rule);padding:10px;display:flex;gap:8px;align-items:flex-end;}
  #csChat .csIn{flex:1;resize:none;border:1px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--ink);
    font-family:var(--sans);font-size:12px;padding:8px 10px;max-height:90px;min-height:38px;line-height:1.4;}
  #csChat .csIn:focus{outline:none;border-color:var(--blueprint);}
  #csChat .csSend{width:38px;height:38px;border-radius:8px;background:var(--ink);color:#fff;border:none;cursor:pointer;font-size:15px;flex-shrink:0;}
  #csChat .csSend:disabled{opacity:.4;cursor:default;}