/* Shared look for the student area (/learn) and the admin dashboard (/admin), on top of styles.css. */
.panel { max-width: 1100px; margin: 0 auto; padding: 84px var(--gutter) 60px; position: relative; z-index: 1; }
.panel h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
.panel .card { background: var(--glass); box-shadow: var(--glass-shadow); border-radius: var(--r); padding: 1.2rem 1.3rem; margin-bottom: 12px; }
.panel .card.dark { background: linear-gradient(160deg, #24242a, #121215); color: var(--on-night); }
.panel .card.dark .muted { color: var(--on-night-muted); }
.panel .card.warm { background: linear-gradient(160deg, rgba(255, 249, 238, .96), rgba(253, 236, 210, .72)); box-shadow: 0 0 0 1px rgba(232, 134, 42, .3), var(--glass-shadow); }
.panel .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.panel .grow { flex: 1; min-width: 0; }
.panel label { display: grid; gap: 6px; font-weight: 500; margin-bottom: 12px; }
.panel .field { width: 100%; }
.panel textarea.field { min-height: 90px; resize: vertical; line-height: 1.7; }
.panel .err { margin: 4px 0 8px; }
.panel .ok { color: #2E8B62; font-weight: 600; }
.panel .tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 16px; scrollbar-width: none; }
.panel .tabs::-webkit-scrollbar { display: none; }
.panel .tabs button { flex: none; border: 0; background: none; cursor: pointer; padding: .55rem 1.1rem; border-radius: 999px; font-weight: 500; min-height: 42px; color: var(--ink-2); transition: background-color .3s, color .3s; }
.panel .tabs button.on { background: var(--ink); color: #fff; }
.panel .badge { display: inline-flex; align-items: center; padding: .1rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: rgba(20, 20, 23, .07); }
.panel .badge.pending { background: rgba(246, 176, 74, .25); color: var(--lamp-ink); }
.panel .badge.approved { background: rgba(46, 139, 98, .15); color: #2E8B62; }
.panel .badge.rejected { background: rgba(194, 69, 59, .12); color: #C2453B; }
.panel .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.panel .kpi { background: var(--glass); box-shadow: var(--glass-shadow); border-radius: var(--r); padding: 1rem 1.1rem; }
.panel .kpi small { display: block; color: var(--muted); font-size: .85rem; }
.panel .kpi b { display: block; font-family: var(--display); font-size: 1.7rem; line-height: 1.3; }
.panel .kpi span { color: var(--muted); font-size: .8rem; }
.panel .kpi.dark { background: linear-gradient(160deg, #24242a, #121215); color: #fff; }
.panel .kpi.dark b { color: var(--lamp-2); }
.panel .kpi.dark small, .panel .kpi.dark span { color: var(--on-night-muted); }
.panel table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.panel th, .panel td { text-align: start; padding: .6rem .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.panel th { font-weight: 600; color: var(--lamp-ink); font-size: .86rem; }
.panel .scroll { overflow-x: auto; }
.panel .chart { width: 100%; height: 170px; display: block; }
.panel .receipt { max-width: 100%; max-height: 70svh; border-radius: 14px; margin: 10px auto; display: block; box-shadow: 0 0 0 1px var(--line); }
.panel .code { font-family: var(--display); font-size: 1.5rem; letter-spacing: .08em; direction: ltr; color: var(--lamp-ink); user-select: all; }
.panel .list-item { display: flex; gap: 12px; align-items: center; padding: .9rem 1rem; border-radius: 16px; background: var(--glass); box-shadow: var(--glass-shadow); margin-bottom: 8px; cursor: pointer; min-height: 64px; transition: box-shadow .3s; text-decoration: none; color: inherit; }
.panel .list-item:hover { box-shadow: 0 0 0 1.5px var(--lamp), var(--glass-shadow); }
.panel .list-item.locked { opacity: .55; cursor: not-allowed; }
.panel .list-item .n { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(160deg, #26262c, #111114); color: var(--lamp-2); font-family: var(--display); font-weight: 700; }
.panel .list-item.done .n { background: linear-gradient(180deg, var(--lamp-2), var(--lamp)); color: var(--ink); }
.panel .player { border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 30px 60px -30px rgba(20, 20, 23, .55); }
.panel .player video { display: block; width: 100%; max-height: 72svh; background: #000; }
.panel .quiz-q { margin-bottom: 16px; }
.panel .quiz-q b { display: block; margin-bottom: 8px; }
.panel .opt { display: block; width: 100%; text-align: start; border: 0; cursor: pointer; padding: .85rem 1rem; border-radius: 14px; margin-bottom: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); min-height: 52px; font-size: 1rem; transition: box-shadow .25s, background-color .25s; }
.panel .opt.on { box-shadow: inset 0 0 0 2px var(--lamp); background: rgba(246, 176, 74, .15); }
.panel .opt.right { box-shadow: inset 0 0 0 2px #2E8B62; background: rgba(46, 139, 98, .1); }
.panel .opt.wrong { box-shadow: inset 0 0 0 2px #C2453B; background: rgba(194, 69, 59, .08); }
.panel .progress { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.panel .progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--lamp), var(--lamp-2)); transition: width .8s var(--ease); }
.panel .view { animation: msg .4s var(--ease) both; }
.panel .hint { color: var(--muted); font-size: .9rem; }
.bar .links { display: flex; gap: 8px; }
@media (max-width: 899px) {
  .panel { padding-top: 76px; }
  .panel .hide-phone { display: none; }
  .panel .row .btn { flex: 1 1 auto; }
}