/* BCN Department Portal: look carried over from the approved mockups */
:root{--navy:#1c313b;--navy2:#2c4a5a;--ink:#1f3a5f;--mut:#3f556b;--line:#e3e8ee;--card:#dde4ec;--bg:#f4f6f9;--blue:#1d5bbf;--tag:#e2eaf4;--tagink:#1c3f6e;--red:#c62832;--err:#a3261f}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:'Archivo',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
.line,.duebar,.num{font-variant-numeric:tabular-nums}
a{color:var(--blue)}a:hover{color:#123f88}
h1{margin:0;font-size:30px;font-weight:700;color:var(--navy);letter-spacing:-.01em}
h2{margin:0;font-size:20px;font-weight:700;color:var(--navy)}
h3{margin:0;font-size:16px;font-weight:700;color:var(--navy)}
p{line-height:1.5}
.mut{color:var(--mut)}.small{font-size:13px}
.kick{margin:0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
button,input,select,textarea{font-family:inherit}
input,select,textarea{font-size:15px;color:var(--navy);border:1px solid #9fb0c1;border-radius:6px;padding:10px 12px;background:#fff;width:100%;min-height:44px}
input[type=checkbox]{width:20px;height:20px;min-height:0;padding:0;margin:2px 0 0;flex-shrink:0}
input[type=file]{padding:8px}
input:focus,select:focus,textarea:focus{outline:2px solid #2f6fd6;outline-offset:1px;border-color:#2f6fd6}
label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:6px}
.check{display:flex;gap:10px;align-items:flex-start}.check label{margin:0;font-size:15px;font-weight:500;line-height:1.45}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:var(--navy);color:#fff;border:0;border-radius:6px;padding:12px 20px;font-size:15px;font-weight:600;min-height:44px;cursor:pointer}
.btn:hover{background:var(--navy2);color:#fff}
.btn2{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:#fff;color:var(--navy);border:1px solid var(--navy);border-radius:6px;padding:11px 18px;font-size:15px;font-weight:600;min-height:44px;cursor:pointer}
.btn2:hover{background:#eef3f7;color:var(--navy)}
.sm{padding:8px 14px;font-size:14px;min-height:40px;white-space:nowrap}
.link{background:none;border:0;color:var(--blue);font-size:14px;font-weight:600;cursor:pointer;padding:0;text-decoration:underline}
.badge{background:var(--red);color:#fff;font-size:12px;font-weight:700;border-radius:10px;padding:2px 8px}
.card{background:#fff;border:1px solid var(--card);border-radius:12px;padding:24px;box-shadow:0 1px 2px rgba(28,49,59,.05)}
.card.flush{padding:0;overflow:hidden}
.card.strong{border:2px solid var(--navy)}
.tag{display:inline-block;font-size:12px;font-weight:700;padding:3px 8px;border-radius:4px;background:var(--tag);color:var(--tagink);white-space:nowrap}
.tag.dark{background:var(--tagink);color:#fff}.tag.warn{background:#fff6e0;color:#7a4b00;border:1px solid #e3b25a;padding:2px 7px}.tag.outline{background:#fff;border:1px solid var(--tagink);padding:2px 7px}
.ok,.errbox{overflow-wrap:anywhere}
.ok{background:#e8f0fa;border:1px solid #b6cbe6;border-radius:8px;padding:12px 16px;font-size:15px;line-height:1.5;color:var(--tagink);margin:0}
.err{color:var(--err);font-size:14px;font-weight:600;margin:0}
.errbox{background:#fbeeee;border:1px solid #e6b8b5;border-radius:8px;padding:12px 16px;color:var(--err);font-weight:600;margin:0}
.stack{display:flex;flex-direction:column;gap:20px}.stack.tight{gap:12px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.between{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.two{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;align-items:start}
.pay2{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:start}
.f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.f3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.f4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.line{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.rowh{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);background:var(--bg)}
.tr{display:grid;gap:12px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line);font-size:15px}
.tr:last-child{border-bottom:0}
.g-mem{grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr) 200px}
.g-hist{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-dept{grid-template-columns:minmax(0,2.2fr) .7fr .7fr minmax(0,1.2fr) minmax(0,1fr) 90px}
.g-log{grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,1.3fr) minmax(0,2.6fr);align-items:start}
.g-cmp{grid-template-columns:32px minmax(0,1.3fr) minmax(0,2.4fr)}
.g-docs{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,2fr) minmax(0,1.3fr) 130px;align-items:start}
.right{text-align:right}.acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.struck{text-decoration:line-through;color:#5d6f80}
.inset{background:#f4f7fa;border-bottom:1px solid #d6dee7;padding:18px;display:flex;flex-direction:column;gap:12px}
.bar{height:3px;display:flex;align-items:center}.bar i{flex-grow:1;height:3px}.bar i:first-child{background:var(--red)}.bar i:last-child{background:#2f6fd6}.bar b{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(47,111,214,.9)}
.top{background:var(--navy);padding:12px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.top .brand{display:flex;align-items:center;gap:16px;color:#fff;font-size:17px;font-weight:600}
.top .brand img{height:46px;width:auto;display:block}.top .sep{width:1px;height:32px;background:#4b6473}
.top .who{text-align:right;color:#fff;font-size:15px;font-weight:600}.top .who span{display:block;color:#c9d5df;font-size:13px;font-weight:400}
.top form{margin:0}.top .out{white-space:nowrap;background:transparent;color:#fff;border:1px solid #8fa5b4;border-radius:6px;padding:10px 16px;font-size:14px;font-weight:600;min-height:44px;cursor:pointer}
.shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:calc(100vh - 73px)}
.navcol{background:#eaeff4;border-right:1px solid #d6dee7;padding:16px 0}
.navhead{margin:18px 18px 6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5d6f80}
.nav{display:flex;justify-content:space-between;align-items:center;text-decoration:none;border-left:3px solid transparent;padding:12px 18px;font-size:15px;color:#2d4a66;min-height:46px}
.nav:hover{background:#e3e9f0;color:#2d4a66}.nav.on{background:#fff;border-left-color:var(--navy);color:var(--navy);font-weight:700}
main{padding:32px 40px;max-width:1320px;width:100%;min-width:0}
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:#fff;border:1px solid var(--card);border-radius:12px;padding:12px}
.search{position:relative;flex:1 1 320px;display:flex;gap:8px}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none}
.search input{padding-left:42px;border-color:#c3cfdb}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{text-decoration:none;background:var(--bg);border:1px solid var(--card);color:#2d4a66;border-radius:999px;padding:9px 14px;font-size:14px;font-weight:600;white-space:nowrap}
.chip:hover{background:#e8eef4;color:#2d4a66}.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:640px}
.step{border-top:4px solid #d6dee7;padding-top:10px;font-size:13px;font-weight:700;color:#5d6f80}.step.on{border-top-color:var(--navy);color:var(--navy)}.step.done{border-top-color:#6f8aa3;color:var(--mut)}
.qa{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.qa a{display:flex;flex-direction:column;gap:10px;text-decoration:none;background:#fff;border:1px solid var(--card);border-radius:12px;padding:16px;font-size:14px;font-weight:600;color:var(--navy);box-shadow:0 1px 2px rgba(28,49,59,.05)}
.qa a:hover{border-color:var(--navy);background:#f8fafc}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;border:2px dashed #9fb0c1;border-radius:12px;background:#f8fafc;padding:36px 24px;cursor:pointer;margin:0;font-weight:500;font-size:15px;color:var(--ink)}
.drop.over,.drop:hover{border-color:var(--navy);background:#f1f5f9}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.duebar{margin-top:16px;background:var(--navy);color:#fff;border-radius:8px;padding:16px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.duebar strong{font-size:26px}
.note{display:block;font-size:13px;margin-top:4px;color:var(--tagink)}
.empty{padding:32px 18px;text-align:center;color:var(--mut)}
.pager{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:14px 18px;font-size:14px}
.msg{border-radius:8px;padding:12px 14px}.msg.bcn{background:#eef3f8;margin-left:32px}.msg.dept{background:var(--bg);margin-right:32px}
/* login */
.login{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:calc(100vh - 3px)}
.login-l{background:radial-gradient(900px 520px at 0% 100%,rgba(47,111,214,.16),transparent 70%),radial-gradient(700px 420px at 100% 0%,rgba(198,40,50,.10),transparent 70%),var(--navy);color:#fff;padding:56px 64px;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.login-r{background:#fff;display:flex;align-items:center;justify-content:center;padding:56px 32px}
.feat{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;align-items:start}
.feat .ic{width:32px;height:32px;border-radius:8px;background:var(--navy2);display:flex;align-items:center;justify-content:center}
@media (max-width:1100px){.qa{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.login{grid-template-columns:1fr}.login-l{padding:32px 20px}.feats{display:none}.shell{grid-template-columns:1fr}.navcol{display:flex;overflow-x:auto;padding:0;border-right:0;border-bottom:1px solid #d6dee7}.navhead{display:none}.nav{white-space:nowrap;border-left:0;border-bottom:3px solid transparent;gap:8px}.nav.on{border-bottom-color:var(--navy)}main{padding:20px 16px}.two,.pay2,.f2,.f3,.f4{grid-template-columns:1fr}.g-mem,.g-dept,.g-log,.g-docs,.g-hist{grid-template-columns:1fr 1fr}.hide-sm{display:none}.top .who{display:none}.qa{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* layout helpers added in the 1.2 design pass */
.login-logo{height:88px;width:auto;align-self:flex-start}
.feed .line{align-items:center}
.feed .line>span:first-child{display:flex;gap:10px;align-items:center;min-width:0}
.feed .line>span:last-child{white-space:nowrap}
.acts form{display:inline-flex}
.stackm .acts{flex-wrap:nowrap;align-items:center;gap:12px}
@media (max-width:860px){
  .login-logo{height:60px}
  .shell{grid-template-columns:minmax(0,1fr)}
  .top{padding:10px 16px}.top .brand{gap:10px;font-size:15px}.top .brand img{height:36px}.top .sep{height:24px}.top .out{padding:8px 12px;min-height:38px;font-size:13px}
  h1{font-size:26px}
  .card{padding:18px}
  .btn.sm{white-space:normal}
  .two>.side{order:-1}
  .feed .line{flex-direction:column;align-items:flex-start;gap:4px}
  .feed .line>span:first-child{flex-wrap:wrap}
  .card.flush{overflow-x:auto}
  .card.flush>.tr[style],.card.flush>div>.tr[style]{min-width:680px}
  .stackm .tr,.stackm>div>.tr{grid-template-columns:minmax(0,1fr)!important;min-width:0!important;gap:2px}
  .stackm .tr>:first-child{margin-bottom:2px}
  .stackm .tr>span:empty{display:none}
  .stackm .tr>.acts{grid-column:1/-1;justify-content:flex-start;margin-top:6px}
  .stackm .tr.rowh{display:none}
  .stackm.terms .tr>:nth-child(5):not(:empty)::before{content:"Term ends "}
  .stackm{overflow-x:visible!important}
  .between>.right{text-align:left}
}
/* 1.4.0: page jump bar, How it works rows */
.jump{display:flex;flex-wrap:wrap;gap:6px 18px;padding:10px 16px;background:#fff;border:1px solid var(--card);border-radius:12px;font-size:14px;font-weight:600;position:sticky;top:8px;z-index:5;box-shadow:0 1px 3px rgba(16,32,48,.06)}
.jump a{color:var(--navy);text-decoration:none}.jump a:hover{text-decoration:underline}
[id]{scroll-margin-top:70px}
.g-guide{grid-template-columns:minmax(0,.9fr) minmax(0,2.6fr) minmax(0,1fr);align-items:start}
.nothing{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
@media (max-width:760px){.jump{position:static}}
/* 1.5.0 design pass: cool blue accents, clear menu sections, guided dashboard, safer removals */
:root{--sky:#eef5fe;--sky2:#dceafb;--skyline:#cfdff3;--blue2:#2f6fd6;--danger:#b3261e}
body{background:#f2f6fa}
.top{background:linear-gradient(90deg,#1a2e38 0,#203f52 100%)}
.card{border-color:#dbe5f0;box-shadow:0 1px 2px rgba(28,49,59,.04),0 8px 22px -14px rgba(28,63,110,.22)}
.btn{background:linear-gradient(180deg,#25445a 0,#1c313b 100%)}
.btn:hover{background:#2c4a5a}
.btn.danger{background:var(--danger)}.btn.danger:hover{background:#951e17}
/* menu: section titles read as dividers, items as buttons */
.navcol{background:#f6f9fc;padding:14px 0 24px}
.navhead{margin:20px 18px 8px;padding-top:14px;border-top:1px solid #d5e0ec;font-size:11px;letter-spacing:.12em;color:#7b8ea3;cursor:default;user-select:none}
.nav{margin:2px 10px;border-left:0;border-radius:8px;padding:10px 12px;min-height:42px;color:#2d4a66}
.nav:hover{background:#e7f0fb;color:#1c3f6e}
.nav.on{background:linear-gradient(90deg,#d6e7fb 0,#ecf4fe 100%);color:var(--navy);font-weight:700;box-shadow:inset 3px 0 0 var(--blue2)}
.navhelp{margin:24px 18px 0;padding-top:14px;border-top:1px solid #d5e0ec;font-size:13px;line-height:1.5;color:var(--mut)}
.navhelp a{color:var(--blue)}
/* table header rows: faded cool blue */
.rowh{background:linear-gradient(180deg,#eef4fc 0,#e5eef9 100%);color:#45607c;border-bottom:1px solid #d3e0ef}
/* shortcut tiles: soft blue, modern */
.qa a{background:linear-gradient(135deg,#f3f8ff 0,#e2edfb 100%);border:1px solid var(--skyline);color:#1c3f6e;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.qa a svg{background:#fff;border-radius:10px;padding:7px;width:36px;height:36px;box-shadow:0 1px 2px rgba(28,63,110,.12)}
.qa a:hover{border-color:#8fb5e6;background:linear-gradient(135deg,#eaf3ff 0,#d6e6fa 100%);transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(28,63,110,.35)}
/* dashboard: the month in three steps */
.flowcard{background:linear-gradient(180deg,#fff 0,#f8fbff 100%)}
.flow{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.flowstep{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:12px;background:#f5f8fc;border:1px solid #dfe8f3}
.flowstep .num{flex:0 0 36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;background:#fff;border:2px solid #b7cfee;color:#1c3f6e}
.flowstep h3{font-size:17px;margin-top:2px}
.flowstep.now{background:linear-gradient(135deg,#eaf3ff 0,#d8e8fb 100%);border-color:#9dbfe9;box-shadow:0 8px 20px -12px rgba(47,111,214,.45)}
.flowstep.now .num{background:var(--blue2);border-color:var(--blue2);color:#fff}
.flowstep.done .num{background:#e2eaf4;border-color:#e2eaf4;color:#1c3f6e}
.flowstep.done h3{color:#45607c}
.spot{background:linear-gradient(135deg,#1c313b 0,#26506f 100%);color:#fff;border-radius:12px;padding:20px 22px;border:0}
.optin{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--sky);border:1px dashed #b9cfe9;border-radius:10px;padding:14px 16px;margin:0}
.card.optin{border-style:dashed}
/* removing a member: an unmistakable confirm step */
.removing>.tr{background:#fff4f2}
.inset.confirm{background:#fff8f6;border:2px solid #e5a49c;border-radius:12px;margin:6px 12px 14px;padding:18px 20px}
/* roomy writing boxes */
textarea.big{min-height:200px;font-size:16px;line-height:1.55;padding:14px 16px;border-radius:10px;resize:vertical;background:#fbfdff}
/* roster progress bar */
.stepbar{position:sticky;bottom:12px;z-index:6;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid var(--skyline);border-radius:12px;padding:10px 14px 10px 18px;box-shadow:0 10px 28px -10px rgba(28,63,110,.4)}
.chip.on{background:#1c3f6e;border-color:#1c3f6e}
.ok{background:var(--sky);border-color:#c4d8f0}
@media (max-width:1000px){.flow{grid-template-columns:1fr}}
@media (max-width:860px){.navhelp{display:none}.nav{margin:0;border-radius:0}.nav.on{box-shadow:inset 0 -3px 0 var(--blue2)}.stepbar{bottom:6px}}
.g-mem{grid-template-columns:minmax(0,1.4fr) minmax(0,.7fr) minmax(0,.9fr) minmax(0,1fr) minmax(0,1.5fr) 280px}
.acts{flex-wrap:nowrap}
@media (max-width:860px){.acts{flex-wrap:wrap}}
/* messages read like a conversation */
.msgcard.bcn{border-left:4px solid var(--blue2);background:linear-gradient(180deg,#f7faff 0,#fff 100%)}
.msgcard.mine{margin-left:72px;background:#fbfcfe;border-style:dashed}
@media (max-width:860px){.msgcard.mine{margin-left:20px}}
@media (max-width:860px){.dash2>.side{order:0}}

/* 1.5.1: menu section titles as solid blue strips; quick roster upload on Verify roster */
.navhead{margin:18px 0 6px;padding:9px 18px;border-top:0;background:linear-gradient(90deg,#1f3a5f 0,#2c5a8c 100%);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-align:center;box-shadow:inset 0 -2px 0 rgba(255,255,255,.12)}
.navcol .navhead:first-child{margin-top:4px}
.upcard{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:center;border:1px solid #c9dbef;background:linear-gradient(135deg,#f3f8fe 0,#fff 70%)}
.upcard h2{font-size:19px}
.upcard .drop{padding:26px 18px;background:#fff}
.drop.busy{opacity:.7;pointer-events:none}
@media (max-width:860px){.upcard{grid-template-columns:1fr;gap:14px}}

/* ===== 1.6.0: navy and gold portal theme, full width ===== */
:root{--gold:#c6a14d;--gold2:#e6cb86;--night:#0b1828;--ondark:#e6edf5;--ondark2:#b4c5d6;--blue:#1f5fbf;--btn1:#2a64ad;--btn2:#1b4a86}
html{background:#0b1828}
body{background:#0b1828 url('bg.svg?v=1.6.0b') center/cover fixed no-repeat;min-height:100vh}
/* top bar: deeper, with a gold hairline under the brand line */
.top{background:rgba(5,11,21,.9);padding:14px 32px}
.top .who{color:#fff}.top .who span{color:var(--ondark2)}
.top .out{border-color:rgba(230,203,134,.55)}.top .out:hover{background:rgba(230,203,134,.12)}
/* left menu: dark glass, gold section titles with rules either side */
.shell{grid-template-columns:264px minmax(0,1fr)}
.navcol{background:rgba(6,13,24,.7);border-right:1px solid rgba(198,161,77,.22);padding:18px 0 28px}
.navhead{display:flex;align-items:center;gap:10px;margin:24px 16px 8px;padding:0;background:none;box-shadow:none;color:var(--gold2);font-size:11.5px;font-weight:700;letter-spacing:.14em;white-space:nowrap;text-transform:uppercase;text-align:center}
.navhead::before,.navhead::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(198,161,77,0),rgba(198,161,77,.75))}
.navhead::after{background:linear-gradient(90deg,rgba(198,161,77,.75),rgba(198,161,77,0))}
.navcol .navhead:first-child{margin-top:6px}
.nav{margin:2px 12px;border-radius:10px;color:#d4dfeb;font-weight:500}
.nav:hover{background:rgba(255,255,255,.07);color:#fff}
.nav.on{background:linear-gradient(90deg,rgba(198,161,77,.24),rgba(198,161,77,.05));color:#fff;font-weight:700;box-shadow:inset 3px 0 0 var(--gold)}
.badge{background:var(--gold);color:#1a2a3a}
.navhelp{color:var(--ondark2);border-top-color:rgba(198,161,77,.25)}.navhelp a{color:var(--gold2)}
/* main area uses the full width, content centered up to a wide maximum */
main{max-width:none;padding:36px 48px 56px;color:var(--ondark)}
main>*{max-width:2200px;margin-left:auto;margin-right:auto}
/* text that sits straight on the background */
main :is(h1,h2,h3){color:#fff}
main h1{font-size:34px}
main .mut,main .rowh{color:var(--ondark2)}
main .kick{color:var(--gold2);letter-spacing:.12em}
main a:not([class]),main .link{color:var(--gold2)}
main a:not([class]):hover,main .link:hover{color:#fff}
main .step{color:var(--ondark2);border-top-color:rgba(255,255,255,.18)}main .step.on{color:#fff;border-top-color:var(--gold)}main .step.done{color:var(--ondark2);border-top-color:rgba(198,161,77,.55)}
/* light surfaces keep dark text */
:is(.card,.toolbar,.ok,.errbox,.stepbar,.inset,.optin,.drop,.empty,.login-r form,.flowstep,.msgcard,.pager,.tr,.jump){color:var(--ink)}
main .qa a{color:var(--navy)}
main .jump a{color:var(--navy)}main .jump a:hover{color:var(--btn1)}
/* big numbers that sit in a page header on the background */
main>.stack>.between [style*="color:var(--navy)"],main>.stack>.between .right div[style]{color:#fff!important}
:is(.card,.toolbar,.ok,.errbox,.stepbar,.inset,.optin,.login-r form,.jump) :is(h1,h2,h3){color:var(--navy)}
:is(.card,.toolbar,.ok,.errbox,.stepbar,.inset,.optin,.login-r form,.jump) .mut{color:var(--mut)}
:is(.card,.toolbar,.ok,.errbox,.stepbar,.inset,.optin,.login-r form,.jump) .rowh{color:var(--mut)}
:is(.card,.toolbar,.ok,.errbox,.stepbar,.inset,.optin,.login-r form,.jump) .kick{color:var(--mut);letter-spacing:.06em}
:is(.card,.toolbar,.ok,.errbox,.stepbar,.inset,.optin,.login-r form,.jump) :is(a:not([class]),.link){color:var(--blue)}
:is(.card,.toolbar,.ok,.errbox,.stepbar,.inset,.optin,.login-r form,.jump) :is(a:not([class]),.link):hover{color:#123f88}
.card.spot,.spot{color:#fff}.spot :is(h1,h2,h3){color:#fff}
.card{border:1px solid rgba(255,255,255,.65);border-radius:16px;box-shadow:0 1px 2px rgba(5,12,24,.2),0 18px 40px -22px rgba(0,0,0,.55)}
.toolbar{border-radius:14px;border-color:rgba(255,255,255,.6);box-shadow:0 12px 30px -20px rgba(0,0,0,.5)}
.ok{border-radius:12px}
/* buttons: modern, rounded, with depth */
.btn{background:linear-gradient(180deg,var(--btn1),var(--btn2));border-radius:10px;padding:12px 22px;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 16px -8px rgba(18,52,102,.75);transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}
.btn:hover{background:linear-gradient(180deg,#3172c2,#1f5396);transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 10px 22px -10px rgba(18,52,102,.85)}
.btn:active{transform:none}
.btn2{border-radius:10px;border-color:#9fb6cf;color:#1b3f6b;transition:background .12s ease,border-color .12s ease}
.btn2:hover{border-color:var(--btn1);background:#f0f6fd;color:#123a6a}
main>.stack>.between .btn2,main>.stack>div>.row .btn2{background:rgba(255,255,255,.96)}
.btn.danger{background:linear-gradient(180deg,#c43a3a,#a12a2a);box-shadow:0 6px 16px -8px rgba(140,30,30,.7)}
.chip{border-radius:999px}.chip.on{background:linear-gradient(180deg,var(--btn1),var(--btn2));border-color:var(--btn2)}
/* shortcut tiles */
.qa a{background:#fff;border:1px solid rgba(255,255,255,.7);border-radius:14px;padding:18px;font-size:15px;color:var(--navy);box-shadow:0 14px 30px -22px rgba(0,0,0,.6);transition:transform .12s ease,box-shadow .12s ease}
.qa a svg{box-sizing:content-box;padding:9px;border-radius:12px;background:linear-gradient(180deg,#eef4fb,#dde9f6);stroke:#1b4a86}
.qa a:hover{transform:translateY(-2px);box-shadow:0 18px 34px -20px rgba(0,0,0,.7),inset 0 -3px 0 var(--gold);background:#fff}
/* dashboard: two columns on wide screens */
.dashgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.dashgrid>.dcol{display:flex;flex-direction:column;gap:24px;min-width:0}
@media (min-width:1400px){.dashgrid{grid-template-columns:minmax(0,1fr) minmax(360px,440px);align-items:start}.dashgrid .qa{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* sticky step bar and preview banner on the dark page */
.stepbar{border-radius:14px;box-shadow:0 16px 36px -18px rgba(0,0,0,.7)}
/* login: the left panel shows the page background */
.login-l{background:linear-gradient(180deg,rgba(6,13,24,.25),rgba(6,13,24,.55))}
.login-r{background:transparent}
.login-r form{background:#fff;border-radius:20px;padding:44px 40px;box-shadow:0 30px 70px -30px rgba(0,0,0,.75),0 0 0 1px rgba(198,161,77,.25)}
@media (max-width:860px){.login-r{padding:24px 16px}.login-r form{padding:28px 22px}}
@media (max-width:860px){
  .navcol{background:rgba(7,15,28,.85);border-right:0;border-bottom:1px solid rgba(198,161,77,.3)}
  .nav{margin:0;border-radius:0}.nav.on{box-shadow:inset 0 -3px 0 var(--gold)}
  .shell{grid-template-columns:minmax(0,1fr)}main{padding:22px 16px 40px}main h1{font-size:27px}.navhead{display:none}
  body{background-attachment:scroll}
}
@media print{html,body{background:#fff!important}}
/* brand line: deep red and deep blue meeting at a crisp neon spark */
.bar{height:3px;position:relative;display:flex;align-items:center;background:#05101e;z-index:5}
.bar i{flex:1;height:3px}
.bar i:first-child{background:linear-gradient(90deg,#4f0810 0%,#8f1220 40%,#d4202f 100%)}
.bar i:last-child{background:linear-gradient(90deg,#3a86ff 0%,#1a4fd6 40%,#0a2466 100%)}
.bar b{position:relative;flex:none;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #fff,0 0 3px 1px #d8f0ff,0 0 9px 2px rgba(92,176,255,.95),0 0 20px 5px rgba(42,120,255,.5)}
.bar b::before,.bar b::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.bar b::before{width:150px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(214,236,255,.9) 42%,#fff 50%,rgba(214,236,255,.9) 58%,rgba(255,255,255,0))}
.bar b::after{width:1px;height:15px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 50%,rgba(255,255,255,0))}

/* ===== 1.6.1: card headers, deeper table headers, balanced dashboards ===== */
.card{--cp:24px}.card.flush{--cp:0px}
.chead,.card>h2:first-child{position:relative;margin:calc(var(--cp)*-1) calc(var(--cp)*-1) 18px;padding:15px 24px;background:linear-gradient(180deg,#132b4a 0,#0d1f38 100%);border-radius:15px 15px 0 0;box-shadow:inset 0 -2px 0 rgba(198,161,77,.8);text-align:center}
.card>h2:first-child{display:block;color:#fff!important;font-size:17px;letter-spacing:.02em}
.chead h2{margin:0;color:#fff!important;font-size:17px;letter-spacing:.02em}
.chead .cside{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--gold2)!important}
.chead .cside:hover{color:#fff!important}
.card.flush{overflow:hidden}
/* table header rows: deep blue with white text */
.rowh,main .rowh,:is(.card,.toolbar,.ok,.errbox,.stepbar,.inset,.optin,.login-r form,.jump) .rowh{background:linear-gradient(180deg,#132b4a,#0d1f38);color:#e9f0f8;border-bottom:0}
/* calmer surfaces inside cards (no pale blue against the navy) */
.flowcard{background:#fff}
.flowstep{background:#f7f9fc;border:1px solid #e1e8f1}
.flowstep.now{background:#fff;border:2px solid #2a64ad;box-shadow:0 10px 24px -16px rgba(18,52,102,.7)}
.flowstep.done{background:#f4f6f9}
.flowstep .num{border-color:#c6d3e3}
.ok{background:#f6f8fb;border:1px solid #dfe6ef;border-left:4px solid #2a64ad;color:var(--ink)}
.optin{background:#f7f9fc;border:1px solid #dfe6ef}
/* shortcut tiles in one row across the top */
.qa.qa6{grid-template-columns:repeat(6,minmax(0,1fr))}
.qa.qa6 a{flex-direction:row;align-items:center;gap:14px;padding:16px 18px}
@media (max-width:1300px){.qa.qa6{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* two balanced columns */
.dashgrid{grid-template-columns:minmax(0,1fr)}
@media (min-width:1200px){.dashgrid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.dashgrid.even{grid-template-columns:repeat(2,minmax(0,1fr))}.dashgrid .qa{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* admin dashboard: action rows, all-clear line, done list, search bar */
.line.act{gap:14px}
.line.act .cnt{flex:0 0 auto;min-width:34px;height:34px;padding:0 8px;border-radius:17px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#1a2a3a;background:linear-gradient(180deg,#e9cf8e,#c9a654)}
.clearline{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.donelist{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.findbar .f2{gap:16px}
/* staff preview notice: slim, on-brand, can be hidden */
.pbanner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 20px 9px 28px;background:rgba(198,161,77,.14);border-bottom:1px solid rgba(198,161,77,.45);color:#f3e6c4;font-size:14px}
.pbanner strong{color:#fff}
.pbanner[hidden]{display:none}
.bannerx{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(230,203,134,.6);background:transparent;color:#f3e6c4;font-size:20px;line-height:1;cursor:pointer}
.bannerx:hover{background:rgba(230,203,134,.18);color:#fff}
.goldtag{background:rgba(198,161,77,.18);color:var(--gold2);border:1px solid rgba(198,161,77,.55)}
@media (max-width:860px){.card{--cp:18px}.qa.qa6{grid-template-columns:repeat(2,minmax(0,1fr))}.qa.qa6 a{flex-direction:column;align-items:flex-start}.goldtag{display:none}.top .row form .out{font-size:12px}}
.card.flush>.chead{margin-bottom:0}
/* the same header band when a card's title sits at the top of its first block */
.card:not(.between):not(.row):not(.f2):not(.flush):not(.spot)>:is(div,form):not(.between):not(.row):not(.chead):first-child>h2:first-child{display:block;position:relative;margin:-24px -24px 18px;padding:15px 24px;background:linear-gradient(180deg,#132b4a 0,#0d1f38 100%);border-radius:15px 15px 0 0;box-shadow:inset 0 -2px 0 rgba(198,161,77,.8);text-align:center;color:#fff!important;font-size:17px;letter-spacing:.02em}
@media (max-width:860px){.card:not(.between):not(.row):not(.f2):not(.flush):not(.spot)>:is(div,form):not(.between):not(.row):not(.chead):first-child>h2:first-child{margin:-18px -18px 16px;padding:13px 18px}}
.card.stack>h2:first-child,.card.stack>:is(div,form):first-child>h2:first-child{margin-bottom:6px}
.donelist .tag{background:#eef1f5;color:#1c3f6e;border:1px solid #dde3ea}

/* ===== 1.6.2: centered page titles, standout header bars, blue secondary buttons, no pale blue ===== */
/* page titles and their intro line sit centered */
main>*>div:not([class]):has(>h1){text-align:center}
main>*>div:not([class]):has(>h1) p{margin-left:auto!important;margin-right:auto!important}
main>*>.between:has(>div>h1){flex-direction:column;align-items:center;text-align:center;gap:14px}
main>*>.between:has(>div>h1) p{margin-left:auto!important;margin-right:auto!important}
main>*>.between:has(>div>h1) .right{text-align:center}
main .steps{max-width:660px;margin-left:auto;margin-right:auto}
/* card header bars: a royal navy a shade lighter than the page, so they stand out without a border */
.chead,.card>h2:first-child{background:linear-gradient(180deg,#1f426d 0,#173559 100%);box-shadow:inset 0 -2px 0 rgba(212,176,98,.9),inset 0 1px 0 rgba(255,255,255,.08)}
.chead h2,.card>h2:first-child{font-size:18px;letter-spacing:.03em}
/* secondary buttons: steel blue that sits well on the navy */
.btn2{background:linear-gradient(180deg,#2d5383 0,#22446c 100%);color:#fff;border:1px solid rgba(255,255,255,.12);box-shadow:0 6px 14px -10px rgba(10,30,60,.8)}
.btn2:hover{background:linear-gradient(180deg,#36609a 0,#294f7d 100%);color:#fff;border-color:rgba(230,203,134,.5)}
main>.stack>.between .btn2,main>.stack>div>.row .btn2{background:linear-gradient(180deg,#2d5383 0,#22446c 100%)}
.spot .btn2{background:#fff;color:var(--navy);border-color:#fff}.spot .btn2:hover{background:#eef2f7;color:var(--navy)}
.btn2 svg{stroke:#fff}
/* no pale blue fills */
.tag{background:#edf0f4;color:#1c3f6e}
.tag.dark{background:#173559;color:#fff}
.upcard{background:#fff;border-color:rgba(255,255,255,.65)}
/* the same title bar for every card, whatever markup its heading uses */
.card:not(.between):not(.row):not(.f2):not(.spot)>.between:first-child:has(>div>h2:first-child),
.card:not(.between):not(.row):not(.f2):not(.flush):not(.spot)>:is(div,form):not([class]):first-child:has(>h2:first-child){position:relative;margin:calc(var(--cp)*-1) calc(var(--cp)*-1) 18px;padding:15px 24px!important;background:linear-gradient(180deg,#1f426d 0,#173559 100%);border-radius:15px 15px 0 0;box-shadow:inset 0 -2px 0 rgba(212,176,98,.9),inset 0 1px 0 rgba(255,255,255,.08)}
.card>.between:first-child:has(>div>h2:first-child) h2,.card>:is(div,form):not([class]):first-child>h2:first-child{color:#fff!important;font-size:18px;letter-spacing:.03em}
.card>.between:first-child:has(>div>h2:first-child) .mut,.card>:is(div,form):not([class]):first-child:has(>h2:first-child)>p{color:#c9d6e5!important}
.card>.between:first-child:has(>div>h2:first-child) a:not([class]),.card>:is(div,form):not([class]):first-child:has(>h2:first-child) a:not([class]){color:var(--gold2)!important}
.card>.between:first-child:has(>div>h2:first-child):not(:has(>:nth-child(2))),.card>:is(div,form):not([class]):first-child:has(>h2:first-child){text-align:center;justify-content:center}
.card>.between:first-child:has(>div>h2:first-child) .tag{background:rgba(255,255,255,.14);color:#fff}
.card.flush>.between:first-child:has(>div>h2:first-child){margin:0}
.card.flush{gap:0}
.card>input[type=hidden]+h2:first-of-type{display:block;position:relative;margin:calc(var(--cp)*-1) calc(var(--cp)*-1) 18px;padding:15px 24px;background:linear-gradient(180deg,#1f426d 0,#173559 100%);border-radius:15px 15px 0 0;box-shadow:inset 0 -2px 0 rgba(212,176,98,.9),inset 0 1px 0 rgba(255,255,255,.08);text-align:center;color:#fff!important;font-size:18px;letter-spacing:.03em}
.tag.goldtag{background:rgba(198,161,77,.18);color:var(--gold2);border:1px solid rgba(198,161,77,.55)}
.card.flush>:is(div,form):not([class]):first-child:has(>h2:first-child){margin:0;padding:15px 24px!important;background:linear-gradient(180deg,#1f426d 0,#173559 100%);box-shadow:inset 0 -2px 0 rgba(212,176,98,.9),inset 0 1px 0 rgba(255,255,255,.08);text-align:center}
:is(.card.between,.card.row,.card.f2)>:is(div,form):first-child>h2:first-child{color:var(--navy)!important}
:is(.card.between,.card.row,.card.f2)>:is(div,form):first-child:has(>h2:first-child)>p{color:var(--ink)!important}
main .qa a:hover,main .jump a:hover{color:var(--navy)}

/* ===== 1.7.0: inbox, library, data check ===== */
.themenote{margin:0;padding:12px 24px 4px;text-align:center}
.inrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:14px 22px;border-top:1px solid var(--line)}
.inrow:first-of-type{border-top:0}
.inrow .inhead{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.inrow .intitle{margin-top:6px;font-weight:600;color:var(--navy)}
.inrow .ingist{margin-top:2px}
.inrow .inside{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.inrow .owner{font-size:13px;color:var(--mut)}
.inrow.overdue{background:#fff4f4;box-shadow:inset 4px 0 0 #c62832}
.tag.late{background:#c62832;color:#fff}
.overduecard .chead{background:linear-gradient(180deg,#7d1b24 0,#5e121a 100%)!important}
.libgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.libcard{display:flex;flex-direction:column;gap:10px;background:#fff;border-radius:16px;padding:20px;border:1px solid rgba(255,255,255,.65);box-shadow:0 14px 30px -22px rgba(0,0,0,.6);min-height:190px;color:var(--ink)}
.libcard h3{font-size:17px;margin:0;color:var(--navy)!important}
.libcard p{margin:0}
.libtop{display:flex;justify-content:space-between;align-items:center}
.libic{display:inline-flex;padding:9px;border-radius:12px;background:linear-gradient(180deg,#eef4fb,#dde9f6)}
.libattach{display:flex;gap:14px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#f7f9fc}
.libattach span{flex:1}
.dcheck .issues{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.fixrow{gap:10px;align-items:center;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--line)}
.fixrow input{min-height:40px}
.watcher{display:inline-flex;gap:6px;align-items:center;margin:0}
@media (max-width:860px){.inrow{grid-template-columns:1fr}.inrow .inside{justify-content:flex-start}}
.pbanner a{color:var(--gold2)}.pbanner a:hover{color:#fff}
.chead .csub{margin:4px 0 0;color:#c9d6e5;font-size:13px;font-weight:500;letter-spacing:.02em}
/* 1.7.1: deeper blue shortcut tiles and checklist, a "You owe" box that stands out, blue drop zones, contact editor, website button */
main .qa a,.qa a{background:linear-gradient(160deg,#1f4b84 0%,#163a68 100%);border:1px solid rgba(255,255,255,.14);color:#fff;box-shadow:0 14px 30px -20px rgba(0,0,0,.75)}
.qa a svg{background:rgba(255,255,255,.12);stroke:#fff;box-shadow:none}
main .qa a:hover,.qa a:hover{color:#fff;background:linear-gradient(160deg,#2a5fa6 0%,#1e4c88 100%);border-color:rgba(230,203,134,.65);box-shadow:0 18px 34px -18px rgba(0,0,0,.8),inset 0 -3px 0 var(--gold)}
main .qa a:active,main .qa a:focus-visible,.qa a:active{color:#fff;background:linear-gradient(160deg,#3f86da 0%,#2c6bc0 100%);border-color:#e6cb86;outline:none;transform:translateY(0)}
main .qa a:active svg,main .qa a:focus-visible svg{stroke:#fff;background:rgba(255,255,255,.22)}
.flowstep{background:linear-gradient(160deg,#1b416f 0%,#14325a 100%);border:1px solid rgba(255,255,255,.1);color:#fff;transition:transform .12s ease,box-shadow .12s ease}
main .flowcard .flowstep h3{color:#fff}main .flowcard .flowstep .kick{color:#f3dc9e;letter-spacing:.1em}main .flowcard .flowstep .mut{color:#cddaea}
.flowstep .num{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);color:#fff}
.flowstep.now{background:linear-gradient(160deg,#2c67b2 0%,#1f5190 100%);border:2px solid #e6cb86;box-shadow:0 16px 30px -16px rgba(10,30,60,.85)}
.flowstep.now .num{background:#e6cb86;border-color:#e6cb86;color:#10223b}
.flowstep.done{background:linear-gradient(160deg,#283d57 0%,#1f3148 100%)}main .flowcard .flowstep.done h3{color:#dbe5f0}.flowstep.done .num{background:#e6cb86;border-color:#e6cb86;color:#10223b}
.flowstep:hover{transform:translateY(-1px)}
main .flowcard .flowstep :is(.btn,.btn2){background:linear-gradient(180deg,#123056 0%,#0b2242 100%);border:1px solid rgba(230,203,134,.55);color:#fff}
main .flowcard .flowstep :is(.btn,.btn2):hover{background:linear-gradient(180deg,#1a3e6c 0%,#102c52 100%);border-color:#e6cb86;color:#fff}
main .flowcard .flowstep :is(.btn,.btn2):active{background:#071830}
main .flowcard .flowstep .link,main .flowcard .flowstep button.link{color:#bcd8ff}main .flowcard .flowstep .link:hover{color:#fff}
.flowstep .tag.dark{background:#0d1f38;color:#fff;border-color:rgba(255,255,255,.25)}
.owebox{margin:0 0 10px;border-radius:12px;padding:16px 18px;color:#fff;font-weight:600;font-size:16px;line-height:1.45;border-left:6px solid #e6cb86;box-shadow:0 12px 26px -18px rgba(0,0,0,.75)}
.owebox.big{font-size:17px;margin:14px 0 8px}
.owebox.due{background:linear-gradient(135deg,#1f5fbf 0%,#184a96 100%)}
.owebox.past{background:linear-gradient(135deg,#a7212f 0%,#7c1622 100%);border-left-color:#ffd27a}
.owebox.clear{background:linear-gradient(135deg,#187a4b 0%,#0f5a37 100%)}
.drop,.upcard .drop{background:linear-gradient(160deg,#245a9c 0%,#1b467d 100%);border:2px dashed rgba(214,232,255,.75);color:#fff}
.drop :is(span,.mut,.small,p){color:#d8e7fa!important}
.drop strong,.drop [data-dropname]{color:#fff!important}
.drop svg{stroke:#fff}
.drop.over,.drop:hover,.upcard .drop:hover{background:linear-gradient(160deg,#2f70c0 0%,#245a9c 100%);border-color:#e6cb86}
.ctnote{margin:0;background:#fff6e0;border:1px solid #e3b25a;color:#5b3d00;border-radius:10px;padding:12px 14px}
.cthead,.ctrow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,1.7fr) minmax(0,1fr) minmax(0,.9fr) 96px;gap:10px;align-items:center}
.cthead{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#4d6074;padding:4px 2px 0}
.ctrows{display:flex;flex-direction:column;gap:8px}
.ctrow input{min-height:42px}
.ctrm{display:flex;align-items:center;gap:6px;font-size:13px}.ctrm input{width:18px;height:18px;min-height:0;margin:0}.ctrm label{margin:0;font-weight:600}
.ctrow:has(.ctrm input:checked) input:not([type=checkbox]){text-decoration:line-through;opacity:.5}
@media (max-width:900px){.cthead{display:none}.ctrow{grid-template-columns:1fr 1fr;padding:12px;border:1px solid #dfe6ee;border-radius:10px}}
.top a.out{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:#fff}
@media (max-width:860px){.top a.out.home span{display:none}}
/* 1.8.0: stacked find bar on the admin dashboard */
.findstack{display:flex;flex-direction:column;gap:10px;width:100%;max-width:760px;margin:0 auto;padding:16px 18px;border-radius:14px;background:linear-gradient(160deg,rgba(31,75,132,.55),rgba(17,44,80,.55));border:1px solid rgba(230,203,134,.35)}
.findstack .search{flex:none;align-items:center}
.findstack .search input{min-height:44px;background:#fff}
.findstack .search .btn,.findstack .search .btn2{min-width:150px;justify-content:center;white-space:nowrap}
.findstack .search svg{stroke:#1b4a86}
@media (max-width:640px){.findstack .search{flex-wrap:wrap}.findstack .search .btn,.findstack .search .btn2{width:100%}}
.carrybreak{margin:2px 0 6px 18px;padding-left:14px;border-left:3px solid #d8b86a}
.carrybreak .line.sub{padding:8px 0;font-size:14px}
.carrybreak .tag.late{margin-left:6px}
.paynext{margin:0;background:#173a66;color:#fff;border-left:5px solid #e6cb86;border-radius:10px;padding:12px 14px;font-weight:600}
/* 1.8.0: communications */
.sendto{border:1px solid #d6dee7;border-radius:12px;padding:14px 16px;margin:0;display:flex;flex-direction:column;gap:12px}
.sendto legend{font-weight:700;color:var(--navy);padding:0 6px}
.sendto .radio{display:flex;gap:8px;align-items:center;font-weight:600;margin:0;cursor:pointer}.sendto .radio input{width:18px;height:18px;min-height:0;margin:0}
.picklist{max-height:300px;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px;padding:4px;border:1px solid #e1e8f1;border-radius:10px;background:#f4f6f9}
.pick{display:flex;gap:10px;align-items:center;margin:0;padding:8px 10px;border-radius:8px;border:1px solid transparent;cursor:pointer;font-weight:600;color:var(--navy);background:#fff}
.pick input{width:18px;height:18px;min-height:0;margin:0;flex:none}
.pick.on{border-color:#1f5aa6;box-shadow:inset 4px 0 0 #c6a14d}
.delivery>div{border:1px solid #d6dee7;border-radius:12px;padding:14px 16px}
.mailprev{width:100%;height:720px;border:1px solid #d6dee7;border-radius:12px;background:#0d1d33}
.commbody p{margin:0 0 10px}.commbody ul{margin:0 0 10px;padding-left:22px}
.commrow{padding:16px 18px!important}
.pick[hidden],.deptpick[hidden]{display:none!important}
/* 1.8.0b: logo above every page title; deep navy "glass" for tiles, checklist and shaded boxes (Ryan, Oct 3 evening) */
.pagelogo{display:flex;justify-content:center;margin:4px auto 14px;width:100%}
.pagelogo img{height:118px;width:auto;filter:drop-shadow(0 10px 22px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(230,203,134,.18))}
@media (max-width:860px){.pagelogo img{height:84px}}
:root{--glass:linear-gradient(180deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.03) 38%,rgba(255,255,255,0) 60%),linear-gradient(160deg,#1a3459 0%,#10213b 100%);
  --glass-hi:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 40%,rgba(255,255,255,0) 62%),linear-gradient(160deg,#21416e 0%,#132a4b 100%);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.35);
  --gold-shine:linear-gradient(145deg,#f6e3a8 0%,#d9b766 45%,#b98f3e 100%)}
/* shortcut tiles */
main .qa a,.qa a{background:var(--glass);border:1px solid rgba(230,203,134,.32);color:#fff;box-shadow:var(--glass-edge),0 18px 34px -22px rgba(0,0,0,.9)}
.qa a svg{background:var(--gold-shine);stroke:#10223b;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 4px 10px -4px rgba(0,0,0,.6)}
main .qa a:hover,.qa a:hover{color:#fff;background:var(--glass-hi);border-color:rgba(230,203,134,.75);transform:translateY(-2px);box-shadow:var(--glass-edge),0 0 0 1px rgba(230,203,134,.25),0 22px 40px -20px rgba(0,0,0,.95),0 0 26px -8px rgba(230,203,134,.35)}
main .qa a:active,main .qa a:focus-visible,.qa a:active{color:#10223b;background:var(--gold-shine);border-color:#f6e3a8;transform:translateY(0)}
main .qa a:active svg,main .qa a:focus-visible svg{background:#10223b;stroke:#f3dc9e}
/* checklist */
.card.flowcard{background:var(--glass);border-color:rgba(230,203,134,.3)}
.flowstep{background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 55%),rgba(9,22,41,.55);border:1px solid rgba(255,255,255,.12);box-shadow:var(--glass-edge)}
.flowstep.now{background:var(--glass-hi);border:1px solid rgba(230,203,134,.85);box-shadow:var(--glass-edge),0 0 0 1px rgba(230,203,134,.35),0 0 30px -8px rgba(230,203,134,.45)}
.flowstep.done{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 55%),rgba(9,22,41,.4)}
.flowstep .num,.flowstep.done .num{background:rgba(255,255,255,.08);border-color:rgba(230,203,134,.55);color:#f3dc9e}
.flowstep.now .num{background:var(--gold-shine);border-color:#f6e3a8;color:#10223b;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
main .flowcard .flowstep :is(.btn,.btn2){background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 60%),#0b1d36;border:1px solid rgba(230,203,134,.55);color:#fff}
main .flowcard .flowstep.now :is(.btn,.btn2){background:var(--gold-shine);border-color:#f6e3a8;color:#10223b;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 18px -10px rgba(0,0,0,.8)}
main .flowcard .flowstep.now :is(.btn,.btn2):hover{filter:brightness(1.06);color:#10223b}
main .flowcard .chead{background:transparent!important;border-bottom:1px solid rgba(230,203,134,.35)}
/* featured update, latest update */
.spot,.card.spot{background:var(--glass-hi);border:1px solid rgba(230,203,134,.35)!important;box-shadow:var(--glass-edge),0 18px 34px -22px rgba(0,0,0,.9)}
.spot .kick{color:#f3dc9e!important}
/* "You owe" box: keep the colour, add a gloss */
.owebox{background-image:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.04) 45%,rgba(255,255,255,0) 60%),var(--owe)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 28px -18px rgba(0,0,0,.8)}
.owebox.due{--owe:linear-gradient(135deg,#1f5fbf 0%,#163f80 100%)}
.owebox.past{--owe:linear-gradient(135deg,#a7212f 0%,#6f121d 100%)}
.owebox.clear{--owe:linear-gradient(135deg,#187a4b 0%,#0c4d2f 100%)}
/* amount due bar, next-step note, find bar */
.duebar,.paynext{background:var(--glass)!important;border:1px solid rgba(230,203,134,.35);box-shadow:var(--glass-edge)}
.findstack{background:var(--glass);border-color:rgba(230,203,134,.4);box-shadow:var(--glass-edge),0 18px 34px -22px rgba(0,0,0,.9)}
/* drop zones: sapphire glass so they still read as the place to drop a file */
.drop,.upcard .drop{background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.03) 45%,rgba(255,255,255,0) 62%),linear-gradient(160deg,#21508f 0%,#143563 100%);border:2px dashed rgba(230,203,134,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 14px 28px -20px rgba(0,0,0,.8)}
.drop.over,.drop:hover,.upcard .drop:hover{background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.04) 45%,rgba(255,255,255,0) 62%),linear-gradient(160deg,#2a62ab 0%,#1a4178 100%);border-color:#f3dc9e}
.drop svg{stroke:#f3dc9e}
/* section header bands: a touch of gloss */
.chead{box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
/* page-level notices on the dark background: glass with a gold edge (notices inside white cards stay light) */
main p.ok:not(.card p.ok):not(.card .ok){background:var(--glass)!important;color:#e9f0f8!important;border:1px solid rgba(230,203,134,.35)!important;border-left:5px solid #e6cb86!important;box-shadow:var(--glass-edge),0 14px 28px -20px rgba(0,0,0,.85)}
main p.ok:not(.card p.ok) strong{color:#fff!important}
main p.ok:not(.card p.ok) a{color:#f3dc9e!important}
.drop svg,.drop svg *{stroke:#f3dc9e!important}
/* 1.8.1: tabs on Roster files & BetaBCN sync */
.tabs{display:flex;justify-content:center;gap:8px;margin:14px auto 0;flex-wrap:wrap}
.tabs .tab{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;text-decoration:none;font-weight:700;font-size:14px;color:#e9f0f8;background:var(--glass);border:1px solid rgba(230,203,134,.3);box-shadow:var(--glass-edge)}
.tabs .tab:hover{border-color:rgba(230,203,134,.75);color:#fff}
.tabs .tab.on{background:var(--gold-shine);color:#10223b;border-color:#f6e3a8}
.tabs .tab .badge{background:#10223b;color:#f3dc9e}
/* 1.8.1: who gets the login link */
.whopick{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}
.whoopt{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;border:1px solid #d6dee7;border-radius:10px;cursor:pointer;background:#fff;font-weight:500}
.whoopt input[type=radio]{width:18px;height:18px;min-height:0;margin:2px 0 0;flex:none}
.whoopt strong{display:block;color:var(--navy)}.whoopt .mut{display:block;overflow-wrap:anywhere}
.whoopt:has(input:checked){border-color:#1f5aa6;box-shadow:inset 4px 0 0 #c6a14d}
.whoopt.other{grid-column:1/-1}
/* 1.8.1: two-step checklist, soft red for anything new, red count badges in the department menu */
.flowcard .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1000px){.flowcard .flow{grid-template-columns:1fr}}
.navcol .badge.red{background:linear-gradient(180deg,#ef4b4b,#c8252f);color:#fff;font-weight:800;min-width:22px;height:22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 7px;box-shadow:0 0 0 2px rgba(255,255,255,.15),0 4px 10px -3px rgba(200,37,47,.7)}
.redcount{display:inline-flex;align-items:center;margin-left:10px;vertical-align:middle;background:linear-gradient(180deg,#ef4b4b,#c8252f);color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em;border-radius:999px;padding:3px 10px;box-shadow:0 4px 10px -4px rgba(200,37,47,.8)}
.spot.hot,.card .spot.hot{background:linear-gradient(180deg,#fff7f7 0%,#fde6e6 100%)!important;border:1px solid #f0b9b9!important;border-left:6px solid #d23a44!important;box-shadow:0 12px 26px -18px rgba(150,20,30,.55)!important;color:#4a1016}
.spot.hot strong{color:#7a1520!important}
.spot.hot .kick{color:#a31f2b!important;display:flex;align-items:center;gap:8px}
.spot.hot .spotbody{color:#4a1f25}
.newpill{background:#d23a44;color:#fff;border-radius:999px;padding:2px 9px;font-size:11px;letter-spacing:.06em}
.hotbtn,.btn.hotbtn{background:linear-gradient(180deg,#e04450,#b8232e)!important;border-color:#a51d27!important;color:#fff!important}
.line.hot{background:linear-gradient(180deg,#fff7f7 0%,#fdeaea 100%);border:1px solid #f2c2c2;border-left:5px solid #d23a44;border-radius:10px;padding:12px 14px;margin:6px 0}
.line.hot strong{color:#7a1520!important}
.line.hot .btn2{background:linear-gradient(180deg,#e04450,#b8232e);border-color:#a51d27;color:#fff}
/* 1.8.2: title case menu labels; centred two-step checklist with a larger Step 1 */
.navcol .nav .tc{text-transform:capitalize}.navcol .nav .tc .lc{text-transform:none}
.flowcard .flow{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:stretch}
.flowstep{flex-direction:column;align-items:center;text-align:center;justify-content:center;padding:24px 22px}
.flowstep .body{display:flex;flex-direction:column;align-items:center}
.flowstep .body .row{justify-content:center}
.flowstep:first-child{padding:30px 26px}
.flowstep:first-child .num{flex:0 0 52px;width:52px;height:52px;font-size:22px}
.flowstep:first-child h3{font-size:24px}
.flowstep:first-child .kick{font-size:13px}
.flowstep:first-child .mut{font-size:16px}
@media (max-width:1000px){.flowcard .flow{grid-template-columns:1fr}}
.flowstep .num{flex:none!important;width:40px;height:40px}.flowstep:first-child .num{width:52px;height:52px}