.mihu-portal {
    --portal-ink: #f2f0ff;
    --portal-muted: #b3bad1;
    --portal-accent: #d7b9ff;
    --portal-border: #383451;
    --portal-surface: #10141e;
    --portal-inset: #070a12;
    --portal-focus: #d6afff;
    --portal-gold: #f6cc7e;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #0b0e19;
    color: var(--portal-ink);
    font: 16px/1.65 Inter, "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
    color-scheme: dark;
}
.mihu-portal *, .mihu-portal *::before, .mihu-portal *::after { box-sizing: border-box; }
.mihu-portal a { color: var(--portal-accent); text-underline-offset: .2em; }
.mihu-portal a:hover { color: #fff; }
.mihu-portal p { margin: 0 0 1em; color: var(--portal-muted); }
.mihu-portal h1, .mihu-portal h2, .mihu-portal h3 { margin: 0 0 .45em; line-height: 1.22; }
.mihu-portal h1 { font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -.045em; }
.mihu-portal h2 { font-size: clamp(1.35rem, 2vw, 1.75rem); }
.mihu-portal h3 { font-size: 1.15rem; }
.mihu-portal :focus-visible { outline: 2px solid var(--portal-focus); outline-offset: 4px; }
.mihu-portal [id] { scroll-margin-top: 6rem; }
.portal-container { width: min(100% - 3rem, 1220px); margin-inline: auto; }
.portal-skip { position: fixed; top: 1rem; left: 1rem; z-index: 8; padding: .6rem 1rem; background: #151427; clip-path: inset(50%); }
.portal-skip:focus { clip-path: none; }
.portal-header { position: sticky; top: 0; z-index: 5; background: #101322; border-bottom: 1px solid #2b2942; }
.portal-navigation, .portal-section-heading {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.portal-navigation { min-height: 76px; padding-block: .55rem; }
.portal-brand { display: inline-flex; align-items: center; gap: .6rem; line-height: 1.2; font-weight: 800; text-decoration: none; white-space: nowrap; }
.mihu-portal .portal-brand { color: var(--portal-ink); }
.portal-brand img { object-fit: contain; }
.portal-navigation .portal-brand img { width: 76px; height: 76px; }
.portal-brand small { display: block; margin-top: .25rem; font-size: .62rem; letter-spacing: .14em; color: #c3a5ff; }
.portal-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem 1rem; }
.portal-navlinks a { color: #d4d3e8; text-decoration: none; font-weight: 650; font-size: .92rem; }
.portal-navlinks a { display: inline-flex; align-items: center; min-height: 44px; padding: .2rem .4rem; border-block-end: 2px solid transparent; }
.portal-navlinks a[aria-current="page"] { color: var(--portal-ink); border-block-end-color: var(--portal-focus); }
.portal-navlinks { display: flex; flex-wrap: wrap; gap: .25rem .65rem; }
.portal-visually-hidden {
    position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}
.mihu-portal .portal-button {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .5rem .95rem; border: 1px solid transparent; border-radius: 999px; font: inherit; font-weight: 700;
    font-size: .92rem; color: #fff; text-decoration: none; cursor: pointer; transition: transform 180ms ease;
}
.portal-button-primary { background: linear-gradient(125deg, #703cc8, #5843b6); border-color: #a479f0 !important; }
.portal-button-outline { background: #15182b; border-color: #454361 !important; }
@media (hover: hover) { .portal-button:hover { transform: translateY(-2px); } }
.portal-hero {
    display: grid; grid-template-columns: minmax(0, 1.27fr) minmax(0, 1fr); align-items: center; gap: 1.5rem;
    min-height: 446px; margin-top: clamp(1rem, 4vw, 2.8rem); padding: clamp(1.25rem, 4.5vw, 3.5rem);
    border: 1px solid #4b3b68; border-radius: clamp(1.2rem, 3vw, 2rem);
    background: radial-gradient(ellipse at 78% 53%, #392758 0%, transparent 67%), linear-gradient(135deg, #191930, #101422 70%);
}
.portal-hero-copy { z-index: 1; }
.portal-hero h1 { line-height: 1.1; }
.portal-hero h1 span { display: inline-block; margin-top: .28em; color: #e0c8ff; font-size: clamp(1.2rem, 3.1vw, 3.2rem); }
.portal-hero p { max-width: 37rem; font-size: 1.05rem; margin: 1.3rem 0 1.5rem; }
.portal-hero-actions .portal-button { min-height: 48px; }
.portal-hero-art { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 330px; }
.portal-hero-art::before {
    position: absolute; inset: 5% 2%; z-index: -1; content: "";
    background: radial-gradient(ellipse at center, #51407399, #1b234447 55%, transparent 74%);
}
.portal-hero-art::after {
    position: absolute; inset: 0; z-index: -1; content: "";
    background: radial-gradient(circle, #b9a0ee55 1px, transparent 1.4px) 0 0 / 16px 16px;
    mask-image: radial-gradient(ellipse, transparent 35%, #000 52%, transparent 73%);
}
@media (prefers-reduced-motion: no-preference) {
    .portal-hero-art { animation: portal-art-entrance .48s cubic-bezier(.2,.7,.25,1) both; }
}
@keyframes portal-art-entrance {
    from { opacity: .6; transform: translate3d(0, 8px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.portal-mascot { width: min(80%, 300px); height: auto; z-index: 1; animation: portal-float 7s ease-in-out infinite; }
.portal-pumpkin, .portal-ghost { position: absolute; height: auto; object-fit: contain; animation: portal-float 8s ease-in-out infinite; }
.portal-pumpkin { left: 2%; bottom: 1%; width: 23%; animation-delay: -3s; }
.portal-ghost { right: 1%; top: 3%; width: 27%; animation-delay: -5s; }
.portal-orbit { position: absolute; z-index: -1; border: 1px solid #ad90e670; border-radius: 50%; width: 87%; height: 64%; transform: rotate(-20deg); box-shadow: 0 0 0 14px #b591eb12; }
.portal-hero-star { position: absolute; color: #e3bcff; font-size: clamp(1.2rem, 3vw, 2rem); }
.portal-hero-star-one { top: 16%; left: 18%; }
.portal-hero-star-two { bottom: 11%; right: 14%; color: #ffd6a3; }
@keyframes portal-float { 50% { transform: translate3d(0,-9px,0); } }
.portal-hero-art:is(.portal-motion-paused, .portal-motion-offscreen) img { animation-play-state: paused; }
.portal-stats {
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin: .85rem 0 0; background: #141827;
    border: 1px solid var(--portal-border); border-radius: 16px; padding: .9rem 0;
}
.portal-stats > div { text-align: center; padding: .15rem .8rem; }
.portal-stats > div + div { border-left: 1px solid var(--portal-border); }
.portal-stats dt { color: var(--portal-muted); font-size: .87rem; }
.portal-stats dd { margin: .1rem 0 0; color: #d9c0ff; font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.portal-stats .portal-stat-unavailable { font-size: 1rem; margin-top: .5rem; }
.portal-section { margin-block: clamp(2rem, 5vw, 4rem); }
.portal-section-heading { margin-bottom: 1.1rem; flex-wrap: wrap; }
.portal-section-heading :is(h1,h2,p) { margin-bottom: 0; }
.portal-section-heading h1 + p { margin-top: .65rem; }
.portal-subpage { max-width: 1040px; }
.portal-page { padding-block: clamp(1.75rem, 5vw, 3.5rem); min-height: 64vh; }
.portal-page-intro {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 1rem; margin-bottom: clamp(1.1rem, 3vw, 1.8rem); padding: clamp(1.2rem, 4vw, 2.35rem);
    border: 1px solid var(--portal-border); border-radius: 20px;
    background: radial-gradient(ellipse at right top, #33264d, transparent 65%), #151827;
}
.portal-page-intro h1 { font-size: clamp(1.9rem, 4.2vw, 3.4rem); margin: 0; }
.portal-page-intro p { margin: .65rem 0 0; }
.portal-home :is(.portal-event-section, #services) h2 i { color: var(--portal-accent); margin-inline-end: .18rem; }
.portal-grid, .portal-pair, .portal-events { display: grid; gap: 1rem; }
.portal-grid, .portal-events { grid-template-columns: repeat(3, minmax(0,1fr)); }
.portal-pair { grid-template-columns: repeat(2, minmax(0,1fr)); }
.portal-card {
    min-width: 0; padding: clamp(1rem, 2.5vw, 1.65rem); overflow-wrap: anywhere;
    background: var(--portal-surface); border: 1px solid var(--portal-border); border-radius: 20px;
}
.portal-card > :last-child { margin-bottom: 0; }
.portal-services {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .65rem;
    list-style: none; margin: 0; padding: 0;
}
.portal-services li { min-width: 0; --service-glow: #322451; --service-ink: #e4cdff; }
.portal-services li:nth-child(2) { --service-glow: #45263d; --service-ink: #ffc8e7; }
.portal-services li:nth-child(3) { --service-glow: #44352a; --service-ink: #ffe2a9; }
.portal-services li:nth-child(4) { --service-glow: #203d52; --service-ink: #b1e6ff; }
.portal-services li:nth-child(5) { --service-glow: #203c3d; --service-ink: #b1efdc; }
.portal-service-card {
    position: relative; isolation: isolate; min-height: 8rem; border-radius: 15px;
    transition: transform .28s ease; perspective: 48rem;
}
.portal-service-card[open] { z-index: 1; transform: scale(1.045); }
.mihu-portal .portal-service-card summary {
    position: absolute; inset: 0; z-index: 1; display: block; color: var(--portal-ink);
    list-style: none; border-radius: inherit;
}
.portal-service-card summary::-webkit-details-marker { display: none; }
.portal-service-face {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    gap: .65rem; padding: clamp(.72rem, 2vw, 1rem); border: 1px solid var(--portal-border);
    border-radius: 15px; background: linear-gradient(150deg, var(--service-glow), #151928 78%);
    overflow-wrap: anywhere; backface-visibility: hidden;
}
.portal-service-front { font-weight: 800; transition: transform .28s ease; }
.portal-service-card[open] .portal-service-front { transform: rotateY(180deg); }
.portal-service-back { pointer-events: none; border-color: var(--service-ink); color: var(--service-ink); }
.portal-service-back p { color: var(--portal-ink); font-size: .87rem; margin: 0; line-height: 1.45; }
.portal-service-card[open] .portal-service-back { animation: portal-service-flip .28s ease both; }
@keyframes portal-service-flip { from { transform: rotateY(-180deg); } to { transform: rotateY(0deg); } }
.portal-service-turn { position: absolute; inset-block-start: .65rem; inset-inline-end: .65rem; color: var(--service-ink); font-size: .75rem; }
.portal-service-icon {
    display: grid; place-items: center; flex: none; width: 2.35rem; height: 2.35rem;
    border-radius: 10px; background: var(--service-glow); color: var(--service-ink);
}
.portal-event-empty { display: flex; align-items: center; min-height: 7rem; gap: .65rem; }
.portal-event-empty i { color: var(--portal-accent); font-size: 1.18rem; }
.portal-event-empty p { margin: 0; }
.portal-event { border-top: 3px solid var(--event-accent); }
.portal-event-details summary::after { content: "+"; margin-inline-start: .2rem; }
.portal-event-details[open] summary::after { content: "−"; }
.portal-event-details > p { margin-top: .8rem; }
.portal-event-featured { grid-column: 1 / -1; background: linear-gradient(115deg, #211832, #10141e 67%); }
.portal-event-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin-bottom: .7rem; font-size: .82rem; color: var(--portal-muted); }
.portal-document-text { white-space: pre-wrap; }
.portal-event-meta span, .portal-tags li { border-radius: 999px; padding: .13rem .6rem; border: 1px solid #625180; background: #221a38; color: #e2cfff; }
.portal-ledger, .portal-items, .portal-tags { list-style: none; }
.portal-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; align-items: end; gap: .8rem; margin-bottom: 1rem; }
.portal-filters label { min-width: 0; }
.portal-filter-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.mihu-portal label { display: grid; gap: .35rem; }
.mihu-portal select, .mihu-portal textarea, .portal-profile-form input:not([type="checkbox"]) {
    min-height: 42px; padding: .45rem .7rem; max-width: 100%; background: #070a12; color: #f2f0ff; border: 1px solid #5b4879; border-radius: 10px; font: inherit;
}
.portal-talent { display: flex; flex-direction: column; }
.portal-talent-header, .portal-items li { display: flex; align-items: center; gap: .8rem; }
.portal-talent-header img { border-radius: 50%; object-fit: cover; }
.portal-talent h2 { font-size: 1.2rem; margin: 0; }
.portal-talent p { margin: .7rem 0; }
.portal-talent-status { color: var(--portal-muted); font-size: .8rem; }
.portal-talent-status.is-online { color: #80e3be; }
.portal-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.portal-tags li { font-size: .74rem; }
.portal-talent .portal-tags { padding: 0; margin: 0 0 .9rem; }
.portal-talent-media { margin-top: auto; }
.portal-talent-video {
    display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
    background: var(--portal-inset); border: 1px solid #302a41; border-radius: 12px; object-fit: contain;
}
.portal-talent .portal-media-error { margin-block: .5rem 0; color: #ffc6a9; font-size: .85rem; }
.portal-talent .portal-talent-price { margin: .75rem 0 0; color: var(--portal-ink); }
.portal-member-center { max-width: 1120px; }
.portal-member-header { gap: 1rem; margin-bottom: .85rem; padding: clamp(1rem, 3vw, 1.8rem); }
.portal-member-header h1 { margin-bottom: .15rem; font-size: clamp(1.7rem, 4vw, 2.55rem); }
.portal-member-header p { margin: 0; }
.portal-member-identity { display: flex; align-items: center; gap: .85rem; min-width: 0; overflow-wrap: anywhere; }
.portal-member-identity img {
    flex: none; width: 64px; height: 64px; border: 1px solid #74628c; border-radius: 50%;
    background: #16152a; object-fit: cover;
}
.portal-member-account-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.mihu-portal .portal-member-logout { background: transparent; color: var(--portal-muted); }
.mihu-portal .portal-member-logout:hover { color: var(--portal-ink); }
.portal-member-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.portal-member-links a {
    --shortcut-ink: #dec8ff; --shortcut-fill: #2b2143;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
    min-height: 62px; gap: .65rem; padding: .65rem .8rem; background: #141827;
    border: 1px solid var(--portal-border); border-radius: 14px; text-decoration: none;
    color: var(--portal-ink); font-size: .95rem; font-weight: 700;
}
.portal-member-links a[href="#bag"] { --shortcut-ink: #f5c2df; --shortcut-fill: #3a223a; }
.portal-member-links a[href="#titles"] { --shortcut-ink: #f6d596; --shortcut-fill: #3b2e28; }
.portal-member-links a[href="#orders"] { --shortcut-ink: #b0ddff; --shortcut-fill: #1d3149; }
.portal-member-links a:is(:hover, :focus-visible) { background: #201d34; border-color: #8670a8; }
.portal-member-shortcut-icon {
    display: grid; place-items: center; width: 2.15rem; height: 2.15rem;
    border-radius: 9px; background: var(--shortcut-fill); color: var(--shortcut-ink);
}
.portal-member-shortcut-arrow { color: var(--shortcut-ink); font-size: .64rem; }
.portal-member-center > .portal-section { margin-block: clamp(1.35rem, 3vw, 2.4rem); }
.portal-member-links + .portal-section { margin-top: .85rem; }
.portal-member-center > .portal-section:last-child { margin-bottom: 0; }
#portalOrderHistory i { color: #b0ddff; margin-inline-end: .2rem; font-size: .87em; }
@media (max-width: 690px) {
    .portal-member-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .portal-member-links a { min-height: 54px; gap: .45rem; padding: .45rem .55rem; font-size: .86rem; }
    .portal-member-shortcut-icon { width: 1.85rem; height: 1.85rem; }
    .portal-member-identity img { width: 50px; height: 50px; }
}
@media (max-width: 460px) {
    .portal-member-account-actions { width: 100%; justify-content: space-between; border-top: 1px solid var(--portal-border); padding-top: .55rem; }
}
.portal-member-wallet { display: grid; gap: .9rem; }
.portal-wallet-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .9rem; }
.portal-wallet, .portal-wallet-vip { display: grid; align-content: start; gap: .9rem; }
.portal-wallet {
    --wallet-accent: #d9c6ff;
    --wallet-glow: #4a366c;
    background: radial-gradient(ellipse at 90% 0%, var(--wallet-glow), transparent 76%), linear-gradient(145deg, #1a1d30, #10141e 75%);
}
.portal-wallet[data-vip-finish="midnight"] { --wallet-accent: #c3dcff; --wallet-glow: #30466b; }
.portal-wallet[data-vip-finish="jade"] { --wallet-accent: #b3f0d9; --wallet-glow: #284e4e; }
.portal-wallet[data-vip-finish="amethyst"] { --wallet-accent: #e2c3ff; --wallet-glow: #553876; }
.portal-wallet[data-vip-finish="silver"] { --wallet-accent: #e1eaff; --wallet-glow: #424d67; }
.portal-wallet[data-vip-finish="champagne"] { --wallet-accent: #ffe1ad; --wallet-glow: #594633; }
.portal-wallet[data-vip-finish="obsidian"] { --wallet-accent: #f7d598; --wallet-glow: #53402e; }
.portal-wallet[data-vip-finish="prism"] {
    --wallet-accent: #ffe8bd;
    background: radial-gradient(ellipse at 90% 0%, #674864, transparent 66%), linear-gradient(145deg, #263957, #10141e 78%);
}
.portal-wallet-heading {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .4rem .75rem;
}
.portal-wallet-heading h2 { margin: 0; font-size: clamp(1.12rem, 2.25vw, 1.35rem); }
.portal-wallet-heading h2 i { margin-inline-end: .25rem; color: var(--wallet-accent, var(--portal-gold)); font-size: .86em; }
.portal-wallet-tier {
    display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .65rem;
    border: 1px solid color-mix(in srgb, var(--wallet-accent), transparent 62%);
    border-radius: 999px; background: #10141e6e; color: var(--wallet-accent);
    font-size: .8rem; font-weight: 750; white-space: nowrap;
}
.portal-wallet-available { color: var(--portal-muted); font-size: .85rem; }
.portal-balance {
    color: var(--portal-ink); font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.1;
    letter-spacing: -.035em; font-variant-numeric: tabular-nums;
}
.portal-balance span { color: var(--wallet-accent); font-size: .43em; font-weight: 700; }
.portal-wallet-split {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin: 0;
}
.portal-wallet-split > div {
    padding: .55rem .7rem; border: 1px solid #ffffff1a; border-radius: 12px; background: #080b1480;
}
.portal-wallet-split dt, .portal-wallet-target span { color: var(--portal-muted); font-size: .82rem; }
.portal-wallet-split dd { margin: 0; font-weight: 750; font-variant-numeric: tabular-nums; }
.portal-wallet > a { justify-self: start; }
.portal-wallet-vip { background: radial-gradient(ellipse at 100% 0%, #332847, transparent 75%), var(--portal-surface); }
.portal-wallet-target { display: flex; align-items: baseline; gap: .5rem; }
.portal-wallet-target strong { font-size: 1.35rem; color: #e3cdff; }
.portal-wallet-meter > div, .portal-wallet-meter > p {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem .5rem;
}
.portal-wallet-meter > div > strong, .portal-wallet-meter p strong { color: #e5d0ff; }
.portal-wallet-meter progress {
    display: block; appearance: none; width: 100%; height: .58rem; overflow: hidden; margin: .42rem 0;
    border: 0; border-radius: 999px; background: #080b16; color: #b18cf7;
}
.portal-wallet-meter progress::-webkit-progress-bar { border-radius: 999px; background: #080b16; }
.portal-wallet-meter progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, #9464e8, #d69bff); }
.portal-wallet-meter progress::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, #9464e8, #d69bff); }
.mihu-portal .portal-wallet-meter p { margin: 0; font-size: .83rem; font-variant-numeric: tabular-nums; }
.portal-wallet-deposit {
    display: flex; align-items: baseline; gap: .65rem; padding: .65rem .8rem;
    border: 1px solid #504338; border-radius: 12px; background: #1e1a24;
}
.portal-wallet-deposit i, .portal-wallet-deposit strong { color: #f3d698; }
.portal-wallet-deposit strong { font-size: .9rem; }
.mihu-portal .portal-wallet-vip-note { margin: 0; }
.portal-wallet-ledger .portal-wallet-heading { margin-bottom: .45rem; }
.portal-wallet-ledger-time { color: var(--portal-muted); font-size: .8rem; }
.portal-wallet-ledger .portal-ledger li {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .6fr);
    align-items: baseline; gap: .15rem .85rem; padding: .55rem .1rem;
}
.portal-wallet-ledger .portal-ledger strong { text-align: end; font-variant-numeric: tabular-nums; }
.portal-ledger strong[data-direction="credit"] { color: #a8e9cb; }
.portal-ledger strong[data-direction="debit"] { color: #f2b7c9; }
.portal-wallet-ledger-more { border-top: 1px solid #282841; }
.mihu-portal .portal-wallet-ledger-more summary {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 44px; padding: .35rem; border-radius: 10px; font-size: .9rem;
}
.portal-wallet-ledger-more summary::-webkit-details-marker { display: none; }
.portal-wallet-ledger-collapse, .portal-wallet-ledger-more[open] .portal-wallet-ledger-expand { display: none; }
.portal-wallet-ledger-more[open] .portal-wallet-ledger-collapse { display: inline; }
.portal-wallet-ledger-more[open] summary i { transform: rotate(180deg); }
@media (max-width: 690px) {
    .portal-wallet-overview { grid-template-columns: 1fr; }
    .portal-wallet, .portal-wallet-vip { gap: .65rem; }
    .portal-wallet-ledger .portal-ledger li { grid-template-columns: minmax(0, 1fr) minmax(0, auto); }
    .portal-wallet-ledger .portal-ledger small { grid-row: 2; }
    .portal-wallet-ledger .portal-ledger strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
.portal-backpack {
    overflow: hidden; border: 1px solid #514369; border-radius: 20px;
    background: radial-gradient(ellipse at 8% 0, #322344, transparent 72%), #121522;
}
.portal-backpack-toggle {
    display: flex; align-items: center; gap: clamp(.55rem, 2.2vw, 1.45rem);
    min-height: 106px; padding: .75rem clamp(.75rem, 3vw, 1.65rem);
    list-style: none;
}
.portal-backpack-toggle::-webkit-details-marker { display: none; }
.mihu-portal .portal-backpack-toggle:focus-visible { outline-offset: -4px; }
.portal-backpack-title { color: var(--portal-ink); font-size: clamp(1.08rem, 2.5vw, 1.55rem); font-weight: 800; }
.portal-backpack-action {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem; flex: none;
    min-height: 44px; margin-inline-start: auto; padding: .35rem clamp(.65rem, 2vw, 1rem);
    border: 1px solid #9471c7; border-radius: 999px; background: #3d285f;
    color: #f6ebff; font-size: .9rem; font-weight: 750; white-space: nowrap;
}
.portal-backpack-toggle:is(:hover, :focus-visible) .portal-backpack-action { background: #513778; }
.portal-backpack-action i { font-size: .7rem; }
.portal-backpack-close-label, .portal-backpack[open] .portal-backpack-open-label { display: none; }
.portal-backpack[open] .portal-backpack-close-label { display: inline; }
.portal-backpack[open] .portal-backpack-action i { transform: rotate(180deg); }
.portal-backpack-art { position: relative; isolation: isolate; flex: 0 0 5rem; height: 4.7rem; perspective: 180px; }
.portal-backpack-art > span { position: absolute; pointer-events: none; }
.portal-backpack-shell {
    inset: 1.3rem .86rem .23rem; border: 1px solid #d294d9; border-radius: 15px 15px 12px 12px;
    background: linear-gradient(140deg, #b563bd, #653b97); box-shadow: 0 3px 16px #b363c935;
}
.portal-backpack-shell::before {
    content: ""; position: absolute; width: 1.25rem; height: .72rem; bottom: 100%; left: calc(50% - .625rem);
    border: 2px solid #d595d6; border-bottom: 0; border-radius: 8px 8px 0 0;
}
.portal-backpack-flap {
    z-index: 2; inset: 1.27rem .79rem auto; height: 1.65rem; transform-origin: center top;
    border: 1px solid #f2b4df; border-radius: 13px 13px 10px 10px;
    background: linear-gradient(160deg, #ee9bd3, #b366c5);
}
.portal-backpack-flap::after {
    content: ""; position: absolute; width: .57rem; height: .35rem; left: calc(50% - .285rem); bottom: .14rem;
    border-radius: 3px; background: #ffdb98;
}
.portal-backpack-pocket {
    z-index: 3; inset: 3.05rem 1.45rem .48rem;
    border: 1px solid #e4a5dc70; border-radius: 5px 5px 8px 8px; background: #b66ecb;
}
.portal-backpack-ticket {
    z-index: 1; top: 1.16rem; left: 1.75rem; width: 1.5rem; height: 1.08rem;
    display: grid; place-items: center; border: 1px dashed #fff0c9;
    border-radius: 4px; background: #f4c881; color: #593177; font-size: .55rem; opacity: 0;
}
.portal-backpack-spark { z-index: 4; top: 1rem; left: .15rem; color: #fad39a; line-height: 1; opacity: 0; }
.portal-backpack-spark:last-child { top: .8rem; left: auto; right: .05rem; color: #f3baed; }
.portal-backpack[open] .portal-backpack-flap { transform: rotateX(122deg); }
.portal-backpack[open] .portal-backpack-ticket { opacity: 1; transform: translateY(-.5rem) rotate(-12deg); }
.portal-backpack-content { padding: 1rem clamp(.75rem, 3vw, 1.65rem) 1.3rem; border-top: 1px solid var(--portal-border); }
.portal-backpack-content .portal-grid { align-items: start; gap: .7rem; }
.portal-inventory-group { padding: .55rem .9rem; border-radius: 14px; background: #131725; }
.portal-inventory-group summary {
    display: flex; align-items: center; gap: .5rem; min-height: 44px; padding-block: .2rem;
    font-weight: 750; list-style: none;
}
.portal-inventory-group summary::-webkit-details-marker { display: none; }
.portal-inventory-group summary i { color: #daaaf6; font-size: .9em; }
.portal-inventory-group summary span {
    margin-inline-start: auto; min-width: 1.55rem; padding-inline: .3rem;
    border-radius: 6px; background: #2c2440; color: #f2e5ff; text-align: center; font-size: .8rem;
}
.portal-inventory-group summary::after {
    content: ""; width: .42rem; height: .42rem; margin-inline: .15rem;
    border: solid #d1b7f0; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px);
}
.portal-inventory-group[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.portal-inventory-group img { flex: none; object-fit: contain; }
.portal-inventory-group p { font-size: .9rem; }
@media (prefers-reduced-motion: no-preference) {
    .portal-backpack[open] .portal-backpack-flap { animation: portal-backpack-unflip .36s cubic-bezier(.18,.82,.3,1) both; }
    .portal-backpack[open] .portal-backpack-ticket { animation: portal-backpack-pop .38s .08s cubic-bezier(.18,.82,.3,1) both; }
    .portal-backpack[open] .portal-backpack-spark { animation: portal-backpack-spark .46s .08s ease-out both; }
    .portal-backpack[open] > .portal-backpack-content { animation: portal-art-entrance .27s .1s ease-out both; }
}
@keyframes portal-backpack-unflip {
    from { transform: rotateX(0deg); }
    to { transform: rotateX(122deg); }
}
@keyframes portal-backpack-pop {
    from { opacity: 0; transform: translate3d(0,.6rem,0) rotate(8deg) scale(.65); }
    70% { opacity: 1; transform: translate3d(0,-.75rem,0) rotate(-17deg); }
    to { opacity: 1; transform: translate3d(0,-.5rem,0) rotate(-12deg); }
}
@keyframes portal-backpack-spark {
    from { opacity: 0; transform: translate3d(0,.5rem,0) scale(.45); }
    40% { opacity: 1; }
    to { opacity: 0; transform: translate3d(0,-.65rem,0) scale(1.12); }
}
@media (max-width: 420px) {
    .portal-backpack-art { flex-basis: 4rem; transform: scale(.85); }
    .portal-backpack-action { font-size: .82rem; }
}
.portal-ledger, .portal-items { padding: 0; margin: 0; }
.portal-ledger li, .portal-items li { padding: .65rem 0; border-bottom: 1px solid #282841; }
.portal-ledger li:last-child, .portal-items li:last-child { border-bottom: 0; }
.portal-ledger small, .portal-items small, .portal-order-table small { display: block; font-size: .8rem; color: var(--portal-muted); }
.portal-order-table { width: 100%; border-collapse: collapse; text-align: left; font-size: .92rem; }
.portal-order-table :is(th, td) { padding: .7rem; vertical-align: middle; border-bottom: 1px solid #2f2d44; }
.portal-order-table thead th { color: #decbff; white-space: nowrap; }
.portal-order-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.portal-order-identity small { font-weight: 500; }
.portal-order-amount { font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.portal-order-badge {
    display: inline-block; padding: .15rem .55rem; border: 1px solid #665781; border-radius: 999px;
    background: #231d35; color: #e3d6fa; font-size: .78rem; white-space: nowrap;
}
.portal-order-badge[data-status="completed"] { border-color: #386559; background: #1b3531; color: #a8edd2; }
.portal-order-badge[data-status="pending"] { border-color: #705c39; background: #382d21; color: #ffda95; }
.portal-order-badge[data-status="in_progress"] { border-color: #435b80; background: #1d2c47; color: #b3d6ff; }
.portal-order-badge:is([data-status="disputed"], [data-status="cancelled"]) { border-color: #794b5f; background: #392335; color: #f4c0d4; }
.portal-order-feedback { width: 25%; }
.portal-order-stars { color: var(--portal-gold); letter-spacing: .14em; white-space: nowrap; }
.portal-order-comment { margin-top: .2rem; white-space: pre-wrap; }
.portal-order-review-toggle { width: fit-content; min-height: 44px; padding: .55rem 0; font-weight: 700; }
.portal-review { display: grid; gap: .65rem; margin: .4rem 0 .3rem; min-width: 0; }
.portal-review label { display: grid; gap: .25rem; }
.portal-review textarea { width: 100%; resize: vertical; }
.portal-review button { justify-self: start; }
.portal-title-heading i { margin-inline-end: .35rem; color: var(--portal-gold); font-size: .85em; }
.portal-title-table .portal-order-identity { color: #f4e2bd; }
.portal-title-times small + small { margin-top: .18rem; }
.portal-title-times span { margin-inline-end: .2rem; color: #d7c5e9; }
.portal-title-mobile-label { display: none; }
@media (max-width: 690px) {
    .portal-order-list { padding: 0; border: 0; background: transparent; }
    .portal-order-table { display: block; }
    .portal-order-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    .portal-order-table tbody { display: grid; gap: .65rem; }
    .portal-order-table tr {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .5rem .75rem;
        padding: .8rem .9rem; border: 1px solid var(--portal-border); border-radius: 14px;
        background: var(--portal-surface);
    }
    .portal-order-table tbody :is(th, td) { padding: 0; border: 0; }
    .portal-order-identity { grid-area: 1 / 1; }
    .portal-order-identity small { margin-top: .08rem; }
    .portal-order-status { grid-area: 1 / 2; justify-self: end; }
    .portal-order-service { grid-area: 2 / 1; }
    .portal-order-amount { grid-area: 2 / 2; justify-self: end; align-self: center; }
    .portal-order-table .portal-order-feedback { grid-column: 1 / -1; width: auto; border-top: 1px solid #2f2d44; padding-top: .15rem; }
    .portal-order-feedback-empty { display: none; }
    .portal-title-playmate, .portal-title-times { grid-column: 1 / -1; }
    .portal-title-table .portal-title-times { padding-top: .55rem; border-top: 1px solid #2f2d44; }
    .portal-title-mobile-label { display: inline; margin-inline-end: .3rem; color: var(--portal-muted); font-size: .8rem; }
}
.portal-pagination { display: flex; justify-content: center; align-items: center; gap: .85rem; margin: 1.3rem 0 0; }
.mihu-portal summary { cursor: pointer; color: #dfcaff; }
.portal-notice { border: 1px solid #594d7c; border-radius: 12px; padding: .7rem 1rem; background: #1d1733; margin: 1rem 0 !important; }
.portal-dialog { width: min(31rem, calc(100% - 2rem)); padding: 1.45rem; color: var(--portal-ink); background: #121521; border: 1px solid #7659ac; border-radius: 20px; }
.portal-dialog::backdrop { background: #050613bd; }
.portal-dialog .portal-actions { justify-content: flex-end; }
.mihu-portal.portal-sign-in {
    background: radial-gradient(ellipse at 22% 32%, #211a3e 0%, transparent 46%),
        radial-gradient(ellipse at 83% 60%, #111e38 0%, transparent 42%), #0d111c;
}
.portal-sign-in .portal-header { position: relative; background: transparent; }
.portal-sign-in .portal-navigation { min-height: 70px; flex-wrap: nowrap; }
.portal-sign-in .portal-navigation .portal-brand img { width: 56px; height: 56px; }
.mihu-portal .portal-sign-in-home { flex: none; background: #171a2a; }
.portal-member-login {
    display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); align-items: center;
    gap: clamp(2rem, 6vw, 5.5rem); max-width: 1040px; min-height: min(590px, 76svh);
    padding-block: clamp(1.5rem, 5vw, 4.6rem);
}
.portal-login-card {
    grid-column: 2; grid-row: 1; display: grid;
    padding: clamp(1.35rem, 3.4vw, 2.65rem); border: 1px solid #4b4266; border-radius: 25px;
    background: radial-gradient(ellipse at 96% 0%, #292341 0%, transparent 64%), #111624;
    box-shadow: 0 22px 65px #0609118c, inset 0 1px #e9deff1a;
}
.mihu-portal .portal-login-card h1 { margin: 0 0 .45rem; font-size: clamp(2rem, 4.8vw, 3.2rem); }
.mihu-portal .portal-login-intro { margin: 0 0 1.65rem; }
.mihu-portal .portal-login-primary {
    display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem; gap: .65rem; justify-items: center;
    min-height: 54px; border: 1px solid #ada1ff; border-radius: 13px; font-size: 1rem;
    background: linear-gradient(115deg, #474bc6, #6743b9); box-shadow: 0 7px 22px #5d4ad446;
}
.portal-login-primary i:first-child { font-size: 1.15em; }
.mihu-portal .portal-login-community { margin-top: .65rem; border: 1px solid #3c405b; border-radius: 13px; background: #191e30; }
.mihu-portal .portal-login-community i { color: #c2b6ec; font-size: .76em; }
.mihu-portal .portal-login-partner {
    justify-self: center; display: inline-flex; align-items: center; gap: .5rem;
    min-height: 44px; margin-top: .7rem; padding-inline: .65rem; color: #c7c0df; font-size: .88rem; text-decoration: none;
}
.portal-login-partner:hover { text-decoration: underline; }
.portal-login-partner i:last-child { font-size: .68em; }
.portal-login-art {
    grid-column: 1; grid-row: 1; display: grid; justify-items: center; gap: 1.4rem; min-width: 0;
}
.portal-login-orbit {
    position: relative; isolation: isolate; display: grid; place-items: center; width: min(100%, 430px); aspect-ratio: 1.24;
    background: radial-gradient(ellipse, #6043a67d, #33295140 51%, transparent 72%);
}
.portal-login-orbit::before, .portal-login-orbit::after {
    position: absolute; z-index: -1; inset: 14% 7%; content: ""; border: 1px solid #a78ce160; border-radius: 50%;
    transform: rotate(-22deg);
}
.portal-login-orbit::after { inset: 19% 10%; border-color: #758ce053; transform: rotate(27deg); }
.portal-login-orbit img { display: block; width: min(66%, 288px); height: auto; }
.portal-login-star { position: absolute; line-height: 1; color: #d9b7ff; }
.portal-login-star-one { top: 16%; left: 16%; font-size: clamp(.9rem, 2.8vw, 1.75rem); }
.portal-login-star-two { top: 26%; right: 15%; font-size: clamp(.75rem, 2.4vw, 1.4rem); }
.portal-login-star-three { bottom: 17%; right: 23%; color: #f4ce96; font-size: clamp(.6rem, 2vw, 1.05rem); }
.portal-login-benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem 1.05rem; padding: 0; margin: 0; }
.portal-login-benefits li { display: inline-flex; align-items: center; gap: .45rem; color: #e0d5f6; font-size: .85rem; font-weight: 650; }
.portal-login-benefits i { color: #b79bea; }
@media (prefers-reduced-motion: no-preference) {
    .portal-login-card { animation: portal-art-entrance .45s ease-out; }
    .portal-login-orbit img { animation: portal-float 6s ease-in-out infinite; }
    .portal-login-star { animation: portal-login-twinkle 4s ease-in-out infinite; }
    .portal-login-star-two { animation-delay: -1.3s; }
    .portal-login-star-three { animation-delay: -2.7s; }
}
@keyframes portal-login-twinkle { 50% { opacity: .48; transform: scale(.84); } }
.portal-login-art:is(.portal-motion-paused, .portal-motion-offscreen) :is(img, .portal-login-star) { animation-play-state: paused; }
.portal-profile { max-width: 1060px; }
.portal-profile-intro { gap: .85rem; padding: clamp(1rem, 2.6vw, 1.65rem); }
.portal-profile-intro h1 { font-size: clamp(1.65rem, 3.3vw, 2.45rem); }
.portal-profile-intro p { margin-top: .15rem; }
.portal-profile-identity { display: flex; align-items: center; gap: .85rem; min-width: 0; overflow-wrap: anywhere; }
.portal-profile-identity img {
    flex: none; border: 1px solid #a28dcc; border-radius: 50%; background: #171329; object-fit: cover;
}
.portal-profile-grid {
    display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; gap: 1rem;
}
.portal-profile-card h2 { margin-bottom: 1.15rem; font-size: clamp(1.15rem, 2vw, 1.35rem); }
.portal-profile-card h2 i { margin-inline-end: .3rem; color: var(--portal-accent); font-size: .86em; }
.portal-profile-account h2 i { color: #a7bcff; }
.portal-profile-data { margin: 0 0 1rem; }
.portal-profile-data > div { padding-block: .6rem; border-bottom: 1px solid #2b2940; }
.portal-profile-data > div:first-child { padding-top: 0; }
.portal-profile-data dt { font-size: .82rem; color: var(--portal-muted); }
.portal-profile-data dd { margin: .12rem 0 0; font-weight: 650; }
.portal-profile-email { padding: .8rem; border: 1px solid #33314a; border-radius: 12px; background: #0c101b; }
.portal-profile-email-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.portal-profile-email-heading h3 { margin: 0; font-size: .95rem; }
.portal-profile-email-status {
    padding: .1rem .55rem; border: 1px solid #69542e; border-radius: 99px; background: #2e251a;
    color: #f2d398; font-size: .75rem; font-weight: 750;
}
.portal-profile-email-status[data-verified="true"] { border-color: #355e57; background: #17322e; color: #a9ead1; }
.mihu-portal .portal-profile-email p[data-portal-email-value] { margin: .3rem 0 0; color: var(--portal-ink); }
.portal-profile-form, .portal-profile-fields { display: grid; min-width: 0; gap: .9rem; }
.portal-profile-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; border: 0;
}
.portal-profile-form label { min-width: 0; color: #ddd7ed; font-size: .9rem; }
.portal-profile-form :is(input:not([type="checkbox"]), select) { min-width: 0; min-height: 44px; width: 100%; }
.portal-profile-form :disabled { opacity: .75; }
.portal-profile-form [hidden] { display: none; }
.portal-profile-save {
    display: grid; justify-items: end; gap: .85rem; padding-top: .9rem; border-top: 1px solid #33314a;
}
.portal-profile-consent {
    display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 44px; padding: .45rem .7rem;
    border: 1px solid #3e3457; border-radius: 10px; background: #191628; color: #ddd7ed; font-size: .87rem;
}
.portal-profile-consent input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: #aa7df6; }
.mihu-portal .portal-profile-consent label { display: inline; cursor: pointer; }
.portal-profile-consent a { margin-inline-start: .25em; }
.mihu-portal .portal-profile-feedback {
    margin: 0 0 .85rem; padding: .55rem .7rem; border: 1px solid #51466b; border-radius: 10px; background: #1b172b; font-size: .85rem;
}
.mihu-portal .portal-profile-feedback[data-kind="success"] { border-color: #355e57; background: #17322e; color: #a9ead1; }
.mihu-portal .portal-profile-feedback[data-kind="error"] { border-color: #774253; background: #2b1925; color: #ffc7d6; }
.portal-email-settings { margin-top: .65rem; }
.portal-email-settings summary::-webkit-details-marker { display: none; }
.portal-email-settings[open] summary i { transform: rotate(180deg); }
.portal-email-settings .portal-profile-form { margin-top: .75rem; }
.portal-profile-email-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.mihu-portal .portal-profile-email .portal-profile-feedback { margin: 0; }
@media (max-width: 690px) {
    .portal-profile-grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
    .portal-profile-intro { margin-bottom: .75rem; }
    .portal-profile-identity img { width: 52px; height: 52px; }
    .portal-profile-save > button { width: 100%; }
}
@media (max-width: 460px) {
    .portal-profile-fields { grid-template-columns: minmax(0, 1fr); gap: .65rem; }
    .portal-profile-card h2 { margin-bottom: .85rem; }
    .portal-profile-form :is(input:not([type="checkbox"]), select) { font-size: 1rem; }
}
.mihu-portal.portal-dialog-open { overflow: hidden; }
.portal-legal-dialog {
    width: min(48rem, calc(100% - 1.5rem)); max-height: min(42rem, 88dvh); padding: 0;
}
.portal-legal-dialog[open] { display: flex; flex-direction: column; }
.portal-legal-dialog header {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    gap: .55rem; padding: .85rem 1rem; border-bottom: 1px solid var(--portal-border);
}
.portal-legal-dialog header h2 { margin: 0; }
.portal-legal-dialog header form { margin-inline-start: auto; }
.portal-legal-body { min-height: 0; padding: clamp(1rem, 3vw, 1.8rem); overflow-y: auto; overscroll-behavior: contain; }
.portal-legal-body:focus-visible { outline-offset: -4px; }
.mihu-portal .portal-legal-dialog [hidden] { display: none; }
.portal-document { max-width: 55rem; margin-inline: auto; }
.portal-legal-document { margin-inline: auto; max-width: 48rem; }
.portal-legal-version { font-size: .86rem; }
.portal-legal-toc { padding: clamp(.8rem, 2.5vw, 1.25rem); margin-bottom: 1.4rem; border: 1px solid var(--portal-border); border-radius: 13px; background: #171729; }
.portal-legal-toc ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; list-style: none; padding: 0; margin: .35rem 0 0; }
.portal-legal-toc a { display: flex; align-items: center; min-height: 44px; padding-block: .3rem; font-size: .89rem; }
.portal-legal-section { padding-block: 1.1rem; border-bottom: 1px solid var(--portal-border); overflow-wrap: anywhere; }
.portal-legal-section:last-child { border-bottom: 0; }
.portal-legal-section :is(h2, h3) { font-size: clamp(1.05rem, 2vw, 1.27rem); margin-bottom: .8rem; color: #e1c9ff; }
.portal-legal-dialog .portal-legal-section h3 { scroll-margin-top: .8rem; }
.portal-legal-section :is(p, ol) { margin: 0 0 .65rem; line-height: 1.75; }
.portal-legal-section ol { padding-inline-start: 1.4rem; color: var(--portal-muted); }
.portal-legal-section li + li { margin-top: .55rem; }
.portal-legal-section li strong { color: var(--portal-ink); }
.portal-legal-section > :last-child { margin-bottom: 0; }
.portal-about { max-width: 1120px; }
.portal-about-hero {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 1.35rem;
    padding: clamp(1.35rem, 5vw, 4rem);
    border: 1px solid #4a3b60; border-radius: 24px;
    background: radial-gradient(ellipse at 78% 52%, #392653, transparent 64%), linear-gradient(130deg, #161727, #0c101c);
}
.portal-about-hero h1 { font-size: clamp(2.5rem, 6.8vw, 5rem); margin: 0 0 .2em; line-height: 1.06; }
.portal-about-break { display: block; }
.portal-about-hero p { max-width: 29rem; }
.mihu-portal .portal-about-eyebrow { color: #c5a0ff; margin-bottom: .55rem; font-weight: 800; font-size: .73rem; letter-spacing: .16em; }
.portal-about-emblem {
    display: grid; place-items: center; aspect-ratio: 1; width: min(100%, 360px); margin-inline: auto; border: 1px solid #695081;
    border-radius: 50%; background: radial-gradient(circle, #674c8c55, #171326 70%); box-shadow: inset 0 0 0 11px #b89bf10a;
}
.portal-about-emblem img { width: 91%; height: auto; }
.portal-about-nav { display: flex; flex-wrap: wrap; gap: .45rem; padding-block: 1rem; }
.portal-about-story { display: grid; gap: 1rem; }
.portal-about-chapter {
    --chapter-accent: var(--portal-accent);
    padding: clamp(1.15rem, 4.2vw, 2.7rem);
    border: 1px solid var(--portal-border); border-radius: 20px;
    background: var(--portal-surface);
    min-width: 0; overflow-wrap: anywhere;
}
.portal-about-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(92px, .45fr); align-items: center; gap: 1rem; }
.portal-about-feature-art { display: grid; place-items: center; min-width: 0; min-height: 114px; border-radius: 16px; background: radial-gradient(ellipse, #694da250, transparent 72%); }
.portal-about-feature-art img { display: block; width: min(100%, 150px); height: auto; }
.portal-about-gold { --chapter-accent: var(--portal-gold); background: linear-gradient(110deg, #10141e, #261e24); }
.portal-about-trophy { color: var(--portal-gold); font-size: clamp(2.6rem, 7vw, 4.8rem); background: radial-gradient(ellipse, #b8783055, transparent 70%); }
.portal-about-chapter .portal-about-index, .portal-about-chapter .halloween-kicker {
    color: var(--chapter-accent); font-size: .85rem; letter-spacing: .04em; margin-bottom: .55rem;
}
.portal-about-chapter h2 { font-size: clamp(1.6rem, 3.6vw, 2.7rem); }
.portal-about-chapter > p { max-width: 43rem; }
.portal-about-recruit {
    margin-top: 1.7rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
    padding: clamp(1.15rem, 4vw, 2.5rem); border-color: #5c3885;
    background: radial-gradient(ellipse at 87% 53%, #32214b, transparent 62%), var(--portal-surface);
}
.portal-about-recruit p:last-child { margin-bottom: 0; }
.portal-about-recruit .portal-button { min-width: 8rem; background: linear-gradient(120deg, #8b44d8, #5e55cd); }
.portal-about .halloween-chapter { --chapter-accent: #fdba74; }
.portal-about-roles { display: flex; flex-wrap: wrap; gap: .55rem; padding: 0; list-style: none; margin: 0; }
.portal-about-role { display: inline-block; padding: .25rem .7rem; border: 1px solid #665578; color: var(--chapter-accent) !important; border-radius: 10px; }
.portal-about-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0; }
.portal-about-gallery figure { margin: 0; padding: .6rem; background: #0b0e19; border-radius: 12px; }
.portal-about-gallery img { display: block; width: 100%; max-height: 320px; object-fit: contain; height: auto; }
.portal-about-gallery figcaption { text-align: center; font-size: .85rem; color: var(--portal-muted); margin-top: .5rem; }
.portal-about .halloween-chapter {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, .75fr); gap: .75rem 1.4rem;
    background: radial-gradient(ellipse at 85% 30%, #42282c, transparent 62%), var(--portal-surface);
}
.portal-about .halloween-chapter > :is(.halloween-kicker, .halloween-title, .halloween-role) { grid-column: 1; }
.portal-about .halloween-chapter > :is(.halloween-gallery-heading, .halloween-gifts) { grid-column: 1 / -1; }
.portal-about .halloween-film { grid-area: 1 / 2 / 4 / 3; width: 100%; max-width: 420px; margin: 0; }
.portal-about .halloween-role { max-width: 43rem; }
.portal-about .halloween-gift img { max-width: 140px; margin-inline: auto; }
.portal-footer { margin-top: auto; background: #111523; border-top: 1px solid #2f2b46; }
.portal-footer-grid { display: grid; grid-template-columns: minmax(0,1.24fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,.8fr); gap: 1.1rem 1.4rem; padding-block: clamp(1.15rem, 3vw, 2.1rem); }
.portal-footer .portal-brand { gap: .55rem; }
.portal-footer .portal-brand img { width: 44px; height: 44px; }
.portal-footer nav { display: grid; align-content: start; justify-items: start; gap: .12rem; font-size: .89rem; min-width: 0; }
.portal-footer nav h2 { color: #e4ceff; font-size: .97rem; margin: 0 0 .18rem; }
.portal-footer nav a { color: #ced2e6; overflow-wrap: anywhere; display: flex; align-items: center; min-height: 34px; text-decoration: none; }
.portal-footer nav a:hover { color: #fff; text-decoration: underline; }
.portal-footer-brand p { margin: .6rem 0 0; font-size: .84rem; }
.portal-footer-copyright { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; border-top: 1px solid #302c45; padding-block: .75rem; color: var(--portal-muted); }
.portal-footer-copyright small { font-size: .78rem; }
@media (max-width: 720px) {
    .portal-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portal-about-hero h1 { font-size: clamp(1.4rem, 6vw, 2.6rem); }
}
@media (max-width: 600px) {
    .portal-about .halloween-chapter { grid-template-columns: minmax(0, 1fr); }
    .portal-about .halloween-film { grid-area: auto; margin-inline: auto; }
    .portal-about .halloween-gifts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
    .portal-about .halloween-gift { padding: .25rem; }
    .portal-about .halloween-gift figcaption { font-size: .74rem; }
}
@media (max-width: 960px) {
    .mihu-portal [id] { scroll-margin-top: 10rem; }
    .portal-navigation { flex-wrap: wrap; gap: .45rem; }
    .portal-navlinks { order: 3; width: 100%; padding-bottom: .35rem; }
}
@media (max-width: 690px) {
    .portal-container { width: calc(100% - 1.5rem); }
    .portal-brand { gap: .2rem; }
    .portal-navigation .portal-brand img { width: 56px; height: 56px; }
    .portal-brand small { font-size: .54rem; }
    .portal-navigation .portal-actions { gap: .3rem; }
    .portal-navigation .portal-button { min-height: 38px; padding: .35rem .55rem; font-size: .78rem; }
    .portal-navigation .portal-button i { display: none; }
    .portal-navlinks a { font-size: .8rem; }
    .portal-hero { grid-template-columns: 1fr; gap: .5rem; min-height: auto; }
    .portal-hero h1 { font-size: clamp(1.85rem, 7.7vw, 3rem); }
    .portal-hero h1 span { font-size: clamp(1.2rem, 5.8vw, 2.6rem); }
    .portal-services { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .portal-services li { grid-column: span 2; }
    .portal-services li:nth-last-child(-n+2) { grid-column: span 3; }
    .portal-service-face { font-size: .9rem; }
    .portal-service-back p { font-size: .78rem; }
    .portal-navlinks a { padding-inline: .1rem; }
    .portal-navlinks { gap: 0 .65rem; }
    .portal-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portal-filter-actions { grid-column: 1 / -1; }
    .portal-hero-art { min-height: 180px; max-width: 300px; width: 100%; margin-inline: auto; }
    .portal-mascot { width: min(62%, 160px); }
    .portal-stats dt, .portal-stats .portal-stat-unavailable { font-size: .72rem; }
    .portal-pair, .portal-grid, .portal-events { grid-template-columns: 1fr; }
    .portal-stats { padding-block: .75rem; }
    .portal-member-login { grid-template-columns: minmax(0, 1fr); max-width: 440px; min-height: auto; gap: 1.15rem; }
    .portal-login-card { grid-column: 1; }
    .portal-login-art { grid-row: 2; gap: .45rem; }
    .portal-login-orbit { width: min(100%, 210px); }
}
@media (max-width: 460px) {
    .mihu-portal [id] { scroll-margin-top: 11rem; }
    .portal-navlinks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .portal-navlinks a { justify-content: center; }
    .portal-about-hero { grid-template-columns: minmax(0, 1fr); }
    .portal-about-emblem { grid-row: 1; width: 138px; margin-inline: 0 auto; }
    .portal-about-break { display: inline; }
    .portal-footer-brand { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    .portal-hero-art img { animation: none; }
    .mihu-portal .portal-button { transition: none; transform: none; }
    .portal-service-card, .portal-service-front { transition: none; }
    .portal-service-card[open] { transform: none; }
    .portal-service-card[open] .portal-service-back { animation: none; }
}
.mihu-portal .portal-button-compact { min-height: 44px; padding: .37rem .78rem; font-size: .82rem; }
.portal-leaderboard {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start;
    background: radial-gradient(ellipse at 50% 0%, #302145 0%, transparent 65%), #10141e;
}
.portal-leaderboard h2 { grid-column: 1; grid-row: 1; margin: 0; }
.portal-leaderboard h2 i { color: var(--portal-gold); margin-inline-end: .2rem; }
.portal-leaderboard [data-ranking-month] { display: contents; }
.portal-ranking-month { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: .45rem; }
.portal-ranking-month time { min-width: 7rem; text-align: center; font-size: .88rem; color: var(--portal-ink); }
.mihu-portal .portal-ranking-arrow { min-width: 44px; padding-inline: .65rem; border-radius: 11px; }
.mihu-portal .portal-ranking-arrow[aria-disabled="true"] { opacity: .43; cursor: default; transform: none; }
.portal-leaderboard [data-ranking-month] > :is(ol, p) { grid-column: 1 / -1; margin-top: .9rem; }
.portal-leaderboard .portal-ranking-status { grid-column: 1 / -1; margin: 0; font-size: .86rem; }
.portal-ranking-status:not(:empty) { margin-top: .65rem; }
.portal-podium {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end;
    gap: clamp(.45rem, 1.5vw, .9rem); list-style: none; padding: 0; margin: 0;
}
.portal-podium-entry {
    --podium-accent: #d4bdfb;
    grid-column: span 2; display: grid; justify-items: center; align-content: center; gap: .42rem;
    min-width: 0; min-height: 135px; padding: .8rem .35rem;
    border: 1px solid #494057; border-top-color: var(--podium-accent); border-radius: 14px;
    background: linear-gradient(180deg, #252033, #151926); text-align: center;
}
.portal-podium:has([data-rank="3"]) [data-rank="1"] { grid-column: 3 / span 2; grid-row: 1; }
.portal-podium:has([data-rank="3"]) [data-rank="2"] { grid-column: 1 / span 2; grid-row: 1; }
.portal-podium:has([data-rank="3"]) [data-rank="3"] { grid-column: 5 / span 2; grid-row: 1; }
.portal-podium-entry[data-rank="1"] { --podium-accent: #ffd581; min-height: 160px; background: linear-gradient(180deg, #3f312d, #201c2a); }
.portal-podium-entry[data-rank="2"] { --podium-accent: #cee0ff; }
.portal-podium-entry[data-rank="3"] { --podium-accent: #ffbb98; }
.portal-podium-entry img { display: block; width: clamp(36px, 7vw, 64px); height: auto; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--podium-accent); object-fit: cover; }
.portal-podium-entry strong { max-width: 100%; overflow-wrap: anywhere; line-height: 1.35; }
.portal-podium-rank {
    display: grid; place-items: center; min-width: 1.45rem; min-height: 1.45rem;
    border-radius: 50%; background: var(--podium-accent); color: #17131d; font-size: .82rem; font-weight: 800;
}
.portal-podium-entry:nth-child(n+4) {
    grid-column: span 3; grid-template-columns: auto auto minmax(0, 1fr); justify-items: start; align-items: center;
    gap: .65rem; min-height: 0; padding: .6rem .8rem; text-align: left; background: #151926; border-color: #403951;
}
.portal-podium-entry:nth-child(n+4) img { width: 32px; }
.portal-vip-page { max-width: 920px; }
.portal-vip-intro { background: radial-gradient(ellipse at right top, #413125, transparent 68%), #181725; }
.portal-vip-levels { display: grid; gap: .9rem; }
.portal-vip-selector { min-width: 0; margin: 0; padding: 0; border: 0; }
.portal-vip-selector legend { padding: 0; margin-bottom: .55rem; color: var(--portal-muted); font-size: .9rem; }
.portal-vip-options { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; padding: .35rem; border: 1px solid var(--portal-border); border-radius: 15px; background: #10141e; }
.portal-vip-options label { position: relative; cursor: pointer; }
.portal-vip-options input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.portal-vip-options span {
    display: grid; place-items: center; min-height: 44px; padding: .35rem .75rem; border: 1px solid #504567;
    border-radius: 10px; background: #141826; color: #e6dcf8; font-size: .88rem; font-weight: 750;
}
.portal-vip-options input:checked + span { border-color: #b68af3; background: #5a358d; color: #fff; }
.portal-vip-options input:is([value="6"], [value="7"]):checked + span { border-color: #e2c174; background: #503b28; color: #ffe6aa; }
.portal-vip-panel:is([data-vip-tier="6"], [data-vip-tier="7"]) { border-color: #745b3a; }
.portal-vip-options input:focus-visible + span { outline: 2px solid var(--portal-focus); outline-offset: 3px; }
.portal-vip-panel h2 i { color: #ffd581; margin-inline-end: .35rem; }
.portal-vip-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(1rem, 3vw, 2.2rem); margin-top: 1rem; }
.portal-vip-thresholds { display: grid; align-content: start; gap: .7rem; margin: 0; }
.portal-vip-thresholds div { padding: 0 0 .65rem; border-bottom: 1px solid var(--portal-border); }
.portal-vip-rewards { min-width: 0; }
.portal-vip-thresholds dt { color: var(--portal-muted); font-size: .85rem; }
.portal-vip-thresholds dd { margin: .16rem 0 0; color: #e3caff; font-size: clamp(1.05rem, 3vw, 1.4rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.portal-vip-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .95rem; list-style: none; padding: 0; margin: 0; }
.portal-vip-benefits li { display: flex; align-items: baseline; gap: .55rem; padding: .45rem 0; border-bottom: 1px solid #282841; }
.portal-vip-benefits i { color: #bb97ff; font-size: .75rem; }
.mihu-portal .portal-vip-footnote { margin-top: .9rem; font-size: .82rem; }
@media (max-width: 690px) {
    .portal-podium-entry { font-size: .82rem; }
    .portal-podium-entry:nth-child(n+4) { gap: .33rem; padding-inline: .37rem; }
    .portal-vip-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .portal-vip-options span { padding-inline: .25rem; }
    .portal-vip-info, .portal-vip-benefits { grid-template-columns: 1fr; }
    .portal-vip-thresholds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .portal-ranking-month { grid-column: 1 / -1; grid-row: 2; margin-top: .65rem; }
    .portal-legal-toc ul { grid-template-columns: 1fr; }
}