/* SUPERLAWGH Class Room – app */
:root {
	--teal: #004d4d; --teal-dk: #003535; --teal-2: #0b6463; --gold: #ffde59; --gold-dk: #a88a00;
	--grey: #ecf0f3; --ink: #1b2525; --muted: #5d6d6c; --line: #dbe4e3; --card: #fff;
	--r: 14px; --shadow: 0 1px 2px rgba(0,40,40,.05), 0 8px 28px rgba(0,50,50,.07);
	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--serif: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.slcr-app { margin: 0; background: var(--grey); color: var(--ink); font: 15.5px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--teal); }
img { max-width: 100%; }
.slcr-i { width: 20px; height: 20px; flex: none; vertical-align: middle; }
[hidden] { display: none !important; }
.slcr-kicker { font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-dk); }
.slcr-muted { color: var(--muted); }
.slcr-empty { color: var(--muted); margin: 6px 0; }

/* Buttons & forms */
.slcr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--teal); color: #fff; border: 0; border-bottom: 3px solid var(--gold); border-radius: 10px; padding: 13px 18px; font: 600 15.5px var(--sans); text-decoration: none; cursor: pointer; transition: background .15s, transform .1s; }
.slcr-btn:hover { background: var(--teal-dk); }
.slcr-btn:active { transform: translateY(1px); }
.slcr-btn-ghost { background: #fff; color: var(--teal); border: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.slcr-btn-ghost:hover { background: #f4f8f8; }
.slcr-btn-sm { width: auto; padding: 8px 13px; font-size: 13.5px; border-radius: 8px; }
.slcr-btn-sm .slcr-i { width: 17px; height: 17px; }
.slcr-form label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--teal); margin: 16px 0 6px; }
.slcr-form input[type=email], .slcr-form input[type=password], .slcr-form input[type=text], .slcr-form input[type=tel], .slcr-form textarea {
	width: 100%; font: 16px var(--sans); color: var(--ink); padding: 12px 14px; border: 1px solid #c3d2d1; border-radius: 10px; background: #fbfdfd; transition: border-color .15s, box-shadow .15s; }
.slcr-form input:focus, .slcr-form textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(255,222,89,.55); background: #fff; }
.slcr-form input:disabled { color: var(--muted); background: #f1f4f4; }
.slcr-form .slcr-btn { margin-top: 20px; }
.slcr-form h3 { margin-top: 0; }
.slcr-opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }
.slcr-label-row { display: flex; justify-content: space-between; align-items: baseline; }
.slcr-label-row a { font-size: 13px; font-weight: 600; text-decoration: none; }
.slcr-pw { position: relative; }
.slcr-pw input { padding-right: 68px !important; }
.slcr-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--teal); font: 600 13px var(--sans); cursor: pointer; padding: 6px 8px; }
.slcr-check { display: flex !important; align-items: center; gap: 8px; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; color: var(--muted) !important; font-size: 14px !important; }
.slcr-meter { height: 4px; background: #e3eaea; border-radius: 4px; margin-top: 8px; overflow: hidden; }
.slcr-meter span { display: block; height: 100%; width: 0; background: #d9534f; transition: width .2s, background .2s; }
.slcr-meter[data-s="1"] span { width: 25%; } .slcr-meter[data-s="2"] span { width: 50%; background: #e0a100; }
.slcr-meter[data-s="3"] span { width: 75%; background: #6aa84f; } .slcr-meter[data-s="4"] span { width: 100%; background: #2e8b57; }
.slcr-hp { position: absolute; left: -9999px; }
.slcr-flash { padding: 11px 14px; border-radius: 10px; margin: 0 0 14px; font-size: 14.5px; border-left: 4px solid; transition: opacity .5s, max-height .5s; }
.slcr-flash-ok { background: #e8f5ee; border-color: #2e8b57; color: #17553a; }
.slcr-flash-err { background: #fdecec; border-color: #c0392b; color: #8a1f15; }
.slcr-flash-info { background: #fff8d9; border-color: var(--gold); color: #6b5600; }
.slcr-flash.is-gone { opacity: 0; }

/* Auth screens */
.slcr-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 44%) 1fr; }
.slcr-auth-brand { background: radial-gradient(1200px 600px at -10% -10%, #0b6463 0%, var(--teal) 45%, var(--teal-dk) 100%); color: #e8f2f1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 48px; }
.slcr-auth-brand::after { content: ""; position: absolute; inset: auto -20% -30% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255,222,89,.18); }
.slcr-auth-brand-in { max-width: 380px; position: relative; z-index: 1; }
.slcr-auth-brand img { width: 120px; height: auto; margin-bottom: 18px; filter: drop-shadow(0 6px 16px rgba(0,0,0,.25)); }
.slcr-auth-brand .slcr-kicker { color: var(--gold); }
.slcr-auth-brand h1 { font: 400 40px/1.15 var(--serif); color: #fff; margin: 6px 0 12px; }
.slcr-auth-brand p { color: #cfe2e0; font-size: 16px; margin: 0 0 26px; }
.slcr-auth-brand ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.slcr-auth-brand li { display: flex; gap: 12px; align-items: center; color: #e8f2f1; }
.slcr-auth-brand li .slcr-i { color: var(--gold); }
.slcr-auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; }
.slcr-auth-card { width: 100%; max-width: 420px; background: #fff; border-radius: 18px; padding: 34px 32px; box-shadow: var(--shadow); border-top: 4px solid var(--teal); }
.slcr-auth-card h2 { font: 400 28px/1.2 var(--serif); color: var(--teal); margin: 0 0 6px; }
.slcr-auth-card > .slcr-muted { margin: 0 0 18px; font-size: 14.5px; }
.slcr-switch { text-align: center; font-size: 14px; margin: 18px 0 0; color: var(--muted); }
.slcr-switch a { font-weight: 600; text-decoration: none; }
.slcr-help { font-size: 13px; color: var(--muted); text-align: center; margin: 14px 0 0; }
.slcr-auth-foot { margin-top: 18px; font-size: 13px; }
.slcr-auth-foot a { color: var(--muted); text-decoration: none; }
@media (max-width: 820px) {
	.slcr-auth { grid-template-columns: 1fr; }
	.slcr-auth-brand { padding: 30px 24px 26px; justify-content: flex-start; }
	.slcr-auth-brand-in { display: grid; grid-template-columns: 64px 1fr; column-gap: 14px; align-items: center; }
	.slcr-auth-brand img { width: 64px; margin: 0; grid-row: 1 / 3; }
	.slcr-auth-brand h1 { font-size: 26px; margin: 0; }
	.slcr-auth-brand p, .slcr-auth-brand ul { display: none; }
	.slcr-auth-main { justify-content: flex-start; padding: 0 14px 30px; margin-top: -14px; position: relative; z-index: 2; }
	.slcr-auth-card { padding: 26px 22px; }
}

/* Top bar */
.slcr-top { position: sticky; top: 0; z-index: 40; background: var(--teal); color: #fff; border-bottom: 3px solid var(--gold); padding-top: env(safe-area-inset-top); }
.slcr-top-in { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 10px 20px; }
.slcr-logo { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 17px var(--serif); white-space: nowrap; }
.slcr-logo img { width: 40px; height: auto; }
.slcr-logo b { color: var(--gold); font-weight: 700; letter-spacing: .04em; }
.slcr-nav { display: flex; gap: 4px; margin-left: 16px; }
.slcr-nav a { display: flex; align-items: center; gap: 7px; color: #cfe2e0; text-decoration: none; font-weight: 600; font-size: 14.5px; padding: 8px 12px; border-radius: 9px; }
.slcr-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.slcr-nav a.is-active { background: rgba(255,222,89,.16); color: var(--gold); }
.slcr-nav .slcr-i { width: 18px; height: 18px; }
.slcr-me { margin-left: 0; display: flex; align-items: center; gap: 10px; }
.slcr-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: var(--teal-dk); font: 700 13px var(--sans); display: grid; place-items: center; }
.slcr-me-name { font-weight: 600; font-size: 14px; }
.slcr-out { color: #cfe2e0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; }
.slcr-out:hover { background: rgba(255,255,255,.1); color: #fff; }
.slcr-back { display: flex; align-items: center; gap: 6px; color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; padding: 6px 10px 6px 4px; border-radius: 8px; }
.slcr-back:hover { background: rgba(255,255,255,.1); }

/* Main */
.slcr-main { max-width: 1120px; margin: 0 auto; padding: 26px 20px 110px; }
.slcr-card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 20px 22px; margin-bottom: 18px; display: block; }
.slcr-card h3 { display: flex; align-items: center; gap: 8px; font: 700 13px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin: 0 0 12px; }
.slcr-card-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.slcr-card-h h3 { margin: 0 0 10px; }
.slcr-card-h a { font-size: 13px; font-weight: 600; text-decoration: none; }
.slcr-grid2 { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: start; }
.slcr-col > .slcr-card:last-child { margin-bottom: 0; }
.slcr-page-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px; }
.slcr-page-h h2 { font: 400 30px/1.2 var(--serif); color: var(--teal); margin: 0; }
.slcr-page-h p { margin: 0; color: var(--muted); font-size: 14px; }
.slcr-sub-h { font: 700 13px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin: 28px 0 10px; }

/* Hero */
.slcr-hero { display: flex; justify-content: space-between; align-items: center; gap: 20px; background: linear-gradient(135deg, var(--teal) 0%, var(--teal-2) 100%); color: #fff; border-radius: 18px; padding: 26px 28px; margin-bottom: 18px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.slcr-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; border: 2px solid rgba(255,222,89,.2); }
.slcr-hero h1 { font: 400 32px/1.15 var(--serif); margin: 4px 0 8px; }
.slcr-hero p { margin: 0; color: #d4e6e4; max-width: 560px; }
.slcr-hero .slcr-kicker { color: var(--gold); }
.slcr-ring { position: relative; width: 116px; height: 116px; flex: none; z-index: 1; }
.slcr-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.slcr-ring circle { fill: none; stroke-width: 10; }
.slcr-ring-bg { stroke: rgba(255,255,255,.14); }
.slcr-ring-fg { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 326.7; transition: stroke-dashoffset 1s; }
.slcr-ring > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.slcr-ring b { font: 700 24px var(--sans); }
.slcr-ring span { font-size: 11px; color: #cfe2e0; }

/* Classes */
.slcr-class { display: flex; gap: 16px; padding: 14px 0; }
.slcr-classes .slcr-class { background: #fff; border-radius: var(--r); box-shadow: var(--shadow); padding: 18px; margin-bottom: 12px; }
.slcr-class-date { flex: none; width: 62px; text-align: center; background: var(--grey); border-radius: 12px; padding: 8px 0; height: max-content; border-bottom: 3px solid var(--gold); }
.slcr-class-big .slcr-class-date, .slcr-class.is-live .slcr-class-date { background: var(--teal); color: #fff; }
.slcr-class-mon { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dk); }
.slcr-class-big .slcr-class-mon { color: var(--gold); }
.slcr-class-day { display: block; font: 700 26px/1.1 var(--serif); }
.slcr-class-dow { display: block; font-size: 11px; opacity: .75; }
.slcr-class-body { flex: 1; min-width: 0; }
.slcr-class h4 { font: 400 20px/1.25 var(--serif); color: var(--teal-dk); margin: 6px 0 6px; }
.slcr-class-when { display: flex; align-items: center; gap: 6px; margin: 2px 0; color: var(--muted); font-size: 14px; }
.slcr-class-when .slcr-i { width: 16px; height: 16px; color: var(--teal); }
.slcr-class-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.slcr-tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--grey); color: var(--teal); padding: 3px 8px; border-radius: 20px; }
.slcr-tag-online { background: #e6f1fb; color: #1d5f99; }
.slcr-tag-in-person { background: #fdf3d6; color: #7a5d00; }
.slcr-tag-live { background: #d9534f; color: #fff; animation: slcr-pulse 1.6s infinite; }
@keyframes slcr-pulse { 50% { opacity: .65; } }
.slcr-class-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.slcr-class-notes { font-size: 14px; color: var(--ink); background: #f7faf9; border-radius: 10px; padding: 10px 12px; margin-top: 10px; }
.slcr-class-notes p { margin: 0 0 6px; } .slcr-class-notes p:last-child { margin: 0; }
.slcr-countdown { display: flex; gap: 8px; margin: 12px 0 2px; }
.slcr-countdown span { background: var(--teal); color: #fff; border-radius: 10px; padding: 7px 10px; min-width: 58px; text-align: center; border-bottom: 3px solid var(--gold); }
.slcr-countdown b { display: block; font: 700 20px/1.1 var(--sans); }
.slcr-countdown small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #cfe2e0; }
.slcr-past { list-style: none; padding: 0; margin: 0; background: #fff; border-radius: var(--r); box-shadow: var(--shadow); }
.slcr-past li { padding: 12px 18px; border-bottom: 1px solid var(--line); color: var(--muted); }
.slcr-past li:last-child { border-bottom: 0; }
.slcr-past span { display: inline-block; min-width: 110px; font-weight: 600; color: var(--teal); }

/* Continue + lists */
.slcr-continue { text-decoration: none; color: inherit; border-left: 5px solid var(--gold); transition: transform .15s; }
.slcr-continue:hover { transform: translateY(-2px); }
.slcr-continue h4 { font: 400 19px/1.3 var(--serif); color: var(--teal-dk); margin: 6px 0 8px; }
.slcr-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--teal); }
.slcr-go .slcr-i { width: 16px; height: 16px; }
.slcr-notice { background: #fffbea; border-left: 5px solid var(--gold); }
.slcr-notice-body p { margin: 0 0 8px; } .slcr-notice-body p:last-child { margin: 0; }
.slcr-list { list-style: none; margin: 0; padding: 0; }
.slcr-list a { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-family: var(--serif); font-size: 16px; }
.slcr-list li:last-child a { border-bottom: 0; }
.slcr-list a .slcr-i { margin-left: auto; width: 16px; height: 16px; color: var(--teal); opacity: .5; }
.slcr-list a:hover .slcr-i { opacity: 1; }
.slcr-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); flex: none; box-shadow: 0 0 0 3px rgba(255,222,89,.3); }
.slcr-dot.is-read { background: #c9d6d4; box-shadow: none; }

/* Outline sets */
.slcr-set { background: #fff; border-radius: var(--r); box-shadow: var(--shadow); margin-bottom: 14px; overflow: hidden; }
.slcr-set summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 16px 20px; }
.slcr-set summary::-webkit-details-marker { display: none; }
.slcr-set-name { font: 700 14px var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.slcr-set-count { font-size: 12px; font-weight: 700; background: var(--grey); color: var(--teal); padding: 3px 10px; border-radius: 20px; }
.slcr-set[open] summary { border-bottom: 1px solid var(--line); }
.slcr-set-desc { margin: 12px 20px 0; color: var(--muted); font-size: 14px; }
.slcr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; padding: 16px 20px 20px; }
.slcr-otile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; column-gap: 14px; row-gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; background: #fff; transition: border-color .15s, transform .15s, box-shadow .15s; }
.slcr-otile:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--shadow); }
.slcr-num { grid-row: 1 / 3; align-self: start; background: var(--teal); color: #fff; font: 700 17px var(--serif); border-radius: 9px; padding: 8px 10px; border-bottom: 3px solid var(--gold); }
.slcr-otile.is-read .slcr-num { background: #e3ecec; color: var(--teal); border-bottom-color: #c9d6d4; }
.slcr-otitle { font: 400 16px/1.35 var(--serif); color: var(--teal-dk); }
.slcr-ostate { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }
.slcr-ostate .slcr-i { width: 15px; height: 15px; color: #2e8b57; }
.slcr-new { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--gold); color: var(--teal-dk); padding: 2px 7px; border-radius: 5px; }

/* Mobile tab bar */
.slcr-tabbar { display: none; }
@media (max-width: 860px) {
	.slcr-nav, .slcr-me-name { display: none; }
	.slcr-grid2 { grid-template-columns: 1fr; }
	.slcr-main { padding: 16px 14px 100px; }
	.slcr-hero { padding: 20px; }
	.slcr-hero h1 { font-size: 25px; }
	.slcr-ring { width: 92px; height: 92px; }
	.slcr-ring b { font-size: 19px; }
	.slcr-logo span { font-size: 15px; }
	.slcr-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #fff; border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(0,40,40,.06); }
	.slcr-tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: var(--muted); font-size: 11px; font-weight: 600; padding: 4px 0; border-radius: 10px; }
	.slcr-tabbar a.is-active { color: var(--teal); }
	.slcr-tabbar a.is-active .slcr-i { background: rgba(255,222,89,.45); border-radius: 12px; padding: 2px 12px; width: 46px; height: 26px; }
	.slcr-class { gap: 12px; }
	.slcr-class-date { width: 54px; }
}

/* ======================================================================
 * Reader
 * ==================================================================== */
#slcr-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--gold); z-index: 60; transition: width .1s; }
.slcr-reader-wrap { max-width: 820px; margin: 0 auto; padding: 22px 16px 80px; }
.slcr-reader-head { margin: 4px 0 14px; }
.slcr-chip { display: inline-block; background: #fff; color: var(--teal); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 4px 11px; border-radius: 20px; box-shadow: var(--shadow); }
.slcr-reader-title { font: 400 30px/1.2 var(--serif); color: var(--teal); margin: 10px 0 0; }
.slcr-licence { display: flex; align-items: center; gap: 8px; background: var(--teal); color: #d8e9e7; font-size: 13px; padding: 10px 16px; border-radius: 12px 12px 0 0; border-bottom: 3px solid var(--gold); }
.slcr-licence b { color: #fff; }
.slcr-licence .slcr-i { color: var(--gold); width: 18px; height: 18px; }
.slcr-paper { background: #fff; border-radius: 0 0 12px 12px; box-shadow: var(--shadow); padding: 26px 28px; }
.slcr-reader { position: relative; }
.slcr-tile { position: relative; }
.slcr-tile canvas { display: block; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.slcr-tile:not(.is-ready) { background: linear-gradient(90deg, #f1f5f5 0%, #f8fafa 50%, #f1f5f5 100%); background-size: 200% 100%; animation: slcr-shimmer 1.4s infinite; border-radius: 8px; margin-bottom: 10px; }
@keyframes slcr-shimmer { to { background-position: -200% 0; } }
.slcr-reader-msg { color: var(--muted); }
.slcr-reader-note { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--muted); margin: 14px 4px 0; }
.slcr-reader-note .slcr-i { width: 16px; height: 16px; margin-top: 2px; color: var(--teal); }
.slcr-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.slcr-pn a { display: block; background: #fff; border-radius: 12px; box-shadow: var(--shadow); padding: 14px 16px; text-decoration: none; color: var(--teal-dk); font: 16px/1.35 var(--serif); }
.slcr-pn small { display: block; font: 700 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dk); margin-bottom: 4px; }
.slcr-pn-next { text-align: right; }
@media (max-width: 600px) {
	.slcr-paper { padding: 18px 14px; }
	.slcr-reader-title { font-size: 24px; }
	.slcr-licence { font-size: 12px; }
	.slcr-pn { grid-template-columns: 1fr; }
}
body.slcr-is-reader { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* Reading lens: only a band of the outline is sharp at any moment. */
.slcr-lens { position: fixed; display: none; z-index: 30; pointer-events: none; -webkit-backdrop-filter: blur(7px) saturate(.6); backdrop-filter: blur(7px) saturate(.6); background: rgba(236,240,243,.38); transition: top .08s linear, height .08s linear; }
#slcr-lens-top { border-bottom: 2px solid rgba(255,222,89,.9); }
#slcr-lens-bot { border-top: 2px solid rgba(255,222,89,.9); }

/* Shield */
.slcr-shield { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; background: rgba(0,53,53,.97); padding: 20px; }
.slcr-shielded .slcr-shield { display: grid; }
.slcr-shielded .slcr-reader-wrap { filter: blur(24px); }
.slcr-shield-card { max-width: 380px; text-align: center; color: #d8e9e7; }
.slcr-shield-card h3 { font: 400 26px var(--serif); color: #fff; margin: 14px 0 8px; }
.slcr-shield-card p { margin: 0 0 20px; }

/* Printing gives a blank page */
.slcr-print-block { display: none; }
@media print {
	body.slcr-app > * { display: none !important; }
	body.slcr-app > .slcr-print-block { display: block !important; font: 20px Georgia, serif; color: #004d4d; text-align: center; margin-top: 40vh; }
}
@media (max-width: 600px) {
	.slcr-is-reader .slcr-logo span { display: none; }
	.slcr-is-reader .slcr-top-in { gap: 10px; }
	.slcr-top-in { padding: 8px 14px; }
}

/* 2.1: locks, payments, WhatsApp */
.slcr-btn-wa { background: #128c7e; border-bottom-color: #0b6b60; }
.slcr-btn-wa:hover { background: #0f7a6e; }
.slcr-paybar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff; border-left: 5px solid #128c7e; border-radius: 12px; box-shadow: var(--shadow); padding: 12px 16px; margin: 0 0 16px; font-size: 14.5px; }
.slcr-paybar > .slcr-i { color: var(--teal); }
.slcr-paybar span { flex: 1; min-width: 200px; }
.slcr-paybar-warn { border-left-color: var(--gold); background: #fffbea; }
.slcr-paybar-in { margin: 14px 20px 0; box-shadow: none; border: 1px solid var(--line); border-left: 5px solid #128c7e; }
.slcr-locknote { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); }
.slcr-locknote .slcr-i { width: 16px; height: 16px; }
.slcr-otile.is-locked { background: #f6f8f8; border-style: dashed; cursor: default; }
.slcr-otile.is-locked:hover { transform: none; box-shadow: none; border-color: var(--line); }
.slcr-otile.is-locked .slcr-num { background: #dfe7e7; color: var(--muted); border-bottom-color: #c9d6d4; display: grid; place-items: center; }
.slcr-otile.is-locked .slcr-num .slcr-i { width: 18px; height: 18px; }
.slcr-otile.is-locked .slcr-otitle { color: var(--muted); }
.slcr-unlock { color: #128c7e; font-weight: 700; text-decoration: none; }
.slcr-set-locked { display: inline-flex; align-items: center; gap: 4px; background: #fdecec !important; color: #8a1f15 !important; }
.slcr-set-locked .slcr-i { width: 14px; height: 14px; }
.slcr-list a.is-locked { color: var(--muted); }
.slcr-list a.is-locked > .slcr-i:first-child { width: 15px; height: 15px; color: var(--muted); margin: 0; opacity: 1; }
.slcr-access { list-style: none; margin: 0; padding: 0; }
.slcr-access li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.slcr-access li:last-child { border-bottom: 0; }
.slcr-access li span { flex: 1; font-family: var(--serif); }
.slcr-access li.is-on .slcr-i { color: #2e8b57; }
.slcr-access li.is-off { color: var(--muted); }
.slcr-access em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.slcr-access a { color: #128c7e; font-weight: 700; text-decoration: none; font-size: 14px; }
.slcr-wa-fab { position: fixed; right: 18px; bottom: 18px; z-index: 45; display: flex; align-items: center; gap: 8px; background: #25d366; color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; padding: 12px 16px; border-radius: 30px; box-shadow: 0 8px 24px rgba(18,140,126,.35); }
.slcr-wa-fab .slcr-i { width: 22px; height: 22px; }
.slcr-wa-fab:hover { background: #1ebe5b; }
@media (max-width: 860px) {
	.slcr-wa-fab { bottom: calc(76px + env(safe-area-inset-bottom)); right: 14px; padding: 12px; }
	.slcr-wa-fab span { display: none; }
}
body.slcr-app { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.slcr-app input, body.slcr-app textarea { -webkit-user-select: text; user-select: text; }

/* 2.2: subjects */
.slcr-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; margin-bottom: 6px; scrollbar-width: none; }
.slcr-chips::-webkit-scrollbar { display: none; }
.slcr-chipbtn { flex: none; border: 1px solid var(--line); background: #fff; color: var(--teal); font: 600 13.5px var(--sans); padding: 8px 14px; border-radius: 20px; cursor: pointer; }
.slcr-chipbtn.is-on { background: var(--teal); color: #fff; border-color: var(--teal); box-shadow: inset 0 -3px 0 var(--gold); }
.slcr-subject { margin-bottom: 26px; }
.slcr-subject-h { display: flex; align-items: center; gap: 12px; margin: 0 2px 12px; }
.slcr-subject-h h3 { font: 400 22px/1.2 var(--serif); color: var(--teal); margin: 0; flex: 1; }
.slcr-subject-prog { width: 90px; height: 6px; background: #dfe7e7; border-radius: 4px; overflow: hidden; }
.slcr-subject-prog span { display: block; height: 100%; background: var(--gold); }
.slcr-subject.is-locked .slcr-set { opacity: .75; }
.slcr-set-name { letter-spacing: .1em; }
.slcr-access li.is-part .slcr-i { color: var(--gold-dk); }

/* 2.3: questions and answers */
.slcr-qtile { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.slcr-qtile:hover { border-color: var(--teal); box-shadow: var(--shadow); }
.slcr-qmain { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; column-gap: 14px; row-gap: 8px; padding: 16px; text-decoration: none; color: inherit; }
.slcr-num-q { background: var(--gold) !important; color: var(--teal-dk) !important; border-bottom-color: #d9b800 !important; min-width: 40px; text-align: center; }
.slcr-otitle small, .slcr-li-t small, .slcr-pair small { display: block; font: 700 10.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dk); margin-bottom: 2px; }
.slcr-qans { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-top: 1px dashed var(--line); font-size: 14px; font-weight: 600; text-decoration: none; }
.slcr-qans .slcr-i { width: 17px; height: 17px; }
.slcr-qans span { flex: 1; min-width: 0; }
.slcr-qans.is-live { color: var(--teal); background: #f3f8f7; }
.slcr-qans.is-live:hover { background: #e7f1f0; }
.slcr-qans.is-wait { color: var(--muted); font-weight: 500; background: #fafbfb; }
.slcr-qans.is-locked { color: var(--muted); background: #f6f8f8; }
.slcr-qtile.is-read .slcr-num-q { background: #e3ecec !important; }
.slcr-li-t { display: flex; flex-direction: column; }
.slcr-pair { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 12px; box-shadow: var(--shadow); padding: 14px 16px; margin-top: 18px; text-decoration: none; color: var(--teal-dk); font: 16px/1.35 var(--serif); border-left: 5px solid var(--gold); }
.slcr-pair span { flex: 1; }
.slcr-pair .slcr-i { color: var(--teal); }
.slcr-pair.is-wait { color: var(--muted); border-left-color: #c9d6d4; }
/* Blur also lives on the outline tiles outside the reading band (survives hidden overlays). */
.slcr-lens-on .slcr-tile.is-dim { filter: blur(6px) saturate(.7); transition: filter .12s; }
.slcr-lens-on .slcr-tile { transition: filter .12s; }

/* 2.4: class with questions */
.slcr-qclass { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px dashed var(--line); background: #fffbe6; font-size: 14px; }
.slcr-qclass > .slcr-i { width: 18px; height: 18px; color: var(--teal); }
.slcr-qclass span { flex: 1; font-weight: 600; color: var(--teal-dk); }
.slcr-qclass small { display: block; font: 700 10px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dk); }
.slcr-qclass-card { background: linear-gradient(135deg, var(--teal) 0%, var(--teal-2) 100%); color: #fff; border-radius: 14px; padding: 16px 18px; margin: 0 0 14px; box-shadow: var(--shadow); }
.slcr-qclass-card.is-past { background: #fff; color: var(--muted); }
.slcr-qclass-when small { display: block; font: 700 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.slcr-qclass-card.is-past small { color: var(--gold-dk); }
.slcr-qclass-when b { display: block; font: 400 21px/1.3 var(--serif); margin: 4px 0 2px; }
.slcr-qclass-when span { color: #cfe2e0; font-size: 14px; }
.slcr-qclass-card .slcr-countdown span { background: rgba(255,255,255,.12); }
.slcr-btn-gold { background: var(--gold); color: var(--teal-dk); border-bottom-color: #d9b800; }
.slcr-btn-gold:hover { background: #ffe57a; }
.slcr-btn-line { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); border-bottom: 1px solid rgba(255,255,255,.4); }
.slcr-btn-line:hover { background: rgba(255,255,255,.1); }
.slcr-muted-light { color: #cfe2e0; font-size: 13.5px; align-self: center; }
.slcr-qans small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62ch; }
.slcr-qans .slcr-unlock { flex: none; }
.slcr-reader-wrap .slcr-qans-list, main > .slcr-qans-list { margin: 18px 0 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
main > .slcr-qans-list .slcr-qans:first-child { border-top: 0; }
.slcr-subject.is-empty .slcr-subject-h h3 { opacity: .75; }
.slcr-empty-sub { margin: -4px 0 22px; padding: 14px 18px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); font-size: 14px; background: rgba(255,255,255,.55); }
.slcr-nocourse { display: flex; gap: 12px; align-items: flex-start; }
.slcr-nocourse .slcr-i { flex: none; width: 22px; height: 22px; color: var(--teal); margin-top: 2px; }
.slcr-nocourse p { margin: 0; }
.slcr-setbar { background: #fff; border-radius: 16px; box-shadow: var(--shadow); padding: 16px 18px; margin: 0 0 22px; border-left: 5px solid var(--gold); }
.slcr-setbar-dots { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.slcr-setbar-dots span { font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 5px 10px; border-radius: 20px; background: #eef2f2; color: var(--muted); }
.slcr-setbar-dots span.is-on { background: var(--teal); color: var(--gold); }
.slcr-setbar p { margin: 0 0 10px; font-size: 14.5px; }

/* ================================================================
 * v3.1 — style lift, reading options, dark mode
 * ================================================================ */
:root { --bg: var(--grey); --soft: #f4f8f8; --soft-2: #fafbfb; --field: #fbfdfd; color-scheme: light; }
body.slcr-app { transition: background .25s, color .25s; }

/* Theme switch in the top bar */
.slcr-theme { margin-left: auto; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: var(--gold); cursor: pointer; transition: background .15s, transform .15s; }
.slcr-theme:hover { background: rgba(255,255,255,.18); transform: rotate(-12deg); }
.slcr-theme .slcr-i { width: 19px; height: 19px; }
.slcr-theme .slcr-i:last-of-type, [data-theme=dark] .slcr-theme .slcr-i:first-of-type { display: none; }
[data-theme=dark] .slcr-theme .slcr-i:last-of-type { display: block; }

/* Reading toolbar above an outline */
.slcr-readbar { position: sticky; top: 64px; z-index: 30; display: flex; align-items: center; gap: 6px; margin: 14px 0 0; padding: 8px 10px; background: var(--card); border-radius: 12px 12px 0 0; border-bottom: 1px solid var(--line); box-shadow: 0 -1px 0 var(--line) inset; font-size: 13px; }
.slcr-readbar-l { color: var(--muted); font-weight: 600; letter-spacing: .04em; margin-right: 4px; }
.slcr-size { min-width: 36px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--soft); color: var(--teal); font: 700 15px var(--serif); cursor: pointer; }
.slcr-size[data-step="1"] { font-size: 18px; }
.slcr-size sup { font: 700 10px var(--sans); }
.slcr-size:hover { border-color: var(--teal); }
.slcr-size-v { min-width: 46px; text-align: center; font-weight: 700; color: var(--teal); font-variant-numeric: tabular-nums; }
.slcr-readbar-sep { flex: 1; }
.slcr-theme-txt { margin: 0; width: auto; height: 32px; border-radius: 8px; padding: 0 12px; display: inline-flex; gap: 6px; background: var(--soft); border-color: var(--line); color: var(--teal); font: 600 13px var(--sans); }
.slcr-theme-txt:hover { transform: none; background: var(--soft); border-color: var(--teal); }
.slcr-theme-txt .slcr-i { width: 16px; height: 16px; }
.slcr-is-reader .slcr-licence { border-radius: 12px; margin-bottom: 0; }
.slcr-readbar + .slcr-paper { border-radius: 0 0 14px 14px; }

/* Style lift */
.slcr-paper { box-shadow: 0 1px 2px rgba(0,40,40,.05), 0 18px 50px -18px rgba(0,50,50,.22); }
.slcr-reader-title { letter-spacing: -.01em; }
.slcr-card, .slcr-set, .slcr-qtile, .slcr-setbar { transition: background .25s, border-color .25s, box-shadow .2s; }
.slcr-qtile:hover, .slcr-otile:hover { box-shadow: 0 10px 30px -12px rgba(0,60,60,.28); }
.slcr-subject-h h3 { letter-spacing: -.01em; }
.slcr-qans small, .slcr-empty-sub { text-align: justify; }
.slcr-class-notes, .slcr-notice p { text-align: justify; hyphens: auto; }

/* ---------------- Dark mode ---------------- */
[data-theme=dark] {
	color-scheme: dark;
	--grey: #0c1414; --bg: #0c1414; --card: #141e1e; --ink: #dfe8e6; --muted: #93a5a3; --line: #243333;
	--teal: #7cd3c8; --teal-dk: #a9e6de; --teal-2: #0b5753; --gold-dk: #f0cd4f; --soft: #1a2626; --soft-2: #172222; --field: #101a1a;
	--shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
}
[data-theme=dark] body.slcr-app { background: var(--bg); color: var(--ink); }
[data-theme=dark] .slcr-top { background: #0a3a39; border-bottom-color: var(--gold); }
[data-theme=dark] .slcr-hero { background: linear-gradient(135deg, #0a3f3e 0%, #0d5a56 100%); }
[data-theme=dark] .slcr-hero p { color: #b9d6d2; }
[data-theme=dark] .slcr-btn { background: #0d5c58; color: #fff; }
[data-theme=dark] .slcr-btn:hover { background: #127069; }
[data-theme=dark] .slcr-btn-ghost, [data-theme=dark] .slcr-btn-line { background: var(--soft); color: var(--teal); border-color: var(--line); }
[data-theme=dark] .slcr-btn-wa { background: #128c7e; }
[data-theme=dark] .slcr-paper, [data-theme=dark] .slcr-readbar, [data-theme=dark] .slcr-auth-card,
[data-theme=dark] .slcr-classes .slcr-class, [data-theme=dark] .slcr-set, [data-theme=dark] .slcr-otile, [data-theme=dark] .slcr-qtile,
[data-theme=dark] .slcr-tabbar, [data-theme=dark] .slcr-pn a, [data-theme=dark] .slcr-paybar, [data-theme=dark] .slcr-pair,
[data-theme=dark] .slcr-setbar, [data-theme=dark] .slcr-chip, [data-theme=dark] .slcr-chipbtn, [data-theme=dark] main > .slcr-qans-list,
[data-theme=dark] .slcr-reader-wrap .slcr-qans-list, [data-theme=dark] .slcr-notice, [data-theme=dark] .slcr-past { background: var(--card); color: var(--ink); border-color: var(--line); }
[data-theme=dark] .slcr-chipbtn.is-on { background: #0d5c58; color: #fff; }
[data-theme=dark] .slcr-qans.is-live { background: #172727; color: var(--teal); }
[data-theme=dark] .slcr-qans.is-live:hover { background: #1c3030; }
[data-theme=dark] .slcr-qans.is-wait, [data-theme=dark] .slcr-qans.is-locked, [data-theme=dark] .slcr-otile.is-locked { background: #121b1b; color: var(--muted); }
[data-theme=dark] .slcr-qclass, [data-theme=dark] .slcr-paybar-warn { background: #232110; color: var(--ink); }
[data-theme=dark] .slcr-class-notes, [data-theme=dark] .slcr-tag-in-person { background: var(--soft); color: var(--ink); }
[data-theme=dark] .slcr-set-locked, [data-theme=dark] .slcr-flash-err { background: #2a1717; color: #f2a9a9; border-color: #4a2323; }
[data-theme=dark] .slcr-flash-ok { background: #102a1f; color: #9fe0bd; border-color: #2e8b57; }
[data-theme=dark] .slcr-flash-info { background: #12222b; color: #a9d2ea; }
[data-theme=dark] .slcr-tag-online { background: #12283a; color: #9cc8ef; }
[data-theme=dark] .slcr-tile:not(.is-ready) { background: linear-gradient(90deg, #172323 0%, #1d2b2b 50%, #172323 100%); background-size: 200% 100%; }
[data-theme=dark] .slcr-empty-sub { background: rgba(20,30,30,.6); border-color: var(--line); }
[data-theme=dark] .slcr-setbar-dots span { background: #1d2a2a; color: var(--muted); }
[data-theme=dark] .slcr-setbar-dots span.is-on { background: #0d5c58; color: var(--gold); }
[data-theme=dark] .slcr-form input[type=email], [data-theme=dark] .slcr-form input[type=password], [data-theme=dark] .slcr-form input[type=text], [data-theme=dark] .slcr-form input[type=tel], [data-theme=dark] .slcr-form textarea { background: var(--field); color: var(--ink); border-color: #2c3d3d; }
[data-theme=dark] .slcr-licence { background: #0a3a39; }
[data-theme=dark] .slcr-countdown span, [data-theme=dark] .slcr-class-date { background: #0a3a39; }
[data-theme=dark] .slcr-avatar { color: #0a3a39; }
[data-theme=dark] a { color: var(--teal); }
[data-theme=dark] .slcr-lens { background: rgba(12,20,20,.55); }
.slcr-readbar { z-index: 35; }
.slcr-logo em { font-style: normal; }
.slcr-logo { min-width: 0; }
@media (max-width: 520px) { .slcr-logo em { display: none; } .slcr-theme { width: 34px; height: 34px; } }
[data-theme=dark] .slcr-num-q, [data-theme=dark] .slcr-new, [data-theme=dark] .slcr-num { color: #0a3a39; }
[data-theme=dark] .slcr-otile.is-read .slcr-num, [data-theme=dark] .slcr-otile .slcr-num { background: #1f3332; color: var(--teal); }
[data-theme=dark] .slcr-num-q { background: var(--gold); color: #0a3a39; }
[data-theme=dark] .slcr-num.slcr-num-q, [data-theme=dark] .slcr-qtile .slcr-num-q { color: #0a3a39 !important; }
/* Answers tab */
.slcr-reader-sub { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.slcr-ans-subject { margin-bottom: 26px; }
.slcr-ans-subject h3 { font: 400 22px/1.2 var(--serif); color: var(--teal); margin: 0 0 12px; }
.slcr-ans-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.slcr-ans { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 16px 18px; text-decoration: none; color: var(--ink); border-left: 5px solid var(--gold); transition: transform .12s, box-shadow .2s; }
.slcr-ans:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -12px rgba(0,60,60,.3); }
.slcr-ans-set { grid-row: 1 / 3; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 12px; background: var(--teal); color: var(--gold); font: 700 12px/1.1 var(--sans); text-align: center; letter-spacing: .04em; text-transform: uppercase; padding: 4px; }
.slcr-ans-t { font: 400 17px/1.3 var(--serif); color: var(--teal); }
.slcr-ans-t small { display: block; font: 700 10.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dk); margin-bottom: 2px; }
.slcr-ans-s { grid-column: 2; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.slcr-ans-s .slcr-i { width: 15px; height: 15px; color: #2e8b57; }
.slcr-ans > .slcr-i { grid-column: 3; grid-row: 1 / 3; color: var(--teal); }
.slcr-ans.is-wait { border-left-color: var(--line); opacity: .85; }
.slcr-ans.is-wait .slcr-ans-set { background: var(--soft); color: var(--muted); }
.slcr-ans.is-read { border-left-color: #2e8b57; }
[data-theme=dark] .slcr-ans { background: var(--card); }
[data-theme=dark] .slcr-ans-set { background: #0d5c58; }
[data-theme=dark] .slcr-ans.is-wait .slcr-ans-set { background: #1d2a2a; }
@media (max-width: 480px) { .slcr-readbar-l { display: none; } .slcr-readbar { gap: 4px; padding: 6px 8px; } .slcr-theme-txt { padding: 0 9px; } }


/* Class recording bar (3.5): one thin line */
.slcr-readbar { flex-wrap: wrap; }
.slcr-rec { flex: 1 1 100%; min-width: 0; order: 10; display: flex; align-items: center; gap: 10px; margin: 8px -10px -8px; padding: 6px 12px; background: var(--teal); color: #fff; border-top: 2px solid var(--gold); }
.slcr-rec-play { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--gold); display: grid; place-items: center; cursor: pointer; padding: 0; }
.slcr-rec-play svg { width: 16px; height: 16px; fill: var(--teal); }
.slcr-rec-play .i-pause, .slcr-rec.is-playing .slcr-rec-play .i-play { display: none; }
.slcr-rec.is-playing .slcr-rec-play .i-pause { display: block; }
.slcr-rec-label { flex: 0 0 auto; font: 700 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.slcr-rec-bar { flex: 1 1 auto; min-width: 40px; position: relative; height: 5px; border-radius: 3px; background: rgba(255,255,255,.25); cursor: pointer; }
.slcr-rec-bar::before { content: ""; position: absolute; inset: -10px 0; }
.slcr-rec-fill { position: absolute; inset: 0; border-radius: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.slcr-rec-time { flex: 0 0 auto; font: 600 12px var(--sans); opacity: .9; white-space: nowrap; }
.slcr-rec-speed { flex: 0 0 auto; font: 700 12px var(--sans); color: #fff; background: rgba(255,255,255,.14); border: 0; border-radius: 6px; height: 26px; min-width: 38px; cursor: pointer; }
@media (max-width: 480px) { .slcr-rec-label { display: none; } }
.slcr-rec.is-wait .slcr-rec-play { opacity: .6; }
.slcr-readbar .slcr-theme.slcr-theme-txt { width: auto; flex: 0 0 auto; }