.app-shell { background: var(--canvas); }.app-main { padding-block: 2rem 5rem; }.app-layout { display: grid; gap: 1rem; }.app-sidebar { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }.app-sidebar__label { margin: .4rem .65rem .7rem; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.app-nav { display: grid; gap: .2rem; }.app-nav a { padding: .65rem; border-radius: .55rem; color: var(--muted); font-size: .88rem; }.app-nav a:hover, .app-nav a[aria-current='page'] { background: var(--surface-raised); color: var(--ink); }.app-content { min-width: 0; }.app-title-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }.app-title-row h1 { max-width: none; margin: 0; font-size: clamp(2.3rem, 5vw, 4.5rem); }.app-grid { display: grid; gap: 1rem; }.app-card { padding: 1.35rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }.app-card h2, .app-card h3 { font-family: var(--font-display); font-weight: 500; }.app-card p { color: var(--muted); }.metric { display: flex; min-height: 8rem; flex-direction: column; justify-content: space-between; }.metric strong { color: var(--gold); font-family: var(--font-display); font-size: 2.6rem; font-weight: 500; line-height: 1; }.metric span { color: var(--muted); font-size: .8rem; }.progress-bar { height: .45rem; overflow: hidden; border-radius: 99px; background: var(--surface-raised); }.progress-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--blue)); }.lesson-card { display: grid; gap: 1rem; }.video-stage { display: grid; min-height: 14rem; place-items: center; padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: radial-gradient(circle at 70% 25%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 13rem), #0b121a; text-align: center; }.video-stage__play { display: grid; width: 3.8rem; aspect-ratio: 1; place-items: center; margin: 0 auto .8rem; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); }.list-clean { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }.list-clean li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line); color: var(--muted); }.badge { display: inline-flex; align-items: center; width: fit-content; padding: .24rem .5rem; border: 1px solid var(--line); border-radius: 99px; color: var(--gold); font-size: .67rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.notice { padding: 1rem 1.2rem; border-left: 2px solid var(--gold); background: color-mix(in srgb, var(--gold) 7%, transparent); color: var(--muted); font-size: .9rem; }.form-grid { display: grid; gap: 1rem; }.field { display: grid; gap: .35rem; }.field label { font-size: .8rem; font-weight: 750; }.field input, .field select, .field textarea { width: 100%; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--canvas); color: var(--ink); }.field textarea { min-height: 7rem; resize: vertical; }.form-feedback { min-height: 1.5rem; color: #74c99e; font-size: .84rem; }.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; }.calendar span { display: grid; min-height: 2.2rem; place-items: center; border: 1px solid var(--line); border-radius: .45rem; color: var(--muted); font-size: .75rem; }.calendar .is-active { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--gold); font-weight: 800; }.message-thread { display: grid; gap: .8rem; }.message { max-width: 85%; padding: .8rem 1rem; border-radius: .9rem .9rem .9rem .2rem; background: var(--surface-raised); color: var(--muted); font-size: .9rem; }.message--mine { justify-self: end; border-radius: .9rem .9rem .2rem .9rem; background: color-mix(in srgb, var(--blue) 22%, var(--surface)); color: var(--ink); }.checkout-summary { display: grid; gap: .8rem; padding: 1.5rem; border: 1px solid var(--gold); border-radius: var(--radius-md); background: linear-gradient(145deg, color-mix(in srgb, var(--gold) 10%, var(--surface)), var(--surface)); }.checkout-price { font-family: var(--font-display); font-size: 3rem; }.checkout-summary small { color: var(--muted); }.qr { width: 8rem; padding: .5rem; background: #fff; border-radius: .35rem; }.admin-table { width: 100%; border-collapse: collapse; font-size: .84rem; }.admin-table th, .admin-table td { padding: .8rem .45rem; border-bottom: 1px solid var(--line); text-align: left; }.admin-table th { color: var(--muted); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }.admin-table td { color: var(--muted); }.admin-table td:first-child { color: var(--ink); }.chart { display: flex; height: 10rem; align-items: end; gap: .6rem; padding-top: 1rem; border-bottom: 1px solid var(--line); }.chart span { flex: 1; min-width: .8rem; border-radius: .35rem .35rem 0 0; background: linear-gradient(var(--gold), var(--blue)); }.admin-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }.admin-tabs button { padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--muted); font-size: .75rem; }.admin-tabs button.is-active { border-color: var(--gold); color: var(--gold); }.hidden-panel { display: none; }.hidden-panel.is-active { display: block; }
@media (min-width: 48rem) { .app-layout { grid-template-columns: 14rem minmax(0, 1fr); align-items: start; }.app-sidebar { position: sticky; top: 6rem; }.app-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }.app-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }.lesson-card { grid-template-columns: 1.3fr .7fr; }.form-grid--two { grid-template-columns: 1fr 1fr; } }