:root{--bg:#141a2e;--panel:#1f2a44;--panel2:#26335a;--line:rgba(255,255,255,.12);--hi:#f4f1e8;--lo:#a9b1c9;--gold:#e0a93b;--gold-hi:#f3c765;--r:14px}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--hi);background:radial-gradient(1200px 700px at 20% 0%,#25335f 0%,var(--bg) 60%);overflow:hidden}
:root{--top-h:44px}
.top{position:fixed;top:0;left:0;right:0;height:var(--top-h);display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:5}
.brand{font-weight:800;font-size:17px}.mark{color:var(--gold)}
.ver{color:var(--lo);font-size:11px}
#wall{position:fixed;top:var(--top-h);left:0;right:0;bottom:64px;overflow:hidden}
.widget{position:absolute;min-width:220px;min-height:140px;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.widget.min{min-height:0;height:auto!important}.widget.min .body,.widget.min .grip{display:none}
.head{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;cursor:grab;touch-action:none;user-select:none;border-bottom:1px solid var(--line)}
.head:active{cursor:grabbing}.widget.min .head{border-bottom:0}
.title{flex:1;font-weight:700}
.hbtn{width:26px;height:26px;border:0;border-radius:8px;background:transparent;color:var(--lo);font-size:16px;line-height:1;cursor:pointer}
.hbtn:hover{background:rgba(255,255,255,.1);color:var(--hi)}
.body{flex:1;overflow:auto;padding:12px}
.grip{position:absolute;right:2px;bottom:2px;width:18px;height:18px;cursor:nwse-resize;opacity:.45;touch-action:none;background:linear-gradient(135deg,transparent 55%,var(--lo) 55% 62%,transparent 62% 76%,var(--lo) 76% 83%,transparent 83%)}
.grip:hover{opacity:1}
.btn,.chip{font:inherit;border:1px solid var(--line);background:var(--panel2);color:var(--hi);border-radius:10px;padding:7px 12px;cursor:pointer}
.btn:hover,.chip:hover{border-color:var(--gold)}.btn.primary{background:var(--gold);border-color:var(--gold);color:#231604;font-weight:700}
.chip.on{background:rgba(224,169,59,.2);border-color:var(--gold);color:var(--gold-hi)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}.center{justify-content:center}
input[type=text],input[type=number]{font:inherit;color:var(--hi);background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:10px;padding:7px 10px;min-width:0}
input:focus,button:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.muted{color:var(--lo);font-size:12px}
/* Clock widget (ported from TeachersDeck v0.21.0; cream face reads well on every StudentDeck theme) */
.clock-face{width:112px;height:112px;margin:2px auto 10px;border-radius:50%;background:#F4F1EA;position:relative;box-shadow:inset 0 0 0 4px #dcd7c9}
.clock-hand{position:absolute;left:50%;bottom:50%;transform-origin:bottom center;background:#20242b;border-radius:3px}
.clock-hand.hr{width:4px;height:30px;margin-left:-2px}
.clock-hand.min{width:3px;height:42px;margin-left:-1.5px}
.clock-hand.sec{width:1.5px;height:46px;margin-left:-.75px;background:#e05353}
.clock-dot{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:#20242b}
.clock-digital{text-align:center;font-weight:800;font-size:24px;font-variant-numeric:tabular-nums}
.clock-date{text-align:center;color:var(--lo);font-size:12.5px;margin-top:2px}
.tm-time{font-size:52px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums;margin:2px 0 6px}.tm-time.run{color:var(--gold-hi)}
ul{list-style:none;margin:8px 0;padding:0}
li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 4px;border-bottom:1px solid var(--line)}
li label{display:flex;gap:8px;align-items:center;flex:1;cursor:pointer}
li.done span{text-decoration:line-through;color:var(--lo)}
.x{border:0;background:transparent;color:var(--lo);font-size:18px;cursor:pointer}.x:hover{color:#ff8b8b}
.stat{display:flex;gap:20px}.stat b{display:block;font-size:22px;color:var(--gold-hi)}
#toast{position:fixed;left:50%;top:54px;transform:translateX(-50%);max-width:min(440px,92vw);background:var(--panel2);border:1px solid var(--gold);padding:9px 14px;border-radius:12px;z-index:50;opacity:0;pointer-events:none;transition:opacity .2s}
#toast.show{opacity:1}
.gtile{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;margin-bottom:8px;background:rgba(0,0,0,.2);border:1px solid var(--line);border-radius:12px}
.idiom h3{margin:2px 0 8px;font-size:22px;color:var(--gold-hi)}.idiom p{margin:0 0 6px}
#stage{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;background:var(--bg)}#stage[hidden]{display:none}
.sbar{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line)}.grow{flex:1}
#s-frame{flex:1;width:100%;border:0;background:#fff}
.hright{display:flex;align-items:center;gap:14px}
.xp{position:relative;display:flex;align-items:center;gap:8px;font:inherit;font-size:12px;color:var(--hi);background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:999px;padding:4px 12px;cursor:pointer}
.xp:hover{border-color:var(--gold)}.xp b{color:var(--gold-hi)}.xp em{position:absolute;right:8px;top:30px;font-style:normal;font-weight:800;color:var(--gold-hi);opacity:0;pointer-events:none}
.xp em.go{animation:pop 1.6s ease-out}@keyframes pop{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(14px)}}
.xpbar{display:inline-block;width:70px;height:7px;border-radius:5px;background:rgba(255,255,255,.15);overflow:hidden}.xpbar.wide{display:block;width:100%;height:10px}
.xpbar i{display:block;height:100%;background:var(--gold);border-radius:5px;transition:width .4s}
.lvl{display:flex;align-items:center;gap:12px}.lvl .big{font-size:30px;font-weight:800;color:var(--gold-hi)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}.tile{background:rgba(0,0,0,.2);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.tile b{display:block;font-size:17px;color:var(--gold-hi)}.tile span{font-size:11px;color:var(--lo)}
#sx-body h4{margin:14px 0 6px;font-size:13px}
.bar{display:grid;grid-template-columns:110px 1fr 64px;gap:8px;align-items:center;margin:4px 0;font-size:12px}.bar>div{height:8px;background:rgba(255,255,255,.1);border-radius:5px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--gold);border-radius:5px}.bar b{text-align:right;font-weight:600}
.srow{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px solid var(--line);font-size:12px}
.cols{display:flex;gap:6px;align-items:flex-end;height:90px}.col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;font-size:10px;color:var(--lo)}
.col i{display:block;width:100%;background:var(--gold);border-radius:4px 4px 0 0;min-height:2px}.col em{font-style:normal;color:var(--hi)}
.chip.mood{font-size:22px;line-height:1;padding:6px 14px}.chip.mood.on{background:rgba(224,169,59,.25);border-color:var(--gold)}
textarea{font:inherit;color:var(--hi);background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:10px;padding:9px 10px;width:100%;resize:vertical;min-height:80px}
.jtbl{width:100%;border-collapse:collapse;font-size:12px}
.jtbl th{text-align:left;color:var(--lo);font-weight:600;padding:4px;border-bottom:1px solid var(--line)}
.jtbl td{padding:6px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.jtext{cursor:pointer;white-space:pre-wrap}

/* ---- Theme customization pill (header) ---- */
.theme-pill-wrap{position:relative}
.icon-pill{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--hi);border-radius:999px;cursor:pointer}
.icon-pill:hover{border-color:var(--gold)}
.icon-pill svg{width:18px;height:18px;fill:currentColor;stroke:none}
.swatch-pop{position:absolute;top:40px;right:0;z-index:20;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.swatch-pop[hidden]{display:none}
.swatch-grid{display:grid;grid-template-columns:repeat(3,32px);gap:8px}
.swatch{width:32px;height:32px;border-radius:9px;cursor:pointer;border:2px solid transparent;padding:0}
.swatch.active{border-color:var(--gold)}

/* Month calendar (nested inside the Homework Assignments widget) — ported from
   TeachersDeck's canonical .cal-* calendar CSS, variable names mapped to this app's
   palette (--line/--hi/--lo/--gold/--gold-hi in place of TD's --line/--text-hi/--text-lo/
   --amber/--amber-hi). Read-only here: no manage/edit states. */
.cal-head{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.cal-nav{width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--hi);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.cal-nav:hover{background:rgba(255,255,255,.08)}
.cal-month{flex:1;text-align:center;font-weight:700;font-size:13px}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;font-size:10px;color:var(--lo);text-align:center;margin-bottom:4px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:10px}
.cal-cell{aspect-ratio:1;border:none;border-radius:8px;background:transparent;color:var(--hi);font-size:11.5px;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center}
.cal-cell:hover:not(.empty){background:rgba(255,255,255,.06)}
.cal-cell.empty{cursor:default}
.cal-cell.today{font-weight:700;color:var(--gold-hi)}
.cal-cell.selected{background:var(--gold);color:#231604;font-weight:700}
.cal-dot{position:absolute;bottom:2px;left:4px;width:4px;height:4px;border-radius:50%;background:#47c9b6}
.cal-cell.selected .cal-dot{background:#231604}
.cal-day-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cal-day-label{font-weight:600;font-size:12px;color:var(--lo)}
.cal-ev-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;max-height:120px;overflow-y:auto}
.cal-ev-row{display:flex;align-items:center;gap:7px;font-size:12px;background:rgba(255,255,255,.03);border-radius:8px;padding:6px 8px}
.cal-ev-time{font-weight:600;color:var(--gold-hi);font-size:11px;flex-shrink:0}
.cal-ev-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Files widget + document stage (ported from TeachersDeck v0.13; colour variables mapped to this palette) ----
   #doc-stage sits inside #wall at z 1000. Ordinary widgets are numbered 11..979 (below it); pinned widgets 1001+ (above it).
   The header, dock and toast are outside the wall and stay above everything. */
.widget.is-pinned{box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 1px rgba(224,169,59,.55)}
.doc-stage{position:absolute;left:0;right:0;bottom:0;top:0;z-index:1000;display:flex;flex-direction:column;background:#202a44;border-top:1px solid var(--line)}
.doc-stage[hidden]{display:none}
.doc-toolbar{flex:none;height:40px;display:flex;align-items:center;gap:10px;padding:0 10px;background:rgba(20,26,46,.97);border-bottom:1px solid var(--line);color:var(--hi);font-size:12.5px}
.doc-toolbar[hidden]{display:none}
.doc-title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:34%}
.doc-time{white-space:nowrap}
.doc-hint{background:none;border:none;color:var(--gold-hi);cursor:pointer;font-size:12px;text-decoration:underline;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.doc-hint[hidden]{display:none}
.doc-tools{margin-left:auto;display:flex;align-items:center;gap:6px;flex-shrink:0}
.doc-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--hi);font:inherit;cursor:pointer}
.doc-btn:hover{border-color:var(--gold)}
.doc-btn.primary{background:var(--gold);border-color:var(--gold);color:#231604;font-weight:700}
.doc-btn[hidden]{display:none}
.doc-handle{position:absolute;top:0;right:14px;z-index:2;height:16px;padding:0 12px;border:1px solid var(--line);border-top:none;border-radius:0 0 8px 8px;background:rgba(20,26,46,.92);color:var(--lo);cursor:pointer;font-size:11px;line-height:14px}
.doc-handle:hover{color:var(--hi)}.doc-handle[hidden]{display:none}
.doc-frame-wrap{flex:1;min-height:0;position:relative}
.doc-frame-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.doc-stage.shielded .doc-frame-wrap iframe{pointer-events:none}      /* while a widget is being dragged over it */
.doc-fallback,.doc-idle{position:absolute;left:50%;transform:translateX(-50%);z-index:3;max-width:min(460px,calc(100% - 32px));padding:14px 16px;border-radius:12px;background:rgba(20,26,46,.97);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.4);color:var(--hi);font-size:12.5px;line-height:1.45;text-align:center}
.doc-fallback{top:24%}.doc-idle{top:56px;border-color:var(--gold)}
.doc-fallback p,.doc-idle p{margin:0 0 10px}
.doc-fallback[hidden],.doc-idle[hidden]{display:none}
.doc-menu-wrap{position:relative}
.doc-menu{position:absolute;right:0;top:34px;z-index:4;width:250px;max-height:340px;overflow-y:auto;padding:8px;border-radius:10px;background:rgba(20,26,46,.98);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.4);color:var(--hi);font-size:12.5px}
.doc-menu[hidden]{display:none}
.doc-menu-hint,.doc-menu-empty{margin:0 0 6px;color:var(--lo);font-size:11.5px;line-height:1.4}
.doc-menu-bar{display:flex;gap:12px;margin-bottom:6px}
.doc-menu-link{background:none;border:none;padding:0;color:var(--gold-hi);cursor:pointer;font:inherit;font-size:12px;text-decoration:underline}
.doc-menu-row{display:flex;align-items:center;gap:8px;padding:5px 4px;border-radius:6px;cursor:pointer}
.doc-menu-row:hover{background:rgba(255,255,255,.06)}
/* Files widget */
.file-glink{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.file-glink input[type=text]{width:100%}.file-glink .btn{align-self:flex-start}
.file-list{max-height:210px;overflow-y:auto}
.file-list li{justify-content:flex-start}
.ftype{flex:none;min-width:44px;text-align:center;padding:2px 6px;border-radius:6px;background:rgba(224,169,59,.18);color:var(--gold-hi);font-size:10.5px;font-weight:700}
.fname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.fname:hover{color:var(--gold-hi);text-decoration:underline}
.file-empty{justify-content:center!important;border-bottom:0!important}
.ftime{flex:none;font-size:11px;white-space:nowrap}
.file-sortrow{margin:4px 0 2px;gap:6px;align-items:center}
.file-sortrow select{font:inherit;font-size:12px;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.08);color:inherit;border:1px solid rgba(255,255,255,.18)}
.file-sortrow select option{color:#222}
/* ---- v0.7.2: a document open = one slim, see-through top row; the document fills the rest of the window ---- */
.hw-docs{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:2px 0 2px 26px}
li.hasdocs{flex-wrap:wrap}
.doc-chip{padding:2px 9px;font-size:11.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.doc-open .doc-stage{position:fixed;inset:0;border-top:none;background:var(--bg)}      /* the wall stops 64px above the bottom for the dock; the document no longer does */
body.doc-open .top{pointer-events:none}
body.doc-open .top .brand,body.doc-open .top .hright{pointer-events:auto}
body.doc-open .xp,body.doc-open .icon-pill{background:none;border-color:transparent}
body.doc-open .xp:hover,body.doc-open .icon-pill:hover{border-color:var(--gold)}
body.doc-open .doc-toolbar{height:44px;background:transparent;border-bottom:none;padding:0 var(--hdr-r,300px) 0 var(--hdr-l,160px)}
body.doc-open .doc-btn{background:none;border-color:transparent}
body.doc-open .doc-btn:hover{border-color:var(--gold);background:rgba(255,255,255,.06)}
body.doc-open .doc-btn.primary{background:none;border-color:transparent;color:var(--gold-hi)}
body.doc-open .doc-btn.primary:hover{border-color:var(--gold)}
body.doc-open .doc-menu{top:38px}
body.doc-open.doc-collapsed .top{display:none}
@media (max-width:900px){
  body.doc-open .doc-stage{top:44px}
  body.doc-open .doc-toolbar{height:40px;padding:0 10px}
  body.doc-open.doc-collapsed .doc-stage{top:0}
}
/* ---- v0.7.4: "start a focus timer?" card ---- */
.focus-ask{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:60;width:min(340px,92vw);padding:14px 16px;border-radius:12px;background:rgba(20,26,46,.98);border:1px solid var(--gold);box-shadow:0 10px 30px rgba(0,0,0,.45);color:var(--hi)}
.focus-ask p{margin:0 0 10px}
.focus-ask .row{margin:8px 0 0}
.focus-ask-off{display:flex;align-items:center;gap:6px;margin-top:10px;color:var(--lo);font-size:12px;cursor:pointer}
/* ---- v0.8.0: dock icon-only mode, Translate, Dictionary, Flashcards ---- */
.tr select,.tr-langs select{flex:1;min-width:0;font:inherit;color:var(--hi);background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:10px;padding:7px 8px}
.tr select option{color:#222}
.tr-out{min-height:48px;padding:10px;margin:6px 0;border-radius:10px;background:rgba(0,0,0,.2);border:1px solid var(--line);font-size:16px;white-space:pre-wrap;overflow-wrap:anywhere}
.tr-hist{margin-top:6px}.tr-hist ul{list-style:none;margin:6px 0 0;padding:0}.tr-hist li{margin:2px 0}
.linkish{background:none;border:none;color:var(--gold-hi);font:inherit;font-size:12px;text-align:left;cursor:pointer;padding:2px 0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 2px}.dc-head h3{margin:0;font-size:22px;color:var(--gold-hi)}
#dc-out h4{margin:10px 0 2px;font-size:12px;color:var(--lo);text-transform:uppercase;letter-spacing:.06em}#dc-out ol{margin:2px 0;padding-left:20px}#dc-out li{margin:4px 0}
#dc-in{flex:1}
.fc-sum{display:flex;gap:8px;margin:2px 0 8px}.fc-sum div{flex:1;text-align:center;padding:8px 4px;border-radius:10px;background:rgba(0,0,0,.2);border:1px solid var(--line)}
.fc-sum b{display:block;font-size:20px;color:var(--gold-hi)}.fc-sum span{font-size:11px;color:var(--lo)}
.fc-add input{flex:1;min-width:90px}
.fc-card{margin:8px 0;padding:22px 14px;min-height:130px;text-align:center;border-radius:14px;background:rgba(0,0,0,.22);border:1px solid var(--line)}
.fc-term{font-size:24px;font-weight:700;color:var(--gold-hi);overflow-wrap:anywhere}.fc-def{margin-top:12px;font-size:16px}.fc-ex{margin-top:8px;font-size:13px;font-style:italic;color:var(--lo)}
.fc-list{list-style:none;margin:6px 0 0;padding:0;max-height:180px;overflow:auto}.fc-list li{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--line);font-size:13px}
.fc-list li>span:first-child{flex:1;min-width:0;overflow-wrap:anywhere}
.fc-done{text-align:center;padding:14px 0}.fc-done h3{margin:0 0 6px;color:var(--gold-hi)}
/* ---- v0.9.0: layout modes, docks, app tray, Settings drawer (ported from TeachersDeck v0.14.1) ---- */
.dock-wrap{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;max-width:calc(100vw - 40px)}
.dock{z-index:5;display:flex;gap:4px;padding:8px 10px;background:rgba(20,26,46,.78);border:1px solid var(--line);border-radius:16px;backdrop-filter:blur(12px);box-shadow:0 12px 30px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.25);max-width:100%;overflow-x:auto;scrollbar-width:thin}
.dock-item{display:flex;flex-direction:column;align-items:center;gap:5px;width:74px;flex:none;padding:8px 4px 6px;cursor:pointer;border:none;background:rgba(255,255,255,.03);color:var(--lo);font:inherit;font-weight:600;font-size:10.5px;line-height:1.2;text-align:center;transition:background .15s ease,color .15s ease,transform .12s ease;position:relative;border-radius:12px;margin:0 1px}
.dock-item>span:last-child,.app-tray-item>span:last-child{max-width:100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;white-space:normal;overflow-wrap:anywhere}
.dock-item:hover{background:rgba(255,255,255,.08);color:var(--hi);z-index:2;transform:translateY(-2px)}
.dock-item.active{background:rgba(224,169,59,.14);color:var(--gold-hi);z-index:3}
.dock-item.active .dock-ic{background:rgba(224,169,59,.16);color:var(--gold-hi)}
.dock-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);color:inherit}
.dock-ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* tab on the dock's top edge + the sheet that slides up */
.app-tray-tab{z-index:6;width:46px;height:20px;padding:0;flex:none;border-radius:12px 12px 4px 4px;border:1px solid var(--line);border-bottom:none;background:rgba(20,26,46,.78);color:var(--lo);cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(12px);box-shadow:0 12px 30px rgba(0,0,0,.35);transition:background .15s ease;margin-bottom:-1px}
.app-tray-tab:hover{background:rgba(255,255,255,.1)}
.app-tray-tab-line{display:block;width:22px;height:4px;border-radius:2px;background:var(--lo);transition:background .15s ease}
.app-tray-tab:hover .app-tray-tab-line{background:var(--hi)}
.app-tray-tab.open .app-tray-tab-line{background:var(--gold-hi)}
.app-tray-backdrop{position:fixed;inset:0;z-index:45;background:rgba(6,9,14,.55);display:flex;align-items:flex-end;justify-content:center}
.app-tray-backdrop[hidden]{display:none}
.app-tray{width:100%;max-width:760px;max-height:72vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-bottom:none;border-radius:20px 20px 0 0;box-shadow:0 -16px 40px rgba(0,0,0,.45);padding:8px 18px 24px;animation:traysheetup .2s ease}
@keyframes traysheetup{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
.app-tray-handle{display:block;width:44px;height:5px;border-radius:3px;margin:6px auto 14px;background:var(--line);border:none;cursor:pointer;padding:0}
.app-tray-title{font-weight:700;font-size:12.5px;letter-spacing:.4px;color:var(--lo);text-align:center;margin:0 0 14px}
.app-tray-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.app-tray-cat{grid-column:1/-1;margin:8px 0 0;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--lo)}
.app-tray-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 8px;cursor:pointer;border:none;background:rgba(255,255,255,.03);color:var(--lo);font:inherit;font-weight:600;font-size:10.5px;line-height:1.2;text-align:center;border-radius:14px;transition:background .15s ease,color .15s ease,transform .12s ease}
.app-tray-item .dock-ic{width:38px;height:38px}
.app-tray-item:hover{background:rgba(255,255,255,.08);color:var(--hi);transform:translateY(-2px)}
.app-tray-item.active{background:rgba(224,169,59,.14);color:var(--gold-hi)}
.app-tray-item.active .dock-ic{background:rgba(224,169,59,.16);color:var(--gold-hi)}
/* side drawers */
.edge-dock{position:fixed;z-index:6;background:rgba(20,26,46,.78);border:1px solid var(--line);backdrop-filter:blur(12px);box-shadow:0 12px 30px rgba(0,0,0,.35);transition:transform .22s ease}
.edge-dock[hidden]{display:none}
.edge-dock-items{display:flex;flex-direction:column;gap:4px}
.edge-dock-left,.edge-dock-right{top:50%;transform:translateY(-50%);border-radius:14px;padding:10px 6px}
.edge-dock-left{left:12px}.edge-dock-right{right:12px}
.edge-dock-left .dock-item,.edge-dock-right .dock-item{width:68px;margin:1px 0}
.edge-dock-left .dock-item:hover{transform:translateX(2px)}.edge-dock-right .dock-item:hover{transform:translateX(-2px)}
/* hide-the-dock option: the whole dock + tab unit slides down until only the tab shows; hover the tab (or Tab to a button) to bring it back */
.dock-wrap.auto-hide{bottom:0;padding-bottom:16px;transform:translateX(-50%) translateY(calc(100% - 20px));transition:transform .22s ease .35s}
.dock-wrap.auto-hide:hover,.dock-wrap.auto-hide:has(:focus-visible){transform:translateX(-50%);transition-delay:0s}
/* over a document: dock and side drawers tuck to a thin edge; hover the edge to bring them back */
body.doc-open .dock-wrap:not(.auto-hide){bottom:0;padding-bottom:16px;opacity:.7;transform:translateX(-50%) translateY(calc(100% - 20px));transition:transform .22s ease .35s,opacity .22s ease}
body.doc-open .dock-wrap:not(.auto-hide):hover,body.doc-open .dock-wrap:not(.auto-hide):has(:focus-visible){transform:translateX(-50%);opacity:1;transition-delay:0s}
body.doc-open .edge-dock-left{transform:translateY(-50%) translateX(calc(-100% - 12px + 14px))}
body.doc-open .edge-dock-right{transform:translateY(-50%) translateX(calc(100% + 12px - 14px))}
body.doc-open .edge-dock-left:hover,body.doc-open .edge-dock-left:has(:focus-visible),body.doc-open .edge-dock-right:hover,body.doc-open .edge-dock-right:has(:focus-visible){transform:translateY(-50%) translateX(0)}
/* Settings drawer */
.drawer{position:fixed;top:0;right:0;height:100%;width:320px;max-width:100%;z-index:20;background:var(--panel);border-left:1px solid var(--line);box-shadow:-16px 0 40px rgba(0,0,0,.4);display:flex;flex-direction:column;animation:slidein .18s ease}
@keyframes slidein{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}
.drawer[hidden]{display:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-size:15px;margin:0}
.drawer-body{padding:16px;overflow-y:auto;flex:1}
.drawer-label{font-weight:600;font-size:11px;letter-spacing:.4px;color:var(--lo);margin:0 0 8px}
#btn-settings svg,#settings-close svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.layout-mode-grid{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.layout-mode-opt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;text-align:left;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--hi);font:inherit;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.layout-mode-opt:hover{background:rgba(255,255,255,.03)}
.layout-mode-opt.active{border-color:var(--gold);background:rgba(224,169,59,.08)}
.layout-mode-name{font-weight:700;font-size:12.5px}
.layout-mode-desc{font-size:11px;color:var(--lo);line-height:1.4}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--lo);margin-top:4px}
.switch-row input{accent-color:var(--gold);width:16px;height:16px;flex:none}
.switch-row.locked,.dock-vis-row.locked{opacity:.45}
.dock-vis-hint{font-size:11.5px;color:var(--lo);margin:0 0 10px}
.lock-hint{color:var(--gold-hi)!important;margin-top:-4px}
.dock-vis-list{display:grid;grid-template-columns:1fr;gap:6px;margin-bottom:6px;max-height:260px;overflow-y:auto;padding-right:2px}
.dock-vis-row{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.dock-vis-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.placement-row select{flex:none;width:118px;background:var(--panel2);color:var(--hi);border:1px solid var(--line);border-radius:7px;font:inherit;font-size:11.5px;padding:4px 4px}
.placement-row select option{color:#222}
select:disabled{cursor:not-allowed;opacity:.7}
@media (max-width:680px){.edge-dock-left,.edge-dock-right{display:none}}

/* ===== v0.9.2 — full-screen widgets (Stats & XP), richer stats layout, Notepad ===== */
.hbtn.wide{width:auto;padding:0 9px;font-size:11px;font-weight:600;border:1px solid var(--line)}
.hbtn.wide.on{background:rgba(224,169,59,.18);border-color:var(--gold);color:var(--gold-hi)}
.widget.full{position:fixed;left:0;right:0;top:var(--top-h);bottom:0;width:auto!important;height:auto!important;border-radius:0;border-width:0;border-top:1px solid var(--line);box-shadow:none;z-index:9!important;background:rgba(31,42,68,.96)}
body.fs-open .top{display:none}
body.fs-open .widget.full{top:0;border-top:0}
.widget.full .head,.widget.full .head:active{cursor:default}
.widget.full .body{padding:14px 18px 110px}                      /* the dock floats over the bottom edge, so the last card scrolls clear of it */
.widget.full.min{position:absolute;left:24px;right:auto;top:24px;bottom:auto;width:280px!important;height:auto!important;border-radius:var(--r);border-width:1px;z-index:11!important;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.widget.full.min .body{padding:0}
.sx-top{display:flex;gap:16px 28px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:10px}
.sx-top #sx-lvl{flex:1 1 320px;min-width:260px}.sx-ctl{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.sx-ctl .row{margin:2px 0;justify-content:flex-end}
.sx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:12px;align-items:start}
.sx-card{background:rgba(0,0,0,.18);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:0}
.sx-card.wide{grid-column:1/-1}
.sx-card h4{margin:0 0 8px;font-size:13px}
.sx-card .tiles{margin:0}.sx-card .tiles.wide{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
/* Stoplight tiles on the Highlights card only — same formula/colours as AdminDeck's School Stats, ParentDeck's Student Summary and TeachersDeck's My Stats & XP. Scoped to .tiles.wide so it can't bleed into other .tile grids (e.g. Notepad). */
.tiles.wide .tile[data-st]{ position:relative; border-width:2px;
  --st-good:#2EE66B; --st-watch:#FFE600; --st-bad:#FF3B3B;
  --st-good-bg:rgba(46,230,107,.22); --st-watch-bg:rgba(255,230,0,.20); --st-bad-bg:rgba(255,59,59,.24); }
.tiles.wide .tile[data-st="good"]{ border-color:var(--st-good); background:var(--st-good-bg); box-shadow:0 0 0 1px rgba(46,230,107,.25), 0 0 18px rgba(46,230,107,.30); }
.tiles.wide .tile[data-st="watch"]{ border-color:var(--st-watch); background:var(--st-watch-bg); box-shadow:0 0 0 1px rgba(255,230,0,.25), 0 0 18px rgba(255,230,0,.28); }
.tiles.wide .tile[data-st="bad"]{ border-color:var(--st-bad); background:var(--st-bad-bg); box-shadow:0 0 0 1.5px rgba(255,59,59,.55), 0 0 28px rgba(255,59,59,.6), 0 0 46px rgba(255,59,59,.22); }
.tiles.wide .tile[data-st="good"]:hover{ box-shadow:0 0 0 1px rgba(46,230,107,.4), 0 8px 26px rgba(46,230,107,.45); }
.tiles.wide .tile[data-st="watch"]:hover{ box-shadow:0 0 0 1px rgba(255,230,0,.4), 0 8px 26px rgba(255,230,0,.42); }
.tiles.wide .tile[data-st="bad"]:hover{ box-shadow:0 0 0 1.5px rgba(255,59,59,.7), 0 10px 32px rgba(255,59,59,.65), 0 0 50px rgba(255,59,59,.28); }
.tiles.wide .tile[data-st="good"]{ color:var(--st-good); } .tiles.wide .tile[data-st="watch"]{ color:var(--st-watch); } .tiles.wide .tile[data-st="bad"]{ color:var(--st-bad); }
.tiles.wide .tile[data-st] b, .tiles.wide .tile[data-st] > span{ color:inherit; }
.tiles.wide .tile[data-st]::after{ position:absolute; top:8px; right:11px; font-size:14px; line-height:1; }
.tiles.wide .tile[data-st="good"]::after{ content:'●'; } .tiles.wide .tile[data-st="watch"]::after{ content:'▲'; } .tiles.wide .tile[data-st="bad"]::after{ content:'■'; }
/* the colour key above the Highlights tile grid — same pill pattern as AdminDeck's School Stats legend */
.ss-st[data-st]{ display:inline-block; padding:1px 9px; border-radius:999px; border:1.5px solid currentColor; font-weight:700; line-height:1.5; }
.ss-st[data-st="good"]{ color:#2EE66B; background:rgba(46,230,107,.22); }
.ss-st[data-st="watch"]{ color:#FFE600; background:rgba(255,230,0,.20); }
.ss-st[data-st="bad"]{ color:#FF3B3B; background:rgba(255,59,59,.24); }
.ss-st[data-st]::before{ font-size:.7em; margin-right:5px; vertical-align:.1em; }
.ss-st[data-st="good"]::before{ content:'●'; } .ss-st[data-st="watch"]::before{ content:'▲'; } .ss-st[data-st="bad"]::before{ content:'■'; }
.ss-stlegend{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:6px 12px; margin:2px 0 10px; font-size:13px; font-weight:600; }
.ss-stlegend details{ flex:1 1 260px; color:var(--lo); font-weight:500; font-size:12.5px; margin-left:6px; }
.ss-stlegend summary{ cursor:pointer; width:max-content; padding-top:3px; }
.ss-stlegend details p{ margin:5px 0 0; }
.sx-card .bar{grid-template-columns:150px 1fr 70px}
.cols.big{height:150px}.cols.dense{gap:2px}.cols.dense .col span{font-size:9px}
.heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,15px);grid-auto-columns:15px;gap:3px;overflow-x:auto;padding-bottom:2px}
.heat i{border-radius:3px;background:rgba(255,255,255,.07)}.heat i.f{background:transparent}
.heat i.l1{background:rgba(224,169,59,.28)}.heat i.l2{background:rgba(224,169,59,.5)}.heat i.l3{background:rgba(224,169,59,.75)}.heat i.l4{background:var(--gold-hi)}
.sx-tbl{width:100%;border-collapse:collapse;font-size:12px}
.sx-tbl th{text-align:left;color:var(--lo);font-weight:600;padding:4px 6px;border-bottom:1px solid var(--line)}
.sx-tbl td{padding:5px 6px;border-bottom:1px solid var(--line)}.sx-tbl td.up{color:#7fd69a}.sx-tbl td.dn{color:#ff9c9c}
.tbl-scroll{overflow-x:auto}
.moods{display:flex;gap:4px;flex-wrap:wrap}.moods .mo{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border-radius:8px;font-size:16px}
.np-top select{flex:1;min-width:0;font:inherit;color:var(--hi);background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:7px 8px}
.np-meta{margin-top:0}
#np-q{margin-bottom:6px}
.np-lines{border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.2);padding:6px 8px;height:clamp(120px,36vh,420px);overflow-y:auto}
.np-line{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:start;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.np-line time{font-variant-numeric:tabular-nums;font-size:11px;color:var(--gold-hi);padding-top:2px;cursor:help;white-space:nowrap}
.np-text{white-space:pre-wrap;overflow-wrap:anywhere;cursor:text;min-height:1.2em}
.np-edit{min-height:44px}
.np-day{position:sticky;top:0;background:rgba(31,42,68,.96);font-size:11px;font-weight:600;color:var(--lo);padding:4px 0;margin-top:4px;letter-spacing:.3px}
.np-add{display:flex;gap:8px;align-items:flex-end;margin-top:8px}.np-add textarea{min-height:48px;resize:vertical}
.np-tools .btn{padding:5px 10px;font-size:12px}
.np-hit{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;width:100%;text-align:left;font:inherit;color:var(--hi);background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.06);padding:6px 0;cursor:pointer}
.np-hit:hover{background:rgba(255,255,255,.04)}.np-hit time{font-size:11px;color:var(--gold-hi)}.np-hit em{grid-column:2;font-style:normal;font-size:11px;color:var(--lo)}

/* v0.9.2 — demo mode panel */
.demobar{position:fixed;left:10px;bottom:84px;z-index:900;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.demotab{padding:7px 13px;border:1px solid var(--gold);border-radius:999px;background:rgba(40,32,14,.88);color:var(--gold-hi);font:inherit;font-weight:700;font-size:12px;cursor:pointer;backdrop-filter:blur(6px)}
.demopanel{width:min(380px,calc(100vw - 20px));max-height:min(72vh,560px);overflow:auto;padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(20,26,46,.96);box-shadow:0 10px 30px rgba(0,0,0,.45);backdrop-filter:blur(8px)}
.demopanel[hidden]{display:none}
.demopanel .btn{padding:5px 10px;font-size:12px}
.demo-feed{list-style:none;margin:0;padding:0;display:grid;gap:4px}.demo-feed li{font-size:11.5px;padding:5px 8px;border-radius:8px;background:rgba(255,255,255,.04);border-left:3px solid var(--gold)}.demo-feed time{color:var(--lo);font-size:10px;margin-right:6px}

/* v0.9.4 — DEMO badge (from the parallel v0.9.3 build) and the Back button on a full-screen widget */
.demo-badge{font-size:10px;font-weight:800;letter-spacing:.08em;color:#231604;background:var(--gold);border-radius:6px;padding:2px 7px}.demo-badge[hidden]{display:none}
.widget.full .head .btn{padding:5px 10px;font-size:12px}

/* =====================================================================================================================================
   v0.9.5 — Stats & XP sparkle.
   Entrance (when the page opens, and when the range changes): the cards rise in one after another, bars and columns grow, the heat-map squares pop,
   table rows slide in, numbers count up (JS), and the level bar fills with a glint and a shower of stars (JS).
   Hover: whichever stat the pointer is on animates — bars grow again, columns grow, heat-map squares twinkle, rows cascade, emoji bounce in a wave,
   tiles lift and count up. Nothing here changes layout, and every animation is switched off for people who ask their system to reduce motion.
   ===================================================================================================================================== */
@keyframes sxCardIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes sxGrowX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sxGrowY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes sxPop{0%{transform:scale(.55);opacity:0}60%{transform:scale(1.18);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes sxTwinkle{0%,100%{transform:scale(1);filter:brightness(1);box-shadow:0 0 0 0 rgba(255,214,102,0)}35%{transform:scale(1.5);filter:brightness(1.9);box-shadow:0 0 9px 3px rgba(255,214,102,.75)}70%{transform:scale(.8);filter:brightness(.75);box-shadow:0 0 0 0 rgba(255,214,102,0)}}
@keyframes sxSlideIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes sxWave{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-9px) scale(1.25)}}
@keyframes sxStar{0%{opacity:0;transform:scale(0) rotate(0)}45%{opacity:1;transform:scale(1.25) rotate(100deg)}100%{opacity:0;transform:scale(0) rotate(200deg)}}
@keyframes sxGlint{from{background-position:-120% 0}to{background-position:220% 0}}
@keyframes sxSpark{0%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2) rotate(240deg)}}
@keyframes sxPulse{0%,100%{text-shadow:0 0 0 rgba(255,214,102,0)}50%{text-shadow:0 0 18px rgba(255,214,102,.9)}}

/* level header */
#sx-lvl{position:relative}
.sx-spark{position:absolute;pointer-events:none;color:#ffe08a;text-shadow:0 0 6px var(--gold);line-height:1;z-index:3;animation:sxSpark 1.1s ease-out both}
.widget.full .xpbar.wide i{position:relative;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.widget.full .xpbar.wide i::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 0,rgba(255,255,255,.75) 50%,transparent 100%);background-size:60% 100%;background-repeat:no-repeat;background-position:-120% 0}
.widget.full .xpbar.wide i::before{content:'\2726';position:absolute;right:3px;top:50%;margin-top:-8px;font-size:13px;line-height:16px;color:#fff;text-shadow:0 0 6px var(--gold-hi);opacity:0;z-index:2}
.fx-lvl .xpbar.wide i::after{animation:sxGlint 1.3s .9s ease-out both}
.fx-lvl .xpbar.wide i::before{animation:sxStar 1.2s 1s ease-in-out both}
.fx-lvl .lvl .big{animation:sxPop .7s .1s both}
.lvl:hover .xpbar.wide i::after{animation:sxGlint 1s ease-out}
.lvl:hover .xpbar.wide i::before{animation:sxStar 1s ease-in-out}
.lvl:hover .big{animation:sxPulse 1.2s ease-in-out}

/* every card: soft glow and two twinkling stars while the pointer is on it */
.sx-card{position:relative;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.sx-card::before,.sx-card::after{position:absolute;pointer-events:none;color:var(--gold-hi);opacity:0;text-shadow:0 0 6px var(--gold)}
.sx-card::after{content:'\2726';top:8px;right:12px;font-size:14px}
.sx-card::before{content:'\2727';bottom:9px;right:30px;font-size:11px}
.sx-card:hover{transform:translateY(-3px);border-color:rgba(224,169,59,.6);box-shadow:0 10px 28px rgba(0,0,0,.38),0 0 0 1px rgba(224,169,59,.22),0 0 24px rgba(224,169,59,.14)}
.sx-card:hover::after{animation:sxStar 1.7s ease-in-out infinite}
.sx-card:hover::before{animation:sxStar 1.7s .85s ease-in-out infinite}
.fx-in .sx-card{animation:sxCardIn .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 70ms)}

/* tiles */
.tile{transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease}
.tile:hover{transform:translateY(-4px) scale(1.05);background:rgba(224,169,59,.13);border-color:var(--gold);box-shadow:0 8px 18px rgba(0,0,0,.35),0 0 16px rgba(224,169,59,.3)}
.tile:hover b{animation:sxPop .45s both}
.fx-in .tile{animation:sxPop .5s both;animation-delay:calc(.2s + var(--n,0) * 25ms)}

/* bars: XP by source, time in each widget, top documents */
.bar>div{position:relative}
.bar i{position:relative;transform-origin:left center;transition:filter .2s ease,box-shadow .2s ease}
.bar i::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 0,rgba(255,255,255,.8) 50%,transparent 100%);background-size:50% 100%;background-repeat:no-repeat;background-position:-120% 0}
.bar b{transition:transform .2s ease,color .2s ease;transform-origin:right center}
.fx-in .bar i{animation:sxGrowX .95s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.3s + var(--n,0) * 75ms)}
.sx-card:hover .bar i{animation:sxGrowX .85s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--n,0) * 65ms)}
.bar:hover i{filter:brightness(1.3);box-shadow:0 0 12px var(--gold)}
.bar:hover i::after{animation:sxGlint .9s ease-out}
.bar:hover b{transform:scale(1.18);color:var(--gold-hi)}

/* XP per day */
.col{position:relative;transition:transform .2s ease}
.col i{transform-origin:bottom center;transition:filter .2s ease,box-shadow .2s ease}
.fx-in .col i{animation:sxGrowY .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.3s + var(--n,0) * 35ms)}
.sx-card:hover .col i{animation:sxGrowY .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--n,0) * 28ms)}
.col:hover{transform:translateY(-3px)}
.col:hover i{filter:brightness(1.45);box-shadow:0 0 14px var(--gold-hi)}
.col:hover::after{content:attr(data-v);position:absolute;top:-4px;left:50%;transform:translate(-50%,-100%);background:var(--gold);color:#231604;font-weight:700;font-size:11px;padding:2px 6px;border-radius:6px;white-space:nowrap;z-index:4;animation:sxPop .3s both}

/* activity heat map: the squares twinkle */
.heat i{position:relative;transition:transform .15s ease}
.fx-in .heat i:not(.f){animation:sxPop .45s both;animation-delay:calc(.25s + var(--n,0) * 9ms)}
.sx-card:hover .heat i:not(.f){animation:sxTwinkle 1.9s ease-in-out infinite;animation-delay:var(--d,0s)}
.sx-card:hover .heat i[class^="l"]{animation-duration:1.5s}
.heat i:not(.f):hover{animation:sxTwinkle .55s ease-out !important;z-index:3}
.heat i:not(.f):hover::after{content:'\2726';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:12px;color:#fff;text-shadow:0 0 5px var(--gold-hi)}

/* tables and rows: this week vs last week, day by day, recent XP, game scores */
.sx-tbl tbody tr{transition:background .15s ease}
.sx-tbl tbody tr:hover td{background:rgba(224,169,59,.12)}
.sx-tbl td.up,.sx-tbl td.dn{transition:transform .2s ease}
.sx-tbl tbody tr:hover td.up,.sx-tbl tbody tr:hover td.dn{animation:sxWave .7s ease-in-out}
.fx-in .sx-tbl tbody tr,.fx-in .srow{animation:sxSlideIn .45s ease-out both;animation-delay:calc(.35s + var(--n,0) * 40ms)}
.sx-card:hover .sx-tbl tbody tr,.sx-card:hover .srow{animation:sxSlideIn .45s ease-out both;animation-delay:calc(var(--n,0) * 38ms)}
.srow{transition:background .15s ease}
.srow:hover{background:rgba(224,169,59,.09)}
.srow:hover b{animation:sxPop .4s both;color:var(--gold-hi)}

/* mood strip */
.moods .mo{transition:transform .2s ease,background .2s ease}
.fx-in .moods .mo{animation:sxPop .5s both;animation-delay:calc(.3s + var(--n,0) * 45ms)}
.sx-card:hover .moods .mo{animation:sxWave 1s ease-in-out both;animation-delay:calc(var(--n,0) * 55ms)}
.moods .mo:hover{transform:scale(1.45) rotate(-8deg);background:rgba(224,169,59,.22)}

/* reduce motion: no animation, no movement — only the (instant) colour change on hover remains */
@media (prefers-reduced-motion: reduce){
  .widget.full *,.widget.full *::before,.widget.full *::after{animation:none !important;transition:none !important}
  .sx-card:hover,.tile:hover,.col:hover,.moods .mo:hover{transform:none !important}
}

/* =====================================================================================================================================
   v0.9.6 — Badges for gaining XP: the medal (4 tiers), the pop-up when one is earned, the header chip, and the Badges card in Stats & XP.
   ===================================================================================================================================== */
@keyframes bdIn{0%{transform:translate(-50%,-30px) scale(.8);opacity:0}60%{transform:translate(-50%,6px) scale(1.04);opacity:1}100%{transform:translate(-50%,0) scale(1);opacity:1}}
@keyframes bdOut{to{transform:translate(-50%,-24px) scale(.92);opacity:0}}
@keyframes bdSpin{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}
@keyframes bdWobble{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-9deg) scale(1.12)}60%{transform:rotate(7deg) scale(1.12)}}
@keyframes bdShine{from{background-position:-130% 0}to{background-position:230% 0}}
@keyframes bdChip{0%,100%{transform:scale(1)}30%{transform:scale(1.25) rotate(-8deg)}60%{transform:scale(1.15) rotate(6deg)}}

