:root {
    --sm-ink: #1c1b19;
    --sm-forest: #315c4c;
    --sm-forest-dark: #24463a;
    --sm-sand: #d9cdbb;
    --sm-stone: #ece8e0;
    --sm-paper: #f7f5f1;
    --sm-clay: #9b5b43;
}

::selection {
    background: var(--sm-sand);
    color: var(--sm-ink);
}

body.theme-page {
    background-color: var(--sm-paper);
    background-image: radial-gradient(rgba(28, 27, 25, .08) .7px, transparent .7px);
    background-size: 24px 24px;
    color: var(--sm-ink);
}

.editorial-header {
    background: rgba(247, 245, 241, .88) !important;
    border: 0 !important;
    padding: .75rem 1rem 0;
    backdrop-filter: blur(16px);
}

.editorial-header > div {
    max-width: 80rem;
    height: 4rem;
    padding-inline: 1rem;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(28, 27, 25, .1);
    border-radius: 1rem;
    box-shadow: 0 10px 35px rgba(28, 27, 25, .07);
}

.editorial-header img {
    width: 2rem;
    height: 2rem !important;
    object-fit: contain;
}

.editorial-header a,
.editorial-header button {
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}

.editorial-header .primary-nav-action {
    border-radius: .75rem;
    background: var(--sm-forest);
    color: #fff;
    padding: .65rem 1rem;
    font-weight: 800;
}

.editorial-header .primary-nav-action:hover {
    background: var(--sm-forest-dark);
}

.theme-page input:not([type="checkbox"]):not([type="radio"]),
.theme-page textarea,
.theme-page select {
    background: #fff;
    border-color: #d9d5ce;
    color: var(--sm-ink);
}

.theme-page input:not([type="checkbox"]):not([type="radio"]):focus,
.theme-page textarea:focus,
.theme-page select:focus {
    border-color: var(--sm-forest) !important;
    box-shadow: 0 0 0 3px rgba(49, 92, 76, .12) !important;
    outline: 0;
}

.auth-layout {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: stretch;
    gap: 1rem;
}

.auth-intro {
    min-height: 38rem;
    border-radius: 2rem;
    padding: 2.25rem;
    overflow: hidden;
    position: relative;
    color: #fff;
    background: var(--sm-ink);
}

.auth-intro::after {
    content: "";
    position: absolute;
    width: 25rem;
    height: 25rem;
    border-radius: 50%;
    right: -13rem;
    bottom: -15rem;
    background: var(--sm-forest);
    filter: blur(5px);
}

.auth-card {
    align-self: center;
    border-radius: 2rem !important;
    border: 1px solid rgba(28, 27, 25, .12) !important;
    box-shadow: 0 24px 70px -35px rgba(28, 27, 25, .28) !important;
}

.auth-card h1 {
    letter-spacing: -.04em;
}

