:root{--card:#fff;--ink:#4a3768;--mut:#9a89b8;--pk:#ff7eb6;--pk2:#ffd9ec;--lv:#a58df0;--lv2:#eee8ff;--bl:#8fd0ff;--bl2:#e0f3ff;--gold:#f4c24a;--err:#e0527a;--h:330;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;color:var(--ink);font:600 15px/1.45 Quicksand,system-ui,sans-serif;min-height:100vh;background:radial-gradient(circle at 12% 8%,#ffd9ec,transparent 40%),radial-gradient(circle at 92% 18%,#dcd2ff,transparent 42%),radial-gradient(circle at 50% 100%,#cfeaff,transparent 55%),#fff3fa}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.7;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cpath d='M12 6l1.6 3.8L17.5 11l-3.9 1.6L12 16.5l-1.6-3.9L6.5 11l3.9-1.2z' fill='%23fff'/%3E%3Ccircle cx='62' cy='56' r='2.2' fill='%23fff'/%3E%3Cpath d='M66 14q0-5 5-5v10' stroke='%23d9c8ff' fill='none' stroke-width='1.6'/%3E%3C/svg%3E")}
#app{position:relative}
h2,h3{font-family:'M PLUS Rounded 1c',Quicksand,sans-serif;margin:.3em 0}
.ht{font:800 24px 'M PLUS Rounded 1c';background:linear-gradient(90deg,#ff5fa2,#a58df0,#5fb8f5);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #fff)}
.hd{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 12px;background:linear-gradient(#fff,#ffeaf5);border-bottom:3px solid var(--pk);position:sticky;top:env(safe-area-inset-top,0px);z-index:6;box-shadow:0 4px 14px #ff7eb633}
.logo{font:800 17px 'M PLUS Rounded 1c';flex:1 1 150px;color:var(--pk)}
.pill{background:#fff;border:2px solid var(--lv2);border-radius:20px;padding:2px 12px;font-weight:700;white-space:nowrap;font-size:13px}.pill.gd{background:linear-gradient(#fff6d0,#f8d36a);border-color:#e9b533}
.b{border:0;border-radius:22px;padding:8px 16px;background:#fff;color:var(--ink);border-bottom:3px solid var(--lv);font:800 13px Quicksand,sans-serif;cursor:pointer;transition:.15s}
.b:hover{transform:translateY(-2px)}.b:active{transform:translateY(1px)}.b.on,.b.p{background:linear-gradient(#ff9cc8,#ff6fae);color:#fff;border-bottom-color:#d94c8a;text-shadow:0 1px 0 #0003}.b.s{padding:4px 10px;font-size:12px}.b:disabled{opacity:.5}
.b:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--lv)}
.nav{position:fixed;left:0;right:0;bottom:0;display:flex;background:linear-gradient(#fff,#ffe6f3);border-top:3px solid var(--pk);z-index:8;padding:6px 4px calc(4px + env(safe-area-inset-bottom,0px));overflow-x:auto;box-shadow:0 -4px 14px #ff7eb633}
.nav button{flex:1 0 58px;border:0;background:none;display:flex;flex-direction:column;align-items:center;font:800 10px Quicksand;color:var(--mut);cursor:pointer;gap:2px}
.nav i{font-style:normal;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--lv2);font-size:17px;transition:.2s}.nav .on i{background:linear-gradient(135deg,#ff7eb6,#a58df0);color:#fff;transform:translateY(-6px) scale(1.15);box-shadow:0 4px 10px #ff7eb688}.nav .on{color:var(--pk)}
main{max-width:1100px;margin:0 auto;padding:6px 12px 110px}
.g{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.g2{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.c{background:var(--card);border-radius:20px;padding:12px;border:2px solid #fff;box-shadow:0 4px 16px #a58df033,inset 0 0 0 2px var(--pk2)}
.m{text-align:center;cursor:pointer}.m svg{width:70px;border-radius:14px}.st{font-size:12px;color:var(--mut)}
.bar{height:7px;background:var(--lv2);border-radius:5px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#ff9cc8,#a58df0)}
.big{font:800 22px 'M PLUS Rounded 1c'}
.mc{position:relative;border-radius:18px;overflow:hidden;cursor:pointer;border:3px solid var(--rb);box-shadow:0 4px 12px #a58df044;transition:.2s;background:#fff;--rb:#cfd6e8}.mc:hover{transform:translateY(-5px) rotate(-1deg)}
.mc svg{width:100%;display:block}.mc.rR{--rb:#8fd0ff}.mc.rSR{--rb:#c79bff;box-shadow:0 0 14px #c79bff99}.mc.rUR{--rb:#f4c24a;box-shadow:0 0 18px #f4c24acc}
.mc.rUR::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,#fff9 50%,transparent 60%);background-size:250% 100%;animation:sh 3s linear infinite;pointer-events:none}@keyframes sh{from{background-position:150% 0}to{background-position:-100% 0}}
.rb{position:absolute;top:6px;left:6px;font:800 12px 'M PLUS Rounded 1c';font-style:normal;padding:1px 8px;border-radius:10px;background:var(--rb);color:#fff;text-shadow:0 1px 0 #0004}
.np{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 6px;color:#fff;background:linear-gradient(transparent,#5a3a8acc);text-shadow:0 1px 2px #0006;display:flex;flex-direction:column;font-size:12px}.np b{font-size:14px}
.mini{display:flex;flex-direction:column;gap:2px;margin-top:3px}.mini u{display:block;height:3px;border-radius:2px;background:linear-gradient(90deg,#ff9cc8 var(--v),#ffffff55 var(--v))}
table{border-collapse:collapse;width:100%;font-size:13px}th,td{padding:5px 6px;text-align:left;border-bottom:1px solid var(--lv2)}th{cursor:pointer;color:var(--lv)}.wrap{overflow-x:auto}
input,select{font:inherit;padding:7px 10px;border-radius:14px;border:2px solid var(--lv2);background:#fff;color:var(--ink);max-width:100%}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:6px 0}.form{display:flex;justify-content:center;gap:8px;margin:4px 0}
.stage{background:radial-gradient(ellipse at 50% 0,#fff,transparent 60%),linear-gradient(#ffe3f1,#e6dcff)}
.slot{width:64px;height:84px;border:2px dashed var(--lv);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;cursor:pointer;background:#ffffffaa;transition:.2s;overflow:hidden}.slot:hover{transform:scale(1.07)}
.slot svg{width:54px;border-radius:10px}.slot.f{border-style:solid;background:#fff}.slot.sel{border-color:var(--pk);box-shadow:0 0 0 4px var(--pk2)}
.slot.ctr{border-color:var(--gold);background:#fff8d6;color:#6a5200;animation:pl 1.6s infinite alternate}@keyframes pl{to{box-shadow:0 0 16px var(--gold)}}
.ctrbox{text-align:center}.ctrbox svg{width:150px;border-radius:20px;border:4px solid var(--gold);box-shadow:0 0 20px #f4c24a99}
#toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);padding:10px 18px;border-radius:20px;color:#fff;font-weight:800;z-index:30;max-width:90vw;opacity:0;transition:.25s;pointer-events:none;border:2px solid #fff}
#toast.show{opacity:1}#toast.ok{background:#6bb58f}#toast.err{background:var(--err)}
.mod{position:fixed;inset:0;background:#4a2a7088;display:flex;align-items:center;justify-content:center;z-index:20;padding:12px;backdrop-filter:blur(3px)}
.mod>div{background:linear-gradient(#fff,#fff4fb);border:4px solid var(--pk2);outline:3px solid var(--pk);border-radius:26px;padding:16px;max-width:600px;width:100%;max-height:88vh;overflow:auto;animation:pop .25s}@keyframes pop{from{transform:scale(.85);opacity:0}}
.mod>div::before{content:"✦ ♪ ✦";display:block;text-align:center;color:var(--gold);letter-spacing:10px}
.pf{display:flex;gap:12px;flex-wrap:wrap}.pf>svg{width:190px;border-radius:18px;border:3px solid var(--gold)}.pf>div{flex:1 1 220px}
.title{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:16px;background:linear-gradient(160deg,#ffd9ec88,#e6dcff88,#d6efff88)}
.title h1{font:800 clamp(34px,9vw,60px) 'M PLUS Rounded 1c';margin:0;background:linear-gradient(90deg,#ff5fa2,#a58df0,#5fb8f5);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #fff)}
.trio{display:flex;gap:8px;align-items:flex-end}.trio svg{width:28vw;max-width:150px;border-radius:20px;border:3px solid #fff;box-shadow:0 6px 18px #a58df066}.trio svg:nth-child(2){width:34vw;max-width:185px;margin-bottom:14px}
.cover{width:110px;height:110px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;font:800 14px 'M PLUS Rounded 1c';text-align:center;padding:6px;border:3px solid #fff;box-shadow:0 4px 12px #0002;text-shadow:0 1px 3px #0005}
.cover.art{width:150px;height:150px;position:relative;font-size:17px;background:radial-gradient(circle at 25% 20%,#fff9,transparent 50%),var(--cc)}.cover.art i{position:absolute;font-style:normal;font-size:22px;opacity:.7}.cover.art i:nth-of-type(1){top:6px;right:10px}.cover.art i:nth-of-type(2){bottom:6px;left:10px}
.hero{position:relative;overflow:hidden;border-radius:26px;min-height:380px;margin:8px 0;border:4px solid #fff;box-shadow:0 8px 24px #a58df066;background:radial-gradient(circle at 70% 95%,hsl(var(--h) 100% 92%),transparent 55%),linear-gradient(hsl(calc(var(--h) + 200) 85% 82%),hsl(var(--h) 90% 90%) 70%,#fff)}
.hero::before{content:"";position:absolute;inset:-20%;background:conic-gradient(from 165deg at 72% 110%,transparent 0 8deg,#fff9 12deg,transparent 20deg 38deg,#fff7 43deg,transparent 52deg);animation:sw 6s ease-in-out infinite alternate}@keyframes sw{to{transform:rotate(7deg)}}
.hero .fp{position:absolute;right:-6px;bottom:0;width:min(60%,320px);-webkit-mask-image:linear-gradient(#000 85%,transparent);mask-image:linear-gradient(#000 85%,transparent)}.hero .fp svg{width:100%;display:block;filter:drop-shadow(0 4px 8px #0003)}
.hl{position:relative;z-index:2;padding:14px;max-width:62%}.plaque{background:#fffd;border:2px solid var(--pk);border-radius:16px;padding:6px 12px;display:inline-block}
.bub{background:#fff;border:2px solid var(--pk);border-radius:16px;padding:8px 12px;margin-top:10px;font-size:13px;position:relative}
.ban{border-radius:18px;min-height:92px;padding:12px 16px;color:#fff;font:800 20px 'M PLUS Rounded 1c';background:linear-gradient(120deg,hsl(var(--bh) 85% 66%),hsl(calc(var(--bh) + 60) 85% 76%));text-shadow:0 2px 0 #0003;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;border:3px solid #fff}
.ban::after{content:"✦ ♪ ✦";position:absolute;right:10px;top:2px;font-size:34px;opacity:.3;letter-spacing:6px}
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}.qa button{border:0;border-radius:16px;padding:10px 2px;background:#fff;border-bottom:4px solid var(--lv);font:800 12px Quicksand;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:.15s}.qa button:hover{transform:translateY(-3px)}
.qa i{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-style:normal;font-size:22px;color:#fff;background:linear-gradient(135deg,var(--pk),var(--lv))}
.ms{list-style:none;padding:0;margin:0}.ms li{padding:3px 0}.ok{color:#3c9a6c}
.cr{display:grid;grid-template-columns:minmax(230px,300px) 1fr;gap:12px;align-items:start}.cprev{text-align:center}.cprev select{width:100%;margin-bottom:6px}.cprev svg{width:min(100%,260px)}@media(min-width:701px){.cprev{position:sticky;top:70px}}@media(max-width:700px){.cr{grid-template-columns:1fr}.cprev svg{width:170px}}
.tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px}.tabs .b{flex:0 0 auto}.th{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}.tb{border:3px solid var(--lv2);border-radius:14px;background:#fff;padding:3px;cursor:pointer;font:700 10px Quicksand;color:var(--ink);display:flex;flex-direction:column;align-items:center;width:78px;transition:.15s}.tb svg{border-radius:10px;max-width:100%;height:auto}.tb.on{border-color:var(--pk);box-shadow:0 0 0 3px var(--pk2)}.tb:hover{transform:translateY(-2px)}.tb small{line-height:1.1;margin-top:2px;text-align:center}
.sw{width:36px;height:36px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--lv2);cursor:pointer;font:800 12px Quicksand;color:var(--mut)}.sw.on{box-shadow:0 0 0 3px var(--pk)}
.cs{display:grid;grid-template-columns:230px minmax(0,1fr) 300px;gap:10px;align-items:start}.cl,.cr2{max-height:80vh;overflow:auto}.cvw{width:min(100%,560px);margin:0 auto 8px;border:4px solid #fff;border-radius:12px;box-shadow:0 6px 20px #a58df066;touch-action:none;background:#fff}.cvw.th{width:120px}#cv{touch-action:none;width:100%;cursor:grab}.rs{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));max-height:240px;overflow:auto}.ly{display:flex;justify-content:space-between;align-items:center;gap:4px;padding:3px 6px;border-radius:10px;font-size:12px;cursor:pointer;flex-wrap:wrap}.ly.on{background:var(--pk2)}@media(max-width:1000px){.cs{grid-template-columns:1fr}.cmid{order:-1}.cl,.cr2{max-height:none}}
.fr{display:flex;overflow-x:auto}.fr>div{display:flex;gap:6px;margin:0 auto;padding:2px}
.tag{display:inline-block;background:var(--lv2);border-radius:12px;padding:1px 9px;margin:2px 3px 2px 0;font:800 11px Quicksand}.tag.rrUR{background:linear-gradient(135deg,#ffe28a,#ff9fd0)}.tag.rrSR{background:#e3d3ff}.tag.rrR{background:#d2ecff}.tag.rrN{background:#e8e8ee}.sr{display:grid;grid-template-columns:104px 28px 1fr auto;gap:6px;align-items:center;margin:3px 0;font-size:13px}.fan{font-size:15px;margin:2px 0}.fan b{font:800 24px 'M PLUS Rounded 1c';color:var(--pk)}
.act{max-width:130px;font-size:11px;margin-top:4px}
.hr{padding:5px 2px;border-bottom:1px solid var(--lv2)}.hr:last-child{border-bottom:0}
.frh{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;margin:8px 0 2px}.pt{width:100%}.pt td{padding:3px 6px;vertical-align:top}.pt td:first-child{color:var(--mut);font-size:12px;width:110px}
.hsm{display:inline-flex;flex-direction:column;align-items:center;font-size:10px;gap:2px;margin:2px}.hsm select{font-size:10px;padding:2px 4px;max-width:96px}.hsr{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
details summary{cursor:pointer}
.rsmap{overflow-x:auto;-webkit-overflow-scrolling:touch}.rsmhint{display:none}@media(max-width:700px){.rsmhint{display:block}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}