/* the medal: a ring in the tier's metal around a dark disc with the emoji; locked = grey and dimmed */
.medal{--m1:#cd7f32;--m2:#8a4f1d;position:relative;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(from 210deg,var(--m1),var(--m2),var(--m1),var(--m2),var(--m1));box-shadow:0 3px 10px rgba(0,0,0,.4);filter:grayscale(1) brightness(.62);opacity:.7}
.medal.t2{--m1:#e2e6ee;--m2:#8e97a8}.medal.t3{--m1:#ffe27a;--m2:#c48a12}.medal.t4{--m1:#9ff0ff;--m2:#4a8bff}
.medal .mi{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:23px;background:radial-gradient(circle at 35% 30%,#2e3b63,#171f3a);box-shadow:inset 0 2px 6px rgba(0,0,0,.55)}
.medal.on{filter:none;opacity:1;box-shadow:0 3px 14px rgba(0,0,0,.45),0 0 14px color-mix(in srgb,var(--m1) 55%,transparent)}
.medal.on::after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(110deg,transparent 0,rgba(255,255,255,.7) 48%,transparent 62%);background-size:55% 100%;background-repeat:no-repeat;background-position:-130% 0}
.medal:not(.on)::before{content:'\1f512';position:absolute;right:-3px;bottom:-3px;font-size:13px;filter:none}

/* pop-up when a badge is earned */
.badge-pop{position:fixed;left:50%;top:calc(var(--top-h) + 8px);transform:translateX(-50%);z-index:1200;display:flex;align-items:center;gap:14px;padding:12px 20px 12px 14px;max-width:min(440px,calc(100vw - 24px));
  background:rgba(26,34,60,.97);border:1px solid var(--gold);border-radius:16px;box-shadow:0 16px 44px rgba(0,0,0,.55),0 0 30px rgba(224,169,59,.3);cursor:pointer;animation:bdIn .6s cubic-bezier(.2,.9,.3,1.2) both}
.badge-pop.out{animation:bdOut .38s ease-in both}
.badge-pop .medal{width:64px;height:64px}.badge-pop .medal .mi{width:48px;height:48px;font-size:27px}
.badge-pop .medal.on{animation:bdSpin 1.1s .15s ease-in-out both}.badge-pop .medal.on::after{animation:bdShine 1.2s .5s ease-out both}
.bp-t{display:flex;flex-direction:column;gap:1px;min-width:0}.bp-t small{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-hi)}.bp-t b{font-size:17px}.bp-t span{font-size:12px;color:var(--lo)}

/* header chip */
.badge-chip{display:flex;align-items:center;gap:5px;font:inherit;font-size:12px;color:var(--hi);background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:999px;padding:4px 10px;cursor:pointer}
.badge-chip:hover{border-color:var(--gold)}.badge-chip b{color:var(--gold-hi)}.badge-chip.pulse{animation:bdChip .9s ease-in-out}

/* the Badges card: a display case — hero spot for the latest badge, then shelves by group. Same visual language as ParentDeck's Badge Display Case. */
.bc-hero{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:14px 18px;margin-bottom:10px;border:1px solid rgba(224,169,59,.35);border-radius:18px;background:radial-gradient(120% 140% at 10% 0%,rgba(224,169,59,.12),transparent 60%)}
.bc-spot{font:inherit;border:0;background:none;padding:0;cursor:pointer}
.bc-spot .medal{width:84px;height:84px}.bc-spot .medal .mi{width:64px;height:64px;font-size:35px}
.bc-spot:hover .medal::after{animation:bdShine .9s ease-out}
.bc-spot.empty{width:72px;height:72px;display:flex;align-items:center;justify-content:center;font-size:36px;border-radius:50%;border:2px dashed var(--line);opacity:.6}
.bc-hero-t{flex:1;min-width:200px}
.bc-count{margin:0 0 6px;font-size:15px;color:var(--gold-hi)}.bc-last{margin:8px 0 0}
.bc-cabinet{padding:10px 14px 2px;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.12)}
.bc-shelf{padding-top:4px}.bc-shelf:first-child{padding-top:0}
.bc-ledge{height:9px;margin:8px -6px 10px;border-radius:3px;background:linear-gradient(180deg,rgba(224,169,59,.35),rgba(224,169,59,.08) 55%,rgba(0,0,0,.25));box-shadow:0 5px 10px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.2)}
.bc-shelf:last-child .bc-ledge{display:none}
.bd-sum{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px}.bd-sum .xpbar{flex:1;min-width:140px}
.bd-next-h,.bgal h5{margin:12px 0 6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--lo)}
.bd-next{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.bd-nx{display:flex;gap:12px;align-items:center;padding:8px 10px;border:1px dashed var(--line);border-radius:12px;background:rgba(255,255,255,.03)}
.bd-nx>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.bd-nx small{font-size:11px;color:var(--lo)}.bd-nx em,.bd em{font-style:normal;font-size:11px;color:var(--lo)}
.bd-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin:3px 0}.bd-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold),var(--gold-hi))}
.bd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.bd{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:12px 8px 10px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease}
.bd b{font-size:12.5px}.bd small{font-size:11px;color:var(--lo);line-height:1.3;min-height:2.6em}.bd .bd-bar{width:80%}
.bd.on{background:rgba(224,169,59,.07);border-color:rgba(224,169,59,.35)}.bd:not(.on) b{color:var(--lo)}
.bd:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 10px 22px rgba(0,0,0,.35)}
.bd:hover .medal{animation:bdWobble .7s ease-in-out}.bd.on:hover .medal::after{animation:bdShine .9s ease-out}
.bgal[data-f="on"] .bd[data-on="0"],.bgal[data-f="off"] .bd[data-on="1"]{display:none}
.fx-in .bd{animation:sxPop .45s both;animation-delay:calc(.3s + var(--n,0) * 18ms)}

