/* Приложение родителя. Общая раскладка — в ../shared/layout.css */

.center { text-align: center; }
.pad { padding: 0 4px; margin-top: 10px; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.stack > .eyebrow { margin-bottom: 0; }
/* Карточки-ссылки: у <a> по умолчанию display:inline, из-за чего рамка и фон рвались по строкам. */
a.card { display: block; }
a.card, a.item { color: inherit; text-decoration: none; }
.eyebrow { display: flex; align-items: center; gap: 7px; }
.eyebrow svg { flex: none; }
.tap { cursor: pointer; transition: transform .12s ease; }
.tap:active { transform: scale(.985); }
.lead { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 4px 0 0; }
.more { text-align: right; font-size: 12.5px; font-weight: 700; color: var(--brand); margin-top: 10px; }
.hint { padding: 10px 12px; border-radius: 10px; background: var(--paper-2); color: var(--ink-soft); font-size: 13px; }
.hint b { color: var(--ink); }

/* шапка со школьником */
.apphd {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 11px;
  padding: 14px 16px; background: var(--paper); border-bottom: 1px solid var(--line);
}
.apphd h1 { font-size: 19px; }
.apphd .faint { margin-top: 1px; }
.whoselect {
  min-height: 34px; padding: 2px 8px; border-radius: 10px; font-family: var(--serif); font-size: 18px; font-weight: 600;
  border: 1px solid var(--line-2); background: var(--card); max-width: 100%;
}
.ratechip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--brand); color: var(--on-brand);
  padding: 7px 12px; border-radius: 99px; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; text-decoration: none;
}
.ratechip small { font-weight: 500; opacity: .85; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }

