:root{--bs-body-font-family:'Plus Jakarta Sans',system-ui,sans-serif;--bs-body-bg:#eceef7;--bs-card-bg:#fff;--bs-list-group-bg:#fff;--bs-tertiary-bg:#fafbff;--bs-body-color:#1a1c2b;--brand:#4f5bd5;--brand-2:#7c3aed;--amber:#f59e0b}
body{padding-bottom:92px}
header{border-color:#e7e9f4!important}
a{color:var(--brand);text-decoration:none}a:hover{color:#3b46b8}
.shell{max-width:980px}.narrow{max-width:460px}.wide{max-width:620px}
.mono{font-family:'JetBrains Mono',monospace}
.tiny{font-size:.74rem}.tiny-link{font-size:.75rem}.small-name{font-size:.75rem;color:#4a4f68}
.card-copy{font-size:.82rem;line-height:1.6}.card-title-sm{font-size:.88rem}
.label{font-size:.72rem;color:#8d92ab;font-weight:600;display:block}
.text-brand{color:var(--brand)!important}.bg-brand{background:var(--brand)!important}.bg-brand-soft{background:#eef0ff}
.text-amber{color:var(--amber)}.bg-amber{background:var(--amber)}.bg-green{background:#22c55e}
.grad{background:linear-gradient(140deg,#5a63e8,#7c3aed)}
.btn-brand{background:linear-gradient(90deg,#5a63e8,#7c3aed);color:#fff;border:none;font-weight:800}.btn-brand:hover{color:#fff;filter:brightness(1.06)}
.btn-grab{background:linear-gradient(90deg,#ef4444,#f59e0b);color:#fff;border:none;font-weight:800;box-shadow:0 8px 20px rgba(239,110,60,.26)}.btn-grab:hover{color:#fff;filter:brightness(1.06)}
.card{border-color:#e7e9f4;border-radius:1rem}.soft-shadow{box-shadow:0 6px 20px rgba(25,28,70,.05)}
.slot{background:repeating-linear-gradient(135deg,#e4e7f7 0 10px,#d9ddf2 10px 20px);display:flex;align-items:center;justify-content:center;text-align:center}
.slot span{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:#5b6182}
.hero{aspect-ratio:16/8;border-color:#d2d7ef!important}.ratio-16x9{aspect-ratio:16/9}
.thumb{width:104px;height:104px;flex-shrink:0}.thumb-sm{width:56px;height:56px;flex-shrink:0}
.avatar-dot{width:28px;height:28px;border-radius:50%;background:linear-gradient(140deg,#5a63e8,#38bdf8);display:block}
.ticker-wrap{background:linear-gradient(180deg,#fff,#f4f6fd)}
.ticker{border-color:#e7e9f4!important;border-left:4px solid var(--brand)!important}
.ticker-avatar{width:22px;height:22px;font-size:.68rem;display:inline-flex;align-items:center;justify-content:center}
[data-ticker-body]{animation:tickerIn .4s ease both}
.screen{animation:popIn .28s ease both}
@keyframes popIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes tickerIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.form-control{background:#fafbff;border-color:#dfe3f4;border-radius:.7rem;padding:.8rem .9rem}
.form-control:focus{border-color:var(--brand);box-shadow:none;background:#fff}
.pw-wrap{position:relative}.pw-wrap .form-control{padding-right:3rem}
.pw-eye{position:absolute;top:50%;right:.45rem;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;border:0;border-radius:.5rem;background:transparent;color:#8a90a8}
.pw-eye:hover,.pw-eye:focus-visible{color:var(--brand);background:#eef0fb;outline:0}
input::-ms-reveal,input::-ms-clear{display:none}
.table-head th{background:var(--brand);color:#fff;font-size:.7rem;font-weight:700;border:0}.table-head.bg-success th{background:#16a34a}
.tbl{font-size:.78rem}
.summary{background:#fafbff}
.deposit-hero{background:linear-gradient(150deg,#5a63e8,#7c3aed)}.glass{background:rgba(255,255,255,.18)}.overlap{margin-top:-14px}
.steps .step{width:22px;height:22px;border-radius:50%;background:#c3c7dc;color:#fff;font-size:.68rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.steps .step.on{background:var(--brand)}.steps .step.done{background:#16a34a}
.qr{width:172px;height:172px;border:1px solid #e2e5f3;border-radius:.75rem;background:conic-gradient(from 45deg,#1a1c2b 0 25%,#fff 0 50%,#1a1c2b 0 75%,#fff 0);background-size:22px 22px;opacity:.9}
.alert-instructions{background:#fef9c3;border-color:#fde68a;color:#7c5510;font-size:.74rem;line-height:1.6}.alert-instructions strong{color:#92400e}
.alert-info-soft{background:#eef0ff;border-color:#dbe0ff;color:#4f5bd5;font-size:.78rem}
.coin{width:62px;height:62px;background:linear-gradient(150deg,#fbbf24,#b45309)}
.profile-hero{background:linear-gradient(100deg,#2563eb,#38bdf8)}.avatar-lg{width:62px;height:62px;background:rgba(255,255,255,.25)}
.action-card{display:block;overflow:hidden;color:inherit;border:1px solid #e7e9f4}.action-card .bar{height:12px}.action-card:hover{color:inherit;box-shadow:0 6px 20px rgba(25,28,70,.08)}
.menu-icon{width:30px;height:30px;background:#fee2e2;flex-shrink:0}
.member-dot{width:26px;height:26px;background:#eef0ff;font-size:.7rem;display:inline-flex;align-items:center;justify-content:center}
.lock{font-size:.55rem}
.toast-slot{bottom:104px;z-index:1080}
.navbar-bottom{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e7e9f4;box-shadow:0 -4px 20px rgba(25,28,70,.06);z-index:1030}
.navbar-bottom a{display:block;padding:.65rem .25rem .8rem;color:#b9bed6;font-size:.63rem;font-weight:700}
.navbar-bottom a.active{color:var(--brand)}
.navbar-bottom .mark{display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin:0 auto .3rem;border-radius:9px;color:#fff;background:currentColor}
.tier-mark{width:46px;height:46px}
.order-price{color:#2563eb}

/* info cards — staggered entrance + hover lift */
.info-card{opacity:0;animation:cardIn .55s cubic-bezier(.22,.8,.3,1) forwards;transition:transform .25s ease,box-shadow .25s ease}
.info-card:nth-child(1){animation-delay:.05s}.info-card:nth-child(2){animation-delay:.15s}.info-card:nth-child(3){animation-delay:.25s}.info-card:nth-child(4){animation-delay:.35s}.info-card:nth-child(5){animation-delay:.45s}
.info-card:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(25,28,70,.12)}
.info-card .slot{overflow:hidden;position:relative}
.info-card .slot::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s ease}
.info-card:hover .slot::after{transform:translateX(120%)}
.info-card .tiny-link{display:inline-block;transition:transform .2s ease}
.info-card:hover .tiny-link{transform:translateX(4px)}
@keyframes cardIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.info-card{animation:none;opacity:1}.info-card:hover{transform:none}}

/* task records — polished header, tabs and rows */
.record-head{background:linear-gradient(120deg,#4f5bd5 0%,#7c3aed 55%,#db2777 130%);box-shadow:0 14px 34px rgba(79,91,213,.28)}
.record-head .label{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.quota-bar{height:8px;width:min(280px,60vw);border-radius:999px;background:rgba(255,255,255,.25);overflow:hidden}
.quota-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#fde68a,#fff);width:0;transition:width .8s cubic-bezier(.22,.8,.3,1)}
.record-tabs .nav-link{border-radius:.85rem;color:#8d92ab;transition:color .2s ease,background .2s ease}
.record-tabs .nav-link.active{background:linear-gradient(90deg,#ef4444,#f59e0b,#4f5bd5);color:#fff}
.record-row{opacity:0;animation:cardIn .5s cubic-bezier(.22,.8,.3,1) forwards;border-left:3px solid transparent;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.record-row:nth-child(1){animation-delay:.04s}.record-row:nth-child(2){animation-delay:.12s}.record-row:nth-child(3){animation-delay:.2s}.record-row:nth-child(4){animation-delay:.28s}.record-row:nth-child(n+5){animation-delay:.34s}
.record-row:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(25,28,70,.1);border-left-color:#7c3aed}
.record-row .metric{background:#fafbff;border-radius:.6rem;padding:.55rem .65rem}
.record-row .order-no{letter-spacing:.02em}
@media (prefers-reduced-motion:reduce){.record-row{animation:none;opacity:1}.record-row:hover{transform:none}}

/* colorful bottom nav icons */
.navbar-bottom .col:nth-child(1) .mark{background:linear-gradient(140deg,#4f5bd5,#38bdf8)}
.navbar-bottom .col:nth-child(2) .mark{background:linear-gradient(140deg,#f59e0b,#ea580c)}
.navbar-bottom .col:nth-child(3) .mark{background:linear-gradient(140deg,#7c3aed,#db2777)}
.navbar-bottom .col:nth-child(4) .mark{background:linear-gradient(140deg,#16a34a,#84cc16)}
.navbar-bottom .col:nth-child(5) .mark{background:linear-gradient(140deg,#2563eb,#06b6d4)}
.navbar-bottom .mark{transition:transform .22s ease,box-shadow .22s ease,opacity .22s ease;opacity:.45}
.navbar-bottom a:hover .mark{opacity:.85;transform:translateY(-2px)}
.navbar-bottom a.active .mark{opacity:1;transform:scale(1.12);box-shadow:0 4px 12px rgba(25,28,70,.22)}
.navbar-bottom a.active{color:#1a1c2b}

/* profile menu rows */
.menu-row{border:0!important;border-top:1px solid #f2f3fa!important;transition:background .2s ease,padding-left .2s ease}
.menu-row:first-child{border-top:0!important}
.menu-row:hover{background:#fafbff;padding-left:1.35rem}
.menu-row .menu-icon{width:34px;height:34px;color:#fff;font-size:.8rem;letter-spacing:-.02em;box-shadow:0 4px 10px rgba(25,28,70,.14);transition:transform .2s ease}
.menu-row:hover .menu-icon{transform:scale(1.08) rotate(-3deg)}
.menu-row .label{font-size:.68rem;margin-top:.1rem}
.menu-row .chev{color:#c3c7dc;font-size:1.2rem;line-height:1;transition:transform .2s ease,color .2s ease}
.menu-row:hover .chev{color:var(--brand);transform:translateX(4px)}
.m-acc{background:linear-gradient(140deg,#4f5bd5,#38bdf8)}
.m-pwd{background:linear-gradient(140deg,#7c3aed,#db2777)}
.m-com{background:linear-gradient(140deg,#16a34a,#84cc16)}
.m-dep{background:linear-gradient(140deg,#f59e0b,#ea580c)}
.m-wdr{background:linear-gradient(140deg,#0ea5e9,#22d3ee)}
.m-team{background:linear-gradient(140deg,#ef4444,#f59e0b)}
.m-out{background:linear-gradient(140deg,#ff5a36,#f97316)}
@media (prefers-reduced-motion:reduce){.menu-row:hover{padding-left:1rem}.menu-row:hover .menu-icon,.menu-row:hover .chev{transform:none}}

.card,.list-group-item,.action-card{background-color:#fff}

/* auto-sliding hero */
.hero-carousel{border:1px solid #d2d7ef;box-shadow:0 10px 28px rgba(25,28,70,.08)}
.hero-carousel .carousel-inner-fix{position:relative;width:100%;overflow:hidden}
.hero-carousel .carousel-item{transition:transform .6s ease}
.hero-carousel .carousel-caption{left:1.5rem;right:auto;bottom:2.2rem;text-align:left}
.hero-carousel .hero-cap{display:inline-block;background:rgba(26,28,43,.72);color:#fff;padding:.5rem .9rem;border-radius:.7rem;font-size:.85rem;backdrop-filter:blur(4px)}
.hero-carousel .carousel-indicators{margin-bottom:.65rem}
.hero-carousel .carousel-indicators [data-bs-target]{width:22px;height:4px;border-radius:2px;background:#fff;opacity:.5;border:0}
.hero-carousel .carousel-indicators .active{opacity:1;background:var(--brand)}
.hero-carousel .carousel-control-prev-icon,.hero-carousel .carousel-control-next-icon{background-color:rgba(26,28,43,.55);border-radius:50%;padding:1rem;background-size:45%}