:root {
  color-scheme: light;
  --sky: #d8edf0;
  --sky-deep: #a9d8e2;
  --mint: #98d7b4;
  --mint-soft: #dff6e8;
  --lime: #c9eb8f;
  --sun: #fff2a6;
  --coral: #ff9c8a;
  --berry: #d98ab6;
  --ink: #233235;
  --muted: #667b7f;
  --paper: #fbfff7;
  --line: rgba(35, 50, 53, .12);
  --shadow: 0 18px 46px rgba(41, 77, 84, .18);
  font-family: Inter, Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --card-font: "Manrope", "Inter", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--sky); }
body { margin: 0; height: 100dvh; overflow: hidden; background: radial-gradient(circle at 20% 0%, #f8fff7 0, transparent 28%), linear-gradient(160deg, #d8edf0, #e8f7e8 62%, #fff5ce); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { min-height: 44px; border: 0; border-radius: 18px; padding: 0 14px; background: var(--ink); color: #fff; font-weight: 900; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid rgba(255, 242, 166, .95); outline-offset: 2px; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.78); color: var(--ink); padding: 12px 13px; }
textarea { resize: vertical; min-height: 96px; }
label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 900; }
h1, h2, p { margin: 0; }
.hidden { display: none !important; }
.eyebrow { color: var(--muted); font-size: 11px; font-weight: 950; letter-spacing: .13em; text-transform: uppercase; }
.stack { display: grid; gap: 12px; }

.splash { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; align-content: center; gap: 12px; padding: 24px; background: linear-gradient(160deg, #d8edf0, #e8f7e8); transition: opacity .32s ease, visibility .32s ease; }
.app-ready .splash { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-icon { width: 132px; height: 132px; filter: drop-shadow(0 18px 26px rgba(41, 77, 84, .18)); }
.splash h1 { font-size: 34px; letter-spacing: -.05em; }
.splash p { color: var(--muted); font-weight: 900; }

.login-screen { display: grid; place-items: center; min-height: 100dvh; padding: max(22px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom)); }
.login-card { display: grid; gap: 16px; width: min(430px, 100%); padding: 26px; border: 1px solid rgba(255,255,255,.68); border-radius: 34px; background: rgba(251,255,247,.82); box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.login-card h1 { font-size: 34px; line-height: .96; letter-spacing: -.05em; }
.lead { color: var(--muted); line-height: 1.45; }
.error, .result-box { padding: 12px 14px; border-radius: 17px; background: #ffe1dc; color: #8d3528; font-size: 13px; font-weight: 850; line-height: 1.35; }
.result-box.ok { background: var(--mint-soft); color: #2c6d47; }

.study-shell { display: grid; grid-template-rows: auto auto minmax(280px, 1fr) auto auto; gap: 7px; width: min(780px, 100%); height: 100dvh; margin: 0 auto; padding: max(9px, env(safe-area-inset-top)) 9px max(8px, env(safe-area-inset-bottom)); overflow: hidden; }
.topbar { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 10px; padding: 4px 2px 3px; }
.app-badge { justify-self: center; max-width: 100%; padding: 11px 22px; border-radius: 999px; background: linear-gradient(135deg, #ffcc69, #ff8f79 48%, #42b8c8); color: #fff; font-size: 19px; font-weight: 1000; letter-spacing: -.045em; text-shadow: 0 1px 2px rgba(54, 44, 28, .22); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 12px 26px rgba(230, 117, 37, .2); }
.round-icon { display: grid; place-items: center; width: 48px; min-width: 48px; padding: 0; border-radius: 999px; background: rgba(255,255,255,.68); color: #326972; box-shadow: 0 10px 22px rgba(41, 77, 84, .11); }
.round-icon.is-placeholder { opacity: 0; pointer-events: none; }

.study-toolbar { display: grid; grid-template-columns: 1fr 46px auto; gap: 8px; align-items: end; min-height: 48px; }
.thin-select { gap: 4px; font-size: 10px; }
.thin-select select { min-height: 38px; padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,.64); font-size: 13px; font-weight: 900; }
.shuffle-btn { width: 46px; min-width: 46px; padding: 0; border-radius: 999px; background: linear-gradient(135deg, var(--sun), #ffbf7a); color: #6f4a17; font-size: 22px; box-shadow: 0 10px 22px rgba(221, 146, 48, .18); }
.lang-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; min-width: 92px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.58); border: 1px solid rgba(255,255,255,.7); }
.lang-switch button { min-height: 34px; padding: 0 10px; border-radius: 999px; background: transparent; color: #4e747b; font-size: 12px; }
.lang-switch button.active { background: linear-gradient(135deg, #6ccf9d, #42b8c8); color: #fff; box-shadow: 0 8px 16px rgba(57, 155, 143, .22); }

.info-panel { display: grid; grid-template-columns: 1fr 74px; gap: 10px; align-items: center; height: 96px; min-height: 96px; padding: 12px 14px; border-radius: 24px; background: rgba(255,255,255,.72); box-shadow: 0 12px 24px rgba(41, 77, 84, .10); overflow: hidden; }
.info-panel span { display: block; color: #58757b; font-size: 11px; font-weight: 1000; text-transform: uppercase; letter-spacing: .14em; }
.info-panel strong { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin-top: 3px; font-size: 17px; line-height: 1.08; letter-spacing: -.03em; }
.info-panel button { min-width: 74px; min-height: 64px; padding: 0 10px; border-radius: 20px; background: linear-gradient(135deg, #96dfb9, #59c894); color: #1f5236; font-size: 18px; }

.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(48px, 1fr)); gap: 7px; min-height: 280px; height: 100%; }
.card-grid.sentence-list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: minmax(76px, auto); align-content: start; overflow-y: auto; padding-right: 2px; }
.word-card { position: relative; display: grid; place-items: center; align-content: center; gap: 5px; min-height: 0; padding: 6px 5px; border: 1px solid rgba(255,255,255,.54); border-radius: 18px; color: #1f3538; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.46), 0 10px 20px rgba(41, 77, 84, .10); overflow: hidden; transition: transform .15s ease, background .18s ease, color .18s ease, box-shadow .18s ease; }
.word-card:active { transform: scale(.97); }
.word-card strong { display: block; max-width: 100%; overflow: hidden; font-family: var(--card-font); font-size: 34px; font-weight: 500; line-height: .92; letter-spacing: -.055em; white-space: nowrap; text-overflow: clip; }
.word-card.size-xl strong { font-size: clamp(30px, 8vw, 52px); }
.word-card.size-lg strong { font-size: clamp(25px, 6.8vw, 44px); }
.word-card.size-md strong { font-size: clamp(20px, 5.4vw, 36px); }
.word-card.size-sm strong { font-size: clamp(16px, 4.4vw, 28px); }
.word-card.size-xs strong { font-size: clamp(13px, 3.5vw, 22px); }
.word-card.sentence-card { min-height: 76px; padding: 12px 14px; border-radius: 22px; }
.word-card.size-sentence strong { font-size: clamp(18px, 5vw, 28px); line-height: 1.08; letter-spacing: -.04em; white-space: normal; overflow-wrap: anywhere; }
.word-card.flipped { background: linear-gradient(145deg, #20363d, #102024) !important; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 14px 28px rgba(24, 48, 54, .24); }
.word-card.flipped.tone-0 { background: linear-gradient(145deg, #126c5a, #07372f) !important; }
.word-card.flipped.tone-1 { background: linear-gradient(145deg, #126077, #072f42) !important; }
.word-card.flipped.tone-2 { background: linear-gradient(145deg, #8a5510, #412606) !important; }
.word-card.flipped.tone-3 { background: linear-gradient(145deg, #8b3041, #41101c) !important; }
.word-card.flipped.tone-4 { background: linear-gradient(145deg, #5b3a87, #271542) !important; }
.word-card.flipped.tone-5 { background: linear-gradient(145deg, #496d16, #213608) !important; }
.word-card.flipped strong { color: #fff; }
.word-card.favorite::before { content: "★"; position: absolute; left: 8px; top: 7px; color: #ffd34d; font-size: 13px; line-height: 1; text-shadow: 0 1px 2px rgba(96, 70, 13, .28); }
.word-card.pinned::after { content: ""; position: absolute; right: 9px; top: 9px; width: 9px; height: 9px; border-radius: 999px; background: #ffcc69; box-shadow: 0 0 0 4px rgba(255, 204, 105, .22); }
.font-0 strong, .font-1 strong, .font-2 strong, .font-3 strong, .font-4 strong { font-family: var(--card-font); font-weight: 500; letter-spacing: -.055em; text-transform: none; }
.word-card.size-sentence strong { letter-spacing: -.04em; }
.word-card.correct { outline: 3px solid #42c879; box-shadow: 0 0 0 5px rgba(66, 200, 121, .18); }
.word-card.wrong { outline: 3px solid #ff6f61; box-shadow: 0 0 0 5px rgba(255, 111, 97, .18); }
.tone-0 { background: linear-gradient(145deg, #b9f0d1, #82dba9); }
.tone-1 { background: linear-gradient(145deg, #bfeaf3, #8bd2df); }
.tone-2 { background: linear-gradient(145deg, #fff0aa, #ffd86a); }
.tone-3 { background: linear-gradient(145deg, #ffc6ba, #ff9c8a); }
.tone-4 { background: linear-gradient(145deg, #e0c8ff, #bca3ef); }
.tone-5 { background: linear-gradient(145deg, #d4f4a7, #b5e56c); }

.empty-state { display: grid; gap: 8px; padding: 24px; border: 1px dashed rgba(35,50,53,.2); border-radius: 26px; background: rgba(255,255,255,.54); }
.empty-state h2 { font-size: 22px; }
.empty-state p:last-child { color: var(--muted); }

.mode-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; padding: 6px; border-radius: 24px; background: linear-gradient(135deg, rgba(255, 226, 164, .94), rgba(255, 151, 94, .88)); box-shadow: 0 14px 30px rgba(230, 117, 37, .22); backdrop-filter: blur(18px); }
.mode-tabs button { min-height: 46px; padding: 0 4px; border-radius: 18px; background: rgba(255, 251, 235, .66); color: #8a4412; font-size: 13px; box-shadow: inset 0 1px 0 rgba(255,255,255,.62); }
.mode-tabs button.active { background: linear-gradient(135deg, #ff8b2b, #ff5f45); color: #fff; box-shadow: 0 10px 18px rgba(205, 82, 29, .32); }

.edge-zone { position: fixed; z-index: 45; pointer-events: auto; }
.edge-left { left: 0; top: 0; bottom: 24px; width: 22px; }
.edge-right { right: 0; top: 0; bottom: 24px; width: 22px; }
.edge-bottom { left: 0; right: 0; bottom: 0; height: max(24px, env(safe-area-inset-bottom)); }
.backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(15, 36, 40, .22); backdrop-filter: blur(3px); }
.drawer { position: fixed; top: 0; bottom: 0; z-index: 70; width: 100vw; max-width: none; padding: max(10px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom)); background: radial-gradient(circle at 20% 0%, #f8fff7 0, transparent 30%), rgba(251,255,247,.98); box-shadow: var(--shadow); overflow: auto; transition: transform .26s cubic-bezier(.2,.85,.25,1); }
.left-drawer { left: 0; transform: translateX(-104%); border-radius: 0; }
.right-drawer { right: 0; transform: translateX(104%); border-radius: 0; }
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.drawer-head h2 { font-size: 24px; letter-spacing: -.04em; }
.close-drawer, .modal-close { width: 42px; min-width: 42px; padding: 0; border-radius: 999px; background: #e5f3f5; color: #326972; font-size: 24px; }
.drawer-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 12px; }
.drawer-tabs button { min-height: 42px; padding: 0 7px; background: #e6f7ef; color: #397458; font-size: 12px; }
.drawer-tabs .active { background: linear-gradient(135deg, #6ccf9d, #42b8c8); color: #fff; }
.admin-tab { display: none; gap: 10px; }
.active-admin-tab { display: grid; }
.admin-tools { display: grid; grid-template-columns: 1fr; gap: 8px; }
.accent-btn { background: linear-gradient(135deg, #ffcc69, #ff8f79); color: #633219; }
.sky-btn { background: linear-gradient(135deg, #c9eef7, #83d3e3); color: #245f6b; }
.admin-add-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.admin-list { display: grid; gap: 8px; }
.admin-row { display: grid; gap: 4px; min-height: 58px; padding: 11px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.68); color: var(--ink); text-align: left; }
.admin-row strong, .admin-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-row span { color: var(--muted); font-size: 12px; font-weight: 850; }
.admin-card-row { grid-template-columns: 1fr 44px; align-items: center; gap: 8px; padding: 7px; }
.admin-row-main { display: grid; gap: 4px; min-width: 0; min-height: 44px; padding: 4px 6px; border-radius: 14px; background: transparent; color: var(--ink); text-align: left; }
.admin-row-main strong, .admin-row-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-btn { display: grid; place-items: center; width: 44px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 15px; background: #ffe1dc; color: #96382b; font-size: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.46); }
.stats-filter-line { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.stats-filter-line input { min-height: 38px; padding: 8px 10px; }
.stats-dashboard { display: grid; gap: 8px; }
.stats-panel { display: grid; gap: 7px; padding: 9px; border: 1px solid rgba(35,50,53,.10); border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(232,247,232,.68)); box-shadow: 0 10px 20px rgba(41,77,84,.07); }
.stats-panel-head { display: flex; justify-content: space-between; gap: 10px; align-items: end; }
.stats-panel-head strong { font-size: 17px; letter-spacing: -.045em; }
.stats-panel-head span { color: var(--muted); font-size: 10px; font-weight: 950; text-align: right; }
.stats-circles { display: grid; gap: 7px; justify-items: center; align-items: center; }
.stats-circles.count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats-circles.count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats-circles.count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-circle { display: grid; place-items: center; align-content: center; gap: 1px; width: 74px; height: 74px; min-width: 0; min-height: 0; padding: 5px; border: 2px solid transparent; border-radius: 999px; color: #fff; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 8px 15px rgba(41,77,84,.10); }
.stats-circles.count-4 .stat-circle { width: 64px; height: 64px; }
.stats-circles.count-3 .stat-circle { width: 72px; height: 72px; }
.stats-circles.count-2 .stat-circle { width: 82px; height: 82px; }
.stat-circle strong { font-size: 17px; line-height: 1; letter-spacing: -.06em; text-shadow: 0 1px 2px rgba(20,30,34,.22); }
.stats-circles.count-4 .stat-circle strong { font-size: 15px; }
.stat-circle span { max-width: 58px; color: rgba(255,255,255,.88); font-size: 7px; font-weight: 1000; line-height: 1.02; text-align: center; text-transform: uppercase; letter-spacing: .035em; text-shadow: 0 1px 2px rgba(20,30,34,.18); }
.stats-circles.count-4 .stat-circle span { max-width: 50px; font-size: 6px; }
.stat-circle.blue { background: linear-gradient(135deg, #57c7ff, #3478f6); }
.stat-circle.green { background: linear-gradient(135deg, #7ee787, #14b8a6); }
.stat-circle.orange { background: linear-gradient(135deg, #ffcc66, #f97316); }
.stat-circle.coral { background: linear-gradient(135deg, #ff9b54, #ef5f78); }
.stat-circle.is-active { border-color: rgba(35,50,53,.38); transform: translateY(-1px); }
.timeline-panel { display: grid; gap: 6px; margin: 8px 0; padding: 10px; border: 1px solid rgba(35,50,53,.10); border-radius: 22px; background: rgba(255,255,255,.86); box-shadow: 0 10px 20px rgba(41,77,84,.07); }
.timeline-head span { display: block; color: var(--muted); font-size: 12px; font-weight: 950; text-align: center; letter-spacing: .08em; text-transform: uppercase; }
.timeline-scroll { display: grid; gap: 6px; min-height: 112px; padding: 16px 0 2px; overflow-x: auto; }
.timeline-scroll.fit-range { grid-template-columns: repeat(var(--days), minmax(0, 1fr)); overflow-x: hidden; }
.timeline-scroll.scroll-range { grid-auto-flow: column; grid-auto-columns: 42px; }
.timeline-day { display: grid; grid-template-rows: 1fr auto; gap: 6px; min-width: 0; color: var(--muted); font-size: 10px; font-weight: 950; text-align: center; }
.timeline-flasks { display: flex; align-items: end; justify-content: center; min-height: 82px; padding: 14px 2px 4px; border-radius: 16px; background: rgba(169,216,226,.16); }
.timeline-flask { position: relative; display: grid; justify-items: center; width: 20px; min-height: 3px; border-radius: 10px 10px 6px 6px; transition: height .2s ease; }
.timeline-flask b { position: absolute; top: -16px; color: var(--ink); font-size: 9px; font-style: normal; white-space: nowrap; }
.timeline-flask.blue { background: linear-gradient(180deg, #83d3e3, #42b8c8); }
.timeline-flask.green { background: linear-gradient(180deg, #82dba9, #42c879); }
.timeline-flask.orange { background: linear-gradient(180deg, #ffc96b, #ffac43); }
.timeline-flask.coral { background: linear-gradient(180deg, #ffb4a4, #ff7368); }
.hard-list { display: grid; gap: 8px; }

.account-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 75; display: grid; gap: 12px; width: min(520px, 100%); max-height: 70dvh; margin: 0 auto; padding: 8px 18px max(18px, env(safe-area-inset-bottom)); border-radius: 30px 30px 0 0; background: rgba(251,255,247,.96); box-shadow: var(--shadow); transform: translateY(108%); transition: transform .24s cubic-bezier(.2,.85,.25,1); }
.account-sheet.open { transform: translateY(0); }
.sheet-handle { width: 58px; height: 28px; justify-self: center; display: grid; place-items: center; }
.sheet-handle::after { content: ""; width: 44px; height: 5px; border-radius: 999px; background: #b9d0d5; }
.account-sheet h2 { font-size: 22px; }
.layout-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.layout-choice button { min-height: 46px; background: #e6f7ef; color: #397458; font-size: 13px; }
.layout-choice button.active { background: linear-gradient(135deg, #6ccf9d, #42b8c8); color: #fff; }
.logout-link { display: grid; place-items: center; min-height: 46px; border: 1px solid var(--line); border-radius: 18px; background: #eaf5f7; color: var(--ink); text-decoration: none; font-weight: 900; }

.single-stage { min-height: 0; height: 100%; display: grid; place-items: stretch; }
.single-card { display: grid; align-content: center; justify-items: center; gap: 14px; min-height: 0; height: 100%; padding: 20px; border-radius: 34px; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 18px 34px rgba(41,77,84,.14); }
.single-card h2 { max-width: 100%; overflow-wrap: anywhere; font-size: clamp(36px, 13vw, 82px); line-height: .9; letter-spacing: -.07em; }
.single-card.sentence-single h2 { font-size: clamp(25px, 8vw, 48px); line-height: 1.03; letter-spacing: -.055em; }
.single-card label { width: min(420px, 100%); text-align: left; }
.single-card button { min-width: min(270px, 100%); background: rgba(35,50,53,.92); }
.single-card .ghost-action { background: rgba(255,255,255,.64); color: var(--ink); }

.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: start center; padding: max(58px, env(safe-area-inset-top)) 10px max(14px, env(safe-area-inset-bottom)); background: rgba(15, 36, 40, .24); backdrop-filter: blur(4px); }
.modal-card { display: grid; gap: 12px; width: min(520px, 100%); max-height: 88dvh; overflow: auto; padding: 12px 18px 18px; border-radius: 30px; background: rgba(251,255,247,.97); box-shadow: var(--shadow); }
.colorful-modal { background: linear-gradient(155deg, rgba(251,255,247,.98), rgba(216,237,240,.98)); }
.modal-card h2 { font-size: 26px; line-height: 1.08; letter-spacing: -.045em; }
.modal-close { justify-self: end; }
.listen-indicator { display: grid; place-items: center; height: 86px; }
.listen-indicator span { width: 54px; height: 54px; border-radius: 999px; background: #ff8f79; box-shadow: 0 0 0 0 rgba(255,143,121,.55); animation: pulse 1.05s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 24px rgba(255,143,121,0); } 100% { box-shadow: 0 0 0 0 rgba(255,143,121,0); } }
.transcript { min-height: 42px; padding: 10px 12px; border-radius: 17px; background: rgba(255,255,255,.65); color: var(--muted); font-weight: 850; }
.fact-full-text { color: var(--ink); font-size: 18px; font-weight: 850; line-height: 1.35; }

@media (max-width: 380px) {
  .study-shell { padding-left: 7px; padding-right: 7px; }
  .card-grid { gap: 5px; }
  .word-card { border-radius: 15px; padding: 5px 3px; }
  .study-shell { grid-template-rows: auto auto minmax(250px, 1fr) auto auto; }
  .card-grid { min-height: 250px; }
  .word-card.size-xl strong { font-size: clamp(25px, 7vw, 42px); }
  .word-card.size-lg strong { font-size: clamp(21px, 6vw, 36px); }
  .word-card.size-md strong { font-size: clamp(17px, 5vw, 30px); }
  .word-card.size-sm strong { font-size: clamp(14px, 4vw, 24px); }
  .word-card.size-xs strong { font-size: clamp(12px, 3.3vw, 20px); }
  .word-card.size-sentence strong { font-size: clamp(16px, 4.6vw, 24px); }
  .mode-tabs button { font-size: 12px; }
  .admin-tools { grid-template-columns: 1fr; }
  .stat-circle { width: 66px; height: 66px; }
  .stats-circles.count-4 .stat-circle { width: 56px; height: 56px; }
  .stats-circles.count-3 .stat-circle { width: 64px; height: 64px; }
  .stats-circles.count-2 .stat-circle { width: 72px; height: 72px; }
  .stat-circle strong { font-size: 15px; }
  .stat-circle span { font-size: 6px; }
  .info-panel { height: 90px; min-height: 90px; }
  .info-panel strong { font-size: 15px; }
}