:root {
            --green: #16a34a;
            --green-dark: #0f8f3b;
            --green-soft: #eaf8ef;
            --orange: #f7941d;
            --orange-soft: #fff3e2;
            --ink: #0f2740;
            --muted: #6b7280;
            --line: #d9e1ea;
            --bg: #f7faf8;
        }

        * {
            box-sizing: border-box
        }

        body {
            margin: 0;
            background: #fff;
            color: var(--ink);
            font-family: Inter,Arial,sans-serif
        }

        .poster {
            width: 1900px;
            max-width: 100%;
            margin: 0 auto;
            padding: 28px 26px 42px;
            background: linear-gradient(180deg,#fff 0%,#fbfffc 100%)
        }

        .header {
            display: flex;
            align-items: center;
            gap: 28px;
            margin-bottom: 18px
        }

        .logo {
            width: 170px;
            height: auto;
            object-fit: contain
        }

        h1 {
            font-size: 34px;
            margin: 0;
            letter-spacing: -.7px;
            font-weight: 900
        }

            h1 span {
                color: var(--green)
            }

        .section-label {
            display: inline-block;
            color: #fff;
            font-weight: 900;
            font-size: 18px;
            padding: 7px 16px;
            border-radius: 8px;
            margin: 8px 0 15px;
            background: var(--green)
        }

            .section-label.teacher {
                background: var(--orange)
            }

        .grid {
            display: grid;
            grid-template-columns: repeat(6,1fr);
            gap: 28px 24px
        }

        .screen-wrap h3 {
            margin: 0 0 8px;
            text-transform: uppercase;
            font-size: 14px;
            color: var(--green-dark);
            text-align: center;
            letter-spacing: .2px
        }

        .teacher-grid h3 {
            color: var(--orange)
        }

        .phone {
            width: 100%;
            aspect-ratio: 9/18.8;
            background: #fff;
            border: 2px solid #d3dbe5;
            border-radius: 28px;
            box-shadow: 0 10px 25px rgba(15,39,64,.08);
            overflow: hidden;
            position: relative;
            display: flex;
            flex-direction: column
        }

        .status {
            height: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 9px 18px 0;
            font-size: 10px;
            font-weight: 800
        }

        .topbar {
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 18px;
            border-bottom: 1px solid #eef2f6;
            font-size: 14px;
            font-weight: 900
        }

        .content {
            flex: 1;
            padding: 16px;
            overflow-y: auto
        }

        .bottom {
            height: 52px;
            border-top: 1px solid #eef2f6;
            display: grid;
            grid-template-columns: repeat(5,1fr);
            align-items: center;
            background: #fff
        }

        .navitem {
            text-align: center;
            font-size: 8.5px;
            color: #657184
        }

            .navitem b {
                display: block;
                font-size: 16px;
                line-height: 15px;
                color: var(--ink)
            }

            .navitem.active, .navitem.active b {
                color: var(--green)
            }

        .teacher .navitem.active, .teacher .navitem.active b {
            color: var(--orange)
        }

        .login-logo {
            display: block;
            width: 112px;
            margin: 18px auto 8px
        }

        .login-title {
            text-align: center;
            font-weight: 900;
            font-size: 18px;
            margin: 4px 0
        }

        .login-sub {
            text-align: center;
            color: var(--muted);
            font-size: 11px;
            margin-bottom: 24px
        }

        label {
            display: block;
            font-size: 11px;
            font-weight: 800;
            margin: 12px 0 5px
        }

        input, select, textarea {
            width: 100%;
            border: 1px solid var(--line);
            border-radius: 7px;
            padding: 10px;
            font-size: 11px;
            background: #fff
        }

        textarea {
            height: 72px;
            resize: none
        }

        .btn {
            border: 0;
            border-radius: 7px;
            color: #fff;
            padding: 11px 12px;
            font-size: 11px;
            font-weight: 900;
            background: var(--green);
            width: 100%;
            margin-top: 16px
        }

            .btn.orange {
                background: var(--orange)
            }

        .link {
            color: var(--green-dark);
            font-size: 10px;
            text-align: center;
            margin-top: 10px;
            font-weight: 800
        }

        .profile-row {
            display: flex;
            gap: 12px;
            align-items: center;
            margin-bottom: 14px
        }

        .avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: #e8eef3;
            display: grid;
            place-items: center;
            font-size: 24px;
            overflow: hidden
        }

        .small {
            font-size: 10px;
            color: var(--muted)
        }

        .name {
            font-size: 14px;
            font-weight: 900
        }

        .today {
            background: var(--green-soft);
            border-radius: 14px;
            padding: 13px;
            margin-bottom: 14px
        }

            .today h4, .card h4 {
                margin: 0 0 8px;
                font-size: 12px
            }

        .row-card {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            border: 1px solid #edf2f7;
            border-radius: 10px;
            margin-bottom: 9px;
            background: #fff
        }

            .row-card .emoji {
                width: 30px;
                height: 30px;
                border-radius: 8px;
                background: var(--green-soft);
                display: grid;
                place-items: center
            }

        .teacher .row-card .emoji {
            background: var(--orange-soft)
        }

        .row-card strong {
            font-size: 11px
        }

        .check {
            margin-left: auto;
            color: var(--green);
            font-weight: 900
        }

        .warn {
            margin-left: auto;
            color: var(--orange);
            font-weight: 900
        }

        .card {
            border: 1px solid #edf2f7;
            border-radius: 12px;
            padding: 13px;
            margin-bottom: 12px;
            background: #fff
        }

        .tag {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 8px;
            background: var(--green-soft);
            color: var(--green-dark);
            font-size: 9px;
            font-weight: 900
        }

            .tag.orange {
                background: var(--orange-soft);
                color: var(--orange)
            }

        .tabs {
            display: flex;
            border-bottom: 1px solid #edf2f7;
            margin-bottom: 12px;
            gap: 14px
        }

        .tab {
            font-size: 11px;
            padding-bottom: 9px;
            font-weight: 800;
            color: #7b8794
        }

            .tab.active {
                color: var(--green);
                border-bottom: 3px solid var(--green)
            }

        .teacher .tab.active {
            color: var(--orange);
            border-bottom-color: var(--orange)
        }

        .calendar-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 900;
            font-size: 13px;
            margin-bottom: 16px
        }

        .days, .dates {
            display: grid;
            grid-template-columns: repeat(7,1fr);
            text-align: center;
            gap: 5px;
            font-size: 9px
        }

            .dates span {
                padding: 7px 0;
                border-radius: 50%;
                font-weight: 800
            }

            .dates .active {
                background: var(--green);
                color: #fff
            }

        .menu-list div {
            font-size: 11px;
            margin: 8px 0;
            border-bottom: 1px solid #edf2f7;
            padding-bottom: 6px
        }

        .progress {
            width: 43px;
            height: 43px;
            border-radius: 50%;
            border: 5px solid var(--green);
            display: grid;
            place-items: center;
            font-size: 10px;
            font-weight: 900;
            margin-left: auto
        }

        .hero-img {
            height: 92px;
            border-radius: 10px;
            background: linear-gradient(135deg,#bfeac9,#f9d291);
            margin: 10px 0;
            display: grid;
            place-items: center;
            font-size: 38px
        }

        .pay-btn {
            background: var(--orange);
            color: #fff;
            border: 0;
            border-radius: 6px;
            padding: 8px 11px;
            font-size: 10px;
            font-weight: 900
        }

        .outline {
            background: #fff;
            color: var(--green-dark);
            border: 1px solid var(--green);
            border-radius: 6px;
            padding: 8px 11px;
            font-size: 10px;
            font-weight: 900
        }

        .price {
            margin-left: auto;
            font-weight: 900;
            font-size: 11px
        }

        .gallery {
            display: grid;
            grid-template-columns: repeat(2,1fr);
            gap: 8px
        }

        .photo {
            height: 76px;
            border-radius: 9px;
            background: linear-gradient(135deg,#d6f2dc,#ffe0b2);
            display: grid;
            place-items: center;
            font-size: 27px
        }

        .menu-line {
            display: flex;
            align-items: center;
            gap: 12px;
            border-bottom: 1px solid #edf2f7;
            padding: 11px 0;
            font-size: 12px
        }

            .menu-line span {
                width: 22px;
                text-align: center
            }

        .summary {
            display: grid;
            grid-template-columns: repeat(2,1fr);
            gap: 9px
        }

            .summary .card {
                text-align: center;
                margin: 0
            }

            .summary b {
                font-size: 20px;
                color: var(--green)
            }

        .teacher .summary b {
            color: var(--orange)
        }

        .radio-row {
            display: flex;
            gap: 6px;
            justify-content: space-between;
            margin: 10px 0
        }

            .radio-row span {
                width: 30px;
                height: 30px;
                border: 1px solid #d9e1ea;
                border-radius: 50%;
                display: grid;
                place-items: center;
                font-size: 10px
            }

            .radio-row .sel {
                background: var(--green);
                color: white;
                border-color: var(--green)
            }

        .teacher .radio-row .sel {
            background: var(--orange);
            border-color: var(--orange)
        }

        .footer-note {
            text-align: center;
            margin-top: 22px;
            color: #7b8794;
            font-weight: 700
        }

        @media(max-width:1200px) {
            .grid {
                grid-template-columns: repeat(3,1fr)
            }

            h1 {
                font-size: 26px
            }
        }

        @media(max-width:760px) {
            .poster {
                padding: 18px 12px
            }

            .grid {
                grid-template-columns: repeat(2,1fr);
                gap: 18px 12px
            }

            .header {
                gap: 12px
            }

            .logo {
                width: 110px
            }

            h1 {
                font-size: 20px
            }
        }

        @media(max-width:480px) {
            .grid {
                grid-template-columns: 1fr
            }

            .phone {
                max-width: 290px;
                margin: 0 auto
            }
        }
    
        /* ===== DEMO OVERRIDES ===== */
        body{background:#fff;}
        .poster{width:100%!important;max-width:100%!important;padding:0!important;background:none!important;margin:0!important;}
        .header,.section-label,.footer-note{display:none!important;}
        .screen-wrap>h3{display:none!important;}
        .grid{display:contents!important;}
        .status{display:none!important;}
        .screen-wrap{display:none;}
        .screen-wrap.active{position:fixed;inset:0;background:#fff;padding:0;display:flex;justify-content:center;align-items:stretch;}
        .screen-wrap.active .phone{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0;box-shadow:none;background:#fff;display:flex;flex-direction:column;}
        @media(min-width:761px){
            .screen-wrap.active .phone{width:390px;height:100vh;height:100dvh;margin:0 auto;}
        }
        .quick-links{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:14px;}
        .quick-link{text-align:center;padding:9px 4px 8px;border-radius:10px;background:var(--green-soft);color:var(--green-dark);font-size:9px;font-weight:800;cursor:pointer;}
        .quick-link b{display:block;font-size:18px;font-weight:400;line-height:1.2;margin-bottom:3px;}
        [data-goto]{cursor:pointer;}
        .back{cursor:pointer;}