/* Fun學奇機 2026-09 redesign: portal (login, home zones, toy-box lists, shelf, teacher). Loaded after fun-portal.css. */
:root{--fp-leaf:#76C95D;--fp-leaf2:#8FDB74;--fp-deep:#28634D;--fp-shadow:#4E9A3E;--fp-cream:#FFF8E9;--fp-sky:#78CDE8;--fp-sun:#FFD166;--fp-sun-deep:#E8A92C;--fp-coral:#F58E80;--fp-ink:#2F3A33;--fp-ink2:#5B6A5F;--fp-line:#E6DCC4}
html body.fun-portal{background:#E4F2DB!important;padding:0!important;margin:0;color:var(--fp-ink)}
html body.fun-portal .portal-machine{position:fixed!important;inset:10px!important;width:auto!important;height:auto!important;max-width:none!important;margin:0!important;border:0!important;border-radius:36px!important;padding:64px 12px 12px!important;display:flex!important;flex-direction:column;
 background:radial-gradient(120% 60% at 18% 0%,#A6E88C 0,transparent 55%),linear-gradient(180deg,var(--fp-leaf2),var(--fp-leaf) 45%,#67BB50)!important;
 box-shadow:inset 0 3px 0 rgba(255,255,255,.65),inset 0 -7px 0 var(--fp-shadow),0 6px 0 var(--fp-deep),0 16px 32px rgba(40,99,77,.25)!important}
/* bezel */
html body.fun-portal .topbar{position:absolute!important;left:16px;right:16px;top:8px;height:48px;display:flex!important;align-items:center;gap:12px;padding:0!important;margin:0!important;background:none!important;border:0!important;box-shadow:none!important;max-width:none!important}
html body.fun-portal .topbar .brand{height:46px;display:flex;align-items:center;padding:0 16px 0 8px;background:var(--fp-cream);border-radius:24px;box-shadow:0 3px 0 var(--fp-shadow),inset 0 -2px 0 #EBDDBE;text-decoration:none;flex:none}
html body.fun-portal .topbar .where{flex:1;min-width:0;color:#fff;font-weight:900;font-size:20px;text-shadow:0 2px 0 var(--fp-shadow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:1px}
html body.fun-portal #nav{display:flex;gap:10px;margin:0!important}
html body.fun-portal #nav[hidden]{display:none!important}
html body.fun-portal .topbar .key{height:44px;min-height:44px;padding:0 14px;border:0!important;border-radius:22px!important;background:linear-gradient(#FFFFFF,#F4F1E6)!important;color:var(--fp-deep)!important;font-weight:900;font-size:16px;display:inline-flex;align-items:center;gap:6px;box-shadow:0 4px 0 var(--fp-shadow),inset 0 -3px 0 #E3DDC9!important;transition:transform .1s,box-shadow .1s}
html body.fun-portal .topbar .key[hidden]{display:none!important}
html body.fun-portal .topbar .key i{font-style:normal;font-size:18px}
html body.fun-portal .topbar .key:active{transform:translateY(3px);box-shadow:0 1px 0 var(--fp-shadow)!important}
/* screen */
html body.fun-portal .portal-machine>main{flex:1;min-height:0;overflow:auto;position:relative;background:var(--fp-cream)!important;border-radius:26px;margin:0!important;padding:0!important;max-width:none!important;box-shadow:inset 0 3px 8px rgba(40,99,77,.28),0 0 0 3px #5FAF48}
html body.fun-portal .portal-machine>footer{color:#fff!important;text-shadow:0 1px 0 var(--fp-shadow);font-size:12px;padding:6px 0 0!important;text-align:center}
html body.fun-portal .portal-machine>footer .brand-word{color:#fff!important}
html body.fun-portal #status:empty{display:none}
html body.fun-portal #status{margin:12px 20px;font-weight:900}

/* ── login ── */
html body[data-screen=login] .portal-machine{padding-top:12px!important}
html body[data-screen=login] .topbar{display:none!important}
html body.fun-portal #login{position:absolute;inset:0;display:grid!important;grid-template-columns:1.1fr minmax(380px,470px);gap:28px;padding:34px 48px 30px;align-items:center;max-width:none!important;margin:0!important;
 background:linear-gradient(180deg,rgba(207,240,250,.95) 0,rgba(234,248,242,.7) 45%,rgba(255,248,233,0) 70%),url(/shared/funpad/forest.jpg) center bottom/cover!important}
html body.fun-portal #login[hidden]{display:none!important}
html body.fun-portal #login .welcome-art{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;text-align:left!important;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
html body.fun-portal #login .welcome-art h1{font-size:40px!important;line-height:1.3;color:var(--fp-deep)!important;text-shadow:0 3px 0 #fff;margin:6px 0 0!important}
html body.fun-portal #login .slogan{display:inline-flex;padding:8px 18px;border-radius:999px;background:var(--fp-sun);font-size:20px;font-weight:900;color:#5A3A00;box-shadow:0 4px 0 var(--fp-sun-deep)}
html body.fun-portal #login .parade{display:flex;align-items:flex-end;gap:16px;margin-top:10px}
html body.fun-portal #login .pal{display:flex;flex-direction:column;align-items:center;gap:6px;animation:fp-idle 3.2s ease-in-out infinite}
html body.fun-portal #login .pal:nth-child(2){animation-delay:.5s}html body.fun-portal #login .pal:nth-child(3){animation-delay:1s}html body.fun-portal #login .pal:nth-child(4){animation-delay:1.5s}
html body.fun-portal #login .pal img{width:104px;height:104px;object-fit:contain;filter:drop-shadow(0 6px 0 rgba(40,60,30,.12))}
html body.fun-portal #login .sign{background:#fff;border-radius:16px;padding:8px 14px;font-size:18px;font-weight:900;box-shadow:0 4px 0 var(--fp-line);white-space:nowrap}
html body.fun-portal #login .sign b{font-size:21px}
html body.fun-portal .login-card{position:relative;background:#FFFDF7!important;border-radius:32px!important;padding:30px 34px 24px!important;border:4px solid #fff!important;box-shadow:0 8px 0 #E5D7B6,0 24px 50px rgba(40,70,50,.18)!important}
html body.fun-portal .login-card .login-host{position:absolute;right:-16px;top:-30px;width:90px;height:90px;object-fit:contain;transform:rotate(8deg)}
html body.fun-portal .login-card h2{font-size:30px!important;color:var(--fp-deep)!important;margin:0!important}
html body.fun-portal .login-card>p{font-size:18px!important;color:var(--fp-ink2)!important}
html body.fun-portal .login-card label{font-size:19px!important;font-weight:900}
html body.fun-portal .login-card input:not([type=checkbox]){height:58px!important;border-radius:16px!important;border:3px solid #D9CFB5!important;font-size:20px!important;padding:0 16px!important;background:#fff!important}
html body.fun-portal .login-card input:not([type=checkbox]):focus{border-color:var(--fp-sky)!important;box-shadow:0 0 0 5px #CFEFF9!important;outline:0}
html body.fun-portal .login-card .inline{min-height:44px;display:flex;align-items:center;gap:10px}
html body.fun-portal .login-card .inline input{width:24px;height:24px;accent-color:var(--fp-leaf)}
html body.fun-portal #login-error:not(:empty){display:flex;align-items:center;gap:10px;background:#FFF0ED url(/shared/funpad/legends/36.png) 10px center/40px no-repeat;color:#9E3A30;border-radius:16px;padding:10px 14px 10px 58px;font-size:17px;font-weight:900}
html body.fun-portal #login-form.bad-cred input:not([type=checkbox]){border-color:var(--fp-coral)!important}
html body.fun-portal .login-card .primary{height:64px!important;border:0!important;border-radius:18px!important;font-size:22px!important;font-weight:900;background:linear-gradient(#8FDB74,var(--fp-leaf))!important;color:#123A2C!important;box-shadow:0 5px 0 var(--fp-shadow)!important}
html body.fun-portal .login-card.waiting input,html body.fun-portal #login-form.waiting input{opacity:.6}
html body.fun-portal .login-card .fine{font-size:15px!important;text-align:center;color:var(--fp-ink2)!important}
.logo-new.big{margin-bottom:4px}

/* ── catalog heading ── */
html body.fun-portal #catalog{padding:18px 26px 26px!important;max-width:none!important;margin:0!important}
html body.fun-portal #catalog[data-view=home]{background:linear-gradient(180deg,#D7F2FB 0,#F2FAEE 40%,var(--fp-cream) 100%);min-height:100%}
html body.fun-portal #catalog .section-heading{display:flex!important;flex-direction:row-reverse;justify-content:flex-end!important;align-items:center;gap:16px;background:none!important;border:0!important;padding:0 0 10px!important;box-shadow:none!important;margin:0!important}
html body.fun-portal #catalog .section-heading img{width:82px!important;height:82px!important;object-fit:contain;animation:fp-idle 3.2s ease-in-out infinite}
html body.fun-portal #catalog .section-heading .eyebrow{display:none}
html body.fun-portal #catalog .section-heading h1{font-size:32px!important;color:var(--fp-deep)!important;margin:0!important}
html body.fun-portal #catalog .section-heading p{font-size:19px!important;color:var(--fp-ink2)!important;margin:4px 0 0!important}
html body.fun-portal .catalog-back{margin:0 0 10px!important}
html body.fun-portal #category-back{min-height:48px;border-radius:999px!important;background:#fff!important;border:0!important;font-weight:900;font-size:17px;padding:0 18px;box-shadow:0 4px 0 var(--fp-line),inset 0 0 0 2px var(--fp-line)!important}
html body.fun-portal .lesson-note{display:none!important}
/* ── home zones ── */
.fp-zones{display:grid!important;grid-template-columns:1.55fr 1fr;grid-template-rows:auto auto;gap:18px}
.fp-zone{position:relative;border-radius:30px;padding:16px 18px 18px;box-shadow:0 6px 0 rgba(0,0,0,.06)}
.fp-zone.play{grid-row:span 2;background:linear-gradient(#FFF5D6,#FFEBC0)}.fp-zone.think{background:linear-gradient(#DFF4FB,#C9ECF7)}.fp-zone.read{background:linear-gradient(#FFE9E4,#FDDAD2)}
.fp-ztitle{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:inherit}
.fp-ztitle b{font-size:24px}.fp-ztitle small{font-size:16px;font-weight:900;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.75)}
.fp-doors{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;grid-auto-rows:1fr}
.fp-zone.think .fp-doors{grid-template-columns:repeat(2,1fr)}.fp-zone.read .fp-doors{grid-template-columns:1fr}
.fp-door{position:relative;display:flex;flex-direction:column;border-radius:24px;background:#fff;text-decoration:none;color:var(--fp-ink);box-shadow:0 5px 0 rgba(0,0,0,.08);overflow:hidden;transition:transform .15s}
.fp-door:hover,.fp-door:focus-visible{transform:translateY(-4px)}
.fp-door:active{transform:translateY(2px)}
.fp-stage{position:relative;display:block;height:170px;overflow:hidden}
.fp-zone.think .fp-stage{height:150px}.fp-door.read .fp-stage{height:220px}
.fp-label{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px 12px}
.fp-label b{font-size:20px;white-space:nowrap}.fp-count{font-size:15px;font-weight:900;color:var(--fp-ink2);white-space:nowrap}
.fp-go{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--fp-leaf);color:#fff;font-size:20px;font-weight:900;box-shadow:0 3px 0 var(--fp-shadow)}
.st-memory{background:#E9F1FF}.st-hide{background:#F3ECFF}.st-connect{background:#E8F7FF}.st-twins{background:#FFEFF4}.st-different{background:#EEF8E4}.st-maze{background:#FFF6D8}.st-focus{background:#E4F6FB}.st-storybook{background:#FFE3DC}
.fp-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fp-char{position:absolute;object-fit:contain;filter:drop-shadow(0 5px 0 rgba(40,60,30,.12))}
.fp-card{position:absolute;width:74px;height:104px;border-radius:12px;border:3px solid #6077B0;box-shadow:0 4px 0 #B8C6EA;object-fit:cover;background:#fff}
.fp-card.face{display:grid;place-items:center;border-color:#A7BD69;background:#FFFEF6}.fp-card.face img{width:80%;height:80%;object-fit:contain}
.fp-stamp{position:absolute;width:62px;height:62px;border-radius:50%;border:5px solid #E0457B;display:grid;place-items:center;font-size:32px;font-weight:900;background:rgba(255,255,255,.85)}
.fp-svg{position:absolute;inset:0;width:100%;height:100%}
.fp-heart{position:absolute;left:50%;top:46px;translate:-50% 0;font-size:40px}
.fp-tile{position:absolute;top:40px;width:62px;height:62px;border-radius:16px;background:#fff;display:grid;place-items:center;font-size:36px;font-weight:700;box-shadow:0 4px 0 #E4D9C3}
.fp-tile.odd{box-shadow:0 0 0 4px var(--fp-coral),0 4px 0 #E4D9C3}
.fp-maze{position:absolute;left:50%;top:6px;height:88%;translate:-50% 0}
.fp-spark{position:absolute;color:var(--fp-sun);font-size:22px;text-shadow:0 2px 0 var(--fp-sun-deep)}
.fp-chip{position:absolute;left:12px;top:12px;background:#fff;border-radius:999px;padding:5px 12px;font-weight:900;font-size:15px}
.fp-hint{position:absolute;right:22px;bottom:18px;display:flex;align-items:flex-end;gap:8px}
.fp-hint img{width:92px;animation:fp-idle 3.2s ease-in-out infinite}
.fp-bubble{background:#fff;border-radius:20px;padding:10px 16px;font-size:17px;font-weight:900;box-shadow:0 4px 0 var(--fp-line);line-height:1.4}
/* ── toy-box list ── */
.fp-list{display:block!important}
.fp-jump{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 6px}
.fp-jump a{min-height:44px;display:inline-flex;align-items:center;gap:6px;padding:0 16px;border-radius:999px;background:#fff;font-weight:900;font-size:16px;text-decoration:none;color:var(--fp-ink);box-shadow:inset 0 0 0 2px var(--fp-line)}
.fp-jump a small{font-size:13px;background:#EAF7DF;border-radius:999px;padding:1px 8px;color:var(--fp-deep)}
.fp-series{font-size:21px;margin:18px 0 10px;color:var(--fp-deep);scroll-margin-top:10px}
.fp-boxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin-bottom:10px}
.fp-box{position:relative;background:#fff;border-radius:26px;box-shadow:0 6px 0 #E9DDC2;display:flex;flex-direction:column;overflow:hidden}
.fp-window{position:relative;height:168px;margin:10px 10px 0;border-radius:18px;overflow:hidden;background:#F4F7FB;box-shadow:inset 0 0 0 3px #EEF0F4}
.fp-sheet{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.fp-window.cardish .fp-sheet{object-fit:contain;background:#E9F1FF}
.fp-peek{position:absolute;right:6px;bottom:-4px;width:62px;height:62px;object-fit:contain;filter:drop-shadow(0 3px 0 rgba(0,0,0,.12))}
.fp-meta{padding:10px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.fp-meta h2{font-size:20px;line-height:1.3;margin:0}
.fp-zy{font-size:21px;letter-spacing:3px;color:#1E2520}
.fp-skill{font-size:15px;color:var(--fp-ink2);font-weight:900}
.fp-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.fp-done{font-size:14px;font-weight:900;color:var(--fp-ink2);display:flex;align-items:center;gap:6px}
.fp-star{display:inline-block;width:20px;height:20px;border-radius:50%;background:var(--fp-sun);box-shadow:0 2px 0 var(--fp-sun-deep)}
html body.fun-portal .fp-box .play-link,html body.fun-portal .fp-shelf .play-link{min-height:52px;display:inline-flex;align-items:center;padding:0 18px;border-radius:18px!important;background:linear-gradient(#8FDB74,var(--fp-leaf))!important;color:#123A2C!important;font-weight:900;font-size:18px;text-decoration:none;box-shadow:0 5px 0 var(--fp-shadow)!important;border:0!important;white-space:nowrap}
.fp-box.locked{background:#F7F3EA}
.fp-pending{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;color:#A9A487;letter-spacing:6px}
/* ── storybook shelf ── */
html body.fun-portal #catalog[data-view=shelf]{background:linear-gradient(#FFF3DF,#FFE6C9);min-height:100%}
.fp-shelf{position:relative;display:grid;grid-template-columns:minmax(260px,520px) 1fr;gap:28px;align-items:end;padding:10px 40px 48px;max-width:1100px;margin:0 auto}
.fp-book{width:100%;border-radius:18px 26px 26px 18px;box-shadow:-10px 0 0 #3D6BC8,0 14px 26px rgba(80,50,20,.25);transform:rotate(-2deg);position:relative;z-index:1}
.fp-shelf-info{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding-bottom:30px}
.fp-shelf-info h2{font-size:28px;color:var(--fp-deep);margin:0}.fp-shelf-info p{font-size:19px;margin:0}
.fp-reader{position:absolute;bottom:40px;width:92px;z-index:2}.fp-reader.l{left:0}.fp-reader.r{right:0}
.fp-wood{position:absolute;left:0;right:0;bottom:22px;height:26px;border-radius:12px;background:linear-gradient(#D69A5B,#B97A3C);box-shadow:0 8px 0 #8E5A27}
/* ── empty ── */
html body.fun-portal #no-games{border-radius:26px!important;background:#fff url(/shared/character-blue.png) 24px center/90px no-repeat!important;padding:24px 24px 24px 130px!important;border:0!important;box-shadow:0 5px 0 var(--fp-line)!important}
/* ── teacher ── */
html body.fun-portal #admin{padding:18px!important;background:#F7F8F2;min-height:100%;max-width:none!important;margin:0!important}
html body.fun-portal .admin-side{background:#fff!important;border:0!important;border-radius:22px!important;box-shadow:0 3px 0 #E4E6DA!important}
html body.fun-portal .admin-side button{min-height:52px!important;border-radius:14px!important;font-size:17px!important;font-weight:900;border:0!important;background:#F4F6EE!important}
html body.fun-portal .admin-side button:first-of-type{background:var(--fp-leaf)!important;color:#fff!important}
html body.fun-portal #admin .section-heading{background:none!important;border:0!important;box-shadow:none!important}
html body.fun-portal #admin h1{color:var(--fp-deep)!important;font-size:30px!important}
html body.fun-portal .admin-summary>div{background:#fff!important;border:0!important;border-radius:20px!important;box-shadow:0 3px 0 #E4E6DA!important}
html body.fun-portal .admin-summary strong{color:var(--fp-deep)!important}
html body.fun-portal .primary{background:linear-gradient(#8FDB74,var(--fp-leaf))!important;color:#123A2C!important;border:0!important;border-radius:16px!important;box-shadow:0 4px 0 var(--fp-shadow)!important;font-weight:900}
html body.fun-portal .table-wrap{border:0!important;border-radius:20px!important;box-shadow:0 3px 0 #E4E6DA!important}
html body.fun-portal th{background:#EEF6E6!important;color:var(--fp-deep)!important}
html body.fun-portal dialog{border-radius:28px!important;border:0!important;background:#FFFDF7!important}
@keyframes fp-idle{50%{translate:0 -6px}}
/* ── tablet ── */
@media(max-width:1100px),(max-height:700px){
 html body.fun-portal .portal-machine{inset:4px!important;border-radius:28px!important;padding:58px 8px 8px!important}
 html body.fun-portal .topbar{left:10px;right:10px}html body.fun-portal .topbar .key span{display:none}html body.fun-portal .topbar .key{width:44px;padding:0;justify-content:center}html body.fun-portal .topbar .where{font-size:17px}
 html body.fun-portal #login{grid-template-columns:1fr minmax(340px,420px);padding:22px 26px;gap:18px}html body.fun-portal #login .welcome-art h1{font-size:30px!important}html body.fun-portal #login .pal img{width:78px;height:78px}html body.fun-portal #login .sign{font-size:15px}
 html body.fun-portal #catalog{padding:12px 16px 20px!important}
 .fp-zones{grid-template-columns:1fr}.fp-zone.play{grid-row:auto}.fp-stage{height:140px}.fp-hint{display:none}
}
@media(max-width:700px){
 html body.fun-portal #login{grid-template-columns:1fr;overflow:auto;align-content:start;padding:16px}.parade{display:none!important}
 .fp-doors,.fp-zone.think .fp-doors{grid-template-columns:repeat(2,1fr)}.fp-label b{font-size:17px}.fp-go{width:38px;height:38px}
 .fp-shelf{grid-template-columns:1fr;padding:10px 20px 40px}
}
@media(prefers-reduced-motion:reduce){.fp-door,.fun-portal *{animation:none!important;transition:none!important}}
html body.fun-portal #catalog .section-heading>img{display:block!important}
html body.fun-portal .topbar{right:20px}
html body.fun-portal #nav{flex:none}
@media(max-width:1500px){html body.fun-portal .topbar .key span{display:none}html body.fun-portal .topbar .key{width:46px;padding:0;justify-content:center}}
html body.fun-portal .topbar{left:14px!important;right:14px!important}html body.fun-portal #nav{gap:8px!important;flex-wrap:nowrap}html body.fun-portal .topbar .brand{flex-shrink:1;min-width:0}
html body.fun-portal .topbar{width:auto!important}
html body.fun-portal .fp-door.category-tile{padding:0!important;border:0!important;min-height:0!important;grid-column:auto!important}
html body.fun-portal .fp-box.lesson-card,html body.fun-portal .fp-shelf.lesson-card{padding:0;border:0;min-height:0;background:#fff}html body.fun-portal .fp-shelf.lesson-card{background:none;box-shadow:none}html body.fun-portal .fp-box.lesson-card.locked{background:#F7F3EA}

/* ══ 2026-10-01 frame pass: same frame width as the game pages (height-driven), logo image ══ */
:root{--fp-frame-w:min(calc(100vw - 20px),calc((100dvh - 20px) * 1.3 + 200px))}
html body.fun-portal .portal-machine{left:0!important;right:0!important;width:var(--fp-frame-w)!important;margin:0 auto!important}
html body.fun-portal .portal-machine>main{box-shadow:0 -4px 0 #4E9A3E,inset 0 5px 0 rgba(30,85,50,.22),inset 0 9px 16px rgba(20,70,40,.34),0 0 0 3px #5FAF48!important}
html body.fun-portal .topbar .brand{background:none!important;box-shadow:none!important;padding:0!important;border:0!important}
html body .logo-img{display:inline-flex;align-items:center;line-height:0}
html body .logo-img img{display:block!important;height:56px!important;margin:-5px 0 -3px!important;width:auto!important;max-width:none!important;filter:drop-shadow(0 2px 1px rgba(30,80,50,.25))}
html body .logo-img.big img{height:auto!important;width:min(300px,100%)!important;filter:drop-shadow(0 4px 6px rgba(30,80,50,.2))}
.portal-credits-btn{background:none;border:0;padding:0 0 0 10px;font:inherit;color:#fff;text-decoration:underline;cursor:pointer}
#site-credits{max-width:560px;padding:24px 28px;border:4px solid #8FDB74;border-radius:26px}#site-credits h2{margin-top:0;color:#28634D}#site-credits p{line-height:1.6}
@media(max-width:1100px),(max-height:700px){
 :root{--fp-frame-w:min(calc(100vw - 8px),calc((100dvh - 8px) * 1.3 + 200px))}
 html body .logo-img img{height:48px!important;margin:-4px 0 -2px!important}
}

/* ══ 2026-10-01 login: home-style frame + gradient, logo in the top bar, centred card, coaster rolling behind ══ */
html body[data-screen=login] .portal-machine{padding-top:64px!important}
html body[data-screen=login] .topbar{display:flex!important}
html body[data-screen=login] .portal-machine>main{background:linear-gradient(180deg,#D7F2FB 0,#F2FAEE 40%,var(--fp-cream) 100%)!important}
html body.fun-portal #login{display:grid!important;place-items:center!important;grid-template-columns:minmax(0,1fr)!important;padding:20px!important;gap:0!important;overflow:hidden!important;background:none!important}
html body.fun-portal #login[hidden]{display:none!important}
html body.fun-portal #login .login-coaster{position:absolute;inset:0;z-index:0;pointer-events:none}
html body.fun-portal #login .login-coaster svg{display:block;width:100%;height:100%}
html body.fun-portal #login .login-card{position:relative;z-index:1;width:min(460px,100%);box-sizing:border-box}
html body.fun-portal #login .lc-owner{display:inline-block;align-self:flex-start;font-size:26px;line-height:1.3;font-weight:900;letter-spacing:1px;color:#fff;background:#3FA35A;border-radius:999px;padding:6px 22px;margin-bottom:6px}
html body.fun-portal #login-title,html body.fun-portal .login-host{display:none!important}
@media(max-width:1100px),(max-height:700px){html body.fun-portal #login .lc-owner{font-size:22px;padding:4px 18px}html body.fun-portal #login .login-card{width:min(420px,100%)}}html body.fun-portal #login-error:empty{margin:0!important;padding:0!important;min-height:0!important}
@media(max-height:700px){html body.fun-portal #login{padding:10px!important}html body.fun-portal #login .login-card{padding:16px 26px 12px!important}html body.fun-portal #login .login-card>p{margin:2px 0 6px!important;font-size:16px!important}html body.fun-portal #login .login-card label{margin-bottom:6px!important;font-size:17px!important}html body.fun-portal #login .login-card input:not([type=checkbox]){height:46px!important;margin-top:4px!important}html body.fun-portal #login .login-card .inline{min-height:34px!important}html body.fun-portal #login .login-card .primary{height:52px!important;margin-top:4px!important}html body.fun-portal #login .login-card .fine{margin:8px 0 0!important}}

/* ══ 2026-10-01 brand: 「阿桀」 top-left (styles in funpad-theme.css are mirrored here), welcome text moved right, footer = FUN學奇機 ══ */
html body .ajie-link{display:inline-flex;align-items:center;line-height:0;padding:6px 8px;margin:-6px 4px -6px 10px;border-radius:10px;text-decoration:none;position:relative;cursor:pointer;flex:none;transition:background .15s,transform .15s}
html body .ajie-link img{display:block!important;height:33px!important;width:auto!important;max-width:none!important;margin:0!important;rotate:-5deg;filter:drop-shadow(1px 2px 2px rgba(20,50,25,.72)) drop-shadow(0 0 1px rgba(20,50,25,.22))!important}
html body .ajie-link:hover,html body .ajie-link:focus-visible{background:rgba(255,255,255,.35);transform:translateY(-1px)}
html body .ajie-link::after{content:"版權聲明";position:absolute;left:0;top:calc(100% + 4px);z-index:30;white-space:nowrap;font:900 13px/1 BrandHuninn,'Microsoft JhengHei',sans-serif;color:#1F4E3A;background:#fff;border-radius:999px;padding:5px 10px;box-shadow:0 2px 0 #4E9A3E;opacity:0;pointer-events:none;transition:opacity .15s}
html body .ajie-link:hover::after,html body .ajie-link:focus-visible::after{opacity:1}
html body.fun-portal .topbar{z-index:40!important}
html body.fun-portal .topbar .brand{overflow:visible!important}
html body.fun-portal .topbar .where{margin-left:22px!important}
html body.fun-portal .portal-machine>footer.fp-bottom-footer{display:flex!important;justify-content:center;align-items:center;padding:8px 0 2px!important;font-size:0!important}
html body.fun-portal .portal-machine>footer.fp-bottom-footer img{height:14px;width:auto}
@media(max-width:1100px),(max-height:700px){html body .ajie-link img{height:28px!important}html body.fun-portal .portal-machine>footer.fp-bottom-footer img{height:12px}}

/* ══ 2026-10-01 login v3 (user-approved preview login-2b): lime frame, white screen, LOGO_MIX with orbiting stars, friends.html card ══ */
html body.fun-portal[data-screen=login] .portal-machine{background:radial-gradient(120% 60% at 18% 0%,#c6e164 0,transparent 55%),linear-gradient(180deg,#b5d63a,#a1c41b 45%,#8aab12)!important;box-shadow:inset 0 3px 0 rgba(255,255,255,.6),inset 0 -7px 0 #6f8d0c,0 6px 0 #4c6a10,0 16px 32px rgba(76,106,16,.25)!important}
html body.fun-portal[data-screen=login] .portal-machine>main{background:#fff!important;box-shadow:0 -4px 0 #6f8d0c,inset 0 5px 0 rgba(60,80,10,.14),inset 0 9px 16px rgba(50,70,10,.2),0 0 0 3px #92b315!important}
html body.fun-portal[data-screen=login] .ajie-link img{filter:drop-shadow(1px 2px 2px rgba(40,60,10,.72)) drop-shadow(0 0 1px rgba(40,60,10,.22))!important}
html body.fun-portal[data-screen=login] .ajie-link::after{box-shadow:0 2px 0 #6f8d0c}
html body.fun-portal #login{--lc:330px;position:absolute!important;inset:0!important;display:block!important;padding:0!important;margin:0!important;background:none!important;overflow:hidden!important}
html body.fun-portal #login[hidden]{display:none!important}
html body.fun-portal #login .login-stage{position:absolute;left:0;top:0;bottom:0;right:calc(var(--lc) + 3.2%);container-type:size;display:grid;place-items:center}
html body.fun-portal #login .logo-wrap{position:relative;width:min(86cqw,calc(66cqh * 723 / 583));aspect-ratio:723/583}
html body.fun-portal #login .logo-wrap>img{position:absolute;inset:0;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
html body.fun-portal #login .logo-wrap>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
html body.fun-portal #login-form.fp-login{position:absolute!important;z-index:10;top:50%!important;right:3.2%!important;left:auto!important;translate:0 -50%;width:var(--lc)!important;max-width:none!important;margin:0!important;background:#fffefa!important;border:1px solid #dbe3dd!important;border-radius:28px!important;padding:25px!important;color:#364747!important;box-shadow:0 12px 35px #2343451c,0 2px 0 #e6ece2!important;display:block!important;font-family:BrandHuninn,'Microsoft JhengHei',sans-serif}
html body.fun-portal #login-form.fp-login .badge{display:inline-block;padding:7px 12px;border-radius:20px;background:#eaf3d8;color:#527e22;font-size:12px;font-weight:700}
html body.fun-portal #login-form.fp-login h2{font-size:30px!important;line-height:1.25!important;margin:17px 0 8px!important;color:#364747!important;white-space:nowrap}
html body.fun-portal #login-form.fp-login>p{font-size:13px!important;color:#75817c!important;line-height:1.7!important;margin:0!important}
html body.fun-portal #login-form.fp-login label{display:block!important;font-size:14px!important;font-weight:bold!important;margin:18px 0 8px!important;color:#364747}
html body.fun-portal #login-form.fp-login input:not([type=checkbox]){display:block!important;width:100%!important;height:47px!important;background:#fff!important;border:2px solid #c7d2cb!important;border-radius:13px!important;padding:12px!important;margin:0!important;color:#37484b!important;font-size:16px!important;box-shadow:none!important}
html body.fun-portal #login-form.fp-login input:not([type=checkbox]):focus{border-color:#a1c41b!important;box-shadow:0 0 0 4px #eaf3d8!important;outline:0}
html body.fun-portal #login-form.fp-login .show{display:flex!important;gap:8px;align-items:center;font-size:12px!important;font-weight:normal!important;margin:12px 0 23px!important}
html body.fun-portal #login-form.fp-login .show input{width:16px;height:16px;accent-color:#527e22;margin:0}
html body.fun-portal #login-form.fp-login #login-error:not(:empty){margin:-10px 0 14px!important;font-size:14px!important}
html body.fun-portal #login-form.fp-login button[type=submit]{display:block;width:100%!important;border:0!important;border-radius:14px!important;min-height:49px!important;height:auto!important;background:#527e22!important;color:#fff!important;font-weight:bold!important;font-size:17px!important;cursor:pointer;box-shadow:0 4px 0 #42651b!important;padding:0 12px!important}
html body.fun-portal #login-form.fp-login button[type=submit]:active{translate:0 2px;box-shadow:0 2px 0 #42651b!important}
html body.fun-portal #login-form.fp-login button[type=submit]:disabled{opacity:.75;cursor:wait}
html body.fun-portal #login-form.fp-login .small{text-align:center;font-size:11px!important;margin:15px 0 0!important}
@media(max-width:1100px),(max-height:700px){
 html body.fun-portal #login{--lc:300px}
 html body.fun-portal #login-form.fp-login{padding:19px!important}
 html body.fun-portal #login-form.fp-login h2{font-size:25px!important;margin:10px 0 5px!important}
 html body.fun-portal #login-form.fp-login label{margin:10px 0 6px!important}
 html body.fun-portal #login-form.fp-login .show{margin:10px 0 14px!important}
 html body.fun-portal #login-form.fp-login input:not([type=checkbox]){height:43px!important}}
@media(prefers-reduced-motion:reduce){html body.fun-portal #login .logo-wrap{translate:none!important}}

/* 阿桀 vertically centred in the top green bezel (bezel = frame top → dark lip 4px above the screen) */
html body.fun-portal .topbar{top:0!important;height:60px!important}
@media(max-width:1100px),(max-height:700px){html body.fun-portal .topbar{height:54px!important}html body.fun-portal[data-screen=login] .topbar{height:60px!important}}
html body.fun-portal #login-form.fp-login #login-title{display:block!important}
html body.fun-portal #login-form.fp-login h2{font-weight:900!important;letter-spacing:.5px}

/* ══ 2026-10-01 every portal screen = login frame (lime palette, 64px top bezel) ══ */
html body.fun-portal .portal-machine{background:radial-gradient(120% 60% at 18% 0%,#c6e164 0,transparent 55%),linear-gradient(180deg,#b5d63a,#a1c41b 45%,#8aab12)!important;box-shadow:inset 0 3px 0 rgba(255,255,255,.6),inset 0 -7px 0 #6f8d0c,0 6px 0 #4c6a10,0 16px 32px rgba(76,106,16,.25)!important;padding-top:64px!important}
html body.fun-portal .portal-machine>main{box-shadow:0 -4px 0 #6f8d0c,inset 0 5px 0 rgba(60,80,10,.14),inset 0 9px 16px rgba(50,70,10,.2),0 0 0 3px #92b315!important}
html body.fun-portal[data-screen=login] .portal-machine>main{background:#fff!important}
html body.fun-portal .topbar{--fp-shadow:#6f8d0c;height:60px!important}
html body.fun-portal .ajie-link img{filter:drop-shadow(1px 2px 2px rgba(40,60,10,.72)) drop-shadow(0 0 1px rgba(40,60,10,.22))!important}
html body.fun-portal .ajie-link::after{box-shadow:0 2px 0 #6f8d0c!important}
html body.fun-portal .portal-machine>footer{text-shadow:0 1px 0 #6f8d0c!important}
@media(max-width:1100px),(max-height:700px){html body.fun-portal .portal-machine{padding-top:64px!important}html body.fun-portal .topbar{height:60px!important}}

/* bookshelf: keep the shelf padding (lesson-card rule zeroed it) so 打開來讀 sits on top of the wooden plank */
html body.fun-portal .fp-shelf.lesson-card{padding:10px 40px 58px!important}html body.fun-portal .fp-shelf .fp-shelf-info{padding-bottom:4px!important}html body.fun-portal .fp-shelf .fp-reader{bottom:46px}
@media(max-width:1100px),(max-height:700px){html body.fun-portal .fp-shelf.lesson-card{padding:10px 20px 54px!important}}