/* Котоматика Mini App — стиль по образцу Копилки+ (design/preview.html) */
:root{
  --bg:#0E0B1A;          /* самый тёмный фон */
  --card:#1A1533;        /* карточки */
  --card2:#241E42;       /* чипы / карточка светлее */
  --line:#2C2650;        /* тонкие линии */
  --accent:#7C5CFF;      /* основной фиолетовый */
  --accent2:#A78BFA;     /* светлый сиреневый */
  --grad:linear-gradient(135deg,#7C5CFF 0%,#5B8DEF 100%);
  --green:#37D9A0;
  --red:#F8717A;
  --gold:#FFD76A;
  --text:#F3F1FF;
  --muted:#9B95BC;
}
*{box-sizing:border-box;margin:0;font-family:-apple-system,Segoe UI,Roboto,system-ui,sans-serif}
html,body{background:var(--bg);color:var(--text);min-height:100%}
body{padding-bottom:74px} /* место под островок */
button{border:none;cursor:pointer;font-family:inherit}
.hidden{display:none !important}
.center{text-align:center}
.row{display:flex;align-items:center;gap:10px}
.gap{gap:8px}
.grow{flex:1}
.muted{color:var(--muted);font-size:12px}
.sticker{filter:drop-shadow(0 4px 10px #0006)}

/* ---------- шапка-градиент ---------- */
.hero{background:var(--grad);padding:18px 18px 20px;border-radius:0 0 22px 22px;position:relative;color:#fff}
.hero-label{font-size:12px;opacity:.85}
.hero-big{font-size:26px;font-weight:700;margin-top:2px}
.hero-sub{font-size:11px;opacity:.85;margin-top:4px}
.hero-cat{position:absolute;right:12px;bottom:-6px;filter:drop-shadow(0 4px 10px #0006)}

/* На вкладке «Задания» внизу шапки живёт полоска прогресса,
   поэтому кошечка поднимается вверх, чтобы не перекрывать её. */
#tab-tasks .hero-cat{top:10px;bottom:auto;width:66px;height:auto}

/* Прогресс подготовки в шапке: узкая строка + полоска с градиентом.
   Места мало, поэтому без цифр баллов и оценок — только процент. */
.prep{margin-top:12px;background:#00000026;border-radius:12px;padding:8px 10px;position:relative;z-index:2}
.prep-top{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;opacity:.95}
.prep-top b{font-size:15px}
.prep-bar{height:7px;border-radius:7px;background:#0e0b1a66;margin-top:5px;overflow:hidden}
.prep-bar i{display:block;height:100%;border-radius:7px;
  background:linear-gradient(90deg,#37D9A0 0%,#A78BFA 55%,#FFD76A 100%);
  transition:width .5s ease}
.hero-course{background:linear-gradient(135deg,#6A48F0 0%,#8E5BEF 55%,#5B8DEF 100%)}
.avatar{object-fit:contain;background:#ffffff22;border-radius:18px;padding:4px}

/* ---------- тело и карточки ---------- */
.body{padding:14px 12px 8px}
.sect{font-size:12px;color:var(--muted);margin:10px 4px 8px;font-weight:600}
.card{background:var(--card);border-radius:18px;padding:13px;margin-bottom:10px;box-shadow:0 8px 20px #0006}
.card.slim{padding:8px 12px}
.name{font-size:15px;font-weight:600}
.name.sm{font-size:13px}
.chipv{font-size:10px;color:var(--accent2);background:#7c5cff1f;padding:3px 8px;border-radius:8px;display:inline-block}
.tag-ok{font-size:10px;color:var(--green);background:#37d9a01a;padding:3px 8px;border-radius:8px;display:inline-block}
.tag-bad{font-size:10px;color:var(--red);background:#f8717a1a;padding:3px 8px;border-radius:8px;display:inline-block}

/* ---------- задания ---------- */
.task-text{font-size:16px;font-weight:600;line-height:1.45;margin-top:8px;white-space:pre-wrap}
.task-img{max-width:100%;border-radius:12px;margin-top:8px}
.input{background:#0E0B1A;border:1px solid var(--line);border-radius:12px;padding:11px 12px;font-size:14px;color:var(--text);margin-top:10px;width:100%;outline:none}
.input:focus{border-color:var(--accent2)}
.btn{background:var(--grad);border-radius:14px;text-align:center;padding:12px;font-size:14px;font-weight:600;color:#fff;box-shadow:0 8px 18px #7c5cff44;margin-top:10px;width:100%;display:block;text-decoration:none}
.btn:active{transform:scale(.98)}
.btn2{background:var(--card2);border-radius:12px;text-align:center;padding:9px 12px;font-size:12px;color:var(--text);flex:1}
.btn2:active{transform:scale(.98)}
.btn[disabled],.btn2[disabled]{opacity:.5;pointer-events:none}
#skip-row{margin-top:8px}

/* результат ответа */
.res-ok{color:var(--green);font-weight:700;font-size:15px}
.res-bad{color:var(--red);font-weight:700;font-size:15px}
.res-cat{float:right;margin:-4px -2px 0 8px}
.sol-box{background:#0E0B1A;border:1px solid var(--line);border-radius:12px;padding:10px;margin-top:10px;font-size:13px;line-height:1.5;white-space:pre-wrap}
.sol-box img,.sol-box video{max-width:100%;border-radius:10px}

/* ---------- лавка ---------- */
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.shop-item{background:var(--card);border-radius:14px;padding:10px 6px;text-align:center;box-shadow:0 6px 14px #0005;color:var(--text)}
.shop-item .e{font-size:22px}
.shop-item .n{font-size:9px;color:var(--muted);margin-top:4px;line-height:1.2}
.shop-item .p{font-size:11px;color:var(--accent2);font-weight:700;margin-top:3px}
.shop-item.owned{outline:1px solid #37d9a066}
.shop-item.owned .p{color:var(--green)}
.shop-item.locked{opacity:.45}
.shop-item:active{transform:scale(.96)}

/* инвентарь */
.inv-row{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line)}
.inv-row:last-child{border-bottom:none}
.inv-row .e{font-size:20px;width:26px;text-align:center}
.inv-row .info{flex:1}
.inv-row .n{font-size:13px;font-weight:600}
.inv-use{background:var(--card2);border-radius:10px;padding:7px 10px;font-size:11px;color:var(--accent2);flex:none}

/* рейтинг */
.rate{display:flex;align-items:center;gap:8px;padding:7px 4px;font-size:13px}
.rate .pos{width:22px;color:var(--muted);font-weight:700;font-size:12px}
.rate .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rate .pts{color:var(--accent2);font-weight:600;font-size:12px}
.rate.me{background:#7c5cff1f;border-radius:10px}

/* ---------- курс ---------- */
.soon-pill{position:absolute;left:16px;right:16px;bottom:16px;display:flex;gap:12px;align-items:center;background:#1a1533ee;border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:0 10px 24px #000a}
.soon-pill b{font-size:14px}
.course-map{position:relative;padding:6px 8px 90px;background:
  radial-gradient(300px 200px at 85% 8%,#2d1e5e66 0%,transparent 70%),
  radial-gradient(260px 220px at 8% 50%,#1e315e55 0%,transparent 70%)}
.spark{position:absolute;color:var(--accent2);opacity:.5;font-size:11px}
.node{cursor:pointer}
.node:active{opacity:.75}

/* сводка готовности */
.score-row{display:flex;gap:8px;text-align:center}
.score-box{flex:1;background:#0E0B1A;border-radius:14px;padding:10px 6px}
.score-big{font-size:22px;font-weight:700;color:var(--accent2)}

/* ---------- админка ---------- */
.adm-exam.on,.adm-sec.on{background:#7c5cff29;border:1px solid #a78bfa8c;color:#E9E2FF}
.topic-row{display:flex;align-items:center;gap:8px;padding:9px 4px;border-bottom:1px solid var(--line);font-size:13px}
.topic-row:last-child{border-bottom:none}
.topic-num{background:var(--card2);color:var(--accent2);border-radius:8px;padding:3px 8px;font-size:11px;font-weight:700;flex:none}
.topic-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topic-count{color:var(--muted);font-size:11px;flex:none}
.topic-del{background:transparent;color:var(--red);font-size:14px;flex:none;padding:2px 6px}
.pick-topic{display:block;width:100%;text-align:left;background:var(--card2);color:var(--text);border-radius:12px;padding:10px 12px;font-size:13px;margin-top:6px}
.pick-topic:active{background:#7c5cff33}
.pick-topic.cur{outline:1px solid var(--accent2)}
.bar-mini{height:6px;border-radius:6px;background:#0E0B1A;overflow:hidden;margin-top:4px}
.bar-mini i{display:block;height:100%;border-radius:6px;background:var(--grad)}

/* ---------- ещё ---------- */
.setrow{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line);font-size:13px;cursor:pointer}
.setrow:last-child{border-bottom:none}
.setrow .se{font-size:17px;width:26px;text-align:center}
.setrow .arr{margin-left:auto;color:var(--muted)}

/* ---------- островок ---------- */
.navisle{position:fixed;left:20px;right:20px;bottom:10px;display:flex;justify-content:space-between;background:#1a153399;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid #ffffff14;border-radius:18px;padding:5px;z-index:50}
.ni{font-size:9px;color:var(--muted);text-align:center;padding:4px 0 3px;border-radius:13px;flex:1;margin:0 2px;background:transparent}
.ni .i{font-size:16px;display:block;margin-bottom:1px}
.ni.on{background:#7c5cff29;border:1px solid #a78bfa8c;color:#E9E2FF}

/* ---------- модалка ---------- */
.modal{position:fixed;inset:0;background:#000a;z-index:100;display:flex;align-items:flex-end}
.modal-box{background:var(--card);border-radius:22px 22px 0 0;padding:16px;width:100%;max-height:75vh;display:flex;flex-direction:column}
.modal-head{display:flex;align-items:center;justify-content:space-between}
.modal-x{background:var(--card2);color:var(--muted);border-radius:10px;width:30px;height:30px;font-size:13px}
.modal-list{overflow-y:auto;margin-top:10px;flex:1}
.pick-row{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:transparent;color:var(--text);padding:10px 6px;border-bottom:1px solid var(--line);font-size:13px}
.pick-row:active{background:#7c5cff1f}
.pick-row .info{margin-left:auto;color:var(--accent2);font-size:11px;flex:none}
.pick-row.busy{opacity:.45;pointer-events:none}
.pick-row.busy .info{color:var(--muted)}

/* ---------- тост ---------- */
.toast{position:fixed;left:16px;right:16px;bottom:76px;background:var(--card2);border:1px solid var(--line);color:var(--text);padding:12px 14px;border-radius:14px;font-size:13px;z-index:200;box-shadow:0 10px 24px #000a;white-space:pre-wrap}

/* ---------- приветствие/ошибка входа ---------- */
.gate{position:fixed;inset:0;background:var(--bg);z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
.gate h2{margin-top:10px}
.gate p{color:var(--muted);font-size:14px;margin-top:8px;max-width:280px;line-height:1.5}
.gate .btn{width:auto;padding:12px 28px;margin-top:16px}