/* модули */
.modcard { border: 1.6px solid var(--brand); background: var(--brand-tint); }
.pill.now { background: var(--brand); color: var(--on-brand); }
.mod-t { font-size: 20px; margin: 10px 0 2px; }
.mod-t.big { font-size: 24px; margin: 12px 0 0; }
.badge { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--paper-2); color: var(--ink-faint); }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
button.item.locked { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.item.locked .badge, .item.locked .grow { opacity: .72; }
.item.locked.open .chev { transform: rotate(90deg); }
.lockwrap .teaser[hidden] { display: none; }
.lockwrap .teaser { margin: 6px 4px 2px; padding: 10px 12px; border-left: 3px solid var(--brand); background: var(--paper-2); border-radius: 0 10px 10px 0; }
.bullets { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.bullets li + li { margin-top: 6px; }
.task b { font-size: 14.5px; }
.upload { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-2); }

/* монеты */
.coins { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.coins > .card { margin-top: 0; } /* общее «.card + .card» в сетке давало лесенку */
.cointile { text-align: center; padding: 14px 10px; }
.coinnum { font-family: var(--serif); font-size: 30px; font-weight: 600; }
.coinname { font-weight: 700; font-size: 13.5px; margin-bottom: 2px; }
.ratingcard { text-align: center; }

/* навыки */
.skillrows { display: flex; flex-direction: column; gap: 9px; }
.skillrow, .card .row.between { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.nm { font-weight: 600; font-size: 14.5px; }
.vl { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; white-space: nowrap; }
.delta { margin-left: 6px; font-size: 11.5px; }
.delta.ok, .deltaline.ok { color: var(--ok); }
.delta.bad, .deltaline.bad { color: var(--danger); }
.delta:not(.ok):not(.bad), .deltaline.flat { color: var(--ink-faint); }
.deltaline { font-size: 13.5px; font-weight: 700; margin: 2px 0 10px; }
.bigvalue { font-family: var(--serif); font-size: 40px; font-weight: 600; margin: 4px 0; }
.levelbar { display: flex; align-items: center; gap: 10px; }
.levelname { flex: 1; text-align: center; font-weight: 700; font-size: 14px; }
.iconbtn[disabled] { opacity: .35; cursor: default; }
.iconbtn.flip svg { transform: rotate(180deg); }

/* график */
.chartbox { margin-top: 6px; }
.chart { width: 100%; height: auto; display: block; }
.chart-line { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart-dot { fill: var(--brand); }
.chart-dot.last { stroke: var(--card); stroke-width: 2.5; }
.chart-val { font: 600 9.5px system-ui, sans-serif; fill: var(--ink-soft); }
.chart-date { font: 10px system-ui, sans-serif; fill: var(--ink-faint); }
.chart-axis { font: 9px system-ui, sans-serif; fill: var(--ink-faint); }
.chart-zero { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 3 3; }

/* вход */
.pin-input {
  width: 100%; min-height: 64px; text-align: center; font-family: var(--serif); font-size: 34px; letter-spacing: .4em;
  padding-left: .4em; border-radius: 16px; border: 1.5px solid var(--line-2); background: var(--card); margin-bottom: 14px;
}
.center.faint, .login .faint { text-align: center; }

/* уровни навыка */
.lvtag { font-weight: 500; color: var(--ink-faint); font-size: 12px; }
.lvline { font-size: 13px; color: var(--ink-soft); margin: 2px 0 0; }
.levelnow { font-family: var(--serif); font-size: 20px; font-weight: 600; margin: 2px 0; }
.levelname.left { text-align: left; margin-bottom: 4px; }
.lvlist { display: flex; flex-direction: column; gap: 6px; }
.lvrow {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: inherit;
}
.lvrow.sel { border-color: var(--brand); background: var(--brand-tint); }
.lvnum {
  width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; background: var(--paper-2); color: var(--ink-soft);
}
.lvrow.sel .lvnum { background: var(--brand); color: var(--on-brand); }
.lvtitle { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lvval { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }
.pill.small { font-size: 10.5px; padding: 2px 8px; }

/* картинка к заданию: миниатюра в карточке и просмотр на весь экран */
.taskimg { margin: 10px 0 4px; }
.taskimg-open { display: block; width: 100%; padding: 0; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; overflow: hidden; cursor: zoom-in; }
.taskimg-pic { display: block; width: 100%; max-height: 260px; object-fit: contain; background: #fff; }
.imgviewer { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: rgba(20, 14, 8, .92); }
.imgviewer-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--card); }
.imgviewer-bar b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imgviewer-body { flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center; padding: 12px; }
.imgviewer-body img { max-width: 100%; max-height: 100%; background: #fff; border-radius: 6px; }
.imgviewer-hint { margin: 0; padding: 8px 14px 14px; text-align: center; font-size: 12px; color: #d9cbb8; }
@media print {
  body.printing-image > *:not(.imgviewer) { display: none !important; }
  body.printing-image .imgviewer { position: static; display: block; background: #fff; }
  body.printing-image .imgviewer-bar, body.printing-image .imgviewer-hint { display: none !important; }
  body.printing-image .imgviewer-body { display: block; padding: 0; overflow: visible; }
  body.printing-image .imgviewer-body img { max-width: 100%; max-height: 95vh; border-radius: 0; }
}

/* игры-тренажёры: заголовки групп и переключатель */
.gamehead { display: flex; align-items: center; gap: 7px; margin: 4px 0 2px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); }
.skillrows + .skillrows { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line-2); }
.gameswitch { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.gamename { margin: 0 0 8px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.gameswitch .chip { display: inline-flex; align-items: center; gap: 7px; }

/* переключатель игры */
.chip {
  border: 1px solid var(--line-2); background: var(--card-2); border-radius: 99px; padding: 8px 13px;
  font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--ink-soft);
}
.chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

/* политика обработки персональных данных (policy.html) и ссылки на неё */
.doclink { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.doc { max-width: 720px; margin: 0 auto; padding: 20px 16px calc(32px + env(safe-area-inset-bottom)); line-height: 1.55; }
.doc h1 { font-size: 24px; margin: 18px 0 8px; }
.doc h2 { font-size: 18px; margin: 22px 0 8px; }
.doc p { margin: 0 0 10px; overflow-wrap: anywhere; }
.doc .muted { font-size: 15px; }
.doc mark { background: #FFE58A; color: #2C2015; }

/* магазин призов */
.prizes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.prizes > .card { margin-top: 0; }
.prizecard { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.prizecard .prizetitle { font-size: 14.5px; line-height: 1.25; }
.prizecard .prizedesc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.prizecard .btn { margin-top: auto; white-space: normal; text-align: center; line-height: 1.2; padding: 6px 8px; }
.ordercard .orderstatus { font-weight: 700; margin: 6px 0 2px; }
.ordercard.ready { border-color: var(--ok); background: var(--ok-bg); }
.ordercard.ready .orderstatus { color: var(--ok); }
.ordercard.wait .orderstatus { color: var(--brand); }
.ordercard .btn.link { padding-left: 0; margin-top: 4px; }

/* иконки модулей, навыков, монет */
.modtop { display: flex; align-items: center; gap: 12px; }
.modtop .mod-t { margin-top: 6px; }
.modhero { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.modhero .mod-t.big { margin-top: 8px; }
.modpic { position: relative; flex: none; width: 46px; height: 46px; }
.modpic .mark {
  position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid var(--card);
}
.modpic.past .mark { background: var(--ok); color: #fff; }
.modpic.locked .pic { filter: grayscale(.85) opacity(.55); }
.modpic.locked .mark { background: var(--paper-2); color: var(--ink-faint); }
.nm { display: inline-flex; align-items: center; gap: 8px; }
.cointile .pic { margin: 0 auto 2px; }
.gamehead .pic, .eyebrow.game .pic, .gamename .pic, .chip .pic { margin: -3px 0; }

/* портфолио */
.pfrow { display: flex; gap: 12px; align-items: flex-start; }
.pfcover { width: 76px; flex: none; }
.pfrow .grow { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pfrow .grow b { font-size: 15px; line-height: 1.25; }
.pfcard .row { margin-top: 10px; }
.pfcard .lead { margin-top: 8px; }
.pfcard .viewer-media { width: 100%; margin-top: 10px; border-radius: 12px; }
.pfform .field input[type=file] { font-size: 14px; }

/* колокольчик и лента уведомлений */
.bellbtn { position: relative; display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 99px; background: var(--brand-tint); color: var(--brand); text-decoration: none; }
.bellcount { position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  border: 2px solid var(--paper); box-sizing: content-box; }
.item.note { align-items: flex-start; }
.item.note .grow { display: flex; flex-direction: column; gap: 2px; }
.item.note .nbody { color: var(--ink-soft); font-size: 13.5px; }
.item.note.unread { border-color: var(--brand); background: var(--brand-tint); }
.pushcard { display: flex; flex-direction: column; gap: 8px; }
.pushcard .row span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ok); }

/* новости школы на главной */
.newscard { display: flex; flex-direction: column; gap: 6px; }
.newscard .authimg { margin: -4px -4px 4px; border-radius: 12px; }
.newscard .newstitle { font-family: var(--serif); font-size: 18px; line-height: 1.25; }
.newstext { white-space: pre-line; line-height: 1.5; font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 5;
  -webkit-box-orient: vertical; overflow: hidden; }
.newstext.open { display: block; -webkit-line-clamp: unset; }
.newscard .btn.link { align-self: flex-start; padding-left: 0; }
.morenews { margin-top: 10px; }
.oldnews { border-top: 1px solid var(--line); padding: 10px 0; }
.oldnews summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 10px; font-weight: 600; }
.oldnews summary::-webkit-details-marker { display: none; }
.oldnews .newstext { margin-top: 6px; }