@media (prefers-reduced-motion: reduce){
  .badge-pop,.badge-pop *,.badge-chip,.bd,.bd *{animation:none !important;transition:none !important}
  .badge-pop{transform:translateX(-50%)}
  .bd:hover{transform:none}
}

/* =====================================================================================================================================
   v0.9.8 — badge strip under the XP pill, hover pop-up, full-size badge in the middle on click.
   ===================================================================================================================================== */
.hright{align-items:flex-start;padding-top:8px}
.hright>.ver,.hright>.demo-badge{margin-top:7px}
.xp-wrap{display:flex;align-items:center}
.bstrip{display:flex;align-items:center;justify-content:flex-start;gap:5px;min-height:34px}
.bs-count{display:flex;align-items:center;gap:4px;font:inherit;font-size:11px;color:var(--hi);background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:999px;padding:2px 8px;cursor:pointer}
.bs-count:hover{border-color:var(--gold)}.bs-count b{color:var(--gold-hi)}.bs-count.pulse{animation:bdChip .9s ease-in-out}
.bs-item{position:relative;display:inline-flex}
.bs-ic{display:inline-flex;padding:0;border:0;background:none;cursor:pointer;border-radius:50%;transition:transform .16s cubic-bezier(.3,1.6,.5,1);position:relative;z-index:1}
.medal.mini{width:26px;height:26px;box-shadow:0 1px 5px rgba(0,0,0,.45)}.medal.mini .mi{width:19px;height:19px;font-size:11px;box-shadow:inset 0 1px 3px rgba(0,0,0,.55)}.medal.mini.on::after{display:none}
.bs-item:hover .bs-ic,.bs-ic:focus-visible{transform:translateY(3px) scale(1.75);z-index:3;outline:none}
.bs-ic:focus-visible{box-shadow:0 0 0 2px var(--gold-hi)}
.bs-tip{position:absolute;top:calc(100% + 16px);left:-6px;z-index:4;min-width:150px;max-width:230px;padding:7px 10px;border:1px solid var(--gold);border-radius:10px;background:rgba(26,34,60,.97);box-shadow:0 8px 22px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:1px;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .15s ease,transform .15s ease}
.bs-tip b{font-size:12px;color:var(--gold-hi)}.bs-tip small{font-size:10.5px;color:var(--lo);line-height:1.3}
.bs-item:hover .bs-tip,.bs-item:focus-within .bs-tip{opacity:1;transform:none}
.bs-item.fresh .medal{animation:sxPop .6s both}.bs-item.fresh::after{content:'\2726';position:absolute;right:-4px;top:-7px;color:#fff;text-shadow:0 0 6px var(--gold-hi);font-size:12px;animation:sxStar 1.4s ease-in-out 2}
.bs-more{font:inherit;font-size:11px;font-weight:700;color:var(--gold-hi);background:rgba(224,169,59,.12);border:1px solid rgba(224,169,59,.4);border-radius:999px;padding:2px 7px;cursor:pointer}
.bs-more:hover{background:rgba(224,169,59,.25)}
.bd[role=button]{cursor:pointer}.bd:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}

