:root{
  --ink:#0A0A0A; --ink-72:rgba(10,10,10,.72); --ink-55:rgba(10,10,10,.55); --ink-12:rgba(10,10,10,.12);
  --paper:#FFFFFF; --paper-2:#F7F6F2; --marigold:#FFB000; --marigold-dk:#e69d00;
}
.op-body, .op-loginbody{margin:0; padding:0; background:var(--paper-2); color:var(--ink); font-family:'Manrope',sans-serif; font-size:15px; line-height:1.55}
.op-body *, .op-loginbody *{box-sizing:border-box}
.op-mono{font-family:'IBM Plex Mono',monospace}
.op-logo{display:inline-flex; align-items:center; gap:9px}
.op-word{font-weight:800; letter-spacing:-.04em; color:#fff; line-height:1}
.op-logo svg{display:block; transform:translateY(1px)}

.op-loginbody{background:var(--ink)}
.op-loginwrap{min-height:100vh; display:flex; align-items:center; justify-content:center}
.op-loginbox{background:#141414; border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:40px 38px; width:360px; max-width:92vw}
.op-loginbox .op-logo{margin-bottom:26px}
.op-logintitle{color:#fff; font-weight:800; font-size:17px}
.op-loginerror{margin-top:14px; background:#3a1414; border:1px solid #6b2020; color:#ffb3b3; border-radius:9px; padding:10px 12px; font-size:13px}
.op-loginbox label{display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55); margin:14px 0 6px}
.op-loginbox input{width:100%; padding:11px 12px; border-radius:9px; border:1px solid rgba(255,255,255,.15); background:#0A0A0A; color:#fff; font-family:'Manrope',sans-serif; font-size:14px}
.op-loginbox button{width:100%; margin-top:22px; padding:12px; border:none; border-radius:9px; background:var(--marigold); color:var(--ink); font-weight:800; font-size:14.5px; cursor:pointer}
.op-loginbox button:hover{background:var(--marigold-dk)}
.op-loginsmall{margin-top:16px; font-size:12px; color:rgba(255,255,255,.45)}

.op-topbar{background:var(--ink); color:#fff; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px}
.op-client{font-family:'IBM Plex Mono',monospace; font-size:12px; color:rgba(255,255,255,.65)}
.op-client b{color:#fff; font-weight:600}
.op-client a{color:rgba(255,255,255,.65)}
.op-nav{background:var(--ink); padding:0 24px; display:flex; gap:4px; border-bottom:none}
.op-nav a{color:rgba(255,255,255,.65); text-decoration:none; font-weight:700; font-size:13.5px; padding:12px 16px; border-radius:9px 9px 0 0; border:3px solid transparent; border-bottom:none}
.op-nav a.on{background:var(--paper-2); color:var(--ink); border-color:var(--marigold); border-bottom:none}
.op-nav a:hover{color:#fff}
.op-nav a.on:hover{color:var(--ink)}
.op-wrap{max-width:1020px; margin:0 auto; padding:30px 20px 60px}
.op-pagetitle{font-size:22px; font-weight:800; margin:4px 0 18px}
.op-sub{color:var(--ink-55); font-size:13px; margin-bottom:12px}
.op-updated{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-55)}

.op-note{background:var(--paper); border:1px solid var(--ink-12); border-left:4px solid var(--marigold); border-radius:10px; padding:14px 18px; font-size:14px; color:var(--ink-72); margin:18px 0}
.op-note b{color:var(--ink)}

.op-switch{display:flex; gap:8px; margin:6px 0 16px; flex-wrap:wrap}
.op-switch button{white-space:nowrap}
.op-switch button{padding:8px 14px; border-radius:20px; border:1px solid var(--ink-12); background:var(--paper); font-family:'IBM Plex Mono',monospace; font-size:11.5px; cursor:pointer}
.op-switch button.on{background:var(--ink); color:#fff; border-color:var(--ink)}

/* Window pills and the compare toggle share one row. */
.op-switchrow{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; margin:14px 0 22px}
.op-switchrow .op-switch{margin:0}
.op-cmpwrap{margin-left:auto; display:flex; align-items:center}
.op-cmpbox{position:absolute; opacity:0; width:0; height:0; pointer-events:none}
.op-cmplabel{display:inline-flex; align-items:center; gap:10px; padding:7px 16px 7px 10px; border-radius:22px;
  border:1px solid var(--ink-12); background:var(--paper); color:var(--ink-55);
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; line-height:1; cursor:pointer;
  transition:border-color .15s, color .15s, background .15s; user-select:none; white-space:nowrap}
.op-cmplabel:hover{border-color:var(--ink-40, rgba(10,10,10,.35)); color:var(--ink)}
.op-cmptrack{position:relative; flex:0 0 auto; width:34px; height:19px; border-radius:19px;
  background:rgba(10,10,10,.16); transition:background .18s}
.op-cmptrack::after{content:''; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.28); transition:transform .18s}
.op-cmpbox:checked + .op-cmplabel{background:var(--ink); border-color:var(--ink); color:#fff}
.op-cmpbox:checked + .op-cmplabel .op-cmptrack{background:var(--marigold)}
.op-cmpbox:checked + .op-cmplabel .op-cmptrack::after{transform:translateX(15px)}
.op-cmpbox:focus-visible + .op-cmplabel{outline:2px solid var(--marigold); outline-offset:2px}
/* Previous-period lines live in the pipeline fragment; the plugin decides when they show. */
.op-cmpprev{display:none}
.op-window.op-showcmp .op-cmpprev{display:block}
@media(max-width:620px){.op-cmpwrap{margin-left:0; width:100%}}

.op-card{background:var(--paper); border:1px solid var(--ink-12); border-radius:12px; padding:16px 20px; margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px}
.op-cardtitle{font-weight:800}
.op-btn{display:inline-block; padding:9px 16px; border-radius:9px; background:var(--ink); color:#fff !important; font-weight:700; font-size:13px; text-decoration:none; cursor:pointer; border:none}
.op-btn.gold{background:var(--marigold); color:var(--ink) !important}
.op-btn + .op-btn{margin-left:8px}

.op-log{background:var(--paper); border:1px solid var(--ink-12); border-radius:12px; padding:16px 20px; margin-bottom:12px}
.op-logdate{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--marigold-dk); letter-spacing:.06em; text-transform:uppercase}
.op-logtitle{font-weight:800; margin:3px 0 4px}
.op-log p{font-size:13.5px; color:var(--ink-72); margin:0}

.op-contact{background:var(--ink); color:#fff; border-radius:14px; padding:26px 28px; margin-top:26px}
.op-contact h2{color:#fff; margin:0 0 8px; font-size:17px}
.op-contact p{color:rgba(255,255,255,.75); font-size:14px; max-width:560px; margin:0}
.op-contact .op-mono{color:var(--marigold)}

/* Report/fragment content reuses these class names from the generator */
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.tile{background:var(--paper); border:1px solid var(--ink-12); border-radius:12px; padding:15px 17px}
.tile .lbl{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-55)}
.tile .val{font-size:24px; font-weight:800; margin-top:5px}
.tile .cmp{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-55); margin-top:4px}
.tile.hero{background:var(--ink); border-color:var(--ink)}
.tile.hero .lbl{color:var(--marigold)}
.tile.hero .val{color:#fff}
.tile.hero .cmp{color:rgba(255,255,255,.6)}
.up{color:#1a7f37} .down{color:#b42318}
.tablewrap{border-radius:12px; overflow:auto; margin-bottom:8px}
.op-wrap table{width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--ink-12); border-radius:12px; overflow:hidden}
.op-wrap th{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-55); text-align:right; padding:11px 10px; border-bottom:2px solid var(--ink); background:var(--paper); white-space:nowrap}
.op-wrap th:first-child, .op-wrap td:first-child{text-align:left}
.op-wrap td{padding:10px 10px; text-align:right; border-bottom:1px solid var(--ink-12); font-family:'IBM Plex Mono',monospace; font-size:12.5px; white-space:nowrap}
.op-wrap td:first-child{font-family:'Manrope',sans-serif; font-weight:600; font-size:13px; white-space:normal}
.op-wrap tr:last-child td{border-bottom:none}
.op-wrap tr.total td{background:var(--paper-2); font-weight:600; border-top:2px solid var(--ink)}
.dim{color:var(--ink-55)}
.bar{display:inline-block; height:7px; background:var(--marigold); border-radius:4px; vertical-align:middle}
h2{font-size:16px; font-weight:800; margin:30px 0 6px}
.sub{color:var(--ink-55); font-size:13px; margin-bottom:12px}
.note{background:var(--paper); border:1px solid var(--ink-12); border-left:4px solid var(--marigold); border-radius:10px; padding:14px 18px; font-size:14px; color:var(--ink-72); margin:18px 0}
.note b{color:var(--ink)}
@media (max-width:760px){ .tiles{grid-template-columns:repeat(2,1fr)} }
.op-loginsub{margin-top:8px; font-size:13px; color:rgba(255,255,255,.55); line-height:1.5}
.op-loginnotice{margin-top:14px; background:#14301b; border:1px solid #1f5a2f; color:#a9e5b8; border-radius:9px; padding:10px 12px; font-size:13px}
.op-loginlink{display:inline-block; margin-top:16px; font-size:12.5px; color:rgba(255,255,255,.65); text-decoration:underline}
.op-loginlink:hover{color:#fff}
.op-codeinput{font-family:'IBM Plex Mono',monospace !important; font-size:22px !important; letter-spacing:.35em; text-align:center}
.op-checkrow{display:flex !important; align-items:center; gap:8px; font-family:'Manrope',sans-serif !important; font-size:13px !important; letter-spacing:0 !important; text-transform:none !important; color:rgba(255,255,255,.7) !important; margin-top:16px !important}
.op-checkrow input{width:auto !important}
.op-ghostbtn{background:transparent !important; border:1px solid rgba(255,255,255,.25) !important; color:rgba(255,255,255,.75) !important; margin-top:10px !important; font-weight:600 !important}
.op-ghostbtn:hover{background:rgba(255,255,255,.06) !important}
.op-stamp{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-55); margin:0 0 14px}
.op-lastchange{background:var(--paper); border:1px solid var(--ink-12); border-radius:10px; padding:10px 16px; font-size:13px; color:var(--ink-72); margin:0 0 14px}
.op-lastchange a{color:var(--ink); font-weight:700}
.op-lead{background:var(--paper); border:1px solid var(--ink-12); border-radius:10px; margin-bottom:8px}
.op-lead summary{list-style:none; cursor:pointer; display:grid; grid-template-columns:110px 1fr 1fr 90px; gap:10px; align-items:center; padding:10px 14px; font-size:13px}
.op-lead summary::-webkit-details-marker{display:none}
.op-lead summary .when{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-55)}
.op-lead summary .who{font-weight:700}
.op-lead summary .src{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-72)}
.op-lead[open]{border-color:var(--ink)}
.op-leaddetail{border-top:1px solid var(--ink-12); padding:12px 14px; font-size:13px}
.op-leaddetail dl{display:grid; grid-template-columns:150px 1fr; gap:4px 12px; margin:0}
.op-leaddetail dt{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-55); padding-top:2px}
.op-leaddetail dd{margin:0}
.op-leaddetail a{color:var(--ink); font-weight:700}
.op-qbadge{display:inline-block; font-size:10px; padding:1px 8px; border-radius:12px; font-weight:600; justify-self:end}
.op-q-yes{background:#e8f6ec; border:1px solid #1a7f37; color:#1a7f37}
.op-q-no{background:#fdeaea; border:1px solid #b42318; color:#b42318}
.op-q-pending{background:var(--paper-2); border:1px solid var(--ink-12); color:var(--ink-55)}
@media(max-width:700px){.op-lead summary{grid-template-columns:1fr 90px} .op-lead summary .when,.op-lead summary .src{display:none}}
@media print{
  .op-topbar,.op-nav,.op-switch,.op-loginbody button{display:none !important}
  body.op-body{background:#fff}
  .op-wrap{max-width:none; padding:0}
  table{page-break-inside:auto}
  tr,.tile,.op-lead{page-break-inside:avoid}
  .op-window{display:block !important}
}
.acct-tabs .tabbar{margin:22px 0 28px !important}

/* Header right column (client + sign out, freshness stamp under it) */
.op-headright{display:flex; flex-direction:column; align-items:flex-end; gap:2px}
.op-headstamp{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:rgba(255,255,255,.5)}
/* Mobile burger nav (CSS-only checkbox toggle) */
.op-navtoggle{display:none}
.op-burger{display:none; flex-direction:column; justify-content:center; gap:4px; width:36px; height:32px; padding:7px; cursor:pointer; border:1px solid rgba(255,255,255,.25); border-radius:8px; flex:0 0 auto}
.op-burger span{display:block; height:2px; background:#fff; border-radius:2px}
@media (max-width:700px){
  .op-topbar{flex-wrap:wrap}
  .op-logo{order:1}
  .op-burger{display:flex; order:2; margin-left:auto}
  .op-headright{order:3; flex-basis:100%; align-items:flex-start; margin-top:8px}
  .op-nav{flex-direction:column; padding:0; max-height:0; overflow:hidden; border-bottom:none; transition:max-height .22s ease}
  #op-navtoggle:checked ~ .op-nav{max-height:420px; border-bottom:3px solid var(--marigold)}
  .op-nav a{border-radius:0; padding:13px 24px; border-bottom:1px solid rgba(255,255,255,.08)}
  .op-nav a.on{background:var(--marigold); color:var(--ink)}
  .op-switchrow{gap:8px}
  .op-cmpwrap{margin-left:0; width:100%}
  .op-wrap{padding:22px 14px 50px}
  .op-switch{flex-wrap:wrap}
}
@media (max-width:430px){ .tiles{grid-template-columns:1fr} }

.op-chart{background:#FFFFFF;border:1px solid rgba(10,10,10,.08);border-radius:14px;padding:14px 16px 8px;margin:6px 0 28px}
.op-chart svg{display:block;width:100%;height:auto}
.op-charttitle{font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;color:#0A0A0A;margin:0 0 6px}
.op-target{font-weight:600}
.op-tg-good{color:#1a7a3c}
.op-tg-warn{color:#C04545}
.op-stale{background:#F7E0E0;color:#8A2A2A;font-family:'IBM Plex Mono',monospace;font-size:12px;text-align:center;padding:8px 14px;border-bottom:1px solid rgba(138,42,42,.2)}

.op-info{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin-left:6px;border-radius:50%;border:1px solid currentColor;font-family:'Manrope',sans-serif;font-size:10px;font-weight:700;font-style:normal;line-height:1;text-transform:none;opacity:.55;cursor:help;position:relative;vertical-align:middle;outline:none;user-select:none}
.op-info:hover,.op-info:focus{opacity:1}
.op-tip{position:absolute;top:calc(100% + 10px);left:0;transform:translateY(4px);width:250px;max-width:78vw;background:#0A0A0A;color:#fff;font-family:'Manrope',sans-serif;font-weight:500;font-size:12px;line-height:1.45;letter-spacing:0;text-transform:none;text-align:left;padding:11px 13px;border-radius:11px;box-shadow:0 10px 30px rgba(0,0,0,.3);opacity:0;visibility:hidden;transition:opacity .16s ease,transform .16s ease;z-index:40;pointer-events:none}
.op-tip::before{content:'';position:absolute;bottom:100%;left:12px;border:6px solid transparent;border-bottom-color:#0A0A0A}
.op-info:hover .op-tip,.op-info:focus .op-tip{opacity:1;visibility:visible;transform:translateY(0)}
.op-si{vertical-align:-1px;margin-right:3px}
.op-next{margin-left:10px}
@media(max-width:700px){.op-next{display:block;margin-left:0;margin-top:2px}}
.op-charttip{position:fixed;z-index:9999;background:#0A0A0A;color:#fff;font-family:'Manrope',sans-serif;font-size:12px;line-height:1.45;padding:8px 11px;border-radius:9px;pointer-events:none;transform:translate(14px,-50%);box-shadow:0 8px 24px rgba(0,0,0,.32);white-space:nowrap;display:none}
.op-charttip b{font-weight:600;display:block;margin-bottom:2px}
.op-charttip div{color:rgba(255,255,255,.75)}

/* Sortable data tables (v0.20.0) */
.tablewrap th.op-sortable{cursor:pointer; user-select:none; white-space:nowrap}
.tablewrap th.op-sortable::after{content:"\2195"; opacity:.3; margin-left:6px; font-size:10px}
.tablewrap th.op-asc::after{content:"\2191"; opacity:.85}
.tablewrap th.op-desc::after{content:"\2193"; opacity:.85}


/* v0.21.0: period dropdown (mobile), mega menu, funnel tiles, sticky first column */
.op-winselwrap{display:none; align-items:center; gap:10px}
.op-winsellabel{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-55)}
.op-winsel{appearance:none; -webkit-appearance:none; width:100%; padding:9px 40px 9px 14px; border-radius:9px; border:1px solid var(--ink-12); background:var(--paper) url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22><path d=%22M2 4l4 4 4-4%22 fill=%22none%22 stroke=%22%230A0A0A%22 stroke-width=%221.6%22/></svg>') no-repeat right 14px center; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink); cursor:pointer}
.op-funnel .tiles.op-tiles5{grid-template-columns:repeat(5,1fr)}
@media (max-width:700px){
  .op-switch{display:none !important}
  .op-winselwrap{display:flex; flex-direction:column; align-items:stretch; gap:6px; width:100%; margin:0 0 4px}
  .op-switchrow{margin:10px 0 18px}
  /* menu: bold row + one-line description, current in marigold */
  #op-navtoggle:checked ~ .op-nav{max-height:640px}
  .op-nav a{padding:14px 20px; font-size:16px; line-height:1.2; border-bottom:1px solid rgba(255,255,255,.08)}
  .op-nav a::after{content:attr(data-desc); display:block; font-family:'IBM Plex Mono',monospace; font-weight:400; font-size:11px; letter-spacing:0; color:rgba(255,255,255,.5); margin-top:3px}
  .op-nav a.on{background:rgba(255,255,255,.06); color:var(--marigold); border:none}
  .op-nav a{border:none}
  .op-nav a.on::after{color:rgba(255,255,255,.55)}
  .op-nav a:hover{color:#fff}
  .op-nav a.on:hover{color:var(--marigold)}
  /* tables: full bleed, sideways scroll, first column stays put */
  .op-wrap .tablewrap{margin:0 -14px 8px; border-radius:0; -webkit-overflow-scrolling:touch}
  .op-wrap .tablewrap table{min-width:640px; border-radius:0; border-left:none; border-right:none}
  .op-wrap .tablewrap th:first-child, .op-wrap .tablewrap td:first-child{position:sticky; left:0; background:var(--paper); z-index:1; box-shadow:2px 0 0 var(--ink-12); padding-left:14px; max-width:160px; min-width:110px}
  .op-wrap .tablewrap tr.total td:first-child{background:var(--paper-2)}
  .op-wrap .tablewrap td:first-child{font-size:12px; line-height:1.3}
  .op-wrap th{font-size:9.5px; padding:9px 8px}
  .op-wrap td{font-size:12px; padding:9px 8px}
  .op-funnel .tiles.op-tiles5{grid-template-columns:repeat(2,1fr)}
  .op-funnel .tile.hero{grid-column:1 / -1}
  .tile{padding:12px 13px}
  .tile .val{font-size:22px}
  .op-pagetitle{font-size:20px}
  .op-note,.note{padding:12px 14px; font-size:13px}
}