:root{--bg:#f5f7fb;--sf:#ffffff;--sf2:#f1f4f9;--sf3:#e6ebf3;--bd:#dde3ec;--bd2:#c5cdd9;--tx:#1a2233;--tx2:#5a6378;--tx3:#8893a5;--ac:#3d6ee0;--ac2:#e4ecfb;--ac3:#bdd0f4;--su:#10a169;--subg:#dff5ea;--wn:#c97a04;--wnbg:#fdf3dc;--dn:#d63838;--dnbg:#fce0e0;--gd:#b88a04;--gdbg:#fdf3d2;--pu:#7c3aed;--pubg:#ece4fc;--tl:#0d8a7a;--tlbg:#dcf3ef;--r:10px;--rs:6px;--sh:0 2px 8px rgba(15,30,60,.06);--shl:0 8px 28px rgba(15,30,60,.12)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Sora',sans-serif;background:var(--bg);color:var(--tx);min-height:100vh;font-size:13px}
button,input,select,textarea{font-family:'Sora',sans-serif}
::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:2px}
.hidden{display:none!important}
#lp{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);background-image:radial-gradient(ellipse at 20% 50%,rgba(79,142,247,.08),transparent 50%)}
.lw{width:420px;padding:0 16px}.ll{text-align:center;margin-bottom:24px}
.li{width:62px;height:62px;background:linear-gradient(135deg,var(--ac),var(--pu));border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 12px;box-shadow:0 8px 32px rgba(79,142,247,.3);overflow:hidden}
.li img{width:100%;height:100%;object-fit:contain}.ll h1{font-size:20px;font-weight:700}.ll p{font-size:12px;color:var(--tx2);margin-top:3px}
.lc{background:var(--sf);border:1px solid var(--bd);border-radius:16px;padding:24px;box-shadow:var(--shl)}
.lsw{display:flex;gap:2px;background:var(--sf2);border-radius:6px;padding:3px}
.lb{padding:4px 9px;border-radius:4px;font-size:11px;font-weight:600;cursor:pointer;color:var(--tx3);border:none;background:none;font-family:'Sora',sans-serif}
.lb.act{background:var(--ac);color:#fff}
.dl{background:var(--bg);border-radius:8px;padding:11px;margin-top:14px;font-size:11px}
.dl .dt{font-weight:600;color:var(--tx2);margin-bottom:6px}
.dr{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px solid var(--bd);color:var(--tx3)}
.dr:last-child{border:none}.dr span:last-child{color:var(--ac);font-weight:500}
#app{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.ib{background:linear-gradient(90deg,#f97316,var(--gd));padding:7px 18px;display:flex;align-items:center;gap:10px;font-size:12px;font-weight:500;color:#000;flex-shrink:0}
#ai{display:flex;flex:1;overflow:hidden}
#sb{width:220px;background:var(--sf2);border-right:1px solid var(--bd);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
#ma{flex:1;display:flex;flex-direction:column;overflow:hidden}
#tb{height:52px;background:var(--sf);border-bottom:1px solid var(--bd);display:flex;align-items:center;padding:0 18px;gap:9px;flex-shrink:0}
#ct{flex:1;overflow-y:auto;background:var(--bg)}
.sh{padding:14px;border-bottom:1px solid var(--bd)}.sl{display:flex;align-items:center;gap:9px}
.si{width:32px;height:32px;background:linear-gradient(135deg,var(--ac),var(--pu));border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;overflow:hidden}
.si img{width:100%;height:100%;object-fit:contain}
.sst{font-size:11px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sss{font-size:9px;color:var(--tx3);margin-top:1px}
.su2{padding:10px 14px;border-bottom:1px solid var(--bd);cursor:pointer}.su2:hover{background:var(--sf2)}
.up{display:flex;align-items:center;gap:8px}
.ua{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;color:#fff}
.un{font-size:12px;font-weight:600;color:var(--tx)}.ur{font-size:10px;color:var(--tx3)}
.snv{padding:6px 0;flex:1}
.ns{padding:7px 14px 3px;font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--tx3)}
.ni{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:12px;font-weight:500;color:var(--tx2);cursor:pointer;transition:all .15s;border-left:2px solid transparent;margin:1px 0}
.ni:hover{background:var(--sf2);color:var(--tx)}.ni.act{background:var(--ac2);color:var(--ac);border-left-color:var(--ac)}
[dir=rtl] .ni{border-left:none;border-right:2px solid transparent}
[dir=rtl] .ni.act{border-right-color:var(--ac)}
.nx{font-size:14px;width:17px;text-align:center}
.nb2{margin-left:auto;background:var(--dn);color:#fff;font-size:9px;font-weight:700;padding:2px 5px;border-radius:10px}
.sft{padding:10px 14px;border-top:1px solid var(--bd)}
.lo{width:100%;padding:7px;background:var(--sf2);color:var(--tx2);border-radius:var(--rs);font-size:12px;font-weight:500;cursor:pointer;border:none;font-family:'Sora',sans-serif}
.lo:hover{background:var(--dnbg);color:var(--dn)}
.tbt{font-size:14px;font-weight:600}
.tbr{margin-left:auto;display:flex;align-items:center;gap:7px}
.tbg{background:var(--sf2);border:1px solid var(--bd);border-radius:6px;padding:4px 9px;font-size:11px;color:var(--tx2)}
.ld{width:7px;height:7px;background:var(--su);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.ep{position:fixed;top:20px;right:20px;z-index:2000;background:var(--gd);color:#000;border-radius:var(--r);padding:14px 18px;max-width:300px;box-shadow:var(--shl);animation:sli .3s ease}
.ept{font-weight:700;font-size:13px;margin-bottom:5px}
.epi{font-size:11px;padding:3px 0;border-bottom:1px solid rgba(0,0,0,.1)}.epi:last-child{border:none}
@keyframes sli{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:1}}
.pi{padding:18px 22px;max-width:1400px}
.card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:16px;box-shadow:var(--sh)}
.cg{display:grid;gap:13px}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr 1fr 1fr}.g4{grid-template-columns:1fr 1fr 1fr 1fr}
@media(max-width:900px){.g4{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr 1fr}}
.stat{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:15px;position:relative;overflow:hidden}
.stat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.stat.bl::before{background:linear-gradient(90deg,var(--ac),var(--pu))}.stat.gn::before{background:linear-gradient(90deg,var(--su),var(--tl))}
.stat.go::before{background:linear-gradient(90deg,var(--gd),var(--wn))}.stat.rd::before{background:linear-gradient(90deg,var(--dn),#f97316)}
.sl2{font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--tx3);margin-bottom:8px}
.sv{font-size:26px;font-weight:700;letter-spacing:-1px}.sb3{font-size:10px;color:var(--tx3);margin-top:4px}
.sic{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:26px;opacity:.12}
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:var(--rs);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s;border:none;white-space:nowrap;font-family:'Sora',sans-serif}
.bp{background:var(--ac);color:#fff}.bp:hover{background:#3d7de0}
.bs{background:var(--su);color:#000}.bs:hover{background:#28c387}
.bd3{background:var(--dn);color:#fff}.bd3:hover{background:#e05555}
.bg2{background:var(--sf2);color:var(--tx2);border:1px solid var(--bd)}.bg2:hover{background:var(--sf3);color:var(--tx)}
.bo{background:var(--gd);color:#000}.bo:hover{background:#deb535}
.bsm{padding:5px 11px;font-size:11px}.bxs{padding:3px 8px;font-size:10px}
.fg{margin-bottom:13px}
.fg label{display:block;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--tx3);margin-bottom:5px}.fg label:has(> input[type=checkbox]),.fg label:has(> input[type=radio]){text-transform:none;letter-spacing:0;font-size:12px;color:var(--tx);font-weight:500}
.fg input,.fg select,.fg textarea{width:100%;padding:9px 11px;background:var(--sf2);border:1px solid var(--bd);border-radius:var(--rs);color:var(--tx);font-size:13px;transition:border-color .15s}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--ac)}
.fg select option{background:var(--sf2);color:var(--tx)}
.fg textarea{resize:vertical;min-height:76px;line-height:1.5}
.fg input[type=file]{padding:7px}
.fr{display:grid;gap:11px}.f2{grid-template-columns:1fr 1fr}.f3{grid-template-columns:1fr 1fr 1fr}
.tw{overflow-x:auto;border-radius:var(--r);border:1px solid var(--bd)}
table{width:100%;border-collapse:collapse;font-size:12px}thead{background:var(--sf2)}
th{padding:9px 12px;text-align:left;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--tx3);border-bottom:1px solid var(--bd);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--bd);vertical-align:middle;color:var(--tx2)}
td strong{color:var(--tx)}tr:last-child td{border-bottom:none}tr:hover td{background:var(--sf2)}
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:600;white-space:nowrap}
.bbl{background:var(--ac2);color:var(--ac);border:1px solid var(--ac3)}.bgn{background:var(--subg);color:var(--su)}
.bgo{background:var(--gdbg);color:var(--gd)}.brd{background:var(--dnbg);color:var(--dn)}
.bpu{background:var(--pubg);color:var(--pu)}.btl{background:var(--tlbg);color:var(--tl)}.bgr{background:var(--sf3);color:var(--tx3)}
.mb{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.mo{background:var(--sf);border:1px solid var(--bd);border-radius:14px;width:100%;max-width:600px;max-height:88vh;overflow-y:auto;box-shadow:var(--shl)}
.ml{max-width:820px}
.mh{padding:17px 20px 13px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--sf);z-index:10;border-bottom:1px solid var(--bd)}
.mh h3{font-size:14px;font-weight:600}
.mc{font-size:18px;color:var(--tx3);cursor:pointer;width:27px;height:27px;display:flex;align-items:center;justify-content:center;border-radius:5px;border:none;background:none}
.mc:hover{background:var(--sf2);color:var(--tx)}
.mb2{padding:17px 20px}.mf{padding:13px 20px 18px;display:flex;gap:7px;justify-content:flex-end;border-top:1px solid var(--bd)}
#tr{position:fixed;bottom:18px;right:18px;z-index:9999;display:flex;flex-direction:column;gap:7px}
.toast{background:var(--sf);border:1px solid var(--bd);border-radius:7px;padding:10px 15px;font-size:12px;color:var(--tx);box-shadow:var(--shl);animation:ti .2s ease;display:flex;align-items:center;gap:7px;min-width:240px}
.toast.success{border-left:3px solid var(--su)}.toast.danger{border-left:3px solid var(--dn)}.toast.info{border-left:3px solid var(--ac)}
@keyframes ti{from{transform:translateX(28px);opacity:0}to{transform:translateX(0);opacity:1}}
.sh2{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.sh2 h3{font-size:13px;font-weight:600}
.tl2{padding-left:13px;border-left:2px solid var(--bd)}.tli{position:relative;padding:0 0 12px 16px}
.tld{position:absolute;left:-6px;top:4px;width:11px;height:11px;border-radius:50%;background:var(--ac);border:2px solid var(--bg)}
.tlm{font-size:10px;color:var(--tx3);margin-bottom:2px}.tlc{font-size:12px;color:var(--tx2)}
.prog{height:5px;background:var(--sf3);border-radius:3px;overflow:hidden}
.pf{height:100%;background:linear-gradient(90deg,var(--ac),var(--pu));border-radius:3px;transition:width .3s}
.al{padding:10px 13px;border-radius:var(--rs);font-size:12px;margin-bottom:12px;line-height:1.5}
.ai{background:var(--ac2);color:#1e4498;border:1px solid var(--ac3)}
.aw{background:var(--wnbg);color:#7a4d00;border:1px solid #e8c17a}
.ad{background:var(--dnbg);color:#a52424;border:1px solid #f0adad}
.ag{background:var(--subg);color:#0a6a47;border:1px solid #87d6b0}
.dv{height:1px;background:var(--bd);margin:14px 0}
code{font-family:'JetBrains Mono',monospace;background:var(--sf2);padding:2px 6px;border-radius:4px;font-size:11px;color:var(--ac)}
.tabs{display:flex;border-bottom:1px solid var(--bd);margin-bottom:13px}
.tab{padding:8px 14px;font-size:12px;font-weight:500;color:var(--tx3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tab.act{color:var(--ac);border-bottom-color:var(--ac)}
.emp{text-align:center;padding:32px 20px;color:var(--tx3)}.emp .ei{font-size:30px;margin-bottom:8px}.emp p{font-size:12px}
.sd{position:absolute;top:100%;left:0;right:0;background:var(--sf);border:1px solid var(--bd);border-radius:var(--rs);z-index:200;display:none;max-height:200px;overflow-y:auto;box-shadow:var(--sh)}
.sdi{padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--bd);font-size:12px}.sdi:last-child{border:none}.sdi:hover{background:var(--sf2)}
.tsw{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.sw{width:28px;height:28px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:all .15s}
.sw.act{border-color:var(--tx);transform:scale(1.18)}
.mono{font-family:'JetBrains Mono',monospace}
body.th-focus #sb{display:none!important}body.th-focus #tbth{display:inline-flex!important}
@media print{#sb,#tb,#tr,.no-print,.ib,.ep{display:none!important}#app{display:block}#ct{overflow:visible}body{background:#fff;color:#000}}

/* While the sign-in is being checked (see boot.js) */
html.sms-restoring #lp{visibility:hidden}
html.sms-restoring body::after{content:"";position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg,#f5f7fb);color:var(--tx2,#475569);font:600 15px Sora,Segoe UI,Arial,sans-serif;z-index:5000}

/* ═══ Phones: an app layout ═══════════════════════════════════
   On a narrow screen the side menu used to stay open and squeeze each page
   into a strip. Now the page takes the full width under a top bar; the menu
   slides in over it from the ☰ button (from the right in Arabic) and closes
   once something is chosen. Computers are not affected. */
#tbmenu{display:none}
#sbov{display:none}
@media (max-width:760px){
  html,body{overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}
  #ai{position:relative}
  #sb{position:fixed;top:0;bottom:0;left:0;width:min(84vw,300px);z-index:3001;transform:translateX(-105%);transition:transform .22s ease;box-shadow:0 0 28px rgba(0,0,0,.25);padding-top:env(safe-area-inset-top)}
  html[dir="rtl"] #sb{left:auto;right:0;transform:translateX(105%)}
  body.sb-open #sb{transform:none}
  body.sb-open #sbov{display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:3000}
  body.th-focus #sb{display:none!important}
  #ma{width:100%}
  #tb{height:auto;min-height:54px;padding:calc(6px + env(safe-area-inset-top)) 10px 6px;gap:8px;position:sticky;top:0;z-index:50}
  #tbmenu{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 40px;border:none;border-radius:10px;background:var(--sf2);color:var(--tx);font-size:21px;cursor:pointer}
  .tbt{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
  .tbr{gap:5px}
  .tbr .tbg,.tbr button[onclick="window.print()"],#tbdup{display:none!important}
  .tbr .lsw .lb{padding:5px 8px}
  .pi{padding:12px 12px calc(24px + env(safe-area-inset-bottom))}
  .g2,.g3{grid-template-columns:1fr}
  .g4{grid-template-columns:1fr 1fr}
  .ni{padding:12px 16px;font-size:14px}
  .mo{max-height:92vh;border-radius:16px 16px 12px 12px}
  .card{border-radius:12px}
  input,select,textarea{font-size:16px}  /* no zooming in when a box is tapped */
}

/* ═══ Buttons and clickable elements — one design system: claymorphism ═══
   Every button in the app uses these classes: .btn with .bp (primary),
   .bg2 (secondary), .bs (success), .bd3 (danger), .bo (warning), sized by
   .bsm / .bxs. Only how they look is set here; what they do is unchanged.
   Clay: soft, rounded and raised — a drop shadow outside, a light edge on the
   top left and a shade on the bottom right inside — pressed in when clicked.
   The primary colour follows the theme chosen in the app (--ac). */
:root{
  --btn-r:14px;--btn-r-s:12px;--btn-ease:cubic-bezier(.2,.7,.3,1);
  --ring:0 0 0 3px rgba(61,110,224,.32);--ring:0 0 0 3px color-mix(in srgb,var(--ac) 32%,transparent);
  --clay-hi:inset 2px 3px 5px rgba(255,255,255,.65);
  --clay-lo:inset -3px -4px 7px rgba(30,41,82,.12);
  --clay-out:5px 7px 14px rgba(30,41,82,.14),-3px -3px 8px rgba(255,255,255,.9);
  --clay-out-up:8px 11px 20px rgba(30,41,82,.18),-4px -4px 10px rgba(255,255,255,.95);
  --clay-press:inset 3px 4px 8px rgba(30,41,82,.18),inset -2px -2px 5px rgba(255,255,255,.6)
}
.btn{position:relative;justify-content:center;gap:6px;padding:9px 17px;border-radius:var(--btn-r);font-weight:700;letter-spacing:.1px;line-height:1.2;border:none!important;
  box-shadow:var(--clay-out),var(--clay-hi),var(--clay-lo);
  transition:transform .2s var(--btn-ease),box-shadow .2s var(--btn-ease),background .2s ease,color .2s ease,opacity .2s ease,filter .2s ease;-webkit-user-select:none;user-select:none}
.btn:hover{transform:translateY(-2px);box-shadow:var(--clay-out-up),var(--clay-hi),var(--clay-lo)}
.btn:active{transform:translateY(1px) scale(.98);box-shadow:var(--clay-press)!important;transition-duration:.08s}
.btn:focus-visible{outline:2px solid transparent;box-shadow:var(--ring),var(--clay-out),var(--clay-hi),var(--clay-lo)}
.bsm{padding:7px 13px;font-size:11px;border-radius:var(--btn-r-s)}
.bxs{padding:5px 10px;font-size:10.5px;border-radius:10px;gap:4px}
/* Primary: the theme colour, deepening to indigo — raised and glossy */
.bp{background:var(--ac);background:linear-gradient(145deg,color-mix(in srgb,var(--ac) 82%,#fff) 0%,color-mix(in srgb,var(--ac) 66%,#4338ca) 100%);color:#fff;
  box-shadow:5px 7px 14px rgba(61,110,224,.35),-3px -3px 8px rgba(255,255,255,.9),inset 2px 3px 6px rgba(255,255,255,.4),inset -3px -4px 8px rgba(20,24,90,.28);
  box-shadow:5px 7px 14px color-mix(in srgb,var(--ac) 38%,transparent),-3px -3px 8px rgba(255,255,255,.9),inset 2px 3px 6px rgba(255,255,255,.4),inset -3px -4px 8px rgba(20,24,90,.28)}
.bp:hover{box-shadow:8px 11px 20px color-mix(in srgb,var(--ac) 45%,transparent),-4px -4px 10px rgba(255,255,255,.95),inset 2px 3px 6px rgba(255,255,255,.45),inset -3px -4px 8px rgba(20,24,90,.28)}
.bp:active{box-shadow:inset 3px 4px 9px rgba(20,24,90,.35),inset -2px -2px 5px rgba(255,255,255,.3)!important}
/* Secondary: soft white clay, navy text */
.bg2{background:linear-gradient(145deg,#fbfcfe 0%,#e4e9f2 100%);color:#1e293b;box-shadow:4px 6px 12px rgba(30,41,82,.16),-3px -3px 8px rgba(255,255,255,.9),inset 2px 3px 5px rgba(255,255,255,.9),inset -3px -4px 7px rgba(30,41,82,.13)}
.bg2:hover{color:#0f172a;box-shadow:7px 10px 18px rgba(30,41,82,.2),-4px -4px 10px rgba(255,255,255,.95),inset 2px 3px 5px rgba(255,255,255,.9),inset -3px -4px 7px rgba(30,41,82,.13)}
/* Success: Save, Approve, Confirm, Complete — mint clay */
.bs{background:linear-gradient(145deg,#bbf7d0 0%,#86efac 100%);color:#065f46;
  box-shadow:5px 7px 14px rgba(22,163,74,.28),-3px -3px 8px rgba(255,255,255,.9),inset 2px 3px 6px rgba(255,255,255,.7),inset -3px -4px 8px rgba(6,95,70,.18)}
.bs:hover{color:#064e3b;box-shadow:8px 11px 20px rgba(22,163,74,.34),-4px -4px 10px rgba(255,255,255,.95),inset 2px 3px 6px rgba(255,255,255,.7),inset -3px -4px 8px rgba(6,95,70,.18)}
/* Danger: Delete, Reject, Remove — soft rose clay */
.bd3{background:linear-gradient(145deg,#ffe4e6 0%,#fecdd3 100%);color:#9f1239;
  box-shadow:5px 7px 14px rgba(225,29,72,.2),-3px -3px 8px rgba(255,255,255,.9),inset 2px 3px 6px rgba(255,255,255,.75),inset -3px -4px 8px rgba(159,18,57,.14)}
.bd3:hover{background:linear-gradient(145deg,#fecdd3 0%,#fda4af 100%);color:#881337;box-shadow:8px 11px 20px rgba(225,29,72,.28),-4px -4px 10px rgba(255,255,255,.95),inset 2px 3px 6px rgba(255,255,255,.7),inset -3px -4px 8px rgba(159,18,57,.16)}
/* Warning — butter clay */
.bo{background:linear-gradient(145deg,#fef3c7 0%,#fde68a 100%);color:#78350f;
  box-shadow:5px 7px 14px rgba(217,119,6,.22),-3px -3px 8px rgba(255,255,255,.9),inset 2px 3px 6px rgba(255,255,255,.75),inset -3px -4px 8px rgba(120,53,15,.14)}
.btn.bgo{background:linear-gradient(145deg,#fdf3d2,#f2dc8f);color:#7a5a03}.btn.bgn{background:linear-gradient(145deg,#dff5ea,#a7e2c4);color:#065f46}
/* Disabled: flat and faded, clearly off */
.btn:disabled,.btn[disabled],.btn.disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:inset 1px 1px 3px rgba(30,41,82,.1)!important;filter:saturate(.3)}
/* Busy while the server answers */
.btn.is-loading{cursor:progress}
.btn.is-loading::before{content:'';width:12px;height:12px;flex:0 0 12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:btnspin .7s linear infinite}
@keyframes btnspin{to{transform:rotate(360deg)}}
/* Icon buttons: a rounded clay square */
.btn.btn-ic{padding:0;width:34px;height:34px;gap:0;border-radius:12px}
.btn.bsm.btn-ic{width:30px;height:30px;border-radius:11px}
.btn.bxs.btn-ic{width:27px;height:27px;border-radius:9px}
.btn .ui-ic{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn.bxs .ui-ic{width:13px;height:13px}
.btn.btn-ic.bg2:hover{background:linear-gradient(145deg,#ffffff,var(--ac2));color:var(--ac)}
.btn.btn-ic.is-loading::before{position:absolute}.btn.btn-ic.is-loading .ui-ic{opacity:0}
/* Every other button: smooth, with a focus ring */
button{transition:background .15s ease,box-shadow .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}
button:focus-visible,[role=button]:focus-visible,.ni:focus-visible,.tab:focus-visible{outline:2px solid transparent;box-shadow:var(--ring)}
button:disabled{cursor:not-allowed}
/* The close button on a window: a small clay square */
.mc{border-radius:11px;background:linear-gradient(145deg,#ffffff,#eef2f9);box-shadow:3px 4px 9px rgba(30,41,82,.12),-2px -2px 6px rgba(255,255,255,.9),var(--clay-hi),var(--clay-lo);transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.mc .ui-ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.mc:hover{background:linear-gradient(145deg,#ffe4e6,#fecdd3);color:#9f1239}
.mc:active{box-shadow:var(--clay-press)}
/* Language switch and sign-out */
.lsw{border-radius:12px;box-shadow:inset 2px 2px 5px rgba(30,41,82,.1),inset -2px -2px 5px rgba(255,255,255,.8)}
.lb{border-radius:9px;transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.lb:hover{color:var(--tx)}
.lb.act{background:linear-gradient(145deg,color-mix(in srgb,var(--ac) 82%,#fff),color-mix(in srgb,var(--ac) 66%,#4338ca));box-shadow:2px 3px 7px color-mix(in srgb,var(--ac) 40%,transparent),inset 1px 2px 3px rgba(255,255,255,.4),inset -2px -2px 4px rgba(20,24,90,.25)}
.lo{border-radius:13px;border:none;background:linear-gradient(145deg,#ffffff,#eef2f9);font-weight:700;box-shadow:var(--clay-out),var(--clay-hi),var(--clay-lo);transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.lo:hover{background:linear-gradient(145deg,#ffe4e6,#fecdd3);color:#9f1239}
.lo:active{box-shadow:var(--clay-press)}
/* Tabs */
.tab{transition:color .15s ease,border-color .15s ease}.tab:hover{color:var(--tx)}
.tab.act{font-weight:600}

/* ═══ Side menu ═══ */
.ni{position:relative;margin:3px 10px;padding:8px 12px;border-left:none!important;border-right:none!important;border-radius:14px;transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.ni:hover{background:linear-gradient(145deg,#ffffff,#f1f4fa);color:var(--tx);box-shadow:3px 4px 10px rgba(30,41,82,.1),-2px -2px 6px rgba(255,255,255,.9),var(--clay-hi)}
.ni.act{background:linear-gradient(145deg,#ffffff 0%,var(--ac2) 100%);color:var(--ac);font-weight:700;
  box-shadow:4px 6px 14px rgba(30,41,82,.13),-3px -3px 8px rgba(255,255,255,.95),inset 2px 3px 5px rgba(255,255,255,.8),inset -3px -4px 7px color-mix(in srgb,var(--ac) 18%,transparent)}
.ni.act::before{content:'';position:absolute;left:-10px;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--ac);box-shadow:1px 0 4px color-mix(in srgb,var(--ac) 50%,transparent)}
[dir=rtl] .ni.act::before{left:auto;right:-10px;border-radius:4px 0 0 4px}
.ni .nx{transition:transform .18s ease}.ni:hover .nx{transform:scale(1.1)}
.nb2{border-radius:999px;padding:2px 6px;box-shadow:1px 2px 4px rgba(214,56,56,.35),inset 1px 1px 2px rgba(255,255,255,.4)}
#nav-q{border:none!important;border-radius:12px!important;background:linear-gradient(145deg,#eef2f9,#ffffff)!important;box-shadow:inset 2px 3px 6px rgba(30,41,82,.1),inset -2px -2px 5px rgba(255,255,255,.9)}
#nav-q:focus{outline:none;box-shadow:var(--ring),inset 2px 3px 6px rgba(30,41,82,.1)}
@media (max-width:760px){.ni{padding:12px 14px;margin:3px 10px}}

/* ═══ Top bar: status pills, dropdowns and dates — clay pills ═══ */
.tbg{border-radius:999px!important;background:linear-gradient(145deg,#ffffff,#eef2f9)!important;border:none!important;padding:3px 10px!important;font-weight:700;font-size:10.5px;color:var(--tx2);white-space:nowrap;gap:6px!important;
  box-shadow:3px 4px 9px rgba(30,41,82,.12),-2px -2px 6px rgba(255,255,255,.95),inset 1px 2px 3px rgba(255,255,255,.8),inset -2px -2px 4px rgba(30,41,82,.08)}
.tbg .ld{box-shadow:0 0 0 3px rgba(16,161,105,.18)}
/* the right of the top bar never runs off the page: it scrolls instead */
.tbr{min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px 0}.tbr::-webkit-scrollbar{display:none}
.tbr>*{flex-shrink:0}
#term-sel{max-width:170px!important;text-overflow:ellipsis}
.tbg select,#tb .tbg select{border:none!important;box-shadow:none!important;background-color:transparent!important;padding:2px 20px 2px 2px!important;background-position:right 2px center!important}
#syncdot{box-shadow:0 0 0 3px rgba(148,163,184,.18)}
#tb select,#tb input[type=date]{appearance:none;-webkit-appearance:none;border:none!important;border-radius:999px!important;background-color:#f7f9fd!important;color:var(--tx)!important;font-weight:700;font-size:11px!important;padding:4px 26px 4px 11px!important;cursor:pointer;box-shadow:3px 4px 9px rgba(30,41,82,.12),-2px -2px 6px rgba(255,255,255,.95),inset 1px 2px 3px rgba(255,255,255,.8),inset -2px -2px 4px rgba(30,41,82,.08);transition:border-color .15s ease,box-shadow .15s ease}
#tb select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 9px center!important}
#tb input[type=date]{padding-right:11px!important}
#tb select:hover,#tb input[type=date]:hover{background-color:#fff!important}
#tb select:focus,#tb input[type=date]:focus{outline:none;box-shadow:var(--ring),3px 4px 9px rgba(30,41,82,.12)}
/* Dropdowns and dates in forms */
.fg select{appearance:none;-webkit-appearance:none;padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
.fg select[multiple]{background-image:none;padding-right:11px}
.fg input:focus,.fg select:focus,.fg textarea:focus{box-shadow:var(--ring)}
.fg input,.fg select,.fg textarea{transition:border-color .15s ease,box-shadow .15s ease}
@media (prefers-reduced-motion:reduce){.btn,.ni,button{transition:none!important}.btn:hover,.btn:active{transform:none}.btn.is-loading::before{animation-duration:2s}}

/* ═══ Dashboard — bento ═══════════════════════════════════════
   Tiles of different sizes on a six-column grid, in the clay style of the
   buttons. The cards already on the dashboard, below the tiles, are given the
   same rounded tile look. */
#bn-dash{margin-bottom:16px}
.bn-hello{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.bn-hello h2{font-size:21px;font-weight:800;letter-spacing:-.5px}
.bn-hello p{color:var(--tx2);margin-top:3px;font-size:12px}
.bn-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:112px;grid-auto-flow:dense;gap:14px}
.bn-tile{position:relative;overflow:hidden;display:flex;flex-direction:column;background:var(--sf);border-radius:22px;padding:15px 17px;
  box-shadow:6px 8px 18px rgba(30,41,82,.11),-4px -4px 12px rgba(255,255,255,.9),inset 2px 3px 6px rgba(255,255,255,.8),inset -3px -4px 8px rgba(30,41,82,.06);
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease}
.bn-tile[role=button]{cursor:pointer}
.bn-tile[role=button]:hover{transform:translateY(-3px);box-shadow:9px 12px 24px rgba(30,41,82,.15),-4px -4px 12px rgba(255,255,255,.95),inset 2px 3px 6px rgba(255,255,255,.8),inset -3px -4px 8px rgba(30,41,82,.06)}
.bn-tile[role=button]:active{transform:translateY(0) scale(.99)}
.bn-tile:focus-visible{outline:2px solid transparent;box-shadow:var(--ring),6px 8px 18px rgba(30,41,82,.11)}
.bn-c1{grid-column:span 1}.bn-c2{grid-column:span 2}.bn-c3{grid-column:span 3}.bn-c4{grid-column:span 4}.bn-c5{grid-column:span 5}.bn-c6{grid-column:span 6}.bn-r2{grid-row:span 2}.bn-r3{grid-row:span 3}
.bn-h{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--tx3);padding-right:38px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bn-big{font-size:32px;font-weight:800;letter-spacing:-1.2px;margin-top:auto;line-height:1.05}
.bn-xl{font-size:46px}
.bn-sub{font-size:11px;color:var(--tx2);margin-top:3px}
.bn-emo{position:absolute;right:14px;top:11px;font-size:28px;filter:drop-shadow(2px 3px 3px rgba(0,0,0,.12))}
.bn-center{align-items:center}
.bn-empty{font-size:12px;color:var(--tx3);margin:auto;text-align:center}
/* coloured tiles */
.bn-hero{background:linear-gradient(145deg,color-mix(in srgb,var(--ac) 78%,#fff) 0%,color-mix(in srgb,var(--ac) 62%,#4338ca) 100%);color:#fff;
  box-shadow:8px 12px 24px color-mix(in srgb,var(--ac) 32%,transparent),-4px -4px 12px rgba(255,255,255,.85),inset 2px 3px 8px rgba(255,255,255,.3),inset -4px -5px 10px rgba(20,24,90,.3)}
.bn-hero .bn-h{color:rgba(255,255,255,.78)}.bn-hero .bn-sub{color:rgba(255,255,255,.88)}
.bn-chip{display:inline-flex;padding:7px 13px;border-radius:12px;font-weight:700;font-size:11.5px;background:rgba(255,255,255,.2);box-shadow:inset 1px 2px 4px rgba(255,255,255,.35),inset -2px -2px 4px rgba(0,0,0,.12)}
.bn-mint{background:linear-gradient(145deg,#ecfdf5,#bbf7d0)}.bn-mint .bn-big{color:#065f46}
.bn-rose{background:linear-gradient(145deg,#fff1f2,#fecdd3)}.bn-rose .bn-big{color:#9f1239}
.bn-butter{background:linear-gradient(145deg,#fefce8,#fde68a)}.bn-butter .bn-big{color:#78350f}
.bn-lilac{background:linear-gradient(145deg,#faf5ff,#e9d5ff)}.bn-lilac .bn-big{color:#6b21a8}
/* the week's bars */
.bn-bars{display:flex;align-items:stretch;gap:10px;flex:1;margin-top:10px;min-height:0}
.bn-barw{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;min-width:0}
.bn-bv{font-size:10px;font-weight:700;color:var(--tx2);text-align:center;margin-bottom:3px}
.bn-bar{border-radius:9px 9px 5px 5px;background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 55%,#fff),var(--ac));box-shadow:inset 2px 2px 4px rgba(255,255,255,.4);max-height:100%}
.bn-bar.bn-lo{background:linear-gradient(180deg,#fda4af,#e11d48)}
.bn-bar.bn-none{background:var(--sf3);box-shadow:none}
.bn-bd{font-size:10px;color:var(--tx3);text-align:center;margin-top:5px}.bn-bd.bn-now{color:var(--ac);font-weight:800}
/* the ring */
.bn-ring{width:112px;height:112px;border-radius:50%;margin:auto;display:flex;align-items:center;justify-content:center;box-shadow:inset 3px 3px 8px rgba(30,41,82,.12)}
.bn-ring b{width:80px;height:80px;border-radius:50%;background:var(--sf);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:21px;font-weight:800;box-shadow:3px 4px 10px rgba(30,41,82,.1)}
.bn-ring b small{font-size:8.5px;color:var(--tx3);font-weight:600;text-align:center;line-height:1.2;padding:0 6px}
/* lists */
.bn-list{margin-top:10px;display:flex;flex-direction:column;gap:7px;overflow:hidden;flex:1}
.bn-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:13px;background:var(--sf2);box-shadow:inset 1px 1px 3px rgba(255,255,255,.9),inset -1px -2px 3px rgba(30,41,82,.06)}
.bn-t{flex:1;min-width:0}.bn-t div{font-weight:600;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tx)}.bn-t span{font-size:10px;color:var(--tx3);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bn-tag{font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap}
.bn-tg{background:#dcfce7;color:#065f46}.bn-tb{background:var(--ac2);color:var(--ac)}
/* quick actions */
.bn-qa{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:10px;flex:1}
.bn-qa .btn{flex-direction:column;gap:3px;font-size:10.5px;border-radius:16px;padding:8px 5px;white-space:normal;text-align:center;line-height:1.2;height:100%}
.bn-qa .btn i{font-style:normal;font-size:19px}
/* the day's timetable */
.bn-tt{display:grid;gap:6px;margin-top:10px;flex:1}
.bn-tt div{border-radius:11px;background:var(--sf2);font-size:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;color:var(--tx2);text-align:center;padding:3px;box-shadow:inset 1px 1px 2px rgba(255,255,255,.9),inset -1px -2px 3px rgba(30,41,82,.05)}
.bn-tt div span{font-size:8.5px;font-weight:600;opacity:.85;line-height:1.2;overflow:hidden;max-height:3.6em}
.bn-tt div.on{background:linear-gradient(145deg,color-mix(in srgb,var(--ac) 22%,#fff),color-mix(in srgb,var(--ac) 38%,#fff));color:color-mix(in srgb,var(--ac) 70%,#000)}
.bn-tt div.free{color:var(--tx3);font-weight:600}
/* what was on the dashboard before, as rounded tiles */
#pc.bn-on>.card,#pc.bn-on .cg>.card,#pc.bn-on .stat{border-radius:22px;border:none;box-shadow:6px 8px 18px rgba(30,41,82,.1),-4px -4px 12px rgba(255,255,255,.9),inset 2px 3px 6px rgba(255,255,255,.8),inset -3px -4px 8px rgba(30,41,82,.05)}
#pc.bn-on .stat::before{left:18px;right:18px;border-radius:0 0 3px 3px;height:3px}
#pc.bn-on .cg{gap:14px}
@media (max-width:1100px){.bn-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.bn-c4,.bn-c5,.bn-c6{grid-column:span 4}.bn-c3{grid-column:span 2}.bn-r3{grid-row:span 2}}
@media (max-width:760px){.bn-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(104px,auto)}.bn-c2,.bn-c3,.bn-c4,.bn-c5,.bn-c6{grid-column:span 2}.bn-r2,.bn-r3{grid-row:auto}.bn-r2{min-height:200px}.bn-xl{font-size:38px}.bn-qa{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media print{#bn-dash{display:none}}

/* ═══ Side menu in vibrant colours ═══════════════════════════════
   Each tab has a colour of its own (the colours repeat down the list): its
   icon sits in a little clay tile of that colour, hovering tints the row with
   it, and the page that is open is filled with it. */
.snv .ni{--nc:#3b82f6}
.snv .ni:nth-child(10n+1){--nc:#3b82f6}
.snv .ni:nth-child(10n+2){--nc:#8b5cf6}
.snv .ni:nth-child(10n+3){--nc:#ec4899}
.snv .ni:nth-child(10n+4){--nc:#f97316}
.snv .ni:nth-child(10n+5){--nc:#10b981}
.snv .ni:nth-child(10n+6){--nc:#06b6d4}
.snv .ni:nth-child(10n+7){--nc:#f59e0b}
.snv .ni:nth-child(10n+8){--nc:#f43f5e}
.snv .ni:nth-child(10n+9){--nc:#6366f1}
.snv .ni:nth-child(10n+10){--nc:#14b8a6}
.snv .ni .nx{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 28px;border-radius:9px;font-size:14px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--nc) 78%,#fff) 0%,var(--nc) 55%,color-mix(in srgb,var(--nc) 80%,#1e1b4b) 100%);
  box-shadow:2px 4px 8px color-mix(in srgb,var(--nc) 45%,transparent),inset 1px 2px 3px rgba(255,255,255,.45),inset -2px -2px 4px rgba(0,0,0,.18)}
.snv .ni:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--nc) 14%,#fff),color-mix(in srgb,var(--nc) 6%,#fff));color:color-mix(in srgb,var(--nc) 75%,#000);
  box-shadow:3px 4px 10px color-mix(in srgb,var(--nc) 16%,transparent),inset 1px 2px 3px rgba(255,255,255,.8)}
.snv .ni.act{background:linear-gradient(135deg,var(--nc) 0%,color-mix(in srgb,var(--nc) 68%,#312e81) 100%);color:#fff;font-weight:700;
  box-shadow:5px 7px 16px color-mix(in srgb,var(--nc) 38%,transparent),-2px -2px 6px rgba(255,255,255,.9),inset 2px 3px 6px rgba(255,255,255,.3),inset -3px -4px 8px rgba(20,24,90,.25)}
.snv .ni.act .nx{background:rgba(255,255,255,.26);box-shadow:inset 1px 2px 3px rgba(255,255,255,.35),inset -1px -2px 3px rgba(0,0,0,.12)}
.snv .ni.act::before{background:var(--nc);box-shadow:1px 0 5px color-mix(in srgb,var(--nc) 60%,transparent)}
.snv .ni.vo .nx{opacity:.6}
.snv .ni .nb2{background:linear-gradient(135deg,#f43f5e,#e11d48)}
.snv .ni.act .nb2{background:#fff;color:#e11d48}
.snv .ns{color:var(--tx3)}

/* ═══ The first page of every member of staff (the portal): vibrant icons ═══
   Each tile's icon sits in a glossy clay square of its own colour, the same
   colours as the side menu; the tile lifts a little and takes a tint of its
   colour under the pointer. */
.th-tile{--nc:#3b82f6;border:none!important;border-radius:20px!important;
  box-shadow:6px 8px 18px rgba(30,41,82,.1),-4px -4px 12px rgba(255,255,255,.9),inset 2px 3px 6px rgba(255,255,255,.8),inset -3px -4px 8px rgba(30,41,82,.05)!important;
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease,background .2s ease}
.th-tile:nth-of-type(10n+1){--nc:#3b82f6}
.th-tile:nth-of-type(10n+2){--nc:#8b5cf6}
.th-tile:nth-of-type(10n+3){--nc:#ec4899}
.th-tile:nth-of-type(10n+4){--nc:#f97316}
.th-tile:nth-of-type(10n+5){--nc:#10b981}
.th-tile:nth-of-type(10n+6){--nc:#06b6d4}
.th-tile:nth-of-type(10n+7){--nc:#f59e0b}
.th-tile:nth-of-type(10n+8){--nc:#f43f5e}
.th-tile:nth-of-type(10n+9){--nc:#6366f1}
.th-tile:nth-of-type(10n+10){--nc:#14b8a6}
.th-tile .th-ic{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;flex:0 0 52px;border-radius:16px;font-size:26px!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--nc) 78%,#fff) 0%,var(--nc) 55%,color-mix(in srgb,var(--nc) 80%,#1e1b4b) 100%);
  box-shadow:3px 5px 12px color-mix(in srgb,var(--nc) 45%,transparent),inset 2px 3px 4px rgba(255,255,255,.45),inset -3px -3px 6px rgba(0,0,0,.18);
  transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.th-tile:not([disabled]):hover{transform:translateY(-3px);background:linear-gradient(90deg,color-mix(in srgb,var(--nc) 10%,#fff),#fff 70%)!important;
  box-shadow:9px 12px 24px color-mix(in srgb,var(--nc) 20%,rgba(30,41,82,.12)),-4px -4px 12px rgba(255,255,255,.95),inset 2px 3px 6px rgba(255,255,255,.8)!important}
.th-tile:not([disabled]):hover .th-ic{transform:scale(1.06) rotate(-3deg)}
.th-tile:not([disabled]):active{transform:translateY(0) scale(.99)}
.th-tile[disabled] .th-ic{filter:saturate(.25);opacity:.7}
@media (prefers-reduced-motion:reduce){.th-tile,.th-tile .th-ic{transition:none}.th-tile:hover,.th-tile:hover .th-ic{transform:none}}

/* The landing page of every member of staff: the dashboard tiles above its own, four across */
.bn-portal{margin:4px 0 14px}
.bn-portal .bn-hello h2{font-size:18px}
.bn-portal .bn-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.bn-portal .bn-c4,.bn-portal .bn-c5,.bn-portal .bn-c6{grid-column:span 4}.bn-portal .bn-c3{grid-column:span 2}.bn-portal .bn-r3{grid-row:span 2}
@media (max-width:760px){.bn-portal .bn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bn-portal .bn-c2,.bn-portal .bn-c3,.bn-portal .bn-c4,.bn-portal .bn-c5,.bn-portal .bn-c6{grid-column:span 2}.bn-portal .bn-r2,.bn-portal .bn-r3{grid-row:auto}}
/* Printing this page: the margin inside the page, so the browser writes no address or date in it */
@media print{@page{margin:0}body{padding:10mm!important;margin:0!important}}