/* the full-size badge, centred */
@keyframes bvIn{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}
@keyframes bvFade{from{opacity:0}to{opacity:1}}
.bv-back{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(8,12,26,.62);backdrop-filter:blur(3px);animation:bvFade .2s ease both}
.bv-back.out{opacity:0;transition:opacity .2s ease}
.bv-card{position:relative;width:min(340px,100%);text-align:center;padding:26px 24px 18px;border:1px solid var(--gold);border-radius:20px;background:rgba(26,34,60,.98);box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 44px rgba(224,169,59,.25);animation:bvIn .35s cubic-bezier(.2,.9,.3,1.2) both}
.bv-x{position:absolute;right:10px;top:8px;width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.06);color:var(--hi);font-size:18px;cursor:pointer}.bv-x:hover{background:rgba(255,255,255,.14)}
.bv-medal{display:flex;justify-content:center;margin-bottom:8px;perspective:600px}
.bv-medal .medal{width:168px;height:168px}.bv-medal .medal .mi{width:128px;height:128px;font-size:72px}
.bv-medal .medal.on{animation:bdSpin 1.2s .1s ease-in-out both}.bv-medal .medal.on::after{animation:bdShine 1.3s .55s ease-out both}
.bv-medal .medal:not(.on)::before{font-size:30px;right:6px;bottom:6px}
.bv-tier{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-hi)}
.bv-card h3{margin:4px 0 2px;font-size:22px}.bv-card p{margin:0 0 6px;color:var(--lo);font-size:13px}.bv-card em{font-style:normal;font-size:12px;color:var(--gold-hi)}
.bv-card .bd-bar{width:70%;margin:6px auto}

