:root {
    --theatre-bg: #f6efe7;
    --theatre-ink: #2d1b12;
    --theatre-brown: #3b2417;
    --theatre-rust: #a44922;
    --theatre-gold: #d9a441;
    --theatre-card: rgba(255, 252, 247, 0.88);
    --theatre-border: rgba(59, 36, 23, 0.12);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
body {
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(217,164,65,.26), transparent 28rem),
        linear-gradient(180deg, #fff9f1 0%, var(--theatre-bg) 45%, #efe2d3 100%);
    color: var(--theatre-ink);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    min-height: 100vh;
}
a { text-decoration: none; color: inherit; }
.app-shell { min-height: 100vh; padding-bottom: calc(88px + var(--safe-bottom)); }
.app-main { max-width: 1180px; padding: 0 1rem 1.5rem; }
.app-header {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    padding: calc(.8rem + env(safe-area-inset-top, 0px)) 1rem .8rem;
    backdrop-filter: blur(18px);
    background: rgba(246, 239, 231, .78);
    border-bottom: 1px solid var(--theatre-border);
}
.app-header h1 { font-size: 1.25rem; margin: 0; font-weight: 800; letter-spacing: -.02em; }
.eyebrow { text-transform: uppercase; font-size: .72rem; letter-spacing: .14em; color: var(--theatre-rust); font-weight: 800; margin: 0; }
.avatar-link { font-size: 1.8rem; color: var(--theatre-brown); }
.hero-card, .glass-card, .course-card, .session-card, .exercise-card, .filter-card, .exercise-session-card {
    border: 1px solid var(--theatre-border);
    background: var(--theatre-card);
    box-shadow: 0 18px 45px rgba(59, 36, 23, .08);
    backdrop-filter: blur(18px);
}
.hero-card {
    border-radius: 2rem;
    padding: 1.4rem;
    display: flex; justify-content: space-between; gap: 1rem; align-items: center;
    background: linear-gradient(135deg, #3b2417 0%, #7a351d 58%, #d9a441 130%);
    color: #fff8ec;
    margin: 1rem 0;
}
.hero-card.compact { border-radius: 1.5rem; }
.hero-card h2 { font-size: 1.55rem; margin: .25rem 0 .5rem; font-weight: 850; letter-spacing: -.04em; }
.hero-card p { margin: 0; opacity: .9; }
.hero-icon { font-size: 3.5rem; opacity: .45; }
.glass-card { border-radius: 1.45rem; }
.section-title { font-size: 1rem; font-weight: 850; margin: 0 0 .75rem; }
.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.quick-card {
    min-height: 96px; padding: .9rem .55rem; border-radius: 1.25rem;
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: .45rem;
    background: #fffaf4; border: 1px solid var(--theatre-border); box-shadow: 0 10px 25px rgba(59,36,23,.06);
    font-weight: 750;
}
.quick-card i { font-size: 1.55rem; color: var(--theatre-rust); }
.list-card, .next-session, .mini-note {
    display: flex; justify-content: space-between; align-items: center; gap: .75rem;
    padding: .85rem 0; border-bottom: 1px solid rgba(59,36,23,.08);
}
.list-card:last-child, .mini-note:last-child { border-bottom: 0; }
.list-card small, .next-session small, .mini-note small { display: block; color: #7b6a5e; }
.next-session { align-items: flex-start; flex-direction: column; }
.chip {
    display: inline-flex; align-items: center; gap: .25rem;
    border-radius: 999px; padding: .25rem .62rem; font-size: .75rem; font-weight: 850;
    white-space: nowrap;
}
.chip-success { background: #dcfce7; color: #166534; }
.chip-warning { background: #ffedd5; color: #9a3412; }
.chip-purple { background: #ede9fe; color: #5b21b6; }
.chip-muted { background: #e2e8f0; color: #475569; }
.chip-neutral { background: #f1f5f9; color: #334155; }
.chip-gold { background: #fef3c7; color: #92400e; }
.course-card, .session-card, .exercise-card, .exercise-session-card, .filter-card {
    display: block; border-radius: 1.35rem; padding: 1rem; margin-bottom: .9rem;
}
.course-card h2, .session-card h2, .exercise-card h2 { font-size: 1.12rem; margin: .55rem 0 .25rem; font-weight: 850; }
.course-card p, .session-card p, .exercise-card p { color: #6f5f54; margin-bottom: .55rem; }
.meta-row { display: flex; gap: .85rem; align-items: center; color: #7b6a5e; font-size: .88rem; }
.action-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn-theatre { background: var(--theatre-brown); border-color: var(--theatre-brown); color: #fff8ec; border-radius: 999px; font-weight: 800; }
.btn-theatre:hover { background: #21120b; border-color: #21120b; color: #fff; }
.btn-outline-theatre { border-color: rgba(59,36,23,.28); color: var(--theatre-brown); border-radius: 999px; font-weight: 800; }
.btn-outline-theatre:hover { background: var(--theatre-brown); color: #fff; }
.session-card { display: flex; gap: .9rem; align-items: center; }
.session-date { width: 64px; height: 64px; border-radius: 1.1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #3b2417; color: #fff8ec; flex: none; }
.session-date strong { font-size: 1.35rem; line-height: 1; }
.session-date span { font-size: .72rem; }
.exercise-grid { display: grid; gap: .9rem; }
.exercise-card { display: grid; grid-template-columns: 54px 1fr; gap: .9rem; }
.exercise-icon { width: 54px; height: 54px; border-radius: 1rem; display: grid; place-items: center; background: color-mix(in srgb, var(--cat-color) 18%, white); color: var(--cat-color); font-size: 1.5rem; }
.filter-card { padding: .85rem; }
.search-input { display: flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid var(--theatre-border); border-radius: 999px; padding: .7rem 1rem; }
.search-input input { border: 0; outline: 0; flex: 1; background: transparent; }
.filter-grid { display: grid; grid-template-columns: 1fr; gap: .5rem; }
.exercise-session-card { background: #fffaf4; }
.exercise-session-card h4 { font-weight: 850; margin: .55rem 0 .1rem; }
.order-input { width: 74px; border-radius: 999px; text-align: center; }
.quick-notes { border-radius: 1rem; min-height: 48px; }
.empty-state { text-align: center; padding: 3rem 1rem; color: #7b6a5e; }
.empty-state i { font-size: 3rem; color: var(--theatre-rust); }
.bottom-nav {
    position: fixed; left: .75rem; right: .75rem; bottom: calc(.75rem + var(--safe-bottom)); z-index: 50;
    height: 66px; border-radius: 1.5rem; background: rgba(59,36,23,.95); backdrop-filter: blur(18px);
    display: grid; grid-template-columns: repeat(4, 1fr); padding: .35rem; box-shadow: 0 18px 50px rgba(59,36,23,.28);
}
.bottom-nav a { color: rgba(255,248,236,.72); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; font-size: .72rem; font-weight: 750; border-radius: 1.1rem; }
.bottom-nav a i { font-size: 1.25rem; }
.bottom-nav a.active { background: #fff8ec; color: var(--theatre-brown); }
.fab-menu { position: fixed; right: 1.1rem; bottom: calc(84px + var(--safe-bottom)); z-index: 60; }
.fab { width: 58px; height: 58px; border: 0; border-radius: 50%; background: var(--theatre-rust); color: #fff; font-size: 1.55rem; box-shadow: 0 15px 40px rgba(164,73,34,.38); }
.flash-stack {
    position: fixed;
    top: calc(.85rem + env(safe-area-inset-top, 0px));
    left: .85rem;
    right: .85rem;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    pointer-events: none;
}
.flash-toast {
    --flash-accent: var(--theatre-rust);
    --flash-soft: #fff3df;
    width: min(100%, 520px);
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: .8rem;
    align-items: center;
    padding: .8rem .95rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(59, 36, 23, .1);
    border-left: 5px solid var(--flash-accent);
    background: rgba(255, 252, 247, .98);
    color: var(--theatre-ink);
    box-shadow: 0 20px 55px rgba(59, 36, 23, .22);
    backdrop-filter: blur(18px);
    opacity: 0;
    transform: translateY(-1.15rem) scale(.98);
    animation: flashToastIn .22s ease-out forwards;
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: auto;
}
.flash-toast-icon {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--flash-soft);
    color: var(--flash-accent);
    font-size: 1.35rem;
}
.flash-toast-title {
    margin: 0 0 .08rem;
    font-size: .78rem;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--flash-accent);
}
.flash-toast-message {
    margin: 0;
    font-size: .96rem;
    line-height: 1.28;
    font-weight: 700;
}
.flash-toast-message ul { margin-top: .25rem; }
.flash-toast-success { --flash-accent: #15803d; --flash-soft: #dcfce7; }
.flash-toast-danger { --flash-accent: #b91c1c; --flash-soft: #fee2e2; }
.flash-toast.is-hiding { opacity: 0; transform: translateY(-1.25rem) scale(.98); }
@keyframes flashToastIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .flash-toast {
        animation: none;
        opacity: 1;
        transform: none;
        transition: opacity .01s linear;
    }
    .flash-toast.is-hiding { transform: none; }
}
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login-card { width: min(100%, 430px); background: rgba(255,252,247,.92); border: 1px solid var(--theatre-border); border-radius: 2rem; padding: 1.4rem; box-shadow: 0 25px 80px rgba(59,36,23,.14); }
.brand-mark { width: 76px; height: 76px; border-radius: 1.5rem; background: var(--theatre-brown); color: #fff8ec; display: grid; place-items: center; margin: 0 auto .8rem; font-size: 2rem; }
.login-card h1 { text-align: center; font-weight: 900; letter-spacing: -.04em; }
.login-subtitle { text-align: center; color: #7b6a5e; }
.demo-box { margin-top: 1rem; padding: .85rem; border-radius: 1rem; background: #fff3df; color: #6b3a1f; font-size: .9rem; }
.profile-icon { font-size: 3.2rem; color: var(--theatre-rust); }
.fc .fc-toolbar-title { font-size: 1.05rem; font-weight: 850; }
.fc .fc-button-primary { background: var(--theatre-brown); border-color: var(--theatre-brown); border-radius: 999px; }
@media (min-width: 768px) {
    .app-main { padding-left: 1.4rem; padding-right: 1.4rem; }
    .hero-card h2 { font-size: 2rem; }
    .quick-grid { grid-template-columns: repeat(4, 1fr); }
    .filter-grid { grid-template-columns: repeat(4, 1fr); }
    .exercise-grid { grid-template-columns: repeat(2, 1fr); }
    .bottom-nav { max-width: 520px; left: 50%; transform: translateX(-50%); }
}
@media (min-width: 1100px) {
    .exercise-grid { grid-template-columns: repeat(3, 1fr); }
    .fab-menu { right: calc((100vw - 1180px) / 2 + 1rem); }
}