/* Main app destinations share onboarding's quiet surfaces, spacing and typography. */
body.app.calm{--void:#050505;--core:#050505;--panel:#121411;--panel-2:#171a16;--shell:#121411;--ink:#f4f6f1;--dim:#b9bcb7;--faint:#979c96;--lime:#1800ad;--hair:transparent;--hair-2:rgba(255,255,255,.12);background:#050505;font-family:Montserrat,system-ui,sans-serif;font-size:14px;line-height:1.6;padding-bottom:0}
body.app.calm button,body.app.calm input,body.app.calm select{font-family:Montserrat,system-ui,sans-serif}
body.app.calm h1,body.app.calm h2,body.app.calm h3,body.app.calm h4,body.app.calm .fp-panel-title{font-family:Montserrat,system-ui,sans-serif;font-weight:700!important;letter-spacing:-.025em;text-transform:none!important;line-height:1.15}
body.app.calm main{padding-top:96px!important}
body.app.calm .kc-home-wrap,body.app.calm .kc-ex-wrap,body.app.calm .kc-assets-wrap,body.app.calm .kc-profile-wrap,body.app.calm .lb2-wrap{width:100%;max-width:980px!important;margin:auto;padding:12px 28px 128px!important}
body.app.calm .app-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:36px;grid-column:1/-1}
body.app.calm .app-intro h1{font-size:clamp(29px,3.4vw,40px);margin:0}
body.app.calm .app-intro p{font-size:14px;color:var(--dim);line-height:1.6;margin:12px 0 0;max-width:54ch}
body.app.calm .app-section-title{font-size:21px!important;margin:0 0 18px}
body.app.calm .app-section-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
body.app.calm .app-section-head h2{margin:0;font-size:22px}
/* Brand blue pills instead of underlined text — profile, section heads, row links. */
body.app.calm .app-section-head a,body.app.calm .app-text-link{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 18px;border:0!important;border-radius:999px;background:#1800ad!important;color:#fff!important;font-size:12px;font-weight:600;text-decoration:none!important;white-space:nowrap;cursor:pointer;transition:background .2s}
body.app.calm .app-section-head a:hover,body.app.calm .app-text-link:hover{background:#3311cc;color:#fff}
body.app.calm .app-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border:0;border-radius:999px;background:var(--lime);color:#fff;font-weight:600;font-size:13px;text-decoration:none;white-space:nowrap;cursor:pointer}
body.app.calm .app-primary:hover{background:#3311cc}
body.app.calm :focus-visible{outline:none!important}
body.app.calm input:focus,body.app.calm select:focus,body.app.calm textarea:focus,body.app.calm input:focus-visible,body.app.calm select:focus-visible,body.app.calm textarea:focus-visible{outline:none!important;box-shadow:none!important;border-color:transparent!important}
body.app.calm input{min-width:0;font-size:16px!important}
/* Keep the header opaque as content passes beneath it. */
body.app.calm .nav-island.topbar{top:12px!important;width:min(980px,calc(100vw - 40px))!important;max-width:980px!important;padding:0!important}
body.app.calm .nav-island.topbar::before{background:#050505;border:0;height:80px}
body.app.calm .nav-island.topbar .logo{font-family:Montserrat,system-ui,sans-serif;font-size:24px!important;text-transform:lowercase;letter-spacing:-.03em;gap:8px!important}
body.app.calm .nav-island.topbar .logo .brand-logo-img{width:28px!important;height:28px!important}
body.app.calm .nav-island.topbar #navBell,body.app.calm .nav-profile-btn{border:0!important;background:#121411!important;border-radius:50%!important;min-width:40px;min-height:40px}
body.app.calm .nav-profile-btn.has-photo .nav-avatar-img{object-fit:cover!important;background:transparent!important;padding:0!important}
body.app.calm .nav-profile-btn .nav-avatar-img{background:var(--lime)!important}
body.app.calm .taskbar{border:0!important;background:rgba(24,26,23,.96)!important;box-shadow:0 8px 28px rgba(0,0,0,.25)!important}
body.app.calm .taskbar a{color:#d8d6e0!important}
body.app.calm .taskbar a.on{background:var(--lime)!important;color:#fff!important}
/* No nested card outlines: sections are separated by space. */
body.app.calm .kc-home-bal-card,body.app.calm .kc-assets-card,body.app.calm .kc-alloc-card,body.app.calm .kc-group-box,body.app.calm .fp-panel,body.app.calm .profile-performance,body.app.calm .profile-summary div{border:0!important;background:transparent!important;border-radius:0!important;box-shadow:none!important;padding:0!important}
body.app.calm .kc-assets-card::before{display:none}
body.app.calm .kc-row,body.app.calm .kc-item-row,body.app.calm .kc-asset-row,body.app.calm .lb2-row{border:0!important;background:transparent!important;box-shadow:none!important}
body.app.calm .kc-row:hover,body.app.calm .kc-item-row:hover,body.app.calm .kc-asset-row:hover,body.app.calm .lb2-row:hover{background:#111310!important}
body.app.calm .kc-cat-tabs,body.app.calm .kc-tabs,body.app.calm .lb2-tabs,body.app.calm .fp-view-nav{border:0!important;gap:8px!important;padding:0!important;background:transparent!important;margin-bottom:24px;overflow-x:auto;scrollbar-width:none}
body.app.calm .kc-cat-tab,body.app.calm .kc-tab-btn,body.app.calm .lb2-tabs button,body.app.calm .fp-view-btn{border:0!important;background:transparent!important;border-radius:999px!important;min-height:44px;padding:10px 16px!important;box-shadow:none!important;font-size:13px!important;font-weight:500!important;color:var(--dim)!important;white-space:nowrap;flex:none;cursor:pointer}
body.app.calm .kc-cat-tab.on,body.app.calm .kc-tab-btn.on,body.app.calm .lb2-tabs button.on,body.app.calm .fp-view-btn.on{background:var(--lime)!important;color:#fff!important}
body.app.calm .kc-tab-btn::after,body.app.calm .lb2-tabs button::after{display:none!important}
body.app.calm .kc-search-box,body.app.calm .kc-home-search-box,body.app.calm .tf .inp,body.app.calm .fp-stake-input-wrap{border:0!important;border-radius:14px!important;background:#121411!important;box-shadow:none!important;min-height:52px}
body.app.calm .kc-search-box:focus-within,body.app.calm .kc-home-search-box:focus-within,body.app.calm .fp-stake-input-wrap:focus-within{outline:none!important}
body.app.calm .kc-icon-btn,body.app.calm .kc-action-btn,body.app.calm .kc-p-back,body.app.calm .kc-p-action-btn,body.app.calm .kc-act-ico,body.app.calm .kc-act-icon{border:0!important;background:#121411!important;color:var(--ink)!important;box-shadow:none!important;border-radius:50%!important;width:46px;height:46px}
body.app.calm .kc-eye-btn{min-width:36px;min-height:36px;justify-content:center}
body.app.calm .kc-bal-val,body.app.calm .kc-card-bal{font-size:clamp(30px,4vw,46px)!important;letter-spacing:-.045em;line-height:1.2;margin:12px 0 8px;overflow-wrap:anywhere}
body.app.calm .kc-bal-val small,body.app.calm .kc-card-bal small{color:var(--dim);font-size:14px}
body.app.calm .kc-bal-header,body.app.calm .kc-card-lbl{font-size:13px;letter-spacing:0;text-transform:none;color:var(--dim)}
body.app.calm .kc-bal-actions,body.app.calm .kc-actions-grid{border:0;padding:0;margin:24px 0 0;gap:12px}
body.app.calm .kc-act-circle span,body.app.calm .kc-act-lbl{font-size:12px;color:var(--dim);text-transform:none;letter-spacing:0}
body.app.calm .kc-act-circle:first-child .kc-act-ico,body.app.calm .kc-act-btn:first-child .kc-act-icon{background:var(--lime)!important;color:#fff!important}
body.app.calm .kc-pill{background:transparent!important;color:var(--positive)!important;padding:0!important;min-width:0!important;font-size:12px;justify-content:flex-end}
body.app.calm .kc-pill.down{color:var(--red)!important}
body.app.calm .kc-row{grid-template-columns:minmax(0,1fr) 110px 80px!important;gap:12px!important;padding:16px 0!important;border-radius:12px}
body.app.calm .kc-pair-title{font-family:Montserrat,system-ui,sans-serif!important;font-size:15px!important;font-weight:600!important}
body.app.calm .kc-pair-quote,body.app.calm .kc-tag{display:none}
body.app.calm .kc-pair-sub{font-size:11px;margin-top:5px}
body.app.calm .kc-avatar{width:44px!important;height:44px!important;background:#121411!important}
body.app.calm .kc-price-main{font-size:14px;font-weight:600}
body.app.calm .kc-price-sub{font-size:10px;color:var(--faint);margin-top:4px}
body.app.calm .kc-row-mid{padding:0!important}
/* Home: portfolio, one next action, then discovery. */
body.app.calm .home-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:36px 48px}
body.app.calm .home-layout .app-intro{margin-bottom:0}
body.app.calm .home-layout .kc-home-bal-card{margin:0}
body.app.calm .home-market{grid-column:1/-1;min-width:0}
body.app.calm .home-next{padding:28px;border-radius:24px;background:#121411;align-self:stretch;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
body.app.calm .home-next h2{font-size:27px;margin:0 0 12px}
body.app.calm .home-next p{font-size:13px;color:var(--dim);margin:0 0 22px;line-height:1.7}
body.app.calm .home-next .app-primary{min-width:170px}
body.app.calm .kc-home-searchbar-wrap{margin:20px 0}
body.app.calm .home-club{grid-column:1/-1;display:flex;align-items:center;gap:18px;padding:16px 0;color:var(--ink)}
body.app.calm .home-club .ic{width:36px;height:36px;color:var(--dim)}
body.app.calm .home-club b{display:block;font-size:17px}.home-club small{color:var(--dim)}
/* Exchange: a search-led, borderless market list. */
body.app.calm .kc-top-bar{margin-bottom:24px}
body.app.calm .kc-sub-bar{margin:4px 0 20px;gap:10px}
body.app.calm .kc-sub-tabs{gap:20px;min-width:0}
body.app.calm .kc-sub-tab{min-height:40px;font-size:12px;color:var(--faint)}
body.app.calm .kc-sub-tab.on{color:var(--ink)}
body.app.calm .kc-th{border:0;grid-template-columns:minmax(0,1fr) 110px 80px;gap:12px;font-size:11px;color:var(--faint);padding:12px 0}
/* FanPlay follows the onboarding step rhythm. */
body.app.calm .fanplay-layout{max-width:820px!important}
body.app.calm .fp-topbar{margin-bottom:28px;padding:0;border:0}
body.app.calm .fp-title-box h2{font-size:36px}
body.app.calm .fp-title-box span{font-size:14px;color:var(--dim);line-height:1.6}
body.app.calm .fp-metrics-grid{gap:18px;margin:0 0 30px}
body.app.calm .fp-metric-card{border:0;background:transparent;padding:0;box-shadow:none;border-radius:0}
body.app.calm .fp-metric-lbl{font-size:11px;color:var(--faint);text-transform:none;letter-spacing:0}
body.app.calm .fp-metric-val{font-family:Montserrat,system-ui,sans-serif;font-size:20px;margin-top:8px;color:var(--ink)}
body.app.calm .fp-view-nav{display:flex}
body.app.calm .fp-step-bar{gap:6px;margin:8px 0 32px}
body.app.calm .fp-step-circle{width:28px;height:28px;border:0;background:#1c201a;color:var(--dim);box-shadow:none!important;font-size:11px}
body.app.calm .fp-step-dot.active .fp-step-circle{background:var(--lime);color:white}
body.app.calm .fp-step-dot.completed .fp-step-circle{background:#363e32;color:#fff}
body.app.calm .fp-step-label{font-size:10px;text-transform:none;font-weight:500}
body.app.calm .fp-panel-title{font-size:26px;margin-bottom:12px}
body.app.calm .fp-panel-sub{font-size:13px;color:var(--dim);line-height:1.7;margin-bottom:28px}
body.app.calm .fp-asset-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
body.app.calm .fp-asset-card,body.app.calm .fp-match-card,body.app.calm .fp-market-card,body.app.calm .fp-opt-card{border:0;background:#121411;border-radius:16px;box-shadow:none;padding:18px;min-width:0}
body.app.calm .fp-asset-card{background:transparent;text-align:center}
body.app.calm .fp-asset-card.selected,body.app.calm .fp-match-card.selected,body.app.calm .fp-market-card.selected,body.app.calm .fp-opt-card.selected{background:#1c143a;box-shadow:inset 0 0 0 2px var(--lime)}
body.app.calm .fp-player-photo{width:48px;height:48px;object-fit:cover;object-position:center 20%;border-radius:50%;margin:0 auto 12px;display:block}
body.app.calm .fp-asset-sym,body.app.calm .fp-market-name,body.app.calm .fp-match-teams,body.app.calm .fp-opt-label{font-family:Montserrat,system-ui,sans-serif;text-transform:none;font-size:15px;font-weight:600}
body.app.calm .fp-asset-avail,body.app.calm .fp-market-limit{color:var(--dim);font-size:12px}
body.app.calm .fp-breakdown{background:transparent;padding:12px 0;border:0;gap:14px}
body.app.calm .fp-breakdown-row{border:0!important;gap:14px}
body.app.calm .fp-stake-chip{border:0;border-radius:999px;background:#121411;min-height:44px}
body.app.calm .fp-risk-box{border:0;background:#22170f;border-radius:16px;color:#ffbc91;font-size:12px;line-height:1.7}
body.app.calm .fp-btn-next,body.app.calm .fp-btn-back{font-family:Montserrat,system-ui,sans-serif;text-transform:none;border:0;border-radius:999px;min-height:50px;font-size:13px;box-shadow:none;padding:14px 18px}
body.app.calm .fp-btn-back{background:transparent;color:var(--dim)}
body.app.calm #stakeInput{background:transparent;border:0;color:#fff;font-size:24px!important;text-align:right;width:48%;min-height:40px}
/* Leaderboard: club portraits, personal rank and open ranking rows. */
body.app.calm .lb2-tabs{display:flex}
body.app.calm .lb2-clubs{margin:0 0 32px;padding:0;gap:18px}
body.app.calm .lb2-club{flex:1;min-width:160px;background:transparent;border:0;padding:8px 0;box-shadow:none}
body.app.calm .lb2-club:hover{background:transparent;transform:none}
body.app.calm .lb2-club-mark{border-radius:50%;width:52px;height:52px}
body.app.calm .lb2-section-head h2 span{display:none}
body.app.calm .lb2-me{border:0;background:#121411;border-radius:20px;padding:20px;margin:24px 0}
body.app.calm .lb2-me-logo{background:var(--lime)}
body.app.calm .lb2-me b{color:white}
body.app.calm .lb2-select,body.app.calm .lb2-ranges button{border:0;background:transparent;border-radius:999px;min-height:42px;color:var(--dim);font-size:12px}
body.app.calm .lb2-ranges button.on{background:#24291f;color:white}
body.app.calm .lb2-row{padding:18px 0;gap:14px;grid-template-columns:28px 44px minmax(0,1fr) auto}
body.app.calm .lb2-name b{font-size:14px}.lb2-name span{font-size:11px}
body.app.calm .lb2-profit{font-size:14px}.lb2-profit small img{border-color:#050505}
/* Profile: one identity card, one panel of figures, then where to go next. */
body.app.calm .profile-card{background:radial-gradient(120% 80% at 100% 0%,rgba(24,0,173,.3),transparent 62%),#121411;border-radius:24px;padding:24px;margin:0 0 14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
body.app.calm .profile-card-top{display:flex;gap:18px;align-items:center}
body.app.calm .profile-avatar-wrap{flex:none}
body.app.calm .profile-avatar-button{position:relative;width:84px;height:84px;border:0;border-radius:50%;background:var(--lime);padding:18px;overflow:visible;cursor:pointer;display:grid;place-items:center}
body.app.calm .profile-avatar-button img{width:100%;height:100%;object-fit:contain;display:block;border-radius:50%}
body.app.calm .profile-avatar-button.has-photo{padding:0;background:#050505}
body.app.calm .profile-avatar-button.has-photo img{object-fit:cover}
/* The camera badge says the picture is changeable without a button saying so. */
body.app.calm .profile-avatar-edit{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;border-radius:50%;background:#050505;display:grid;place-items:center;box-shadow:0 0 0 3px #121411}
body.app.calm .profile-avatar-edit .ic{width:14px;height:14px;color:var(--ink)}
body.app.calm .profile-who{min-width:0;flex:1}
body.app.calm .profile-who h2{font-size:24px;margin:0 0 3px;letter-spacing:-.022em;overflow-wrap:anywhere}
body.app.calm .profile-handle{font-size:13px;color:var(--dim);margin:0}
body.app.calm .profile-who-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
body.app.calm .profile-chip-btn{min-height:32px;padding:6px 14px;border:0;border-radius:999px;background:rgba(255,255,255,.08);color:var(--ink);font:600 12px Montserrat,system-ui,sans-serif;cursor:pointer;transition:background .18s ease}
body.app.calm .profile-chip-btn:hover{background:rgba(255,255,255,.14)}
body.app.calm .profile-chip-btn.subtle{background:transparent;color:var(--dim)}
body.app.calm .profile-chip-btn.subtle:hover{color:var(--ink);background:rgba(255,255,255,.06)}
/* The three facts that do not change, along the bottom of the card. */
body.app.calm .profile-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.07)}
body.app.calm .profile-meta dt{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
body.app.calm .profile-meta dd{margin:0;font-family:Montserrat,system-ui,sans-serif;font-weight:700;font-size:13px;letter-spacing:-.01em;overflow-wrap:anywhere}
body.app.calm .profile-uid{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;color:var(--ink);font:inherit;cursor:pointer}
body.app.calm .profile-uid .ic{width:13px;height:13px;color:var(--faint)}
body.app.calm .profile-uid:hover .ic{color:var(--lime)}
/* What the account is worth, with the number that matters given the room. */
body.app.calm .profile-overview{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin:0 0 30px;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.06)}
body.app.calm .profile-overview>div{background:#121411;padding:18px 20px}
body.app.calm .profile-overview .lead{grid-column:1/-1}
body.app.calm .profile-overview dt{font-size:11.5px;color:var(--dim);margin-bottom:7px}
body.app.calm .profile-overview dd{margin:0;font-family:Montserrat,system-ui,sans-serif;font-weight:700;font-size:19px;letter-spacing:-.025em;overflow-wrap:anywhere}
body.app.calm .profile-overview .lead dd{font-size:30px;line-height:1.1}
body.app.calm .profile-overview .lead dd small{font-size:15px;color:var(--dim);font-weight:600}
/* Destinations: rows in one grouped surface, divided rather than boxed. */
body.app.calm .profile-links{display:grid;gap:2px;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.06)}
body.app.calm .profile-link{display:flex;align-items:center;gap:14px;padding:16px 18px;background:#121411;color:var(--ink);text-decoration:none!important;transition:background .18s ease}
body.app.calm .profile-link:hover{background:#171a16}
body.app.calm .profile-link-icon{width:38px;height:38px;flex:none;border-radius:12px;background:rgba(255,255,255,.06);display:grid;place-items:center}
body.app.calm .profile-link-icon .ic{width:19px;height:19px;color:var(--ink)}
body.app.calm .profile-link>div{flex:1;min-width:0}
body.app.calm .profile-link strong{font-size:14.5px;font-weight:600;display:block;letter-spacing:-.01em}
body.app.calm .profile-link small{display:block;font-size:12px;color:var(--dim);margin-top:3px;line-height:1.5}
body.app.calm .profile-link>.ic{width:16px;height:16px;flex:none;color:var(--faint);transform:rotate(45deg)}
/* Secondary tools stay folded away, but look built rather than left over. */
body.app.calm .profile-tools{margin:14px 0 0;background:#121411;border-radius:20px;overflow:hidden}
body.app.calm .profile-tools summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink);padding:17px 18px;list-style:none}
body.app.calm .profile-tools summary::-webkit-details-marker{display:none}
body.app.calm .profile-tools summary .ic{width:15px;height:15px;color:var(--faint);transform:rotate(135deg);transition:transform .2s ease}
body.app.calm .profile-tools[open] summary .ic{transform:rotate(-45deg)}
body.app.calm .profile-tools-content{display:grid;gap:2px;padding:0 0 2px;background:rgba(255,255,255,.06)}
body.app.calm .profile-tool{display:flex;justify-content:space-between;gap:12px;align-items:center;text-align:left;border:0;background:#121411;color:var(--ink);padding:15px 18px;font:500 13px Montserrat,system-ui,sans-serif;min-height:50px;cursor:pointer;transition:background .18s ease}
body.app.calm .profile-tool:hover{background:#171a16}
body.app.calm .profile-tool .ic{width:14px;height:14px;color:var(--faint);transform:rotate(45deg)}
body.app.calm .profile-tool.as-row{cursor:default}
body.app.calm .profile-tools .kc-switch{flex:none;border:0;background:#363e32}
body.app.calm .profile-tools .kc-switch.on{background:var(--lime)!important}
/* Signing out is deliberate, so it looks like a button you have to mean. */
body.app.calm .profile-signout{display:block;width:100%;margin:26px 0 0;min-height:50px;border:0;border-radius:999px;background:rgba(255,119,125,.1);color:#ff777d;font:600 14px Montserrat,system-ui,sans-serif;cursor:pointer;transition:background .18s ease}
body.app.calm .profile-signout:hover{background:rgba(255,119,125,.18)}
@media(min-width:720px){
  body.app.calm .profile-overview{grid-template-columns:repeat(3,1fr)}
  body.app.calm .profile-overview .lead{grid-column:auto}
  body.app.calm .profile-overview .lead dd{font-size:26px}
  body.app.calm .profile-links{grid-template-columns:1fr 1fr}
  body.app.calm .profile-tools-content{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){
  body.app.calm .profile-card{padding:20px}
  body.app.calm .profile-card-top{gap:14px}
  body.app.calm .profile-avatar-button{width:72px;height:72px;padding:15px}
  body.app.calm .profile-who h2{font-size:21px}
  body.app.calm .profile-meta{grid-template-columns:1fr 1fr}
  body.app.calm .profile-meta>div:last-child{grid-column:1/-1}
}
/* Wallet: free-standing balance and allocation, then holdings. */
body.app.calm .wallet-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:36px 48px}
body.app.calm .wallet-layout .app-intro{margin-bottom:0}
body.app.calm .wallet-layout .kc-topbar{grid-column:1/-1;display:none}
body.app.calm .wallet-layout .kc-tabs,body.app.calm .wallet-layout .kc-holdings-list{grid-column:1/-1;margin:0}
body.app.calm .kc-card-top{gap:12px;flex-wrap:wrap}
body.app.calm .kc-pnl-pill{border:0;background:transparent;color:var(--positive);padding:0}
body.app.calm .kc-alloc-head{text-transform:none;letter-spacing:0;font-size:13px;margin:0 0 22px}
body.app.calm .kc-alloc-card{margin:0;align-self:center}
body.app.calm .kc-alloc-bar{height:8px;margin-bottom:24px}
body.app.calm .kc-alloc-legend{display:grid;gap:14px;font-size:12px}
body.app.calm .kc-leg-item b{margin-left:auto}
body.app.calm .kc-asset-row{padding:16px 0;gap:14px}
body.app.calm .kc-asset-icon{border:0;background:#121411;border-radius:50%;width:44px;height:44px;overflow:hidden}
body.app.calm .kc-asset-icon img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
body.app.calm .kc-asset-name{font-size:14px}.kc-asset-val{font-size:14px}
body.app.calm .kc-asset-sub{font-size:11px;color:var(--dim)}
body.app.calm .btn{border:0!important;box-shadow:none!important;border-radius:999px!important;min-height:46px}
@media(max-width:768px){
 body.app.calm main{padding-top:88px!important}
 body.app.calm .nav-island.topbar{top:10px!important;left:20px!important;right:20px!important;width:auto!important}
 body.app.calm .nav-island.topbar::before{height:78px}
 body.app.calm .kc-home-wrap,body.app.calm .kc-ex-wrap,body.app.calm .kc-assets-wrap,body.app.calm .kc-profile-wrap,body.app.calm .lb2-wrap{padding:12px 20px 114px!important}
 body.app.calm .app-intro{margin-bottom:28px;gap:16px;align-items:flex-start}
 body.app.calm .app-intro h1{font-size:30px}
 body.app.calm .app-intro p{font-size:13px;margin-top:10px}
 body.app.calm .app-intro>.app-text-link{font-size:11px;white-space:nowrap;margin-top:8px}
 body.app.calm .home-layout,body.app.calm .wallet-layout{grid-template-columns:minmax(0,1fr);gap:30px}
 body.app.calm .home-next{padding:24px}.home-next h2{font-size:24px}
 body.app.calm .kc-bal-val,body.app.calm .kc-card-bal{font-size:36px!important}
 body.app.calm .kc-home-bal-card{padding:0!important}
 body.app.calm .kc-row,body.app.calm .kc-th{grid-template-columns:minmax(0,1fr) 80px 65px!important;gap:8px!important}
 body.app.calm .kc-avatar{width:38px!important;height:38px!important}
 body.app.calm .kc-row-left{gap:10px}.kc-pair-title{font-size:14px}
 body.app.calm .kc-pill{font-size:11px}.kc-price-main{font-size:13px}
 body.app.calm .kc-sub-tabs{gap:16px}
 body.app.calm .fp-metrics-grid{grid-template-columns:repeat(2,1fr);gap:20px 28px}
 body.app.calm .fp-asset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.app.calm .fp-panel-title{font-size:24px}
 body.app.calm .fp-panel{padding:0!important}
 body.app.calm .fp-market-grid{grid-template-columns:1fr}
 body.app.calm .fp-opt-card{gap:10px;padding:16px 12px;flex-wrap:wrap}
 body.app.calm .fp-opt-left{min-width:0;gap:10px}
 body.app.calm .fp-opt-right{margin-left:auto}
 body.app.calm .fp-nav-btns{gap:10px}
 body.app.calm .lb2-row{grid-template-columns:22px 38px minmax(0,1fr) auto;gap:10px}
 body.app.calm .lb2-avatar{width:38px;height:38px}
 body.app.calm .lb2-name b,body.app.calm .lb2-profit{font-size:12px}
 body.app.calm .lb2-name span{font-size:10px}
 body.app.calm .lb2-me{padding:16px;gap:10px;grid-template-columns:40px 1fr auto}
 body.app.calm .lb2-me-logo{width:40px;height:40px}
 body.app.calm .lb2-me-value{font-size:17px}
 body.app.calm .profile-links{grid-template-columns:1fr;gap:4px}
 body.app.calm .profile-overview{grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}
 body.app.calm .profile-overview>div:first-child{grid-column:1/-1}
 body.app.calm .profile-overview>div:first-child dd{font-size:32px}
 body.app.calm .profile-identity{gap:18px}
 body.app.calm .profile-identity h2{font-size:24px}
 body.app.calm .profile-identity>img{width:64px;height:64px;padding:14px}
 body.app.calm .profile-tools-content{grid-template-columns:1fr}
 body.app.calm .kc-card-bal{flex-wrap:wrap}
 body.app.calm .kc-asset-left{gap:10px;min-width:0}.kc-asset-name{font-size:13px}
}
@media(max-width:360px){
 body.app.calm .kc-row,body.app.calm .kc-th{grid-template-columns:minmax(0,1fr) 66px 58px!important;gap:6px!important}
 body.app.calm .kc-row-left{gap:7px}
 body.app.calm .kc-price-main{font-size:12px}
 body.app.calm .kc-pair-title{font-size:13px!important}
 body.app.calm .fp-step-label{font-size:9px}.fp-step-bar{gap:4px}
 body.app.calm .lb2-row{grid-template-columns:20px 32px minmax(0,1fr) auto;gap:7px}
 body.app.calm .lb2-avatar{width:32px;height:32px}
 body.app.calm .lb2-profit{font-size:11px}
 body.app.calm .profile-identity h2{font-size:22px}
}

body.app.calm .taskbar a[data-tab="fanplay"].on .tb-icon-box{background:var(--lime)!important}
body.app.calm .fp-load-state{grid-column:1/-1;padding:28px 0;color:var(--dim);font-size:13px;line-height:1.7}
body.app.calm .fp-load-state p{margin:0 0 20px}
body.app.calm .fp-breakdown-row b{text-align:right;min-width:0;overflow-wrap:anywhere}
body.app.calm .lb2-period-label{font-size:12px;color:var(--dim)}
body.app.calm .fp-panel .fp-opt-suc{color:var(--positive)}
body.app.calm .kc-asset-left>div:last-child{min-width:0}
body.app.calm .kc-asset-name span{display:block!important;font-size:11px!important;color:var(--dim)!important;margin-top:3px}
body.app.calm .kc-asset-icon:not(:has(img)){color:var(--ink)}
body.app.calm #activeList>.fp-panel,body.app.calm #historyList>.fp-panel{padding:18px 0!important;margin-bottom:20px!important}
body.app.calm #activeList>.fp-panel>div:first-child,body.app.calm #historyList>.fp-panel>div:first-child{gap:14px;flex-wrap:wrap}
body.app.calm #activeList>.fp-panel b[style*="var(--lime)"],body.app.calm #historyList>.fp-panel span[style*="var(--lime)"]{color:var(--positive)!important}
body.app.calm .fp-match-meta span[style*="var(--lime)"]{color:var(--dim)!important}
@media(max-width:600px){
 body.app.calm .fp-breakdown-row{align-items:flex-start;gap:16px}
 body.app.calm .fp-breakdown-row>span{max-width:46%}
 body.app.calm #stepBox7>div:last-child{flex-direction:column}
 body.app.calm .kc-card-sub{flex-wrap:wrap}
}

/* The opaque header background spans the viewport, including the page gutters. */
body.app.calm .nav-island.topbar::before{position:absolute!important;left:calc((100% - 100vw)/2)!important;right:calc((100% - 100vw)/2)!important;top:-20px!important;height:90px!important}
body.app.calm .fp-breakdown [style*="color:var(--lime)"]{color:var(--ink)!important}
body.app.calm .fp-stake-box [style*="color:var(--lime)"]{color:var(--ink)!important}
/* Main tabs: the taskbar names the page, so only the page's action shows here. */
body.app.calm .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Taken out of the layout entirely, so grid gaps and margins don't leave a hole where the title was. */
body.app.calm .app-intro.tab-intro{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
body.app.calm .tab-intro+.profile-identity{padding-top:0}
/* Wallet tabs render FanPlay entries and activity in place. */
body.app.calm .wal-muted{font-weight:400;color:var(--dim);font-size:12px}
body.app.calm .kc-asset-val.wal-in{color:#4ade80}
body.app.calm .wal-empty{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:var(--dim);font-size:14px;padding:40px 16px}
body.app.calm .wal-empty b{color:var(--ink);font-size:17px}
body.app.calm .wal-empty .app-primary{margin-top:16px}
body.app.calm .kc-holdings-list[hidden]{display:none!important}
/* Taskbar: plain white icons; the page you are on turns brand blue. The FanPlay
   logo sits bare, and gets its blue circle only when FanPlay is open. */
body.app.calm .taskbar a:hover:not(.on){background:rgba(255,255,255,.06)!important;color:#fff!important}
body.app.calm .taskbar a[data-tab="fanplay"] .tb-icon-box{background:transparent!important}
body.app.calm .taskbar a[data-tab="fanplay"].on{background:transparent!important}
body.app.calm .taskbar a[data-tab="fanplay"]:hover:not(.on){background:transparent!important}
body.app.calm .taskbar a[data-tab="fanplay"]:hover:not(.on) .tb-icon-box{background:rgba(255,255,255,.08)!important}
/* Home cards: a smooth, swipeable row of premium panels. */
body.app.calm .home-next{padding:0!important;background:transparent!important;border-radius:0;display:flex;flex-direction:column;justify-content:stretch;align-items:stretch;min-width:0}
body.app.calm .home-cards{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:24px;flex:1}
body.app.calm .home-cards::-webkit-scrollbar{display:none}
body.app.calm .home-cards:focus-visible{outline:none!important}
body.app.calm .home-card{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;min-height:340px;padding:26px;border-radius:24px;background:radial-gradient(120% 70% at 100% 0%,rgba(24,0,173,.28),transparent 60%),#121411;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
body.app.calm .home-card-top{display:flex;align-items:center;gap:10px;margin-bottom:18px}
body.app.calm .home-card-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#1800ad;color:#fff}
body.app.calm .home-card-icon .ic{width:19px;height:19px}
body.app.calm .home-card-eyebrow{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#a596ed}
body.app.calm .home-card h2{font-size:25px!important;margin:0 0 10px}
body.app.calm .home-card p{font-size:13.5px;color:var(--dim);line-height:1.7;margin:0 0 18px}
body.app.calm .home-card-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin:auto 0 20px;padding:14px 16px;border-radius:16px;background:rgba(0,0,0,.35)}
body.app.calm .home-card-stats dt{font-size:11.5px;color:var(--dim);margin-bottom:4px}
body.app.calm .home-card-stats dd{margin:0;font-size:15px;font-weight:600;color:#fff;overflow-wrap:anywhere}
body.app.calm .home-card .app-primary{min-width:190px}
body.app.calm .home-card .app-primary .ic{width:15px;height:15px}
body.app.calm .home-cards-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
body.app.calm .home-dots{display:flex;gap:6px}
body.app.calm .home-dots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:#353735;cursor:pointer;transition:width .3s ease,background .3s ease}
body.app.calm .home-dots button[aria-current]{width:24px;background:#1800ad}
body.app.calm .home-arrows{display:flex;gap:8px}
body.app.calm .home-arrows button{width:40px;height:40px;border:0;border-radius:50%;background:#121411;color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s,opacity .2s}
body.app.calm .home-arrows button:hover:not(:disabled){background:#1a1d19}
body.app.calm .home-arrows button:disabled{opacity:.35;cursor:default}
body.app.calm .home-arrows .ic{width:16px;height:16px}
body.app.calm #homePrev .ic{transform:rotate(-135deg)}
body.app.calm #homeNext .ic{transform:rotate(45deg)}
@media(max-width:760px){
 body.app.calm .home-cards{margin:0 -20px;padding:0 20px;scroll-padding-inline:20px;border-radius:0}
 body.app.calm .home-card{flex-basis:86%;min-height:330px;padding:22px}
 body.app.calm .home-arrows{display:none}
}
@media(prefers-reduced-motion:reduce){body.app.calm .home-cards{scroll-behavior:auto}}
/* FanPlay review: one premium card with everything the entry commits to. */
body.app.calm .fp-rv-card{padding:24px;border-radius:24px;background:radial-gradient(120% 60% at 100% 0%,rgba(24,0,173,.25),transparent 60%),#121411;margin-bottom:20px}
body.app.calm .fp-rv-top{display:flex;align-items:center;gap:14px}
body.app.calm .fp-rv-top img,body.app.calm .fp-rv-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}
body.app.calm .fp-rv-who{flex:1;min-width:0}
body.app.calm .fp-rv-who b{display:block;font-size:18px;color:#fff}
body.app.calm .fp-rv-who span{font-size:12.5px;color:var(--dim)}
body.app.calm .fp-rv-tier{padding:7px 14px;border-radius:999px;background:#1800ad;color:#fff;font-size:12px;font-weight:600;white-space:nowrap}
body.app.calm .fp-rv-fixture{margin:20px 0;padding:16px;border-radius:16px;background:rgba(0,0,0,.35);text-align:center;display:grid;gap:4px}
body.app.calm .fp-rv-fixture span{font-size:12px;color:var(--dim)}
body.app.calm .fp-rv-fixture b{font-size:18px;color:#fff}
body.app.calm .fp-rv-fixture i{font-style:normal;color:var(--dim);font-weight:400;margin:0 6px}
body.app.calm .fp-rv-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:20px}
body.app.calm .fp-rv-stats>div{padding:14px;border-radius:16px;background:#0b0c0b;min-width:0}
body.app.calm .fp-rv-stats span{display:block;font-size:11.5px;color:var(--dim);margin-bottom:6px}
body.app.calm .fp-rv-stats b{display:block;font-size:15px;color:#fff;overflow-wrap:anywhere}
body.app.calm .fp-rv-stats small{font-size:11px;color:var(--dim)}
body.app.calm .fp-rv-label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#a596ed;margin-bottom:6px}
body.app.calm .fp-rv-pick{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:14px;color:#fff}
body.app.calm .fp-rv-pick small{display:block;font-size:11.5px;color:var(--dim);margin-top:3px}
body.app.calm .fp-rv-fp{text-align:right;white-space:nowrap}
body.app.calm .fp-rv-fp b{font-size:14px;margin-left:8px}
body.app.calm .fp-rv-fp b.up{color:#4ade80}
body.app.calm .fp-rv-fp b.down{color:#ff7a7a}
body.app.calm .fp-rv-rows{margin:14px 0 0}
body.app.calm .fp-rv-rows>div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;font-size:13.5px}
body.app.calm .fp-rv-rows dt{color:var(--dim)}
body.app.calm .fp-rv-rows dd{margin:0;color:#fff;font-weight:500;text-align:right}
@media(max-width:560px){body.app.calm .fp-rv-stats{grid-template-columns:1fr 1fr}body.app.calm .fp-rv-stats>div:last-child{grid-column:1/-1}}