/* The Social Studio: the admin console's look, with a section list beside the page on a desktop and a chooser on a
   phone. One column of records; nothing scrolls sideways. */
.stu { max-width: 1180px; }
.stu-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.stu-nav { display: none; }
.stu-main { min-width: 0; }
.stu-pick { display: block; width: 100%; min-height: 46px; margin: 0 0 12px; padding: 0 14px; border: 1px solid rgba(75, 227, 255, .5); border-radius: 10px; background: rgba(75, 227, 255, .1); color: #fff;
  font: 600 16px/1.2 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
@media (min-width: 900px) {
  .stu-wrap { grid-template-columns: 230px minmax(0, 1fr); align-items: start; }
  .stu-nav { display: block; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; padding: 4px 6px 12px 0; }
  .stu-pick { display: none; }
}
.stu-group { margin: 16px 0 6px; color: #4be3ff; font: 700 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; }
.stu-group:first-child { margin-top: 0; }
.stu-link { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid transparent; border-radius: 9px; background: none; color: #c7d1df;
  font: 500 14px/1.25 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.stu-link:hover { background: rgba(255, 255, 255, .05); }
.stu-link.is-on { border-color: rgba(75, 227, 255, .5); background: rgba(75, 227, 255, .1); color: #fff; }
.stu-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #6f7f97; }
.stu-dot.is-live { background: #6dff9e; box-shadow: 0 0 8px rgba(109, 255, 158, .7); }
.stu-dot.is-inventory { background: #ffe75b; }

.stu-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.stu-status { margin: 0; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 9px; color: #c7d1df; font: 600 12.5px/1.3 Inter, system-ui, sans-serif; }
.stu-status.is-live { border-color: rgba(109, 255, 158, .55); color: #b6ffcf; }
.stu-status.is-inventory { border-color: rgba(255, 231, 91, .55); color: #ffe75b; }

.stu-block h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.stu-count { color: #8fa3bd; font: 500 13px/1 Inter, system-ui, sans-serif; }
.stu-note { border-color: rgba(255, 231, 91, .28); }
.stu-note p { margin: 0; color: #dfe8f7; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.stu-chip { display: inline-block; max-width: 100%; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 9px; background: rgba(255, 255, 255, .04); color: #dfe8f7; font-size: 13.5px; line-height: 1.3; overflow-wrap: anywhere; }

.stu-val { overflow-wrap: anywhere; }
.stu-swatch { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 3px; vertical-align: -1px; }
.stu-facts, .stu-fields { margin: 0; display: grid; gap: 8px; }
.stu-facts > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .07); }
.stu-facts > div:first-child { border-top: 0; padding-top: 0; }
.stu-facts dt, .stu-fields dt { color: #8fa3bd; font-size: 12.5px; line-height: 1.35; }
.stu-facts dd, .stu-fields dd { margin: 0; color: #eef4ff; font-size: 15px; line-height: 1.4; }
@media (min-width: 640px) {
  .stu-facts > div { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px; align-items: baseline; }
  .stu-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
}
.stu-records { list-style: none; margin: 0; padding: 0; }
.stu-record { padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .08); animation: adm-in .3s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 18ms); }
.stu-record:first-child { border-top: 0; padding-top: 2px; }
.stu-record-head { color: #fff; font: 600 15.5px/1.35 Inter, system-ui, sans-serif; }
.stu-record-head.is-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.stu-record-head .stu-side { color: #c7d1df; font-weight: 400; font-size: 14.5px; }
.stu-fields { margin-top: 6px; }
.stu-cols { display: none; }
@media (min-width: 640px) {
  .stu-record-head.is-row, .stu-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 14px; }
  .stu-cols { padding: 0 0 6px; color: #8fa3bd; font: 600 11px/1.2 ui-monospace, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
}
@media (prefers-reduced-motion: reduce) { .stu-record { animation: none; } }

/* ---------- Night: ThinkerStreet's neon on black. Deep ink, glass panels with a hairline of light, one cyan accent
   with magenta and green as signals. Text is large and bright enough to read for a long time. ---------- */
body.adm-lean.stu-night { color: #eaf1ff; background:
    radial-gradient(900px 420px at 12% -8%, rgba(75, 227, 255, .13), transparent 62%),
    radial-gradient(760px 380px at 96% 4%, rgba(255, 62, 165, .09), transparent 60%),
    radial-gradient(900px 520px at 50% 110%, rgba(139, 92, 246, .10), transparent 60%),
    #04060b; background-attachment: fixed; }
body.adm-lean.stu-night::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(143, 227, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 227, 255, .045) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(120% 70% at 50% 0%, #000 20%, transparent 78%); -webkit-mask-image: radial-gradient(120% 70% at 50% 0%, #000 20%, transparent 78%); }
.stu-night .stu { position: relative; z-index: 1; }
.stu-night .adm .mc-backlink { border-color: rgba(143, 227, 255, .22); background: rgba(10, 16, 28, .7); color: #eaf1ff; border-radius: 10px; transition: border-color .2s ease, box-shadow .2s ease; }
.stu-night .adm .mc-backlink:hover { border-color: rgba(75, 227, 255, .7); box-shadow: 0 0 18px rgba(75, 227, 255, .22); }
.stu-night .adm-kicker { color: #4be3ff; text-shadow: 0 0 14px rgba(75, 227, 255, .55); }
.stu-night .adm-head h1 { font-size: clamp(30px, 6vw, 46px); letter-spacing: -.01em; background: linear-gradient(92deg, #fff 30%, #9fe9ff 70%, #ff9fd3 115%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stu-night .adm-lede { max-width: 70ch; color: #aebcd3; font-size: 16px; line-height: 1.5; }
.stu-night .adm-foot { color: #6c7b94; }

.stu-night .stu-nav { padding: 12px 10px 14px; border: 1px solid rgba(143, 227, 255, .12); border-radius: 14px; background: rgba(8, 12, 22, .66); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); scrollbar-width: thin; scrollbar-color: rgba(143, 227, 255, .25) transparent; }
.stu-night .stu-group { margin: 18px 6px 8px; color: #6fdcff; letter-spacing: .2em; }
.stu-night .stu-group:first-child { margin-top: 4px; }
.stu-night .stu-link { position: relative; min-height: 38px; padding: 7px 10px 7px 14px; color: #c3cfe3; font-size: 14.5px; border-radius: 10px; transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.stu-night .stu-link:hover { background: rgba(143, 227, 255, .07); color: #fff; }
.stu-night .stu-link.is-on { border-color: rgba(75, 227, 255, .45); background: linear-gradient(90deg, rgba(75, 227, 255, .16), rgba(139, 92, 246, .08)); color: #fff; box-shadow: 0 0 22px rgba(75, 227, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .03); }
.stu-night .stu-link.is-on::before { content: ""; position: absolute; left: 4px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: #4be3ff; box-shadow: 0 0 10px #4be3ff; }
.stu-night .stu-dot { background: #56637a; }
.stu-night .stu-dot.is-live { background: #6dff9e; box-shadow: 0 0 9px rgba(109, 255, 158, .9); }
.stu-night .stu-dot.is-inventory { background: #ffd95b; box-shadow: 0 0 8px rgba(255, 217, 91, .55); }
.stu-night .stu-pick { border-color: rgba(75, 227, 255, .55); background: linear-gradient(90deg, rgba(75, 227, 255, .16), rgba(139, 92, 246, .10)); box-shadow: 0 0 24px rgba(75, 227, 255, .14); border-radius: 12px; }

.stu-night .stu-status { border-radius: 10px; background: rgba(10, 16, 28, .7); }
.stu-night .stu-status.is-live { border-color: rgba(109, 255, 158, .6); color: #b9ffd2; box-shadow: 0 0 16px rgba(109, 255, 158, .14); }
.stu-night .stu-status.is-inventory { border-color: rgba(255, 217, 91, .6); color: #ffe58a; box-shadow: 0 0 16px rgba(255, 217, 91, .10); }
.stu-night .adm-btn { border-color: rgba(143, 227, 255, .28); background: rgba(10, 16, 28, .7); color: #eaf1ff; border-radius: 10px; transition: border-color .2s ease, box-shadow .2s ease, transform .12s ease; }
.stu-night .adm-btn:hover { border-color: rgba(75, 227, 255, .8); box-shadow: 0 0 20px rgba(75, 227, 255, .25); }
.stu-night .adm-btn:active { transform: scale(.97); }
.stu-night .adm-search { min-height: 48px; border-color: rgba(143, 227, 255, .2); border-radius: 12px; background: rgba(8, 12, 22, .72); transition: border-color .2s ease, box-shadow .2s ease; }
.stu-night .adm-search::placeholder { color: #7b8aa3; }
.stu-night .adm-search:focus { border-color: rgba(75, 227, 255, .8); box-shadow: 0 0 0 3px rgba(75, 227, 255, .14), 0 0 26px rgba(75, 227, 255, .16); }

/* a panel: dark glass, and a hairline of light around it that brightens along the top edge */
.stu-night .adm-card { position: relative; padding: 18px; border: 0; border-radius: 14px; background: linear-gradient(180deg, rgba(13, 19, 34, .86), rgba(7, 10, 19, .92));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .04); animation: stu-rise .42s cubic-bezier(.16, 1, .3, 1) both; }
.stu-night .adm-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(75, 227, 255, .55), rgba(143, 227, 255, .10) 30%, rgba(139, 92, 246, .14) 70%, rgba(255, 62, 165, .38));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.stu-night .stu-block:nth-child(2) { animation-delay: .04s; } .stu-night .stu-block:nth-child(3) { animation-delay: .08s; } .stu-night .stu-block:nth-child(n+4) { animation-delay: .12s; }
@keyframes stu-rise { from { opacity: 0; transform: translateY(10px); } }
.stu-night .adm-card h2 { margin-bottom: 14px; font-size: 21px; color: #fff; }
.stu-night .stu-count { padding: 2px 8px; border: 1px solid rgba(143, 227, 255, .25); border-radius: 8px; color: #9fe9ff; font: 600 12px/1.4 ui-monospace, Menlo, monospace; }
.stu-night .stu-note { background: linear-gradient(180deg, rgba(34, 26, 8, .7), rgba(14, 12, 8, .86)); }
.stu-night .stu-note::before { background: linear-gradient(140deg, rgba(255, 217, 91, .7), rgba(255, 217, 91, .12) 40%, rgba(255, 62, 165, .3)); }
.stu-night .stu-note p { color: #f4ecd4; font: 500 15.5px/1.6 ui-monospace, "JetBrains Mono", Menlo, monospace; }
.stu-night .stu-chip { border-color: rgba(143, 227, 255, .2); border-radius: 9px; background: rgba(75, 227, 255, .06); color: #dbe7fa; font-size: 14px; }
.stu-night .stu-swatch { width: 13px; height: 13px; border-color: rgba(255, 255, 255, .35); box-shadow: 0 0 10px currentColor; }
.stu-night .stu-facts > div, .stu-night .stu-record { border-top-color: rgba(143, 227, 255, .09); }
.stu-night .stu-facts dt, .stu-night .stu-fields dt { color: #7f93b0; font: 600 11.5px/1.4 ui-monospace, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; }
.stu-night .stu-facts dd, .stu-night .stu-fields dd { color: #eef4ff; font-size: 16px; line-height: 1.45; }
.stu-night .stu-cols { color: #7f93b0; }
.stu-night .stu-record { padding: 12px 8px; margin: 0 -8px; border-radius: 10px; transition: background .18s ease; }
.stu-night .stu-record:hover { background: rgba(143, 227, 255, .045); }
.stu-night .stu-record-head { color: #fff; font-size: 16.5px; }
.stu-night .stu-record-head .stu-side { color: #c3cfe3; font-size: 15.5px; }
@media (prefers-reduced-motion: reduce) { .stu-night .adm-card { animation: none; } }

/* ---------- editing ---------- */
.stu-edit-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 640px) { .stu-edit-row { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }
.stu-edit-item { --c: #4be3ff; display: grid; gap: 4px; min-height: 58px; padding: 10px 12px 10px 16px; position: relative; border: 1px solid rgba(143, 227, 255, .22); border-radius: 12px; background: rgba(8, 12, 22, .7);
  color: #fff; text-align: left; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .12s ease; }
.stu-edit-item::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--c); box-shadow: 0 0 10px var(--c); }
.stu-edit-item:hover { border-color: var(--c); box-shadow: 0 0 22px color-mix(in srgb, var(--c) 30%, transparent); }
.stu-edit-item:active { transform: scale(.98); }
.stu-edit-item b { font: 600 16px/1.25 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.stu-edit-item small { color: #9fb0c9; font-size: 13px; overflow-wrap: anywhere; }
.stu-edit-item.is-draft { border-color: rgba(255, 217, 91, .7); }
.stu-edit-item.is-draft small { color: #ffe58a; }
.stu-edit-off { margin: 0; color: #f4ecd4; font-size: 15px; line-height: 1.5; }
.stu-edit h2 + .stu-edit-row + h2, .stu-edit .stu-edit-off + h2 { margin-top: 18px; }
.stu-draft { margin: 0 0 14px; padding: 14px 16px; border: 1px solid rgba(255, 217, 91, .6); border-radius: 14px; background: linear-gradient(180deg, rgba(40, 30, 6, .85), rgba(16, 13, 6, .92)); box-shadow: 0 0 30px rgba(255, 217, 91, .12); }
.stu-draft p { margin: 0 0 10px; color: #fff3c4; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.stu-draft-row { display: flex; flex-wrap: wrap; gap: 8px; }

.stu-edit-note { margin: -4px 0 12px; color: #aebcd3; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.stu-edit .stu-edit-row + h2 { margin-top: 20px; }
/* ---------- explain a pair ---------- */
.stu-explain-pick { margin: 0 0 10px; }
.stu-explain-pick .adm-search { margin: 0 0 8px; }
.stu-explain-list { display: flex; flex-wrap: wrap; gap: 6px; }
.stu-explain-name { cursor: pointer; font: inherit; font-size: 14px; }
.stu-explain-name:hover { border-color: rgba(75, 227, 255, .7); }
.stu-explain-who { margin: 6px 0 12px; color: #fff; font: 600 17px/1.3 "Source Serif 4", Georgia, serif; overflow-wrap: anywhere; }
.stu-explain-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 720px) { .stu-explain-cols { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.stu-explain-col { min-width: 0; padding: 14px; border: 1px solid rgba(143, 227, 255, .16); border-radius: 12px; background: rgba(8, 12, 22, .6); }
.stu-explain-head { margin: 0; color: #6fdcff; font: 700 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; }
.stu-explain-score { margin: 8px 0 12px; font: 600 40px/1 "Source Serif 4", Georgia, serif; color: #fff; }
.stu-explain-score.is-great { color: #6dff9e; text-shadow: 0 0 22px rgba(109, 255, 158, .45); } .stu-explain-score.is-good { color: #4be3ff; text-shadow: 0 0 22px rgba(75, 227, 255, .4); }
.stu-explain-score.is-fair { color: #ffd95b; } .stu-explain-score.is-low { color: #9fb0c9; }
.stu-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; margin: 0 0 12px; }
.stu-bar span { color: #eaf1ff; font-size: 15px; } .stu-bar b { color: #fff; font: 600 15px/1 ui-monospace, Menlo, monospace; }
.stu-bar i { grid-column: 1 / -1; display: block; height: 8px; border-radius: 4px; background: rgba(143, 227, 255, .12); overflow: hidden; }
.stu-bar em { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #4be3ff, #8b5cf6 70%, #ff3ea5); box-shadow: 0 0 12px rgba(75, 227, 255, .6); transition: width .6s cubic-bezier(.16, 1, .3, 1); }
.stu-bar small { grid-column: 1 / -1; color: #7f93b0; font-size: 12.5px; }
.stu-edit-more { margin-top: 10px; }
.stu-edit-item[hidden] { display: none; }

/* ---------- reading the code ---------- */
.stu-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.stu-sources small { color: #7f93b0; font: 600 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; margin-right: 2px; }
.stu-source { cursor: pointer; font: 600 12.5px/1.3 ui-monospace, "JetBrains Mono", Menlo, monospace; color: #9fe9ff; } .stu-source:hover { border-color: rgba(75, 227, 255, .8); box-shadow: 0 0 16px rgba(75, 227, 255, .2); }
.stu-code-count { margin: -4px 0 10px; min-height: 18px; color: #9fe9ff; font-size: 13.5px; }
.stu-code { padding: 12px 0; border: 1px solid rgba(143, 227, 255, .18); border-radius: 14px; background: rgba(4, 7, 14, .92); box-shadow: 0 18px 44px rgba(0, 0, 0, .45); }
.stu-code-line { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 1px 12px 1px 0; }
.stu-code-line i { color: #56637a; font: 500 12px/1.6 ui-monospace, Menlo, monospace; font-style: normal; text-align: right; user-select: none; }
.stu-code-line code { color: #dbe7fa; font: 500 13px/1.6 ui-monospace, "JetBrains Mono", Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.stu-code-line.is-hit { background: rgba(255, 217, 91, .09); } .stu-code-line.is-hit i { color: #ffd95b; }
.stu-night .stu-records .stu-record { cursor: default; }
#stu [data-stu-body] .stu-block:has(.stu-record) .stu-record-head .stu-val { overflow-wrap: anywhere; }

.stu-queue-row { display: grid; gap: 10px; padding: 12px 0; border-top: 1px solid rgba(143, 227, 255, .1); } .stu-queue-row:first-child { border-top: 0; padding-top: 0; }
.stu-queue-row b { color: #fff; font: 600 16px/1.3 Inter, system-ui, sans-serif; overflow-wrap: anywhere; } .stu-queue-row .stu-edit-note { margin: 4px 0 6px; } .stu-queue-row a.stu-source { text-decoration: none; overflow-wrap: anywhere; }

/* the media library: one field per row to add a photo, then a grid of thumbs */
.stu-upload { display: grid; gap: 10px; margin: 0 0 16px; }
.stu-upload-row { display: grid; gap: 4px; }
.stu-upload-row span { color: #8ea2bf; font: 600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }
.stu-upload input, .stu-upload select { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid rgba(140, 180, 230, .25); border-radius: 10px; background: #0a1120; color: #eaf1ff; font: 400 16px/1.3 Inter, system-ui, sans-serif; }
.stu-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.stu-pic { display: grid; gap: 4px; padding: 0 0 6px; border: 1px solid rgba(140, 180, 230, .22); border-radius: 10px; overflow: hidden; background: #0a1120; color: #c9d6ea; cursor: pointer; text-align: left; }
.stu-pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #060a14; }
.stu-pic small { padding: 0 8px; font: 500 12px/1.3 Inter, system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stu-pic:hover, .stu-pic:focus-visible { border-color: #4be3ff; outline: none; }

/* what is in effect, and anything that is not */
.stu-health { margin: 0 0 12px; padding: 10px 12px; border: 1px solid rgba(143, 227, 195, .35); border-radius: 10px; background: rgba(143, 227, 195, .06); color: #cfeee0; font: 400 14px/1.45 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.stu-health b { color: #8fe3c3; }
.stu-health.is-warn { border-color: rgba(255, 190, 80, .5); background: rgba(255, 190, 80, .08); color: #ffe2a8; } .stu-health.is-warn b { color: #ffbe50; }
.stu-health.is-bad { border-color: rgba(255, 110, 110, .55); background: rgba(255, 110, 110, .08); color: #ffd0d0; } .stu-health.is-bad b { color: #ff8a8a; }

/* choosing a place's photos: the count, upload, the grid to tick, save: one under another */
.stu-pick { display: grid; gap: 10px; }
.stu-pick-upload { justify-self: start; position: relative; cursor: pointer; }
.stu-pick-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.stu-pic.is-on { border-color: #4be3ff; box-shadow: 0 0 0 2px rgba(75, 227, 255, .3); }
.stu-pic.is-on small { color: #9fe9ff; font-weight: 700; }