:root{--primary:#1739de;--accent:#9aaef1;--soft:#edf1ff;--page:#f5f7fc;--surface:#fff;--text:#17213b;--muted:#63728a;--line:#e0e6f1;--radius:20px;--button-radius:12px;--nav-radius:14px;--bubble-radius:18px 18px 18px 5px;--cover:linear-gradient(135deg,#e6ecff,#f8faff);--shadow:0 8px 24px #1739de10;--tile-text:#fff;--tile-bg:var(--primary)}
:root[data-theme=ggbond]{--primary:#bc263a;--accent:#ffc549;--soft:#fff0e8;--page:#fff8f0;--text:#41202a;--muted:#876976;--line:#f0d4cd;--radius:24px 24px 24px 7px;--button-radius:16px 16px 16px 5px;--nav-radius:19px 19px 8px 8px;--bubble-radius:22px 22px 22px 5px;--cover:linear-gradient(125deg,#fff1e1 20%,#ffd5c5);--shadow:0 8px 22px #bc263a13;--tile-bg:linear-gradient(115deg,#bc263a,#e54b3e)}
:root[data-theme=ssru]{--primary:#255caa;--accent:#df72a6;--soft:#edf1fc;--page:#f9f5fa;--text:#203551;--muted:#68758e;--line:#dcddeb;--radius:5px 22px 5px 22px;--button-radius:6px 14px;--nav-radius:6px 16px;--bubble-radius:5px 18px 18px 18px;--cover:linear-gradient(120deg,#ebf2ff,#f9e2ef);--shadow:0 7px 18px #255caa10;--tile-bg:linear-gradient(105deg,#255caa,#577bc2)}
:root[data-theme=superq]{--primary:#2056a7;--accent:#e9af26;--soft:#eaf1fc;--page:#edf2f9;--text:#1a2d48;--muted:#5b6f8b;--line:#b9cce5;--radius:8px 25px 8px 25px;--button-radius:5px 17px;--nav-radius:5px 16px;--bubble-radius:4px 18px 4px 18px;--cover:linear-gradient(120deg,#d9e7fa,#f2f7ff);--shadow:4px 5px 0 #d5dfed;--tile-bg:linear-gradient(100deg,#133775,#2764bd)}
:root[data-theme=phoebe]{--primary:#ae326b;--accent:#f5c64d;--soft:#fff0f7;--page:#fff7fb;--text:#4b2840;--muted:#85677b;--line:#f2d5e4;--radius:28px 28px 12px 28px;--button-radius:30px;--nav-radius:50% 50% 15px 15px;--bubble-radius:24px 24px 7px 24px;--cover:linear-gradient(130deg,#fff0f8,#fde1ed);--shadow:0 8px 22px #ae326b0e;--tile-bg:linear-gradient(115deg,#ae326b,#d66091)}
:root[data-theme=daddy]{--primary:#2b7051;--accent:#a9cf63;--soft:#eef6e7;--page:#f5f8ee;--text:#2a4236;--muted:#627e6b;--line:#d3e2c6;--radius:30px 9px 30px 9px;--button-radius:24px 7px 24px 7px;--nav-radius:24px 6px;--bubble-radius:25px 6px 25px 6px;--cover:linear-gradient(125deg,#edf7df,#ddedcc);--shadow:0 7px 22px #2b705110;--tile-bg:linear-gradient(110deg,#2b7051,#588b53)}
:root[data-theme=bobby]{--primary:#7044a6;--accent:#a3cc61;--soft:#f3eefa;--page:#f7f3fc;--text:#3b2b55;--muted:#7a698d;--line:#ddd1ed;--radius:12px 30px 12px 12px;--button-radius:12px 22px 12px 12px;--nav-radius:14px 24px 14px 8px;--bubble-radius:12px 28px 12px 5px;--cover:linear-gradient(120deg,#eee3fc,#e4efd8);--shadow:0 7px 20px #7044a612;--tile-bg:linear-gradient(110deg,#7044a6,#9468c1)}
:root[data-theme=nailoong]{--primary:#985415;--accent:#ffcf42;--soft:#fff1c3;--page:#fffbeb;--text:#553a21;--muted:#86734e;--line:#edddb0;--radius:32px 22px 35px 22px;--button-radius:30px;--nav-radius:45% 45% 25% 25%;--bubble-radius:28px 28px 28px 9px;--cover:linear-gradient(120deg,#fff3c6,#ffe394);--shadow:0 7px 24px #b9811710;--tile-bg:linear-gradient(115deg,#ffe181,#ffcb3f);--tile-text:#553a21}
:root[data-theme=mihoo]{--primary:#166c80;--accent:#f3a35a;--soft:#e6f5f5;--page:#eff7f6;--text:#244853;--muted:#597f85;--line:#c9dfe1;--radius:12px;--button-radius:9px;--nav-radius:10px;--bubble-radius:8px 20px 20px 8px;--cover:linear-gradient(120deg,#dff1f2,#edf4ef);--shadow:0 7px 20px #166c8010;--tile-bg:linear-gradient(110deg,#166c80,#2a94a0)}
:root[data-theme=midnight]{color-scheme:dark;--primary:#c3b2ff;--accent:#88d8ec;--soft:#2a244c;--page:#15172b;--surface:#202239;--text:#f0edf9;--muted:#b2b1ca;--line:#3c3b58;--radius:22px;--button-radius:16px;--nav-radius:18px;--bubble-radius:20px 20px 20px 6px;--cover:linear-gradient(125deg,#28254b,#1f3344);--shadow:0 7px 22px #080a1e35;--tile-bg:linear-gradient(115deg,#584480,#435578);--tile-text:#fff}
html{color:var(--text);background:var(--page)}body{background:#e7eaf1}.phone{background:var(--page)}.phone header{background:var(--surface);border-color:var(--line)}.phone .brand .brand-line{color:var(--text)}.brand strong,.pagebar a,.price,.index,.section-head a,.link,.text-btn{color:var(--primary)}.phone .school{color:var(--text)}.en,.intro,.foot,.form-hint,.phone .card p,.phone .empty p,.price span,.row-link small,label,.order-id,.theme-motion p{color:var(--muted)}.brand span{color:var(--muted)}.card,.row-link,details,.pagebar a,.avatar-choice{background:var(--surface);border-color:var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.phone .row-link{min-height:66px}.btn{background:var(--primary);border-radius:var(--button-radius);color:white}.btn.secondary,.small-action,.tag,.status{background:var(--soft);color:var(--primary)}.notice{background:var(--soft);color:var(--text);border-radius:var(--bubble-radius);border:1px solid var(--line);position:relative}.notice:not(.error):after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);position:absolute;right:10px;top:10px}.notice.error{color:#b73137}.student-guide{background:var(--surface);color:var(--primary);border-color:var(--line);border-radius:var(--bubble-radius);box-shadow:var(--shadow)}.student-guide small{color:var(--muted)}select,input,textarea{background:var(--surface);color:var(--text);border-color:var(--line);border-radius:var(--button-radius);accent-color:var(--primary)}input:focus-visible,textarea:focus-visible,select:focus-visible{border-color:var(--primary);outline-color:color-mix(in srgb,var(--primary) 35%,transparent)}.phone nav{background:var(--surface);border-color:var(--line);padding-top:9px;isolation:isolate}.phone nav a{color:var(--muted);border-radius:var(--nav-radius);position:relative}.phone nav a.active{background:var(--soft);color:var(--primary)}.phone nav a .nav-icon{display:flex;align-items:center;justify-content:center;line-height:1;height:26px;margin-bottom:4px}.nav-icon svg{width:24px;height:24px}.phone nav a.active:before{content:"";position:absolute;width:22px;height:3px;top:-9px;left:calc(50% - 11px);background:var(--accent);border-radius:10px}.phone nav a.active .nav-icon svg{animation:icon-arrive .42s ease-out}.service-tile{background:var(--tile-bg);color:var(--tile-text);border-radius:var(--radius);box-shadow:var(--shadow);position:relative;overflow:hidden;min-height:108px;padding:24px;gap:10px;isolation:isolate}.service-tile h2{font-size:22px;position:relative;z-index:1}.service-tile .en{font-size:13px;color:inherit;opacity:.85}.service-tile:after{content:"";position:absolute;width:110px;height:110px;right:28px;top:-62px;transform:rotate(22deg);border:14px solid #ffffff14;border-radius:25px;z-index:-1}.service-tile.muted{background:var(--surface);color:var(--text);border:1px solid var(--line)}.service-tile.muted .enter{background:var(--soft);color:var(--primary)}.service-tile.muted .en{color:var(--muted)}.service-symbol{display:inline-flex;color:var(--accent);width:25px;height:25px;vertical-align:middle;margin-right:8px}.service-symbol svg{width:25px;height:25px}.enter{border:1px solid #ffffff28;flex-shrink:0}.theme-cover{min-height:180px;margin:2px 0 22px;padding:23px 21px;display:flex;position:relative;isolation:isolate;overflow:hidden;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:var(--radius);background:var(--cover);box-shadow:var(--shadow);gap:6px}.theme-cover:before{content:"";position:absolute;width:210px;height:210px;border:1px solid color-mix(in srgb,var(--primary) 16%,transparent);border-radius:50%;right:-45px;top:-65px;z-index:-1}.theme-cover-copy{position:relative;z-index:2;flex:1;min-width:0}.theme-kicker{display:block;letter-spacing:1.5px;font-weight:750;font-size:9px;color:var(--primary)}.theme-cover h1{font-size:25px;letter-spacing:0;margin:12px 0 8px;line-height:1.2}.theme-cover h1 span{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-top:6px}.theme-cover p{font-size:12px;line-height:1.5;margin:12px 0;color:var(--muted);max-width:200px}.theme-cover a{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--primary);padding:7px 12px;border:1px solid var(--line);border-radius:50px;background:var(--surface)}.theme-cover a svg{width:14px;height:14px}.theme-portrait{position:relative;width:114px;height:140px;flex:0 0 114px;display:flex;align-items:center;justify-content:center}.theme-portrait:before{content:"";position:absolute;width:103px;height:103px;border-radius:50%;background:color-mix(in srgb,var(--accent) 28%,transparent);top:23px;left:5px;border:1px dashed color-mix(in srgb,var(--primary) 25%,transparent)}.theme-character{width:102px;height:126px;object-fit:contain;object-position:center;position:relative;z-index:1;animation:character-float 4.2s ease-in-out infinite;border-radius:26px;mix-blend-mode:multiply}.theme-vector{display:flex;align-items:center;justify-content:center;color:var(--primary)}.theme-vector svg{width:76px;height:76px}.theme-orbit{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--surface);color:var(--primary);width:30px;height:30px;border-radius:50%;box-shadow:var(--shadow);animation:badge-float 4s ease-in-out infinite}.theme-orbit svg{width:18px;height:18px}.orbit-one{right:-6px;top:8px}.orbit-two{left:-5px;bottom:12px;width:24px;height:24px;animation-delay:-2s;color:var(--primary);background:var(--accent)}.orbit-two svg{width:15px;height:15px}.theme-picker-intro{padding:8px 2px 16px}.theme-picker-intro h2{font-size:24px;margin:10px 0}.theme-picker-intro p{font-size:14px;color:var(--muted)}.theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:22px}.theme-choice{position:relative;padding:8px 8px 14px;border:2px solid var(--line);background:var(--surface);border-radius:18px;text-align:left;color:var(--text);overflow:hidden;transition:transform .18s,border-color .18s}.theme-choice.selected{border-color:var(--primary)}.theme-choice:active{transform:scale(.97)}.theme-mini{display:block;height:110px;background:linear-gradient(135deg,color-mix(in srgb,var(--preview-primary) 12%,#fff),color-mix(in srgb,var(--preview-accent) 26%,#fff));border-radius:12px;position:relative;overflow:hidden;margin-bottom:12px}.theme-mini-character{position:absolute;width:80px;height:94px;right:8px;bottom:2px;object-fit:contain;mix-blend-mode:multiply}.theme-mini .theme-vector{color:var(--preview-primary)}.theme-mini .theme-vector svg{width:52px;height:52px}.theme-mini-icon{position:absolute;color:var(--preview-primary);left:12px;top:15px}.theme-mini-icon svg{width:24px;height:24px}.theme-mini-bubble{position:absolute;left:10px;bottom:18px;width:43px;height:20px;background:var(--preview-primary);border-radius:10px 10px 10px 2px;box-shadow:0 5px 0 -1px var(--preview-accent)}.theme-choice-name{display:block;font-size:13px;font-weight:700;line-height:1.6}.theme-choice small{display:block;font-size:11px;color:var(--muted);line-height:1.55;margin-top:5px}.theme-picked{display:none;position:absolute;top:13px;left:13px;font-size:10px;padding:4px 7px;background:var(--primary);color:white;border-radius:10px}.theme-choice.selected .theme-picked{display:block}.theme-motion{padding:18px}.theme-motion h3{font-size:16px}.theme-motion p{font-size:12px}.motion-switch{display:flex;align-items:center;gap:10px;margin-top:16px}.theme-bubble-preview{display:flex;align-items:center;gap:12px;min-height:78px}.theme-bubble-preview>svg{width:30px;height:30px;flex-shrink:0;color:var(--primary)}.theme-bubble-preview .en{font-size:12px}#toast{background:var(--primary);color:#fff;border-radius:var(--bubble-radius);border:2px solid var(--accent)}#refresh{background:var(--surface);color:var(--primary)}.school-email-input span{color:var(--muted)}.avatar{background:var(--soft)}.avatar-choice.selected{border-color:var(--primary)}
/* Each character changes component geometry and decoration as well as colour. */
[data-theme=ggbond] .theme-cover{border-top:4px solid var(--accent)}[data-theme=ggbond] nav a.active:after{content:"• •";position:absolute;font-size:10px;letter-spacing:2px;bottom:0;left:calc(50% - 9px);color:var(--primary)}[data-theme=ggbond] .notice{border-left:4px solid var(--accent)}[data-theme=ggbond] .btn{box-shadow:0 4px 0 #8b1929}
[data-theme=ssru] .theme-cover{border-left:5px solid var(--accent)}[data-theme=ssru] .theme-cover:before{border-radius:0;transform:rotate(35deg);border-width:14px;opacity:.5}[data-theme=ssru] .theme-character{mix-blend-mode:normal;width:83px;height:114px}[data-theme=ssru] .service-tile.muted{border-left:4px solid var(--accent)}[data-theme=ssru] nav{border-top:3px solid var(--accent)}
[data-theme=superq] .card,[data-theme=superq] .service-tile{border-bottom:3px solid var(--line)}[data-theme=superq] .theme-cover:before{border-radius:4px;transform:rotate(45deg)}[data-theme=superq] .notice{border-left:4px solid var(--accent)}[data-theme=superq] .btn{box-shadow:3px 4px 0 #e9af26}
[data-theme=phoebe] .theme-portrait:before{border-radius:35% 60% 35% 60%;transform:rotate(30deg)}[data-theme=phoebe] .service-tile:after{border-radius:50%;border-style:dotted}[data-theme=phoebe] .theme-orbit{color:var(--primary);background:#fff8dc}[data-theme=phoebe] nav{border-top:2px dashed var(--line)}
[data-theme=daddy] .theme-cover:before{border-radius:65% 0 65% 0;transform:rotate(-15deg);background:#a9cf631c}[data-theme=daddy] .service-tile:after{border-radius:70% 0 70% 0}[data-theme=daddy] .theme-portrait:before{border-radius:70% 30% 65% 35%}[data-theme=daddy] nav a.active{border:1px solid var(--line)}
[data-theme=bobby] .theme-cover:before{width:140px;height:140px;top:-55px;border:18px solid #a3cc6133;border-radius:40px;transform:rotate(25deg)}[data-theme=bobby] .theme-orbit{border-radius:8px}[data-theme=bobby] .notice:after{width:9px;height:9px;border-radius:3px}[data-theme=bobby] nav a.active{box-shadow:2px 3px 0 var(--accent)}
[data-theme=nailoong] .theme-cover:before{border:20px solid #ffcf4233}[data-theme=nailoong] .theme-character{width:114px;height:140px}[data-theme=nailoong] .theme-portrait:before{border-radius:40% 50% 45% 55%;background:#ffd04b60}[data-theme=nailoong] .btn{background:var(--accent);color:var(--text);box-shadow:0 4px 0 #dca92f}[data-theme=nailoong] nav a.active{background:var(--accent);color:var(--text)}[data-theme=nailoong] .notice{border-bottom:3px solid #e9c669}[data-theme=nailoong] #toast{background:#ffe59e;color:var(--text)}
[data-theme=mihoo] .theme-cover{background-image:linear-gradient(#166c8009 1px,transparent 1px),linear-gradient(90deg,#166c8009 1px,transparent 1px),var(--cover);background-size:16px 16px,16px 16px,100% 100%}[data-theme=mihoo] .theme-orbit{border-radius:5px}[data-theme=mihoo] .service-tile.muted{border-left:4px solid var(--accent)}[data-theme=mihoo] .notice{border-style:dashed}
[data-theme=midnight] .theme-character{mix-blend-mode:normal}[data-theme=midnight] .theme-cover:before{border-style:dashed;border-color:#88d8ec55}[data-theme=midnight] .theme-orbit{box-shadow:0 0 12px #88d8ec22}[data-theme=midnight] .btn{color:#201b35}[data-theme=midnight] nav a.active{box-shadow:0 0 12px #c3b2ff12}[data-theme=midnight] .theme-mini-midnight{background:linear-gradient(130deg,#322851,#24415b)}[data-theme=midnight] .theme-picked{color:#201b35}
@keyframes character-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(1deg)}}@keyframes badge-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes icon-arrive{0%{transform:scale(.78)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after{animation:none!important;transition:none!important}.test-banner{padding:10px 15px;margin-bottom:14px;background:var(--soft);border:1px dashed var(--primary);color:var(--primary);border-radius:var(--bubble-radius);font-size:12px}
@media(max-width:360px){.theme-cover{padding:18px 16px}.theme-cover h1{font-size:22px}.theme-portrait{width:91px;flex-basis:91px}.theme-character{width:87px}.theme-mini{height:95px}.theme-choice-name{font-size:12px}.service-tile h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.empty-symbol{background:var(--soft);color:var(--primary)}details p,.loading,.theme-motion p{color:var(--muted)}.member{background:var(--cover);color:var(--text);border:1px solid var(--line);border-radius:var(--radius)}.member p,.member .en,.member small{color:var(--muted)}.level b{color:var(--primary)}.level{border-color:var(--line)}.profile-row{overflow-wrap:anywhere}.profile-row>div{min-width:0}.theme-choice:focus-visible{outline:3px solid var(--accent);outline-offset:3px}[data-theme=superq] .theme-orbit{animation:energy-pulse 3s ease-in-out infinite}[data-theme=phoebe] .theme-orbit{animation:star-twinkle 3s ease-in-out infinite}[data-theme=bobby] .theme-character{animation:smart-tilt 4s ease-in-out infinite}[data-theme=nailoong] .theme-character{animation:soft-bounce 4s ease-in-out infinite}[data-theme=mihoo] .theme-orbit{animation:lab-bubble 4s ease-in-out infinite}[data-theme=midnight] .theme-orbit{animation:star-twinkle 5s ease-in-out infinite}
@keyframes energy-pulse{0%,100%{box-shadow:0 0 0 0 #e9af2600}50%{box-shadow:0 0 0 4px #e9af2625}}@keyframes star-twinkle{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.12);opacity:1}}@keyframes smart-tilt{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(4deg) translateY(-3px)}}@keyframes soft-bounce{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(-5px) scale(1.03,.98)}}@keyframes lab-bubble{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px) rotate(8deg)}}
html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after{animation:none!important;transition:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}