/* MistHub Liquid Glass — readable frosted surfaces with an opaque fallback. */
:root{--bg:#f2f5fc;--ink:#20283b;--sub:#747e92;--line:#dce4f1;--blue:#3f64ed}
body{background:#f2f5fc;background-image:radial-gradient(ellipse at 78% 4%,#d6dcfb99,transparent 45%),radial-gradient(ellipse at 30% 45%,#d9effb88,transparent 48%),radial-gradient(ellipse at 90% 85%,#ebe0f7aa,transparent 40%);background-attachment:fixed}.main{position:relative}.sidebar{background:#ffffff9c;backdrop-filter:blur(25px) saturate(160%);-webkit-backdrop-filter:blur(25px) saturate(160%);border-right:1px solid #fff9}.logo{background:linear-gradient(140deg,#27334f,#111b2e);box-shadow:inset 0 1px 0 #ffffff42,0 4px 10px #283d6420}.nav.active{background:linear-gradient(130deg,#ffffffd9,#e3eaff9c);border:1px solid #fff;box-shadow:0 4px 15px #5875b80c;padding:13px 12px}.card,.glass-shortcut,.payment-strip{background:#ffffffac;border:1px solid #ffffffed;box-shadow:0 5px 24px #536da00a,inset 0 1px 0 #fff;backdrop-filter:blur(20px) saturate(145%);-webkit-backdrop-filter:blur(20px) saturate(145%)}.card{border-radius:23px}.hero{background:radial-gradient(ellipse at 95% 5%,#6580ae80,transparent 57%),linear-gradient(130deg,#1c2941,#273552 65%,#334260);border:1px solid #ffffff9c;box-shadow:inset 0 1px 0 #ffffff3b,0 15px 40px #304d7b24;border-radius:26px}.hero:after{border-color:#e0ebff15;box-shadow:0 0 0 43px #e3ebff04,0 0 0 86px #e3ebff04,0 0 0 129px #e3ebff03}.hero p{color:#b1bed3}.hero-label{color:#c0cbde}.date small{color:#b1bed3}.badge{background:#8ce9bb14;border-color:#b3f9d53b;color:#c7f7de;backdrop-filter:blur(10px)}.renew{background:linear-gradient(130deg,#ffffff20,#ffffff0a);border:1px solid #ffffff46;box-shadow:inset 0 1px 0 #ffffff24;border-radius:13px;padding:11px 17px}.primary{background:linear-gradient(130deg,#5079ff,#3c5ee4);box-shadow:inset 0 1px 0 #ffffff46,0 6px 18px #4068e625;border-radius:13px}.primary:hover{background:linear-gradient(130deg,#416bec,#3655ce)}.primary:disabled{box-shadow:none;opacity:.58}.top .avatar{background:linear-gradient(135deg,#fffffff2,#dce5ff);border:1px solid #fff;box-shadow:0 3px 12px #4d67a212}.soft-icon{background:linear-gradient(140deg,#fff,#e2eaff);border:1px solid #fff;box-shadow:0 4px 12px #4164b60a}.info{border-color:#dce4f080}.info span{color:#778299}.textbtn{color:#7b86a0}.notice{background:#e4ebf875;color:#64738e;border:1px solid #ffffff94}.footer{color:#78859c}.eyebrow{color:#8291ad}.overview-extras{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}.glass-shortcut{display:flex;align-items:center;text-align:left;gap:13px;border-radius:20px;padding:18px 20px;transition:transform .2s,box-shadow .2s}.glass-shortcut:hover{transform:translateY(-2px);box-shadow:0 8px 24px #536da016}.glass-shortcut span{display:block;font-size:10px;color:#77829a;margin-bottom:6px}.glass-shortcut b{font-size:13px;letter-spacing:-.2px}.glass-shortcut small{font-size:10px;font-weight:500;color:#8090ac;margin-left:3px}.shortcut-icon{height:42px;flex:0 0 42px;border-radius:14px;display:grid;place-items:center;border:1px solid #fff;box-shadow:inset 0 1px 0 #fff,0 3px 10px #62759e12}.violet{background:linear-gradient(135deg,#f9f2ff,#e7e0fd);color:#9474cc}.cyan{background:linear-gradient(135deg,#effcff,#dceefb);color:#579cbd}.shortcut-arrow{margin-left:auto;width:16px;color:#899ab7;flex-shrink:0}.payment-strip{display:flex;align-items:center;gap:13px;border-radius:18px;padding:17px 20px;margin-top:16px}.payment-icon{width:34px;height:34px;display:grid;place-items:center;color:#7286b0;background:#edf1fc80;border-radius:10px;flex-shrink:0}.payment-icon svg{width:19px}.payment-strip h3{font-size:12px;margin:0 0 4px;font-weight:700}.payment-strip p{font-size:10px;color:#7e8aa1}.payment-action{margin-left:auto;display:flex;align-items:center;gap:7px;flex-shrink:0;background:none;border:0;font-size:10px;color:#607cbd}.payment-action svg{width:15px}.renewal-summary{background:linear-gradient(125deg,#f4f7ffaf,#e7efffa0);border:1px solid #fff;border-radius:15px;padding:18px;margin-top:21px}.renewal-summary span{display:block;font-size:10px;color:#7c89a1;margin-bottom:7px}.renewal-summary strong{font-size:18px;letter-spacing:-.5px}.renewal-summary p{font-size:11px;margin-top:8px}.soon-pill{background:#ffffffa6;border:1px solid white;border-radius:20px;padding:7px 13px;font-size:10px;color:#8673b2}.rewards-hero{border-radius:26px;padding:30px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 90% 0,#d5c8fda1,transparent 65%),linear-gradient(125deg,#f9f5ffb8,#e9e5fba6);border:1px solid #fff;box-shadow:inset 0 1px 0 #fff,0 10px 30px #8e81b512}.rewards-label{font-size:11px;color:#837b9c}.rewards-hero h2{font-size:56px;letter-spacing:-2px;font-weight:700;margin:14px 0 8px;color:#5d507f}.rewards-hero h2 small{font-size:18px;letter-spacing:-.5px;font-weight:500;color:#9283b1}.rewards-hero p{font-size:11px;color:#897d9e}.rewards-orb{position:absolute;right:34px;top:36px;width:105px;height:105px;border-radius:32px;transform:rotate(12deg);display:grid;place-items:center;background:linear-gradient(130deg,#ffffffb8,#c9b2ec45);border:1px solid #ffffffca;box-shadow:inset 0 1px 0 #fff,0 15px 35px #9174c319}.rewards-orb svg{width:48px;height:48px;color:#ab91cb;stroke-width:1.1}.rewards-explain,.history-card{margin-top:18px}.rewards-explain>p{font-size:12px;max-width:470px}.muted-label{font-size:10px;color:#8e98a9}.empty-state{text-align:center;padding:20px 10px 25px}.empty-symbol{width:52px;height:52px;margin:0 auto 15px;display:grid;place-items:center;border-radius:17px;border:1px solid #fff;background:#e9eef980;color:#a5b2ca}.empty-symbol svg{width:24px;height:24px}.empty-state h3{font-size:13px;font-weight:600;margin:0 0 8px;color:#7a86a0}.empty-state p{font-size:11px;color:#8d98ac;line-height:1.9}.friends-hero{padding:28px;text-align:center;border-radius:25px;border:1px solid #fff;background:radial-gradient(ellipse at 0 0,#d5edfb70,transparent 60%),linear-gradient(130deg,#f6fbffc4,#e4eafa9c);box-shadow:inset 0 1px 0 #fff}.friends-hero h2{font-size:25px;letter-spacing:-.7px;margin:18px 0 10px;color:#475d85;line-height:1.35}.friends-hero p{font-size:12px;color:#8190a9}.friend-bubbles{display:flex;justify-content:center;align-items:center;padding-top:6px}.friend-bubbles span{width:45px;height:45px;border-radius:50%;display:grid;place-items:center;border:2px solid #fff;background:linear-gradient(125deg,#f2ecff,#daceee);color:#9786b1;font-size:14px;box-shadow:0 5px 15px #8d98bb16}.friend-bubbles span:nth-child(2){width:59px;height:59px;background:linear-gradient(125deg,#fff,#d8e5ff);color:#7c97c5;margin:0 -6px;z-index:1}.friend-bubbles span:nth-child(3){background:linear-gradient(125deg,#ecf8ff,#cbe3f1);color:#8babbf}.friend-stats{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:18px 0}.friend-stats .card{padding:20px}.friend-stats span{display:block;font-size:10px;color:#7b88a1}.friend-stats b{display:block;font-size:31px;color:#566b93;margin:10px 0}.friend-stats small{font-size:10px;color:#8c99af}.bottom-nav{left:auto;right:auto;bottom:18px;border:1px solid #ffffffed;background:#ffffffa9;box-shadow:inset 0 1px 0 #fff,0 8px 30px #3c587e1b;backdrop-filter:blur(30px) saturate(170%);-webkit-backdrop-filter:blur(30px) saturate(170%)}.bottom-nav button.active{background:linear-gradient(135deg,#ffffffee,#d9e4ff7d);box-shadow:inset 0 1px 0 white,0 2px 9px #5d75ae0b;border-radius:18px;color:#4469da}.gate-box{background:#ffffff85;border:1px solid white;border-radius:29px;padding:30px;backdrop-filter:blur(25px);box-shadow:0 15px 55px #5773a312}.demo-banner{background:#ffffff9c;border:1px solid white;color:#71809c;font-size:10px;line-height:1.6;padding:10px 15px;border-radius:13px;margin-bottom:22px}.demo-banner b{color:#506591}
@media(max-width:650px){.main{padding-bottom:123px}.overview-extras{gap:10px;margin-top:14px}.glass-shortcut{padding:15px 12px;gap:9px;border-radius:19px}.shortcut-icon{height:34px;flex-basis:34px;border-radius:11px}.shortcut-icon svg{width:19px;height:19px}.glass-shortcut span{font-size:9px;margin-bottom:5px}.glass-shortcut b{font-size:11px}.glass-shortcut small{display:none}.shortcut-arrow{display:none}.payment-strip{padding:15px 13px;gap:9px;margin-top:12px;align-items:start}.payment-strip h3{font-size:11px;line-height:1.6}.payment-strip p{font-size:10px}.payment-action{font-size:0;padding:5px 0}.payment-action svg{width:17px}.payment-icon{width:29px;height:29px}.bottom-nav{display:flex;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));padding:8px;border-radius:26px;gap:3px}.bottom-nav button{width:20%;padding:10px 1px;font-size:9px;gap:6px}.bottom-nav svg{width:20px;height:20px}.hero{min-height:238px;padding:24px}.hero h2{font-size:32px}.hero-foot{gap:12px}.hero-foot .date{line-height:1.6}.renew{font-size:11px}.card{border-radius:21px}.rewards-hero{padding:27px 24px}.rewards-orb{right:24px;top:39px;width:80px;height:80px;border-radius:26px}.rewards-orb svg{width:38px;height:38px}.rewards-hero h2{font-size:50px}.friends-hero{padding:25px 20px}.friend-stats .card{padding:18px 14px}.friend-stats span{font-size:10px}.friend-stats small{font-size:9px}.rewards-explain,.history-card{margin-top:14px}.empty-state{padding:16px 0 20px}.gate-box{padding:27px 22px}.demo-banner{margin-bottom:22px}.toast{bottom:112px}}
@media(prefers-reduced-transparency:reduce){.card,.sidebar,.glass-shortcut,.payment-strip,.bottom-nav,.gate-box{background:#f9fbff;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.glass-shortcut:hover,.primary:hover{transform:none}}
@supports not (backdrop-filter:blur(1px)){.card,.glass-shortcut,.payment-strip,.sidebar,.bottom-nav{background:#f9fbff}}