/* ===== Portal theme: brings the portal in line with the landing page ===== */
:root{--blue:#4261ee;--ink:#182b34;--bg:#f8f9fb;--ease:cubic-bezier(.22,.72,.2,1);--ease2:cubic-bezier(.23,1,.32,1);--spring:cubic-bezier(.34,1.56,.64,1)}
.progress i{background:var(--blue)}

/* scrollbar */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#eef1f8}
::-webkit-scrollbar-thumb{background:linear-gradient(#7d98ff,#4261ee);border-radius:10px;border:3px solid #eef1f8}
::-webkit-scrollbar-thumb:hover{background:#3550d6}
@supports not selector(::-webkit-scrollbar){html{scrollbar-width:thin;scrollbar-color:#4261ee #eef1f8}}

/* ---------- buttons with text ---------- */
.button{position:relative;isolation:isolate;overflow:hidden;z-index:1;min-height:0;gap:12px;padding:6px 7px 6px 22px;background:var(--blue);color:#fff;border:2px solid var(--blue);box-shadow:0 14px 26px -8px #4261ee66;transition:box-shadow .4s var(--ease),color .5s ease .1s,border-color .5s ease}
.button.dark,.button.blue{background:var(--blue);color:#fff}
.button:hover{transform:none}
.button:before{content:'';position:absolute;z-index:-1;width:100%;aspect-ratio:1;left:-100%;top:50%;translate:0 -50%;border-radius:50%;background:#f9fafb;transition:all .7s ease}
.button:hover:before{left:0;scale:1.5}
.button:hover{color:var(--ink);border-color:#f9fafb;box-shadow:0 14px 26px -8px #4261ee40}
.button>svg{width:32px;height:32px;padding:8px;border:1px solid currentColor;border-radius:50%;stroke-width:1.8;transition:rotate .3s linear,background-color .3s linear,border-color .3s linear,color .3s}
.button:hover>svg{rotate:45deg;background:var(--blue);border-color:transparent;color:#fff}
.button.white,.button.outline{background:#fff;color:var(--ink);border-color:#e3e9ee;box-shadow:0 10px 24px -14px #2a4a6a55}
.button.white{border-color:#fff}
.button.white:before,.button.outline:before{background:var(--blue)}
.button.white:hover,.button.outline:hover{color:#fff;border-color:var(--blue);box-shadow:0 14px 26px -8px #4261ee40}
.button.white:hover>svg,.button.outline:hover>svg{background:#fff;color:var(--blue)}
.button:disabled{opacity:.5}
.button:focus-visible{outline-offset:4px}
.head-cta{display:flex;align-items:center;gap:10px}
.head-avatar{width:46px;height:46px;font-size:18px;background:#e3eafb;color:var(--blue);transition:background-color .3s,color .3s}
.head-avatar:hover{background:var(--blue);color:#fff}

/* ---------- text links (arrow in a circle) ---------- */
.text-link{gap:10px;color:var(--ink);transition:color .3s;cursor:pointer}
.text-link svg{width:28px;height:28px;padding:7px;border:1px solid #cfd9e1;border-radius:50%;transition:background-color .3s,border-color .3s,color .3s}
.text-link:hover{color:var(--blue)}
.text-link:hover svg{background:var(--blue);border-color:var(--blue);color:#fff}
.link-button{transition:color .3s}.link-button:hover{color:var(--blue)}

/* ---------- round buttons: same sweep, no tilt ---------- */
.circle{position:relative;overflow:hidden;isolation:isolate;transition:color .5s ease .1s,border-color .4s,box-shadow .4s}
.circle:before{content:'';position:absolute;z-index:-1;width:100%;aspect-ratio:1;left:-100%;top:50%;translate:0 -50%;border-radius:50%;background:var(--blue);transition:all .7s ease}
.circle:hover:before{left:0;scale:1.5}
.circle:hover{color:#fff;border-color:var(--blue)}
.circle.selected:before{display:none}
.circle:hover{transform:none}

/* tabs / subnav */
.subnav a,.tabs button{transition:background-color .35s,color .35s}
.subnav a:not(.active):hover,.tabs button:not(.active):hover{background:#e8edf2;color:var(--ink)}
.subnav .active,.tabs .active{background:var(--blue);color:#fff}
.sidebar nav>a{transition:background-color .3s,color .3s}
.sidebar nav>a:not(.active):hover{background:#eef2ff;color:var(--blue)}
.sidebar nav>a.active{background:var(--blue)}
.sidebar .side-photo>a{transition:background-color .3s,border-color .3s}.sidebar .side-photo>a:hover{background:var(--blue);border-color:var(--blue)}
.avatar{background:#e3eafb;color:var(--blue)}
.notification-icon i{background:var(--blue)}
.text-link[data-action],.plan-item .button{}

/* ---------- hearts (uiverse plastic-moth-91 look) ---------- */
.save{background:none;width:44px;height:44px;top:8px;right:8px;filter:drop-shadow(0 2px 6px #00000040);transition:scale .3s}
.save:hover{scale:1.12}
.save svg,.circle[data-action="save"] svg{position:absolute;stroke:none}
.save svg{width:28px;height:28px}
.save .heart-o{fill:#fff;transition:fill .3s}
.save:hover .heart-o{fill:#ff5b89}
.save .heart-f,.circle[data-action="save"] .heart-f{display:none;fill:#ff5b89}
.save.selected{background:none;color:inherit}
.save.selected .heart-f{display:block}
.save.pop .heart-f{animation:hf 1s}
.save.pop:after,.circle[data-action="save"].pop:after{content:'';position:absolute;inset:6px;border-radius:50%;border:2px solid #ff5b89;animation:hring .6s ease-out forwards}
@keyframes hf{0%{transform:scale(0)}25%{transform:scale(1.2)}50%{transform:scale(1);filter:brightness(1.5)}}
@keyframes hring{from{transform:scale(.4);opacity:1}to{transform:scale(1.6);opacity:0}}
.circle[data-action="save"] svg{width:20px;height:20px}
.circle[data-action="save"] .heart-o{fill:var(--ink);transition:fill .3s}
.circle[data-action="save"]:hover .heart-o{fill:#fff}
.circle[data-action="save"].selected{border-color:#ffb3c6}
.circle[data-action="save"].selected .heart-o{fill:transparent}
.circle[data-action="save"].selected .heart-f{display:block}

/* ---------- public header: dock ---------- */
.public-header nav.dock{position:relative;display:flex;gap:2px;padding:6px;border-radius:999px;background:#ffffffb8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid #e3e9f0;box-shadow:0 10px 30px -14px #2a4a6a40;font-size:12px}
.dock a{position:relative;display:block;padding:11px 17px;border-radius:999px;color:var(--ink);transform:scale(var(--s,1));transition:transform .22s ease-out,color .3s;z-index:1;white-space:nowrap}
.dock a:hover{color:var(--blue)}
.dock a.active{color:var(--blue)}
.dock a.active:before{content:'';position:absolute;left:50%;bottom:3px;translate:-50% 0;width:4px;height:4px;border-radius:50%;background:var(--blue)}
.dock .dock-hl{position:absolute;left:0;top:6px;height:calc(100% - 12px);width:0;border-radius:999px;background:#eaf0ff;box-shadow:inset 0 0 0 1px #d6e0fb;opacity:0;pointer-events:none;transition:transform .4s var(--ease2),width .4s var(--ease2),opacity .25s;z-index:0}
.dock.hl-on .dock-hl{opacity:1}
.public-footer .foot-links{display:flex;gap:26px;flex-wrap:wrap}
.public-footer .foot-links a{font-size:11px;color:#5c7687;transition:color .3s}.public-footer .foot-links a:hover{color:var(--blue)}
.demo-login{margin-top:14px;font-size:11px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap}

/* ---------- hover labels on photos ---------- */
.qp{display:inline-flex!important;align-items:center;position:relative;height:32px!important;min-width:32px;padding:0!important;overflow:hidden;white-space:nowrap;cursor:help;background:#ffffffeb!important;color:#20323a!important;border:1px solid #ffffff80!important;border-radius:999px;font-size:11px!important;font-weight:500;letter-spacing:.7px!important;box-shadow:0 4px 14px #10233a1f}
.qp .q{position:absolute;left:0;top:0;width:30px;height:30px;display:grid;place-items:center;font-size:12px;font-weight:600;letter-spacing:0;transition:opacity .35s ease,scale .7s var(--ease2)}
.qp .t{display:grid;grid-template-columns:0fr;opacity:0;flex:none;transition:grid-template-columns .7s var(--ease2),opacity .45s ease}
.qp .t>span{overflow:hidden;min-width:0}
.qp .t i{display:block;font-style:normal;padding:0 15px;white-space:nowrap}
.qp:is(:hover,:focus,.event-card:hover *) .q{opacity:0;scale:.5}
.qp:is(:hover,:focus,.event-card:hover *) .t{grid-template-columns:1fr;opacity:1}

/* ---------- motion ---------- */
@keyframes rise{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
.page-enter .public-main>*,.page-enter .content main>*{animation:rise .7s var(--ease) both}
.page-enter .public-main>:nth-child(2),.page-enter .content main>:nth-child(2){animation-delay:.07s}
.page-enter .public-main>:nth-child(3),.page-enter .content main>:nth-child(3){animation-delay:.14s}
.page-enter .public-main>:nth-child(4),.page-enter .content main>:nth-child(4){animation-delay:.21s}
.event-card h3 a{transition:color .3s}.event-card:hover h3 a{color:var(--blue)}
.panel,.stat-card,.route-card,.reward-card,.activity-card,.career-card{transition:border-color .3s,box-shadow .4s}
.panel:hover,.stat-card:hover{border-color:#d6e0fb}
.prototype-tools{background:#ffffffe8;color:var(--ink);border:1px solid #e3e9f0;box-shadow:0 10px 30px -14px #2a4a6a55;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.prototype-tools a{color:var(--blue)}
#toast{background:var(--ink);border-radius:999px;padding:14px 24px}
.error{color:#c43e58}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:1150px){.public-header{gap:14px;flex-wrap:wrap;height:auto;padding:16px 0 10px;row-gap:12px}.public-header nav.dock{order:3;flex:1 0 100%;overflow-x:auto;scrollbar-width:none;justify-content:flex-start;max-width:100%}.public-header nav.dock::-webkit-scrollbar{display:none}.public-header nav.dock a{flex:none}}


:where(.circle){position:relative}

.photo-banner .pill,.detail-title .pill{color:var(--ink)}
.cta-join{}
@media(max-width:760px){.head-cta .cta-join{display:none}}
@media(max-width:760px){
.button{padding:5px 6px 5px 18px;min-height:0;font-size:11px;gap:10px}
.button>svg{width:32px;height:32px;flex:none}
.public-header .button{padding:4px 5px 4px 14px;font-size:10px;min-height:0;gap:8px}
.public-header .button svg{width:26px;height:26px;padding:6px;flex:none}
}

/* ===== v2: landing-style interactivity ===== */
.rv{opacity:0;translate:0 40px;filter:blur(5px);transition:opacity .9s ease var(--d,0s),translate 1s var(--ease) var(--d,0s),filter .9s ease var(--d,0s),border-color .3s,box-shadow .4s,background-color .3s}
.rv.in{opacity:1;translate:0 0;filter:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;translate:none;filter:none}}
.progress-bar{position:fixed;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,#4261ee,#6f8cff);transform-origin:0 50%;transform:scaleX(0);z-index:100;pointer-events:none}
.fx{position:fixed;z-index:200;pointer-events:none;line-height:1;will-change:transform,opacity}
.eyebrow i{animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #3a9c8866}100%{box-shadow:0 0 0 10px #3a9c8800}}

/* clickable blocks */
.clk{cursor:pointer}
.stat-card,.balance-card,.mini-event,.plan-item,.application,.notification,.reward-card,.route-card,.activity-card,.career-card{transition:border-color .3s,box-shadow .4s,background-color .3s}
.stat-card.clk:hover,.plan-item.clk:hover,.application.clk:hover,.notification.clk:hover,.mini-event.clk:hover,.activity-card.clk:hover,.career-card.clk:hover,.route-card.clk:hover,.reward-card.clk:hover{border-color:#c9d5fb;box-shadow:0 18px 36px -22px #4261ee66}
.stat-card.clk:hover strong{color:var(--blue)}
.stat-card strong{transition:color .3s}
.photo-banner>img,.photo-strip img,.route-photo img,.reward-photo img,.activity-card>img,.career-card>img,.mini-event>img,.direction-tile img,.interest-option img,.detail-hero img{transition:transform 1.1s var(--ease)}
.photo-banner.clk:hover>img,.photo-strip.clk:hover img,.route-card:hover .route-photo img,.reward-card:hover .reward-photo img,.activity-card:hover>img,.career-card:hover>img,.mini-event:hover>img,.direction-tile:hover img,.interest-option:hover img,.detail-hero:hover img{transform:scale(1.06)}
.photo-banner,.photo-strip>div,.route-photo,.reward-photo,.detail-hero .hero-main{overflow:hidden}
.balance-decoration{animation:spin 40s linear infinite}
@keyframes spin{to{rotate:360deg}}
.balance-card.clk:hover .balance-decoration{border-color:#8da3e6}
.badge-symbol{transition:background-color .3s,color .3s,transform .5s var(--spring)}
.achievement-mini:hover .badge-symbol{background:var(--blue);color:#fff;transform:rotate(-8deg)}

/* ---------- calendar ---------- */
.calendar-card{position:relative;overflow:hidden}
.calendar-card:before{content:'';position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(#4261ee22,transparent 70%);pointer-events:none}
.calendar-title{display:flex;align-items:baseline;gap:8px}
.calendar-grid{gap:6px}
.calendar-grid>span{font-size:9px;letter-spacing:.5px}
.calendar-grid button{position:relative;height:38px;border-radius:13px;font-size:12px;color:var(--ink);background:transparent;transition:background-color .3s,color .3s,scale .35s var(--spring),box-shadow .35s}
.calendar-grid button:hover{background:#fff;color:var(--blue);scale:1.14;box-shadow:0 10px 18px -8px #4261ee77;z-index:2}
.calendar-grid button:active{scale:.92}
.calendar-grid .marked{background:#fff;color:var(--blue);font-weight:500;box-shadow:inset 0 0 0 1px #d6e0fb}
.calendar-grid .marked:after{content:'';position:absolute;left:50%;bottom:5px;translate:-50% 0;width:4px;height:4px;border-radius:50%;background:var(--blue);transition:background-color .3s}
.calendar-grid button.selected,.calendar-grid button.selected:hover{background:var(--blue)!important;color:#fff!important;box-shadow:0 12px 22px -8px #4261ee99;animation:dayPop .55s var(--spring)}
.calendar-grid button.selected:after{background:#fff}
@keyframes dayPop{0%{scale:.7}60%{scale:1.18}100%{scale:1.08}}
.calendar-grid button.selected{scale:1.08}
.calendar-grid button[data-tip]:hover:before{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;translate:-50% 0;padding:5px 10px;border-radius:999px;background:var(--ink);color:#fff;font-size:10px;font-weight:400;white-space:nowrap;pointer-events:none;z-index:6}