:root{
  --bg:#eef3f8;
  --panel:#f8fbff;
  --card:#ffffff;
  --line:#d6e1ea;
  --ink:#102739;
  --muted:#456078;
  --accent:#1f7fd3;
  --ok:#1f9d62;
  --c-grammar:#4f86c8;
  --c-reading:#4f9f78;
  --c-listening:#7c71c6;
  --c-writing:#cc9151;
  --review:#b0702a;
  --review-bg:#fff8ef;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 500px at -5% -10%, rgba(242,140,40,.25), transparent 65%),
    radial-gradient(900px 500px at 105% 0%, rgba(66,154,255,.2), transparent 60%),
    linear-gradient(140deg,#103156,#0f6f87);
}
.page{
  width:min(1220px,95vw);
  margin:20px auto 30px;
  display:grid;
  gap:16px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
}
.top{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px 20px;
  grid-column:1 / -1;
  box-shadow:0 6px 18px rgba(24,48,74,.08);
}
.top h1{margin:0;font-size:32px;line-height:1.08;letter-spacing:-.02em}
.top p{margin:8px 0 0;color:var(--muted)}
.totals{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.total{
  background:#edf3f8;
  border:1px solid #c0d1df;
  border-radius:999px;
  padding:8px 12px;
  font-weight:800;
  min-width:102px;
  text-align:center;
}
.total strong{color:#1e5b85}
.total.is-complete{
  background:#dff4e6;
  border-color:#8ec7a1;
  color:#1b6a3f;
}
.total.is-complete strong{
  color:#1b6a3f;
}

.filters-panel{
  grid-column:1 / -1;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  box-shadow:0 6px 18px rgba(24,48,74,.08);
  display:grid;
  gap:10px;
}
.filter-group{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.filter-label{
  min-width:84px;
  color:#365a74;
  font-size:13px;
  font-weight:800;
}
.filter-buttons{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.filter-btn{
  border:1px solid #bdd1e0;
  background:#eff5fa;
  color:#234e6c;
  border-radius:999px;
  height:34px;
  padding:0 12px;
  font-weight:800;
  cursor:pointer;
  transition:all .15s ease;
}
.filter-btn:hover{background:#e4eef6}
.filter-btn.active{
  border-color:#2a566f;
  background:linear-gradient(180deg,#4a748f,#345f7c);
  color:#fff;
}

.auth-wrap{
  grid-column:1 / -1;
  position:relative;
  overflow:hidden;
  display:grid;
  justify-items:center;
  text-align:center;
  background:
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(236,247,255,.94));
  border:1px solid #c3d9eb;
  border-radius:18px;
  box-shadow:0 14px 28px rgba(13,44,68,.15);
  padding:16px 14px 14px;
}
.auth-wrap::before{
  content:"";
  position:absolute;
  width:340px;
  height:340px;
  border-radius:50%;
  top:-180px;
  right:-110px;
  background:radial-gradient(circle at center, rgba(31,127,211,.24), rgba(31,127,211,0));
  pointer-events:none;
}
.auth-wrap::after{
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  border-radius:50%;
  bottom:-170px;
  left:-90px;
  background:radial-gradient(circle at center, rgba(79,159,120,.2), rgba(79,159,120,0));
  pointer-events:none;
}
.auth-summary{
  position:relative;
  z-index:1;
  width:min(760px,100%);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  background:#fff;
  border:1px solid #cfe2f0;
  border-radius:12px;
  padding:12px 14px;
  margin-bottom:12px;
  box-shadow:0 4px 14px rgba(16,57,88,.08);
  animation:authFadeUp .45s ease both;
}
.auth-title{
  margin:0;
  font-size:25px;
  line-height:1.1;
  color:#0f3551;
}
.auth-subtitle{
  margin:7px 0 0;
  color:var(--muted);
}
.auth-state-row{
  display:grid;
  justify-items:end;
  gap:8px;
}
.auth-state{
  text-align:right;
  font-weight:800;
  color:#113b5a;
  background:#eef6fd;
  border:1px solid #b8d0e2;
  border-radius:999px;
  padding:8px 14px;
}
.auth-logout{
  border:1px solid #c6d8e8;
  background:#f2f8fd;
  color:#0f3a59;
  border-radius:999px;
  height:34px;
  padding:0 14px;
  font-weight:800;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.auth-logout:hover{
  background:#e8f2fb;
  box-shadow:0 3px 9px rgba(16,56,86,.16);
  transform:translateY(-1px);
}
.auth-panel{
  position:relative;
  z-index:1;
  width:min(760px,100%);
  background:#fff;
  border:1px solid #cfe2f0;
  border-radius:14px;
  padding:14px 14px 12px;
  box-shadow:0 6px 18px rgba(16,57,88,.1);
  animation:authFadeUp .5s ease .08s both;
}
.auth-switch{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
  padding:4px;
  border-radius:999px;
  border:1px solid #bfd4e6;
  background:#ebf4fb;
  margin-bottom:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.auth-mode{
  border:1px solid transparent;
  background:transparent;
  color:#2a4f6b;
  font:inherit;
  font-weight:800;
  height:38px;
  min-width:120px;
  border-radius:999px;
  cursor:pointer;
  padding:0 14px;
  transition:all .18s ease;
}
.auth-mode.active{
  background:linear-gradient(180deg,#2f6489,#25516f);
  color:#fff;
  border-color:#234d69;
  box-shadow:0 6px 12px rgba(24,61,88,.32);
}
.auth-form{
  display:grid;
  gap:8px;
}
.auth-form[hidden]{display:none !important}
.auth-form-card{
  max-width:560px;
  margin-inline:auto;
  text-align:left;
}
.auth-field{
  display:grid;
  gap:4px;
}
.auth-field span{
  font-size:13px;
  font-weight:700;
  color:#244a67;
}
.auth-field input{
  width:100%;
  height:38px;
  border:1px solid #c7d9e8;
  border-radius:10px;
  padding:0 10px;
  font:inherit;
  color:#15374f;
  background:#fafdff;
}
.auth-field input:focus{
  outline:2px solid rgba(31,127,211,.25);
  border-color:#8bb8dc;
}
.auth-btn{
  margin-top:6px;
  height:42px;
  border-radius:12px;
  border:1px solid #294f68;
  background:linear-gradient(180deg,#3b6f95,#2c5a7a);
  color:#fff;
  font-weight:800;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(23,58,84,.28);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.auth-btn:hover{
  filter:brightness(1.03);
  box-shadow:0 9px 16px rgba(23,58,84,.35);
  transform:translateY(-1px);
}
.auth-btn-secondary{
  border-color:#4f6475;
  background:linear-gradient(180deg,#6f8596,#5d7282);
}
.auth-link-btn{
  width:max-content;
  border:0;
  background:transparent;
  color:#275675;
  font:inherit;
  font-weight:700;
  padding:0;
  margin-top:3px;
  cursor:pointer;
}
.auth-link-btn:hover{text-decoration:underline; color:#1c445f}
.auth-message{
  position:relative;
  z-index:1;
  width:min(760px,100%);
  display:none;
}
.auth-message.ok{color:#1f9d62}
.auth-message.error{color:#b03232}

.toast-wrap{
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  z-index:10050;
  display:grid;
  gap:10px;
  width:min(360px,92vw);
}
.toast{
  border-radius:12px;
  border:1px solid #bfd3e3;
  background:#f3f8fd;
  color:#143d5a;
  box-shadow:0 12px 24px rgba(16,48,73,.22);
  padding:11px 12px;
  font-size:14px;
  font-weight:800;
  line-height:1.35;
  animation:toastIn .28s ease both;
}
.toast.ok{
  border-color:#8fceb1;
  background:#e9f8ef;
  color:#1d6b46;
}
.toast.error{
  border-color:#e1b2b2;
  background:#fff1f1;
  color:#9b2b2b;
}
.toast.fade-out{
  animation:toastOut .25s ease both;
}
.access-hint{
  position:relative;
  z-index:1;
  width:min(760px,100%);
  margin:2px 2px 8px;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid #cfe2f0;
  background:#f2f8fe;
  color:#2a5170;
  font-size:13px;
  font-weight:700;
}
.premium-onboarding{
  position:relative;
  z-index:1;
  width:min(760px,100%);
  margin:4px 2px 0;
  padding:14px 14px 12px;
  border-radius:12px;
  border:1px solid #cfe0ee;
  background:linear-gradient(180deg,#f8fcff,#edf5fb);
  text-align:left;
}
.premium-onboarding h3{
  margin:0 0 6px;
  color:#1b4f73;
  font-size:21px;
}
.premium-onboarding ul{
  margin:0;
  padding-left:18px;
  color:#355b74;
  font-weight:700;
  font-size:14px;
  line-height:1.45;
}
.premium-onboarding p{
  margin:8px 0 0;
  color:#4a6a81;
  font-size:13px;
  font-weight:700;
}
.premium-onboarding .auth-btn{
  margin-top:10px;
}
.billing-panel{
  position:relative;
  z-index:1;
  width:min(760px,100%);
  margin-top:10px;
  padding:12px;
  border:1px solid #cfe2f0;
  border-radius:12px;
  background:linear-gradient(180deg,#ffffff,#f8fcff);
  box-shadow:0 10px 24px rgba(16,57,88,.1);
  animation:authFadeUp .6s ease both;
  text-align:left;
}
.billing-status{
  font-size:24px;
  line-height:1.15;
  font-weight:800;
  color:#1f5c84;
  margin-bottom:6px;
}
.billing-explain{
  color:#3a5e78;
  font-size:14px;
  font-weight:700;
  margin-bottom:10px;
  text-align:center;
}
.billing-expiry{
  margin:0 0 12px;
  min-height:20px;
  font-size:14px;
  font-weight:800;
  color:#1f4c6c;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid #d3e4f1;
  background:#eff7ff;
}
.billing-expiry:empty{
  display:none;
}
.billing-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
#billing-subscribe,
#billing-manage{
  display:block;
  margin-left:auto;
  margin-right:auto;
}
#billing-manage{display:none}
.device-panel{
  position:relative;
  z-index:1;
  width:min(760px,100%);
  margin-top:10px;
  padding:12px;
  border:1px solid #cfe2f0;
  border-radius:12px;
  background:linear-gradient(180deg,#ffffff,#f8fcff);
  box-shadow:0 10px 24px rgba(16,57,88,.1);
  text-align:left;
}
.device-head{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:flex-start;
}
.device-head h3{
  margin:0;
  font-size:28px;
  line-height:1.05;
  color:#123e5e;
}
.device-meta{
  font-size:14px;
  font-weight:700;
  color:#224f6d;
  border:1px solid #c8ddee;
  border-radius:999px;
  padding:6px 10px;
  background:#eef7ff;
}
.device-note{
  margin-top:10px;
  font-size:14px;
  color:#335b76;
  padding:10px 12px;
  border:1px dashed #bfd5e6;
  border-radius:10px;
  background:#f2f8fd;
}
.device-note.countdown{
  border-style:solid;
  border-color:#a5b9cb;
  background:linear-gradient(180deg,#e6eef6,#dae6f1);
  color:#1d4662;
  font-weight:800;
}
.device-help{
  margin:8px 2px 0;
  color:#4a6a81;
  font-size:12px;
  font-weight:700;
}
.device-slots{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.device-slot{
  min-width:84px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid #c7dced;
  background:#eef7ff;
  color:#2d5877;
  font-size:12px;
  font-weight:800;
  text-align:center;
}
.device-slot.filled{
  background:linear-gradient(180deg,#d7e2ec,#ccdae8);
  border-color:#aabfd2;
  color:#264a64;
}
.device-list{
  list-style:none;
  margin:12px 0 0;
  padding:0;
  display:grid;
  gap:10px;
}
.device-item{
  display:grid;
  grid-template-columns:1fr auto;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  border:1px solid #cbdff0;
  border-radius:12px;
  padding:10px 12px;
  background:#f5faff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;
  overflow:hidden;
}
.device-label{
  font-weight:800;
  color:#123f60;
  font-size:17px;
  line-height:1.1;
}
.device-last{
  margin-top:4px;
  font-size:13px;
  color:#3a6078;
}
.device-timer{
  margin-top:6px;
  width:max-content;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid #b2cadf;
  background:#e9f2fa;
  color:#1b4b69;
  font-size:12px;
  font-weight:800;
}
.device-item.reset-pending .device-main{
  filter:grayscale(.35);
}
.device-item-overlay{
  position:absolute;
  inset:0;
  background:rgba(211,222,233,.68);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.device-item-overlay span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #aebfce;
  background:#d4e2ee;
  color:#1f455e;
  font-size:12px;
  font-weight:900;
}
.device-current{
  display:inline-block;
  margin-left:6px;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid #9cc0dc;
  background:#eaf5ff;
  color:#1f5f8b;
  font-size:11px;
  font-weight:800;
}
.device-reset-btn{
  border:1px solid #afcbe0;
  background:#eaf4fc;
  color:#1a4969;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
  transition:all .16s ease;
}
.device-reset-btn:hover{
  background:#dfeefd;
  transform:translateY(-1px);
  box-shadow:0 6px 12px rgba(17,67,102,.14);
}
.device-reset-btn:disabled,
#device-reset-all:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.device-reset-btn:disabled{
  transform:none;
  box-shadow:none;
}
.device-actions{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.device-actions::before{
  content:"Volný slot se obsadí při přihlášení z nového zařízení.";
  color:#466881;
  font-size:13px;
  font-weight:700;
}
.auth-form-card.is-entering{
  animation:authModeIn .24s ease both;
}
@keyframes authFadeUp{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:translateY(0)}
}
@keyframes toastIn{
  from{opacity:0; transform:translateX(18px) scale(.98)}
  to{opacity:1; transform:translateX(0) scale(1)}
}
@keyframes toastOut{
  from{opacity:1; transform:translateX(0) scale(1)}
  to{opacity:0; transform:translateX(14px) scale(.98)}
}
@keyframes authModeIn{
  from{opacity:.3; transform:translateY(8px) scale(.985)}
  to{opacity:1; transform:translateY(0) scale(1)}
}

.block{
  background:var(--panel);
  border:1px solid #dce6f0;
  border-radius:18px;
  box-shadow:0 6px 18px rgba(20,44,66,.08);
  min-height:72vh;
  padding:12px;
  position:relative;
}
.block-head{
  font-weight:800;
  font-size:22px;
  line-height:1.2;
  padding:10px 12px 12px;
  border-radius:12px;
  border:1px solid #d7e6f3;
  background:#ffffff;
  margin-bottom:10px;
  color:#0f3551;
  position:sticky;
  top:8px;
  z-index:2;
  box-shadow:0 2px 8px rgba(15,45,71,.06);
}

.lesson-list{
  list-style:none;
  margin:0 0 4px;
  padding:0;
  display:grid;
  gap:7px;
}
.skill-divider{
  margin:12px 0 4px;
  padding:8px 11px;
  border-radius:10px;
  border:1px solid #d6e4ef;
  background:#f3f8fc;
  color:#234763;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:12px;
}
.skill-divider.section-grammar{border-left:5px solid var(--c-grammar)}
.skill-divider.section-reading{border-left:5px solid var(--c-reading)}
.skill-divider.section-listening{border-left:5px solid var(--c-listening)}
.skill-divider.section-writing{border-left:5px solid var(--c-writing)}
.lesson-list li{margin:0}
.lesson-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:42px;
  background:var(--card);
  border:1px solid var(--line);
  border-left:6px solid var(--c-grammar);
  border-radius:13px;
  padding:8px 11px;
  color:#15374f;
  text-decoration:none;
  font-weight:650;
  line-height:1.25;
  box-shadow:inset 0 0 0 9999px rgba(47,127,215,.02);
  transition:box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.lesson-link:hover{
  border-color:#a8c6df;
  background:#fbfdff;
  box-shadow:inset 0 0 0 9999px rgba(47,127,215,.03);
}
.lesson-link.grammar{
  border-left-color:var(--c-grammar);
  background:#f6fbff;
  box-shadow:inset 0 0 0 9999px rgba(47,127,215,.08);
}
.lesson-link.reading{
  border-left-color:var(--c-reading);
  box-shadow:inset 0 0 0 9999px rgba(79,159,120,.07);
}
.lesson-link.listening{
  border-left-color:var(--c-listening);
  box-shadow:inset 0 0 0 9999px rgba(124,113,198,.07);
}
.lesson-link.writing{
  border-left-color:var(--c-writing);
  box-shadow:inset 0 0 0 9999px rgba(204,145,81,.08);
  position:relative;
  justify-content:center;
  text-align:center;
}
.lesson-link.grammar::before,
.lesson-link.reading::before,
.lesson-link.listening::before,
.lesson-link.writing::before{
  flex:0 0 auto;
  width:20px;
  height:20px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:800;
  margin-right:2px;
  color:#fff;
}
.lesson-link.grammar::before{content:"G"; background:var(--c-grammar)}
.lesson-link.reading::before{content:"Č"; background:var(--c-reading)}
.lesson-link.listening::before{content:"P"; background:var(--c-listening)}
.lesson-link.writing::before{content:"W"; background:var(--c-writing)}
.lesson-link.writing::before{
  position:absolute;
  left:12px;
}
.lesson-link.review{
  border-left-color:var(--review);
  background:var(--review-bg);
  box-shadow:
    inset 0 0 0 9999px rgba(176,112,42,.07),
    0 1px 0 rgba(255,255,255,.9);
}
.review-pill{
  flex:0 0 auto;
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  color:var(--review);
  border:1px solid rgba(176,112,42,.35);
  background:#fff;
  border-radius:999px;
  padding:3px 8px;
}
.lesson-progress{
  flex:0 0 auto;
  min-width:54px;
  text-align:center;
  font-size:12px;
  font-weight:800;
  color:#2f5f82;
  background:#eef5fb;
  border:1px solid #c8dcec;
  border-radius:999px;
  padding:4px 8px;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.06);
}
.lesson-progress.complete{
  background:#dff4e6;
  border-color:#8ec7a1;
  color:#1b6a3f;
}
.lesson-link.writing .lesson-progress{display:none}

.lesson-link.is-complete{
  background:#eef9f2;
  border-color:#b7dec4;
  border-left-color:#2f9a63;
}

.lesson-link.locked{
  position:relative;
  color:#4f6273 !important;
  background:#edf1f5 !important;
  border-color:#d0d8e0 !important;
  border-left-color:#b8c2cc !important;
  box-shadow:inset 0 0 0 9999px rgba(93,112,128,.28) !important;
  filter:grayscale(.9);
  pointer-events:auto;
  overflow:hidden;
}
.lesson-link.locked::before{
  opacity:.42;
}
.lesson-link.locked::after{
  content:"\1F512";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:999px;
  background:#d7dfe7;
  border:1px solid #b8c4cf;
  color:#445868;
  font-size:18px;
  box-shadow:0 6px 12px rgba(32,46,58,.2);
  z-index:2;
}
.lesson-link.locked .lesson-progress,
.lesson-link.locked .review-pill{
  opacity:.5;
}
.lesson-link.locked > *{
  position:relative;
  z-index:1;
}
.lesson-link.locked:hover{
  background:#edf1f5 !important;
  border-color:#d0d8e0 !important;
}
.unlock-hint{
  display:none;
}
.lesson-link.locked.preview-member::after{
  content:"Po přihlášení zdarma";
  width:auto;
  height:auto;
  padding:6px 10px;
  border-radius:999px;
  background:#d8ebfb;
  border:1px solid #a6cbe6;
  color:#0f4b73;
  font-size:11px;
  font-weight:800;
  box-shadow:0 6px 12px rgba(32,46,58,.16);
  top:50%;
}

.lock-popup{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.lock-popup.open{display:flex}
.lock-popup-backdrop{
  position:absolute;
  inset:0;
  background:rgba(8,24,40,.52);
  backdrop-filter:blur(2px);
}
.lock-popup-card{
  position:relative;
  z-index:1;
  width:min(420px,92vw);
  border-radius:16px;
  border:1px solid #c6d8e8;
  background:#fff;
  box-shadow:0 18px 44px rgba(12,34,54,.36);
  padding:20px;
  text-align:center;
}
.lock-popup-card h3{
  margin:0 0 8px;
  color:#103a58;
  font-size:24px;
}
.lock-popup-card p{
  margin:0;
  color:#3e5f78;
  line-height:1.5;
}
.lock-popup-actions{
  margin-top:16px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.lock-popup-btn{
  height:40px;
  border-radius:999px;
  border:1px solid #b8cfe2;
  background:#edf5fc;
  color:#174666;
  font:inherit;
  font-weight:800;
  padding:0 16px;
  cursor:pointer;
}
.lock-popup-btn-primary{
  border-color:#1d76c4;
  background:linear-gradient(180deg,#2b92e7,#1f7fd3);
  color:#fff;
}

.skills{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.skill-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
  padding:12px;
  color:#14334b;
}
.skill-card strong{font-size:18px}
.skill-card span{color:var(--muted)}

.admin-btn{
  position:fixed;
  top:12px;
  right:12px;
  z-index:10;
  height:36px;
  padding:0 10px;
  border-radius:999px;
  border:2px solid #fff;
  background:#13496f;
  color:#fff;
  font-weight:800;
}
#admin-button{right:110px}

@media (max-width:900px){
  .page{grid-template-columns:1fr}
  .block{min-height:auto}
  .auth-summary{align-items:stretch; flex-direction:column}
  .auth-state-row{justify-items:start}
  .auth-state{text-align:left}
  .auth-title{font-size:22px}
  .auth-mode{min-width:108px; padding:0 10px}
  .auth-form-card{max-width:none}
  .device-head{flex-direction:column; align-items:flex-start}
  .device-head h3{font-size:24px}
  .device-item{grid-template-columns:1fr}
  .device-reset-btn{justify-self:flex-end}
  .device-actions{flex-direction:column; align-items:stretch}
  .device-actions::before{display:block}
  .device-slots{gap:6px}
  .device-slot{min-width:72px; font-size:11px; padding:6px 8px}
  .filters-panel{padding:10px}
  .filter-label{min-width:100%; margin-bottom:-4px}
  .premium-onboarding h3{font-size:19px}
  .premium-onboarding ul{font-size:13px}
  .toast-wrap{
    left:50%;
    transform:translateX(-50%);
    width:auto;
  }
  .skills{grid-template-columns:1fr}
  .block-head{font-size:20px}
}