:root { --bg:#f6f4ef; --ink:#17211d; --muted:#65706a; --green:#0f7a57; --dark:#16251f; --line:#e7e0d4; --card:#fff; --amber:#b4531a; }
* { box-sizing: border-box; }
body { margin: 0; background: #e9ece7; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
button { border: 0; cursor: pointer; }
.phone-shell { max-width: 430px; min-height: 100vh; margin: 0 auto; background: var(--bg); padding-bottom: 84px; box-shadow: 0 0 34px rgba(0,0,0,.08); }
.view { display: none; padding: 18px; } .view.active { display: block; }
.hero { margin: -18px -18px 0; padding: 22px 18px 18px; color: #fff; background: linear-gradient(160deg, #16251f 0%, #225642 68%, #d69c45 180%); }
.topline { display:flex; align-items:center; justify-content:space-between; gap: 14px; }
.eyebrow { display:inline-block; color:#aee0c9; font-size:12px; font-weight:800; letter-spacing:.04em; }
h1 { margin: 5px 0 0; font-size: 34px; line-height: 1.05; } h2 { margin:0; font-size:21px; }
.mini-btn, .back { height: 34px; border-radius: 8px; padding: 0 12px; background: rgba(255,255,255,.18); color:#fff; font-weight:800; }
.back { margin-bottom: 14px; background: var(--dark); }
.search { display:block; margin: 18px 0 14px; } .search input { width:100%; height:42px; border:0; border-radius:9px; padding:0 14px; background:#fff; }
.banner { min-height: 150px; border-radius: 12px; overflow: hidden; background:#fff; position:relative; color:#fff; }
.banner img { width:100%; height:170px; object-fit:cover; display:block; filter: brightness(.78); }
.banner .banner-text { position:absolute; left:16px; right:16px; bottom:14px; font-weight:900; font-size:20px; text-shadow:0 2px 12px rgba(0,0,0,.45); }
.banner small { display:block; margin-top:5px; font-size:13px; font-weight:500; }
.quick-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 16px 0 4px; }
.quick-grid button { min-height: 76px; border-radius: 10px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 800; font-size: 13px; }
.quick-grid span { display:flex; align-items:center; justify-content:center; width:34px; height:34px; margin:0 auto 7px; border-radius:50%; background:#e1f2eb; color:var(--green); }
.section { margin-top: 12px; } .section-head { display:flex; align-items:center; justify-content:space-between; margin: 18px 0 12px; } .section-head div { color:var(--green); font-size:13px; font-weight:800; }
.card, .course-item, .order-item { background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px; }
.course-list { display:grid; gap:12px; } .course-item { display:grid; grid-template-columns: 116px 1fr; gap:12px; padding:10px; }
.course-item img { width:116px; height:96px; object-fit:cover; border-radius:8px; } .course-title { font-size:16px; font-weight:900; margin-bottom:6px; }
.muted, p { color:var(--muted); line-height:1.55; } .price { color:var(--amber); font-weight:900; } .meta { display:flex; justify-content:space-between; align-items:center; margin-top:8px; font-size:13px; }
.cover { width:100%; height:210px; object-fit:cover; border-radius:12px; } .detail-title { font-size:25px; font-weight:900; margin:14px 0 8px; }
.pill { display:inline-flex; height:26px; align-items:center; padding:0 10px; border-radius:99px; background:#e1f2eb; color:var(--green); font-size:13px; font-weight:900; }
.info-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; margin:14px 0; } .info-grid div { background:#fff; border:1px solid var(--line); border-radius:9px; padding:12px; } .info-grid span { color:var(--muted); font-size:12px; display:block; } .info-grid strong { display:block; margin-top:4px; }
.primary { width:100%; height:46px; border-radius:9px; background:var(--green); color:#fff; font-weight:900; } .secondary { height:36px; border-radius:8px; padding:0 10px; background:#eee9df; color:var(--ink); font-weight:800; }
.form-card label { display:block; margin:13px 0; color:#39443e; font-weight:800; font-size:14px; } .form-card input { width:100%; height:42px; border:1px solid #d9d2c5; border-radius:8px; padding:0 11px; margin-top:7px; background:#fff; } .check { display:flex!important; gap:8px; align-items:flex-start; font-weight:500!important; color:var(--muted)!important; } .check input { width:auto; height:auto; margin-top:4px; }
.summary { margin: 12px 0; padding:12px; background:#f7f3eb; border-radius:8px; }
.order-list { display:grid; gap:12px; } .order-head { display:flex; justify-content:space-between; gap:10px; font-weight:900; } .order-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.profile { display:flex; align-items:center; gap:14px; margin-bottom:16px; } .avatar { width:60px; height:60px; border-radius:50%; background:var(--dark); color:#fff; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:900; }
.menu-list { display:grid; gap:10px; } .menu-list button { height:50px; border-radius:10px; background:#fff; border:1px solid var(--line); text-align:left; padding:0 15px; font-weight:800; }
.prose p { margin-bottom:0; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:20px; z-index:20; } .modal.hidden { display:none; } .modal-card { width:min(390px, 100%); background:#fff; border-radius:12px; padding:20px; position:relative; } .close { position:absolute; right:10px; top:8px; width:30px; height:30px; border-radius:50%; background:#f0ece4; font-size:20px; }
.fake-qr { width:210px; height:210px; margin:14px auto; display:flex; align-items:center; justify-content:center; text-align:center; padding:16px; background: repeating-linear-gradient(45deg, #16251f 0 10px, #fff 10px 20px); color:#fff; font-weight:900; text-shadow:0 2px 8px rgba(0,0,0,.5); }
.bottom-nav { position:fixed; left:50%; transform:translateX(-50%); bottom:0; width:min(430px, 100%); height:64px; padding-bottom: env(safe-area-inset-bottom); background:#fff; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4, 1fr); z-index:10; } .bottom-nav button { background:#fff; color:var(--muted); font-weight:800; }
@media (max-width: 430px) { .phone-shell { box-shadow:none; } }