/* Reference glass: alpha silhouettes, original painted texture, live lettering.
   Load after watercolor-home.css. No baked labels or rectangular paper crops. */
html body:is(.watercolor-home,.watercolor-cabinet) .wc-button.wc-ref-button {
 --wc-ref-skin:url('/static/student/assets/watercolor/buttons-v3/frosted-pearl.svg');
 --wc-pointer-x:50%;--wc-pointer-y:50%;
 position:relative!important;isolation:isolate;display:inline-flex!important;
 align-items:center;justify-content:center;min-width:0;max-width:100%;
 min-height:32px;height:auto;padding:7px 16px!important;border:0!important;
 border-radius:999px!important;background:none!important;box-shadow:none!important;
 color:#206875!important;text-shadow:0 1px 0 #fffff5a8;font:700 14px/1.16 Georgia,'Times New Roman',serif;
 white-space:normal;text-align:center;text-decoration:none;overflow:visible!important;
 transition:filter .18s ease,transform .18s ease!important;
 filter:drop-shadow(0 2px 2px #52655028);transform:none!important;
 touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-button.wc-ref-button::before,
html body:is(.watercolor-home,.watercolor-cabinet) .wc-button.wc-ref-button::after {content:none!important;display:none!important}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button>.wc-ref-surface {
 position:absolute!important;inset:0;z-index:-1!important;display:block;pointer-events:none;
 background-image:var(--wc-ref-skin);background-repeat:no-repeat;background-size:100% 100%;
 filter:none;opacity:1;border-radius:inherit;overflow:hidden;
 clip-path:inset(0 round 999px);
}
/* The painted SVG's 360:60 geometry is texture, not the control's silhouette.
   Keeping the silhouette in CSS preserves a truly round end at every width:
   a 150px caption must not squeeze its end into the old 9px corner. The full
   paint layer and both animated highlights are clipped to this same capsule. */
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button.wc-ref-painted>.wc-ref-surface,
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button.wc-ref-nav.active>.wc-ref-surface {
 border:1px solid #a39670;background-size:cover;background-position:center;
 background-color:#17818c;
 box-shadow:inset 0 0 0 1px #ffffeac9,inset 0 2px 2px 1px #f1fffedb,
   inset 0 -2px 2px 1px #bde5d58c,inset 2px 0 3px #cffff08c,
   inset -2px 0 3px #143e4540;
}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button[data-wc-reference-button='continue']>.wc-ref-surface{background-color:#70459b}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button>.wc-button-label {
 position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
 gap:8px;min-width:0;max-width:100%;white-space:normal;overflow-wrap:break-word;
 text-wrap:pretty;line-height:inherit;color:inherit;
}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button .wc-button-label>.icon {
 width:1.14em;height:1.14em;min-width:1.14em;flex-shrink:0;
}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button.wc-ref-painted {
 --wc-ref-skin:url('/static/student/assets/watercolor/buttons-v3/painted-teal.svg');
 min-height:49px;padding:12px 24px!important;color:#fffef1!important;
 font-size:19px;text-shadow:0 1px 2px #04333ec4;
 filter:drop-shadow(0 3px 2px #5c664f35);
}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button[data-wc-reference-button='continue'] {
 --wc-ref-skin:url('/static/student/assets/watercolor/buttons-v3/painted-purple.svg');
 font-size:21px;min-height:52px;
}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button[data-wc-reference-button='avatar'] {
 min-height:36px;padding:9px 14px!important;font-size:12px;
}
html body:is(.watercolor-home,.watercolor-cabinet) .avatar-stage .avatar-edit.wc-ref-button {position:absolute!important}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button[data-wc-reference-button='assistant'] {font-size:15px;min-height:44px;padding:11px 19px!important}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button[data-wc-reference-button='map'] {font-size:16px;min-height:46px;padding:11px 20px!important}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button[data-wc-reference-button='news'] {font-size:17px;min-height:46px;padding:11px 21px!important}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button[data-wc-reference-button='repeat'] {font-size:13px;padding:6px 13px!important;min-height:30px;text-decoration:underline;text-underline-offset:2px}
html body:is(.watercolor-home,.watercolor-cabinet) .homework .wc-ref-button[data-wc-reference-button='repeat'] {display:flex!important;width:max-content;max-width:100%;margin-inline:auto!important}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button[data-wc-reference-button='dragon'] {font-size:13px;min-height:31px;padding:7px 14px!important;text-decoration:underline;text-underline-offset:2px}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button[data-wc-reference-button='week'],
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button[data-wc-reference-button='all-courses'] {font-size:14px;min-height:31px;padding:7px 14px!important}
/* The highlight is clipped to an irregular glass silhouette, never the box. */
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-glint,
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-sweep {
 position:absolute;inset:4% 1.4%;pointer-events:none;border-radius:999px;
 clip-path:polygon(5% 0,93% 0,96% 6%,98% 18%,99% 34%,99.5% 52%,98% 73%,95% 94%,90% 100%,7% 100%,3% 91%,1% 69%,.5% 46%,2% 20%);
}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-glint {
 opacity:0;background:radial-gradient(ellipse 65px 35px at var(--wc-pointer-x) var(--wc-pointer-y),#ffffffa3, #d1ffff38 46%,transparent 78%);
 transition:opacity .18s ease;mix-blend-mode:screen;
}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-sweep {
 opacity:0;background:linear-gradient(107deg,transparent 25%,#fff0 39%,#ffffff72 49%,#fff4 53%,transparent 65%);
 background-size:250% 100%;background-position:160% 0;
}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button:hover .wc-ref-glint,
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button:focus-visible .wc-ref-glint {opacity:.72}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button:hover .wc-ref-sweep,
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button:focus-visible .wc-ref-sweep {animation:wc-ref-shimmer .9s ease-out both}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button:hover {transform:translateY(-1px)!important;filter:drop-shadow(0 3px 3px #54665044)}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button:active {transform:translateY(0)!important;filter:brightness(.96) drop-shadow(0 1px 1px #54665033)}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button:focus-visible {outline:2px solid #147f8d!important;outline-offset:3px;border-radius:22px!important}
@keyframes wc-ref-shimmer {0%{background-position:160% 0;opacity:0}14%{opacity:.58}100%{background-position:-60% 0;opacity:0}}
/* A route is selected by the real anchor, not by lettering painted in a PNG. */
html body:is(.watercolor-home,.watercolor-cabinet) .nav .wc-ref-button.wc-ref-nav {
 --wc-ref-skin:none;min-height:44px;padding:8px 9px!important;width:100%;
 font:600 14px/1.18 Arial,sans-serif;color:var(--text)!important;filter:none;
 text-shadow:0 1px 0 #fff6;border-radius:24px!important;
 background:none!important;border:0!important;box-shadow:none!important;
}
html body:is(.watercolor-home,.watercolor-cabinet) .nav .wc-ref-button.wc-ref-nav.active {
 --wc-ref-skin:url('/static/student/assets/watercolor/buttons-v3/painted-teal.svg');
 color:#fffef0!important;text-shadow:0 1px 1px #1246539e;
 background:none!important;border:0!important;box-shadow:none!important;
}
html body:is(.watercolor-home,.watercolor-cabinet) .nav .wc-ref-button.wc-ref-nav:not(.active) .wc-ref-surface {border-radius:24px}
html body:is(.watercolor-home,.watercolor-cabinet) .nav .wc-ref-button.wc-ref-nav:not(.active):hover .wc-ref-surface {background-color:#d1eeec30}
html body:is(.watercolor-home,.watercolor-cabinet) .nav .wc-ref-button.wc-ref-nav .wc-button-label>.icon {width:23px;height:23px;min-width:23px}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button.wc-ref-icon {
 --wc-ref-skin:url('/static/student/assets/watercolor/buttons-v3/frosted-orb.svg');
 padding:0!important;width:44px;height:44px;min-width:44px;min-height:44px;
 flex:none;border-radius:50%!important;color:#206875!important;
}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button.wc-ref-icon>.wc-ref-surface {background-size:contain;border-radius:50%}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button.wc-ref-icon :is(.wc-ref-glint,.wc-ref-sweep) {clip-path:circle(47%);border-radius:50%}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button.wc-ref-icon .wc-button-label>.icon {width:25px;height:25px;min-width:25px}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button.wc-ref-icon .notice-dot {z-index:3}
html[data-theme='dark'] body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button:not(.wc-ref-painted):not(.active) {color:#cce5dc!important;text-shadow:0 1px 1px #102e3f}
html[data-theme='dark'] body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button:not(.wc-ref-painted):not(.active)>.wc-ref-surface {filter:none}
html[data-theme='dark'] body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button:not(.wc-ref-painted):not(.active):not(.wc-ref-nav)>.wc-ref-surface {
 background-image:radial-gradient(ellipse at 22% 8%,#cdfaf982,transparent 49%),linear-gradient(165deg,#356875dc,#103b49cc 48%,#0b3444de 72%,#285e6bdd);
 border:1px solid #7eb3b6b8;
 box-shadow:inset 0 1px 1px #edfffbd6,inset 1px 0 2px #beefeb64,inset 0 -1px 2px #61c4cd8c,0 1px 3px #03182066;
}
html[data-theme='dark'] body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button.wc-ref-icon>.wc-ref-surface {
 background-image:radial-gradient(ellipse at 32% 13%,#d2ffff85,transparent 30%),radial-gradient(ellipse at 48% 48%,#133643ba 45%,#366977d9 86%,#67abb5cc);
 box-shadow:inset 0 1px 2px #e8ffffdb,inset 1px 0 2px #b6eae989,inset 0 -2px 3px #79c7c680,0 1px 4px #03182066;
}
html[data-theme='dark'] body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button.wc-ref-icon{color:#79e3ee!important}
html[data-theme='dark'] body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button[data-wc-reference-button='notifications']{color:#f1efdd!important}
html[data-theme='dark'] body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button.wc-ref-painted>.wc-ref-surface,
html[data-theme='dark'] body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button.active>.wc-ref-surface {filter:brightness(.91) saturate(.92)}
html[data-theme='dark'] body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button:focus-visible {outline-color:#d6f2c4!important}
@media(max-width:1430px) {
 html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button.wc-ref-painted{font-size:17px;min-height:45px;padding:11px 19px!important}
 html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button[data-wc-reference-button='continue']{font-size:19px;min-height:49px}
 html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button[data-wc-reference-button='avatar']{font-size:12px;min-height:34px;padding:8px 13px!important}
 html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button[data-wc-reference-button='assistant']{font-size:13px;min-height:42px;padding:10px 15px!important}
 html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button[data-wc-reference-button='map']{font-size:14px;min-height:42px}
 html body:is(.watercolor-home,.watercolor-cabinet) .nav .wc-ref-button.wc-ref-nav{font-size:13px}
}
@media(max-width:760px) {
 html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button.wc-ref-icon{width:36px;height:36px;min-width:36px;min-height:36px}
 html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button.wc-ref-icon .wc-button-label>.icon{width:21px;height:21px;min-width:21px}
 html body:is(.watercolor-home,.watercolor-cabinet) .nav .wc-ref-button.wc-ref-nav{font-size:12px;min-height:41px;padding:8px 7px!important}
 html body:is(.watercolor-home,.watercolor-cabinet) .nav .wc-ref-button.wc-ref-nav .wc-button-label{gap:5px}
 html body:is(.watercolor-home,.watercolor-cabinet) .nav .wc-ref-button.wc-ref-nav .wc-button-label>.icon{width:19px;height:19px;min-width:19px}
 html body:is(.watercolor-home,.watercolor-cabinet) .section-head{flex-wrap:wrap;row-gap:10px}
}
@media(max-width:480px) {
 html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button.wc-ref-icon{width:33px;height:33px;min-width:33px;min-height:33px}
 html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button.wc-ref-painted{font-size:17px}
 html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button[data-wc-reference-button='assistant']{font-size:13px;padding-inline:15px!important}
 html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button[data-wc-reference-button='avatar']{font-size:12px}
 html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button[data-wc-reference-button='map']{font-size:14px}
 html body:is(.watercolor-home,.watercolor-cabinet) .nav .wc-ref-button.wc-ref-nav{font-size:13px;min-height:40px}
 html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button>.wc-button-label{gap:6px}
}
@media(prefers-reduced-motion:reduce) {
 html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button,html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-glint{transition:none!important}
 html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-sweep{display:none!important}
 html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button:hover{transform:none!important}
}
html[data-motion='off'] body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-sweep{display:none!important}
html[data-motion='off'] body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button,html[data-motion='off'] body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-glint{transition:none!important}

/* Seven calendar dates use the same frosted glass material as the controls.
   They remain real date buttons: the existing day selection and events work. */
html body:is(.watercolor-home,.watercolor-cabinet) .schedule .week .day {
 --wc-pointer-x:50%;--wc-pointer-y:22%;
 position:relative;isolation:isolate;overflow:hidden;
 height:65px;min-width:0;padding:8px 1px;border:1px solid #b7a6849c;
 border-radius:11px;background:
  radial-gradient(ellipse at 20% 6%,#ffffffe0,transparent 62%),
  linear-gradient(150deg,#fffff2bf,#dbe8db99 45%,#e1e9d6a3 71%,#fff8dcda);
 box-shadow:inset 0 0 0 1px #ffffffd1,inset 0 2px 3px #fffdf4,
  inset 0 -2px 2px #8ea79a45,0 2px 3px #68775c16;
 backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
 color:var(--text);text-shadow:0 1px 0 #fff9;
 transition:box-shadow .18s ease,transform .18s ease;
}
html body:is(.watercolor-home,.watercolor-cabinet) .schedule .week .day::before {
 content:'';position:absolute;inset:2px;z-index:-1;pointer-events:none;
 border-radius:8px;background:
  radial-gradient(ellipse 42px 37px at var(--wc-pointer-x) var(--wc-pointer-y),#ffffffad,transparent 75%),
  linear-gradient(112deg,transparent 24%,#ffffff40 42%,transparent 62%);
 opacity:.5;transition:opacity .18s ease;
}
html body:is(.watercolor-home,.watercolor-cabinet) .schedule .week .day::after {
 content:'';position:absolute;left:7px;right:7px;top:4px;height:2px;
 border-radius:50%;background:linear-gradient(90deg,#fff0,#fffffff0,#fff0);
 pointer-events:none;
}
html body:is(.watercolor-home,.watercolor-cabinet) .schedule .week .day.selected {
 border-color:#f0f6d9;color:#fffdf0;text-shadow:0 1px 1px #114855b3;
 background:
  radial-gradient(ellipse at 20% 5%,#c9ffefc9,transparent 48%),
  radial-gradient(ellipse at 82% 69%,#288c9459,transparent 64%),
  linear-gradient(160deg,#7bcac1,#208a96 37%,#176c7d 75%,#4da5a8);
 box-shadow:inset 0 0 0 1px #d9fff6dc,inset 0 3px 3px #e1fff4d9,
  inset 0 -2px 3px #a7e0d38c,0 0 0 1px #678c818c,0 3px 5px #335e5933;
}
html body:is(.watercolor-home,.watercolor-cabinet) .schedule .week .day:hover::before,
html body:is(.watercolor-home,.watercolor-cabinet) .schedule .week .day:focus-visible::before{opacity:.94}
html body:is(.watercolor-home,.watercolor-cabinet) .schedule .week .day:hover{transform:translateY(-1px)}
html body:is(.watercolor-home,.watercolor-cabinet) .schedule .week .day:focus-visible{outline:2px solid #147f8d;outline-offset:3px}
html[data-theme='dark'] body:is(.watercolor-home,.watercolor-cabinet) .schedule .week .day {
 border-color:#b8a57980;color:#ede2bb;text-shadow:0 1px 1px #102e3f;
 background:radial-gradient(ellipse at 25% 5%,#b9dbd74d,transparent 61%),linear-gradient(150deg,#294b4ed4,#183840b8 61%,#496160cc);
 box-shadow:inset 0 0 0 1px #cfddbd38,inset 0 2px 2px #d8efe051,inset 0 -2px 2px #081d2752,0 2px 3px #08182152;
}
html[data-theme='dark'] body:is(.watercolor-home,.watercolor-cabinet) .schedule .week .day.selected {
 color:#fff5d0;border-color:#c4cca4ad;
 background:radial-gradient(ellipse at 20% 5%,#e1ffdc8a,transparent 48%),linear-gradient(155deg,#6da6a1,#1d6a77 40%,#194856 74%,#438886);
 box-shadow:inset 0 0 0 1px #e0ecd7a3,inset 0 2px 3px #e5f6cead,inset 0 -2px 2px #7dc2b185,0 0 8px #bcdfb31f;
}
html[data-theme='dark'] body:is(.watercolor-home,.watercolor-cabinet) .schedule .week .day::before{opacity:.2}
@media(prefers-reduced-motion:reduce){html body:is(.watercolor-home,.watercolor-cabinet) .schedule .week .day,html body:is(.watercolor-home,.watercolor-cabinet) .schedule .week .day::before{transition:none!important}html body:is(.watercolor-home,.watercolor-cabinet) .schedule .week .day:hover{transform:none}}
html[data-motion='off'] body:is(.watercolor-home,.watercolor-cabinet) .schedule .week .day,html[data-motion='off'] body:is(.watercolor-home,.watercolor-cabinet) .schedule .week .day::before{transition:none!important}