.dashboard-welcome {
    background: var(--sm-ink);
    color: #fff;
    border-radius: 2rem;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.dashboard-welcome::after {
    content: "";
    position: absolute;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background: var(--sm-forest);
    right: -5rem;
    top: -7rem;
    opacity: .75;
}

.dashboard-page main .bg-white {
    border-color: rgba(28, 27, 25, .1) !important;
    box-shadow: 0 18px 50px -38px rgba(28, 27, 25, .35);
}

.teacher-carousel,
.dashboard-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.teacher-carousel::-webkit-scrollbar,
.dashboard-scroll::-webkit-scrollbar {
    display: none;
}

.teacher-carousel {
    scroll-padding-inline: .25rem;
}

.teacher-slide {
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.teacher-slide:hover {
    border-color: rgba(49, 92, 76, .4);
    box-shadow: 0 18px 45px -34px rgba(28, 27, 25, .45);
}

.chat-drawer {
    transform: translateX(115%);
    transition: transform .35s cubic-bezier(.2, .75, .25, 1);
}

.chat-drawer.open {
    transform: translateX(0);
}

.teacher-stage {
    --stage-x: 0deg;
    --stage-y: 0deg;
    min-height: 600px;
    perspective: 1400px;
}

.teacher-experience {
    display: none;
    min-height: 600px;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
    border-radius: 2.25rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 35px 90px -45px rgba(28, 27, 25, .55);
    transform: rotateX(var(--stage-y)) rotateY(var(--stage-x));
    transform-style: preserve-3d;
    transition: transform .4s ease;
}

.teacher-experience.active {
    display: grid;
    animation: teacher-reveal .55s cubic-bezier(.2, .75, .25, 1) both;
}

.teacher-portrait {
    min-height: 600px;
    background:
        radial-gradient(circle at 85% 15%, rgba(49, 92, 76, .85), transparent 34%),
        linear-gradient(145deg, #252522 0%, #171714 100%);
}

.teacher-orb {
    position: absolute;
    width: 26rem;
    height: 26rem;
    border-radius: 48% 52% 65% 35% / 42% 37% 63% 58%;
    background: linear-gradient(145deg, rgba(217, 205, 187, .9), rgba(49, 92, 76, .8));
    top: 18%;
    left: 50%;
    transform: translateX(-50%) rotate(-12deg);
    filter: blur(.2px);
    opacity: .3;
}

.teacher-hero-image,
.teacher-hero-fallback {
    width: 11rem;
    height: 11rem;
    border-radius: 3.25rem;
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .3);
    position: relative;
    z-index: 2;
}

.teacher-hero-image { object-fit: cover; }

.teacher-hero-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(18px);
    color: #fff;
    font-size: 4.5rem;
    font-weight: 900;
    letter-spacing: -.08em;
}

.teacher-booking { min-height: 600px; }

.teacher-switch {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .7rem;
    border: 1px solid rgba(28, 27, 25, .1);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .7);
    padding: .55rem .9rem .55rem .55rem;
    color: #62615d;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.teacher-switch.active {
    background: #1c1b19;
    border-color: #1c1b19;
    color: #fff;
}

.teacher-switch-avatar {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .65rem;
    background: #ece8e0;
    color: #315c4c;
    font-size: .7rem;
    font-weight: 900;
}

.teacher-switch.active .teacher-switch-avatar {
    background: #315c4c;
    color: #fff;
}

@keyframes teacher-reveal {
    from { opacity: 0; transform: translateY(20px) scale(.985); }
    to { opacity: 1; transform: rotateX(var(--stage-y)) rotateY(var(--stage-x)); }
}

.dashboard-page main > div > div > div,
.dashboard-page main > div > div + div {
    border-radius: 1.5rem;
}

.privacy-shell {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
}

.privacy-hero {
    padding: 3rem 0 2.5rem;
    border-bottom: 1px solid rgba(28, 27, 25, .12);
}

.privacy-hero h1 {
    font-size: clamp(3.5rem, 9vw, 7.5rem);
    line-height: .9;
    letter-spacing: -.07em;
}

.privacy-content {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: 4rem;
    padding-block: 3rem 5rem;
}

.privacy-content article {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.privacy-content article section {
    border-top: 1px solid rgba(28, 27, 25, .12);
    padding: 1.75rem 0;
}

.privacy-content article section:first-child {
    border-top: 0;
    padding-top: 0;
}

.privacy-content article h2 {
    letter-spacing: -.02em;
}

@media (max-width: 900px) {
    .auth-layout { grid-template-columns: 1fr; max-width: 42rem; }
    .auth-intro { display: none !important; }
    .privacy-content { grid-template-columns: 1fr; gap: 2rem; }
    .privacy-toc { display: none; }

    .teacher-stage,
    .teacher-experience { min-height: 0; }
    .teacher-experience.active { display: block; }
    .teacher-portrait { min-height: 490px; }
    .teacher-booking { min-height: 460px; }
}

@media (max-width: 640px) {
    .editorial-header { padding: .5rem .65rem 0; }
    .editorial-header > div { height: 3.5rem; padding-inline: .75rem; }
    .editorial-header .brand-word { display: none; }
    .auth-card { border-radius: 1.5rem !important; }
    .dashboard-welcome { border-radius: 1.5rem; padding: 1.25rem; }

    .teacher-experience { border-radius: 1.75rem; }
    .teacher-portrait { min-height: 440px; }
    .teacher-hero-image,
    .teacher-hero-fallback { width: 8rem; height: 8rem; border-radius: 2.4rem; }
    .teacher-hero-fallback { font-size: 3.5rem; }
    .teacher-orb { width: 19rem; height: 19rem; }
}