@media (max-width:720px){.bs-tip{display:none}}
@media (prefers-reduced-motion: reduce){
  .bs-ic,.bs-tip,.bv-back,.bv-card,.bv-medal .medal,.bs-item *,.bs-count{animation:none !important;transition:none !important}
  .bs-item:hover .bs-ic{transform:none}
}

/* v0.9.9: the medal strip lives in Stats & XP; the full badge gallery lives in the Badges & Rewards widget */
.bs-item.flip .bs-tip{left:auto;right:-6px}
.bs-empty{font-size:12px;color:var(--lo);margin-left:4px}
.sx-medals{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;margin:0 0 12px;padding:6px 12px;background:rgba(0,0,0,.18);border:1px solid var(--line);border-radius:12px}
.sx-medals .bstrip{flex:1 1 240px;min-width:0;flex-wrap:nowrap;min-height:64px;padding:4px 0}
.sx-medals>.btn{flex:none}
.bdw{max-width:1100px;margin:0 auto}
.bdw-head{display:flex;align-items:baseline;gap:10px 14px;flex-wrap:wrap;margin:0 0 6px}.bdw-head h3{margin:0;font-size:17px}.bdw-head .muted{font-size:12px}
.widget.full.fs-top{z-index:10!important}
.widget.full.min{z-index:11!important}
.widget.full.min[data-wid="badges"]{top:84px}
.widget.full[data-wid="badges"]:not(.min){background:var(--panel)}   /* opaque: it can sit on top of Stats & XP without that page showing through */
/* v0.11.2: family code line in the Class widget */
.cl-family{margin:8px 0;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.06);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cl-family b{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;color:var(--gold-hi)}
.cl-family p{flex-basis:100%}

