/* Adroit Staff. Phone first, light on data, system fonts only. */
:root{--bg:#f4f5f7;--card:#fff;--line2:#c9ced8;--mine:#d9fdd3;--cbg:#efeae2;--ink:#1b2130;--muted:#5d6577;--line:#e2e5eb;--soft:#eef1f6;--red:#b42318;--green:#1e7b45;--amber:#9a6200;--purple:#6941c6;--blue:#1d5fb8;--radius:12px;--shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--brand)}
h1{font-size:1.45rem;line-height:1.25;margin:0}
h2{font-size:1.02rem;margin:0 0 .75rem}
h3{font-size:.95rem;margin:0 0 .5rem}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{width:100%;padding:.55rem .65rem;border:1px solid var(--line2);border-radius:8px;background:var(--card);min-height:42px}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible,td.editable:focus{outline:3px solid color-mix(in srgb,var(--brand) 35%,transparent);outline-offset:1px;border-color:var(--brand)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hide{display:none!important}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.nowrap{white-space:nowrap}
.late{color:var(--red);font-weight:600}
.no-scroll{overflow:hidden}

/* Shell */
.top{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;padding:.55rem 1rem;background:var(--brand);color:#fff;min-height:56px}
.brand{display:flex;align-items:center;gap:.5rem;color:#fff;text-decoration:none;font-weight:700;letter-spacing:.2px}
.brand img{height:30px;width:auto;background:var(--card);border-radius:6px;padding:2px}
.env{background:var(--accent);color:#1b1b1b;font-size:.72rem;font-weight:700;padding:.1rem .45rem;border-radius:99px;text-transform:uppercase;letter-spacing:.5px}
.top-right{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.acting{display:flex;flex-direction:row;align-items:center;gap:.5rem;order:3;flex:1 1 100%;min-width:0}
.acting-label{color:rgba(255,255,255,.8);font-size:.8rem;white-space:nowrap}
.role-select{min-height:38px;padding:.2rem .5rem;background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.35);flex:1 1 auto;min-width:0;max-width:none;width:auto}
.role-select option{color:var(--ink)}
.acting-one{font-size:.85rem;opacity:.9;order:2}
.top-right{order:2}
@media (min-width:700px){.top{flex-wrap:nowrap}.acting{order:1;flex:0 1 auto;margin-left:auto}.role-select{flex:0 1 auto;max-width:300px}.top-right{order:2;margin-left:0}.acting-one{order:1;margin-left:auto}}
.icon-btn{background:none;border:0;cursor:pointer;padding:.35rem;border-radius:8px;line-height:1;font-size:1.3rem;color:inherit;min-width:36px;min-height:36px}
.bell{position:relative;color:#fff}
.bell-n{position:absolute;top:0;right:0;background:var(--accent);color:#1b1b1b;font-size:.68rem;font-weight:700;border-radius:99px;padding:0 .35rem;min-width:18px}
.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.body{display:flex;min-height:calc(100vh - 56px)}
.side{display:none}
main{flex:1;min-width:0;padding:1rem 1rem 6rem;max-width:1180px;margin:0 auto;width:100%}
main:focus{outline:none}
.bottom{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.bottom a,.bottom button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:.45rem .2rem;font-size:.7rem;color:var(--muted);text-decoration:none;background:none;border:0;cursor:pointer}
.bottom a[aria-current]{color:var(--brand);font-weight:700}
.more-list a{display:flex;align-items:center;gap:.75rem;padding:.8rem .4rem;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
@media (min-width:900px){
  .side{display:flex;flex-direction:column;width:220px;flex:none;background:var(--card);border-right:1px solid var(--line);padding:1rem .6rem;position:sticky;top:56px;height:calc(100vh - 56px)}
  .side a{display:flex;align-items:center;gap:.65rem;padding:.55rem .7rem;border-radius:8px;color:var(--ink);text-decoration:none;margin-bottom:2px}
  .side a:hover{background:var(--soft)}
  .side a[aria-current]{background:color-mix(in srgb,var(--brand) 10%,#fff);color:var(--brand);font-weight:700}
  .side-foot{margin-top:auto;border-top:1px solid var(--line);padding:.8rem .7rem 0;font-size:.85rem}
  .side-foot .who{font-weight:600;margin-bottom:.25rem}
  .side-foot a{padding:0}
  .bottom{display:none}
  main{padding:1.5rem 1.75rem 3rem}
}

/* Page parts */
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.75rem;margin-bottom:1rem}
.page-head .sub{margin:.25rem 0 0;color:var(--muted)}
.head-actions,.btn-row,.actions-bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.actions-bar{margin:0 0 1rem}
.crumbs{font-size:.85rem;color:var(--muted);margin-bottom:.4rem}
.crumbs a{color:var(--muted)}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem;margin-bottom:1rem}
.card.flush{padding:1rem 0 0}
.card.flush>h2{padding:0 1rem}
.card.private{border-left:4px solid var(--purple)}
.detail-grid{display:grid;gap:0 1rem}
.report-grid{display:grid;gap:0 1rem}
@media (min-width:900px){.detail-grid{grid-template-columns:1fr 1fr}.detail-grid>.card:nth-child(2):last-child{grid-column:auto}.report-grid{grid-template-columns:1fr 1fr 1fr}}
.empty{padding:1.25rem 1rem;color:var(--muted);text-align:center}
.loading{padding:2rem;color:var(--muted);text-align:center}
.loading:after{content:"";display:inline-block;width:14px;height:14px;margin-left:.5rem;border:2px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
.error-box{background:#fdecec;color:var(--red);padding:1rem;border-radius:var(--radius)}
.notice{background:#fff7e6;border:1px solid #f5d7a1;color:#5b3b00;padding:.75rem 1rem;border-radius:10px;margin-bottom:1rem}
.notice.purple{background:#f4f0ff;border-color:#d9ccfb;color:#3e1f8a}
.notice.green{background:#ebf7ef;border-color:#bfe3cb;color:#14532d}
.notice.red{background:#fdecec;border-color:#f3c0bc;color:#7a1712}
.desc{white-space:pre-wrap;margin-top:.75rem}
.plain{list-style:none;margin:0;padding:0}
.plain li{padding:.45rem 0;border-bottom:1px solid var(--line)}
.plain li:last-child{border-bottom:0}

/* Buttons and tags */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-height:40px;padding:.45rem .9rem;border-radius:8px;border:1px solid var(--line2);background:var(--card);color:var(--ink);text-decoration:none;cursor:pointer;font-weight:600;font-size:.92rem;white-space:nowrap}
.btn:hover{background:var(--soft)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{filter:brightness(1.08)}
.btn.small{min-height:32px;padding:.25rem .65rem;font-size:.82rem}
.btn.ghost{border-color:transparent}
.btn.danger-text{color:var(--red)}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn.danger[disabled]{opacity:.5}
.as-groups{align-items:center}
.as-groups-wrap{margin:0 0 .6rem}
.as-groups-wrap>summary{cursor:pointer;font-weight:600;padding:.4rem 0;color:var(--ink)}
.as-groups-wrap[open]>summary{margin-bottom:.4rem}
.as-groups .btn{white-space:nowrap}
.btn[disabled]{opacity:.55;cursor:default}
.tag{display:inline-block;font-size:.72rem;font-weight:700;padding:.12rem .5rem;border-radius:99px;background:var(--soft);color:var(--muted);vertical-align:1px;white-space:nowrap;margin-right:.25rem}
.tag.blue{background:#e8f0fc;color:var(--blue)}.tag.green{background:#e6f4ec;color:var(--green)}.tag.amber{background:#fff3dc;color:var(--amber)}
.tag.red{background:#fde8e6;color:var(--red)}.tag.red-soft{background:#fdf0ef;color:#a2382d}.tag.purple{background:#f1ecfe;color:var(--purple)}.tag.grey{background:var(--soft);color:#596172}
.tag.demo{background:#1b2130;color:#fff}
.ref{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem;color:var(--muted)}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.6rem;margin-bottom:1rem}
.card .stats{margin-bottom:0}
.stat{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem;text-decoration:none;color:var(--ink)}
a.stat:hover{border-color:var(--brand)}
.stat-n{font-size:1.45rem;font-weight:700;line-height:1.2}
.stat-l{font-size:.8rem;color:var(--muted)}
.stat.warn{border-color:#f0c36d;background:#fffaf0}
.stat.bad{border-color:#f0a39b;background:#fff5f4}

/* Lists */
.rows{display:flex;flex-direction:column}
.card>.rows,.card>div>.rows{margin:0}
.row-link{display:flex;gap:.75rem;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-top:1px solid var(--line);text-decoration:none;color:var(--ink);background:var(--card)}
main>.rows{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
a.row-link:hover{background:var(--soft)}
.row-link.overdue{box-shadow:inset 3px 0 0 var(--red)}
.row-link.cancelled .row-title{text-decoration:line-through;color:var(--muted)}
.row-main{min-width:0;flex:1}
.row-title{font-weight:600;overflow-wrap:anywhere}
.row-sub{display:flex;flex-wrap:wrap;gap:.25rem .75rem;font-size:.83rem;color:var(--muted);margin-top:.15rem}
.row-side{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem;text-align:right;flex:none}
.due{font-size:.8rem;color:var(--muted)}.due.late{color:var(--red);font-weight:700}
.tabs{display:flex;gap:.25rem;overflow-x:auto;margin-bottom:.75rem;border-bottom:1px solid var(--line);scrollbar-width:none}
.tab{background:none;border:0;padding:.6rem .8rem;cursor:pointer;color:var(--muted);font-weight:600;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-1px}
.tab.on{color:var(--brand);border-bottom-color:var(--brand)}
.count{background:var(--soft);border-radius:99px;font-size:.72rem;padding:0 .4rem;margin-left:.3rem}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}
.filters input{flex:2 1 220px}
.filters select{flex:1 1 150px;width:auto}
.week-nav{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1rem}
.week-nav select{width:auto;flex:1 1 180px}
.day-h{margin:1.1rem 0 .4rem;color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.4px}
.day-h.today{color:var(--brand)}
.pager{display:flex;align-items:center;gap:.5rem;justify-content:center;margin:1rem 0}

/* Spreadsheet grid */
.grid-wrap{overflow-x:auto;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-overflow-scrolling:touch}
.card .grid-wrap{box-shadow:none;border:1px solid var(--line)}
.grid{border-collapse:separate;border-spacing:0;width:100%;font-size:.88rem}
.grid th,.grid td{padding:.5rem .6rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;white-space:nowrap}
.grid thead th{position:sticky;top:0;background:var(--soft);font-size:.78rem;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);z-index:1}
.grid td:first-child,.grid th:first-child{position:sticky;left:0;background:inherit;z-index:1}
.grid thead th:first-child{z-index:2}
.grid tbody tr{background:var(--card)}
.grid tbody tr:hover{background:var(--soft)}
.grid tr.dup{background:#fffaf0}
.grid tr.quiet td{background:#fffaf0}
.grid .wide{min-width:180px;white-space:normal}
.grid .narrow{width:1%}
.th-btn{background:none;border:0;padding:0;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer}
td.editable{cursor:text}
td.editable:hover{box-shadow:inset 0 0 0 1px var(--line2)}
td.editing{padding:2px}
td.editing input,td.editing select{min-height:34px;padding:.3rem .45rem;border-radius:6px;min-width:120px}
td.saving{opacity:.5}
td.saved{background:#e6f4ec!important;transition:background .8s}
.cell-link{font-weight:600;text-decoration:none}
.cell-edit{margin-left:.4rem;font-size:.72rem;background:none;border:1px solid var(--line);border-radius:6px;padding:0 .35rem;cursor:pointer;color:var(--muted)}
.avail td{min-width:120px;white-space:normal}
.avail td.free{background:#f6fbf7}
.slot{font-size:.78rem;background:#e6f4ec;color:var(--green);border-radius:6px;padding:.1rem .35rem;margin-bottom:.2rem;display:block;text-decoration:none}
.slot.booked{background:#e8f0fc;color:var(--blue)}
.slot-add{display:inline-block;font-weight:700;text-decoration:none;padding:0 .4rem;border:1px dashed #9bb0d6;border-radius:6px}

/* Forms */
.form .field{margin-bottom:.85rem}
.form label,.field>label{display:block;font-weight:600;font-size:.88rem;margin-bottom:.25rem}
.hint{font-size:.8rem;color:var(--muted);margin-top:.2rem}
.form-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.5rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 .75rem}
.check{display:flex!important;gap:.5rem;align-items:center;font-weight:400!important;margin:.3rem 0}
.check input{width:20px;height:20px;min-height:0;flex:none}
fieldset.checks{border:0;padding:0;margin:0 0 .85rem}
fieldset.checks legend{font-weight:600;font-size:.88rem;margin-bottom:.25rem;padding:0}
.warn-box{background:#fff7e6;border:1px solid #f5d7a1;padding:.75rem 1rem;border-radius:10px;margin-bottom:.75rem}
.warn-box ul{margin:.4rem 0 0;padding-left:1.2rem}
.picker{position:relative}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.35rem}
.chip{display:inline-flex;align-items:center;gap:.25rem;background:var(--soft);border-radius:99px;padding:.15rem .25rem .15rem .6rem;font-size:.85rem}
.chip-x{border:0;background:none;cursor:pointer;font-size:1rem;line-height:1;padding:0 .3rem}
.pick-list{border:1px solid var(--line);border-radius:8px;margin-top:.25rem;background:var(--card);max-height:260px;overflow:auto}
.pick-list:empty{display:none}
.pick{display:block;width:100%;text-align:left;border:0;background:none;padding:.55rem .7rem;cursor:pointer;border-bottom:1px solid var(--line)}
.pick:hover{background:var(--soft)}
.pad{padding:.6rem}
.copy-row{display:flex;gap:.5rem}
.mat-row{display:grid;grid-template-columns:1fr 110px 40px;gap:.5rem;margin-bottom:.5rem;align-items:center}
.comment-box{display:flex;flex-direction:column;gap:.5rem;align-items:flex-end;margin-bottom:1rem}
.sticky-actions{position:sticky;bottom:70px;display:flex;justify-content:flex-end;gap:.5rem;padding:.6rem 0}
@media (min-width:900px){.sticky-actions{bottom:0}}
.avail-days{display:grid;gap:0 .75rem}
@media (min-width:700px){.avail-days{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.avail-days{grid-template-columns:repeat(3,1fr)}}
.slot-row{display:flex;align-items:center;gap:.4rem;margin-bottom:.4rem}
.slot-row input{flex:1}

/* Detail parts */
.dl{margin:0}
.dl-row{display:grid;grid-template-columns:140px 1fr;gap:.5rem;padding:.45rem 0;border-bottom:1px solid var(--line)}
.dl-row:last-child{border-bottom:0}
.dl dt{color:var(--muted);font-size:.85rem}
.dl dd{margin:0;overflow-wrap:anywhere}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{padding:.6rem 0 .6rem .9rem;border-left:2px solid var(--line);position:relative}
.timeline li:before{content:"";position:absolute;left:-5px;top:.95rem;width:8px;height:8px;border-radius:50%;background:var(--line2)}
.timeline li.comment:before{background:var(--brand)}
.timeline li.comment .tl-text{background:var(--soft);border-radius:8px;padding:.45rem .6rem;white-space:pre-wrap}
.tl-meta{font-size:.82rem}
.tl-text{margin-top:.15rem;overflow-wrap:anywhere}
.file-list{list-style:none;padding:0;margin:0 0 .75rem}
.file-list li{padding:.35rem 0}
.mail{background:var(--card);border-top:1px solid var(--line);padding:.7rem 1rem}
.mail summary{cursor:pointer}
.mail-body{white-space:pre-wrap;font:inherit;background:var(--soft);padding:.75rem;border-radius:8px}
.staff-row{align-items:flex-start}

/* Modal and toast */
.modal-back{position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.modal{background:var(--card);width:100%;max-height:92vh;overflow:auto;border-radius:16px 16px 0 0;padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom))}
@media (min-width:700px){.modal-back{align-items:center}.modal{max-width:540px;border-radius:16px}}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
.modal-head h2{margin:0}
.modal-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}
.notes .note{display:block;padding:.65rem .2rem;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.notes .note.unread{font-weight:600}
.notes .note-row{display:flex;align-items:flex-start;gap:.4rem;border-bottom:1px solid var(--line)}
.notes .note-row .note{flex:1;min-width:0;border-bottom:0}
.notes .note-x{flex:none;width:36px;height:36px;margin-top:.35rem;border:0;border-radius:8px;background:transparent;color:var(--muted,#666);font-size:1.3rem;line-height:1;cursor:pointer}
.notes .note-x:hover,.notes .note-x:focus-visible{background:var(--line);color:var(--ink)}
.toasts{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:.4rem;align-items:center;width:max-content;max-width:92vw}
.toast{transform:translateY(20px);opacity:0;background:#1b2130;color:#fff;padding:.65rem 1rem;border-radius:10px;transition:.25s;box-shadow:0 6px 20px rgba(0,0,0,.2)}
.toast.err{background:var(--red)}
.toast.show{opacity:1;transform:none}
@media (min-width:900px){.toasts{bottom:24px}}

/* Gate and boot */
.boot,.gate{max-width:420px;margin:12vh auto;text-align:center;padding:1.5rem}
.gate-logo{max-height:64px;margin-bottom:1rem}
.gate .btn{margin-top:.5rem}

@media print{.top,.side,.bottom,.week-nav,.head-actions,.btn{display:none!important}main{padding:0}.card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}body{background:var(--card)}}

/* Version 0.2 additions */
.three{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:0 .75rem}
@media (max-width:480px){.three{grid-template-columns:1fr 1fr}.three .field:first-child{grid-column:1 / -1}}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.seg-opt{display:flex!important;align-items:center;gap:.35rem;padding:.45rem .9rem;margin:0!important;font-weight:600!important;cursor:pointer}
.seg-opt+.seg-opt{border-left:1px solid var(--line2)}
.seg-opt input{width:auto;min-height:0}
.assign .card h2{font-size:.95rem;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.planner{border-top:1px dashed var(--line);margin-top:.5rem;padding-top:.75rem}
.slots{display:flex;flex-wrap:wrap;gap:.4rem}
.slot-pick{border:1px solid #bfe3cb;background:#f2faf5;color:#14532d;border-radius:8px;padding:.45rem .6rem;cursor:pointer;text-align:left;font:inherit;font-size:.85rem}
.slot-pick.on{background:var(--green);border-color:var(--green);color:#fff}
.missing .notice{margin:0 0 1rem}
.row-link.closed .row-title{color:var(--muted)}
.row-link.draft{box-shadow:inset 3px 0 0 var(--amber)}
.timeline li.student .tl-text{background:#e8f0fc}
.grid.perm th.wide{min-width:230px;white-space:normal;font-weight:500}
.grid.perm td.perm-cell{text-align:center}
.grid.perm td.perm-cell select{min-height:32px;padding:.2rem .3rem;font-size:.8rem;min-width:120px}
.grid.perm td.perm-cell input{width:20px;height:20px;min-height:0}
.grid .group-row th{background:var(--soft);font-weight:700;color:var(--ink);text-transform:none;letter-spacing:0;position:static}
.perm-wrap{max-height:70vh}
.grid td.wrap{white-space:normal}
.check.inline{display:inline-flex!important;margin:.15rem .9rem .15rem 0}
details.access{margin-top:.4rem;font-size:.85rem}
details.access summary{cursor:pointer;color:var(--brand)}
details.access ul{margin:.2rem 0 .5rem;padding-left:1.1rem}
.slot-pick.taken{border-color:#f0c36d;background:#fffaf0;color:#5b3b00}.slot-pick.taken.on{background:var(--amber);border-color:var(--amber);color:#fff}
.link-btn{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;font:inherit}
.link-btn.small{font-size:.85em}
.danger-text{color:#b42318}
.qr-box{text-align:center}
.qr-img{width:100%;max-width:340px;height:auto;border:1px solid #e5e7eb;border-radius:8px}
.pay-table td,.pay-table th{vertical-align:top}
.pay-table .num{text-align:right;white-space:nowrap}
.pay-table .acts{min-width:7.5rem}
.pay-table .acts .cv{display:flex;flex-wrap:wrap;gap:4px}
.pay-table .acts .btn{margin:0;white-space:nowrap}
.pay-table tr.pay-row{cursor:pointer}
.date-pick{display:inline-flex;align-items:center;gap:.35rem}
@media (max-width:760px){
.pay-wrap{overflow:visible;border:0;background:transparent}
.pay-table,.pay-table tbody,.pay-table tr,.pay-table td{display:block;width:100%}
.pay-table thead{display:none}
.pay-table tr{background:var(--card,#fff);border:1px solid var(--line);border-radius:10px;margin:0 0 .6rem;padding:.4rem .7rem}
.pay-table td{display:flex;justify-content:space-between;gap:1rem;border:0;padding:.35rem 0;text-align:right}
.pay-table td>.cv{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.pay-table td{overflow-wrap:anywhere}
.pay-table td::before{content:attr(data-label);color:var(--muted,#666);font-size:.85rem;text-align:left;flex:none}
.pay-table td.num{text-align:right}
.pay-table td.acts{justify-content:flex-start;white-space:normal}
.pay-table td.acts .cv{text-align:left}
.pay-table td.acts::before{display:none}
.pay-table td.acts:has(.cv:empty){display:none}
}
.qr-card{max-width:min(100%,360px);border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.18)}
.lb{list-style:none;margin:0;padding:0}
.lb-row{display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto auto;gap:.75rem;align-items:center;padding:.6rem .2rem;border-bottom:1px solid var(--line)}
.lb-row.me{background:rgba(131,6,6,.06);border-radius:8px}
.lb-rank{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:var(--line);font-weight:700}
.lb-rank.gold{background:#f5c542;color:#3b2a00}.lb-rank.silver{background:#cfd6de;color:var(--ink)}.lb-rank.bronze{background:#d39a6a;color:#3a1d05}
.lb-name{font-weight:600;overflow-wrap:anywhere}
.lb-num{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;min-width:4.5rem}
.lb-num small{color:var(--muted,#666);font-size:.75rem}
@media (max-width:480px){.lb-row{grid-template-columns:2rem minmax(0,1fr) auto auto;gap:.5rem}.lb-num{min-width:3.6rem}}
.camp-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem;border-left:4px solid #830606;margin-bottom:1rem}
.camp-card p{margin:.25rem 0 0}

.mention-wrap{position:relative;width:100%}
.mention-wrap textarea{width:100%}
.mention-list{position:absolute;left:0;right:0;top:100%;z-index:30;margin:4px 0 0;padding:4px;list-style:none;background:var(--card,#fff);border:1px solid var(--line,#ddd);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18);max-height:280px;overflow:auto}
.mention-list li{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:8px;cursor:pointer}
.mention-list li.on,.mention-list li:hover{background:var(--soft,rgba(122,12,12,.08))}
.mention-list .mn-av{flex:0 0 32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#7a0c0c;color:#fff;font-weight:700}
.mention-list .mn-txt{display:flex;flex-direction:column;min-width:0}
.mention-list .mn-txt b{font-weight:600}
.mention-list .mn-txt small{opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.tl-text{white-space:pre-wrap}
.tl-change{margin-top:.5rem;border:1px solid var(--line);border-radius:10px;background:var(--card);overflow:hidden}
.tl-change summary{cursor:pointer;padding:.5rem .75rem;font-weight:600;color:var(--brand)}
.tl-change .tl-was,.tl-change .tl-now{padding:.6rem .75rem;border-top:1px solid var(--line)}
.tl-change .tl-was{background:color-mix(in srgb,var(--red) 6%,transparent)}
.tl-change .tl-now{background:color-mix(in srgb,var(--green) 6%,transparent)}
.tl-lab{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;opacity:.7;margin-bottom:.3rem}
.tl-body{white-space:pre-wrap;line-height:1.55}
.modal textarea{max-height:70vh}

.team-bar{display:grid;grid-template-columns:1fr auto auto auto;gap:.6rem;align-items:center}
.team-bar select{width:auto}
@media(max-width:760px){.team-bar{grid-template-columns:1fr 1fr}.team-bar input{grid-column:1/-1}.team-bar select{width:100%}}
.team-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.team-chip{border:1px solid var(--line);background:var(--soft);border-radius:999px;padding:.35rem .8rem;cursor:pointer;font-size:.9rem;color:var(--ink)}
.team-chip b{color:var(--brand)}
.team-sel{position:sticky;top:.5rem;z-index:5;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;background:var(--ink);color:#fff;border-radius:12px;padding:.6rem .9rem;margin:0 0 1rem;box-shadow:var(--shadow)}
.team-sel span{margin-right:auto;font-weight:600}.team-sel .ghost{color:#fff}
.team-head{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:.5rem}
.team-head h3{margin:0;margin-right:auto;font-size:1.05rem}
.team-list{display:flex;flex-direction:column}
.team-row{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 0;border-top:1px solid var(--line)}
.team-row:first-child{border-top:0}
.team-row input[type=checkbox]{width:20px;height:20px;min-height:0;margin-top:.6rem;flex:0 0 auto}
.team-av{flex:0 0 42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;background:var(--brand)}
.team-main{min-width:0;flex:1}
.team-name{font-weight:700;display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.team-roles{display:flex;gap:.35rem;flex-wrap:wrap;margin:.3rem 0}
.role-pill{font-size:.78rem;font-weight:600;padding:.15rem .55rem;border-radius:999px;background:var(--soft);color:var(--muted);border:1px solid var(--line)}
.role-pill.r-super_admin{background:#fdecea;color:#8a1a12;border-color:#f3b6b0}.role-pill.r-tutor{background:#e8f1fd;color:#1d4f9c;border-color:#bcd4f5}
.role-pill.r-ambassador{background:#fff4dc;color:#7a4b00;border-color:#f0d08a}.role-pill.r-media{background:#f1ebfd;color:#5530a8;border-color:#d4c4f5}
.role-pill.r-academic_admin,.role-pill.r-ops_admin,.role-pill.r-supervisor{background:#e4f5ea;color:#145c33;border-color:#a9dbbd}
.team-contact{display:flex;flex-wrap:wrap;gap:.35rem 1rem;font-size:.9rem;color:var(--muted)}
.team-contact a{overflow-wrap:anywhere}
.muted-row{opacity:.75}
.team-sel .btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}

.cm-box{border:1px solid var(--line2);border-radius:8px;overflow:hidden;background:var(--card)}
.cm-box textarea{border:0;border-radius:0;min-height:180px}
.cm-box textarea:focus{outline:0}
.cm-bar{display:flex;gap:4px;flex-wrap:wrap;padding:6px;border-bottom:1px solid var(--line);background:var(--soft)}
.cm-tool{border:1px solid var(--line);background:var(--card);border-radius:6px;padding:4px 10px;min-width:34px;font-size:.88rem;cursor:pointer;color:var(--ink)}
.cm-tool.b{font-weight:800}.cm-tool.i{font-style:italic;font-family:Georgia,serif}
.cm-tool.attach{font-weight:600;color:var(--brand)}
.cm-gap{flex:1}
.cm-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cm-file{display:inline-flex;align-items:center;gap:4px;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 12px;font-size:.88rem}
.cm-file button{border:0;background:transparent;font-size:1.1rem;line-height:1;cursor:pointer;padding:0 6px;color:var(--muted)}

.seg{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:.5rem}
.seg-opt{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem;background:var(--card);cursor:pointer}
.seg-opt input{width:auto;min-height:0}
.pick-people{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:.4rem .7rem;background:var(--card)}
.pick-people .check{display:flex;gap:.4rem;align-items:center;padding:.3rem 0}
.pick-people input{width:auto;min-height:0}
.progress{height:10px;background:var(--soft);border-radius:999px;overflow:hidden;margin:.4rem 0 .8rem}
.progress span{display:block;height:100%;background:var(--brand);border-radius:999px}
.batch-list{list-style:none;padding:0;margin:0;columns:2;column-gap:1.5rem}
.batch-list li{padding:.3rem 0;break-inside:avoid}
@media(max-width:700px){.batch-list{columns:1}}

.seg-opt.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.avail-cal-wrap{margin-bottom:1rem}
.ac-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.avail-cal{display:grid;grid-template-columns:62px repeat(7,minmax(44px,1fr));min-width:400px;user-select:none}
.ac-corner,.ac-head{position:sticky;top:0;background:var(--card);z-index:2}
.ac-head{text-align:center;font-weight:700;font-size:.85rem;padding:.4rem 0;border-bottom:1px solid var(--line)}
.ac-head span{display:block;font-weight:500;color:var(--muted);font-size:.78rem}
.ac-time{font-size:.72rem;color:var(--muted);text-align:right;padding:0 6px;height:24px;line-height:1;transform:translateY(-5px)}
.ac-cell{height:24px;border:0;border-left:1px solid var(--line);border-top:1px dashed #eceef2;background:transparent;padding:0;min-height:0;cursor:pointer;font-size:.62rem;color:#fff;overflow:hidden;white-space:nowrap;touch-action:manipulation}
.ac-cell.hr{border-top:1px solid var(--line)}
.ac-cell.on{background:#2e8b57}
.ac-cell.busy{background:var(--brand);cursor:not-allowed}
.ac-cell:focus-visible{outline:3px solid #f0b400;outline-offset:-3px}
.ac-legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:var(--muted);margin:.5rem 0}
.ac-legend .k{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid var(--line);margin-right:6px;vertical-align:-2px}
.ac-legend .k.on{background:#2e8b57;border-color:#2e8b57}.ac-legend .k.busy{background:var(--brand);border-color:var(--brand)}
.avail-cal{grid-template-columns:50px repeat(7,minmax(36px,1fr));min-width:0}
.ac-time.first{transform:none}
.avail-cal .ac-time{font-size:.68rem;padding:0 4px}
.ac-cell{-webkit-tap-highlight-color:transparent}

.notice-bar{position:sticky;top:0;z-index:15}
.nb-item{display:flex;align-items:flex-start;gap:.75rem;padding:.7rem 1rem;background:#fff4e5;border-bottom:2px solid #e8541a;color:#4a2400}
.nb-icon{flex:0 0 28px;height:28px;border-radius:50%;background:#e8541a;color:#fff;font-weight:800;display:grid;place-items:center}
.nb-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.nb-title{font-size:1rem}
.nb-text{white-space:pre-wrap}
.nb-link{font-weight:700;color:#7a0c0c}
.nb-from{font-size:.8rem;opacity:.75}
.notice-pop{display:flex;flex-direction:column;gap:.5rem;font-size:1.05rem}
.notice-pop .nb-from{color:var(--muted)}
.notice-card.ended{opacity:.7}

.nb-wrap{flex:1;min-width:0}
.nb-main.clamp .nb-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nb-more{border:0;background:none;padding:.2rem 0;color:#7a0c0c;font-weight:700;cursor:pointer;text-decoration:underline}
.nb-more.hide{display:none}
.notice-bar{max-height:60vh;overflow:auto}
.notice-pop{max-height:60vh;overflow:auto}
.notice-pop .nb-text{white-space:pre-wrap}
.desc.clamp4{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

.install-card{display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem;background:var(--card);border-bottom:1px solid var(--line)}
.install-card img{border-radius:10px;border:1px solid var(--line);flex:0 0 40px}
.install-card .ic-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.install-card .ic-text span{font-size:.85rem;color:var(--muted)}
.install-steps ol{margin:0 0 0 1.2rem}.install-steps li{margin:.4rem 0}
.ic-have{align-self:flex-start;border:0;background:none;padding:.25rem 0 0;color:var(--brand);font-weight:600;font-size:.85rem;text-decoration:underline;cursor:pointer}
.warn-card{border-left:0;background:#FFF5F2;border:1px solid #F2C9BF}.warn-card h3{margin:0 0 6px;color:#830606}.warn-card ul{margin:8px 0 0;padding-left:20px}
.avail-cal{grid-template-columns:64px repeat(7,minmax(36px,1fr))}
.avail-cal .ac-time.ac-block{transform:none;height:44px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:2px;border-top:1px solid var(--line);font-size:.72rem}
.ac-block b{color:var(--text,#1f2933);font-weight:700}
.ac-block span{font-size:.62rem}
.avail-cal .ac-cell{height:44px;border-top:1px solid var(--line);margin-bottom:2px;border-radius:4px}
.avail-cal .ac-cell.on{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}

/* Chat */
.nav-n{margin-left:auto;background:#25a55a;color:#fff;font-size:.7rem;font-weight:800;border-radius:99px;padding:.05rem .45rem;min-width:1.1rem;text-align:center}
.bottom a{position:relative}.bottom .nav-n{position:absolute;top:2px;left:calc(50% + 6px);margin:0}
.chat{--cb:var(--cbg);display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);width:100%;box-sizing:border-box;height:calc(100vh - 130px);min-height:480px;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.chat-list{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--card)}
.chat-list-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.8rem 1rem .4rem}
.chat-list-head h2{margin:0;font-size:1.25rem}
.chat-find-wrap{padding:.3rem .8rem .6rem}.chat-find{width:100%;box-sizing:border-box;border:0;background:var(--soft);border-radius:10px;padding:.55rem .8rem;font:inherit}
.chat-rooms{overflow-y:auto;flex:1}
.chat-room{display:flex;gap:.75rem;align-items:center;width:100%;text-align:left;background:none;border:0;padding:.65rem 1rem;cursor:pointer;font:inherit;color:inherit;text-decoration:none;box-sizing:border-box}
.chat-room{-webkit-tap-highlight-color:transparent}@media (hover:hover){.chat-room:hover{background:var(--soft)}}.chat-room[aria-current]{background:color-mix(in srgb,var(--brand) 10%,var(--card));color:var(--ink)}
.chat-av{flex:0 0 46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;font-weight:700;font-size:.9rem}
.chat-av.group{background:#dfe5ee;color:var(--brand)}.chat-av.small{flex-basis:38px;width:38px;height:38px;font-size:.8rem}
.chat-room-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem;border-bottom:1px solid var(--soft);padding-bottom:.6rem;margin-bottom:-.6rem}
.chat-room-top,.chat-room-bottom{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.chat-room-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-room-time{font-size:.74rem;color:var(--muted);flex-shrink:0}
.chat-room-last{font-size:.86rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-room.unread .chat-room-time{color:#1fa855;font-weight:700}.chat-room.unread .chat-room-last{color:var(--ink)}
.chat-unread{background:#25a55a;color:#fff;border-radius:99px;font-size:.72rem;font-weight:800;padding:.1rem .45rem;min-width:1.25rem;text-align:center;flex-shrink:0}
.chat-pane{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--cb)}
.chat-pane-head{display:flex;align-items:center;gap:.65rem;padding:.6rem .9rem;background:var(--card);border-bottom:1px solid var(--line)}
.chat-head-text{min-width:0}.chat-pane-head h3{margin:0;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-sub{font-size:.78rem;color:var(--muted)}
.chat-back{display:none;font-size:2rem;line-height:1;color:var(--brand);text-decoration:none;padding:0 .3rem 0 0}
.chat-body{position:relative;flex:1;min-height:0;display:flex}
.chat-msgs{flex:1;overflow-y:auto;padding:.8rem 6% 1rem;display:flex;flex-direction:column;gap:2px;background:var(--cb) radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px) 0 0/18px 18px}
.chat-day{align-self:center;font-size:.74rem;font-weight:600;color:var(--muted);background:var(--card);border-radius:8px;padding:.25rem .7rem;margin:.7rem 0 .4rem;box-shadow:0 1px .5px rgba(0,0,0,.12)}
.chat-new{align-self:stretch;text-align:center;font-size:.76rem;font-weight:700;color:var(--muted);background:rgba(255,255,255,.75);padding:.3rem;margin:.5rem -6%}
.chat-m{display:flex;align-items:center;gap:.3rem;max-width:80%;align-self:flex-start;margin-top:.45rem}
.chat-m.cont{margin-top:1px}.chat-m.mine{align-self:flex-end;flex-direction:row-reverse}
.chat-bub{position:relative;background:var(--card);border-radius:10px;padding:.35rem .55rem .25rem;box-shadow:0 1px .5px rgba(0,0,0,.13);line-height:1.38;word-wrap:break-word;overflow-wrap:anywhere;min-width:64px;transition:transform .15s;cursor:default}
.chat-m:not(.cont) .chat-bub{border-top-left-radius:2px}.chat-m.mine:not(.cont) .chat-bub{border-top-left-radius:10px;border-top-right-radius:2px}
.chat-m.mine .chat-bub{background:var(--mine)}
.chat-m.flash .chat-bub{box-shadow:0 0 0 3px #ffd27a}
.chat-who{font-size:.78rem;font-weight:700;color:var(--brand);margin-bottom:.1rem}
.chat-text{white-space:pre-wrap}
.chat-meta{float:right;display:inline-flex;align-items:center;gap:.2rem;font-size:.68rem;color:var(--muted);margin:.35rem 0 -.1rem .7rem;position:relative;top:.15rem}
.chat-tick svg{width:16px;height:16px;fill:#8696a0}.chat-tick.seen svg{fill:#53bdeb}
.chat-gone{color:var(--muted);font-style:italic;font-size:.9rem}
.chat-quote{display:flex;flex-direction:column;gap:.1rem;text-align:left;border:0;border-left:4px solid var(--brand);background:rgba(0,0,0,.05);border-radius:6px;padding:.3rem .55rem;font:inherit;font-size:.84rem;color:inherit;width:100%;box-sizing:border-box;cursor:pointer;margin-bottom:.25rem}
.chat-quote b{color:var(--brand);font-size:.78rem}.chat-quote span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.chat-img{display:block;max-width:260px;max-height:300px;border-radius:8px;margin:.1rem 0 .2rem}
.chat-audio{display:block;width:250px;max-width:100%;height:40px;margin:.15rem 0}
.chat-file{display:inline-flex;gap:.4rem;align-items:center;font-weight:600;color:var(--brand);text-decoration:none;background:rgba(0,0,0,.05);padding:.45rem .6rem;border-radius:8px}
.chat-file svg{width:18px;height:18px;fill:currentColor}
.chat-down{position:absolute;right:16px;bottom:14px;width:42px;height:42px;border-radius:50%;border:0;background:var(--card);box-shadow:0 2px 6px rgba(0,0,0,.2);display:grid;place-items:center;cursor:pointer}
.chat-down svg{width:22px;height:22px;fill:var(--muted)}.chat-down-n{position:absolute;top:-6px;right:-4px;background:#25a55a;color:#fff;border-radius:99px;font-size:.7rem;padding:.05rem .4rem}
.chat-replybar,.chat-pick{display:flex;align-items:center;gap:.5rem;background:var(--soft);padding:.45rem .7rem 0}
.chat-replybar .chat-quote{margin:0;cursor:default;background:var(--card)}
.chat-pick{font-size:.85rem;color:var(--muted);padding-bottom:.2rem}
.chat-x{border:0;background:none;font-size:1rem;color:var(--muted);cursor:pointer;padding:.3rem}
.chat-compose,.chat-rec{display:flex;gap:.45rem;align-items:flex-end;padding:.5rem .6rem;background:var(--soft)}
.chat-compose textarea{flex:1;resize:none;max-height:140px;min-height:42px;border:0;border-radius:22px;padding:.62rem 1rem;font:inherit;background:var(--card);box-sizing:border-box}
.chat-ico{flex:0 0 42px;height:42px;border-radius:50%;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.chat-ico svg{width:24px;height:24px;fill:var(--muted)}
.chat-round{flex:0 0 46px;height:46px;border-radius:50%;border:0;background:var(--brand);cursor:pointer;display:grid;place-items:center}
.chat-round svg{width:22px;height:22px;fill:#fff}
.chat-rec{align-items:center}.chat-rec-dot{width:12px;height:12px;border-radius:50%;background:#e53935;animation:chatpulse 1s infinite}
.chat-rec-time{font-variant-numeric:tabular-nums;font-weight:700}.chat-rec-hint{flex:1;color:var(--muted);font-size:.85rem}
@keyframes chatpulse{50%{opacity:.25}}
.chat-empty{margin:auto;text-align:center;color:var(--muted);padding:2rem;max-width:340px}.chat-empty.small{margin:2rem auto;background:var(--card);border-radius:10px;padding:1rem}
.chat-empty-ico svg{width:48px;height:48px;fill:#c5cdd5}
.chat-older{align-self:center;margin-bottom:.4rem}
.chat-search{width:100%;margin-bottom:.6rem}.chat-people{max-height:55vh;overflow-y:auto}
@media (max-width:760px){
  .chat{grid-template-columns:minmax(0,1fr);height:calc(100vh - 165px);border-radius:10px}
  .chat.open .chat-list{display:none}.chat:not(.open) .chat-pane{display:none}
  .chat-back{display:inline-block}.chat-m{max-width:88%}.chat-msgs{padding:.6rem 3% 1rem}
}

/* Dark theme. Follows the device unless the person chose Light or Dark under Appearance. */
html[data-theme="dark"]{color-scheme:dark;--bg:#0e1217;--card:#181e26;--ink:#e7eaf0;--muted:#9aa5b4;--line:#2a323d;--line2:#3a4452;--soft:#212934;--mine:#005c4b;--cbg:#0b141a;--shadow:0 1px 2px rgba(0,0,0,.4)}
html[data-theme="dark"] a{color:color-mix(in srgb,var(--brand) 45%,#fff)}
html[data-theme="dark"] .side a,html[data-theme="dark"] .bottom a,html[data-theme="dark"] .more-list a,html[data-theme="dark"] .chat-room{color:var(--ink)}
html[data-theme="dark"] .side a[aria-current]{background:color-mix(in srgb,var(--brand) 30%,var(--card));color:#fff}
html[data-theme="dark"] .btn{background:var(--card);color:var(--ink);border-color:var(--line2)}
html[data-theme="dark"] .btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
html[data-theme="dark"] .notice,html[data-theme="dark"] .warn-card,html[data-theme="dark"] .stat.warn{background:#2a2312;color:#f3dfb2;border-color:#5a4718}
html[data-theme="dark"] .tag,html[data-theme="dark"] .chip{filter:brightness(.85)}
html[data-theme="dark"] .notice-bar,html[data-theme="dark"] .install-card{background:#241d10;color:#f3dfb2}
html[data-theme="dark"] .chat-m.mine .chat-bub{color:#e9edef}
html[data-theme="dark"] .chat-quote{background:rgba(255,255,255,.07)}
html[data-theme="dark"] .chat-day,html[data-theme="dark"] .chat-new{background:#1f2c34;color:#c7d0d6}
html[data-theme="dark"] .chat-av.group{background:#2a3542;color:#cfd8e3}
html[data-theme="dark"] img.chat-img{filter:none}
.appear{display:flex;flex-direction:column;gap:1rem}
.appear-opts{display:flex;gap:.5rem;flex-wrap:wrap}
.appear-opts button{flex:1;min-width:90px;padding:.7rem;border:2px solid var(--line);border-radius:10px;background:var(--card);cursor:pointer;font-weight:600}
.appear-opts button[aria-pressed="true"]{border-color:var(--brand);color:var(--brand)}
.walls{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:.5rem}
.walls button{height:70px;border-radius:10px;border:2px solid var(--line);cursor:pointer;font-size:.72rem;font-weight:700;display:flex;align-items:flex-end;justify-content:center;padding:.3rem;color:#333}
.walls button[aria-pressed="true"]{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand)}
.chat-look{margin-left:auto}

/* Keep the app still. Nothing slides sideways on phones. */
html,body{max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}
@supports (overflow-x:clip){html,body{overflow-x:clip}}
.body{max-width:100vw}
img,video,iframe{max-width:100%}

/* Chat fills the screen, like a messaging app */
body.chat-mode .notice-bar,body.chat-mode .install-card{display:none}
body.chat-mode main{padding-bottom:0;max-width:none}
@media (max-width:760px){body.chat-mode main{padding:0}body.chat-mode .chat{border:0;border-radius:0}}
@media (min-width:900px){body.chat-mode main{padding:1rem 1.25rem 0}}
.chat{min-height:0}

/* Wallpapers. Soft colour, with hand-drawn study doodles on top, like WhatsApp. */
.wallbg{position:relative;isolation:isolate}
.wallbg::before,.wallbg::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1}
.wallbg::before{background:var(--wbg,#efeae2)}
.wallbg::after{background:var(--wink,#8a7f6e);opacity:var(--wop,.14);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='380' viewBox='0 0 380 380' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(15.7 13.3) rotate(-18 12 12) scale(1.22)'%3E%3Cpath d='M9 18V5l11-2v13'/%3E%3Ccircle cx='6.5' cy='18' r='2.5'/%3E%3Ccircle cx='17.5' cy='16' r='2.5'/%3E%3C/g%3E%3Ccircle cx='28' cy='37' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(78.7 17.6) rotate(6 12 12) scale(0.98)'%3E%3Cpath d='M16 7l-7.5 7.5a2 2 0 0 0 2.8 2.8L19 9.6a4 4 0 0 0-5.7-5.7L5.6 11.6a6 6 0 0 0 8.5 8.5L20 14'/%3E%3C/g%3E%3Ccircle cx='82' cy='32' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(154.6 17.0) rotate(26 12 12) scale(0.98)'%3E%3Cpath d='M16 7l-7.5 7.5a2 2 0 0 0 2.8 2.8L19 9.6a4 4 0 0 0-5.7-5.7L5.6 11.6a6 6 0 0 0 8.5 8.5L20 14'/%3E%3C/g%3E%3Cg transform='translate(214.8 25.5) rotate(-9 12 12) scale(1.07)'%3E%3Cpath d='M3 16L16 3l5 5L8 21z'/%3E%3Cpath d='M7 12l2 2M10 9l2 2M13 6l2 2'/%3E%3C/g%3E%3Ccircle cx='256' cy='24' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(263.3 13.8) rotate(11 12 12) scale(0.97)'%3E%3Cpath d='M9 3h6M10 3v6L4 19a1.5 1.5 0 0 0 1.3 2h13.4A1.5 1.5 0 0 0 20 19l-6-10V3'/%3E%3Cpath d='M7 15h10'/%3E%3C/g%3E%3Cg transform='translate(331.3 20.3) rotate(10 12 12) scale(1.11)'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/g%3E%3Cg transform='translate(26.9 78.7) rotate(25 12 12) scale(1.07)'%3E%3Cpath d='M3 5c3-1.5 6-1.5 9 0v14c-3-1.5-6-1.5-9 0zM12 5c3-1.5 6-1.5 9 0v14c-3-1.5-6-1.5-9 0z'/%3E%3C/g%3E%3Cg transform='translate(81.9 76.0) rotate(-12 12 12) scale(1.21)'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/g%3E%3Ccircle cx='130' cy='99' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(138.2 79.9) rotate(-12 12 12) scale(1.00)'%3E%3Cpath d='M2 9l10-5 10 5-10 5zM6 11v5c3 2 9 2 12 0v-5M22 9v6'/%3E%3C/g%3E%3Ccircle cx='165' cy='116' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(219.0 85.9) rotate(-7 12 12) scale(1.03)'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/g%3E%3Ccircle cx='222' cy='119' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(261.6 89.1) rotate(-18 12 12) scale(1.05)'%3E%3Cpath d='M3 5c3-1.5 6-1.5 9 0v14c-3-1.5-6-1.5-9 0zM12 5c3-1.5 6-1.5 9 0v14c-3-1.5-6-1.5-9 0z'/%3E%3C/g%3E%3Ccircle cx='287' cy='119' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(331.5 74.0) rotate(20 12 12) scale(1.28)'%3E%3Cpath d='M2 9l10-5 10 5-10 5zM6 11v5c3 2 9 2 12 0v-5M22 9v6'/%3E%3C/g%3E%3Cg transform='translate(23.8 144.4) rotate(21 12 12) scale(1.28)'%3E%3Cpath d='M4 20l1-4L16 5l3 3L8 19zM14 7l3 3'/%3E%3C/g%3E%3Cg transform='translate(83.3 143.2) rotate(-6 12 12) scale(1.12)'%3E%3Cpath d='M12 8c-2-2-7-1.5-7 4 0 4 3 8 5 8 1 0 1.5-.5 2-.5s1 .5 2 .5c2 0 5-4 5-8 0-5.5-5-6-7-4zM12 8c0-2 1-4 3-5'/%3E%3C/g%3E%3Ccircle cx='89' cy='196' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(144.1 137.0) rotate(6 12 12) scale(0.99)'%3E%3Cpath d='M3 16L16 3l5 5L8 21z'/%3E%3Cpath d='M7 12l2 2M10 9l2 2M13 6l2 2'/%3E%3C/g%3E%3Cg transform='translate(209.4 154.9) rotate(6 12 12) scale(0.97)'%3E%3Ctext x='1' y='17' font-family='Georgia,serif' font-size='14' stroke='none' fill='%23000'%3E/%C9%99/%3C/text%3E%3C/g%3E%3Ccircle cx='226' cy='187' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(281.7 147.5) rotate(-1 12 12) scale(0.99)'%3E%3Cpath d='M9 3h6M10 3v6L4 19a1.5 1.5 0 0 0 1.3 2h13.4A1.5 1.5 0 0 0 20 19l-6-10V3'/%3E%3Cpath d='M7 15h10'/%3E%3C/g%3E%3Ccircle cx='334' cy='170' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(331.3 137.7) rotate(14 12 12) scale(1.21)'%3E%3Crect x='4' y='5' width='16' height='11' rx='1.5'/%3E%3Cpath d='M2 19h20'/%3E%3C/g%3E%3Ccircle cx='366' cy='162' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(12.4 218.3) rotate(-8 12 12) scale(1.19)'%3E%3Ctext x='1' y='17' font-family='Georgia,serif' font-size='14' stroke='none' fill='%23000'%3E/%C9%99/%3C/text%3E%3C/g%3E%3Cg transform='translate(87.5 204.4) rotate(8 12 12) scale(0.98)'%3E%3Cpath d='M3 5c3-1.5 6-1.5 9 0v14c-3-1.5-6-1.5-9 0zM12 5c3-1.5 6-1.5 9 0v14c-3-1.5-6-1.5-9 0z'/%3E%3C/g%3E%3Cg transform='translate(145.7 217.4) rotate(-8 12 12) scale(1.03)'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.3 1 2.1h5c0-.8.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/g%3E%3Ccircle cx='170' cy='249' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(211.1 214.8) rotate(14 12 12) scale(1.02)'%3E%3Cpath d='M4 20l1-4L16 5l3 3L8 19zM14 7l3 3'/%3E%3C/g%3E%3Ccircle cx='229' cy='256' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(265.6 208.5) rotate(13 12 12) scale(1.30)'%3E%3Ctext x='0' y='17' font-family='Georgia,serif' font-size='11' stroke='none' fill='%23000'%3EABC%3C/text%3E%3C/g%3E%3Cg transform='translate(334.7 202.1) rotate(6 12 12) scale(1.07)'%3E%3Ctext x='0' y='17' font-family='Georgia,serif' font-size='11' stroke='none' fill='%23000'%3EABC%3C/text%3E%3C/g%3E%3Cg transform='translate(23.4 268.8) rotate(27 12 12) scale(0.98)'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M8 7h8M8 11h1M12 11h1M16 11h0M8 15h1M12 15h1M16 15v3'/%3E%3C/g%3E%3Ccircle cx='45' cy='283' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(81.6 282.4) rotate(6 12 12) scale(0.95)'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/g%3E%3Cg transform='translate(142.0 275.1) rotate(19 12 12) scale(0.99)'%3E%3Cpath d='M8 4h8v5a4 4 0 0 1-8 0zM8 6H5a3 3 0 0 0 3 4M16 6h3a3 3 0 0 1-3 4M12 13v4M8 20h8'/%3E%3C/g%3E%3Ccircle cx='178' cy='281' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(217.0 270.6) rotate(8 12 12) scale(0.98)'%3E%3Cpath d='M21 3L3 10.5l7 2.5 2.5 7z'/%3E%3Cpath d='M10 13l11-10'/%3E%3C/g%3E%3Cg transform='translate(276.7 271.2) rotate(14 12 12) scale(0.98)'%3E%3Cpath d='M12 3l2.6 5.6 6 .7-4.5 4.1 1.3 6L12 16.4 6.6 19.4l1.3-6L3.4 9.3l6-.7z'/%3E%3C/g%3E%3Ccircle cx='330' cy='267' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(337.3 271.3) rotate(9 12 12) scale(1.16)'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5'/%3E%3C/g%3E%3Cg transform='translate(18.1 344.7) rotate(-19 12 12) scale(1.14)'%3E%3Cpath d='M3 16L16 3l5 5L8 21z'/%3E%3Cpath d='M7 12l2 2M10 9l2 2M13 6l2 2'/%3E%3C/g%3E%3Ccircle cx='60' cy='2' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(73.5 340.7) rotate(-20 12 12) scale(1.30)'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M8 7h8M8 11h1M12 11h1M16 11h0M8 15h1M12 15h1M16 15v3'/%3E%3C/g%3E%3Ccircle cx='119' cy='336' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(139.2 335.4) rotate(15 12 12) scale(1.06)'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/g%3E%3Ccircle cx='183' cy='333' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(213.8 343.8) rotate(9 12 12) scale(1.24)'%3E%3Cpath d='M21 3L3 10.5l7 2.5 2.5 7z'/%3E%3Cpath d='M10 13l11-10'/%3E%3C/g%3E%3Ccircle cx='257' cy='10' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(264.1 327.9) rotate(1 12 12) scale(1.26)'%3E%3Cpath d='M12 8c-2-2-7-1.5-7 4 0 4 3 8 5 8 1 0 1.5-.5 2-.5s1 .5 2 .5c2 0 5-4 5-8 0-5.5-5-6-7-4zM12 8c0-2 1-4 3-5'/%3E%3C/g%3E%3Cg transform='translate(337.6 341.2) rotate(-20 12 12) scale(1.00)'%3E%3Cpath d='M12 3l2.6 5.6 6 .7-4.5 4.1 1.3 6L12 16.4 6.6 19.4l1.3-6L3.4 9.3l6-.7z'/%3E%3C/g%3E%3C/svg%3E") 0 0/var(--wsz,380px) repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='380' viewBox='0 0 380 380' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(15.7 13.3) rotate(-18 12 12) scale(1.22)'%3E%3Cpath d='M9 18V5l11-2v13'/%3E%3Ccircle cx='6.5' cy='18' r='2.5'/%3E%3Ccircle cx='17.5' cy='16' r='2.5'/%3E%3C/g%3E%3Ccircle cx='28' cy='37' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(78.7 17.6) rotate(6 12 12) scale(0.98)'%3E%3Cpath d='M16 7l-7.5 7.5a2 2 0 0 0 2.8 2.8L19 9.6a4 4 0 0 0-5.7-5.7L5.6 11.6a6 6 0 0 0 8.5 8.5L20 14'/%3E%3C/g%3E%3Ccircle cx='82' cy='32' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(154.6 17.0) rotate(26 12 12) scale(0.98)'%3E%3Cpath d='M16 7l-7.5 7.5a2 2 0 0 0 2.8 2.8L19 9.6a4 4 0 0 0-5.7-5.7L5.6 11.6a6 6 0 0 0 8.5 8.5L20 14'/%3E%3C/g%3E%3Cg transform='translate(214.8 25.5) rotate(-9 12 12) scale(1.07)'%3E%3Cpath d='M3 16L16 3l5 5L8 21z'/%3E%3Cpath d='M7 12l2 2M10 9l2 2M13 6l2 2'/%3E%3C/g%3E%3Ccircle cx='256' cy='24' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(263.3 13.8) rotate(11 12 12) scale(0.97)'%3E%3Cpath d='M9 3h6M10 3v6L4 19a1.5 1.5 0 0 0 1.3 2h13.4A1.5 1.5 0 0 0 20 19l-6-10V3'/%3E%3Cpath d='M7 15h10'/%3E%3C/g%3E%3Cg transform='translate(331.3 20.3) rotate(10 12 12) scale(1.11)'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/g%3E%3Cg transform='translate(26.9 78.7) rotate(25 12 12) scale(1.07)'%3E%3Cpath d='M3 5c3-1.5 6-1.5 9 0v14c-3-1.5-6-1.5-9 0zM12 5c3-1.5 6-1.5 9 0v14c-3-1.5-6-1.5-9 0z'/%3E%3C/g%3E%3Cg transform='translate(81.9 76.0) rotate(-12 12 12) scale(1.21)'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/g%3E%3Ccircle cx='130' cy='99' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(138.2 79.9) rotate(-12 12 12) scale(1.00)'%3E%3Cpath d='M2 9l10-5 10 5-10 5zM6 11v5c3 2 9 2 12 0v-5M22 9v6'/%3E%3C/g%3E%3Ccircle cx='165' cy='116' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(219.0 85.9) rotate(-7 12 12) scale(1.03)'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/g%3E%3Ccircle cx='222' cy='119' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(261.6 89.1) rotate(-18 12 12) scale(1.05)'%3E%3Cpath d='M3 5c3-1.5 6-1.5 9 0v14c-3-1.5-6-1.5-9 0zM12 5c3-1.5 6-1.5 9 0v14c-3-1.5-6-1.5-9 0z'/%3E%3C/g%3E%3Ccircle cx='287' cy='119' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(331.5 74.0) rotate(20 12 12) scale(1.28)'%3E%3Cpath d='M2 9l10-5 10 5-10 5zM6 11v5c3 2 9 2 12 0v-5M22 9v6'/%3E%3C/g%3E%3Cg transform='translate(23.8 144.4) rotate(21 12 12) scale(1.28)'%3E%3Cpath d='M4 20l1-4L16 5l3 3L8 19zM14 7l3 3'/%3E%3C/g%3E%3Cg transform='translate(83.3 143.2) rotate(-6 12 12) scale(1.12)'%3E%3Cpath d='M12 8c-2-2-7-1.5-7 4 0 4 3 8 5 8 1 0 1.5-.5 2-.5s1 .5 2 .5c2 0 5-4 5-8 0-5.5-5-6-7-4zM12 8c0-2 1-4 3-5'/%3E%3C/g%3E%3Ccircle cx='89' cy='196' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(144.1 137.0) rotate(6 12 12) scale(0.99)'%3E%3Cpath d='M3 16L16 3l5 5L8 21z'/%3E%3Cpath d='M7 12l2 2M10 9l2 2M13 6l2 2'/%3E%3C/g%3E%3Cg transform='translate(209.4 154.9) rotate(6 12 12) scale(0.97)'%3E%3Ctext x='1' y='17' font-family='Georgia,serif' font-size='14' stroke='none' fill='%23000'%3E/%C9%99/%3C/text%3E%3C/g%3E%3Ccircle cx='226' cy='187' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(281.7 147.5) rotate(-1 12 12) scale(0.99)'%3E%3Cpath d='M9 3h6M10 3v6L4 19a1.5 1.5 0 0 0 1.3 2h13.4A1.5 1.5 0 0 0 20 19l-6-10V3'/%3E%3Cpath d='M7 15h10'/%3E%3C/g%3E%3Ccircle cx='334' cy='170' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(331.3 137.7) rotate(14 12 12) scale(1.21)'%3E%3Crect x='4' y='5' width='16' height='11' rx='1.5'/%3E%3Cpath d='M2 19h20'/%3E%3C/g%3E%3Ccircle cx='366' cy='162' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(12.4 218.3) rotate(-8 12 12) scale(1.19)'%3E%3Ctext x='1' y='17' font-family='Georgia,serif' font-size='14' stroke='none' fill='%23000'%3E/%C9%99/%3C/text%3E%3C/g%3E%3Cg transform='translate(87.5 204.4) rotate(8 12 12) scale(0.98)'%3E%3Cpath d='M3 5c3-1.5 6-1.5 9 0v14c-3-1.5-6-1.5-9 0zM12 5c3-1.5 6-1.5 9 0v14c-3-1.5-6-1.5-9 0z'/%3E%3C/g%3E%3Cg transform='translate(145.7 217.4) rotate(-8 12 12) scale(1.03)'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.3 1 2.1h5c0-.8.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/g%3E%3Ccircle cx='170' cy='249' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(211.1 214.8) rotate(14 12 12) scale(1.02)'%3E%3Cpath d='M4 20l1-4L16 5l3 3L8 19zM14 7l3 3'/%3E%3C/g%3E%3Ccircle cx='229' cy='256' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(265.6 208.5) rotate(13 12 12) scale(1.30)'%3E%3Ctext x='0' y='17' font-family='Georgia,serif' font-size='11' stroke='none' fill='%23000'%3EABC%3C/text%3E%3C/g%3E%3Cg transform='translate(334.7 202.1) rotate(6 12 12) scale(1.07)'%3E%3Ctext x='0' y='17' font-family='Georgia,serif' font-size='11' stroke='none' fill='%23000'%3EABC%3C/text%3E%3C/g%3E%3Cg transform='translate(23.4 268.8) rotate(27 12 12) scale(0.98)'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M8 7h8M8 11h1M12 11h1M16 11h0M8 15h1M12 15h1M16 15v3'/%3E%3C/g%3E%3Ccircle cx='45' cy='283' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(81.6 282.4) rotate(6 12 12) scale(0.95)'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/g%3E%3Cg transform='translate(142.0 275.1) rotate(19 12 12) scale(0.99)'%3E%3Cpath d='M8 4h8v5a4 4 0 0 1-8 0zM8 6H5a3 3 0 0 0 3 4M16 6h3a3 3 0 0 1-3 4M12 13v4M8 20h8'/%3E%3C/g%3E%3Ccircle cx='178' cy='281' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(217.0 270.6) rotate(8 12 12) scale(0.98)'%3E%3Cpath d='M21 3L3 10.5l7 2.5 2.5 7z'/%3E%3Cpath d='M10 13l11-10'/%3E%3C/g%3E%3Cg transform='translate(276.7 271.2) rotate(14 12 12) scale(0.98)'%3E%3Cpath d='M12 3l2.6 5.6 6 .7-4.5 4.1 1.3 6L12 16.4 6.6 19.4l1.3-6L3.4 9.3l6-.7z'/%3E%3C/g%3E%3Ccircle cx='330' cy='267' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(337.3 271.3) rotate(9 12 12) scale(1.16)'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5'/%3E%3C/g%3E%3Cg transform='translate(18.1 344.7) rotate(-19 12 12) scale(1.14)'%3E%3Cpath d='M3 16L16 3l5 5L8 21z'/%3E%3Cpath d='M7 12l2 2M10 9l2 2M13 6l2 2'/%3E%3C/g%3E%3Ccircle cx='60' cy='2' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(73.5 340.7) rotate(-20 12 12) scale(1.30)'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M8 7h8M8 11h1M12 11h1M16 11h0M8 15h1M12 15h1M16 15v3'/%3E%3C/g%3E%3Ccircle cx='119' cy='336' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(139.2 335.4) rotate(15 12 12) scale(1.06)'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/g%3E%3Ccircle cx='183' cy='333' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(213.8 343.8) rotate(9 12 12) scale(1.24)'%3E%3Cpath d='M21 3L3 10.5l7 2.5 2.5 7z'/%3E%3Cpath d='M10 13l11-10'/%3E%3C/g%3E%3Ccircle cx='257' cy='10' r='1.6' fill='%23000' stroke='none'/%3E%3Cg transform='translate(264.1 327.9) rotate(1 12 12) scale(1.26)'%3E%3Cpath d='M12 8c-2-2-7-1.5-7 4 0 4 3 8 5 8 1 0 1.5-.5 2-.5s1 .5 2 .5c2 0 5-4 5-8 0-5.5-5-6-7-4zM12 8c0-2 1-4 3-5'/%3E%3C/g%3E%3Cg transform='translate(337.6 341.2) rotate(-20 12 12) scale(1.00)'%3E%3Cpath d='M12 3l2.6 5.6 6 .7-4.5 4.1 1.3 6L12 16.4 6.6 19.4l1.3-6L3.4 9.3l6-.7z'/%3E%3C/g%3E%3C/svg%3E") 0 0/var(--wsz,380px) repeat}
.chat-msgs{background:transparent!important;position:relative}
[data-wall="doodle"]{--wbg:#efeae2;--wink:#6d5f4b;--wop:.15}
[data-wall="plain"]{--wbg:var(--cbg);--wop:0}
[data-wall="campus"]{--wbg:radial-gradient(at 15% 10%,#c9f0de 0,transparent 55%),radial-gradient(at 90% 30%,#d4eefa 0,transparent 50%),radial-gradient(at 40% 95%,#e6f6c9 0,transparent 55%),#eef8f1;--wink:#0f6b55;--wop:.13}
[data-wall="ocean"]{--wbg:radial-gradient(at 10% 15%,#bcd8ff 0,transparent 55%),radial-gradient(at 85% 20%,#dcd0ff 0,transparent 50%),radial-gradient(at 60% 95%,#c4f1f4 0,transparent 55%),#eaf1fd;--wink:#2c46b8;--wop:.12}
[data-wall="sunset"]{--wbg:radial-gradient(at 10% 10%,#ffd0bb 0,transparent 55%),radial-gradient(at 90% 25%,#ffc6dd 0,transparent 50%),radial-gradient(at 50% 100%,#ffe7a8 0,transparent 55%),#fff1e8;--wink:#b2410f;--wop:.13}
[data-wall="brand"]{--wbg:radial-gradient(at 0% 0%,color-mix(in srgb,var(--brand) 28%,#fff) 0,transparent 60%),radial-gradient(at 100% 100%,color-mix(in srgb,var(--accent,#f5b400) 30%,#fff) 0,transparent 55%),color-mix(in srgb,var(--brand) 7%,#fff);--wink:var(--brand);--wop:.12}
[data-wall="waves"]{--wbg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='220' viewBox='0 0 600 220'%3E%3Cpath d='M0 60c100-40 200 40 300 0s200-40 300 0v160H0z' fill='%23fff' opacity='.22'/%3E%3Cpath d='M0 120c100-40 200 40 300 0s200-40 300 0v100H0z' fill='%23fff' opacity='.18'/%3E%3Cpath d='M0 175c100-35 200 35 300 0s200-35 300 0v45H0z' fill='%23fff' opacity='.16'/%3E%3C/svg%3E") center bottom/100% auto no-repeat,linear-gradient(180deg,#5b8def,#7c5ce0 60%,#a35bd6);--wink:#fff;--wop:.1}
[data-wall="aurora"]{--wbg:radial-gradient(at 20% 20%,#2fd6a6 0,transparent 45%),radial-gradient(at 80% 10%,#6f5cf0 0,transparent 50%),radial-gradient(at 60% 90%,#e34fb4 0,transparent 50%),#14152e;--wink:#fff;--wop:.08}
[data-wall="midnight"]{--wbg:radial-gradient(at 80% 0%,#33307f 0,transparent 55%),linear-gradient(180deg,#0f172a,#1b1e48);--wink:#b9c4ff;--wop:.12}
html[data-theme="dark"] [data-wall="doodle"]{--wbg:#0b141a;--wink:#9aa8b1;--wop:.07}
html[data-theme="dark"] [data-wall="campus"]{--wbg:radial-gradient(at 15% 10%,#0e3b2f 0,transparent 55%),radial-gradient(at 90% 30%,#0e2c3b 0,transparent 50%),#08161a;--wink:#7fe3c0;--wop:.08}
html[data-theme="dark"] [data-wall="ocean"]{--wbg:radial-gradient(at 10% 15%,#14305e 0,transparent 55%),radial-gradient(at 85% 20%,#2a1d5c 0,transparent 50%),#0b1224;--wink:#9fb4ff;--wop:.08}
html[data-theme="dark"] [data-wall="sunset"]{--wbg:radial-gradient(at 10% 10%,#4a1c0c 0,transparent 55%),radial-gradient(at 90% 25%,#4a1030 0,transparent 50%),#1c0f0b;--wink:#ffb38a;--wop:.08}
html[data-theme="dark"] [data-wall="brand"]{--wbg:radial-gradient(at 0% 0%,color-mix(in srgb,var(--brand) 45%,#000) 0,transparent 60%),#120d0d;--wink:#fff;--wop:.07}
.walls{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.walls button{position:relative;isolation:isolate;overflow:hidden;background:none!important;height:96px!important;align-items:flex-end;justify-content:flex-start!important;padding:.4rem!important}
.walls button span{background:rgba(255,255,255,.9);color:#222;border-radius:6px;padding:.05rem .4rem;font-size:.72rem}
.walls button.wallbg{--wsz:220px}
/* Bubble colours */
html[data-bubble="blue"]{--mine:#d4e8ff}html[data-bubble="purple"]{--mine:#e6dcff}html[data-bubble="peach"]{--mine:#ffe1cc}html[data-bubble="gold"]{--mine:#fff1b8}
html[data-theme="dark"][data-bubble="blue"]{--mine:#134a8e}html[data-theme="dark"][data-bubble="purple"]{--mine:#4b2f8f}html[data-theme="dark"][data-bubble="peach"]{--mine:#7a3a16}html[data-theme="dark"][data-bubble="gold"]{--mine:#6b5410}
.bubbles{display:flex;gap:.6rem;flex-wrap:wrap}
.bubbles button{width:44px;height:44px;border-radius:50%;border:3px solid var(--card);box-shadow:0 0 0 2px var(--line);cursor:pointer}
.bubbles button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--brand)}

/* Online dot */
.chat-av{position:relative}
.chat-av.on::after{content:"";position:absolute;right:0;bottom:1px;width:12px;height:12px;border-radius:50%;background:#25d366;border:2px solid var(--card)}
.chat-av.small.on::after{width:10px;height:10px}
.chat-sub.on{color:#1e9e50;font-weight:600}

/* Ticks. One grey tick sent, two grey ticks delivered, two blue ticks seen. */
.chat-tick svg{width:16px;height:16px;fill:#8696a0;vertical-align:-3px;margin-left:2px}
.chat-tick.seen svg{fill:#34b7f1}

/* Hold a message for its options */
.chat-bub{position:relative}
.chat-more{position:absolute;top:2px;right:2px;width:24px;height:22px;border:0;border-radius:6px;background:inherit;cursor:pointer;display:none;place-items:center;padding:0;z-index:1}
.chat-more svg{width:20px;height:20px;fill:var(--muted)}
@media (hover:hover){.chat-m:hover .chat-more{display:grid}}
@media (hover:none){.chat-bub{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}}
.chat-m.picked .chat-bub{box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 50%,transparent)}
.chat-m.picked{background:color-mix(in srgb,var(--brand) 10%,transparent);border-radius:10px}
.chat-menu-bg{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.08)}
.chat-menu{position:fixed;min-width:170px;background:var(--card);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.22);padding:.3rem;display:flex;flex-direction:column;animation:chatpop .12s ease-out}
.chat-menu button{display:flex;align-items:center;gap:.75rem;padding:.7rem .8rem;border:0;background:none;color:var(--ink);font:inherit;font-size:.95rem;text-align:left;border-radius:8px;cursor:pointer}
.chat-menu button:hover,.chat-menu button:focus{background:var(--soft);outline:none}
.chat-menu svg{width:19px;height:19px;fill:var(--muted)}
.chat-menu .danger,.chat-menu .danger svg{color:var(--red);fill:var(--red)}
@keyframes chatpop{from{transform:scale(.92);opacity:0}}

/* Alerts prompt in the chat list */
.chat-alerts{display:flex;align-items:center;gap:.6rem;margin:0 .75rem .5rem;padding:.6rem .7rem;border-radius:10px;background:color-mix(in srgb,#25d366 12%,var(--card));font-size:.85rem}
.chat-alerts span:nth-child(2),.chat-alerts>span:only-child{flex:1}
.chat-alerts-ico svg{width:22px;height:22px;fill:#1e9e50}
/* One-On-One requests */
.bk-group{margin:0 0 1.4rem}.bk-group h3{display:flex;align-items:center;gap:.5rem;margin:0 0 .6rem}
.bk-group summary{cursor:pointer;color:var(--brand);font-weight:600;margin-bottom:.5rem}
.bk-count{font-size:.75rem;padding:.1rem .5rem;border-radius:99px;background:var(--soft);color:var(--muted)}.bk-count.wait{background:#fdf1dc;color:#8a5a00}.bk-count.ok{background:#e6f4ec;color:#1e7b45}
.bk-row{display:flex;gap:.9rem;padding:1rem;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--line2);border-radius:14px;margin-bottom:.6rem;box-shadow:var(--shadow)}
.bk-row.ok{border-left-color:#1e7b45}.bk-row.wait{border-left-color:#c27c0e}.bk-row.off{opacity:.8}
.bk-row .bk-date{flex:0 0 56px;height:fit-content;display:flex;flex-direction:column;align-items:center;padding:.35rem 0;border-radius:12px;background:var(--soft);color:var(--brand);font-size:.7rem;font-weight:600;text-transform:uppercase}
.bk-row .bk-date b{font-size:1.45rem;line-height:1.1}
.bk-main{flex:1;min-width:0}.bk-title{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between}
.bk-meta{display:flex;flex-wrap:wrap;gap:.3rem .8rem;color:var(--muted);font-size:.88rem;margin:.2rem 0}
.bk-topic{margin:.45rem 0 0;font-size:.92rem}
.bk-pill{font-size:.72rem;font-weight:700;padding:.15rem .55rem;border-radius:99px;background:var(--soft);color:var(--muted);white-space:nowrap}.bk-pill.ok{background:#e6f4ec;color:#1e7b45}.bk-pill.wait{background:#fdf1dc;color:#8a5a00}
.bk-main .btn-row{margin-top:.7rem}
html[data-theme="dark"] .bk-pill.ok,html[data-theme="dark"] .bk-count.ok{background:#12301f;color:#7fdca4}html[data-theme="dark"] .bk-pill.wait,html[data-theme="dark"] .bk-count.wait{background:#33260b;color:#f3cf7a}
/* Chat stays still. The page under it never scrolls, and on a phone an open chat covers the screen. */
html:has(body.chat-mode),body.chat-mode{overflow:hidden;overscroll-behavior:none;height:100%}
.chat-msgs,.chat-rooms{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.chat-compose textarea{font-size:16px}
@media (max-width:760px){
  body.chat-mode .chat.open{position:fixed;left:0;right:0;top:0;z-index:70;width:100%;border:0;border-radius:0;padding-top:env(safe-area-inset-top);box-sizing:border-box}
  body.chat-mode .chat.open .chat-compose,body.chat-mode .chat.open .chat-rec{padding-bottom:max(.5rem,env(safe-area-inset-bottom))}
}
.chat-replybar .chat-quote{flex:1;min-width:0;width:auto}.chat-replybar .chat-x,.chat-pick .chat-x{flex:none}
body.chat-mode .modal-back{z-index:90}body.chat-mode .toasts{z-index:95}
/* Printing desk */
.pr-count{display:inline-block;margin-left:.35rem;font-size:.72rem;font-weight:700;background:var(--brand);color:#fff;border-radius:99px;padding:0 .45rem}
.pr-card{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--line2);border-radius:14px;padding:1rem;margin-bottom:.7rem;box-shadow:var(--shadow)}
.pr-card.pr-paid{border-left-color:#1d5fb8}.pr-card.pr-printing{border-left-color:#c27c0e}.pr-card.pr-ready{border-left-color:#1e7b45}
.pr-top{display:flex;justify-content:space-between;gap:.8rem;align-items:flex-start}
.pr-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.35rem;font-weight:700;letter-spacing:.08em;color:var(--brand)}
.pr-who{font-size:.92rem;margin-top:.1rem}
.pr-side{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem}.pr-side small{color:var(--muted);font-size:.78rem}
.pr-spec{margin:.6rem 0;font-size:.9rem;color:var(--muted)}.pr-spec strong{color:var(--ink)}
.pr-warn{background:#fff6e5;color:#7a4f00;border-radius:10px;padding:.55rem .75rem;font-size:.88rem;margin:.4rem 0}
.pr-note{background:var(--soft);border-radius:10px;padding:.5rem .75rem;font-size:.9rem;margin:.4rem 0}
.pr-files{list-style:none;margin:.5rem 0 .2rem;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pr-files li{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-top:1px solid var(--line)}.pr-files li:first-child{border-top:0}
.pr-ico{flex:none;width:34px;height:24px;border-radius:5px;display:grid;place-items:center;font-size:.6rem;font-weight:800;color:#fff;background:#888}
.pr-ico-pdf{background:#d93025}.pr-ico-word{background:#2b579a}.pr-ico-image{background:#1e8e5a}
.pr-fname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}
.pr-pg{font-size:.8rem;color:var(--muted);white-space:nowrap}.pr-pg.warn{color:#8a5a00;font-weight:600}
.pr-card .btn-row{margin-top:.8rem}
html[data-theme="dark"] .pr-warn{background:#2a2312;color:#f3dfb2}
@media (max-width:560px){.pr-pg{display:none}}
.pr-base{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.4rem 1rem}
.pr-fin{display:flex;flex-direction:column;gap:.5rem;margin:.6rem 0}
.pr-fin-row{display:grid;grid-template-columns:auto minmax(0,1fr) 120px 170px auto auto;gap:.5rem;align-items:center;padding:.55rem;border:1px solid var(--line);border-radius:12px}
.pr-fin-row input[type=text],.pr-fin-row select,.pr-naira input{min-height:40px;width:100%}
.pr-naira{display:flex;align-items:center;gap:.25rem;color:var(--muted)}
.pr-grp{font-size:.7rem;font-weight:700;text-transform:uppercase;border-radius:99px;padding:.15rem .5rem;background:var(--soft);color:var(--muted)}
.pr-grp.binding{background:#e8f0fc;color:#1d5fb8}.pr-grp.extra{background:#fdf1dc;color:#8a5a00}
.pr-on{display:flex;align-items:center;gap:.35rem;font-size:.85rem;white-space:nowrap;cursor:pointer}
.pr-switch{appearance:none;-webkit-appearance:none;width:40px;height:22px;border-radius:99px;background:var(--line2);position:relative;cursor:pointer;margin:0;transition:background .2s}
.pr-switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}
.pr-switch:checked{background:#1e7b45}.pr-switch:checked::after{transform:translateX(18px)}
@media (max-width:760px){.pr-fin-row{grid-template-columns:auto minmax(0,1fr);}.pr-fin-row .pr-naira,.pr-fin-row select{grid-column:span 1}.pr-fin-row .pr-on,.pr-fin-row .btn{justify-self:start}}
.pr-fin-row{display:flex!important;flex-wrap:wrap;align-items:center;gap:.5rem}
.pr-fin-row .pr-grp{flex:none}
.pr-fin-row>input[type=text]{flex:1 1 180px;min-width:0;width:auto}
.pr-fin-row .pr-naira{flex:1 1 110px;min-width:0}
.pr-fin-row .pr-naira input{flex:1;min-width:0}
.pr-fin-row select{flex:1 1 150px;min-width:0;width:auto}
.pr-fin-row .pr-on,.pr-fin-row .btn{flex:none}
.pr-switch{width:40px!important;height:22px!important;min-height:0!important;padding:0!important;border:0!important;flex:none}
@media (max-width:760px){.pr-fin-row>input[type=text]{flex-basis:calc(100% - 90px)}}
/* Mentions */
.chat-men{display:flex;flex-direction:column;background:var(--card);border-top:1px solid var(--line);max-height:260px;overflow-y:auto;padding:.3rem}
.chat-men-o{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border:0;background:none;border-radius:10px;cursor:pointer;font:inherit;color:var(--ink);text-align:left}
.chat-men-o.on,.chat-men-o:hover{background:var(--soft)}
.chat-men-o .chat-av.small{flex-basis:32px;width:32px;height:32px;font-size:.72rem}
.chat-mention{color:#1d5fb8;font-weight:700}
.chat-mention.me{background:#fff1c2;color:#7a4f00;border-radius:5px;padding:0 3px}
html[data-theme="dark"] .chat-mention{color:#7fb2ff}html[data-theme="dark"] .chat-mention.me{background:#4a3a0a;color:#ffe08a}
.pr-deliver{background:#e8f0fc;color:#123e7a;border-radius:10px;padding:.5rem .75rem;font-size:.9rem;margin:.4rem 0}
html[data-theme="dark"] .pr-deliver{background:#13243e;color:#bcd4ff}
.pr-prods{display:flex;flex-direction:column;gap:.6rem;margin:.6rem 0}
.pr-prod{border:1px solid var(--line);border-radius:14px;padding:.7rem .9rem;background:var(--card)}
.pr-prod>summary{cursor:pointer;font-size:1rem;list-style:none}.pr-prod[open]>summary{margin-bottom:.6rem}
.pr-prod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 1rem}
.pr-sub{border-top:1px dashed var(--line);margin-top:.6rem;padding-top:.6rem}
.pr-sub-h{font-weight:700;font-size:.9rem;margin-bottom:.4rem}
.pr-sub .pr-fin-row{margin-bottom:.4rem}
/* Staff Rules */
.rules-hero{border-left:4px solid var(--line2)}.rules-hero.on{border-left-color:var(--green)}
.rules-hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.rules-hero-top h3{margin:0 0 2px}
.rules-list{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.rules-row{display:flex;align-items:center;gap:10px;font-weight:500;line-height:1.9}.rules-row input[type=checkbox]{width:18px;height:18px;flex:none}
.rules-num{width:64px!important;display:inline-block!important;padding:4px 8px!important;margin:0 4px;text-align:center}
.rules-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.rules-person{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);cursor:pointer}
.rules-person input{width:18px;height:18px;margin-top:2px;flex:none}.rules-person span{display:flex;flex-direction:column;min-width:0}
.switch{position:relative;display:inline-flex;flex:none;cursor:pointer}.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch-ui{width:52px;height:30px;border-radius:99px;background:var(--line2);position:relative;transition:background .15s}
.switch-ui::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.switch input:checked+.switch-ui{background:var(--green)}.switch input:checked+.switch-ui::after{transform:translateX(22px)}
.switch input:focus-visible+.switch-ui{outline:2px solid var(--brand);outline-offset:2px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tunes{flex-wrap:wrap}
.chat-draft{color:#1fa855;font-weight:700}
/* Message box with the camera inside, as in WhatsApp */
.chat-boxwrap{flex:1;min-width:0;display:flex;align-items:flex-end;background:var(--card);border-radius:22px}
.chat-boxwrap textarea{flex:1;min-width:0;background:transparent!important;border-radius:22px}
.chat-boxwrap .chat-ico{flex:0 0 40px;height:42px;color:var(--muted)}.chat-boxwrap .chat-ico svg{width:22px;height:22px;fill:currentColor}
/* @ marker for chats where you were mentioned */
.chat-at{background:#25a55a;color:#fff;border-radius:99px;font-size:.72rem;font-weight:800;width:1.25rem;height:1.25rem;display:grid;place-items:center;flex-shrink:0;margin-right:.25rem}
/* Reactions */
.chat-rx{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 -2px}
.chat-rx-b{display:inline-flex;align-items:center;gap:3px;border:1px solid var(--line);background:var(--card);border-radius:99px;padding:1px 7px;font-size:14px;line-height:1.5;cursor:pointer;color:var(--ink)}
.chat-rx-b span{font-size:12px;font-weight:700;color:var(--muted)}.chat-rx-b.me{border-color:color-mix(in srgb,var(--brand) 55%,transparent);background:color-mix(in srgb,var(--brand) 12%,var(--card))}
.chat-rxbar{display:flex;gap:2px;padding:4px 4px 6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.chat-rxbar button{flex:1;min-width:36px;height:40px;border:0;background:none;border-radius:50%;font-size:24px;cursor:pointer;transition:transform .1s}
.chat-rxbar button:hover,.chat-rxbar button:focus-visible{background:var(--soft);transform:scale(1.15)}.chat-rxbar button.on{background:color-mix(in srgb,var(--brand) 18%,transparent)}
.chat-menu{min-width:260px}
/* Voice notes */
.vn{display:flex;align-items:center;gap:10px;min-width:220px;max-width:280px;padding:4px 2px 2px}
.vn-play{flex:0 0 40px;height:40px;border-radius:50%;border:0;background:var(--brand);color:#fff;display:grid;place-items:center;cursor:pointer}
.vn-play svg{width:20px;height:20px;fill:#fff}.vn.loading .vn-play{opacity:.6}
.vn-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.vn-bars{display:flex;align-items:center;gap:2px;height:28px;cursor:pointer}
.vn-bars i{flex:1;min-width:2px;border-radius:2px;background:color-mix(in srgb,var(--ink) 30%,transparent)}
.vn-bars i.on{background:var(--brand)}
.vn-row{display:flex;justify-content:space-between;align-items:center}
.vn-time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.vn-speed{border:0;background:color-mix(in srgb,var(--ink) 12%,transparent);color:var(--ink);border-radius:99px;font-size:11px;font-weight:800;padding:1px 7px;cursor:pointer}
/* Recording bar */
.chat-rec{gap:.5rem}.chat-rec-lv{display:flex;align-items:center;gap:2px;height:26px;width:110px;overflow:hidden;flex:none}
.chat-rec-lv i{width:3px;flex:none;border-radius:2px;background:#e53935}
.chat-rec-hint{transition:transform .05s;white-space:nowrap;overflow:hidden}
.chat-rec:not(.locked) .chat-ico,.chat-rec:not(.locked) .chat-round{visibility:hidden}
@media (max-width:420px){.chat-rec-lv{width:70px}}
/* Photo preview */
.ps{position:fixed;inset:0;z-index:120;background:#0b0d10;display:flex;flex-direction:column;color:#fff}
.ps-top{display:flex;align-items:center;gap:12px;padding:12px 14px;font-weight:600}
.ps-x{width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:18px;cursor:pointer}
.ps-img{flex:1;min-height:0;display:grid;place-items:center;padding:8px}.ps-img img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.ps-bar{display:flex;gap:10px;align-items:center;padding:10px 12px max(12px,env(safe-area-inset-bottom))}
.ps-cap{flex:1;min-width:0;height:46px;border-radius:23px;border:0;padding:0 16px;font-size:16px;background:#1f242b;color:#fff}
.ps-send svg{fill:#fff}
.chat-pane.drop{outline:3px dashed var(--brand);outline-offset:-8px}
/* Profile photos */
.chat-av.pic{padding:0;background:var(--soft)}.chat-av.pic img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.chat-who{display:flex;align-items:center;gap:6px}
.chat-av.tiny{width:20px;height:20px;min-width:20px;font-size:9px;flex:0 0 20px}
/* Long press opens the menu, not text selection */
.chat-bub{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
@media (hover:hover){.chat-bub{-webkit-user-select:text;user-select:text}}
.chat-pane-head h3{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Your photo in Appearance */
.me-photo{display:flex;align-items:center;gap:14px}.me-photo .chat-av{width:64px;height:64px;font-size:22px;flex:0 0 64px}
/* Voice calls */
.call{position:fixed;inset:0;z-index:200;background:radial-gradient(120% 90% at 50% 0%,#1f3b63 0%,#0d1622 70%);color:#fff;display:flex;flex-direction:column;align-items:center;padding:max(18px,env(safe-area-inset-top)) 20px max(28px,env(safe-area-inset-bottom));text-align:center}
.call-top{display:flex;align-items:center;gap:12px;align-self:stretch;font-size:13px;letter-spacing:.04em;margin-bottom:7vh;min-height:44px}.call-top span{opacity:.8}
.call-face{width:132px;height:132px;border-radius:50%;background:var(--brand);display:grid;place-items:center;font-size:44px;font-weight:700;overflow:hidden;box-shadow:0 0 0 10px rgba(255,255,255,.06),0 0 0 22px rgba(255,255,255,.03)}
.call-face img{width:100%;height:100%;object-fit:cover}
.call h2{margin:22px 0 6px;font-size:26px;color:#fff}
.call-st{font-size:16px;opacity:.85;font-variant-numeric:tabular-nums;min-height:1.4em}
.call-btns{margin-top:auto;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.call-b{display:flex;flex-direction:column;align-items:center;gap:8px;border:0;background:none;color:#fff;font:inherit;font-size:13px;cursor:pointer}
.call-b svg{width:66px;height:66px;padding:18px;border-radius:50%;fill:#fff;background:rgba(255,255,255,.16);box-sizing:border-box}
.call-b.end svg{background:#e53935;transform:rotate(135deg)}.call-b.answer svg{background:#22a454;animation:callpulse 1.2s infinite}
.call-b.mute.on svg{background:#fff;fill:#0d1622}
@keyframes callpulse{0%{box-shadow:0 0 0 0 rgba(34,164,84,.6)}100%{box-shadow:0 0 0 18px rgba(34,164,84,0)}}
.chat-call svg{width:22px;height:22px;fill:currentColor}
.plain-steps{margin:0 0 12px;padding-left:20px;line-height:1.7}
/* Chat info */
.chat-head-text{background:none;border:0;padding:0;text-align:left;color:inherit;font:inherit;cursor:pointer;flex:1;min-width:0}
.ci{display:flex;flex-direction:column;gap:10px}
.ci-person{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}.ci-person h3{margin:8px 0 0}
.chat-av.big{width:96px;height:96px;flex:0 0 96px;font-size:32px}
.ci-roles{text-align:center;color:var(--muted);margin:0}.ci-actions{justify-content:center}
.ci-list{display:flex;flex-direction:column;max-height:60vh;overflow:auto}
.ci-row{display:flex;align-items:center;gap:12px;padding:8px 4px;border-bottom:1px solid var(--line)}.ci-row.tap{cursor:pointer}.ci-row.tap:hover{background:var(--soft)}
.ci-row .chat-av{width:42px;height:42px;flex:0 0 42px}.ci-main{display:flex;flex-direction:column;min-width:0;flex:1}
.ci-role{color:var(--muted);text-align:right;max-width:40%;font-size:12px}
/* Call lines and cards in chat */
.chat-m.sys{display:flex;justify-content:center;margin:8px 0}
.chat-callline{display:inline-flex;align-items:center;gap:8px;background:var(--card);border-radius:14px;padding:7px 12px;box-shadow:0 1px .5px rgba(0,0,0,.13);font-size:14px}
.chat-callline svg{width:16px;height:16px;fill:#22a454}.chat-callline.missed svg{fill:#e53935}.chat-callline.missed span{color:#c62828;font-weight:600}
.chat-callline small{color:var(--muted);font-size:11px}
.chat-callback{border:0;background:color-mix(in srgb,#22a454 14%,transparent);color:#16803c;font-weight:700;font-size:13px;border-radius:99px;padding:4px 10px;cursor:pointer}
.cc{display:flex;align-items:center;gap:12px;width:min(340px,92%);padding:14px;border-radius:18px;color:#fff;background:linear-gradient(135deg,#243b6b,#3b2a6b);box-shadow:0 10px 26px -12px rgba(36,59,107,.7)}
.cc.group{background:linear-gradient(135deg,#126b4a,#1f4e6b)}
.cc.is-ended{filter:grayscale(.65);opacity:.8}
.cc-ico{width:46px;height:46px;flex:0 0 46px;border-radius:14px;background:rgba(255,255,255,.16);display:grid;place-items:center}.cc-ico svg{width:24px;height:24px;fill:#fff}
.cc.is-live .cc-ico{animation:callpulse 1.4s infinite}
.cc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.cc-main small{opacity:.8;font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.cc-main strong{font-size:16px;line-height:1.25}.cc-when{font-size:13px;opacity:.9}
.cc-stat{font-size:12px;opacity:.9}.cc-stat.live{color:#7dffb0;font-weight:700}
.cc-join{border:0;background:#fff;color:#1f2c55;font-weight:800;border-radius:12px;padding:10px 16px;cursor:pointer}
/* Group call screen */
.gc{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;color:#fff;background:radial-gradient(130% 80% at 50% 0%,#2a2560 0%,#101425 60%,#0a0d18 100%);padding:max(14px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom))}
.gc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.gc-kind{font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.7;font-weight:700}.gc h2{margin:2px 0 0;font-size:20px;color:#fff}
.gc-clock{font-variant-numeric:tabular-nums;background:rgba(255,255,255,.1);padding:4px 10px;border-radius:99px;font-size:14px}
.gc-endall{border:1px solid rgba(255,255,255,.3);background:none;color:#ffb4b4;border-radius:99px;padding:5px 12px;font-size:13px;cursor:pointer}
.gc-tiles{flex:1;min-height:0;display:grid;gap:12px;align-content:center;grid-template-columns:repeat(2,minmax(0,1fr));padding:18px 0}
.gc-tiles[data-n="1"]{grid-template-columns:1fr}
@media (min-width:700px){.gc-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}.gc-tiles[data-n="2"]{grid-template-columns:repeat(2,minmax(0,220px));justify-content:center}}
.gc-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);transition:transform .2s}
.gc-av{width:84px;height:84px;border-radius:50%;background:#4b3fa8;display:grid;place-items:center;font-size:28px;font-weight:700;overflow:hidden;box-shadow:0 0 0 3px transparent;transition:box-shadow .12s}
.gc-av img{width:100%;height:100%;object-fit:cover}
.gc-tile.talking .gc-av{box-shadow:0 0 0 4px #7dffb0,0 0 24px 4px rgba(125,255,176,.45)}
.gc-tile.connecting{opacity:.55}.gc-tile.connecting .gc-name::after{content:" , connecting";font-size:11px;opacity:.8}
.gc-name{font-weight:600;font-size:14px;text-align:center}
.gc-flags{position:absolute;top:8px;right:8px;display:flex;gap:4px}.gc-handflag{font-size:20px;animation:wave 1s ease-in-out infinite}
.gc-mutedflag svg{width:18px;height:18px;fill:#ff8a80}
@keyframes wave{0%,100%{transform:rotate(0)}50%{transform:rotate(14deg)}}
.gc-bar{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.gc-bar .call-b svg{width:56px;height:56px;padding:15px}.gc-bar .call-b.on svg{background:#fff;fill:#101425}
.gc-bar .call-b.end svg{transform:none}
.gc-rx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.gc-float{position:absolute;bottom:110px;display:flex;flex-direction:column;align-items:center;animation:floatup 3.2s ease-out forwards}
.gc-float span{font-size:38px}.gc-float small{font-size:11px;background:rgba(0,0,0,.4);padding:1px 6px;border-radius:99px}
@keyframes floatup{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1;transform:translateY(-20px) scale(1.1)}100%{transform:translateY(-55vh) scale(1);opacity:0}}
.gc-pick{position:absolute;bottom:110px;left:50%;transform:translateX(-50%);display:flex;gap:4px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);padding:8px;border-radius:99px}
.gc-pick button{border:0;background:none;font-size:30px;cursor:pointer;border-radius:50%;width:48px;height:48px}.gc-pick button:hover{background:rgba(255,255,255,.15)}
/* New meeting form */
.mt-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.mt-opt{display:flex;gap:8px;align-items:flex-start;border:1.5px solid var(--line);border-radius:12px;padding:10px;cursor:pointer;font-weight:400!important;margin:0!important}
.mt-opt span{display:flex;flex-direction:column}.mt-opt small{color:var(--muted)}
.mt-when{display:flex;gap:8px;margin-top:10px}.mt-when input{flex:1}
body:has(.gc) .modal-back,body:has(.call) .modal-back{z-index:300}
/* Minimised call */
.call.min,.gc.min{display:none}
.call-min{flex:0 0 42px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.14);display:grid;place-items:center;cursor:pointer;z-index:2}
.call-min svg{width:26px;height:26px;fill:#fff}
.gc-head{min-height:42px;align-items:center}.gc-title{flex:1;min-width:0}.gc-title h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call-pill{position:fixed;top:0;left:0;right:0;z-index:210;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:0;height:calc(40px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 14px 0;background:#16803c;color:#fff;font:inherit;font-weight:600;box-shadow:0 2px 10px rgba(0,0,0,.2);cursor:pointer;box-sizing:border-box}
.call-pill span:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.call-pill b{font-variant-numeric:tabular-nums}.call-pill small{opacity:.85;font-weight:400}
.call-pill-dot{width:9px;height:9px;border-radius:50%;background:#7dffb0;animation:chatpulse 1s infinite}
body:has(.call-pill){padding-top:40px}body:has(.call-pill) .top{top:40px}body:has(.call-pill) .chat.open{padding-top:calc(40px + env(safe-area-inset-top))}
body:has(.call:not(.min)) .top,body:has(.gc:not(.min)) .top{visibility:hidden}
.call-b.spk.on svg{background:#fff;fill:#0d1622}
/* Finish setting up */
.setup{border:1.5px solid color-mix(in srgb,var(--brand) 30%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 6%,var(--card)),var(--card))}
.setup-head{display:flex;align-items:center;gap:14px}.setup-head h3{margin:0}.setup-head p{margin:2px 0 0}
.setup-later{margin-left:auto;border:0;background:none;color:var(--muted);cursor:pointer;font:inherit}
.setup-ring{--p:0;width:54px;height:54px;flex:0 0 54px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--brand) calc(var(--p)*1%),var(--line) 0)}
.setup-ring span{width:42px;height:42px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-size:12px;font-weight:800}
.setup-steps{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.setup-steps li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.setup-steps li>div{flex:1;display:flex;flex-direction:column;min-width:0}
.setup-tick{width:26px;height:26px;flex:0 0 26px;border-radius:50%;border:2px solid var(--line2);display:grid;place-items:center;font-weight:800;color:#fff}
.setup-steps li.done{opacity:.65}.setup-steps li.done .setup-tick{background:var(--green);border-color:var(--green)}
/* Bigger, clearer photos */
.chat-pane-head .chat-av.small{flex-basis:44px;width:44px;height:44px}
.chat-av.big{width:160px;height:160px;flex:0 0 160px;font-size:48px;cursor:zoom-in}
.chat-av.tiny{width:26px;height:26px;min-width:26px;flex:0 0 26px;font-size:10px}
.me-photo .chat-av{width:110px;height:110px;flex:0 0 110px;font-size:34px}
.call-face{width:160px;height:160px;font-size:52px}
.gc-av{width:96px;height:96px}
.pv{position:fixed;inset:0;z-index:400;background:rgba(5,8,14,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px}
.pv-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:max(12px,env(safe-area-inset-top)) 16px 12px;color:#fff;font-weight:600}
.pv-x{width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:18px;cursor:pointer}
.pv img{max-width:min(92vw,640px);max-height:80vh;border-radius:14px;object-fit:contain}

/* Video in calls */
.mirror{transform:scaleX(-1)}
.call>*{position:relative;z-index:2}
.call>.call-rv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;z-index:0;background:#000}
.call::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;display:none;background:linear-gradient(rgba(0,0,0,.6),transparent 24%,transparent 66%,rgba(0,0,0,.65))}
.call.rvid::before,.call.rvid>.call-rv{display:block}
.call.rvid .call-face{display:none}.call.rvid .call-top{margin-bottom:10px}.call.rvid h2{margin-top:0;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.call>.call-lv{position:absolute;display:none;z-index:3;right:14px;top:calc(150px + env(safe-area-inset-top));width:28vw;max-width:150px;aspect-ratio:3/4;object-fit:cover;border-radius:14px;background:#000;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.call.lvid>.call-lv{display:block}
.call-b.cam.on svg{background:#fff;fill:#0d1622}
.gc-tile{overflow:hidden;min-height:140px;justify-content:center}
.gc-vid{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.gc-tile.cam .gc-vid{display:block}.gc-tile.cam .gc-av{visibility:hidden}
.gc-tile.cam .gc-name{position:absolute;left:8px;bottom:8px;z-index:1;background:rgba(0,0,0,.5);padding:2px 9px;border-radius:99px}
.gc-tile.cam .gc-flags{z-index:1}.gc-tile.cam.talking{box-shadow:inset 0 0 0 3px #7dffb0}
.gc-bar{gap:10px}.gc-bar .call-b{font-size:12px}.gc-bar .call-b svg{width:52px;height:52px;padding:14px}
.gc-bar .call-b.cam.on svg{background:#fff;fill:#101425}

/* Numbers on the menu for things waiting */
.nav-c{margin-left:auto;background:var(--brand);color:#fff;font-size:.7rem;font-weight:800;border-radius:99px;padding:.05rem .45rem;min-width:1.1rem;text-align:center;font-style:normal}
.nav-c.late{background:#e53935}
.bottom .nav-c,.more-btn .nav-c{position:absolute;top:2px;left:calc(50% + 6px);margin:0}
.more-btn{position:relative}
.more-list a .nav-c{margin-left:auto}
.tab .count{margin-left:6px;background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand);border-radius:99px;padding:0 .45rem;font-size:.75rem;font-weight:800}
.tab.on .count{background:var(--brand);color:#fff}
/* Tabs wrap onto more lines so none are hidden off screen */
.tabs{flex-wrap:wrap;overflow:visible;gap:.4rem;border-bottom:0;padding-bottom:.25rem}
.tab{border:1px solid var(--line);border-radius:99px;padding:.45rem .9rem;margin:0;background:var(--card);color:var(--text,inherit);font-size:.9rem}
.tab:hover{border-color:var(--brand)}
.tab.on{background:var(--brand);border-color:var(--brand);color:#fff}
.tab.on .count{background:#fff;color:var(--brand)}
.chat-up{display:flex;gap:8px;align-items:center;justify-content:center;font-size:13px;padding:6px;color:var(--muted);background:var(--card);border-top:1px solid var(--line)}.chat-up b{font-variant-numeric:tabular-nums;color:var(--brand)}
/* Phones that draw the app under the status bar (newer Android, iPhone home screen apps). Keep the top bar below it. */
.top{padding-top:calc(.55rem + env(safe-area-inset-top));min-height:calc(56px + env(safe-area-inset-top))}
.side{top:calc(56px + env(safe-area-inset-top))}
body:has(.call-pill){padding-top:calc(40px + env(safe-area-inset-top))}
body:has(.call-pill) .top{top:calc(40px + env(safe-area-inset-top));padding-top:.55rem;min-height:56px}
.modal{max-height:calc(92vh - env(safe-area-inset-top))}
.pay-search input{flex:1;min-width:0;width:100%}
.sem-row{display:grid;grid-template-columns:1fr;gap:6px;padding:10px 0;border-bottom:1px solid var(--line)}.sem-row label{display:flex;flex-direction:column;gap:2px}@media (min-width:640px){.sem-row{grid-template-columns:2fr 1fr 1fr auto;align-items:end}}
.pay-stats{margin:10px 0}
.pay-bulk{position:sticky;top:calc(64px + env(safe-area-inset-top));z-index:15;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;background:var(--card);border:1.5px solid var(--brand);border-radius:14px;padding:10px 12px;margin:8px 0;box-shadow:0 6px 20px rgba(0,0,0,.08)}
.pb-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}.pb-sem{display:flex;flex-direction:column;gap:2px}
.pay-tickcell{width:34px}.pay-tick{width:20px;height:20px}.pay-row.ticked{background:color-mix(in srgb,var(--brand) 6%,transparent)}
.also-apps { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line, #e5e5e5); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.also-apps strong { flex-basis: 100%; font-size: .85rem; }
.also-apps a { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 5px; border: 1px solid var(--line, #e5e5e5); border-radius: 999px; text-decoration: none; color: inherit; font-size: .85rem; font-weight: 600; }
.also-apps img { border-radius: 7px; background: #fff; }
.sess-form h3{margin:16px 0 6px;font-size:1rem}.sess-final{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:8px}
.sess-row{display:flex;gap:10px;align-items:center;justify-content:space-between}.sess-row select{max-width:46%}


/* Wide tables. Pages with wide tables use the full screen width, and each table scrolls inside a box no taller than the screen, so its sideways scrollbar is always in view and the header row stays put. */
main:has(.grid-wrap){max-width:1680px}
.grid-wrap{overflow:auto;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);overscroll-behavior-x:contain}
.grid thead th{position:sticky;top:0;z-index:3;background:var(--soft)}
@media (max-width:700px){.grid-wrap{max-height:calc(100dvh - 110px)}}

/* Sidebar. It has its own scroll so every link, Settings included, can be reached on any screen height, and the rows are a little tighter. */
@media (min-width:900px){
  .side{max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
  .side a{padding:.42rem .7rem;margin-bottom:1px}
  .side-foot{padding-bottom:.4rem}
}

/* Detail pages. Cards in a two column layout may shrink to the screen, so a wide table inside one (Balances on a student) scrolls within its card instead of pushing every card off the edge. */
.detail-grid > *, main .card{min-width:0}

/* Staff page filters. Between phone and wide screens, the search box and dropdowns wrap into even boxes instead of squeezing the search box and pushing a dropdown off the edge. */
@media (min-width:761px) and (max-width:1280px){
  .team-bar{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
  .team-bar > *{min-width:0}
  .team-bar select{width:100%}
}