:root{color-scheme:light;--teal: #00a9ad;--teal-dark: #00878b;--ink: #172033;--muted: #5b667a;--line: #dce3ef}*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%}body{background:#f3f6fb;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}button{font:inherit;cursor:pointer}input{font:inherit}.page{min-height:100vh;display:flex;flex-direction:column}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:12px clamp(16px,5vw,40px);background:#fff;border-bottom:1px solid var(--line)}.logo{height:40px;width:auto;display:block}.brand{font-size:clamp(1.05rem,2.5vw,1.3rem);font-weight:800;letter-spacing:.02em;color:var(--ink);white-space:nowrap}.card{width:min(640px,100%);margin:24px auto 8px;padding:clamp(20px,4vw,32px);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 36px #20355914}h1{font-size:clamp(1.2rem,3.5vw,1.45rem);letter-spacing:-.01em}.hint{margin:6px 0 18px;color:var(--muted);font-size:.92rem}.course-list{display:grid;gap:10px}.course{display:grid;gap:4px;text-align:left;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;background:#fbfdff;transition:border-color .15s ease,background .15s ease}.course:active,.course:hover{border-color:var(--teal);background:#f0fbfb}.course-name{font-weight:700;font-size:1.02rem}.course-sample{color:var(--muted);font-size:.82rem}.field{display:block;margin-bottom:16px}.field-label{display:block;margin-bottom:8px;font-weight:600;font-size:.95rem}.field input{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:11px;outline:none;background:#fbfdff}.field input:focus{border-color:var(--teal)}.width-row{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}.width-row input{max-width:160px}.quick{display:flex;gap:8px;flex-wrap:wrap}.chip{padding:10px 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font-size:.9rem}.chip.on{border-color:var(--teal);color:var(--teal);font-weight:700}.error{margin:4px 0 12px;color:#c2453c;font-size:.9rem}.primary{display:block;width:100%;margin-top:6px;padding:15px;border:none;border-radius:12px;background:var(--teal);color:#fff;font-size:1.05rem;font-weight:800;text-align:center;text-decoration:none}.primary:hover{background:var(--teal-dark)}.primary:disabled{background:#9fd4d6;cursor:not-allowed}.as-btn{margin-top:14px}.ghost{display:block;width:100%;margin-top:10px;padding:12px;border:none;border-radius:12px;background:transparent;color:var(--muted);font-size:.95rem}.ghost:hover{color:var(--ink)}.banner-text{margin:8px 0 16px;padding:12px 14px;background:#f0fbfb;border-radius:10px;color:var(--teal-dark);font-weight:600;font-size:.98rem;line-height:1.6;word-break:break-all}.preview{position:relative;border-radius:12px;overflow:hidden;background:var(--teal);cursor:zoom-in;margin-bottom:12px}.preview img{display:block;width:100%;height:auto}.preview-tip{position:absolute;right:8px;bottom:8px;padding:5px 10px;border-radius:999px;background:#00000073;color:#fff;font-size:.75rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.spec{margin:4px 0 6px;color:var(--muted);font-size:.92rem;line-height:1.7}.lightbox{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;background:#0a1014eb;overflow:hidden}.lightbox img{flex:1;min-height:0;width:100%;object-fit:contain}.lightbox-bar{display:flex;align-items:center;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#ffffff0f}.lightbox-bar span{flex:1;color:#cfe3e4;font-size:.82rem}.lightbox-bar .primary{width:auto;margin:0;padding:10px 22px}.lightbox-bar .ghost{width:auto;margin:0;color:#9fb3b8}.foot{margin-top:auto;padding:18px 16px calc(24px + env(safe-area-inset-bottom));text-align:center;color:#8a94a8;font-size:.82rem}