/* Pro gate: a locked widget (js/progate.js) */
.pg-lock{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;height:100%;min-height:140px;padding:18px}
.pg-lock .pg-star{font-size:34px;filter:drop-shadow(0 0 8px rgba(255,203,92,.6))}
.pg-lock b{font-size:16px}.pg-lock p{margin:0;max-width:34ch;opacity:.85;line-height:1.4}
.pg-lock .pg-cta{margin-top:4px;padding:8px 16px;border-radius:999px;border:0;cursor:pointer;font-weight:600;background:linear-gradient(135deg,#ffcb5c,#f59e0b);color:#3b2600}
.pg-lock .pg-note{font-size:12px;opacity:.6}
.cl-pro{margin:4px 0;color:var(--gold-hi);font-weight:600}

/* ---------- Scrapdeck (v0.12.0) ---------- */
.widget[data-wid="scrap"] .body{display:flex;flex-direction:column;padding:8px 12px 76px;overflow:hidden}   /* the dock floats over the bottom edge */
.sc-ed,.sc-gal{flex:1;min-height:0;display:flex;flex-direction:column}
.sc-gal{overflow:auto;padding:0 104px}   /* the left and right drawers float over a full-screen widget; keep cards and buttons clear of them */
.sc-galhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 2px 12px}
.sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.sc-card{background:var(--panel2);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.sc-cover{display:block;width:100%;aspect-ratio:3/2;border:0;padding:0;background:rgba(0,0,0,.25);cursor:pointer;color:inherit}
.sc-cover img{width:100%;height:100%;object-fit:cover;display:block}
.sc-nocover{font-size:42px;display:flex;align-items:center;justify-content:center;height:100%}
.sc-cardmeta{padding:8px 10px 2px;display:flex;flex-direction:column;gap:2px;min-width:0}
.sc-cardmeta b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-acts{display:flex;gap:6px;padding:6px 10px 10px}.sc-acts .btn{padding:4px 9px;font-size:12px}
.sc-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 6px}
.sc-bar .grow{flex:1}
.sc-bar .btn{padding:5px 10px;font-size:12.5px}
.sc-bar .btn:disabled{opacity:.45;cursor:not-allowed}
.sc-bar select,.sc-bar input[type=number],.sc-bar input[type=text]{font:inherit;font-size:12.5px;color:var(--hi);background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:8px;padding:5px 8px;min-width:0}
.sc-bar select{background:var(--panel2)}
.sc-title{width:220px}
.sc-bar input[type=color]{width:34px;height:28px;padding:0;border:1px solid var(--line);border-radius:6px;background:transparent;cursor:pointer}
.sc-ctx{padding:6px 8px;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.18)}
.sc-ctx input[type=text]{min-width:200px}
.sc-snap{display:flex;align-items:center;gap:4px;font-size:12.5px;color:var(--lo)}
.sc-sep{width:1px;height:22px;background:var(--line);margin:0 2px}
.sc-meter,.sc-saved,.sc-pg{font-size:12px}
.sc-pop{border:1px solid var(--line);background:var(--panel2);border-radius:10px;padding:8px 10px;margin:0 0 6px;max-height:150px;overflow:auto}
.sc-pop p{margin:0 0 6px}
.sc-pgrid{display:flex;flex-wrap:wrap;gap:6px}
.sc-pbtn{width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.2);font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:4px;color:inherit}
.sc-pbtn:hover{border-color:var(--gold)}.sc-pbtn svg{width:100%;height:100%}
.sc-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:rgba(0,0,0,.22);border-radius:12px}
.sc-pagewrap{position:relative;flex:none;box-shadow:0 8px 28px rgba(0,0,0,.45)}
.sc-page{position:absolute;left:0;top:0;width:1200px;height:800px;transform-origin:0 0;touch-action:none;user-select:none;outline:none;--inv:1}
.sc-clip{position:absolute;inset:0;overflow:hidden}
.sc-bg-white{background:#fff}.sc-bg-cream{background:#fbf5e6}.sc-bg-kraft{background:#cdaa7d}.sc-bg-mint{background:#dff3e6}.sc-bg-sky{background:#dcecff}.sc-bg-blush{background:#ffe3ea}
.sc-bg-dots{background:radial-gradient(circle,#c9c2a8 1.6px,transparent 1.7px) 0 0/24px 24px,#fffdf5}
.sc-bg-grid{background:linear-gradient(to right,#cfd8e8 1px,transparent 1px) 0 0/32px 32px,linear-gradient(to bottom,#cfd8e8 1px,transparent 1px) 0 0/32px 32px,#fff}
.sc-bg-lined{background:repeating-linear-gradient(to bottom,transparent 0 39px,#bcd0ea 39px 40px),#fffef8}
.sc-it{position:absolute;box-sizing:border-box;cursor:move;outline:none;touch-action:none}
.sc-it:focus-visible{outline:2px dashed var(--gold);outline-offset:2px}
.sc-photo{color:#556}.sc-photo img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;user-select:none}
.sc-photo.sc-f-plain img{border-radius:4px}
.sc-f-polaroid{background:#fff;padding:10px 10px 34px;box-shadow:0 3px 10px rgba(0,0,0,.3)}
.sc-f-taped::before,.sc-f-taped::after{content:'';position:absolute;top:-6px;width:56px;height:18px;background:rgba(244,200,120,.78)}
.sc-f-taped::before{left:-10px;transform:rotate(-35deg)}.sc-f-taped::after{right:-10px;transform:rotate(35deg)}
.sc-text{padding:6px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.25;overflow:hidden}
.sc-text.editing{cursor:text;outline:2px solid var(--gold);user-select:text;-webkit-user-select:text;overflow:auto;background:rgba(255,255,255,.55)}
.sc-sticker{display:flex;align-items:center;justify-content:center;line-height:1;font-family:system-ui,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.sc-sticker svg,.sc-shape svg{width:100%;height:100%;display:block;pointer-events:none}
.sc-sel{position:absolute;border:calc(2px*var(--inv,1)) solid var(--gold);pointer-events:none;box-sizing:border-box;z-index:100000}
.sc-h{position:absolute;display:block;width:calc(14px*var(--inv,1));height:calc(14px*var(--inv,1));margin:calc(-7px*var(--inv,1)) 0 0 calc(-7px*var(--inv,1));background:var(--gold);border:calc(2px*var(--inv,1)) solid #231604;border-radius:50%;pointer-events:auto;box-sizing:border-box;cursor:nwse-resize}
.sc-h[data-h="nw"]{left:0;top:0}.sc-h[data-h="ne"]{left:100%;top:0;cursor:nesw-resize}.sc-h[data-h="se"]{left:100%;top:100%}.sc-h[data-h="sw"]{left:0;top:100%;cursor:nesw-resize}
.sc-h.sc-rot{left:50%;top:calc(-34px*var(--inv,1));cursor:grab}
.sc-rotline{position:absolute;left:50%;top:calc(-34px*var(--inv,1));height:calc(34px*var(--inv,1));width:0;border-left:calc(1.5px*var(--inv,1)) solid var(--gold)}
.widget.full[data-wid="scrap"]{background:#1f2a44}   /* opaque, so a full-screen widget left open behind (Stats, for example) does not ghost through the toolbars */

/* v0.13.0 — Scrapdeck M2: tape, notes, pen, stamps, cutouts, crop, multi-select */
.sc-it.sc-tape{opacity:.85;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.sc-it.sc-note{box-sizing:border-box;padding:14px;line-height:1.25;color:#333;white-space:pre-wrap;overflow:hidden;box-shadow:0 3px 8px rgba(0,0,0,.18)}
.sc-it.sc-pen svg,.sc-it.sc-stamp svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sc-it.sc-stamp{mix-blend-mode:multiply}
.sc-it.sc-photo.sc-f-plain{overflow:hidden}
.sc-it.sc-masked{background:none !important;box-shadow:none !important;padding:0 !important}
.sc-mwrap{position:absolute;inset:0;overflow:hidden}
.sc-it img.sc-crop{position:absolute;max-width:none;max-height:none;object-fit:fill}
.sc-defs{position:absolute;width:0;height:0}
.sc-edgeline{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sc-edgeline path{fill:none;stroke:#fff;stroke-width:8;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.sc-it.sc-edge{filter:drop-shadow(0 3px 5px rgba(0,0,0,.35))}
.sc-it.cropping{outline:3px dashed #ffb703;outline-offset:2px;cursor:move}
.sc-page.sc-drawing,.sc-page.sc-drawing .sc-it{cursor:crosshair}
.sc-ink{position:absolute;left:0;top:0;width:1200px;height:800px;pointer-events:none;z-index:99998}
.sc-band{position:absolute;border:1.5px dashed #3a86ff;background:rgba(58,134,255,.08);pointer-events:none;z-index:99999}
.sc-sel.multi{border-style:dashed}.sc-sel.multi .sc-h{display:none}
.sc-bar .btn.on{outline:2px solid #ffb703;outline-offset:1px}
.sc-layouts{display:flex;gap:8px;flex-wrap:wrap}
.sc-pbtn svg{width:34px;height:34px}

/* ===== v0.15.0 — Scrapdeck sharing (M3, backend v2.8.0): "Share this page" modal ===== */
.sc-modal{position:absolute;inset:0;background:rgba(10,14,24,.55);display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}
.sc-mcard{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:16px 18px;width:min(420px,100%);max-height:85%;overflow:auto;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.sc-mcard h3{margin:0 0 10px}
.sc-mcard h4{margin:14px 0 6px;font-size:13px;color:var(--lo)}
.sc-mlabel{display:block;margin:0 0 10px;font-size:12.5px}
.sc-mlabel input,.sc-mlabel textarea{display:block;width:100%;margin-top:4px;box-sizing:border-box}
.sc-maud{display:flex;gap:14px;margin:0 0 8px;font-size:13px}
.sc-mhint{font-size:11.5px;margin:0 0 10px}
.sc-mbtns{display:flex;justify-content:flex-end;gap:8px;margin-bottom:4px}
.sc-sharelist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:160px;overflow:auto}
.sc-sharelist li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;border-top:1px solid var(--line);padding-top:6px}
.sc-sharelist li:first-child{border-top:0;padding-top:0}
.sc-sharelist .btn{margin-left:auto;padding:3px 9px;font-size:11.5px}

/* ===== v0.14.0 — Shared Board (live view of a DrawDeck page the teacher is sharing) ===== */
.widget[data-wid="sharedboard"] .body{padding:14px 18px 110px;display:flex}
.sb-wrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.sb-img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.35);background:#fff}
.sb-empty{flex:1;display:flex;align-items:center;justify-content:center;text-align:center}

/* v0.16.0 — Scrapdeck's class gallery tab (M3b, read side) */
.sc-galtabs{display:flex;gap:6px;margin:0 0 8px}
.sc-cover-view{cursor:default}

/* v0.17.0 (backend v2.9.0) — Board Assignments (DrawDeck scope step D) */
.widget[data-wid="boardassign"] .body{padding:14px 18px 110px;display:flex;flex-direction:column}
.ba-wrap{flex:1;display:flex;flex-direction:column;min-height:0}
.ba-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;overflow:auto}
.ba-card{background:var(--panel2);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;text-align:left;padding:0;cursor:pointer;color:inherit}
.ba-card:disabled{opacity:.6;cursor:default}
.ba-card img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#0002;display:block}
.ba-meta{padding:8px 10px;display:flex;flex-direction:column;gap:3px;min-width:0}
.ba-meta b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ba-status{font-size:11.5px;color:var(--lo)}
.ba-status.ba-graded{color:var(--gold-hi,#ffcb5c);font-weight:600}
.ba-draw{flex:1;display:flex;flex-direction:column;min-height:0}
.ba-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-bottom:8px}
.ba-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ba-swatch{width:26px;height:26px;border-radius:50%;border:2px solid transparent;padding:0;cursor:pointer}
.ba-swatch.on{border-color:var(--gold-hi,#ffcb5c)}
.ba-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto}
.ba-canwrap{position:relative;width:100%;max-width:900px;background-size:contain;background-repeat:no-repeat;background-position:center;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.3);margin:auto}
.ba-canvas{display:block;width:100%;height:100%;touch-action:none;border-radius:8px}