:root{
  color-scheme:light;
  --bg:#f2f5fa; --panel:#fff; --panel2:#f7f9fd; --line:#e2e8f2; --line2:#cdd8e8;
  /* --line2 is a hairline for separating rows (1.44:1) - far too faint to be the
     edge of a control. --bedge is the boundary of anything you can click. */
  --bedge:#828b9f; --btnbg:#f1f5fb;
  --ink:#14213d; --mut:#57657f; --dim:#5e6a83;
  --brand:#0b3d63; --brand2:#1668a8; --brand3:#3a90d0; --soft:#e8f2fb; --bline:#b6d6f0;
  --gold:#7d5d12; --gold-soft:#fdf5e3;
  --green:#0d7a44; --green-soft:#e6f6ed; --red:#c62828; --red-soft:#fdeaea;
  --amber:#8a5600; --amber-soft:#fdf3e2; --purple:#5b3fa8; --purple-soft:#efeafc;
  --shadow:0 1px 2px rgba(16,32,64,.05),0 8px 24px rgba(16,32,64,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.55 -apple-system,'Segoe UI',Inter,Roboto,sans-serif;display:flex}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#c9d4e5;border-radius:8px}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;background:#fff;color:var(--ink);border:1px solid #828b9f;border:1px solid var(--bedge,#828b9f);border-radius:8px;padding:7px 10px;outline:none;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--brand3);box-shadow:0 0 0 3px var(--soft)}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--brand2)}
label{font-size:12px;color:var(--mut);display:block;margin-bottom:4px;font-weight:500}
a{color:var(--brand2)}
code{background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:12px}

/* ---------- auth ---------- */
#gate{position:fixed;inset:0;z-index:200;background:linear-gradient(140deg,#0b3d63,#14213d 60%,#0b2036);display:none;justify-content:center;padding:24px;overflow:auto}
#gate .alt{margin:14px 0 0;text-align:center;color:var(--dim,#5e6a83);font-size:13px}
#gate .alt a{color:var(--brand2,#1668a8);font-weight:600}
#gate .box{background:#fff;border-radius:16px;width:min(430px,100%);padding:32px;box-shadow:0 30px 80px rgba(0,0,0,.4);margin:auto}
#gate .logo{display:flex;align-items:center;gap:11px;margin-bottom:6px}
#gate .logo .mk{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#0b3d63,#1668a8);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:19px}
#gate h2{font-size:20px;font-weight:700}
#gate .tag{color:var(--dim);font-size:12.5px;letter-spacing:.4px;text-transform:uppercase}
#gate p.intro{color:var(--mut);font-size:13px;margin:14px 0 18px;line-height:1.6}
#gate .f{margin-bottom:12px}
#gate .err{background:var(--red-soft);color:var(--red);border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:12px;display:none}
.wbtn{width:100%;background:#1668a8;background:var(--brand2,#1668a8);border:none;color:#fff;padding:11px;border-radius:9px;font-weight:600;font-size:14.5px}
.wbtn:hover{background:var(--brand,#0b3d63)}

/* ---------- shell ---------- */
aside{width:236px;min-width:236px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:14px 12px;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 12px}
.brand .mark{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#0b3d63,#1668a8);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;flex:none}
.brand .t1{font-weight:700;font-size:15.5px;letter-spacing:.2px}
.brand .t2{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1.2px}
.cosel{margin:0 4px 10px;padding:8px 10px;background:var(--panel2);border:1px solid var(--line);border-radius:9px}
.cosel .lb{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--dim)}
.cosel select{margin-top:3px;padding:4px 6px;font-size:13px;font-weight:600;border:none;background:none}
.navgrp{font-size:9.5px;text-transform:uppercase;letter-spacing:1.1px;color:var(--dim);padding:13px 12px 5px;font-weight:700}
.nav{display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:8px;color:var(--mut);border:none;background:none;text-align:left;width:100%;font-size:13.5px}
.nav:hover{background:var(--panel2);color:var(--ink)}
.nav.on{background:var(--soft);color:var(--brand);font-weight:650}
.nav .ic{width:16px;text-align:center;font-size:13px}
.sfoot{margin-top:auto;padding:12px 10px 4px;border-top:1px solid var(--line)}
.who{display:flex;align-items:center;gap:9px}
.who .av{width:30px;height:30px}
.who .nm{flex:1;min-width:0}
.who .nm b{font-size:12.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .nm span{font-size:10.5px;color:var(--dim)}
main{flex:1;display:flex;flex-direction:column;min-width:0;height:100vh;overflow:hidden}
.topbar{display:flex;align-items:center;gap:14px;padding:13px 24px;background:#fff;border-bottom:1px solid var(--line)}
.topbar h1{font-size:18px;font-weight:650}
.topbar .sub{font-size:12px;color:var(--dim)}
.topbar .sp{flex:1}
#licBar{padding:9px 24px;font-size:13px;display:none;align-items:center;gap:10px}
#licBar.warn{background:var(--amber-soft);color:var(--amber);border-bottom:1px solid #f0dcb2;display:flex}
#licBar.bad{background:var(--red-soft);color:var(--red);border-bottom:1px solid #f0c3c3;display:flex}
#view{flex:1;overflow:auto;padding:20px 24px 70px}

/* ---------- components ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:18px;box-shadow:var(--shadow)}
.card h2{font-size:14px;font-weight:650;margin-bottom:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card h2>span{flex-wrap:wrap}
.card h2 .sub{font-weight:400;font-size:12px;color:var(--mut)}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.toolbar .sp{flex:1}
.toolbar input,.toolbar select{width:auto;min-width:130px}
.btn{background:#1668a8;background:var(--brand2,#1668a8);border:1px solid #1668a8;border:1px solid var(--brand2,#1668a8);color:#fff;padding:7px 14px;border-radius:8px;white-space:nowrap;display:inline-block;text-decoration:none;font-weight:600}
.btn:hover{background:#0b3d63;background:var(--brand,#0b3d63);border-color:#0b3d63;border-color:var(--brand,#0b3d63);color:#fff}
.btn.pri{background:#0b3d63;background:var(--brand,#0b3d63);border-color:#0b3d63;border-color:var(--brand,#0b3d63);color:#fff;font-weight:700}
.btn.pri:hover{background:#1668a8;background:var(--brand2,#1668a8);border-color:#1668a8;border-color:var(--brand2,#1668a8);color:#fff}
.btn.sm{padding:4px 10px;font-size:12.5px;border-radius:7px}
.btn.danger{background:#fff;color:var(--red,#b42318);border-color:#d99;font-weight:600}
.btn.danger:hover{background:#fff1f0;border-color:var(--red,#b42318);color:var(--red,#b42318)}
/* A disabled button had no style of its own, so "+ Add user" with the seats full
   looked exactly like one you could press. Grey the whole control rather than only
   the text, so the label keeps its contrast against what is behind it. */
.btn:disabled,.btn[disabled],.wbtn:disabled{background:#eef2f8;border-color:var(--line2,#cdd8e8);color:#5e6a83;cursor:not-allowed;font-weight:500}
.btn:disabled:hover,.btn[disabled]:hover,.wbtn:disabled:hover{background:#eef2f8;border-color:var(--line2,#cdd8e8);color:#5e6a83}
.hint{font-size:12px;color:var(--mut)}
/* attention notes — a tinted surface, not an accent bar */
.note{border-radius:12px;padding:13px 16px;margin-bottom:18px;font-size:13px;line-height:1.6;border:1px solid;display:flex;gap:11px;align-items:flex-start}
.note .ico{font-size:15px;line-height:1.3;flex:none}
.note .body{flex:1;min-width:0}
.note.warn{background:var(--amber-soft);border-color:#f0dcb2}
.note.warn .ico{color:var(--amber)}
.note.info{background:var(--purple-soft);border-color:#d5c9f5}
.note.info .ico{color:var(--purple)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;margin-bottom:18px}
.tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow)}
.tile .n{font-size:25px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.tile .l{font-size:12px;color:var(--mut);margin-top:1px}
.tile .s{font-size:11.5px;margin-top:6px;color:var(--dim)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:2fr 1fr;gap:18px}
@media(max-width:1150px){.grid2,.grid3{grid-template-columns:1fr}}
table.tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tbl th{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;font-weight:600}
.tbl td{padding:9px 10px;border-bottom:1px solid #eef2f8;vertical-align:middle}
.tbl tr:hover td{background:var(--panel2)}
.tbl .r{text-align:right}
.tbl tfoot td{font-weight:650;border-top:1.5px solid var(--line2);border-bottom:none;background:var(--panel2)}
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:11.5px;border:1px solid var(--line2);color:var(--mut);white-space:nowrap;background:#fff}
.chip.blue{color:var(--brand2);border-color:var(--bline);background:var(--soft)}
.chip.green{color:var(--green);border-color:#b6e3c8;background:var(--green-soft)}
.chip.red{color:var(--red);border-color:#f0c3c3;background:var(--red-soft)}
.chip.amber{color:var(--amber);border-color:#f0dcb2;background:var(--amber-soft)}
.chip.purple{color:var(--purple);border-color:#d5c9f5;background:var(--purple-soft)}
.chip.gold{color:var(--gold);border-color:#eddcae;background:var(--gold-soft)}
.av{width:30px;height:30px;border-radius:50%;background:var(--soft);color:var(--brand2);display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;flex:none}
.empty{padding:32px;text-align:center;color:var(--dim);font-size:13px}
.bar{height:8px;border-radius:5px;background:#e8edf6;overflow:hidden}
.bar i{display:block;height:100%;border-radius:5px;background:var(--brand2)}
.rate{display:inline-flex;padding:3px 11px;border-radius:7px;font-weight:700;font-size:13px}
.rate.Ap{background:var(--green-soft);color:var(--green)}
.rate.A{background:var(--soft);color:var(--brand2)}
.rate.B{background:var(--purple-soft);color:var(--purple)}
.rate.C{background:var(--amber-soft);color:var(--amber)}
.rate.D{background:var(--red-soft);color:var(--red)}
.rate.none{background:var(--panel2);color:var(--dim)}
.seatbar{height:10px;border-radius:6px;background:#e8edf6;overflow:hidden;display:flex}
.seatbar i{display:block;height:100%;background:var(--brand2)}
.seatbar i.full{background:var(--red)}

/* score sheet */
.crit{border:1px solid var(--line);border-radius:10px;margin-bottom:9px;padding:11px 13px;background:#fff}
.crit.done{border-color:var(--bline);background:var(--soft)}
.crit.auto{border-color:#cbb8ee;background:#f6f2fe}
.crit .top{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.crit .no{width:22px;height:22px;border-radius:6px;background:var(--panel2);color:var(--mut);font-size:11px;display:flex;align-items:center;justify-content:center;flex:none;font-weight:600;margin-top:1px}
.crit .nm{flex:1;min-width:190px}
.crit .nm b{font-size:13.5px;font-weight:600}
.crit .nm .rk{font-size:11.5px;color:var(--mut);margin-top:2px;line-height:1.5}
.opts{display:flex;gap:6px;flex-wrap:wrap;flex:none}
.opt{min-width:40px;padding:5px 11px;border-radius:8px;border:1px solid var(--line2);background:#fff;color:var(--mut);font-weight:650;font-size:13px;width:auto}
.opt:hover{border-color:var(--brand3)}
.opt.on{background:#1668a8;background:var(--brand2,#1668a8);border-color:#1668a8;border-color:var(--brand2,#1668a8);color:#fff}
.opt.on.zero{background:var(--red);border-color:var(--red)}
.opt.on.neg{background:#8b1a1a;border-color:#8b1a1a}
.opt.on.mid{background:var(--amber);border-color:var(--amber)}
.sticky{position:sticky;top:0}
.scorebox{text-align:center;padding:14px 0 6px}
.scorebox .big{font-size:44px;font-weight:750;line-height:1;letter-spacing:-1.5px}
.scorebox .of{font-size:12px;color:var(--dim)}
.srow{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #eef2f8;font-size:13px}
.srow b{font-variant-numeric:tabular-nums}

/* attendance grid */
.attwrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
.att{border-collapse:collapse;font-size:11.5px;font-variant-numeric:tabular-nums}
.att th,.att td{border:1px solid #eaeff7;text-align:center;min-width:30px;padding:0}
.att th{background:var(--panel2);color:var(--dim);font-weight:600;padding:6px 2px;font-size:10.5px}
.att td.name,.att th.name{position:sticky;left:0;background:#fff;min-width:150px;text-align:left;padding:6px 10px;z-index:2;font-size:12.5px}
.att td.tot{background:var(--panel2);min-width:74px;font-size:11px;color:var(--mut)}
.att .cell{width:100%;height:30px;border:none;background:transparent;color:var(--mut);font-weight:650;font-size:10.5px}
.att .cell:hover{outline:1px solid var(--brand3)}
.att .today{background:var(--soft)}
.att .auto{color:#646d7e;font-weight:400}
.st-P{color:var(--green)!important}.st-A{color:var(--red)!important}.st-HD{color:var(--amber)!important}
.st-L{color:var(--brand2)!important}.st-LOP{color:#b5379a!important}.st-WO{color:#646d7e!important}
.st-H{color:var(--purple)!important}.st-OD{color:#0a7676!important}
.legend{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--mut)}

/* kanban */
.kan{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1100px){.kan{grid-template-columns:repeat(2,1fr)}}
.kcol{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:11px;min-height:280px}
.kcol h3{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--dim);margin-bottom:10px;display:flex;justify-content:space-between;font-weight:700}
.kcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;cursor:grab;box-shadow:0 1px 2px rgba(16,32,64,.04)}
.kcard:hover{border-color:var(--brand3)}
.kcard .t{font-size:13px;font-weight:600;margin-bottom:6px}
.kcard .meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11px;color:var(--mut)}
.pri{width:8px;height:8px;border-radius:50%;flex:none}
.pri.high{background:var(--red)}.pri.med{background:var(--amber)}.pri.low{background:#7d8799}
.due.over{color:var(--red);font-weight:650}

/* modal */
.overlay{position:fixed;inset:0;background:rgba(20,33,61,.42);backdrop-filter:blur(2px);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:60;overflow:auto}
.modal{background:#fff;border-radius:14px;width:min(700px,100%);box-shadow:0 24px 70px rgba(16,32,64,.28)}
.mhead{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.mhead h3{font-size:15px;font-weight:650}
.mhead .x{background:none;border:none;color:var(--mut);font-size:17px;width:auto}
.mbody{padding:18px 20px;max-height:68vh;overflow:auto}
.mfoot{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;background:var(--panel2);border-radius:0 0 14px 14px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.frow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:12px}
.f1{margin-bottom:12px}
.fsec{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--brand2);margin:16px 0 10px;border-bottom:1px solid var(--line);padding-bottom:6px;font-weight:700}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.checks label{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:13px;margin:0}
.checks input{width:16px}

#toastBox{position:fixed;right:20px;bottom:20px;z-index:99;display:flex;flex-direction:column;gap:8px}
.toast{background:#14213d;color:#fff;padding:10px 16px;border-radius:9px;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:400px}
.toast.err{background:var(--red)}
#printArea{display:none}
@media print{
  html,body{height:auto!important}
  body{display:block!important;background:#fff}
  aside,main,#modalRoot,#toastBox,#gate{display:none!important}
  #printArea{display:block!important}
}
.sheetp,.slip{max-width:760px;margin:0 auto;color:#000;font-size:12.5px}
.sheetp table,.slip table{width:100%;border-collapse:collapse;margin:10px 0}
.sheetp th,.sheetp td,.slip th,.slip td{border:1px solid #999;padding:5px 7px;text-align:left}
.sheetp th,.slip th{background:#eef2f8;font-size:11px;text-transform:uppercase}
.slip .amt{text-align:right}
.slip h2,.sheetp h2{font-size:20px;margin-bottom:2px}

@media(max-width:880px){
  body{flex-direction:column}
  aside{width:100%;min-width:0;flex-direction:row;overflow-x:hidden;padding:8px;align-items:center;gap:4px}
  .brand{padding:0 8px 0 4px}.brand .t2{display:none}
  .navgrp,.cosel{display:none}
  #navList{flex:1;min-width:0;display:flex;align-items:center;gap:4px;overflow-x:auto}
  .nav{width:auto;white-space:nowrap;flex:none}
  .sfoot{margin:0;padding:0 0 0 8px;border-top:none;border-left:1px solid var(--line,#e2e8f2);flex:none}
  .sfoot .who .nm{display:none}
  main{height:auto}#view{padding:14px}
}

/* cross-app link to the sibling product */
.sib{display:block;margin:10px 4px 0;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);text-decoration:none}
.sib:hover{border-color:var(--brand3);background:var(--soft)}
.sibn{display:block;font-size:12.5px;font-weight:650;color:var(--brand2)}
.sibm{display:block;font-size:10.5px;color:var(--dim);margin-top:2px;line-height:1.45}

/* ---------- my work ---------- */
.wtask{border:1px solid var(--line);border-radius:11px;padding:12px 14px;margin-bottom:9px;background:#fff}
.wtask.late{border-color:#f0c3c3;background:#fffafa}
.wt-top{display:flex;align-items:center;gap:9px;font-size:14px}
.wt-top b{font-weight:650}
.wt-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}

/* ---------- evidence ---------- */
.thumbs{display:flex;gap:9px;flex-wrap:wrap}
.thumb{position:relative;width:84px;border:1px solid var(--line2);border-radius:9px;overflow:hidden;background:var(--panel2);display:block;text-decoration:none}
.thumb img{width:84px;height:64px;object-fit:cover;display:block}
.thumb .doc{display:flex;align-items:center;justify-content:center;height:64px;font-size:12px;font-weight:700;color:var(--mut)}
.thumb .cap{display:block;font-size:9.5px;color:var(--mut);padding:3px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thumb .x{position:absolute;top:3px;right:3px;width:19px;height:19px;border-radius:50%;border:none;background:rgba(20,33,61,.75);color:#fff;font-size:11px;line-height:1;padding:0}
.repcard{border:1px solid var(--line);border-radius:11px;padding:12px 14px;margin-bottom:10px;background:#fff}

/* ---------- assistant ---------- */
.chatcard{display:flex;flex-direction:column;min-height:460px}
.chatlog{flex:1;overflow-y:auto;max-height:56vh;padding-right:4px;display:flex;flex-direction:column;gap:10px}
.bub{max-width:86%;padding:10px 13px;border-radius:13px;font-size:13.5px;line-height:1.6}
.bub.me{align-self:flex-end;background:#1668a8;background:var(--brand2,#1668a8);color:#fff;border-bottom-right-radius:4px}
.bub.bot{align-self:flex-start;background:var(--panel2);border:1px solid var(--line);border-bottom-left-radius:4px}
.bub .src{font-size:10.5px;margin-top:6px}
.bub.bot .src{opacity:.72}
.bub.me .src{opacity:.9}
.chatbar{display:flex;gap:8px;margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.dots i{display:inline-block;width:6px;height:6px;margin-right:3px;border-radius:50%;background:var(--dim);animation:blip 1.1s infinite}
.dots i:nth-child(2){animation-delay:.18s}.dots i:nth-child(3){animation-delay:.36s}
@keyframes blip{0%,60%,100%{opacity:.25}30%{opacity:1}}
@media(prefers-reduced-motion:reduce){.dots i{animation:none;opacity:.6}}

/* ---------- analysis ---------- */
.anstrip{border-left:none;background:linear-gradient(180deg,var(--soft),#fff 70%)}
.an-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.an-head>div{flex:1;min-width:220px}
.an-past{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
.report{font-size:13.5px;line-height:1.72}
.report h3.rh{font-size:13.5px;font-weight:700;color:var(--brand);margin:16px 0 7px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.report h3.rh:first-child{margin-top:0}
.report p{margin:0 0 9px}
.report ul,.report ol{margin:0 0 10px;padding-left:20px}
.report li{margin-bottom:5px}
.sheetp .report h3{font-size:13px;margin:14px 0 6px}

/* ---------- safety nets ----------
   Windows High Contrast / forced-colors replaces the palette wholesale. Let the
   system pick the colours there rather than fighting it, so nothing can end up
   invisible. */
@media (forced-colors: active){
  .btn,.btn.pri,.wbtn,.opt,.opt.on,.nav,.chip{
    forced-color-adjust:none;
    background:ButtonFace;color:ButtonText;border:1px solid ButtonText;
  }
  .btn.pri,.wbtn,.opt.on{background:Highlight;color:HighlightText;border-color:HighlightText}
  .card,.modal,.tile{background:Canvas;color:CanvasText;border:1px solid CanvasText}
  .bub.me{background:Highlight;color:HighlightText}
  .bub.bot{background:Canvas;color:CanvasText;border:1px solid CanvasText}
}