:root{color-scheme:dark;--bg:#0e1112;--sidebar:#16191a;--panel:#191d1f;--raised:#22272a;--border:#2a3033;--text:#f1f2f3;--muted:#9ca6ab;--gold:#dfbd73;--green:#77d9ae;--red:#f38e96;--blue:#6b9efb;--radius:18px}*{box-sizing:border-box}body{margin:0;font:15px/1.5 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}button,input,select{font:inherit}button,a,input,select{outline-offset:4px}button{cursor:pointer;color:inherit;border:0}button:disabled{cursor:not-allowed;opacity:.45}button:hover{filter:brightness(1.12)}button:focus-visible,a:focus-visible{outline:2px solid var(--gold)}a{color:inherit;text-decoration:none}.sidebar{width:242px;position:fixed;inset:0 auto 0 0;background:var(--sidebar);border-right:1px solid var(--border);padding:32px 18px;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:18px;padding:0 12px 34px}.brand img{width:42px;height:44px;object-fit:contain}.brand span{font-size:11px;letter-spacing:2.2px;color:var(--muted);font-weight:600}nav{display:grid;gap:5px}nav button{display:flex;align-items:center;text-align:left;gap:13px;padding:12px;border-radius:10px;background:none;color:var(--muted);font-size:14px;width:100%}nav button.active{background:#2b2c27;color:var(--gold)}nav button .nav-icon{font-size:20px;width:22px;text-align:center;font-weight:400}nav button .chevron{margin-left:auto}nav button:hover{background:var(--raised);color:var(--text)}.sidebar-foot{margin-top:auto;padding:24px 12px 0}.ecosystem{font-size:10px;color:#737d82;letter-spacing:2px;margin-bottom:20px}.theme{background:var(--raised);border-radius:8px;padding:10px;width:100%;text-align:left;color:var(--muted)}.theme span{font-size:12px;margin-left:7px}.workspace{margin-left:242px}header{height:91px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;padding:0 36px}.heading{display:flex;align-items:center;gap:14px}h1{font-size:18px;margin:0;font-weight:600}.breadcrumb{color:var(--muted);font-size:14px}.breadcrumb span{margin-left:16px;color:#535b60}.header-actions{display:flex;align-items:center;gap:19px}.demo-badge{font-size:12px;color:var(--muted);border:1px solid var(--border);padding:5px 10px;border-radius:6px}.icon-btn{background:transparent;font-size:23px;min-width:34px;min-height:34px;color:var(--muted);border-radius:8px}.avatar{background:linear-gradient(135deg,#554b32,#272b27);color:#e8d39f;border:1px solid #6b5b34;border-radius:50%;width:53px;height:53px;display:grid;place-items:center;font-size:23px;font-weight:600;flex-shrink:0}.avatar.small{width:36px;height:36px;font-size:14px}main{padding:30px 36px 12px;max-width:1580px;margin:auto}.welcome{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.eyebrow{font-size:10px!important;letter-spacing:1.8px;color:var(--muted);font-weight:600;margin:0 0 5px!important}h2{font-size:26px;font-weight:500;letter-spacing:-.6px;margin:0}h2 span{font-weight:650}h3{font-size:17px;line-height:1.35;font-weight:600;margin:0;letter-spacing:-.25px}.text-button{background:none;color:var(--gold);font-size:13px;font-weight:600;padding:7px 0}.tiny{font-size:16px;margin-left:7px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:23px;min-width:0}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:21px}.subtle{color:var(--muted);font-size:12px}.top-grid{display:grid;grid-template-columns:minmax(315px,.85fr) minmax(0,1.85fr);gap:20px}.identity{display:flex;gap:14px;align-items:center;margin-bottom:23px}.identity strong{font-size:21px}.identity p{font-size:12px;color:var(--muted);margin:3px 0 0}.identity p span{color:var(--text)}.membership,.subscription{padding:16px 0;border-top:1px solid var(--border)}.label-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;font-weight:550}.membership p,.subscription p{color:var(--muted);font-size:12px;margin:8px 0 0}.premium{color:var(--gold);background:#d7b46717;padding:3px 12px;border-radius:5px;font-size:12px}.badge{display:inline-flex;align-items:center;gap:5px;border-radius:5px;padding:4px 9px;font-size:12px;white-space:nowrap}.positive{color:var(--green)}.negative{color:var(--red)}.badge.positive{background:#78d9ab10}.badge.negative{background:#f38e9614}.badge.neutral{background:var(--raised);color:var(--muted)}.profile-field{margin-top:13px}.profile-field label{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}.copy-field{display:flex;justify-content:space-between;align-items:center;width:100%;background:var(--raised);border:1px solid var(--border);border-radius:7px;padding:9px 12px;font-size:13px}.copy-field small{color:var(--muted);margin-left:8px;font-size:11px}.positions{display:flex;flex-direction:column}.hyperliquid{color:#abefdc;background:#b6ffdf09;border:1px solid #a3ecd51e;border-radius:6px;padding:6px 9px;font-size:12px}.position-summary{display:flex;gap:38px;padding:21px 0 25px;border-top:1px solid var(--border)}.position-summary>div>span{display:block}.position-summary strong{display:block;font-size:25px;margin-top:4px;letter-spacing:-.6px}.source-status{margin-left:auto;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:7px;align-self:flex-start}.source-status .status-dot{width:6px;height:6px;background:var(--gold);border-radius:50%}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}th{font-weight:500;color:var(--muted);font-size:11px;padding:12px 8px;background:#ffffff02}td{padding:20px 8px;border-bottom:1px solid var(--border);white-space:nowrap}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{text-align:right;padding-right:0}.coin-name{font-weight:600}.coin-name small{display:block;font-size:11px;color:var(--muted);font-weight:400;margin-top:3px}.direction{font-size:11px;border-radius:4px;padding:3px 6px}.direction.long{background:#77d9ae12;color:var(--green)}.direction.short{background:#f38e9612;color:var(--red)}.panel-foot{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:auto;padding-top:20px;color:var(--muted);font-size:12px}.money-grid{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);gap:20px;margin-top:20px}.big-number{display:block;font-size:38px;line-height:1.2;letter-spacing:-1.6px;font-weight:600}.balance-line{display:flex;align-items:baseline;gap:10px}.balance-caption,.metric p{color:var(--muted);font-size:13px;margin:8px 0 22px}.network-tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-top:25px;margin-bottom:7px;padding-bottom:13px}.network-tabs button{background:transparent;color:var(--muted);padding:8px 10px;border-radius:7px;font-size:13px;display:flex;align-items:center;gap:7px;white-space:nowrap}.network-tabs button.selected{background:var(--raised);color:var(--text)}.network-icon{font-size:16px}.bnb{color:#e9c44f}.eth{color:#a5b4dc}.arb{color:#74b4eb}.token-row{display:flex;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);gap:10px}.token-icon{width:30px;height:30px;border-radius:50%;background:var(--raised);display:grid;place-items:center;font-size:15px;font-weight:650}.token-icon.usdt{color:#83d4b8;background:#256d551f}.token-icon.usdc{color:#7aacfa;background:#3b72c422}.token-info{font-size:13px}.token-info span,.token-amount small{display:block;color:var(--muted);font-size:11px}.token-amount{margin-left:auto;text-align:right;font-size:13px}.network-total{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:13px}.network-total strong{color:var(--text)}.actions{display:flex;gap:10px;margin-top:21px}.actions.three>*{flex:1}.primary,.secondary{padding:10px 16px;border-radius:8px;font-size:13px;font-weight:600;min-height:40px}.primary{background:var(--text);color:var(--bg)}.secondary{background:var(--raised);border:1px solid var(--border);color:var(--text)}.swap-button{color:var(--gold)}.metrics-stack{display:grid;gap:20px;grid-template-rows:1fr 1fr}.metric{display:flex;flex-direction:column}.metric .section-heading{margin-bottom:10px}.metric .big-number{font-size:34px}.metric-symbol{color:var(--gold);font-size:25px}.metric p{margin-bottom:14px}.metric-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}.profit{background:linear-gradient(115deg,#1b2522,var(--panel) 75%)}.bottom-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;margin-top:20px}.total-number{font-size:28px;display:block;margin-top:9px;letter-spacing:-1px}.distribution{display:flex;height:11px;gap:4px;border-radius:3px;overflow:hidden;margin:26px 0}.distribution span:first-child{background:var(--blue)}.distribution span:nth-child(2){background:var(--gold)}.distribution span:last-child{background:var(--green)}.legend{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:11px}.legend strong{display:block;margin:6px 0 0 14px;color:var(--text);font-size:13px}.legend-dot{display:inline-block;height:6px;width:6px;border-radius:50%;margin-right:7px}.blue{background:var(--blue)}.gold{background:var(--gold)}.green{background:var(--green)}.arthur{display:flex;flex-direction:column}.arthur-heading{display:flex;gap:12px;align-items:center}.arthur-icon{border:1px solid #786640;border-radius:12px;color:var(--gold);width:43px;height:43px;display:grid;place-items:center;font-size:30px}.arthur p,.card-service p{color:var(--muted);font-size:14px}.arthur button{margin-top:auto;width:100%}.calendar-controls{display:flex;align-items:center;gap:13px}.calendar-controls strong{font-size:12px;font-weight:500;min-width:94px;text-align:center}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}.day-heading{font-size:11px;color:var(--muted);padding:6px}.day{background:transparent;border-radius:7px;padding:7px;font-size:12px;color:var(--muted)}.day.today{background:var(--raised);color:var(--gold);font-weight:650}.day:hover{background:var(--raised)}.calendar-note{margin-bottom:0}.card-service{display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(at 95% 5%,#47365933,transparent 65%),var(--panel)}.card-service h3{font-size:24px;max-width:190px;line-height:1.3;margin-top:13px}.card-service button{margin-top:24px}footer{display:flex;justify-content:space-between;gap:16px;font-size:11px;color:#7d878e;padding:23px 0 8px}dialog{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:18px;padding:25px;width:min(520px,calc(100% - 32px));max-height:88vh;overflow:auto;box-shadow:0 25px 100px #0006}dialog::backdrop{background:#0009;backdrop-filter:blur(5px)}.modal-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.modal-top h2{font-size:21px}.form-field{display:grid;gap:7px;margin:16px 0;font-size:13px}input,select{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--border);padding:11px 12px;border-radius:8px;min-width:0}input:focus,select:focus{outline:1px solid var(--gold)}.hint{font-size:12px;color:var(--muted)}.notice{padding:12px;border:1px solid var(--border);background:var(--raised);border-radius:8px;font-size:13px;margin:14px 0}.full{width:100%}.empty{padding:38px 16px;text-align:center;color:var(--muted);font-size:14px}.empty strong{display:block;color:var(--text);margin-bottom:7px}.error{color:var(--red);font-size:13px}.success-mark{display:grid;place-items:center;color:var(--green);font-size:36px;margin:16px}.chat{position:fixed;bottom:24px;right:24px;width:380px;max-width:calc(100vw - 32px);height:520px;max-height:calc(100dvh - 40px);background:var(--panel);border:1px solid var(--border);border-radius:17px;box-shadow:0 20px 100px #0009;z-index:50;display:flex;flex-direction:column;overflow:hidden}.chat[hidden]{display:none}.chat-top{padding:17px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.chat-top strong{color:var(--gold)}.chat-top span{display:block;font-size:11px;color:var(--muted);margin-top:2px}.messages{flex:1;overflow:auto;padding:16px;font-size:13px}.messages p{padding:12px;border-radius:10px;margin:0 0 12px}.bot{background:var(--raised);margin-right:22px!important}.user{background:#72613c;color:#fff;margin-left:22px!important}.messages .chat-disclaimer{padding:0;color:var(--muted);font-size:11px}.quick-prompts{display:flex;gap:8px;padding:8px 15px}.quick-prompts button{padding:6px 10px;font-size:11px;background:none;border:1px solid var(--border);border-radius:20px;color:var(--muted)}#chat-form{display:flex;gap:8px;padding:14px;border-top:1px solid var(--border)}#chat-form input{font-size:13px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:100;background:var(--text);color:var(--bg);border-radius:9px;padding:12px 22px;box-shadow:0 8px 50px #0008;font-size:13px;max-width:90vw}.mobile-menu{display:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}body.light{color-scheme:light;--bg:#f3f5f6;--sidebar:#fff;--panel:#fff;--raised:#f0f2f3;--border:#dce1e3;--text:#1c2327;--muted:#616d74;--green:#16815a;--red:#bd334b;--gold:#8b681f}.light .profit{background:var(--panel)}.light .brand img{filter:invert(1)}.light nav button.active{background:#f7f0df}.light .hyperliquid{color:#187760}.light .card-service{background:var(--panel)} @media(min-width:1700px){main{padding-top:40px}.panel{padding:27px}.top-grid{grid-template-columns:380px 1fr}.positions td{padding-top:24px;padding-bottom:24px}}@media(max-width:1200px){.sidebar{width:210px;padding:28px 12px}.workspace{margin-left:210px}header{padding:0 24px}main{padding:25px 24px}.top-grid{grid-template-columns:300px minmax(0,1fr)}.panel{padding:19px}.positions .section-heading{align-items:flex-start;flex-direction:column;gap:12px}.position-summary{gap:24px;flex-wrap:wrap}.source-status{display:none}.network-tabs{gap:2px}.network-tabs button{padding:8px;font-size:12px}.metric-bottom{align-items:flex-start;flex-direction:column}.calendar .section-heading{align-items:flex-start;flex-direction:column}.big-number{font-size:34px}} @media(max-width:980px){.top-grid{grid-template-columns:1fr}.profile{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.profile>.section-heading{grid-column:1/-1}.identity{grid-column:1/-1;margin-bottom:15px}.membership,.subscription{padding-top:12px}.positions .section-heading{flex-direction:row}.money-grid{grid-template-columns:1fr}.metrics-stack{grid-template-columns:1fr 1fr;grid-template-rows:auto}.metric .big-number{font-size:28px}.bottom-grid{grid-template-columns:1fr}.calendar .section-heading{flex-direction:row}.demo-badge{display:none}.brand span{font-size:10px}.metric-bottom{flex:1;justify-content:flex-end;gap:12px}}@media(max-width:680px){.sidebar{transform:translateX(-100%);transition:transform .2s;width:242px;box-shadow:20px 0 80px #0006}.sidebar.open{transform:translateX(0)}.workspace{margin-left:0}.mobile-menu{display:block}header{height:70px;padding:0 16px}.breadcrumb{display:none}.header-actions{gap:10px}main{padding:24px 16px}.welcome{align-items:flex-start;gap:12px}.welcome h2{font-size:25px}.welcome .eyebrow{font-size:8px!important}.welcome .text-button{font-size:11px}.profile{display:block}.positions .section-heading{flex-direction:column}.position-summary{gap:30px}.money-grid,.top-grid,.bottom-grid,.metrics-stack{gap:14px}.money-grid,.bottom-grid{margin-top:14px}.metrics-stack{grid-template-columns:1fr}.metric-bottom{flex-direction:row;align-items:center;justify-content:space-between}.profile .identity{margin-bottom:20px}.positions td{padding-top:16px;padding-bottom:16px}.positions th,.positions td{font-size:12px}.positions th:nth-child(3),.positions td:nth-child(3){display:none}.panel{padding:19px}.big-number{font-size:34px}.legend{gap:10px}.legend strong{font-size:12px}.calendar .section-heading{flex-direction:column;gap:10px}.calendar-controls{width:100%;justify-content:space-between}.chat{bottom:12px;right:12px}footer{flex-direction:column;gap:4px}.network-tabs button{flex:1;justify-content:center}.header-actions .icon-btn{display:none}} /* Revision 2 — source icons, explicit theme contrasts and compact account. */ :root{--field-bg:#f4f6f8;--field-text:#17212b;--field-muted:#52606d;--field-border:#dce3ea;--premium-bg:#e4c675;--premium-text:#30250e;--control-border:#65727b} body.light{--field-bg:#17212b;--field-text:#f4f6f8;--field-muted:#c1cbd4;--field-border:#17212b;--premium-bg:#e4c675;--premium-text:#30250e;--control-border:#77838b;--green:#11764e;--red:#b32943} .reference-icon{display:inline-block;flex-shrink:0;width:21px;height:21px;background:currentColor;mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;vertical-align:middle} .reference-icon[data-icon="home"]{mask-image:url("assets/icon-home.png");-webkit-mask-image:url("assets/icon-home.png")} .reference-icon[data-icon="atom"]{mask-image:url("assets/icon-atom.png");-webkit-mask-image:url("assets/icon-atom.png")} .reference-icon[data-icon="rocket"]{mask-image:url("assets/icon-rocket.png");-webkit-mask-image:url("assets/icon-rocket.png")} .reference-icon[data-icon="coins"]{mask-image:url("assets/icon-coins.png");-webkit-mask-image:url("assets/icon-coins.png")} .reference-icon[data-icon="trophy"]{mask-image:url("assets/icon-trophy.png");-webkit-mask-image:url("assets/icon-trophy.png")} .reference-icon[data-icon="badge"]{mask-image:url("assets/icon-badge.png");-webkit-mask-image:url("assets/icon-badge.png")} .reference-icon[data-icon="campus"]{mask-image:url("assets/icon-campus.png");-webkit-mask-image:url("assets/icon-campus.png")} .reference-icon[data-icon="gem"]{mask-image:url("assets/icon-gem.png");-webkit-mask-image:url("assets/icon-gem.png")} .reference-icon[data-icon="card"]{mask-image:url("assets/icon-card.png");-webkit-mask-image:url("assets/icon-card.png")} .reference-icon[data-icon="video"]{mask-image:url("assets/icon-video.png");-webkit-mask-image:url("assets/icon-video.png")} .reference-icon[data-icon="help"]{mask-image:url("assets/icon-help.png");-webkit-mask-image:url("assets/icon-help.png")} .reference-icon[data-icon="box"]{mask-image:url("assets/icon-box.png");-webkit-mask-image:url("assets/icon-box.png")} .reference-icon[data-icon="academy"]{mask-image:url("assets/icon-academy.png");-webkit-mask-image:url("assets/icon-academy.png")} .reference-icon[data-icon="bell"]{mask-image:url("assets/icon-bell.png");-webkit-mask-image:url("assets/icon-bell.png")} .reference-icon[data-icon="sun"]{mask-image:url("assets/icon-sun.png");-webkit-mask-image:url("assets/icon-sun.png")} .reference-icon[data-icon="moon"]{mask-image:url("assets/icon-moon.png");-webkit-mask-image:url("assets/icon-moon.png")} .reference-icon[data-icon="lock"]{mask-image:url("assets/icon-lock.png");-webkit-mask-image:url("assets/icon-lock.png")} .reference-icon[data-icon="swap"]{mask-image:url("assets/icon-swap.png");-webkit-mask-image:url("assets/icon-swap.png")} .reference-icon[data-icon="membership"]{mask-image:url("assets/icon-membership.png");-webkit-mask-image:url("assets/icon-membership.png")} .reference-icon[data-icon="referral"]{mask-image:url("assets/icon-referral.png");-webkit-mask-image:url("assets/icon-referral.png")} .reference-icon[data-icon="wallet"]{mask-image:url("assets/icon-wallet.png");-webkit-mask-image:url("assets/icon-wallet.png")} nav button .chevron{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-right:3px;margin-bottom:4px} .nav-lock{margin-left:auto;opacity:.8}.nav-lock .reference-icon{width:17px;height:17px} .sidebar{overflow-y:auto}.theme{display:flex;align-items:center;gap:9px}.theme>span:last-child{margin:0;font-size:13px}.theme .reference-icon{width:20px;height:20px;margin:0} .header-actions .icon-btn{display:grid;place-items:center} .profile{align-self:start}.profile>.section-heading{margin-bottom:17px}.profile .identity{margin-bottom:16px}.profile .membership,.profile .subscription{padding:14px 0}.profile .profile-field{margin-top:13px}.profile .profile-field:last-child{margin-bottom:0} .field-label{display:block;color:var(--text);font-size:14px;font-weight:550;margin-bottom:8px} .premium{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:5px 13px;border:1px solid #b29447;background:var(--premium-bg);color:var(--premium-text);font-size:14px;font-weight:650;line-height:1.3;min-height:31px}.premium .reference-icon{width:16px;height:18px} .profile .membership p,.profile .subscription p{font-size:13px;line-height:1.55}.badge{font-size:13px}.profile .badge{font-size:14px} .copy-field{background:var(--field-bg);color:var(--field-text);border:1px solid var(--field-border);padding:12px 13px;min-height:48px;font-size:14px;gap:10px;text-align:left}.copy-field small{color:var(--field-muted);font-size:12px;margin-left:5px}.copy-field:hover{filter:none;box-shadow:0 0 0 2px var(--gold)}.copy-action{display:inline-flex;gap:7px;align-items:center;font-size:12px;color:var(--field-text)}.copy-icon{width:12px;height:13px;border:1.5px solid currentColor;border-radius:2px;position:relative;display:inline-block;margin:3px 0 0 3px}.copy-icon:before{content:"";position:absolute;left:-5px;top:-5px;width:9px;height:10px;border:1.5px solid currentColor;border-right:0;border-bottom:0;border-radius:2px} .profile .copy-field:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.profile .copy-field>span:first-child{min-width:0;overflow-wrap:anywhere} .positions td{padding-top:16px;padding-bottom:16px}.positions .section-heading{margin-bottom:17px}.position-summary{padding:17px 0 20px}.positions .panel-foot{padding-top:16px} .token-original{width:30px;height:30px;border-radius:50%;object-fit:contain}.network-token{width:19px;height:19px;border-radius:50%}.swap-button{display:flex;align-items:center;justify-content:center;gap:8px}.swap-button .reference-icon{width:18px;height:18px} .arthur-heading{display:block}.artur-portrait{display:block;width:100%;height:auto;aspect-ratio:208/152;max-height:230px;object-fit:cover;object-position:center;border-radius:12px;margin-bottom:16px}.arthur-heading h3{font-size:23px;margin-bottom:3px}.arthur-heading .subtle{font-size:14px}.arthur p{font-size:15px;line-height:1.65;margin:15px 0 19px}.arthur button{min-height:44px} .bottom-grid{align-items:start}.total{align-self:start}.arthur{grid-column:2;grid-row:1 / span 2}.calendar{grid-column:1;grid-row:2}.card-service{grid-column:2;grid-row:3} .chat-avatar{width:43px;height:43px;object-fit:cover;object-position:72% center;border-radius:50%;margin-right:11px}.chat-top>div{flex:1}.chat-top span{font-size:12px}.chat-top strong{font-size:16px} .network-tabs button,.primary,.secondary,.token-info,.token-amount,.balance-caption,.metric p{font-size:14px}.primary,.secondary,.network-tabs button{min-height:44px}th{font-size:12px}table{font-size:14px}.coin-name small,.token-info span,.token-amount small{font-size:12px}.secondary,select,input{border-color:var(--control-border)}.text-button{font-size:14px}.network-total{font-size:13px}.chat-form input{font-size:16px} .light .token-icon.eth{color:#3a4974}.light .network-icon.eth{color:#3a4974}.light .network-icon.arb{color:#225f89}.light .user{background:#645330}.light .hyperliquid{color:#126747;background:#e9f7ef;border-color:#a9d3ba}.light .badge.positive,.light .direction.long{background:#e8f5ee}.light .badge.negative,.light .direction.short{background:#fdeef1} @media(max-width:980px){.profile{display:block}.profile .identity{margin-bottom:16px}.profile .membership,.profile .subscription{padding:14px 0}.bottom-grid{grid-template-columns:1fr}.arthur,.calendar,.card-service{grid-column:auto;grid-row:auto}.artur-portrait{max-height:260px;object-fit:contain;background:var(--raised)}.arthur-heading{display:grid;grid-template-columns:170px 1fr;gap:20px;align-items:center}.artur-portrait{margin:0}.arthur p{margin-top:18px}.arthur{grid-row:auto}.theme>span:last-child{font-size:12px}} @media(max-width:680px){.arthur-heading{display:block}.artur-portrait{max-height:none;width:100%;margin-bottom:17px;object-fit:cover}.profile{padding-bottom:20px}.copy-field{font-size:14px}.copy-action{font-size:12px}.network-tabs{flex-wrap:wrap}.network-tabs button{font-size:13px}.header-actions .icon-btn{display:none}.legend{flex-wrap:wrap;row-gap:17px}.calendar .section-heading{flex-direction:column}.chat-top{padding:13px}.chat{height:540px;max-height:calc(100dvh - 24px)}input,select,#chat-form input{font-size:16px}.sidebar{height:100dvh}.sidebar-foot{padding-bottom:20px}.profile .identity p{font-size:12px}.welcome .eyebrow{font-size:10px!important}.welcome .text-button{font-size:12px}.day{min-height:36px}.copy-field small{display:block;margin:3px 0 0}.copy-field{min-height:48px}.copy-field .copy-action{white-space:nowrap}.field-label{margin-top:2px}.profile .profile-field:last-child{margin-bottom:0}} .overview-stack,.support-stack{display:grid;gap:20px;align-content:start;min-width:0}.arthur,.calendar,.card-service{grid-column:auto;grid-row:auto}.artur-portrait{max-height:none;object-fit:contain}.copy-action .reference-icon{width:18px;height:18px}.theme>span:last-child{text-align:left}.theme{padding:11px 10px}.theme .reference-icon{margin-right:0}.support-stack .card-service h3{max-width:none;font-size:20px}.support-stack .card-service p{font-size:14px}.support-stack .card-service button{margin-top:16px}.support-stack .card-service{padding-top:20px;padding-bottom:20px} @media(max-width:980px){.bottom-grid{grid-template-columns:1fr}.overview-stack,.support-stack{gap:20px}.artur-portrait{max-height:none}.arthur-heading{grid-template-columns:170px 1fr}.arthur{grid-row:auto}} @media(max-width:680px){.overview-stack,.support-stack{gap:14px}.arthur-heading{display:block}.artur-portrait{width:100%}.copy-action .reference-icon{width:18px;height:18px}} @media(max-width:680px){.sidebar{box-shadow:none}.sidebar.open{box-shadow:20px 0 80px #0006}.welcome .text-button{white-space:nowrap}.welcome .eyebrow{letter-spacing:1.2px}.welcome{gap:10px}.theme{min-height:44px}} .sidebar-close{display:none}@media(max-width:680px){.sidebar-close{display:grid;place-items:center;position:absolute;right:7px;top:26px;width:34px;height:34px}.brand{padding-right:23px}.brand span{font-size:9px;letter-spacing:1.5px}} @media(max-width:400px){.actions.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.actions.three>button{padding:10px 5px;min-width:0;font-size:13px}.swap-button{gap:5px}.swap-button .reference-icon{width:16px;height:16px}} /* Revision 3 — original sun/moon segmented control and subscription disclosure. */ .theme-switch{display:flex;width:100%;gap:2px;padding:3px;background:var(--bg);border:1px solid var(--border);border-radius:9px} .theme-switch button{display:grid;place-items:center;flex:1;min-width:0;height:34px;border-radius:6px;background:transparent;color:var(--muted)} .theme-switch button[aria-pressed="true"]{background:var(--raised);color:var(--text);box-shadow:0 1px 3px #0003} .theme-switch .reference-icon{width:20px;height:20px}.theme-switch button:hover{background:var(--raised)} .nav-submenu{margin:0 12px 5px 22px;padding:6px 0 6px 18px;border-left:1px solid var(--border)} .nav-submenu[hidden]{display:none}.nav-submenu p{margin:5px 0;color:var(--muted);font-size:12px;line-height:1.5} nav button[aria-expanded="true"] .chevron{transform:rotate(225deg);margin-top:5px;margin-bottom:0} @media(max-width:680px){.theme-switch button{height:38px}.sidebar-foot{padding-top:20px}} /* Revision 4 — career tree, Telegram call to action, compact support cards. */ .reference-icon[data-icon="global"]{mask-image:url("assets/icon-global.png");-webkit-mask-image:url("assets/icon-global.png")} .reference-icon[data-icon="billing"]{mask-image:url("assets/icon-billing.png");-webkit-mask-image:url("assets/icon-billing.png")} .reference-icon[data-icon="team"]{mask-image:url("assets/icon-team.png");-webkit-mask-image:url("assets/icon-team.png")} .career-submenu{margin:0 10px 5px 22px;padding:0 0 0 18px}.career-submenu button{position:relative;font-size:14px;gap:12px;min-height:44px;padding:10px 2px;color:var(--muted)}.career-submenu button:before{content:"";position:absolute;left:-19px;top:0;width:11px;height:22px;border-left:1px solid var(--muted);border-bottom:1px solid var(--muted);border-bottom-left-radius:8px;opacity:.5}.career-submenu .reference-icon{width:21px;height:21px}.career-submenu button:hover{background:var(--raised);color:var(--text)} .telegram-cta{position:relative;isolation:isolate;border-radius:28px;padding:3px;overflow:hidden;flex-shrink:0;background:#537deb;min-height:48px;max-width:100%;text-align:center;box-shadow:0 1px 6px #0002} .telegram-cta:before{content:"";position:absolute;z-index:-1;inset:-90%;background:conic-gradient(from 0deg,#71cfff,#5276ff,#9861e9,#f1afd0,#f4f7fb,#71cfff);animation:telegram-glow 9s ease-in-out infinite} .telegram-content{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fbfbfc;color:#182431;border-radius:25px;padding:6px 17px;position:relative;line-height:1.4}.telegram-content strong{font-size:13px;font-weight:650;white-space:nowrap}.telegram-content>span{font-size:11px;color:#53616c}.telegram-cta:hover{filter:none}.telegram-cta:hover .telegram-content{background:#f0f4ff}.telegram-cta:focus-visible{outline:3px solid var(--gold);outline-offset:4px}.telegram-cta:hover:before{animation-play-state:paused} @keyframes telegram-glow{0%,100%{transform:translate(-7%,-4%) rotate(0)}35%{transform:translate(8%,4%) rotate(140deg)}70%{transform:translate(-3%,7%) rotate(270deg)}} .header-actions{gap:14px}.header-actions .icon-btn .reference-icon{width:23px;height:23px} .support-stack .arthur{padding:20px}.support-stack .arthur-heading{display:grid;grid-template-columns:100px minmax(0,1fr);gap:16px;align-items:center}.support-stack .artur-portrait{width:100px;height:auto;max-height:none;aspect-ratio:208/152;object-fit:contain;border-radius:9px;margin:0}.support-stack .arthur-heading h3{font-size:20px;margin:0 0 4px}.support-stack .arthur-heading .subtle{font-size:13px;line-height:1.5;display:block}.support-stack .arthur p{font-size:14px;line-height:1.55;margin:14px 0}.support-stack .arthur button{margin:0;min-height:42px} .support-stack .card-service{display:flex;flex-direction:column;gap:14px;align-items:stretch;padding:20px}.support-stack .card-service h3{margin:0;font-size:17px;line-height:1.4}.payment-card-image{display:block;width:min(100%,230px);height:auto;align-self:center;border-radius:12px;aspect-ratio:259/155;object-fit:contain}.support-stack .card-service p{margin:0;font-size:14px;line-height:1.6}.support-stack .card-service button{margin:0;min-height:42px}.support-stack{gap:20px} @media(max-width:1320px){.header-actions .demo-badge{display:none}} @media(max-width:980px){.support-stack{grid-template-columns:1fr 1fr}.support-stack .arthur-heading{grid-template-columns:80px minmax(0,1fr);gap:12px}.support-stack .artur-portrait{width:80px}.support-stack .arthur button{margin-top:auto}.support-stack .arthur-heading h3{font-size:18px}.telegram-content strong{font-size:12px}} @media(max-width:680px){header{height:auto;display:grid;grid-template-columns:minmax(0,1fr) 34px 36px;gap:10px 12px;padding:14px 16px}.heading{grid-column:1;grid-row:1;gap:8px}.header-actions{display:contents}.header-actions .telegram-cta{grid-column:1 / -1;grid-row:2;justify-self:stretch}.header-actions .icon-btn{display:grid;grid-column:2;grid-row:1;place-items:center}.header-actions .avatar{grid-column:3;grid-row:1}.telegram-content{padding:7px 14px}.telegram-content strong{font-size:14px}.telegram-content>span{font-size:12px}.header-actions .demo-badge{display:none}.support-stack{grid-template-columns:1fr;gap:14px}.support-stack .arthur-heading{grid-template-columns:96px minmax(0,1fr);gap:15px}.support-stack .artur-portrait{width:96px}.support-stack .arthur-heading h3{font-size:20px}.support-stack .arthur button{margin-top:0}.payment-card-image{width:min(100%,230px)}} @media(prefers-reduced-motion:reduce){.telegram-cta:before{animation:none;transform:none}} /* Revision 5 — restore the reference's vertical cards and right-hand column. */ .bottom-grid{grid-template-columns:minmax(0,1fr) 300px;align-items:stretch} .overview-stack,.support-stack{display:contents} .overview-stack .total{grid-column:1;grid-row:1;align-self:stretch} .overview-stack .calendar{grid-column:1;grid-row:2;align-self:stretch} .support-stack .card-service{grid-column:2;grid-row:1} .support-stack .arthur{grid-column:2;grid-row:2} .support-stack .card-service,.support-stack .arthur{display:flex;flex-direction:column;gap:12px;padding:20px;align-items:stretch;justify-content:flex-start;align-self:stretch} .support-stack .card-service h3,.support-stack .arthur h3{font-size:17px;line-height:1.4;font-weight:600;margin:0} .support-stack .payment-card-image,.support-stack .artur-portrait{display:block;width:100%;max-width:none;max-height:none;height:auto;object-fit:contain;align-self:stretch;border-radius:11px;margin:0} .support-stack .payment-card-image{aspect-ratio:259/155} .support-stack .artur-portrait{aspect-ratio:208/152} .support-stack .card-service p,.support-stack .arthur p{font-size:14px;line-height:1.55;margin:0;color:var(--muted)} .support-stack .card-service button,.support-stack .arthur button{margin-top:auto;width:100%;min-height:42px;border-radius:22px} @media(max-width:1100px) and (min-width:981px){.bottom-grid{grid-template-columns:minmax(0,1fr) 270px}} @media(max-width:980px){.bottom-grid{grid-template-columns:1fr}.overview-stack{display:grid;gap:20px}.support-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.overview-stack .total,.overview-stack .calendar,.support-stack .card-service,.support-stack .arthur{grid-column:auto;grid-row:auto}.support-stack .artur-portrait,.support-stack .payment-card-image{width:100%;height:auto}} @media(max-width:680px){.overview-stack,.support-stack{display:grid;grid-template-columns:1fr;gap:14px}.support-stack .card-service,.support-stack .arthur{width:100%;max-width:340px;justify-self:center;gap:12px}.support-stack .card-service button,.support-stack .arthur button{margin-top:0;min-height:44px}} /* Revision 6 — dark Telegram treatment in both themes; Artur face shortcut. */ .telegram-cta{padding:5px;border-radius:29px;background:#080c14;box-shadow:0 0 0 1px #7497ff40,0 4px 16px #567bff28} .telegram-cta:before{background:conic-gradient(from 0deg,#63d9ff,#416bff,#ad60ef,#f09abf,#e2f1ff,#63d9ff);animation-duration:8s} .telegram-content{background:rgba(5,8,14,.91);color:#ffffff;border-radius:24px;padding:7px 17px} .telegram-content>span{color:#d1d9ec}.telegram-content strong{color:#ffffff} .telegram-cta:hover .telegram-content{background:rgba(5,8,14,.83)}.telegram-cta:hover:before{animation-play-state:running} .artur-header-button{display:grid;place-items:center;width:44px;height:44px;min-width:44px;flex-shrink:0;padding:2px;border:1px solid #8c794b;border-radius:50%;background:#121a20;box-shadow:0 1px 5px #0003} .artur-header-button img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%} .artur-header-button:hover{filter:none;border-color:var(--gold);box-shadow:0 0 0 3px #dfbd7326}.artur-header-button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.artur-header-button[aria-expanded="true"]{border-color:var(--gold);box-shadow:0 0 0 2px #dfbd7333} .chat-avatar{object-position:center} @media(max-width:1100px){.breadcrumb{display:none}.header-actions{gap:11px}} @media(max-width:680px){header{grid-template-columns:minmax(0,1fr) 40px 34px 36px;gap:10px 8px}.header-actions .artur-header-button{grid-column:2;grid-row:1;width:40px;height:40px;min-width:40px}.header-actions .icon-btn{grid-column:3}.header-actions .avatar{grid-column:4}.telegram-cta{padding:5px}.telegram-content{padding:7px 14px}.header-actions .telegram-cta{grid-column:1 / -1}} @media(prefers-reduced-motion:reduce){.telegram-cta:before{animation:none}} /* Revision 7 — shorter support copy with two intentional lines. */ .support-stack .card-service,.support-stack .arthur{container-type:inline-size} .support-stack .card-service p.two-line-description,.support-stack .arthur p.two-line-description{font-size:clamp(.75rem,5cqw,.875rem);line-height:1.55;letter-spacing:-.1px} .two-line-description>span{display:block} /* Revision 8 — investment moves to Mirror Trading; referral bonus summaries. */ .positions>.section-heading{display:grid;grid-template-columns:minmax(0,1fr) 180px auto;align-items:center;gap:18px} .position-investment{min-width:0;padding-left:18px;border-left:1px solid var(--border)} .position-investment>span{display:block;font-size:12px;line-height:1.45;color:var(--muted)} .position-investment>strong{display:block;font-size:26px;line-height:1.25;letter-spacing:-.8px;margin-top:5px;color:var(--text);font-weight:600} .metrics-stack{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr 1fr;gap:20px} .bonus-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;min-width:0} .bonus-grid .bonus{padding:20px;min-width:0;justify-content:flex-start} .bonus-grid .section-heading{margin-bottom:16px;min-height:42px;align-items:flex-start} .bonus-grid h3{font-size:16px;line-height:1.35} .bonus-grid .big-number{font-size:30px;letter-spacing:-1px;white-space:nowrap} .bonus-caption{display:block;font-size:12px;color:var(--muted);margin-top:7px} .bonus-grid .bonus p{font-size:13px;line-height:1.55;margin:16px 0 0;color:var(--muted)} .metrics-stack>.profit{min-height:210px} @media(max-width:1200px){.positions>.section-heading{grid-template-columns:minmax(0,1fr) auto;gap:15px}.position-investment{grid-column:1 / -1;grid-row:2;padding-left:0;border-left:0}.position-investment>span{font-size:13px}.position-investment>strong{font-size:26px}.bonus-grid{gap:12px}.bonus-grid .bonus{padding:17px}.bonus-grid h3{font-size:15px}} @media(max-width:980px){.metrics-stack{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}.bonus-grid{gap:20px}.metrics-stack>.profit{min-height:190px}.bonus-grid .section-heading{min-height:0}.bonus-grid .bonus{padding:20px}.bonus-grid h3{font-size:17px}} @media(max-width:680px){.positions>.section-heading{grid-template-columns:minmax(0,1fr) auto}.metrics-stack{gap:14px}.bonus-grid{gap:12px}.bonus-grid .bonus{padding:16px}.bonus-grid h3{font-size:15px}.bonus-grid .section-heading{min-height:41px;margin-bottom:12px}.bonus-grid .big-number{font-size:28px}.bonus-grid .bonus p{font-size:13px}.metrics-stack>.profit{min-height:190px}} @media(max-width:360px){.bonus-grid{grid-template-columns:1fr}.bonus-grid .section-heading{min-height:0}} /* Revision 9 — reference colors for referral and wallet; retain Copy action. */ .copy-field.referral-field{--field-bg:#fbfafc;--field-text:#41474c;--field-muted:#626970;--field-border:#dedde1} .copy-field.wallet-field{--field-bg:#262b2f;--field-text:#adb3b8;--field-muted:#adb3b8;--field-border:#343b40} .copy-field.referral-field,.copy-field.wallet-field{font-family:inherit;font-size:13px;line-height:1.45;letter-spacing:normal} .copy-field.referral-field>span:first-child,.copy-field.wallet-field>span:first-child{font-size:13px;font-weight:600} .copy-field.referral-field .copy-action,.copy-field.wallet-field .copy-action{font-size:12px;font-weight:500;color:var(--field-text)} .copy-field.referral-field small,.copy-field.wallet-field small{font-weight:400;color:var(--field-muted)} /* Revision 10 — Spot / Gold, aligned profile, larger bonuses and scroll cue. */ .top-grid{align-items:stretch} .top-grid>.profile{align-self:stretch;display:flex;flex-direction:column} .profile .membership,.profile .subscription{padding:17px 0} .profile .profile-field{margin-top:18px} .profile .profile-field:last-child{margin-top:auto;padding-top:18px} .copy-field.referral-field{--field-bg:#262b2f;--field-text:#d4d8dc;--field-muted:#adb3b8;--field-border:#343b40} .copy-field.wallet-field{--field-text:#d4d8dc} .positions>.section-heading{grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:start;margin-bottom:18px} .position-investment{grid-column:auto;grid-row:auto;border:0;padding:0;margin-top:16px} .position-investment>span{font-size:13px;white-space:nowrap;line-height:1.5} .position-investment>strong{font-size:30px;margin-top:3px} .position-investment>small{display:block;color:var(--muted);font-size:11px;margin-top:3px} .strategy-tabs{display:flex;gap:7px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--border);padding:14px 0} .strategy-tabs>button{padding:8px 13px;border-radius:8px;background:transparent;border:1px solid var(--border);font-size:14px;font-weight:600;min-height:44px} .strategy-tabs>button span{font-size:11px;font-weight:400;display:block;color:var(--muted)} .strategy-tabs>button[aria-pressed="true"]{background:var(--raised);border-color:var(--gold);color:var(--gold)} #strategy-invested{margin-left:auto;font-size:12px;color:var(--muted)} .position-summary{gap:25px;padding:12px 0 16px} .position-summary strong{font-size:26px} .position-scroll{max-height:263px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--muted) var(--raised);overscroll-behavior:contain} .position-scroll table{min-width:480px} .position-scroll thead{position:sticky;top:0;z-index:1;background:var(--panel)} .positions .position-scroll th{height:44px;padding:10px 8px} .positions .position-scroll td{height:72px;padding:12px 8px} .positions .position-scroll th:first-child,.positions .position-scroll td:first-child{padding-left:0} .positions .position-scroll th:nth-child(3),.positions .position-scroll td:nth-child(3){display:table-cell} .position-quantity{display:block;font-size:11px;color:var(--muted);margin-top:3px} .direction.holding{color:var(--text);background:var(--raised)} .position-scroll-more{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--raised);color:var(--text);width:100%;min-height:36px;border-radius:0 0 7px 7px;font-size:12px;border-top:1px solid var(--border)} .position-scroll-more>span{color:var(--gold);font-size:20px;line-height:1} .position-note{font-size:11px;line-height:1.5;color:var(--muted);margin:12px 0 0} .bonus-grid .big-number,.metrics-stack>.profit .big-number{font-size:38px;line-height:1.2;letter-spacing:-1.4px} .bonus-grid .section-heading{margin-bottom:13px;min-height:0} .bonus-grid .bonus p{margin-top:13px} @media(max-width:1200px) and (min-width:981px){.positions>.section-heading{grid-template-columns:1fr}.positions .hyperliquid{justify-self:start;grid-row:1}.positions .trading-title{grid-row:2}} @media(max-width:980px){.top-grid>.profile{display:block}.profile .profile-field:last-child{margin-top:18px;padding-top:0}} @media(max-width:680px){.positions>.section-heading{grid-template-columns:1fr}.positions .hyperliquid{justify-self:start;grid-row:1}.position-investment>span{font-size:12px}.positions .trading-title{grid-row:2}.position-investment>strong{font-size:29px}#strategy-invested{flex-basis:100%;margin:3px 0 0}.bonus-grid .big-number,.metrics-stack>.profit .big-number{font-size:34px}.bonus-grid{grid-template-columns:1fr}.bonus-grid .bonus{padding:20px}.bonus-grid h3{font-size:17px}.position-scroll table{min-width:470px}.position-note{font-size:11px}} @media(min-width:981px){.top-grid>.profile{justify-content:space-between;gap:8px}.profile>.section-heading,.profile .identity{margin-bottom:0}.profile .profile-field,.profile .profile-field:last-child{margin-top:0;padding-top:0}} /* Revision 11 — Telegram follows the light theme, retaining the animated border. */ body.light .telegram-content{background:#f5f7fb;color:#182431} body.light .telegram-content strong{color:#182431} body.light .telegram-content>span{color:#4b596b} body.light .telegram-cta:hover .telegram-content{background:#e8eef8} /* Revision 12 — matching membership and subscription indicator dimensions. */ .profile .premium,.profile :is(#subscription-status,#career-account-subscription-status){display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:110px;min-width:110px;height:31px;min-height:31px;padding:5px 10px;font-size:14px;font-weight:650;line-height:1.3;border-radius:5px;white-space:nowrap} .profile :is(#subscription-status,#career-account-subscription-status){border:1px solid transparent} /* Revision 13 — compact top cards, future billing shortcuts and two empty slots. */ .top-grid>.profile{display:block;align-self:stretch} .profile>.section-heading{margin-bottom:17px} .profile .identity{margin-bottom:16px} .profile .membership,.profile .subscription{padding:14px 0} .profile .profile-field,.profile .profile-field:last-child{margin-top:13px;padding-top:0} .positions>.section-heading{display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:center;gap:14px;margin-bottom:12px} .positions .trading-title{grid-row:auto;min-width:0} .positions .trading-title h3{font-size:17px} .positions .trading-title .hyperliquid{display:inline-block;margin-top:6px;padding:1px 7px;font-size:10px} .positions .position-investment{grid-row:auto;grid-column:auto;margin:0;padding:9px 12px;border:1px solid var(--border);border-radius:9px;background:var(--raised)} .positions .position-investment>span{font-size:11px;white-space:nowrap} .positions .position-investment>strong{font-size:26px;line-height:1.15;margin-top:3px} .positions .position-investment>small{font-size:10px;margin-top:3px} .trading-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--border);padding:10px 0} .strategy-tabs{border:0;margin:0;padding:0;gap:6px;flex:1} .strategy-tabs>button{padding:5px 10px;min-height:38px;font-size:13px} .strategy-tabs>button span{font-size:10px} #strategy-invested{font-size:10px;flex-basis:100%;margin:0;line-height:1.25} .position-summary{border:0;padding:0;gap:15px;flex-wrap:nowrap;flex-shrink:0} .position-summary strong{font-size:20px;margin:2px 0 0} .position-summary .subtle{font-size:10px} .position-summary .source-status{display:none} .position-scroll{max-height:187px} .positions .position-scroll th{height:34px;padding:7px 8px;font-size:11px} .positions .position-scroll td{height:50px;padding:7px 8px;font-size:12px} .positions .coin-name small,.positions .position-quantity{font-size:10px;line-height:1.3;margin-top:2px} .position-scroll-more{min-height:28px;font-size:11px} .positions .panel-foot{padding-top:10px;font-size:11px} .positions .panel-foot .text-button{font-size:12px} .bonus-grid .bonus .bonus-details{margin-top:auto;padding-top:15px;align-self:flex-start;text-align:left;min-height:44px} .bottom-grid{grid-template-columns:minmax(0,1fr) 300px 300px} .pending-stack{display:contents} .pending-card{align-self:stretch} .pending-top{grid-column:2;grid-row:1} .pending-bottom{grid-column:2;grid-row:2} .support-stack .card-service,.support-stack .arthur{grid-column:3} .overview-stack .calendar .section-heading{flex-direction:column;align-items:flex-start} .overview-stack .calendar .calendar-controls{width:100%;justify-content:space-between} .legend{flex-wrap:wrap;row-gap:14px} @media(min-width:1200px) and (max-width:1399px){.bottom-grid{grid-template-columns:minmax(0,1fr) 230px 230px}.support-stack .card-service,.support-stack .arthur{padding:15px}.support-stack .card-service p.two-line-description,.support-stack .arthur p.two-line-description{font-size:11px}} @media(max-width:1199px){.bottom-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.overview-stack,.support-stack{display:contents}.overview-stack .total{grid-column:1/-1;grid-row:1}.pending-top{grid-column:1;grid-row:2}.support-stack .card-service{grid-column:2;grid-row:2}.overview-stack .calendar{grid-column:1/-1;grid-row:3}.pending-bottom{grid-column:1;grid-row:4}.support-stack .arthur{grid-column:2;grid-row:4}} @media(min-width:981px) and (max-width:1100px){.positions>.section-heading{gap:8px}.positions .trading-title h3{font-size:15px}.positions .position-investment{padding:8px}.positions .position-investment>span{font-size:10px}.position-summary{gap:10px}} @media(max-width:680px){.positions>.section-heading{grid-template-columns:1fr;gap:10px}.positions .trading-title{grid-row:auto}.positions .position-investment{justify-self:stretch}.positions .position-investment>span{font-size:12px}.trading-toolbar{align-items:flex-start;flex-wrap:wrap}.strategy-tabs{min-width:150px}.position-summary{gap:12px}.position-summary .subtle{font-size:10px}.bottom-grid{grid-template-columns:1fr}.overview-stack .total{grid-column:1;grid-row:1}.pending-top{grid-column:1;grid-row:2}.support-stack .card-service{grid-column:1;grid-row:3}.overview-stack .calendar{grid-column:1;grid-row:4}.pending-bottom{grid-column:1;grid-row:5}.support-stack .arthur{grid-column:1;grid-row:6}.pending-card{width:100%;max-width:340px;min-height:350px;justify-self:center}} /* Revision 14 — shared column widths across balances, bonuses and lower cards. */ @media(min-width:1200px){ .money-grid{grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);column-gap:20px} .bonus-grid{column-gap:20px} .bottom-grid{grid-template-columns:minmax(0,calc((100% - 20px) * 1.28 / 2.28)) repeat(2,minmax(0,1fr));column-gap:20px} .overview-stack .total{grid-column:1;grid-row:1} .overview-stack .calendar{grid-column:1;grid-row:2} .pending-top{grid-column:2;grid-row:1} .pending-bottom{grid-column:2;grid-row:2} .support-stack .card-service{grid-column:3;grid-row:1} .support-stack .arthur{grid-column:3;grid-row:2} } @media(min-width:681px) and (max-width:1199px){ .money-grid{grid-template-columns:minmax(0,1fr)} .metrics-stack{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto} .bonus-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px} .bottom-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px} .overview-stack .total{grid-column:1/-1;grid-row:1} .pending-top{grid-column:1;grid-row:2} .support-stack .card-service{grid-column:2;grid-row:2} .overview-stack .calendar{grid-column:1/-1;grid-row:3} .pending-bottom{grid-column:1;grid-row:4} .support-stack .arthur{grid-column:2;grid-row:4} } @media(max-width:680px){ .bottom-grid,.bonus-grid{grid-template-columns:minmax(0,1fr)} .support-stack .card-service,.support-stack .arthur,.pending-card{width:100%;max-width:none;justify-self:stretch} } /* Revision 15 — consistent pill buttons for bonus details and PnL history. */ .bonus-grid .bonus .bonus-details{display:flex;align-items:center;justify-content:center;width:100%;min-height:42px;margin-top:auto;padding:10px 16px;border-radius:22px;text-align:center;align-self:stretch} .bonus-grid .bonus p{margin-bottom:16px} .metrics-stack .profit .history-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-height:40px;padding:8px 16px;border-radius:22px;white-space:nowrap;font-size:13px} @media(max-width:680px){.bonus-grid .bonus .bonus-details,.metrics-stack .profit .history-button{min-height:44px}} /* Revision 16 — investment centered across the full strategy card header. */ .positions>.section-heading{grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:10px} .positions .trading-title{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 12px;width:100%} .positions .trading-title .eyebrow{grid-column:1;grid-row:1} .positions .trading-title h3{grid-column:1;grid-row:2} .positions .trading-title .hyperliquid{grid-column:2;grid-row:1/3;margin:0;justify-self:end} .positions .position-investment{grid-column:1;grid-row:2;justify-self:center;text-align:center;width:max-content;max-width:100%;padding:0 12px;border:0;background:transparent;border-radius:0} .positions .position-investment>strong{margin-top:2px;font-size:28px} .positions .position-investment>small{margin-top:2px} @media(max-width:680px){.positions .trading-title{gap:0 8px}.positions .trading-title h3{font-size:15px}.positions .trading-title .hyperliquid{font-size:9px;padding:2px 5px}.positions .position-investment{justify-self:center}} /* Revision 17 — centered investment shares the top line with the strategy eyebrow. */ .positions>.section-heading{grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr);align-items:start;gap:12px;margin-bottom:12px} .positions .trading-title{display:block;grid-column:1;grid-row:1;width:auto} .positions .position-investment{grid-column:2;grid-row:1;align-self:start;justify-self:center;padding:0;max-width:100%} .positions .position-investment>span{line-height:1.5;font-size:11px} .positions>.section-heading>.hyperliquid{grid-column:3;grid-row:1;justify-self:end;align-self:start;margin:0;padding:2px 7px;font-size:10px} @media(max-width:1199px){.positions>.section-heading{grid-template-columns:minmax(0,1fr) max-content;gap:8px 12px}.positions>.section-heading>.hyperliquid{grid-column:1;grid-row:2;justify-self:start}.positions .position-investment{grid-row:1/3}.positions .trading-title h3{font-size:15px}.positions .position-investment>span{font-size:10px}.positions .position-investment>small{font-size:9px}.positions .position-investment>strong{font-size:26px}} /* Revision 18 — R2R token summary and read-only detail destination. */ .token-summary{display:flex;flex-direction:column;gap:16px;padding:20px} .token-summary h3{font-size:17px} .token-readings{margin:0;display:grid;gap:16px} .token-readings>div+div{border-top:1px solid var(--border);padding-top:13px} .token-readings dt{font-size:13px;color:var(--muted);margin-bottom:5px} .token-readings dd{margin:0;font-size:clamp(20px,1.8vw,27px);font-weight:600;letter-spacing:-.6px;line-height:1.3;overflow-wrap:anywhere} .token-readings dd>span{font-size:11px;font-weight:500;letter-spacing:0;color:var(--muted);white-space:nowrap} .token-summary .token-details{width:100%;min-height:42px;border-radius:22px;margin-top:auto} #dashboard-view[hidden],#token-view[hidden]{display:none} .token-page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px} .token-page-readings{display:grid;gap:16px;max-width:850px;margin-top:24px} .token-page-readings h3{display:flex;align-items:center;gap:10px;margin-bottom:18px} .token-page-readings .big-number small{font-size:16px;color:var(--muted);letter-spacing:0} .token-view{min-height:70vh} @media(min-width:1200px) and (max-width:1399px){.token-summary{padding:15px;gap:12px}.token-readings{gap:12px}} @media(max-width:680px){.token-page-heading{align-items:flex-start;flex-direction:column}.token-readings dd{font-size:27px}.token-summary .token-details{min-height:44px}} /* Revision 19 — two-line help invitation, with natural wrapping on narrow cards. */ .support-stack .arthur p.two-line-description{font-size:clamp(.75rem,4.4cqw,.875rem);line-height:1.55;letter-spacing:-.15px} /* Revision 20 — maximize Artur copy size within exactly two balanced lines. */ .support-stack .arthur p.two-line-description{font-size:14px;letter-spacing:0;line-height:1.5} .support-stack .arthur p.two-line-description>span{display:block;white-space:nowrap} /* Revision 21 — Artur and card descriptions share exactly the same typography. */ .support-stack .card-service p.two-line-description,.support-stack .arthur p.two-line-description{font-size:clamp(.75rem,5cqw,.875rem);line-height:1.55;letter-spacing:-.1px;font-weight:400} .support-stack .arthur p.two-line-description>span{white-space:normal} @media(min-width:1200px) and (max-width:1399px){.support-stack .card-service p.two-line-description,.support-stack .arthur p.two-line-description{font-size:11px}} /* Revision 22 — PnL scope switch and complete balance breakdown. */ :root{--subscription-color:#b5a1f0;--performance-color:#efac79} body.light{--subscription-color:#7758b5;--performance-color:#aa6025} .pnl-switch{display:flex;align-self:flex-start;background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:3px;gap:3px;margin:0 0 16px} .pnl-switch button{background:transparent;color:var(--muted);border-radius:6px;padding:6px 16px;min-height:34px;font-size:13px;font-weight:600} .pnl-switch button[aria-pressed="true"]{background:var(--raised);color:var(--text);box-shadow:0 1px 3px #0002} .profit>.section-heading{margin-bottom:13px} #overall-breakdown{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px} #overall-breakdown>div{font-size:11px;min-width:0} #overall-breakdown strong{font-size:15px;white-space:nowrap} #overall-breakdown strong.positive{color:var(--green)} #overall-breakdown strong.negative{color:var(--red)} @media(max-width:680px){#overall-breakdown{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.pnl-switch button{min-height:40px}} /* Revision 23 — centered position counters and explicit PnL reconciliation. */ .position-summary>div:not(.source-status){text-align:center} .position-summary>div:not(.source-status)>strong{width:100%;text-align:center} .pnl-components{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:12px;font-size:11px;color:var(--muted)} .pnl-components>span{display:flex;gap:7px;align-items:baseline} .pnl-components strong{font-weight:600;font-size:12px} /* Revision 24 — distinct balance colors and matching accumulated strategy PnL. */ :root{--balance-available:#5296ff;--balance-invested:#e5c451;--balance-pnl:#59d4a1;--subscription-color:#a58bf5;--performance-color:#f06ba5} body.light{--balance-available:#2468d1;--balance-invested:#a9820c;--balance-pnl:#13865b;--subscription-color:#7545c2;--performance-color:#ce367c} .strategy-pnl-breakdown{display:grid;gap:2px;margin-top:5px;font-size:10px;color:var(--muted)} .strategy-pnl-breakdown>span{display:flex;justify-content:space-between;gap:12px;white-space:nowrap} .strategy-pnl-breakdown b{font-size:10px;font-weight:600;letter-spacing:0} .position-summary{align-items:center} .strategy-pnl-summary{min-width:140px} #pnl-caption{font-size:12px} /* Revision 25 — explicit USDC denomination, with separate native token quantities. */ .currency-unit{font-size:12px!important;line-height:1.4;font-weight:500;letter-spacing:0;white-space:nowrap;color:var(--muted)} .amount-value{white-space:nowrap} .big-number,.bonus-grid .big-number,.total-number,.position-investment>strong{white-space:normal} .balance-line{flex-wrap:wrap} .valuation-note{color:var(--muted);font-size:11px;line-height:1.5;margin:12px 0 0} #overall-breakdown strong{white-space:normal;font-size:13px} .strategy-pnl-breakdown>span{gap:8px} .strategy-pnl-summary{min-width:170px} .trading-toolbar{flex-wrap:wrap} .pnl-components{gap:8px 15px} .pnl-components>span{flex-wrap:wrap;gap:2px 6px} /* Revision 26 — active team subscribers, styled after the reference count box. */ .team-summary{display:flex;flex-direction:column;align-items:stretch;gap:18px;padding:20px} .team-summary h3{font-size:17px;line-height:1.35} .team-count-box{display:flex;align-items:center;justify-content:center;min-height:88px;margin-top:6px;border:2px solid var(--green);border-radius:10px;background:var(--panel);padding:12px} .team-count-box strong{font-size:48px;font-weight:650;line-height:1.1;letter-spacing:-1.5px;color:var(--text);font-variant-numeric:tabular-nums} .team-count-caption{margin:0;background:var(--raised);color:var(--text);border-radius:9px;padding:12px;font-size:12px;line-height:1.55} .team-demo-note{font-size:10px;color:var(--muted);margin-top:auto} @media(min-width:1200px) and (max-width:1399px){.team-summary{padding:15px;gap:15px}.team-summary h3{font-size:16px}} .team-summary .team-details{display:flex;align-items:center;justify-content:center;width:100%;min-height:42px;padding:10px 16px;border-radius:22px;text-align:center} @media(max-width:680px){.team-summary .team-details{min-height:44px}} /* Revision 28 — full-width trading toolbar with three clearly separated zones. */ .positions{container-type:inline-size;container-name:trading-panel} .trading-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 100px minmax(0,1fr);align-items:center;gap:18px;padding:18px 0;border-bottom:1px solid var(--border);margin-bottom:10px} .trading-toolbar .position-summary{display:contents} .trading-toolbar .strategy-tabs{grid-column:1;grid-row:1;align-self:center;justify-content:flex-start;gap:7px;min-width:0} .trading-toolbar .strategy-tabs>button{min-height:44px;padding:7px 11px} .trading-toolbar #strategy-invested{margin-top:4px;font-size:11px;line-height:1.5} .position-count-summary{grid-column:2;grid-row:1;text-align:center} .position-count-summary>.subtle{display:block;font-size:11px;line-height:1.4} .position-count-summary>#position-count{display:block;font-size:32px;line-height:1.2;margin:7px 0 0;font-weight:600;letter-spacing:-.5px} .strategy-pnl-summary{grid-column:3;grid-row:1;min-width:0;text-align:center} .strategy-pnl-total-block>.subtle{display:block;font-size:11px;line-height:1.4} .strategy-pnl-total-block>#strategy-pnl-total{display:block;font-size:24px;line-height:1.3;margin-top:5px;font-weight:600;letter-spacing:-.5px} .strategy-pnl-breakdown{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border)} .strategy-pnl-breakdown>span{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;font-size:10px;line-height:1.4;white-space:normal} .strategy-pnl-breakdown b{font-size:11px;white-space:nowrap;font-weight:600} @container trading-panel (max-width:520px){ .trading-toolbar{grid-template-columns:minmax(0,1fr) 110px;gap:16px;padding:16px 0} .trading-toolbar .strategy-tabs{grid-column:1;grid-row:1} .position-count-summary{grid-column:2;grid-row:1} .strategy-pnl-summary{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:18px;border-top:1px solid var(--border);padding-top:15px} .strategy-pnl-breakdown{margin:0;padding:0;border:0;gap:12px} } @container trading-panel (max-width:350px){ .strategy-pnl-summary{grid-template-columns:minmax(0,1fr);gap:12px} .strategy-pnl-breakdown{width:100%;max-width:260px;justify-self:center} } /* Revision 29 — matching header controls and three-stage notification indicator. */ .header-actions .avatar.small,.header-actions .notification-button{display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;flex-shrink:0;border-radius:50%} .header-actions .avatar.small{font-size:18px} .header-actions .notification-button{position:relative;color:var(--text)} .header-actions .notification-button .reference-icon{width:28px;height:28px} .notification-dot{position:absolute;right:6px;top:9px;width:9px;height:9px;border-radius:50%;background:#ff233f;box-shadow:0 0 0 2px var(--bg);pointer-events:none} .notification-dot[hidden]{display:none} .notification-dot.is-blinking{animation:notification-pulse 1.5s ease-in-out infinite} @keyframes notification-pulse{0%,100%{opacity:1;box-shadow:0 0 0 2px var(--bg),0 0 6px #ff233f70}50%{opacity:.2;box-shadow:0 0 0 2px var(--bg)}} .notification-list{display:grid;gap:12px} .notification-item{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;text-align:left;background:var(--raised);border:1px solid var(--border);border-radius:12px;padding:16px} .notification-item-title{font-size:15px;font-weight:600} .notification-status{font-size:12px;color:var(--muted)} .notification-status.new{color:var(--text);font-weight:600} .notification-status.new:before,.notification-status.opened:before{content:'';display:inline-block;width:7px;height:7px;background:#ff233f;border-radius:50%;margin-right:7px} .notification-status.read,.notification-read-label{color:var(--green)} .notification-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:24px} .notification-actions button{border-radius:22px} .notification-message{line-height:1.7} .notification-read-label{font-size:13px} @media(max-width:680px){header{grid-template-columns:minmax(0,1fr) repeat(3,40px)}.header-actions .avatar.small,.header-actions .notification-button{width:40px;height:40px;min-width:40px;min-height:40px}.header-actions .notification-button .reference-icon{width:27px;height:27px}.notification-dot{right:4px;top:7px}.notification-actions{align-items:stretch;flex-direction:column}} @media(prefers-reduced-motion:reduce){.notification-dot.is-blinking{animation:none}} /* Revision 30 — reference-style notification dropdown beneath the header bell. */ .notifications-popover{position:fixed;z-index:60;background:var(--panel);border:1px solid var(--blue);border-radius:16px;box-shadow:0 10px 40px #0005;overflow:auto;overscroll-behavior:contain;padding:0} .notifications-popover[hidden]{display:none} .notifications-popover .notification-list{gap:0} .notification-item{display:flex;flex-direction:row;align-items:center;gap:14px;border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;padding:15px 16px} .notification-item:hover{background:var(--raised);filter:none} .notification-bell-disc{display:grid;place-items:center;width:45px;height:45px;flex-shrink:0;border-radius:50%;background:#765e534d;color:#f27950} .notification-bell-disc .reference-icon{width:21px;height:21px} .notification-item-copy{display:flex;flex-direction:column;gap:5px;min-width:0;width:100%} .notification-item-title{display:block;font-size:12px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .notification-date{font-size:11px;color:var(--muted)} .notification-status{font-size:10px;line-height:1.3} .notifications-popover-foot{padding:15px 16px;background:var(--panel);position:sticky;bottom:0} .notifications-popover-foot .primary{width:100%;border-radius:24px;min-height:44px} body.light .notification-bell-disc{background:#fff0e9;color:#b74420} #notifications-view[hidden]{display:none} .notification-page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px} .notification-center{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:24px;min-height:640px;padding:28px} .notification-inbox{border-right:1px solid var(--border);padding-right:16px;min-width:0} .notification-filters{display:flex;gap:3px;background:var(--raised);border-radius:10px;padding:4px;width:max-content;max-width:100%;margin-bottom:16px} .notification-filters button{background:transparent;color:var(--muted);border-radius:7px;padding:8px 15px;font-size:12px;font-weight:600;min-height:36px} .notification-filters button[aria-pressed="true"]{background:var(--panel);color:var(--text)} .notification-inbox .notification-item{padding:12px 10px;border:0;border-radius:11px;gap:10px} .notification-inbox .notification-item[aria-current="true"]{background:var(--raised)} .notification-inbox .notification-bell-disc{width:36px;height:36px} .notification-inbox .notification-item-title{font-size:11px} .notification-inbox .notification-date{font-size:10px} .notification-reading{min-width:0} .notification-reading-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-bottom:18px} .notification-reading-actions button{border-radius:24px;font-size:12px;min-height:40px} .notification-delete{background:#ed4c1d;color:#fff;padding:8px 15px;font-weight:600} .notification-article{border:1px solid var(--border);border-radius:16px;padding:25px} .notification-article-heading{display:flex;gap:15px;align-items:center;border-bottom:1px solid var(--border);padding-bottom:18px;margin-bottom:20px} .notification-article-heading h3{font-size:17px;overflow-wrap:anywhere} .notification-article-heading .notification-date{margin:5px 0 0} .notification-article .notification-message{font-size:14px;line-height:1.8;color:var(--text)} @media(max-width:1100px){.notification-center{grid-template-columns:230px minmax(0,1fr);gap:16px;padding:20px}.notification-article{padding:18px}} @media(max-width:680px){.notification-page-heading{align-items:flex-start;flex-direction:column}.notification-center{grid-template-columns:1fr;min-height:0;padding:16px}.notification-inbox{border-right:0;border-bottom:1px solid var(--border);padding:0 0 16px}.notification-inbox .notification-list{max-height:290px;overflow:auto}.notification-reading-actions{justify-content:flex-start}.notification-article-heading{align-items:flex-start}.notification-article-heading h3{font-size:15px}} /* Revision 31 — seven wrapping quick questions in Artur chat. */ .quick-prompts{flex-wrap:wrap;gap:7px;padding:10px 15px;flex-shrink:0;max-height:min(180px,30dvh);overflow-y:auto} .quick-prompts button{min-height:32px;white-space:nowrap;font-size:11px;padding:6px 11px;color:var(--text)} .chat .messages{min-height:0} .chat-top,#chat-form{flex-shrink:0} @media(max-width:680px){.quick-prompts button{min-height:36px}} /* Revision 32 — one-line, manually scrollable Artur topics on every viewport. */ .quick-prompts-shell{display:grid;grid-template-columns:28px minmax(0,1fr) 28px;align-items:center;gap:5px;padding:8px 10px;flex-shrink:0;min-width:0} .quick-prompts-shell .quick-prompts{display:flex;flex-wrap:nowrap;gap:7px;padding:2px 0 5px;max-height:none;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--muted) transparent;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch} .quick-prompts-shell .quick-prompts button{flex:0 0 auto;min-height:36px;white-space:nowrap;font-size:11px;padding:6px 11px} .topic-scroll-button{display:grid;place-items:center;width:28px;height:36px;border-radius:18px;background:var(--raised);color:var(--text);font-size:23px;line-height:1} .topic-scroll-button:disabled{opacity:.3} .chat{max-width:calc(100vw - 24px)} @media(max-width:680px){.quick-prompts-shell{padding:7px 8px}.quick-prompts-shell .quick-prompts button{min-height:40px}.topic-scroll-button{height:40px}} /* Revision 33 — sidebar Configuration and the five reference settings screens. */ .settings-nav-icon{display:block;width:22px;height:22px;flex-shrink:0} .sidebar nav{overflow-y:auto;min-height:0;align-content:start;scrollbar-width:thin} .sidebar-foot{flex-shrink:0} #settings-view[hidden]{display:none} .settings-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(28px,5vw,85px);padding:28px;min-height:calc(100dvh - 165px);align-items:start} .settings-tabs{display:grid;gap:12px} .settings-tabs button{display:block;width:100%;border:1px solid var(--border);background:transparent;border-radius:25px;text-align:left;padding:12px 20px;color:var(--muted);font-size:14px;min-height:46px} .settings-tabs button[aria-selected="true"]{border:2px solid #287cfa;padding:11px 19px;color:var(--text)} .settings-content{min-width:0} .settings-content>h2{font-size:28px;font-weight:600;border-bottom:1px solid var(--border);padding-bottom:20px;margin:0 0 24px} .settings-label{display:block;font-size:14px;font-weight:600;margin-bottom:7px} .settings-description{color:var(--muted);font-size:14px;line-height:1.6;max-width:660px;margin:0 0 24px} .settings-avatar-row{display:flex;align-items:center;gap:18px;margin:15px 0 28px} .settings-avatar{width:76px;height:76px;font-size:30px;padding:0;overflow:hidden} .settings-avatar img,#header-avatar img,:is(#profile-avatar,#career-account-profile-avatar) img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%} .settings-avatar-row .secondary,.settings-save{border-radius:24px} .settings-content .form-field{margin-bottom:0} .settings-content .form-field input,.settings-content .form-field select{min-height:46px} .username-input{display:flex;align-items:center;gap:12px;background:var(--raised);border:1px solid var(--border);border-radius:10px;padding-left:15px;color:var(--muted)} .username-input input{border:0;background:transparent;margin:0} .settings-save{margin-top:22px;min-width:110px} .settings-feedback{font-size:13px;color:var(--green);margin-top:12px} .settings-demo-note{font-size:11px;line-height:1.6;color:var(--muted);margin-top:30px} .settings-wallet-provider{display:flex;align-items:center;gap:10px;font-size:14px;margin:30px 0 12px;flex-wrap:wrap} .settings-copy{min-height:48px}.settings-copy>span:first-child{overflow-wrap:anywhere;min-width:0} .settings-field-gap{margin-top:28px} .settings-security-status{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;margin-top:30px} .settings-security-actions{display:grid;gap:24px;margin-top:30px} .settings-sensitive-button{background:#ee4e19;color:#fff;border-radius:25px;padding:12px 20px;min-height:46px;font-size:14px;font-weight:600} .demo-private-key{overflow-wrap:anywhere} #settings-language-form .form-field{max-width:330px} #settings-language-form .settings-description{margin-top:12px} .settings-language-preview{display:flex;flex-direction:column;gap:6px;background:var(--raised);border-radius:10px;padding:15px;max-width:330px;font-size:13px;margin-top:22px} .settings-language-preview strong{font-size:20px} .settings-sessions{margin-top:30px} .settings-session{display:flex;align-items:flex-start;gap:14px;padding:24px 0;border-top:1px solid var(--border)} .session-browser-icon{width:42px;height:42px;display:grid;place-items:center;flex-shrink:0;background:var(--raised);border-radius:10px;color:var(--blue)} .session-browser-icon .reference-icon{width:25px;height:25px} .settings-session-info{min-width:0;flex:1}.settings-session-info strong{font-size:15px}.settings-session-info p{font-size:12px;color:var(--muted);line-height:1.6;margin:5px 0} .session-id-copy{font-size:11px;color:var(--muted);background:transparent;text-align:left;padding:0;overflow-wrap:anywhere} .session-revoke{border-radius:20px;min-height:34px;padding:5px 12px;font-size:12px;flex-shrink:0} .settings-session.revoked{opacity:.6} @media(max-width:1100px){.settings-layout{grid-template-columns:180px minmax(0,1fr);gap:25px;padding:22px}.settings-session{flex-wrap:wrap}.session-revoke{margin-left:56px}} @media(max-width:680px){.settings-layout{grid-template-columns:minmax(0,1fr);gap:25px;padding:18px;min-height:70dvh}.settings-tabs{display:flex;gap:7px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:thin}.settings-tabs button{width:auto;white-space:nowrap;flex-shrink:0;padding:10px 15px;min-height:42px;font-size:13px}.settings-tabs button[aria-selected="true"]{padding:9px 14px}.settings-content>h2{font-size:24px}.settings-copy{align-items:flex-start}.settings-copy .copy-action{white-space:nowrap}.settings-avatar-row{gap:14px}.settings-sensitive-button{font-size:13px}} .token-page-readings [data-token-value]>span{font-size:14px;color:var(--muted);font-weight:600} /* Revision 34 — one shared four-column grid; two equal reserved cards. */ .dashboard-layout{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:20px;align-items:stretch} .dashboard-layout>.metrics-stack,.dashboard-layout>.bonus-grid,.dashboard-layout>.overview-stack,.dashboard-layout>.pending-stack,.dashboard-layout>.support-stack{display:contents} .dashboard-layout .panel{min-width:0;align-self:stretch;grid-column:auto;grid-row:auto;max-width:none;width:100%} .dashboard-layout .available{grid-column:1 / span 2;grid-row:1;padding:20px} .dashboard-layout .profit{grid-column:3 / span 2;grid-row:1;min-height:0} .dashboard-layout .total{grid-column:1 / span 2;grid-row:2;padding:20px} .dashboard-layout .bonus:first-child{grid-column:3;grid-row:2} .dashboard-layout .bonus:last-child{grid-column:4;grid-row:2} .dashboard-layout .new-information-1{grid-column:1;grid-row:3} .dashboard-layout .new-information-2{grid-column:2;grid-row:3} .dashboard-layout .team-summary{grid-column:3;grid-row:3} .dashboard-layout .card-service{grid-column:4;grid-row:3} .dashboard-layout .calendar{grid-column:1 / span 2;grid-row:4} .dashboard-layout .token-summary{grid-column:3;grid-row:4} .dashboard-layout .arthur{grid-column:4;grid-row:4} .dashboard-layout .available>.section-heading{margin-bottom:8px} .dashboard-layout .available .balance-caption{margin:5px 0 12px;font-size:12px} .dashboard-layout .available .network-tabs{margin-bottom:4px;gap:6px} .dashboard-layout .available .network-tabs button{padding:7px 10px;min-height:38px;font-size:13px} .dashboard-layout .available .token-row{padding:7px 0} .dashboard-layout .available .valuation-note{margin-top:8px;font-size:11px} .dashboard-layout .available .network-total{margin-top:8px} .dashboard-layout .available .actions{margin-top:12px} .dashboard-layout .total .section-heading{flex-wrap:wrap;gap:8px;margin-bottom:0} .dashboard-layout .total .distribution{margin:18px 0} .dashboard-layout #overall-breakdown{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px} .dashboard-layout #overall-breakdown strong{font-size:13px;margin-left:0;white-space:normal} .dashboard-layout .new-information{display:flex;flex-direction:column;padding:20px} .new-information h3{font-size:17px} .reserved-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px dashed var(--border);border-radius:12px;min-height:150px;padding:20px 10px;margin-top:8px;color:var(--muted)} .reserved-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--raised);font-size:23px;line-height:1;font-weight:400} .reserved-content p{font-size:14px;margin:12px 0 6px;color:var(--text)} .reserved-content>span:last-child{font-size:12px;line-height:1.5} @media(min-width:1200px) and (max-width:1399px){.dashboard-layout .panel{padding:16px}.dashboard-layout .bonus .big-number{font-size:32px}} @media(min-width:681px) and (max-width:1199px){ .dashboard-layout{grid-template-columns:repeat(2,minmax(0,1fr))} .dashboard-layout .panel{grid-column:auto;grid-row:auto} .dashboard-layout .available,.dashboard-layout .profit,.dashboard-layout .total,.dashboard-layout .calendar{grid-column:1/-1} .dashboard-layout .new-information{min-height:260px} } @media(max-width:680px){ .dashboard-layout{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:14px} .dashboard-layout .panel{grid-column:1;grid-row:auto} .dashboard-layout .new-information{min-height:230px} .dashboard-layout #overall-breakdown{grid-template-columns:repeat(2,minmax(0,1fr))} .dashboard-layout .available .network-tabs{flex-wrap:wrap} .dashboard-layout .available .network-tabs button{min-height:42px} .dashboard-layout .available .actions{flex-wrap:wrap} .dashboard-layout .available .actions button{min-width:80px} } /* Revision 35 — PnL context and personal/team point volumes. */ .pnl-explanation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:4px 0 12px;padding:16px;background:var(--raised);border-radius:10px} .pnl-explanation dt{font-size:13px;font-weight:650;color:var(--text);margin-bottom:6px} .pnl-explanation dd{font-size:12px;line-height:1.6;color:var(--muted);margin:0} .dashboard-layout .profit .pnl-explanation-total{font-size:12px;line-height:1.55;margin:0 0 18px;color:var(--muted)} .dashboard-layout .volume-summary{gap:18px} .volume-summary h3{font-size:17px;line-height:1.35;margin:0} .volume-abbreviation{display:inline-block;font-size:11px;font-weight:650;line-height:1.5;padding:2px 7px;border-radius:5px;background:var(--raised);color:var(--muted);vertical-align:middle;white-space:nowrap} .volume-summary .team-count-box{margin-top:6px} .volume-summary .volume-details{margin-top:auto;width:100%;min-height:42px;border-radius:22px;display:flex;align-items:center;justify-content:center} .volume-detail-total{display:block;font-size:34px;font-weight:650;margin:18px 0;color:var(--text)} .volume-detail-total small{font-size:14px;color:var(--muted);font-weight:500} .volume-services{list-style:none;margin:16px 0;padding:0;display:grid;gap:0} .volume-services li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--border);font-size:13px} .volume-services li span{color:var(--muted)} @media(max-width:680px){.pnl-explanation{grid-template-columns:1fr;gap:14px}.volume-summary .volume-details{min-height:44px}} /* Revision 36 — consistent card titles and more prominent VPP/VPE. */ .dashboard-layout .volume-summary{gap:16px} .volume-summary h3{display:flex;flex-direction:column;align-items:flex-start;gap:12px;line-height:1.4} .volume-summary .volume-abbreviation{font-size:24px;line-height:1.2;font-weight:750;letter-spacing:1px;padding:8px 12px;border-radius:8px;color:var(--text);border:1px solid var(--border)} .volume-summary .team-count-box{flex-direction:column;gap:5px;flex-shrink:0;margin: auto 0;min-height:104px} .volume-unit{font-size:12px;color:var(--muted);font-weight:500} .volume-summary .team-count-caption{margin:0} .volume-summary .volume-details{margin-top:0;flex-shrink:0} @media(max-width:1199px){.dashboard-layout .volume-summary{min-height:390px}} /* Revision 37 — coordinated VPP, VPE and active subscriber cards. */ .dashboard-layout .volume-summary,.dashboard-layout .team-summary{display:grid;grid-template-rows:64px minmax(120px,1fr) auto 42px;gap:16px;padding:20px;align-items:stretch} .dashboard-layout .volume-summary h3,.dashboard-layout .team-summary h3{margin:0;font-size:17px;line-height:1.4;min-width:0;align-self:start} .dashboard-layout .volume-summary h3{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:10px} .volume-summary .volume-abbreviation{flex-shrink:0;font-size:17px;line-height:1.25;font-weight:700;letter-spacing:.5px;padding:6px 8px;border-radius:7px;margin-top:1px} .dashboard-layout .volume-summary .team-count-box,.dashboard-layout .team-summary .team-count-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:104px;width:100%;margin:0;align-self:center;padding:12px;border:2px solid var(--green);border-radius:10px} .dashboard-layout .volume-summary .team-count-box strong,.dashboard-layout .team-summary .team-count-box strong{font-size:48px;font-weight:650;line-height:1.1;letter-spacing:-1.5px} .dashboard-layout .volume-summary .team-count-caption,.dashboard-layout .team-summary .team-count-caption{min-height:99px;margin:0;font-size:12px;line-height:1.55;padding:12px} .dashboard-layout .volume-summary .volume-details,.dashboard-layout .team-summary .team-details{margin:0;min-height:42px;align-self:end} @media(min-width:1200px) and (max-width:1399px){.dashboard-layout .volume-summary,.dashboard-layout .team-summary{padding:16px}.dashboard-layout .volume-summary h3,.dashboard-layout .team-summary h3{font-size:16px}.volume-summary .volume-abbreviation{font-size:16px;padding:5px 7px}} @media(max-width:1199px){.dashboard-layout .volume-summary,.dashboard-layout .team-summary{min-height:393px}} @media(max-width:680px){.dashboard-layout .volume-summary,.dashboard-layout .team-summary{grid-template-rows:64px minmax(120px,1fr) auto 44px}.dashboard-layout .volume-summary .volume-details,.dashboard-layout .team-summary .team-details{min-height:44px}} /* Revision 38 — more breathing room between header controls. */ .header-actions{gap:24px} @media(min-width:681px) and (max-width:1100px){ header{height:auto;min-height:91px;display:grid;grid-template-columns:minmax(0,1fr) repeat(3,44px);gap:16px 18px;padding:16px 28px} .heading{grid-column:1;grid-row:1} .header-actions{display:contents} .header-actions .demo-badge{display:none} .header-actions .artur-header-button{grid-column:2;grid-row:1} .header-actions .notification-button{grid-column:3;grid-row:1} .header-actions .avatar.small{grid-column:4;grid-row:1} .header-actions .telegram-cta{grid-column:1/-1;grid-row:2;justify-self:stretch} } @media(max-width:680px){header{gap:14px 12px}.header-actions{display:contents}} /* Revision 39 — abbreviations follow the title, vertically centered. */ .dashboard-layout .volume-summary h3{justify-content:flex-start;align-items:center;gap:7px} .volume-title-text{flex:0 1 auto;min-width:0} .volume-summary .volume-abbreviation{margin-top:0;align-self:center} /* Revision 41 — wider account card and original bronze rank emblem. */ @media(min-width:1200px){.top-grid{grid-template-columns:minmax(350px,1.05fr) minmax(0,1.65fr)}} @media(max-width:1199px){.top-grid{grid-template-columns:minmax(0,1fr)}} .account-intro{display:grid;grid-template-columns:minmax(0,1fr) 84px;grid-template-rows:auto 1fr;column-gap:18px;row-gap:13px;align-items:center;margin-bottom:16px;min-height:102px} .profile .account-intro>.section-heading{grid-column:1;grid-row:1;margin:0;align-self:start} .profile .account-intro>.identity{grid-column:1;grid-row:2;margin:0;min-width:0;gap:12px} .account-intro .identity>div:last-child{min-width:0} .account-intro .identity strong{font-size:20px;overflow-wrap:anywhere} .account-intro .identity p{font-size:11px;overflow-wrap:anywhere} .account-rank-emblem{display:block;grid-column:2;grid-row:1/3;width:84px;height:auto;max-width:100%;object-fit:contain;align-self:center;border-radius:4px} @media(max-width:400px){.account-intro{grid-template-columns:minmax(0,1fr) 66px;column-gap:12px;min-height:92px}.account-rank-emblem{width:66px}.account-intro .identity .avatar{width:42px;height:42px;font-size:20px}.account-intro .identity strong{font-size:18px}.profile .account-intro>.identity{gap:9px}} /* Revision 42 — compact rank card and original membership artwork. */ .profile .account-intro{grid-template-columns:minmax(0,1fr) 132px;column-gap:16px;min-height:0;row-gap:12px;margin-bottom:14px} .account-rank-card{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:10px;border:1px solid var(--border);border-radius:11px;background:var(--raised)} .rank-card-title{font-size:11px;font-weight:650;line-height:1.3;text-align:center} .account-rank-card .account-rank-emblem{width:64px;max-width:100%;height:auto;align-self:center;flex-shrink:0} .rank-card-levels{display:flex;align-items:center;gap:7px;width:100%;padding-top:7px;border-top:1px solid var(--border)} .rank-card-levels strong{font-size:24px;font-weight:650;line-height:1;color:var(--text)} .rank-card-levels span{font-size:10px;line-height:1.35;color:var(--muted)} .profile .membership-with-image{display:grid;grid-template-columns:minmax(0,1fr) 110px;align-items:center;gap:16px;padding:12px 0} .membership-label{font-size:14px;font-weight:550} .profile .membership-copy p{margin:6px 0 0;font-size:12px;line-height:1.5} .membership-card-image{display:block;width:110px;height:auto;object-fit:contain;justify-self:end} .profile .subscription{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:6px 16px;align-items:center;padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .profile .subscription>.label-row{display:contents} .profile .subscription>.label-row>span:first-child{grid-column:1;grid-row:1;font-size:14px;font-weight:550} .profile .subscription :is(#subscription-status,#career-account-subscription-status){grid-column:2;grid-row:1/3;align-self:center;justify-self:end} .profile .subscription :is(#subscription-date,#career-account-subscription-date){grid-column:1;grid-row:2;margin:0;font-size:12px;line-height:1.5} .profile .subscription+.profile-field{margin-top:13px} @media(max-width:400px){.profile .account-intro{grid-template-columns:minmax(0,1fr) 112px;column-gap:12px}.account-rank-card{padding:8px;gap:7px}.account-rank-card .account-rank-emblem{width:56px}.rank-card-levels{gap:5px}.rank-card-levels strong{font-size:22px}.rank-card-levels span{font-size:9px}.profile .membership-with-image,.profile .subscription{column-gap:12px}} /* Revision 43 — slightly narrower account and one shared center axis. */ @media(min-width:1200px){.top-grid{grid-template-columns:minmax(336px,1.008fr) minmax(0,1.692fr)}} .profile{--account-detail-column:132px} .profile .account-intro,.profile .membership-with-image,.profile .subscription{grid-template-columns:minmax(0,1fr) var(--account-detail-column);column-gap:16px} .profile .account-rank-card{width:100%;justify-self:center} .profile .membership-card-image,.profile .subscription :is(#subscription-status,#career-account-subscription-status){justify-self:center} @media(max-width:400px){.profile{--account-detail-column:112px}.profile .account-intro,.profile .membership-with-image,.profile .subscription{column-gap:12px}} /* Revision 44 — another 3% reduction of the current account width. */ @media(min-width:1200px){.top-grid{grid-template-columns:minmax(326px,.97776fr) minmax(0,1.72224fr)}} /* Revision 45 — another 3% account-width trial; preserve content sizes. */ @media(min-width:1200px){.top-grid{grid-template-columns:minmax(316px,.9484272fr) minmax(0,1.7515728fr)}} /* Revision 47 — stable rank-level layout for values from 1 to 15. */ .rank-card-levels{display:grid;grid-template-columns:2ch minmax(0,1fr);column-gap:7px;font-size:24px;align-items:center} .rank-card-levels>strong{display:block;min-width:0;text-align:center;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap} .rank-card-levels>span{min-width:0;overflow-wrap:normal} @media(max-width:400px){.rank-card-levels{font-size:22px;column-gap:5px}} /* Revision 48 — wider rank card, fixed two-line caption and two-digit counter. */ .profile{--account-detail-column:148px} .rank-card-levels .rank-level-caption{display:block;font-size:10px;line-height:1.35} .rank-card-levels .rank-level-caption>span,.rank-card-levels .rank-level-caption>b{display:block;white-space:nowrap;font-size:inherit;line-height:inherit} @media(max-width:400px){.profile{--account-detail-column:128px}.rank-card-levels .rank-level-caption{font-size:9px}} /* Revision 49 — membership art also represents the pre-OTT rank in presets. */ .account-rank-card .account-rank-emblem.rank-membership-image{width:110px;max-width:100%;height:78px;object-fit:contain} @media(max-width:400px){.account-rank-card .account-rank-emblem.rank-membership-image{height:67px}} /* Revision 51 — reserve the BNB three-asset height for every network. */ .dashboard-layout .available{--asset-row-height:56px} .dashboard-layout .available .token-row{height:var(--asset-row-height);min-height:var(--asset-row-height)} .available-assets-region{display:flex;flex-direction:column} .available-assets-region::after{content:"";display:block;flex-shrink:0;height:0} .available-assets-region[data-asset-count="2"]::after{height:var(--asset-row-height)} .dashboard-layout .available .available-assets-region .valuation-note{margin:8px 0 0;line-height:16.5px} /* Revision 52 — more balanced spacing in the Mirror Trading PnL card. */ .dashboard-layout .profit #pnl-caption{margin-top:12px;margin-bottom:22px;line-height:1.6} .dashboard-layout .profit .pnl-explanation{gap:22px;margin:0 0 20px;padding:19px 18px} .dashboard-layout .profit .pnl-explanation dt{margin-bottom:9px} .dashboard-layout .profit .pnl-explanation dd{line-height:1.65} .dashboard-layout .profit .pnl-explanation-total{align-self:center;max-width:440px;text-align:center;line-height:1.65;margin:3px 12px 23px} .dashboard-layout .profit .metric-bottom{padding-top:6px} @media(max-width:680px){.dashboard-layout .profit .pnl-explanation{gap:18px;padding:17px 16px}.dashboard-layout .profit .pnl-explanation-total{margin-left:0;margin-right:0}} /* Revision 53 — accumulated PnL explanation on one line when space permits. */ .dashboard-layout .profit .pnl-explanation-total{max-width:none;width:100%;margin-left:0;margin-right:0;text-wrap:nowrap;font-size:11px} @media(max-width:680px){.dashboard-layout .profit .pnl-explanation-total{text-wrap:wrap;font-size:12px}} /* Revision 54 — Card submenu icons from the supplied navigation reference. */ .card-plus-icon{width:22px;height:22px;flex-shrink:0} /* Revision 55 — new-card comparison and fictitious personal-card workspace. */ #new-card-view[hidden],#my-card-view[hidden]{display:none} .card-page-top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:24px} .card-page-top h2{font-size:25px}.card-page-top button{border-radius:22px} .new-card-hero{text-align:center;max-width:1050px;margin:36px auto 46px} .new-card-hero h2{font-size:clamp(28px,3.5vw,48px);font-weight:700;line-height:1.13;letter-spacing:-1.5px} .new-card-hero p{font-size:16px;color:var(--muted);margin-top:18px} .new-card-plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .card-plan{border:1px solid var(--border);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;min-width:0} .card-plan-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px} .card-plan-heading h3{font-size:16px}.card-plan-heading img{width:56px;height:40px;object-fit:contain} .card-plan-body{background:var(--panel);border-radius:18px;padding:12px;display:flex;flex-direction:column;flex:1} .card-plan-pricebox{background:var(--raised);border-radius:15px;padding:14px 12px} .card-plan-price{display:flex;gap:5px;align-items:center;min-height:57px;margin-bottom:12px}.card-plan-price>strong{font-size:42px;letter-spacing:-1.5px}.card-plan-price>strong.price-pending{font-size:21px;letter-spacing:-.5px}.card-plan-price>span:not(.mastercard-symbol){font-size:12px} .mastercard-symbol{position:relative;display:inline-flex;margin-left:auto;width:30px;height:20px;flex-shrink:0;background:transparent;border-radius:3px;align-items:center;padding:4px} .mastercard-symbol i{width:13px;height:13px;border-radius:50%;background:#eb001b;position:absolute;left:4px}.mastercard-symbol i+i{background:#f79e1b;left:13px;opacity:.93} .card-plan-pricebox button{border-radius:10px;font-size:12px;padding:9px 8px} .card-plan-benefits{list-style:none;padding:0 6px;margin:20px 0;font-size:12px;line-height:1.5;display:grid;gap:12px} .card-plan-benefits li{position:relative;padding-left:23px}.card-plan-benefits li::before{content:'✓';position:absolute;left:0;color:var(--green);font-size:18px;font-weight:700;line-height:1} .card-plan-cashback{font-size:11px;line-height:1.5;padding:0 6px;margin-top:auto}.card-plan-eligibility{font-size:10px;color:var(--muted);padding:0 6px;margin:8px 0 3px} .card-page-description{font-size:13px;color:var(--muted);margin-top:14px;line-height:1.65} .my-card-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(275px,1fr);gap:16px;align-items:start} .card-tables,.card-side-panels{display:grid;gap:16px;min-width:0}.card-transactions h3{margin-bottom:24px} .card-table-scroll{overflow:auto;scrollbar-width:thin;max-width:100%}.card-data-table{width:100%;border-collapse:collapse;font-size:12px;white-space:nowrap}.card-data-table th{text-align:left;background:var(--raised);padding:15px 14px;font-size:12px;font-weight:650}.card-data-table td{padding:19px 14px;border-bottom:1px solid var(--border);color:var(--muted)}.card-data-table td:first-child{font-family:ui-monospace,monospace;color:var(--text)}.card-data-table td.card-tx-amount{color:var(--text);font-weight:650}.card-data-table .badge{font-size:11px;border-radius:16px;padding:6px 9px} .card-pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px;color:var(--muted);font-size:11px}.card-pagination>div{display:flex;align-items:center;gap:8px}.card-pagination button{min-width:34px;padding:4px 9px}.card-pagination strong{padding:8px 12px;background:var(--raised);color:var(--text);border-radius:7px;white-space:nowrap} .card-auth select{width:auto;max-width:180px;font-size:12px}.card-balance-number{display:block;font-size:36px;font-weight:650;letter-spacing:-1px;margin-top:20px}.card-balance-panel>p{font-size:12px}.card-balance-chart{display:block;width:100%;height:auto;margin-top:14px}.card-cashback-label{text-align:center;font-size:11px!important;color:var(--muted)}.card-cashback-label strong{color:#e97537}.card-balance-panel .actions>*{flex:1;border-radius:24px;white-space:nowrap;font-size:12px;padding:10px}.card-visual-panel h3{margin-bottom:16px} .demo-payment-card{position:relative;aspect-ratio:1.58;background:radial-gradient(ellipse at 20% 70%,#d8581caa,transparent 70%),radial-gradient(ellipse at 95% 10%,#ae164ecc,transparent 60%),linear-gradient(140deg,#19082f,#05070e 75%);border-radius:12px;padding:20px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden} .card-reveal,.card-flip{background:#0003;color:white;border-radius:50%;width:30px;height:30px;display:grid;place-items:center;flex-shrink:0;padding:0}.card-reveal{position:absolute;top:12px;left:12px}.card-demo-watermark{position:absolute;top:18px;left:52px;letter-spacing:2px;font-size:9px;opacity:.8}.card-contactless{position:absolute;right:20px;top:22px;font-size:12px;opacity:.6}.demo-card-number{font-family:ui-monospace,monospace;font-size:clamp(14px,1.4vw,20px);white-space:nowrap;letter-spacing:1px;margin-bottom:18px}.demo-card-bottom{display:flex;gap:12px;justify-content:space-between;align-items:flex-end}.demo-card-bottom div{min-width:0}.demo-card-bottom span{display:block;font-size:8px;opacity:.8}.demo-card-bottom strong{font-size:10px;font-weight:650;white-space:nowrap}.no-demo-card{padding:20px 5px}.no-demo-card p{font-size:12px;line-height:1.6} @media(max-width:1350px){.new-card-plans{grid-template-columns:repeat(2,minmax(0,1fr))}.my-card-layout{grid-template-columns:minmax(0,1.7fr) minmax(265px,1fr)}.card-side-panels>.panel{padding:17px}} @media(max-width:1050px){.my-card-layout{grid-template-columns:1fr}.card-side-panels{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-card-number{font-size:18px}} @media(max-width:680px){.card-page-top{flex-wrap:wrap;margin-bottom:16px}.new-card-hero{margin:22px auto 28px}.new-card-hero h2{letter-spacing:-.7px}.new-card-hero p{font-size:14px}.new-card-plans{grid-template-columns:1fr}.card-plan-price>strong{font-size:42px}.card-plan-benefits{font-size:13px}.card-side-panels{grid-template-columns:1fr}.card-pagination{flex-wrap:wrap}.card-page-top h2{font-size:23px}.demo-card-number{font-size:19px}.card-data-table td{padding:16px 12px}.card-plan-pricebox button{font-size:14px}} /* Revision 56 — membership gift, transparent activation allocation and 1 VPP. */ .new-card-hero{max-width:1120px;margin-bottom:34px} .new-card-hero p{max-width:840px;margin:18px auto 0;line-height:1.6} .card-plan-body{padding:16px} .card-gift-heading{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;margin:2px 0 16px} .card-gift-heading>span{font-size:11px;color:var(--muted)} .card-gift-heading>strong{font-size:22px;font-weight:650;letter-spacing:-.5px;color:var(--text)} .card-obtain-button{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px;border-radius:24px;padding:10px;font-size:13px} .card-obtain-button .mastercard-symbol{margin-left:0} .card-plan-body>.card-plan-eligibility{text-align:center;margin:9px 0 0;padding:0;min-height:15px} .card-plan-benefits{margin:23px 0;padding:0;gap:13px} .card-activation-explanation{border-top:1px solid var(--border);padding-top:18px;margin-top:auto} .card-activation-explanation h4{font-size:14px;font-weight:650;margin:0 0 9px;line-height:1.4} .card-initial-amount{font-size:12px;color:var(--muted);line-height:1.6;margin:0 0 13px} .card-initial-amount strong{color:var(--text)} .card-allocation{display:grid;gap:12px} .card-allocation>div{padding:12px;border-radius:10px;background:var(--raised)} .card-allocation>div>strong{display:block;font-size:22px;line-height:1.2;margin-bottom:7px;color:var(--text)} .card-allocation small{font-size:11px;font-weight:600} .card-allocation span{display:block;font-size:12px;line-height:1.65;color:var(--muted)} .card-allocation b{color:var(--text);font-weight:600} .card-gift-summary{font-size:12px;line-height:1.65;margin:14px 0;color:var(--muted)} .card-vpp-note{font-size:12px;line-height:1.5;color:var(--green);background:var(--raised);padding:10px 12px;border-radius:8px;margin:0} #modal-content>.card-activation-explanation{margin-top:16px} @media(max-width:680px){.card-plan-body{padding:18px}.card-gift-heading>strong{font-size:24px}.card-obtain-button{font-size:14px}} /* Revision 57 — compact desktop comparison without clipping content. */ #new-card-view .new-card-hero{margin:12px auto 20px} #new-card-view .new-card-hero h2{font-size:clamp(28px,2.5vw,38px);line-height:1.12;letter-spacing:-1px} #new-card-view .new-card-hero p{font-size:14px;margin-top:10px;line-height:1.45} #new-card-view .card-page-top{margin-bottom:12px} #new-card-view .card-plan-heading{padding:10px 14px} #new-card-view .card-plan-heading img{width:48px;height:32px} #new-card-view .card-plan-body{padding:12px 14px} #new-card-view .card-gift-heading{gap:1px;margin:0 0 10px} #new-card-view .card-gift-heading>strong{font-size:21px} #new-card-view .card-obtain-button{min-height:40px;padding:8px} #new-card-view .card-plan-eligibility{margin-top:6px} #new-card-view .card-plan-benefits{margin:14px 0;gap:7px} #new-card-view .card-activation-explanation{padding-top:12px} #new-card-view .card-activation-explanation h4{margin-bottom:5px} #new-card-view .card-initial-amount{margin-bottom:8px;line-height:1.4} #new-card-view .card-allocation{gap:8px} #new-card-view .card-allocation>div{display:grid;grid-template-columns:54px minmax(0,1fr);gap:9px;align-items:center;padding:9px} #new-card-view .card-allocation>div>strong{font-size:22px;margin:0} #new-card-view .card-allocation small{display:block;font-size:10px;margin-top:2px} #new-card-view .card-allocation span{line-height:1.45} #new-card-view .card-gift-summary{display:none} /* The two allocation rows retain the complete explanation. */ #new-card-view .card-vpp-note{margin-top:10px;padding:8px 9px;line-height:1.4} #new-card-view>.hint{margin:10px 0 0;font-size:11px;line-height:1.4} @media(min-width:1200px){ main:has(#new-card-view:not([hidden])){padding-top:14px;padding-bottom:10px} #new-card-view .new-card-plans{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} } @media(min-width:1200px) and (max-height:850px){ #new-card-view .new-card-hero{margin:8px auto 14px} #new-card-view .new-card-hero h2{font-size:30px;max-width:1000px;margin:auto} #new-card-view .new-card-hero p{font-size:13px;margin-top:8px} #new-card-view .card-page-top{margin-bottom:8px} #new-card-view .card-plan-benefits{margin:11px 0;gap:6px} } @media(max-width:680px){ #new-card-view .new-card-hero{margin:20px auto 24px} #new-card-view .card-plan-body{padding:18px} #new-card-view .card-plan-benefits{gap:12px;margin:20px 0} #new-card-view .card-obtain-button{min-height:44px} #new-card-view .card-allocation>div{padding:12px} #new-card-view .card-allocation span{font-size:13px;line-height:1.6} } /* Revision 58 — airy desktop layout that grows with the available viewport. */ @media(min-width:1200px){ main:has(#new-card-view:not([hidden])){display:flex;flex-direction:column;min-height:calc(100svh - 91px);padding-top:20px;padding-bottom:10px} #new-card-view:not([hidden]){display:flex;flex-direction:column;flex:1} #new-card-view .card-page-top{margin-bottom:12px;flex-shrink:0} #new-card-view .new-card-hero{margin:clamp(18px,2.5vh,30px) auto clamp(24px,3vh,36px);flex-shrink:0;width:100%} #new-card-view .new-card-hero h2{font-size:clamp(32px,2.8vw,44px);line-height:1.13;max-width:1080px;margin:auto} #new-card-view .new-card-hero p{font-size:14px;line-height:1.55;margin-top:14px;max-width:900px} #new-card-view .new-card-plans{flex:1;gap:16px;align-items:stretch} #new-card-view .card-plan-heading{padding:12px 16px;min-height:76px} #new-card-view .card-plan-heading h3{font-size:17px} #new-card-view .card-plan-heading img{width:72px;height:51px} #new-card-view .card-plan-body{padding:16px} #new-card-view .card-gift-heading{gap:4px;margin:2px 0 16px} #new-card-view .card-gift-heading>strong{font-size:23px} #new-card-view .card-obtain-button{min-height:44px;padding:10px} #new-card-view .card-plan-eligibility{margin-top:9px} #new-card-view .card-plan-benefits{margin:20px 0;gap:11px} #new-card-view .card-activation-explanation{padding-top:16px} #new-card-view .card-activation-explanation h4{margin-bottom:8px} #new-card-view .card-initial-amount{margin-bottom:11px;line-height:1.5} #new-card-view .card-allocation{gap:10px} #new-card-view .card-allocation>div{padding:11px;gap:11px} #new-card-view .card-allocation span{line-height:1.55} #new-card-view .card-vpp-note{margin-top:13px;padding:10px;line-height:1.5} #new-card-view>.hint{margin-top:12px} main:has(#new-card-view:not([hidden]))>footer{padding-top:14px;padding-bottom:0;flex-shrink:0} } @media(min-width:1200px) and (max-height:850px){ main:has(#new-card-view:not([hidden])){padding-top:14px} #new-card-view .new-card-hero{margin:14px auto 20px} #new-card-view .new-card-hero h2{font-size:32px} #new-card-view .new-card-hero p{margin-top:10px;font-size:13px} #new-card-view .card-plan-heading{min-height:64px;padding:8px 14px} #new-card-view .card-plan-heading img{width:66px;height:47px} #new-card-view .card-plan-body{padding:13px 14px} #new-card-view .card-gift-heading{margin-bottom:12px} #new-card-view .card-plan-benefits{margin:15px 0;gap:8px} #new-card-view .card-activation-explanation{padding-top:12px} #new-card-view .card-allocation>div{padding:9px} #new-card-view .card-vpp-note{margin-top:10px;padding:8px 10px} } /* Revision 59 — concise, centered subtitle; one desktop line. */ #new-card-view .new-card-hero p{max-width:none;text-align:center;text-wrap:balance} @media(min-width:1200px){#new-card-view .new-card-hero p{font-size:clamp(12px,1vw,14px);white-space:nowrap}} /* Revision 60 — five membership references with selectable details. */ #memberships-view[hidden]{display:none} .memberships-hero{text-align:center;max-width:1120px;margin:30px auto 44px} .memberships-hero h2{font-size:clamp(30px,3.4vw,48px);font-weight:700;line-height:1.15;letter-spacing:-1.4px} .memberships-hero p{max-width:1050px;margin:16px auto 0;font-size:16px;line-height:1.55;color:var(--muted)} .memberships-plans{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;max-width:1200px;margin:0 auto 28px} .membership-option{position:relative;min-width:0;background:var(--panel);border:2px solid transparent;border-radius:17px;padding:16px 13px 13px;display:flex;flex-direction:column;gap:12px} .membership-option.selected{border-color:var(--membership-accent)} .membership-option img{width:100%;max-width:205px;aspect-ratio:1.41;object-fit:contain;align-self:center} .membership-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px} .membership-price strong{font-size:clamp(24px,2.05vw,34px);line-height:1.2;letter-spacing:-1px;font-weight:650} .membership-price span{font-size:11px;color:var(--muted);white-space:nowrap} .membership-option button{border-radius:24px;min-height:40px;font-size:12px;margin-top:auto} .membership-option.selected button{background:var(--membership-accent);color:#101214} .membership-popular{position:absolute;right:8px;top:-9px;font-size:10px;padding:2px 10px;border-radius:20px;background:#dbc3ec;color:#302239;font-weight:650} .membership-detail{--membership-accent:#458dc2;max-width:1200px;margin:auto;border:2px solid var(--membership-accent);padding:28px} .membership-detail h2{font-size:34px;font-weight:700;line-height:1.2} .membership-intro{font-size:13px;color:var(--muted);margin:7px 0 24px} .membership-feature-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 38px;grid-auto-flow:column;grid-template-rows:repeat(3,auto)} .membership-feature-list li{display:flex;gap:10px;align-items:baseline;font-size:13px;line-height:1.55;font-weight:550} .membership-feature-list li>span{font-size:12px;color:var(--green);flex-shrink:0} .membership-feature-list li.excluded>span{color:var(--red)} .membership-summary{font-size:13px;line-height:1.6;color:var(--muted);margin:26px 0 20px} .membership-detail-actions{display:flex;flex-wrap:wrap;gap:12px} .membership-detail-actions button{border-radius:24px;font-size:12px;min-height:40px;padding:10px 20px} .membership-detail-actions .primary{background:var(--membership-accent);color:#101214} @media(max-width:1199px){.memberships-plans{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.membership-price strong{font-size:28px}.memberships-hero{margin:24px auto 32px}} @media(max-width:680px){.memberships-plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.membership-option{padding:12px 10px}.membership-option:last-child{grid-column:1/-1;width:calc(50% - 7px);justify-self:center}.membership-price strong{font-size:26px}.membership-feature-list{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;gap:14px}.membership-detail{padding:20px}.membership-detail h2{font-size:28px}.memberships-hero p{font-size:14px}.membership-detail-actions{flex-direction:column}} /* Revision 62 — centered prices and visible personal points for each membership. */ .membership-price{justify-content:center;text-align:center;align-items:baseline;min-height:42px} .membership-price span{flex-basis:100%;text-align:center} .membership-vpp{display:flex;align-items:baseline;justify-content:center;gap:6px;border:1px solid var(--green);border-radius:9px;background:color-mix(in srgb,var(--green) 7%,var(--panel));color:var(--green);padding:7px 12px;width:100%;max-width:150px;align-self:center} .membership-vpp strong{font-size:24px;line-height:1.2;font-weight:650;font-variant-numeric:tabular-nums} .membership-vpp span{font-size:12px;font-weight:650;letter-spacing:.5px} .membership-feature-list{grid-template-rows:repeat(var(--feature-rows,3),auto)} @media(max-width:680px){.membership-feature-list{grid-template-rows:none}.membership-vpp strong{font-size:23px}} /* Revision 63 — independently spaced benefits and a light height reduction. */ .membership-feature-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px;align-items:start} .membership-feature-list{display:flex;flex-direction:column;gap:11px;align-items:stretch} @media(min-width:1200px){ .memberships-hero{margin-top:26px;margin-bottom:36px} .memberships-plans{margin-bottom:24px} .membership-detail{padding:24px 28px} .membership-intro{margin-bottom:20px} .membership-summary{margin-top:20px;margin-bottom:16px} } @media(max-width:680px){.membership-feature-columns{grid-template-columns:1fr;gap:11px}} /* Revision 69 — activation points alongside the membership artwork. */ #new-card-view .card-plan-heading{flex-wrap:wrap;gap:8px 12px} .card-plan-heading-assets{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-left:auto} .card-activation-vpp{border:1px solid var(--green);background:color-mix(in srgb,var(--green) 7%,var(--panel));border-radius:8px;padding:5px 7px;text-align:center;max-width:103px} .card-activation-vpp span{display:block;font-size:10px;line-height:1.25;color:var(--muted);text-wrap:balance} .card-activation-vpp strong{display:block;font-size:17px;line-height:1.2;font-weight:650;color:var(--green);margin-top:2px;white-space:nowrap} @media(min-width:1200px) and (max-width:1500px){#new-card-view .card-plan-heading{display:grid;grid-template-columns:1fr;gap:7px}#new-card-view .card-plan-heading-assets{margin-left:0;justify-content:space-between}} /* Revision 71 — preserve v69 membership layout; horizontal green badge only. */ .card-activation-vpp{display:flex;align-items:center;justify-content:center;gap:7px;max-width:none;padding:6px 8px} .card-activation-vpp span{max-width:78px;text-align:left;font-size:10px;line-height:1.25} .card-activation-vpp strong{margin-top:0;font-size:17px;line-height:1.2;white-space:nowrap} /* Revision 72 — membership availability labels. */ .membership-coming-soon{background:var(--raised);color:var(--text);border:1px solid var(--border)} /* Revision 73 — membership purchase action at the opposite end of the row. */ .membership-detail-actions .membership-acquire{margin-left:auto;min-width:170px;font-size:14px;font-weight:700;padding:10px 24px;background:var(--membership-accent);color:#101214;box-shadow:0 0 0 1px color-mix(in srgb,var(--membership-accent) 60%,transparent)} .membership-detail-actions .membership-acquire:disabled{box-shadow:none} @media(max-width:680px){.membership-detail-actions .membership-acquire{margin-left:0;width:100%;min-height:44px}} /* Revision 74 — consistent return action, including placeholder destinations. */ .modal-dashboard-action{display:flex;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)} .modal-dashboard-action button{border-radius:24px;font-size:13px;padding:10px 18px} @media(max-width:680px){.modal-dashboard-action button{width:100%;min-height:44px}} /* Revision 75 — Spot and Gold subscription landing. */ #subscriptions-view[hidden]{display:none} .subscriptions-hero{text-align:center;max-width:1050px;margin:28px auto 32px} .subscriptions-hero h2{font-size:clamp(30px,3vw,44px);font-weight:700;line-height:1.15;margin:10px 0 14px} .subscriptions-hero>p:not(.eyebrow){font-size:15px;line-height:1.6;color:var(--muted);max-width:820px;margin:auto} .subscription-hero-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px} .subscription-hero-tags span{font-size:11px;padding:6px 12px;border:1px solid var(--border);border-radius:20px;color:var(--muted);background:var(--panel)} .subscription-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:1200px;margin:auto} .subscription-plan{display:flex;flex-direction:column;padding:26px;--strategy-accent:var(--green)} .subscription-plan-gold{--strategy-accent:var(--gold)} .subscription-plan-heading{display:flex;align-items:center;justify-content:space-between;gap:14px} .subscription-plan-heading h3{font-size:32px;line-height:1.2;margin-top:7px} .subscription-strategy-icon{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--border);border-radius:12px;color:var(--strategy-accent);background:var(--raised)} .subscription-strategy-icon .reference-icon{width:27px;height:27px} .subscription-description{font-size:14px;line-height:1.6;color:var(--muted);margin:17px 0 20px;min-height:45px} .subscription-commercial{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:18px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .subscription-price strong{font-size:38px;letter-spacing:-1px;font-weight:650;line-height:1.1;display:block} .subscription-price>span{display:block;font-size:12px;color:var(--muted);margin-top:5px} .subscription-points{border:1px solid var(--green);border-radius:10px;padding:9px 12px;text-align:center} .subscription-points strong{display:block;font-size:22px;color:var(--green);line-height:1.2}.subscription-points span{display:block;font-size:10px;color:var(--muted);margin-top:4px} .subscription-features{list-style:none;padding:0;margin:20px 0;display:grid;gap:12px;font-size:13px;line-height:1.55} .subscription-features li{padding-left:19px;position:relative}.subscription-features li::before{content:'•';position:absolute;left:1px;color:var(--strategy-accent)} .subscription-custody{font-size:12px;color:var(--muted);margin:auto 0 18px;padding-top:4px} .subscription-plan>button{border-radius:24px;min-height:44px;font-weight:650} .subscription-capital-note{max-width:1100px;margin:14px auto 26px;text-align:center;font-size:12px;color:var(--muted);line-height:1.5} .subscription-guide,.subscription-tutorial{max-width:1200px;margin:0 auto 20px} .subscription-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px} .subscription-steps li>span{display:inline-grid;place-items:center;border:1px solid var(--border);border-radius:50%;width:34px;height:34px;font-size:12px;color:var(--gold);margin-bottom:11px} .subscription-steps h4{margin:0 0 7px;font-size:14px;font-weight:650}.subscription-steps p{margin:0;color:var(--muted);font-size:12px;line-height:1.65} .subscription-tutorial{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center} .subscription-video-placeholder{aspect-ratio:16/9;min-width:0;border:1px solid var(--border);border-radius:13px;background:radial-gradient(ellipse at 20% 10%,#458dc21c,transparent 65%),var(--raised);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center} .subscription-play{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:var(--panel);color:var(--text);border:1px solid var(--border);font-size:18px;padding-left:3px} .subscription-video-placeholder>strong{font-size:18px}.subscription-video-placeholder>span:last-child{font-size:12px;color:var(--muted)} .subscription-tutorial-copy>p:not(.eyebrow){font-size:13px;color:var(--muted);line-height:1.6}.subscription-tutorial-copy ul{padding-left:18px;font-size:12px;color:var(--muted);line-height:1.8} .subscription-doc-link{font-size:11px;color:var(--blue);text-decoration:underline} .subscription-order-summary{border:1px solid var(--border);border-radius:12px;padding:16px;margin:20px 0;display:grid;gap:12px}.subscription-order-summary>div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;font-size:13px}.subscription-order-summary span{color:var(--muted)}.subscription-order-summary strong{text-align:right} @media(max-width:1100px){.subscription-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.subscription-tutorial{gap:20px}} @media(max-width:680px){.subscription-plans,.subscription-tutorial{grid-template-columns:1fr}.subscription-plan{padding:20px}.subscription-guide .section-heading{align-items:flex-start;flex-direction:column}.subscription-steps{grid-template-columns:1fr;gap:20px}.subscription-steps li{display:flex;gap:13px}.subscription-steps li>span{flex-shrink:0;margin:0}.subscription-order-summary>div{flex-wrap:wrap;gap:4px}.subscription-hero-tags{gap:7px}.subscriptions-hero{margin:20px auto 26px}} /* Revision 77 — folded S subscription icon, Spot green and Gold gold. */ .subscription-ribbon{display:inline-block;width:21px;height:23px;flex-shrink:0;background:currentColor;mask:url("assets/icon-subscription-ribbon.svg") center/contain no-repeat;-webkit-mask:url("assets/icon-subscription-ribbon.svg") center/contain no-repeat} .subscription-ribbon.spot{color:var(--green)}.subscription-ribbon.gold{color:var(--gold)} .subscription-status-icons{display:inline-flex;align-items:center;gap:3px} .profile .subscription :is(#subscription-status,#career-account-subscription-status){display:inline-flex;justify-content:center;align-items:center;gap:6px;padding-left:5px;padding-right:5px} :is(#subscription-status,#career-account-subscription-status) .subscription-ribbon{width:17px;height:20px} .subscription-strategy-icon .subscription-ribbon{width:26px;height:29px} /* Revision 79 — restore v77 account spacing and trailing subscribers icon. */ .dashboard-layout .team-summary #team-summary-title{display:flex;align-items:center;justify-content:flex-start;gap:7px} .team-subscription-icon{color:inherit;width:22px;height:24px} /* Revision 80 — permanent bonus icons, inheriting the heading color. */ .bonus-grid .bonus-title-with-icon{display:flex;align-items:center;justify-content:flex-start;gap:7px} .bonus-title-icon{display:inline-block;width:22px;height:24px;flex-shrink:0;background:currentColor;mask:var(--bonus-icon) center/contain no-repeat;-webkit-mask:var(--bonus-icon) center/contain no-repeat} .bonus-icon-subscription{--bonus-icon:url("assets/icon-bonus-suscripcion.svg")} .bonus-icon-performance{--bonus-icon:url("assets/icon-bonus-performance.svg")} /* Revision 82 — permanent R2R Token heading icon. */ #token-summary-title{display:flex;align-items:center;justify-content:flex-start;gap:7px} .token-summary-icon{width:22px;height:24px;flex-shrink:0;color:inherit} /* Revision 86 — Token R2R management screen. */ .token-management-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(290px,1fr);gap:16px;align-items:start} .token-management-main,.token-management-aside,.token-balance-stack{display:grid;gap:14px;min-width:0} .token-balance-panel{padding:22px 24px}.token-balance-panel .section-heading{margin-bottom:14px;align-items:center;gap:12px}.token-balance-panel h3{display:flex;align-items:center;gap:9px;font-size:18px}.token-emblem{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#343c42;flex-shrink:0}.token-emblem img{width:19px;height:19px;object-fit:contain}.token-balance-number{font-size:32px;line-height:1.2;letter-spacing:-1px;font-weight:650}.token-balance-number>span{font-size:16px;letter-spacing:0;color:var(--muted);font-weight:500}.token-balance-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}.token-compact-action{padding:6px 18px;font-size:13px;min-height:32px;border-radius:22px}.token-info{color:var(--muted);font-size:14px}.token-apr{font-size:12px;white-space:nowrap}.token-apr strong{font-weight:500;color:var(--muted)} .token-deposit-panel,.token-acquire-panel{padding:24px}.token-stake-amount{background:var(--raised);border-radius:16px;text-align:center;padding:30px 12px}.token-amount-input{display:flex;align-items:center;justify-content:center;gap:8px;font-size:36px;letter-spacing:-1.3px;font-weight:650}.token-amount-input input{background:none;color:var(--text);border:none;min-width:0;width:3.8ch;max-width:65%;font:inherit;letter-spacing:inherit;text-align:right;padding:0}.token-stake-amount p{font-size:12px;color:var(--muted);margin:8px 0}.token-stake-amount button,.token-blue-button{background:#0968ef;color:white;border-radius:28px;font-weight:650}.token-stake-amount button{padding:5px 20px}.token-blue-button{width:100%;padding:15px 12px;margin-top:16px}.token-deposit-panel .error:empty{display:none}.token-trade-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:22px 0}.token-trade-actions button{border-radius:24px;padding:10px 8px;font-size:13px}.token-contract-block{margin-top:22px}.token-contract-block>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:600;margin-bottom:10px}.token-contract-block>div>span{display:flex;align-items:center;gap:9px}.token-contract-info{background:none;color:var(--muted);font-size:18px;min-width:30px;min-height:30px}.token-contract-placeholder{border-radius:12px;background:var(--raised);padding:14px 12px;font-size:12px;color:var(--muted);overflow-wrap:anywhere}.token-pool-icon{width:24px;text-align:center;color:#dcb077;font-size:24px}.token-demo-note{font-size:11px;color:var(--muted);margin:0;text-align:center} .token-stake-widget{background:#fff;color:#192130;border:1px solid #e1e5eb;border-radius:18px;padding:26px;min-width:0}.token-widget-heading{display:flex;justify-content:space-between;gap:18px;padding-bottom:26px;border-bottom:1px solid #e6eaf0}.token-widget-identity{display:flex;gap:12px;min-width:0;flex:1}.token-widget-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#3d80f6;color:white;font-size:23px;flex-shrink:0}.token-widget-identity>div{min-width:0;flex:1}.token-widget-heading h3{font-size:22px;font-weight:550;margin-bottom:6px}.token-widget-heading label{font-size:11px;font-weight:650;display:block;color:#495669}.token-wallet-editor{display:flex;align-items:center;gap:8px;margin-top:6px}.token-wallet-editor input{min-width:0;width:100%;background:#f3f5f8;color:#455164;border:1px solid #d9dfe7;border-radius:5px;padding:6px;font-size:11px}.token-wallet-editor button,.token-purchases-empty button{background:#387df0;color:white;border-radius:18px;padding:8px 14px;font-size:11px;white-space:nowrap}.token-widget-heading small{color:#7e8998;font-size:10px}.token-network-summary{display:grid;gap:8px;justify-items:end;align-content:start;font-size:11px;color:#626f80;flex-shrink:0}.token-network-tag{display:flex;align-items:center;gap:7px;background:#eff5ff;border-radius:8px;padding:8px 10px;color:#263346;font-size:12px}.token-network-tag img{width:18px;height:18px}.token-network-summary>span:not(:first-child){display:grid;text-align:right}.token-network-summary strong{font-weight:500;color:#303e50}.token-purchases-empty{border:1px dashed #cdd5df;background:#f8f9fb;border-radius:12px;margin-top:26px;padding:28px 16px;text-align:center}.token-purchases-empty>span{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#e8f0ff;color:#387df0;font-size:24px;margin:0 auto 15px}.token-purchases-empty h4{font-size:23px;line-height:1.3;font-weight:550;margin:0 0 8px}.token-purchases-empty p{font-size:12px;color:#647184;margin:0 0 16px}.token-purchases-empty button{font-size:12px;padding:10px 18px} @media(max-width:1200px){.token-management-grid{grid-template-columns:minmax(0,1.6fr) minmax(270px,1fr)}.token-widget-heading{flex-direction:column}.token-network-summary{display:flex;align-items:center;justify-content:space-between;gap:10px}.token-stake-widget{padding:20px}.token-balance-panel{padding:20px}.token-balance-panel h3{font-size:16px}} @media(max-width:900px){.token-management-grid{grid-template-columns:1fr}.token-management-aside{grid-template-columns:1fr 1fr;align-items:start}.token-demo-note{grid-column:1/-1}.token-widget-heading{flex-direction:row}.token-network-summary{display:grid}} @media(max-width:600px){.token-management-aside{grid-template-columns:1fr}.token-widget-heading{flex-direction:column}.token-network-summary{display:flex;flex-wrap:wrap}.token-balance-panel{padding:18px}.token-balance-panel h3{font-size:15px}.token-balance-number{font-size:27px}.token-compact-action{padding:6px 12px}.token-widget-heading h3{font-size:20px}} /* Revision 87 — Career overview, billing and referral tree. */ .career-view[hidden]{display:none}.career-view{min-height:75vh}.career-page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.career-page-heading .secondary{border-radius:24px}.career-tree-icon{display:inline-block;width:22px;height:24px;flex-shrink:0;background:currentColor;mask:url('assets/icon-bonus-unilevel.svg') center/contain no-repeat;-webkit-mask:url('assets/icon-bonus-unilevel.svg') center/contain no-repeat}.career-bonus-icon{display:inline-block;width:24px;height:26px;flex-shrink:0;background:currentColor;mask:var(--career-icon) center/contain no-repeat;-webkit-mask:var(--career-icon) center/contain no-repeat} .career-overview-top{display:grid;grid-template-columns:minmax(230px,.95fr) minmax(0,2.5fr);gap:14px}.career-profile{padding:22px;display:flex;flex-direction:column;gap:17px}.career-profile>.subtle{font-size:11px;margin:0}.career-profile .identity{margin:0;gap:12px}.career-profile-section{border-top:1px solid var(--border);padding-top:14px}.career-profile-section h3{font-size:12px;margin-bottom:8px}.career-profile-section .subtle{margin:5px 0 0;font-size:11px}.career-profile-section button{font-size:11px;border-radius:7px;padding:7px}.career-membership-label{background:var(--gold);color:#342716;border-radius:6px;text-align:center;padding:4px 10px;font-size:12px;font-weight:700}.career-demo-wallet{display:block;background:var(--raised);border-radius:6px;padding:6px 8px;text-align:center;color:var(--muted);font-size:11px}.career-top-details{display:grid;gap:12px;min-width:0}.career-ranks{display:grid;grid-template-columns:1fr 1fr 2fr;gap:12px}.career-rank{padding:14px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}.career-rank h3{font-size:12px}.career-rank>img{height:106px;max-width:100%;object-fit:contain}.career-rank>strong{font-size:12px}.career-rank>p{font-size:11px;color:var(--muted);margin:auto 0 0}.career-next-rank{width:88px;height:106px;border:2px solid #aeb7bf;border-radius:7px 7px 44px 44px;background:linear-gradient(125deg,#303a42,#6c767f 48%,#293238);color:#f5f7fa;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.career-next-rank>span:first-child{font-size:25px;font-weight:700;letter-spacing:1px}.career-next-rank strong{font-size:14px}.career-next-rank .reference-icon{width:20px;height:20px}.career-team-total{padding:20px;display:flex;flex-direction:column;gap:12px}.career-team-total h3{font-size:14px}.career-green-count{display:block;border:1.5px solid var(--green);border-radius:10px;font-size:38px;font-weight:650;line-height:1.3;text-align:center;padding:5px 10px;width:100%;max-width:210px;margin:12px auto;letter-spacing:-1px}.career-card-caption{background:var(--raised);border-radius:12px;color:var(--muted);font-size:11px;line-height:1.5;padding:11px 12px;margin:0}.career-team-total .text-button{font-size:12px;margin-top:auto}.career-overview-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.career-metric{position:relative;padding:22px;min-width:0;display:flex;flex-direction:column;gap:16px}.career-metric-title{display:flex;align-items:center;gap:10px;justify-content:space-between}.career-metric h3{font-size:16px}.career-metric>.career-metric-title>.reference-icon{flex-shrink:0}.career-metric>strong{font-size:32px;letter-spacing:-1px;font-weight:650;margin-top:auto;overflow-wrap:anywhere}.career-metric strong small{font-size:12px;letter-spacing:0;color:var(--muted);font-weight:500;white-space:nowrap}.career-metric.compact{padding:12px 10px;gap:9px}.career-metric.compact h3{font-size:11px;line-height:1.4;padding-right:10px}.career-metric.compact>strong{font-size:18px;letter-spacing:-.3px}.career-metric.compact strong small{font-size:9px}.career-metric.compact .career-metric-title>.reference-icon,.career-metric.compact .career-bonus-icon,.career-metric.compact .career-tree-icon{display:none}.career-metric-open{position:absolute;right:4px;top:6px;background:none;color:var(--muted);font-size:12px;padding:2px 4px}.career-overview-middle{display:grid;grid-template-columns:1.3fr 1.3fr .75fr;gap:14px;margin-top:14px}.career-overview-middle>.panel{padding:22px;display:flex;flex-direction:column;gap:10px}.career-overview-middle h3{font-size:15px;margin-bottom:8px}.career-overview-middle .subtle{font-size:11px;line-height:1.6}.career-overview-middle button{margin-top:auto;border-radius:24px}.career-requirement{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:12px}.career-requirement>span{display:flex;align-items:center;gap:8px;color:var(--muted)}.career-requirement strong{text-align:right;font-size:12px;font-weight:600}.career-next-bonus .career-requirement{flex-direction:column;align-items:flex-start;gap:8px}.career-next-bonus .career-requirement strong{padding-left:32px}.career-level-card .career-green-count{font-size:48px;margin:auto auto 12px;max-width:155px}.career-overview-bottom{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:14px}.career-overview-bottom>.panel{padding:20px;display:flex;flex-direction:column;gap:18px;min-width:0}.career-overview-bottom h3{font-size:15px}.career-overview-bottom .career-card-caption{margin-top:auto}.career-membership-image{width:100%;max-width:220px;height:150px;object-fit:contain;align-self:center}.career-volume-number{font-size:28px;text-align:center}.career-volume-number small{font-size:12px;color:var(--muted)}.career-large-tree{text-align:center;color:var(--muted)}.career-large-tree .career-tree-icon{width:65px;height:72px}.career-rule{font-size:11px}.career-rule>div:first-child{display:flex;justify-content:space-between;gap:8px;color:var(--muted);margin-bottom:6px}.career-rule small{color:var(--muted);font-size:9px}.career-progress{height:8px;background:var(--raised);border-radius:3px;overflow:hidden}.career-progress>span{display:block;height:100%;background:var(--green);border-radius:3px}.career-footnote{font-size:11px;color:var(--muted);margin:15px 0 0} .career-available{padding:25px;margin-bottom:14px}.career-available .section-heading{margin-bottom:20px}.career-available .actions{display:flex;gap:10px}.career-available button{border-radius:24px;padding:9px 20px}.career-available>strong{font-size:36px;letter-spacing:-1px}.career-available .subtle{display:flex;align-items:center;gap:9px;font-size:12px;margin:10px 0 0}.career-available .subtle img{width:22px;height:22px}.career-billing-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.career-billing-metrics>.career-metric{grid-column:span 2;min-height:170px}.career-billing-metrics>.career-metric:nth-last-child(-n+2){grid-column:span 3}.career-detail-link{align-self:flex-start;color:var(--blue);padding:0;background:none;font-size:12px}.career-detail-link span{margin-left:5px}.career-ledger-total{font-size:32px;display:block;margin:20px 0}.career-ledger-total small{font-size:14px;color:var(--muted)}.career-ledger{display:grid;gap:14px}.career-ledger>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px}.career-ledger>div>span{display:flex;align-items:center;gap:10px} .team-tree-panel{padding:22px;min-width:0}.team-tree-panel>.section-heading{align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}.team-referral-code{font-size:11px;border-radius:9px;padding:8px 12px}.team-search{display:flex;align-items:center;gap:15px;border:1px solid var(--border);border-radius:14px 14px 0 0;padding:18px 22px}.team-search>span{font-size:25px;color:var(--muted)}.team-search input{width:100%;min-width:0;background:none;border:0;color:var(--text);font-size:14px}.team-tree-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;background:var(--bg);border-radius:0 0 14px 14px;padding:12px 18px;font-size:11px;color:var(--muted)}.team-tree-toolbar>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.team-tree-toolbar button{background:var(--raised);border-radius:6px;padding:6px 10px;font-size:11px;min-height:30px}.team-tree-viewport{overflow:auto;min-height:510px;height:62vh;max-height:800px;background-image:radial-gradient(var(--border) 1px,transparent 1px);background-size:18px 18px;border-radius:10px;overscroll-behavior:contain}.team-tree-content{width:max-content;min-width:100%;padding:45px 25px;zoom:var(--team-scale,1)}.team-tree,.team-tree ul{display:flex;justify-content:center;list-style:none;padding:0;margin:0}.team-tree li{position:relative;text-align:center;padding:35px 12px 0}.team-tree>li{padding-top:0}.team-tree ul{position:relative;padding-top:35px}.team-tree ul:before{content:'';position:absolute;top:0;left:50%;height:35px;border-left:1px solid var(--blue)}.team-tree ul>li:before,.team-tree ul>li:after{content:'';position:absolute;top:0;width:50%;height:35px;border-top:1px solid var(--blue)}.team-tree ul>li:before{right:50%;border-right:1px solid var(--blue)}.team-tree ul>li:after{left:50%}.team-tree ul>li:first-child:before,.team-tree ul>li:last-child:after{border:0}.team-tree ul>li:only-child:before{border-right:1px solid var(--blue)}.team-level{display:table;margin:-21px auto 8px;font-size:9px;color:var(--blue);background:var(--raised);border:1px solid var(--border);border-radius:14px;padding:2px 8px;position:relative;z-index:1}.team-person{width:226px;margin:auto;text-align:left;background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:0 5px 12px #0002;padding:12px;position:relative}.team-root{border-color:#736246}.team-match{outline:2px solid var(--green);outline-offset:3px}.team-person-heading{display:flex;align-items:center;gap:7px;margin-bottom:12px;font-size:12px}.team-person-avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--raised);color:var(--gold);flex-shrink:0}.team-person-heading>strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.team-person-membership{font-size:9px;color:var(--gold);background:var(--raised);border-radius:14px;padding:3px 6px;margin-left:auto}.team-person dl{margin:0 0 13px;display:grid;gap:8px}.team-person dl>div{display:flex;justify-content:space-between;gap:8px;font-size:10px}.team-person dt{color:var(--muted)}.team-person dd{margin:0;font-weight:600;text-align:right}.team-person>.secondary{border-radius:18px;min-height:28px;font-size:10px;padding:5px 8px}.team-expand{background:none;color:var(--blue);font-size:10px;padding:9px 4px 0;width:100%}.team-no-results{font-size:13px;color:var(--muted);text-align:center;margin-top:25px}.team-person-detail{display:grid;gap:16px}.team-person-detail>div{display:flex;justify-content:space-between;gap:16px}.team-person-detail dt{color:var(--muted);font-size:13px}.team-person-detail dd{margin:0;text-align:right}.team-tree-panel:fullscreen{background:var(--bg);padding:25px;overflow:auto}.team-tree-panel:fullscreen .team-tree-viewport{height:calc(100vh - 220px);max-height:none} @media(max-width:1250px){.career-overview-top{grid-template-columns:minmax(200px,.85fr) minmax(0,2fr)}.career-overview-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.career-ranks{grid-template-columns:1fr 1fr}.career-team-total{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:15px;gap:8px}.career-team-total .career-green-count{grid-column:2;grid-row:1/3;margin:0 auto;font-size:30px}.career-team-total .career-card-caption{padding:8px}.career-team-total .text-button{grid-column:2;grid-row:3}.career-overview-middle{grid-template-columns:1fr 1fr}.career-level-card{grid-column:1/-1;display:grid!important;grid-template-columns:1fr 140px 1fr;align-items:center}.career-level-card h3{margin:0}.career-level-card .career-green-count{grid-column:2;grid-row:1/3;margin:0}.career-level-card .career-card-caption{grid-column:1;grid-row:2}.career-level-card button{grid-column:3;grid-row:1/3}.career-overview-bottom{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:900px){.career-overview-top{grid-template-columns:1fr}.career-profile{display:grid;grid-template-columns:1fr 1fr}.career-ranks{grid-template-columns:1fr 1fr 1.5fr}.career-team-total{grid-column:auto;display:flex;align-items:stretch}.career-team-total .career-green-count{margin:auto}.career-overview-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.career-billing-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.career-billing-metrics>.career-metric,.career-billing-metrics>.career-metric:nth-last-child(-n+2){grid-column:auto}.career-metric>strong{font-size:28px}} @media(max-width:600px){.career-page-heading{align-items:flex-start;flex-direction:column}.career-page-heading h2{font-size:23px}.career-profile{display:flex}.career-ranks{grid-template-columns:1fr 1fr}.career-team-total{grid-column:1/-1}.career-overview-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.career-overview-middle,.career-overview-bottom,.career-billing-metrics{grid-template-columns:1fr}.career-level-card{display:flex!important}.career-level-card .career-green-count{margin:12px auto}.career-available .section-heading{align-items:flex-start;gap:15px;flex-direction:column}.career-available>strong{font-size:29px}.team-tree-panel{padding:14px}.team-tree-toolbar{padding:12px}.team-tree-viewport{height:65vh}.career-metric>strong{font-size:30px}.career-ledger>div{font-size:11px}} /* Revision 88 — shared Mi Cuenta and official rank progression. */ .career-overview-top{grid-template-columns:minmax(370px,1.08fr) minmax(0,2fr);gap:18px;align-items:stretch} .career-account-host{min-width:0}.career-account-host>.profile{height:100%;display:block;margin:0} .career-top-details{gap:14px}.career-ranks{grid-template-columns:1fr 1fr 1.3fr;gap:14px;align-items:stretch} .career-rank-official{padding:20px 12px;gap:10px;justify-content:flex-start}.career-rank-official h3{font-size:14px;font-weight:600}.career-rank-art{height:154px;display:flex;align-items:center;justify-content:center;width:100%}.career-rank-art img{display:block;width:100%;height:100%;object-fit:contain}.career-rank-official>.career-rank-name{font-size:17px;font-weight:650;line-height:1.3}.career-rank-level-detail{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:auto;padding-top:6px}.career-rank-level-detail>strong{font-size:28px;font-weight:650;line-height:1;min-width:2ch;text-align:center;font-variant-numeric:tabular-nums}.career-rank-level-detail>span{font-size:10px;color:var(--muted);line-height:1.55;text-align:left;white-space:nowrap}.career-rank-level-detail b{display:block;color:var(--text);font-size:10px;font-weight:650}.career-rank-library-link{justify-self:end;background:none;color:var(--muted);font-size:12px;padding:0 2px}.career-rank-library-link span{margin-left:7px}.career-overview-top .career-team-total{display:flex;grid-column:auto;align-items:stretch;padding:20px;gap:16px}.career-overview-top .career-team-total h3{font-size:15px;line-height:1.5}.career-overview-top .career-team-total .career-green-count{margin:auto auto 0;font-size:40px}.career-overview-top .career-team-total .career-card-caption{padding:12px}.career-overview-top .career-team-total .text-button{margin:0}.career-overview-metrics .career-metric.compact{padding:14px 12px;gap:12px}.career-overview-metrics .career-metric.compact h3{font-size:12px}.career-overview-metrics .career-metric.compact>strong{font-size:20px} .career-rank-library{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}.career-rank-library article{background:var(--raised);border:1px solid var(--border);border-radius:12px;padding:16px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}.career-rank-library img{width:100%;height:115px;object-fit:contain}.career-rank-library h3{font-size:13px;margin:0;line-height:1.4}.career-rank-library article>strong{font-size:20px;font-variant-numeric:tabular-nums;margin-top:auto}.career-rank-library article>strong>span{display:block;font-size:10px;color:var(--muted);font-weight:500} @media(max-width:1399px){.career-overview-top{grid-template-columns:minmax(350px,1fr) minmax(0,1.6fr)}.career-ranks{grid-template-columns:1fr 1fr}.career-overview-top .career-team-total{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8px;padding:14px 18px}.career-overview-top .career-team-total .career-green-count{grid-column:2;grid-row:1/3;margin:0 auto;font-size:34px}.career-overview-top .career-team-total .text-button{grid-column:2;grid-row:3}.career-rank-art{height:125px}.career-rank-official{padding:16px 12px}.career-overview-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:1000px){.career-overview-top{grid-template-columns:1fr}.career-account-host{max-width:540px;width:100%;justify-self:center}.career-ranks{grid-template-columns:1fr 1fr 1.3fr}.career-overview-top .career-team-total{display:flex;grid-column:auto;gap:12px;align-items:stretch}.career-overview-top .career-team-total .career-green-count{margin:auto auto 0}.career-overview-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:600px){.career-ranks{grid-template-columns:1fr 1fr}.career-overview-top .career-team-total{grid-column:1/-1}.career-overview-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.career-rank-library{grid-template-columns:repeat(2,minmax(0,1fr))}.career-rank-level-detail{gap:5px}.career-rank-level-detail>strong{font-size:25px}.career-rank-level-detail>span,.career-rank-level-detail b{font-size:9px}} /* Revision 91 — tighter career overview and a single prominent next-rank reward. */ .career-top-details{align-content:start;grid-template-rows:max-content max-content max-content;gap:10px} .career-ranks{grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:start} .career-rank-official{padding:17px 12px;gap:8px}.career-rank-art{height:136px}.career-rank-level-detail{margin-top:2px;padding-top:3px}.career-rank-official>p.career-rank-context{font-size:11px;line-height:1.55;color:var(--muted);margin:4px 0 0;max-width:210px}.career-overview-top .career-team-total{padding:17px 15px;gap:12px;align-self:start}.career-overview-top .career-team-total h3{font-size:14px;line-height:1.45}.career-overview-top .career-team-total .career-green-count{margin:0 auto;max-width:160px;font-size:34px;padding:4px 10px}.career-overview-top .career-team-total .career-card-caption{padding:10px;font-size:11px;line-height:1.55}.career-overview-top .career-team-total .text-button{padding:0;font-size:11px}.career-rank-library-link{font-size:11px;padding:2px}.career-overview-metrics{gap:8px;align-self:start;align-content:start;grid-auto-rows:auto}.career-overview-metrics .career-metric.compact{padding:12px;gap:10px;min-height:82px}.career-overview-metrics .career-metric.compact h3{font-size:11px;line-height:1.4}.career-overview-metrics .career-metric.compact>strong{font-size:19px;line-height:1.25;margin-top:auto} .career-overview-middle{grid-template-columns:minmax(0,1fr) minmax(0,1.65fr);gap:16px}.career-overview-middle>.career-reward-spotlight{padding:25px 28px;border:1px solid var(--gold);background:linear-gradient(125deg,rgba(223,189,115,.11),transparent 70%),var(--panel);display:flex;flex-direction:column;gap:22px;position:relative;overflow:hidden}.career-reward-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.career-reward-heading h3{font-size:23px;line-height:1.3;margin:0 0 9px;letter-spacing:-.4px}.career-reward-heading p:not(.eyebrow){margin:0;color:var(--muted);font-size:13px;line-height:1.55}.career-reward-heading .eyebrow{color:var(--gold)}.career-reward-heading img{width:75px;height:90px;object-fit:contain;flex-shrink:0}.career-reward-content{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center;flex:1}.career-cash-reward>span,.career-token-reward>div>span{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600}.career-cash-reward>strong{display:block;font-size:clamp(46px,4.2vw,68px);line-height:1.2;font-weight:700;letter-spacing:-2px;margin-top:14px;font-variant-numeric:tabular-nums;color:var(--gold);white-space:nowrap}.career-cash-reward>strong>small{display:inline-block;font-size:17px;letter-spacing:0;font-weight:550}.career-cash-reward>strong.career-reward-pending{font-size:25px;letter-spacing:-.5px;white-space:normal}.career-token-reward{display:flex;gap:14px;align-items:center;border-left:1px solid var(--border);padding-left:22px}.career-reward-plus{font-size:28px;color:var(--gold);font-weight:400}.career-token-reward strong{display:block;font-size:15px;margin:12px 0 8px}.career-token-reward p{font-size:11px;color:var(--muted);line-height:1.6;margin:0}.career-reward-note{color:var(--muted);font-size:11px;line-height:1.5;margin:0;padding-top:14px;border-top:1px solid var(--border)} @media(max-width:1399px){.career-ranks{grid-template-columns:1fr 1fr}.career-overview-top .career-team-total{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;padding:15px 18px;grid-column:1/-1}.career-overview-top .career-team-total .career-green-count{grid-column:2;grid-row:1/3;margin:auto}.career-overview-top .career-team-total .career-card-caption{grid-column:1;grid-row:2;padding:0;background:none}.career-overview-top .career-team-total .text-button{grid-column:2;grid-row:3}.career-rank-art{height:112px}.career-reward-content{grid-template-columns:1fr;gap:18px}.career-token-reward{border-left:0;border-top:1px solid var(--border);padding:16px 0 0}.career-cash-reward>strong{font-size:54px;margin-top:9px}} @media(max-width:1000px){.career-ranks{grid-template-columns:1fr 1fr 1fr}.career-overview-top .career-team-total{grid-column:auto;display:flex;padding:17px 15px;gap:12px}.career-overview-top .career-team-total .career-card-caption{background:var(--raised);padding:10px}.career-overview-top .career-team-total .career-green-count{margin:0 auto}.career-overview-middle{grid-template-columns:1fr 1.3fr}.career-overview-middle>.career-reward-spotlight{padding:22px}.career-reward-heading h3{font-size:20px}.career-reward-heading img{width:58px;height:76px}} @media(max-width:680px){.career-overview-middle{grid-template-columns:1fr}.career-reward-content{grid-template-columns:1fr 1fr;gap:16px}.career-token-reward{border:0;padding:0}.career-cash-reward>strong{font-size:44px}.career-reward-heading h3{font-size:22px}} @media(max-width:600px){.career-ranks{grid-template-columns:1fr 1fr}.career-overview-top .career-team-total{grid-column:1/-1}.career-rank-official>p.career-rank-context{font-size:10px}.career-reward-content{grid-template-columns:1fr}.career-token-reward{border-top:1px solid var(--border);padding-top:16px}.career-cash-reward>strong{font-size:56px}.career-cash-reward>strong>small{font-size:17px}} /* Guide-confirmed reward amount and compact qualification summary. */ .career-token-reward strong{font-size:clamp(28px,2.8vw,40px);color:var(--gold);letter-spacing:-1px;line-height:1.2;white-space:nowrap}.career-token-reward strong small{font-size:14px;letter-spacing:0}.career-requirement{gap:16px}.career-requirement strong{text-align:right}.career-reward-note b{color:var(--text)} /* Revision 92 — shared rank countdown, with room for two-line rank names. */ .rank-countdown{display:grid;grid-template-columns:minmax(70px,.8fr) minmax(0,1.2fr);gap:12px;align-items:center;text-align:left} .rank-countdown-number>strong{display:block;font-size:32px;line-height:1;font-variant-numeric:tabular-nums;color:var(--gold);letter-spacing:-1px} .rank-countdown-number>span,.rank-countdown-target>span{display:block;color:var(--muted);font-size:10px;line-height:1.5;margin-top:3px} .rank-countdown-target>strong{display:flex;align-items:center;min-height:2.7em;font-size:13px;line-height:1.35;overflow-wrap:normal;color:var(--text)} .rank-countdown-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:5px 10px;margin-top:8px;font-size:9px;color:var(--muted);line-height:1.5;text-align:left} .rank-countdown-meta details{flex:1 1 100%}.rank-countdown-meta summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px}.rank-countdown-meta details p{font-size:11px;line-height:1.6;margin:7px 0 0;color:var(--muted)} .rank-countdown.is-urgent .rank-countdown-number>strong{color:#e49a56} .career-rank-official>.career-rank-name{min-height:2.6em;display:flex;align-items:center;justify-content:center;line-height:1.3;width:100%} .career-global-countdown{border-top:1px solid var(--border);width:100%;padding-top:12px;margin-top:6px;min-width:0} .career-global-countdown .rank-countdown{grid-template-columns:minmax(55px,.8fr) minmax(0,1.2fr);gap:8px}.career-global-countdown .rank-countdown-target>strong{font-size:12px}.career-global-countdown .rank-countdown-number>strong{font-size:30px} .rank-countdown-complete{display:grid;gap:5px;text-align:center;font-size:12px}.rank-countdown-complete span{color:var(--muted)} .rank-countdown-start{flex-basis:100%} /* Revision 95 — original-size emblem and a three-digit countdown, without inner frame. */ .profile .account-intro{grid-template-columns:minmax(0,1fr) 160px;column-gap:12px} .profile .account-rank-card{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:16px 82px 49px;gap:7px;padding:0;height:163px;box-sizing:border-box;align-content:start;background:none;border:0;border-radius:0} .account-rank-card .rank-card-title{grid-column:1;grid-row:1;text-align:center;font-size:11px;line-height:16px;color:var(--text)} .account-rank-card .account-rank-emblem{grid-column:1;grid-row:2;display:block;width:68px;height:82px;max-width:100%;object-fit:contain;justify-self:center;align-self:center} .account-rank-card .account-rank-emblem.rank-membership-image{width:110px;height:78px;object-fit:contain} .account-rank-card .rank-card-levels,.account-rank-card .account-rank-name{display:none} .account-rank-countdown{grid-column:1;grid-row:3;min-width:0;align-self:center;width:100%} .rank-days-button{display:grid;grid-template-columns:3ch minmax(0,1fr);align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;padding:0 3px;border:0;background:none;color:var(--text);font-size:36px;cursor:pointer;text-align:left;border-radius:5px} .rank-days-button>strong{font-size:36px;font-weight:650;line-height:1.05;letter-spacing:-1px;font-variant-numeric:tabular-nums;text-align:center;color:var(--gold)} .rank-days-button>span{font-size:11px;line-height:1.4;color:var(--muted);font-weight:400} .rank-days-button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.rank-days-button.is-urgent>strong{color:#e49a56} .rank-mini-complete{font-size:11px;line-height:1.4;text-align:center} @media(max-width:400px){.profile .account-intro{grid-template-columns:minmax(0,1fr) 160px;column-gap:8px}.profile .account-intro>.identity{flex-wrap:wrap;gap:6px}} /* Revision 96 — larger emblem, achievement date and neutral countdown within 163 px. */ .profile .account-rank-card{grid-template-rows:98px 61px;gap:4px} .account-rank-card .rank-card-title{display:none} .account-rank-card .account-rank-emblem{grid-row:1;width:82px;height:98px} .account-rank-card .account-rank-emblem.rank-membership-image{grid-row:1;width:120px;height:90px} .account-rank-countdown{grid-row:2;display:grid;grid-template-rows:16px 42px;gap:3px;align-self:start} .rank-achieved-date{font-size:10px;line-height:16px;color:var(--muted);text-align:center;white-space:nowrap} .rank-achieved-date time{font-variant-numeric:tabular-nums} .rank-days-button{font-size:30px;min-height:42px;height:42px;gap:8px;padding:0 3px} .rank-days-button>strong{font-size:30px;color:var(--text)} .rank-days-button>span{font-size:10px;line-height:1.35} .rank-days-button.is-urgent>strong,.rank-countdown.is-urgent .rank-countdown-number>strong{color:#e44848} /* Revision 97 — same membership artwork dimensions in both account positions. */ .account-rank-card .account-rank-emblem.rank-membership-image{width:110px;height:auto;max-width:100%;object-fit:contain} /* Revision 98 — concise current rank, account with its own intrinsic height. */ .career-account-host{align-self:start;max-width:none;width:100%} .career-account-host>.profile{height:auto;min-height:0;align-self:start} .career-overview-top{align-items:start;gap:20px;grid-template-columns:minmax(316px,.9484272fr) minmax(0,1.7515728fr)} .career-current-achievement>.career-rank-name{min-height:0;margin-top:3px} .career-current-achievement>p.career-rank-context{font-size:12px;line-height:1.6;margin-top:7px;max-width:220px} @media(max-width:1199px){.career-overview-top{grid-template-columns:minmax(0,1fr)}.career-account-host{max-width:none;justify-self:stretch}} /* Revision 99 — a single objective card beside the current rank. */ .career-ranks{grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:start} .career-ranks>.career-reward-spotlight{min-width:0;padding:20px;border:1px solid var(--gold);background:linear-gradient(125deg,rgba(223,189,115,.11),transparent 70%),var(--panel);display:flex;flex-direction:column;gap:17px} .career-ranks .career-reward-heading{align-items:center;gap:14px} .career-ranks .career-reward-heading>div{min-width:0} .career-ranks .career-reward-heading h3{font-size:14px;line-height:1.4;color:var(--gold);margin:0 0 5px;letter-spacing:0} .career-ranks .career-reward-heading h4{font-size:24px;line-height:1.2;margin:0 0 10px;letter-spacing:-.4px} .career-ranks .career-reward-heading p{font-size:11px;line-height:1.5} .career-ranks .career-reward-heading img{width:118px;height:148px;object-fit:contain} .career-objective-levels{display:flex;align-items:center;gap:9px;margin-top:12px} .career-objective-levels>strong{font-size:28px;line-height:1;font-variant-numeric:tabular-nums;color:var(--text)} .career-objective-levels>span{font-size:10px;line-height:1.5;color:var(--muted)}.career-objective-levels b{font-weight:600;color:var(--text)} .career-ranks .career-reward-content{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start;border-top:1px solid var(--border);padding-top:15px} .career-ranks .career-token-reward{padding:0 0 0 14px;border-top:0;border-left:1px solid var(--border);min-width:0} .career-ranks .career-token-reward>div{min-width:0} .career-ranks .career-cash-reward>span,.career-ranks .career-token-reward>div>span{font-size:12px;line-height:1.4;gap:8px;min-height:38px} .career-ranks .career-bonus-icon{width:32px;height:36px} .career-ranks .career-cash-reward>strong,.career-ranks .career-token-reward strong{font-size:34px;line-height:1.2;letter-spacing:-1px;margin:10px 0 5px} .career-ranks .career-cash-reward>strong>small,.career-ranks .career-token-reward strong small{font-size:12px;letter-spacing:0} .career-ranks .career-token-reward p{font-size:10px;line-height:1.5} .career-ranks .career-reward-note{font-size:10px;line-height:1.5;padding-top:12px} .career-overview-middle>.career-team-total{display:flex;grid-column:auto;flex-direction:column;align-items:stretch;gap:16px;padding:22px} .career-overview-middle>.career-team-total h3{font-size:17px;line-height:1.4;margin:0} .career-overview-middle>.career-team-total .career-green-count{font-size:48px;margin:8px auto;max-width:210px} .career-overview-middle>.career-team-total .text-button{align-self:flex-start;margin-top:auto} @media(min-width:1200px) and (max-width:1399px){.career-ranks{grid-template-columns:minmax(0,.85fr) minmax(0,2fr)}.career-ranks>.career-reward-spotlight{padding:16px}.career-ranks .career-reward-heading img{width:86px;height:112px}.career-ranks .career-reward-heading h4{font-size:21px}.career-ranks .career-cash-reward>strong,.career-ranks .career-token-reward strong{font-size:28px}} @media(max-width:680px){.career-ranks{grid-template-columns:minmax(0,1fr)}.career-ranks>.career-current-achievement .career-rank-art{height:136px}.career-ranks .career-reward-heading img{width:108px;height:136px}.career-ranks .career-reward-heading h4{font-size:23px}.career-ranks .career-cash-reward>strong,.career-ranks .career-token-reward strong{font-size:30px}} /* Revision 100 — bring the emblem into the text group and remove the unused link row. */ .career-ranks .career-reward-heading{justify-content:flex-start;gap:16px} .career-ranks .career-reward-heading>div{flex:0 1 220px;max-width:220px} .career-top-details{grid-template-rows:minmax(min-content,1fr) max-content;align-self:stretch;gap:10px} .career-ranks>.career-reward-spotlight{align-self:stretch} .career-overview-metrics{align-self:end} @media(max-width:1199px){.career-top-details{grid-template-rows:auto auto;align-self:start}.career-overview-metrics{align-self:start}} /* Revision 101 — one card gutter throughout Vista Global and a dedicated deadline card. */ #career-global-content{--career-card-gap:12px} #career-global-content .career-overview-top,#career-global-content .career-top-details,#career-global-content .career-ranks,#career-global-content .career-overview-metrics,#career-global-content .career-overview-middle,#career-global-content .career-overview-bottom{gap:var(--career-card-gap)} #career-global-content .career-overview-middle,#career-global-content .career-overview-bottom{margin-top:var(--career-card-gap)} .career-current-stack{display:flex;flex-direction:column;gap:var(--career-card-gap);align-self:stretch;min-width:0} .career-current-stack>.career-current-achievement{width:100%} .career-deadline-card{padding:15px 12px;display:flex;align-items:center;justify-content:center;text-align:center;flex:1;min-width:0} .career-deadline-date{font-size:11px;color:var(--muted);line-height:1.5;margin:0 0 8px} .career-deadline-date time{display:block;color:var(--text);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums} .career-deadline-count>strong{display:block;font-size:42px;font-weight:650;line-height:1.1;letter-spacing:-1px;font-variant-numeric:tabular-nums;color:var(--text)} .career-deadline-count>span{display:block;font-size:11px;line-height:1.5;color:var(--muted);margin-top:5px;max-width:190px} .career-deadline-count b{font-weight:600;color:var(--text)} .career-deadline-count.is-urgent>strong{color:#e44848} .career-deadline-complete{font-size:12px;line-height:1.5} @media(max-width:680px){.career-current-stack .career-current-achievement .career-rank-art{height:136px}.career-deadline-card{padding:18px}.career-deadline-count>span{max-width:none}} /* Revision 102 — narrower current-rank column, integrated requirements and compact rows. */ #career-global-content .career-ranks{grid-template-columns:minmax(125px,.72fr) minmax(0,2.28fr)} .career-current-stack .career-current-achievement{padding:12px 10px;gap:5px} .career-current-stack .career-rank-art{height:92px} .career-current-stack .career-current-achievement h3{font-size:12px} .career-current-stack .career-current-achievement>.career-rank-name{font-size:16px;margin:0} .career-current-stack .career-current-achievement>p.career-rank-context{font-size:10px;line-height:1.45;margin-top:3px} .career-deadline-card{padding:10px}.career-deadline-date{margin-bottom:4px;font-size:10px}.career-deadline-count>strong{font-size:34px}.career-deadline-count>span{font-size:10px;line-height:1.4;margin-top:3px} .career-ranks>.career-reward-spotlight{padding:16px;gap:12px;container-type:inline-size} .career-objective-top{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start} .career-objective-intro{min-width:0;display:flex;flex-direction:column;gap:20px} .career-ranks .career-reward-heading{gap:8px;align-items:center;justify-content:flex-start} .career-ranks .career-reward-heading>div{flex:1 1 auto;max-width:180px} .career-ranks .career-reward-heading h3{font-size:12px}.career-ranks .career-reward-heading h4{font-size:22px;margin-bottom:8px} .career-ranks .career-reward-heading p{font-size:10px;line-height:1.5} .career-ranks .career-reward-heading img{width:82px;height:105px} .career-ranks .career-objective-levels{margin:0;padding:0 0 4px;gap:10px} .career-objective-requirements{min-width:0;padding-left:14px;border-left:1px solid var(--border)} .career-objective-requirements>h3{font-size:12px;line-height:1.4;margin:0 0 6px} .career-objective-requirements .career-requirement{gap:8px;padding:5px 0;font-size:10px;line-height:1.4;align-items:start} .career-objective-requirements .career-requirement strong{font-size:10px;line-height:1.4;max-width:60%;font-weight:600} .career-requirement-help{display:block;background:none;color:var(--muted);font-size:9px;text-align:left;padding:7px 0;text-decoration:underline;text-underline-offset:2px} .career-objective-requirements .secondary{font-size:10px;padding:5px 8px;border-radius:16px} .career-ranks .career-reward-content{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;align-items:start;flex:0 0 auto;padding-top:12px} .career-ranks .career-cash-reward,.career-ranks .career-token-reward{padding:0 12px;min-width:0;text-align:center} .career-ranks .career-token-reward{border-left:1px solid var(--border)} .career-ranks .career-token-reward>div{width:100%} .career-ranks .career-cash-reward>span,.career-ranks .career-token-reward>div>span{justify-content:center;min-height:34px;font-size:12px;gap:8px} .career-ranks .career-cash-reward>strong,.career-ranks .career-token-reward strong{font-size:32px;margin:8px 0 5px} .career-ranks .career-reward-note{margin-top:auto;padding-top:10px;font-size:9px;line-height:1.45} #career-global-content .career-overview-metrics{grid-template-columns:repeat(4,minmax(0,1fr))} .career-overview-metrics .career-metric.compact{padding:9px;gap:6px;min-height:68px} .career-overview-metrics .career-metric.compact h3{font-size:10px;line-height:1.35} .career-overview-metrics .career-metric.compact>strong{font-size:17px} #career-global-content .career-overview-middle{grid-template-columns:minmax(0,1fr)} .career-overview-middle>.career-team-total{display:grid;grid-template-columns:1fr 130px 1.3fr auto;align-items:center;gap:20px;padding:18px} .career-overview-middle>.career-team-total h3{font-size:15px} .career-overview-middle>.career-team-total .career-green-count{margin:0;font-size:36px;width:100%} .career-overview-middle>.career-team-total .text-button{align-self:center;margin:0} @container(max-width:390px){.career-objective-top{grid-template-columns:minmax(0,1fr)}.career-objective-intro{gap:14px}.career-objective-requirements{border-left:0;border-top:1px solid var(--border);padding:12px 0 0}.career-ranks .career-reward-heading img{width:94px;height:118px}} @media(max-width:1199px){.career-overview-middle>.career-team-total{grid-template-columns:1fr 100px}.career-overview-middle>.career-team-total .career-card-caption{grid-column:1}.career-overview-middle>.career-team-total .text-button{grid-column:2}} @media(max-width:680px){#career-global-content .career-ranks{grid-template-columns:minmax(0,1fr)}#career-global-content .career-overview-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.career-current-stack .career-rank-art{height:112px}} /* Revision 103 — give spare height to the emblem, not to the deadline. */ .career-current-stack>.career-current-achievement{flex:1;justify-content:center;padding:14px 6px;gap:7px} .career-current-stack .career-current-achievement .career-rank-art{height:140px;flex:0 0 140px} .career-current-stack .career-rank-art img{width:110px;height:140px;max-width:100%;object-fit:contain} .career-current-stack .career-current-achievement>p.career-rank-context{padding:0 4px} .career-current-stack>.career-deadline-card{flex:0 0 auto;padding:12px 10px} /* Three explicit columns place Plata midway between the copy and requirement divider. */ .career-objective-top{grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr);column-gap:12px;row-gap:18px;align-items:center} .career-objective-intro,.career-ranks .career-reward-heading{display:contents} .career-ranks .career-reward-heading>div{grid-column:1;grid-row:1;max-width:none;min-width:0} .career-ranks .career-reward-heading img{grid-column:2;grid-row:1/3;width:110px;height:140px;justify-self:center;align-self:center;margin:0} .career-ranks .career-objective-levels{grid-column:1;grid-row:2;align-self:start} .career-objective-requirements{grid-column:3;grid-row:1/3;align-self:stretch;padding-left:12px} @container(max-width:390px){ .career-objective-top{grid-template-columns:minmax(0,1fr) 110px;gap:16px 12px} .career-ranks .career-reward-heading img{grid-column:2;grid-row:1/3;width:110px;height:140px} .career-objective-requirements{grid-column:1/-1;grid-row:3;border-left:0;border-top:1px solid var(--border);padding:12px 0 0} } /* Revision 104 — center the emblem in the free space after the copy. */ @container(min-width:391px){.career-objective-top{grid-template-columns:minmax(0,140px) minmax(110px,1fr) minmax(0,1fr)}} .career-ranks .career-cash-reward>p{font-size:10px;color:var(--muted);line-height:1.5;margin:0} /* Revision 105 — readable, spaced requirements without legacy actions. */ @container(min-width:431px){ .career-objective-top{grid-template-columns:minmax(0,130px) minmax(110px,.8fr) minmax(0,1.4fr)} } .career-objective-requirements>h3{font-size:14px;line-height:1.4;margin-bottom:8px} .career-objective-requirements .career-requirement{font-size:12px;line-height:1.5;padding:8px 0;gap:12px;align-items:center} .career-objective-requirements .career-requirement strong{font-size:12px;line-height:1.5;font-weight:600} .career-objective-requirements .career-requirement:last-child{border-bottom:0;padding-bottom:0} @container(max-width:430px){ .career-objective-top{grid-template-columns:minmax(0,1fr) 110px;gap:16px 12px} .career-objective-requirements{grid-column:1/-1;grid-row:3;border-left:0;border-top:1px solid var(--border);padding:14px 0 0} } /* Revision 106 — center both reward blocks within the available vertical space. */ .career-ranks .career-reward-content{flex:1 0 auto;align-items:center;padding:12px 0} .career-ranks .career-reward-note{margin-top:0} /* Revision 107 — current rank in the heading, larger level count under the unchanged emblem. */ .career-current-stack>.career-current-achievement{justify-content:flex-start;padding-top:16px;gap:8px} .career-current-stack .career-current-achievement h3.career-current-heading{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:2px 5px;font-size:11px;line-height:1.4;margin:0;width:100%} .career-current-heading>span{white-space:nowrap;font-weight:500;color:var(--muted)} .career-current-heading>strong{font-size:inherit;font-weight:700;color:var(--text)} .career-current-achievement .career-current-levels{margin:0;padding:2px 0 0;gap:6px} .career-current-achievement .career-current-levels>strong{font-size:36px;min-width:1ch;line-height:1.1} .career-current-achievement .career-current-levels>span,.career-current-achievement .career-current-levels b{font-size:9px;line-height:1.5} .career-current-stack .career-current-achievement>p.career-rank-context{margin-top:auto;padding-top:7px} /* Revision 108 — framed level indicator inside the current-rank card. */ .career-current-achievement .career-current-levels{width:100%;max-width:190px;padding:9px 6px;margin:3px auto 0;border:1px solid var(--border);border-radius:10px;background:var(--raised);box-sizing:border-box;justify-content:center} /* Revision 109 — same emblem box, aligned with the current-rank emblem row. */ .career-current-stack .career-rank-art img,.career-ranks .career-reward-heading img{width:110px;height:140px;object-fit:contain} .career-ranks .career-reward-heading img{align-self:start;margin-top:22px} @media(max-width:680px){.career-ranks .career-reward-heading img{align-self:center;margin-top:0}} /* Revision 110 — shared vertical center axis for rank, date and membership. */ .profile{--account-detail-column:160px} .profile .account-intro,.profile .membership-with-image,.profile .subscription{grid-template-columns:minmax(0,1fr) var(--account-detail-column)} .profile .account-rank-card,.profile .membership-card-image{justify-self:center} .profile .account-rank-emblem{justify-self:center} .profile .rank-achieved-date{text-align:center;width:100%} /* Revision 111 — two compact team cards and a wider explanation of the line rule. */ .career-community-row{display:grid;grid-template-columns:minmax(160px,.4742136fr) minmax(160px,.4742136fr) minmax(0,1.7515728fr);gap:var(--career-card-gap);margin-top:var(--career-card-gap);align-items:stretch} .career-community-row>.panel{padding:20px;min-width:0} .career-community-row>.career-team-total,.career-community-row>.career-direct-total{display:flex;flex-direction:column;gap:16px;min-height:290px} .career-community-row h3{font-size:15px;line-height:1.4;margin:0} .career-community-row .career-green-count{font-size:46px;width:100%;max-width:170px;margin:5px auto;line-height:1.3;padding:8px} .career-community-row .career-card-caption{font-size:11px;line-height:1.6;margin:0;padding:10px} .career-community-row .text-button{font-size:11px;padding:0;margin-top:auto;align-self:flex-start} .career-rule-explanation{display:flex;flex-direction:column;gap:12px} .career-rule-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .career-rule-heading>span{font-size:11px;line-height:1.5;color:var(--gold)} .career-rule-intro,.career-rule-clarification{font-size:12px;line-height:1.6;color:var(--muted);margin:0} .career-rule-intro strong{font-weight:600;color:var(--text)} .career-rule-explanation h4{font-size:12px;line-height:1.4;margin:0;font-weight:600} .career-rule-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .career-rule-columns .career-rule>div:first-child{flex-wrap:wrap;gap:3px 8px} .career-rule-columns .career-rule strong{color:var(--text);font-weight:600} .career-rule-columns .career-rule small{display:block;margin-top:6px;font-size:10px;line-height:1.5} .career-rule-example{background:var(--raised);border-radius:10px;padding:11px 13px;font-size:11px;line-height:1.55} .career-rule-example>strong{display:block;margin-bottom:4px;font-weight:600} .career-rule-example p{margin:0;color:var(--muted)}.career-rule-example b{color:var(--text)} .career-rule-clarification{font-size:11px;margin-top:auto} @media(max-width:1000px){.career-community-row{grid-template-columns:repeat(2,minmax(0,1fr))}.career-community-row>.career-rule-explanation{grid-column:1/-1}.career-community-row>.career-team-total,.career-community-row>.career-direct-total{min-height:260px}} @media(max-width:520px){.career-community-row{grid-template-columns:minmax(0,1fr)}.career-community-row>.career-team-total,.career-community-row>.career-direct-total{min-height:0}.career-rule-columns{grid-template-columns:minmax(0,1fr);gap:14px}} /* Revision 112 — compact registered-user heading on a single line. */ .career-community-row>.career-team-total h3{font-size:15px;white-space:nowrap} @media(min-width:1001px){.career-community-row{grid-template-columns:minmax(228px,.4742136fr) minmax(228px,.4742136fr) minmax(0,1.7515728fr)}} /* Revision 113 — matching team typography, captions and platform detail buttons. */ .career-community-row>.career-team-total h3,.career-community-row>.career-direct-total h3{font-family:inherit;font-size:15px;font-weight:700;line-height:1.4} .career-community-row>.career-team-total .career-card-caption,.career-community-row>.career-direct-total .career-card-caption{box-sizing:border-box;min-height:90.4px} .career-community-row .career-team-details{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:auto;padding:10px 16px;border-radius:22px;text-align:center;align-self:stretch;font-size:14px;font-weight:600} /* Revision 114 — shared column boundary and a stretched account only in Vista Global. */ @media(min-width:1200px){ #career-global-content{--career-account-width:max(316px,calc((100% - var(--career-card-gap)) * .3512693333333333))} #career-global-content .career-overview-top{grid-template-columns:var(--career-account-width) minmax(0,1fr);align-items:stretch} #career-global-content .career-account-host{align-self:stretch;display:flex} #career-global-content .career-account-host>.profile{height:auto;align-self:stretch;flex:1;width:100%} #career-global-content .career-community-row{grid-template-columns:repeat(2,minmax(0,calc((var(--career-account-width) - var(--career-card-gap)) / 2))) minmax(0,1fr)} } .career-community-row>.career-team-total h3{white-space:normal} .career-community-row>.career-team-total .career-card-caption,.career-community-row>.career-direct-total .career-card-caption{min-height:72.8px} /* Revision 115 — four balanced caption lines with natural wrapping on narrow screens. */ .career-community-row>.career-team-total .career-card-caption,.career-community-row>.career-direct-total .career-card-caption{min-height:90.4px} .career-community-row>.career-team-total .career-card-caption>span,.career-community-row>.career-direct-total .career-card-caption>span{display:block} /* Revision 119 — free starbursts and smooth artwork magnification. */ .career-ranks>.career-reward-spotlight{position:relative;isolation:isolate;overflow:visible} .r2r-star-reflections{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:90} .profile .account-rank-emblem,.profile .membership-card-image,.career-current-stack .career-rank-art img,.career-ranks .career-reward-heading img{position:relative;transform-origin:center;transition:transform .32s cubic-bezier(.2,.8,.2,1),filter .32s ease;z-index:1} @media(hover:hover) and (pointer:fine){ .profile .account-rank-emblem:hover,.profile .membership-card-image:hover,.career-current-stack .career-rank-art img:hover,.career-ranks .career-reward-heading img:hover{transform:scale(1.32);filter:drop-shadow(0 5px 12px rgba(225,176,71,.5));z-index:5} } @media(prefers-reduced-motion:reduce){.r2r-star-reflections{display:none}.profile .account-rank-emblem,.profile .membership-card-image,.career-current-stack .career-rank-art img,.career-ranks .career-reward-heading img{transition:none}} /* Revision 122 — official career icon and membership artwork interactions. */ .career-bonus-nav-icon{display:inline-block;flex:0 0 22px;width:22px;height:24px;background:currentColor;-webkit-mask:url('assets/icon-bonus-carrera.svg') center/contain no-repeat;mask:url('assets/icon-bonus-carrera.svg') center/contain no-repeat} .membership-option>img{position:relative;z-index:1;transform-origin:center;transition:transform .32s cubic-bezier(.2,.8,.2,1),filter .32s ease} @media(hover:hover) and (pointer:fine){.membership-option>img:hover{transform:scale(1.18);filter:drop-shadow(0 5px 10px color-mix(in srgb,var(--membership-accent) 55%,transparent));z-index:3}} @media(prefers-reduced-motion:reduce){.membership-option>img{transition:none}} /* Revision 123 — matching membership artwork hover in Nueva Tarjeta. */ #new-card-view .card-plan-heading-assets>img{position:relative;transform-origin:center;transition:transform .32s cubic-bezier(.2,.8,.2,1);z-index:1} @media(hover:hover) and (pointer:fine){#new-card-view .card-plan-heading-assets>img:hover{transform:scale(1.18);z-index:3}} @media(prefers-reduced-motion:reduce){#new-card-view .card-plan-heading-assets>img{transition:none}} /* Revision 124 — registered users under the rank, six career metrics under the objective. */ #career-global-content .career-overview-summary{display:grid;grid-template-columns:minmax(125px,.72fr) minmax(0,2.28fr);gap:var(--career-card-gap);align-items:stretch} #career-global-content .career-overview-summary .career-overview-metrics{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(68px,1fr));align-self:stretch;align-content:stretch} .career-users-compact{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;padding:10px;gap:8px;min-width:0} .career-users-compact h3{font-size:11px;line-height:1.4;margin:0;text-align:center} .career-users-compact .career-green-count{font-size:28px;margin:0 auto;padding:2px 8px;max-width:120px} .career-users-compact .career-team-details{border-radius:22px;padding:7px 8px;min-height:34px;font-size:11px;width:100%;margin-top:auto} .career-community-row .career-team-points .career-green-count{font-size:38px;white-space:nowrap} .career-team-points .career-green-count small{font-size:12px;letter-spacing:0} @media(max-width:680px){#career-global-content .career-overview-summary{grid-template-columns:minmax(0,1fr)}.career-users-compact{display:grid;grid-template-columns:minmax(0,1fr) 85px auto;align-items:center;gap:10px}.career-users-compact h3{text-align:left}.career-users-compact .career-team-details{margin:0}} @media(max-width:420px){#career-global-content .career-overview-summary .career-overview-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.career-users-compact{grid-template-columns:minmax(0,1fr) 75px}.career-users-compact .career-team-details{grid-column:1/-1}} /* Revision 125 — larger registered-user count and shared rows for lower statistics. */ .career-users-compact{container-type:inline-size} .career-users-compact .career-green-count{display:flex;align-items:center;justify-content:center;width:100%;max-width:none;min-height:60px;padding:8px;font-size:34px;font-size:clamp(18px,calc((100cqi - 18px) / var(--count-length,2) * 1.4),34px);line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap;flex:1} .career-community-row>.career-team-total>.career-green-count,.career-community-row>.career-direct-total>.career-green-count{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;max-width:170px;height:78px;min-height:78px;margin:0 auto;padding:8px;grid-area:auto;align-self:center} .career-community-row>.career-team-total>.career-card-caption,.career-community-row>.career-direct-total>.career-card-caption{align-self:stretch;margin:0} @media(min-width:521px){ .career-community-row>.career-team-total,.career-community-row>.career-direct-total{display:grid;grid-template-rows:subgrid;grid-row:1 / span 4;row-gap:16px;align-items:start} .career-community-row>.career-team-total{grid-column:1} .career-community-row>.career-direct-total{grid-column:2} .career-community-row>.career-rule-explanation{grid-column:3;grid-row:1 / span 4} .career-community-row>.career-team-total>.career-team-details,.career-community-row>.career-direct-total>.career-team-details{margin-top:0;align-self:end} } @media(min-width:521px) and (max-width:1000px){.career-community-row>.career-rule-explanation{grid-column:1/-1;grid-row:5}} @media(max-width:680px){.career-users-compact{grid-template-columns:minmax(0,1fr) minmax(110px,.7fr) auto}.career-users-compact .career-green-count{font-size:30px}} @media(max-width:420px){.career-users-compact{grid-template-columns:minmax(0,1fr) minmax(110px,.8fr)}} /* Revision 126 — independent billing, consistent icons and complete detail pages. */ .billing-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .billing-summary-card{display:flex;flex-direction:column;gap:22px;min-height:205px} .billing-trading-card{grid-column:span 2} .billing-card-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:44px} .billing-card-heading h3{font-size:15px;line-height:1.45;margin:0;min-width:0} .billing-metric-icon{display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 26px;color:var(--text)} .billing-metric-icon>.career-bonus-icon,.billing-metric-icon>.reference-icon,.billing-metric-icon>.career-tree-icon{width:26px;height:26px;flex:0 0 26px} .billing-points-icon{font-size:11px;font-weight:750;letter-spacing:-.5px;line-height:1} .billing-card-value{font-size:29px;line-height:1.25;font-weight:650;letter-spacing:-.7px;margin-top:auto;font-variant-numeric:tabular-nums;overflow-wrap:anywhere} .billing-card-value small,.billing-detail-summary>div>strong small{font-size:12px;font-weight:500;letter-spacing:0;white-space:nowrap} .billing-details-button{width:100%;border-radius:24px;min-height:44px;margin-top:auto} .billing-back{border-radius:22px;margin-bottom:14px} .billing-detail-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;margin-bottom:14px;padding:25px} .billing-detail-summary .eyebrow{font-size:12px;color:var(--muted);margin:0 0 10px;text-transform:none} .billing-detail-summary>div>strong{font-size:36px;line-height:1.25;letter-spacing:-.7px;font-variant-numeric:tabular-nums} .billing-detail-summary>p{grid-column:1/-1;margin:0;color:var(--muted);font-size:13px;line-height:1.6;max-width:950px} .billing-pnl-breakdown{grid-column:1/-1;display:flex;gap:25px;flex-wrap:wrap} .billing-pnl-breakdown span{font-size:12px;color:var(--muted);display:grid;gap:6px}.billing-pnl-breakdown b{font-size:16px;font-weight:600} .billing-ledger-panel{padding:22px;min-width:0} .billing-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-bottom:12px} .billing-filters label{display:grid;gap:7px;font-size:12px;color:var(--muted);flex:1 1 145px} .billing-filters label:first-child{flex:2 1 220px} .billing-filters input,.billing-filters select{width:100%;min-width:0;min-height:42px;border:1px solid var(--border);border-radius:9px;padding:9px 11px;background:var(--raised);color:var(--text);font:inherit} .billing-filters button{border-radius:22px;min-height:42px} #billing-filter-error:empty{display:none} .billing-results-heading{display:flex;justify-content:space-between;gap:15px;align-items:center;flex-wrap:wrap;margin:20px 0 14px;font-size:12px;color:var(--muted)} .billing-results-heading strong{font-weight:600;color:var(--text)}.billing-results-heading strong small{font-size:11px} .billing-table-scroll{width:100%;overflow:auto;border:1px solid var(--border);border-radius:12px} .billing-ledger-table{width:100%;border-collapse:collapse;min-width:640px;text-align:left} .billing-ledger-table th{padding:16px;background:var(--raised);font-size:12px;color:var(--text);font-weight:650;white-space:nowrap} .billing-ledger-table td{padding:18px 16px;border-top:1px solid var(--border);font-size:13px;line-height:1.45;vertical-align:middle} .billing-ledger-table th:first-child,.billing-ledger-table td:first-child{width:44px;color:var(--muted)} .billing-ledger-table time{white-space:nowrap;font-variant-numeric:tabular-nums} .billing-ledger-table time small{display:block;color:var(--muted);font-size:11px;margin-top:3px} .billing-ledger-table td.billing-amount-cell{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600;text-align:right} .billing-ledger-table th:last-child{text-align:right} .billing-ledger-table tr:last-child td{border-bottom:0} .billing-nick{display:flex;align-items:center;gap:10px;white-space:nowrap;font-weight:600} .billing-pagination{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:18px;font-size:12px;color:var(--muted)} .billing-pagination>div{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.billing-pagination button{border-radius:22px;font-size:12px} @media(max-width:1100px){.billing-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.billing-trading-card{grid-column:auto}} @media(max-width:580px){.billing-summary-grid{grid-template-columns:1fr}.billing-summary-card{min-height:180px}.billing-ledger-panel{padding:14px}.billing-detail-summary{padding:20px}.billing-detail-summary>div>strong{font-size:29px}.billing-filters label:first-child{flex-basis:100%}.billing-filters label{flex-basis:calc(50% - 12px)}.billing-pagination>div{width:100%;justify-content:space-between;gap:6px}} /* Revision 127 — available balance and both trading summaries share one row. */ .billing-top-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-bottom:14px} .billing-top-row>.panel{grid-column:auto;margin:0;padding:22px;min-height:215px} .billing-available-card{display:flex;flex-direction:column;gap:14px;min-width:0} .billing-available-icon{width:26px;height:26px;object-fit:contain;flex-shrink:0} .billing-top-row .billing-available-card>.billing-card-value{font-size:29px;line-height:1.25;margin-top:auto;letter-spacing:-.7px} .billing-top-row .billing-available-card>.subtle{font-size:11px;line-height:1.4;margin:0} .billing-available-card .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:auto} .billing-available-card .actions button{width:100%;padding:10px 12px;min-height:44px} @media(max-width:900px){.billing-top-row{grid-template-columns:minmax(0,1fr)}.billing-top-row>.panel{min-height:190px}} /* Revision 128 — income semantics and restrained color accents throughout Billing. */ #career-billing-view{--billing-blue:#78a9f5;--billing-violet:#b19ae9;--billing-teal:#6ecfc7} body.light #career-billing-view{--billing-blue:#326dc0;--billing-violet:#7955b7;--billing-teal:#147d79} #career-billing-view [data-billing-kind]{--billing-accent:var(--billing-blue)} #career-billing-view [data-billing-kind="team"],#career-billing-view [data-billing-kind="performance"],#career-billing-view [data-billing-kind="investment"]{--billing-accent:var(--billing-violet)} #career-billing-view [data-billing-kind="pnl"],#career-billing-view [data-billing-kind="subscription"]{--billing-accent:var(--green)} #career-billing-view [data-billing-kind="unilevel"]{--billing-accent:var(--billing-teal)} #career-billing-view [data-billing-kind="career-bonus"],#career-billing-view [data-billing-kind="token-bonus"],#career-billing-view [data-billing-kind="tokens"]{--billing-accent:var(--gold)} #career-billing-view .billing-summary-card,#career-billing-view .billing-available-card,#career-billing-view .billing-detail-summary{background:radial-gradient(ellipse at top right,color-mix(in srgb,var(--billing-accent) 12%,transparent),transparent 72%),var(--panel);border-color:color-mix(in srgb,var(--billing-accent) 25%,var(--border));border-top-color:color-mix(in srgb,var(--billing-accent) 55%,var(--border))} #career-billing-view .billing-metric-icon{width:44px;height:44px;flex-basis:44px;border-radius:13px;color:var(--billing-accent);background:color-mix(in srgb,var(--billing-accent) 13%,transparent)} #career-billing-view .billing-metric-icon>.reference-icon,#career-billing-view .billing-metric-icon>.career-tree-icon,#career-billing-view .billing-metric-icon>.career-bonus-icon{color:inherit} #career-billing-view .billing-available-icon{box-sizing:content-box;padding:9px;border-radius:13px;background:color-mix(in srgb,var(--billing-accent) 13%,transparent)} #career-billing-view .billing-card-value.positive,#career-billing-view .billing-detail-summary strong.positive,#career-billing-view .billing-results-heading strong.positive{color:var(--green)} #career-billing-view .billing-card-value.negative,#career-billing-view .billing-detail-summary strong.negative,#career-billing-view .billing-results-heading strong.negative{color:var(--red)} #career-billing-view .billing-details-button{transition:box-shadow .2s ease} #career-billing-view .billing-details-button:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--billing-accent) 22%,transparent)} /* Revision 129 — center the visible membership art, not its asymmetric transparent canvas. Offsets measured from PNG alpha bounds (>128). Translate inside scale so the optical center remains fixed throughout the hover animation. Original assets stay intact. */ .membership-option[data-membership-key="free"]{--membership-art-x:.889228%;--membership-art-y:-.824964%} .membership-option[data-membership-key="basic"]{--membership-art-x:-.076220%;--membership-art-y:-.107604%} .membership-option[data-membership-key="standard"]{--membership-art-x:1.016260%;--membership-art-y:-.286944%} .membership-option[data-membership-key="plus"]{--membership-art-x:1.524390%;--membership-art-y:1.111908%} .membership-option[data-membership-key="premium"]{--membership-art-x:-.182482%;--membership-art-y:.294118%} .membership-option>img{transform:scale(1) translate(var(--membership-art-x,0%),var(--membership-art-y,0%));transform-origin:center center} @media(hover:hover) and (pointer:fine){.membership-option>img:hover{transform:scale(1.18) translate(var(--membership-art-x,0%),var(--membership-art-y,0%))}} /* Revision 130 — equal visible icon size and optical center throughout the sidebar. */ .r2r-token-nav-icon{display:inline-block;background:currentColor;mask:url('assets/icon-bonus-r2r-token.svg') center/contain no-repeat;-webkit-mask:url('assets/icon-bonus-r2r-token.svg') center/contain no-repeat} #navigation button>:is(.reference-icon,.career-bonus-nav-icon,.career-tree-icon,.r2r-token-nav-icon,.settings-nav-icon,.card-plus-icon){display:block;box-sizing:border-box;width:22px;height:22px;min-width:22px;max-width:22px;flex:0 0 22px;align-self:center;vertical-align:middle} #navigation button>:is(.reference-icon,.career-bonus-nav-icon,.career-tree-icon,.r2r-token-nav-icon){mask-size:var(--nav-mask-size);-webkit-mask-size:var(--nav-mask-size);mask-position:var(--nav-mask-position);-webkit-mask-position:var(--nav-mask-position);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat} #navigation .reference-icon[data-icon="home"]{--nav-mask-size:26.43750px 26.43750px;--nav-mask-position:-1.93750px -3.06250px} #navigation .reference-icon[data-icon="rocket"]{--nav-mask-size:25.63636px 25.63636px;--nav-mask-position:-1.81818px -1.81818px} #navigation .reference-icon[data-icon="badge"]{--nav-mask-size:26.43750px 26.43750px;--nav-mask-position:-1.93750px -2.50000px} #navigation .reference-icon[data-icon="campus"]{--nav-mask-size:25.63636px 25.63636px;--nav-mask-position:-1.27273px -2.36364px} #navigation .reference-icon[data-icon="card"]{--nav-mask-size:24.88235px 24.88235px;--nav-mask-position:-1.17647px -1.70588px} #navigation .reference-icon[data-icon="video"]{--nav-mask-size:24.88235px 24.88235px;--nav-mask-position:-1.17647px -2.23529px} #navigation .reference-icon[data-icon="help"]{--nav-mask-size:28.20000px 28.20000px;--nav-mask-position:-2.80000px -3.40000px} #navigation .reference-icon[data-icon="atom"]{--nav-mask-size:28.20000px 28.20000px;--nav-mask-position:-2.80000px -3.40000px} #navigation .reference-icon[data-icon="box"]{--nav-mask-size:28.20000px 28.20000px;--nav-mask-position:-2.80000px -3.40000px} #navigation .reference-icon[data-icon="academy"]{--nav-mask-size:24.88235px 24.88235px;--nav-mask-position:-1.17647px -1.70588px} #navigation .reference-icon[data-icon="global"]{--nav-mask-size:21.70588px 21.70588px;--nav-mask-position:-0.11765px 0.41176px} #navigation .reference-icon[data-icon="billing"]{--nav-mask-size:21.70588px 21.70588px;--nav-mask-position:-0.11765px 0.41176px} #navigation .career-bonus-nav-icon{--nav-mask-size:17.77778px 19.25926px;--nav-mask-position:2.14815px 1.62963px} #navigation .career-tree-icon{--nav-mask-size:18.00000px 19.50000px;--nav-mask-position:2.00000px 1.40000px} #navigation .r2r-token-nav-icon{--nav-mask-size:18.30508px 19.83051px;--nav-mask-position:1.84746px 1.08475px} #navigation .settings-nav-icon{transform:scale(.99677);transform-origin:center} #navigation .card-plus-icon{transform:scale(1.24281);transform-origin:center} /* v131 · Shared information in referral cards and their enlarged profile. */ .team-person dl>div{align-items:center;min-height:20px} .team-subscription-icons{display:inline-flex;align-items:center;justify-content:flex-end;gap:8px;vertical-align:middle} .team-subscription-icons .subscription-ribbon{width:18px;height:20px} .team-subscription-empty{color:var(--muted);font-weight:400} .team-expand{display:flex;align-items:center;justify-content:center;gap:7px;padding-top:10px} .team-expand .career-tree-icon{width:16px;height:18px;flex:0 0 16px} .team-referral-count{display:inline-grid;place-items:center;min-width:22px;min-height:20px;padding:2px 5px;border:1px solid var(--border);border-radius:6px;background:var(--raised);font-variant-numeric:tabular-nums} .team-person-review{width:100%;padding:22px;box-sizing:border-box;box-shadow:none} .team-person-review .team-person-heading{font-size:19px;gap:12px;margin-bottom:24px;flex-wrap:wrap} .team-person-review .team-person-heading>strong{white-space:normal;overflow-wrap:anywhere;flex:1;min-width:0} .team-person-review .team-person-avatar{width:44px;height:44px;font-size:22px} .team-person-review .team-person-membership{font-size:12px;padding:6px 10px} .team-person-review dl{gap:0;margin:0} .team-person-review dl>div{font-size:15px;min-height:54px;padding:12px 0;border-bottom:1px solid var(--border)} .team-person-review .team-subscription-icons{gap:12px} .team-person-review .subscription-ribbon{width:27px;height:30px} .team-review-position{font-size:12px;color:var(--muted);margin:18px 0 0} @media(max-width:420px){.team-person-review{padding:16px}.team-person-review dl>div{font-size:13px}.team-person-review .team-person-heading{font-size:17px}} /* v132 · Preserve the original tree-card footprint with the new four data rows. */ .team-tree .team-person{width:226px;padding:12px} .team-tree .team-person dl>div{min-height:15px;height:15px;line-height:15px} .team-tree .team-person dd{display:flex;align-items:center;justify-content:flex-end;line-height:15px} .team-tree .team-subscription-icons{height:15px;gap:7px} .team-tree .team-subscription-icons .subscription-ribbon{width:14px;height:15px} .team-tree .team-expand{height:24px;min-height:24px;padding:9px 4px 0;line-height:15px;gap:6px} .team-tree .team-expand .career-tree-icon{width:14px;height:15px;flex-basis:14px} .team-tree .team-referral-count{min-width:19px;min-height:15px;height:15px;padding:0 4px;line-height:13px;border-radius:4px} /* User review stays within the referral tree. */ .modal-dashboard-action[hidden]{display:none} /* v136 · Membership frames sampled from the supplied reference screenshots. Keep a 226 × 160 card at 100% tree zoom; branch controls sit outside the frame. */ .team-person[data-team-membership]{--team-tier:#111415;background:var(--team-tier);border:1px solid #252a2e;color:#f8f9fa;box-shadow:none;border-radius:12px} .team-person[data-team-membership="basic"]{--team-tier:#b049e9} .team-person[data-team-membership="standard"]{--team-tier:#b57a3f} .team-person[data-team-membership="plus"]{--team-tier:#8a8988} .team-person[data-team-membership="premium"]{--team-tier:#e2c270} .team-node{width:226px;margin:0 auto} .team-tree .team-person{width:226px;height:160px;padding:6px} .team-tree .team-person-heading{height:30px;margin:0;gap:6px;font-size:11px;line-height:15px} .team-person[data-team-membership] .team-person-heading{color:#fff} .team-tree .team-person-avatar{width:22px;height:22px;font-size:10px} .team-person[data-team-membership] .team-person-avatar{background:#eeeeed;color:#777} .team-person[data-team-membership] .team-person-membership{background:transparent;color:inherit;padding:0;border-radius:0;flex-shrink:0} .team-tree .team-person-membership{font-size:9px} .team-person-body{background:#1b1e1f;border-radius:10px;color:#f8f9fa} .team-tree .team-person-body{height:116px;padding:6px} .team-tree .team-person dl{gap:2px;margin:0} .team-tree .team-person dl>div{height:17px;min-height:17px;line-height:17px;font-size:10px} .team-person[data-team-membership] dt,.team-person[data-team-membership] .team-subscription-empty{color:#afb3b6} .team-tree .team-person dd{line-height:17px;font-variant-numeric:tabular-nums} .team-tree .team-person-body>.secondary{display:block;width:100%;height:24px;min-height:24px;margin-top:6px;padding:3px 8px;border:1px solid #303639;border-radius:16px;background:transparent;color:#f8f9fa;font-size:10px;line-height:16px} .team-tree .team-person-body>.secondary:hover{background:#292f32} .team-tree .team-expand{width:max-content;max-width:226px;height:26px;min-height:26px;margin:18px auto 0;padding:4px 8px;gap:6px;border-radius:5px;background:var(--raised);color:var(--text);border:1px solid var(--border)} .team-tree .team-expand[aria-expanded="false"]{background:#0869ee;color:#fff;border-color:#0869ee} .team-tree .team-expand[aria-expanded="false"] .team-referral-count{background:#ffffff1a;border-color:#ffffff40} .team-person-review[data-team-membership]{padding:8px} .team-person-review[data-team-membership] .team-person-heading{margin:0;padding:12px 10px 16px} .team-person-review .team-person-body{padding:8px 18px 18px} .team-person-review[data-team-membership] dl>div{border-color:#303639} .team-person-review[data-team-membership] .team-review-position{color:#afb3b6} /* v138 · Support reference layout; every selector is scoped to the new page. */ #support-view[hidden]{display:none} .support-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(28px,5vw,85px);padding:26px;min-height:calc(100dvh - 170px);align-items:start} .support-tabs{display:grid;gap:12px} .support-tabs button{width:100%;min-height:46px;border:1px solid var(--border);border-radius:26px;padding:11px 20px;background:transparent;text-align:left;color:var(--muted);font-size:14px} .support-tabs button[aria-selected="true"]{border:2px solid #137aff;padding:10px 19px;color:var(--text)} .support-tabs button:focus-visible{outline:2px solid var(--text);outline-offset:2px} .support-content{border-top:1px solid var(--border);padding-top:30px;margin-top:14px;min-width:0} .support-document-list{display:grid;gap:12px;padding-top:20px} .support-document{display:flex;align-items:center;gap:16px;min-height:96px;padding:22px;background:var(--raised);border:1px solid var(--border);border-radius:12px} .support-document>div{flex:1;min-width:0}.support-document h3{font-size:14px;margin:0;line-height:1.4}.support-document p{font-size:12px;color:var(--muted);margin:6px 0 0} .support-document-icon{display:grid;place-items:center;flex:0 0 46px;height:46px;border-radius:12px;background:#297de31a;color:#1678ff} .support-download{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;border:1px solid var(--border);border-radius:11px;background:transparent;color:var(--muted)}.support-download:hover{color:var(--blue);background:var(--panel)} .support-legal{font-size:11px;line-height:1.75;color:var(--muted);margin:22px 0} .support-document-note{font-size:12px;line-height:1.6;color:var(--muted);margin:16px 0} .support-faq-grid{columns:3;column-gap:12px} .support-faq-card{display:flow-root;break-inside:avoid;padding:20px 18px 16px;border-radius:9px;margin-bottom:12px;color:#fafafa;background:var(--faq-bg)} .support-faq-color-0{--faq-bg:#817769;--faq-accent:#ffaf50}.support-faq-color-1{--faq-bg:#33453c;--faq-accent:#2bb66b}.support-faq-color-2{--faq-bg:#44384f;--faq-accent:#b980d8} .support-faq-card h3{font-size:14px;line-height:1.3;margin:0 0 12px}.support-faq-card p{font-size:12px;line-height:1.6;margin:0 0 16px;color:#f0edf2} .support-faq-card button{float:right;display:grid;place-items:center;width:27px;height:27px;border-radius:6px;background:var(--faq-accent);color:#fff;font-size:21px;line-height:1} .support-intro{font-size:14px;color:var(--muted);line-height:1.5;margin:0 0 36px;max-width:590px} .support-help h3{display:flex;align-items:center;gap:12px;font-size:15px;margin:0 0 12px}.support-help label{display:block;font-size:12px;color:var(--muted);margin:22px 0 5px}.support-copy{display:flex;align-items:center;gap:14px;background:var(--raised);border-radius:10px;width:100%;padding:14px 18px;text-align:left;font-size:14px;overflow-wrap:anywhere}.support-copy svg{flex-shrink:0;color:var(--muted)} .support-ticket-form{display:grid;gap:20px}.support-ticket-form label{display:grid;gap:9px;font-size:13px;font-weight:600}.support-ticket-form input:not([type="file"]),.support-ticket-form textarea,.support-ticket-form select{display:block;width:100%;min-width:0;border:1px solid var(--border);border-radius:9px;padding:12px;background:var(--raised);color:var(--text);font:inherit;font-weight:400}.support-ticket-form textarea{resize:vertical;min-height:125px;font-family:inherit}.support-ticket-form small{display:block;color:var(--muted);font-size:11px;font-weight:400}.support-ticket-form select{background:var(--panel)} .support-attachments .support-drop-zone{position:relative;display:grid;place-items:center;min-height:140px;padding:20px;border:1px dashed var(--border);background:var(--bg);border-radius:11px;text-align:center;color:var(--muted);font-size:13px;font-weight:400;margin:10px 0;cursor:pointer}.support-drop-zone input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.support-drop-zone:focus-within{outline:2px solid var(--blue);outline-offset:3px} .support-file{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:8px 12px;background:var(--raised);border-radius:7px;margin-top:7px;font-size:12px}.support-file span{overflow-wrap:anywhere;min-width:0}.support-file button{background:transparent;font-size:22px;min-width:30px}.support-attachments p:empty,#support-submit-status:empty{display:none} .support-ticket-form .support-document-note{margin:0}.support-submit{justify-self:start;background:#f4501b;color:white;border-radius:25px;min-height:42px;padding:10px 22px;font-size:13px;font-weight:600}.support-submit:hover{background:#d84112}#support-submit-status{margin:0;font-size:13px;color:var(--muted)} .support-reports{margin-top:40px}.support-reports h3{font-size:17px}.support-reports .section-heading>span{font-size:12px}.support-report-scroll{overflow:auto;border:1px solid var(--border);border-radius:10px}.support-report-table{width:100%;border-collapse:collapse;font-size:12px;min-width:560px}.support-report-table th{text-align:left;background:var(--raised);padding:14px 12px;font-weight:600}.support-report-table td{padding:14px 12px;vertical-align:top;border-top:1px solid var(--border)}.support-report-table small{display:block;color:var(--muted)}.support-report-table summary{cursor:pointer;max-width:260px;overflow-wrap:anywhere}.support-report-table details p{max-width:280px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted)}.support-report-status{color:#f77744;white-space:nowrap} @media(max-width:1200px){.support-layout{grid-template-columns:190px minmax(0,1fr);gap:28px;padding:22px}.support-faq-grid{columns:2}} @media(max-width:760px){.support-layout{grid-template-columns:minmax(0,1fr);gap:15px;padding:18px}.support-tabs{display:flex;overflow-x:auto;gap:8px;padding:3px}.support-tabs button{width:auto;flex-shrink:0;white-space:nowrap;font-size:12px;min-height:42px;padding:10px 15px}.support-tabs button[aria-selected="true"]{padding:9px 14px}.support-content{padding-top:22px;margin-top:0}.support-document{padding:16px;gap:12px}.support-document-icon{flex-basis:36px;height:36px}.support-document-list{padding-top:0}} @media(max-width:460px){.support-faq-grid{columns:1}.support-document{padding:14px 10px;gap:9px}.support-document h3{font-size:13px}.support-document-icon{flex-basis:30px;height:34px}.support-download{width:32px;height:34px}.support-copy{font-size:12px}.support-layout{padding:14px}} /* v139 · Tutorial catalogue. Unmodified reference image is framed through CSS for its two covers. */ #tutorials-view[hidden]{display:none} .tutorials-intro{margin:38px 0 24px}.tutorials-intro h3{font-size:clamp(30px,3.2vw,46px);letter-spacing:-1.3px;line-height:1.15;margin:0 0 9px}.tutorials-intro p{font-size:15px;color:var(--muted);margin:0} .tutorials-catalogue{padding:24px}.tutorials-catalogue>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer}.tutorials-catalogue>summary::-webkit-details-marker{display:none}.tutorials-catalogue>summary>span:first-child{display:grid;gap:4px}.tutorials-catalogue>summary strong{font-size:15px}.tutorials-catalogue>summary>span>span{font-size:14px;color:var(--muted)}.tutorials-chevron{font-size:22px;transition:transform .18s}.tutorials-catalogue:not([open]) .tutorials-chevron{transform:rotate(-90deg)} .tutorials-catalogue-body{margin-top:35px}.tutorials-search{display:flex;align-items:center;gap:12px;padding:10px 15px;background:var(--raised);border:1px solid var(--border);border-radius:11px;color:var(--muted);margin-bottom:16px}.tutorials-search input{width:100%;min-width:0;background:transparent;border:0;color:var(--text);font-size:14px}.tutorials-search svg{flex-shrink:0} .tutorials-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,270px));gap:16px;align-items:start}.tutorial-card{display:block;min-width:0;text-align:left;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--raised);padding:0;color:var(--text);transition:border-color .15s,box-shadow .15s}.tutorial-card:hover{border-color:var(--blue);box-shadow:0 5px 18px #0002}.tutorial-card:focus-visible{outline:2px solid var(--blue);outline-offset:3px} .tutorial-thumbnail{display:block;width:100%;aspect-ratio:284/160;background-image:url('assets/tutorial-reference.png');background-repeat:no-repeat;background-size:721.12676% auto;background-color:#060f1e}.tutorial-thumbnail-mirror{background-position:43.99093% 43.227%}.tutorial-thumbnail-pools{background-position:61.05442% 43.227%} .tutorial-card-copy{display:grid;gap:16px;padding:18px 20px 14px}.tutorial-card-copy>strong{font-size:14px;line-height:1.4}.tutorial-completed{color:var(--green);font-size:12px;font-weight:600}.tutorials-demo-note{font-size:12px;color:var(--muted);margin:16px 0}.tutorials-empty{grid-column:1/-1;padding:24px 0;color:var(--muted);font-size:14px}.tutorials-empty strong{color:var(--text)}.tutorials-empty button{border-radius:22px;padding:10px 18px}.tutorial-preview .tutorial-thumbnail{border-radius:12px}.tutorial-preview p{font-size:14px} @media(max-width:680px){.tutorials-intro{margin-top:22px}.tutorials-intro h3{font-size:30px}.tutorials-catalogue{padding:18px}.tutorials-catalogue-body{margin-top:24px}.tutorials-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tutorial-card-copy{padding:14px 12px;gap:12px}.tutorial-card-copy>strong{font-size:12px}} @media(max-width:460px){.tutorials-grid{grid-template-columns:minmax(0,1fr)}.tutorial-card{max-width:100%}.tutorial-card-copy>strong{font-size:14px}} /* v140 · Campus landing based on the supplied screenshot. */ #campus-view[hidden]{display:none} .campus-banner,.campus-reference-art{background-image:url('assets/campus-reference.png');background-repeat:no-repeat;background-color:#111a1b} .campus-banner{width:100%;border-radius:16px;aspect-ratio:3/1;margin:12px 0 26px} .campus-access{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:23px 26px;background:var(--raised);border:1px solid var(--border);border-radius:14px;margin-bottom:28px} .campus-access h3{font-size:15px;line-height:1.4;margin:0 0 4px}.campus-access p{font-size:13px;color:var(--muted);margin:0} .campus-entry{display:flex;align-items:center;justify-content:center;gap:9px;background:#096bef;color:white;border-radius:10px;padding:12px 22px;min-height:42px;font-size:13px;font-weight:600;flex-shrink:0}.campus-entry:hover{background:#005cda} .campus-presentations>.section-heading{margin-bottom:16px;gap:16px}.campus-presentations h3{font-size:17px;margin:0}.campus-presentations>.section-heading>span{font-size:12px;color:var(--muted)} .campus-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch} .campus-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:15px;border:1px solid var(--border);padding:0;text-align:left;background:var(--raised);color:var(--text);transition:border-color .15s,box-shadow .15s}.campus-card:hover{border-color:var(--blue);box-shadow:0 5px 20px #0002}.campus-card:focus-visible,.campus-entry:focus-visible{outline:2px solid var(--blue);outline-offset:3px} .campus-reference-art{display:block;width:100%;aspect-ratio:327/184;flex-shrink:0} .campus-card-copy{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:15px 16px 18px}.campus-card-copy>strong{font-size:14px;line-height:1.35}.campus-card-copy>span:last-child{font-size:12px;color:var(--muted);line-height:1.4} .campus-card-copy>.campus-booking-label{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:12px;background:#087aff15;color:#167fff;font-size:11px;font-weight:600}.campus-booking-label svg{width:12px;height:12px} .campus-demo-note{font-size:12px;color:var(--muted);margin:18px 0}.campus-course-preview>.campus-reference-art,#modal-content>.campus-reference-art{border-radius:12px}.campus-course-preview p{font-size:14px} @media(max-width:960px){.campus-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.campus-access{padding:20px;gap:18px}} @media(max-width:620px){.campus-access{align-items:stretch;flex-direction:column;gap:16px}.campus-entry{align-self:flex-start}.campus-grid{grid-template-columns:minmax(0,1fr)}.campus-banner{border-radius:12px;margin-bottom:18px}.campus-card-copy{padding:16px}.campus-presentations h3{font-size:16px}} .campus-banner{background-size:226.799557% auto;background-position:89.956332% 8.465074%} .campus-art-meeting{background-size:626.299694% auto;background-position:56.827426% 55.269967%} .campus-art-ai{background-size:626.299694% auto;background-position:76.641488% 55.269967%} .campus-art-finance{background-size:626.299694% auto;background-position:96.513655% 55.269967%} .campus-art-blockchain{background-size:626.299694% auto;background-position:56.827426% 83.234499%} /* v141 · Staggered FAQ columns; Spot and Perpetual Futures share the desktop top row. */ .support-faq-grid{display:grid;grid-template-columns:repeat(var(--faq-columns,3),minmax(0,1fr));gap:12px;columns:auto;align-items:start} .support-faq-column{display:grid;gap:12px;min-width:0;align-content:start} .support-faq-column .support-faq-card{margin:0} /* v146: subscription ledger shares column centers between headers and values. */ .billing-ledger-table[data-billing-kind="subscription"]{table-layout:fixed;min-width:900px} .billing-ledger-table[data-billing-kind="subscription"] th, .billing-ledger-table[data-billing-kind="subscription"] td{text-align:center;font-variant-numeric:tabular-nums} .billing-ledger-table[data-billing-kind="subscription"] th:nth-child(1){width:5%} .billing-ledger-table[data-billing-kind="subscription"] th:nth-child(2){width:15%} .billing-ledger-table[data-billing-kind="subscription"] th:nth-child(3){width:16%} .billing-ledger-table[data-billing-kind="subscription"] th:nth-child(4){width:12%} .billing-ledger-table[data-billing-kind="subscription"] th:nth-child(5){width:8%} .billing-ledger-table[data-billing-kind="subscription"] th:nth-child(6){width:16%} .billing-ledger-table[data-billing-kind="subscription"] th:nth-child(7){width:11%} .billing-ledger-table[data-billing-kind="subscription"] th:nth-child(8){width:17%} .billing-ledger-table[data-billing-kind="subscription"] th:nth-child(2), .billing-ledger-table[data-billing-kind="subscription"] td:nth-child(2){text-align:left} .billing-ledger-table[data-billing-kind="subscription"] th:nth-child(8), .billing-ledger-table[data-billing-kind="subscription"] td:nth-child(8){text-align:right} .billing-ledger-table[data-billing-kind="subscription"] .billing-nick{justify-content:center;white-space:normal;overflow-wrap:anywhere} /* v147: two compact examples clarify that direct lines are unlimited. */ .career-rule-example p+p{margin-top:6px} .career-rule-clarification strong{color:var(--text);font-weight:600} /* v152 — final responsive layer: overrides older desktop placements, not content. Tables and the referral tree scroll locally; page sections remain in normal flow. */ [hidden]:not([hidden="until-found"]){display:none!important} html{scrollbar-gutter:stable;-webkit-text-size-adjust:100%} body{min-width:0} .workspace,main,main>[id$="-view"],.panel{min-width:0} main{max-width:2200px;margin-inline:auto} main>[id$="-view"]{width:100%;max-width:100%} img,video,canvas{max-width:100%} button,input,select,textarea{max-width:100%} textarea{font:inherit} :where(.panel,.section-heading,.career-page-heading,.card-page-top,.token-page-heading,.welcome)>*{min-width:0} :where(h1,h2,h3,h4,p,.copy-field,.billing-card-value,.token-balance-number){overflow-wrap:anywhere} :where(.table-scroll,.position-scroll,.billing-table-scroll,.card-table-scroll,.support-report-scroll,.team-tree-viewport){min-width:0;max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} .sidebar{height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain} .sidebar .brand,.sidebar-foot{flex-shrink:0} .sidebar #navigation{min-height:0;flex-shrink:0} .sidebar-foot{padding-bottom:env(safe-area-inset-bottom,0px)} #modal{max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overscroll-behavior:contain} #modal-content{min-width:0;overflow-wrap:anywhere} #modal-content :where(input,select,textarea){min-width:0;width:100%} #modal-content .actions{flex-wrap:wrap} .chat{height:min(600px,calc(100dvh - 24px));bottom:max(12px,env(safe-area-inset-bottom));right:max(12px,env(safe-area-inset-right))} .chat .messages{overflow-y:auto;overflow-wrap:anywhere} #chat-form{min-width:0}#chat-input{min-width:0} #notifications-popover{max-width:calc(100vw - 24px)} .billing-ledger-panel,.support-report-scroll,.card-tables,.positions{min-width:0} .billing-filters label{min-width:0} .billing-pagination,.card-pagination,.team-tree-toolbar,.team-tree-toolbar>div{flex-wrap:wrap} .career-objective-top,.career-objective-requirements,.career-current-stack,.career-account-host{min-width:0} .career-requirement>*,.career-rule>div>*{min-width:0;overflow-wrap:anywhere} .career-cash-reward>strong,.career-token-reward strong{white-space:normal;overflow-wrap:anywhere} .profile .identity,.profile .copy-field,.membership-copy,.subscription>p{min-width:0} .profile .copy-field>span:first-child{overflow-wrap:anywhere;min-width:0} .profile .copy-action{flex-shrink:0} .membership-option{min-width:0}.membership-detail-actions{gap:12px} .membership-detail-actions>*{min-width:0} .support-faq-column{min-width:0} .support-tabs,.settings-tabs{max-width:100%;min-width:0} .token-wallet-editor,.token-balance-bottom,.token-contract-block>div:first-child{flex-wrap:wrap} .token-wallet-editor input{flex:1 1 140px} .token-balance-number{min-width:0} .token-management-grid,.my-card-layout{min-width:0} /* Small desktops and landscape tablets need fewer columns before content collides. */ @media(max-width:1500px){ #dashboard-view .top-grid{grid-template-columns:minmax(0,1fr)} #career-global-content .career-overview-top{grid-template-columns:minmax(0,1fr)} #career-global-content .career-account-host{display:block;max-width:none} #career-global-content .career-account-host>.profile{height:auto;min-height:0;width:100%} #career-global-content .career-ranks{grid-template-columns:minmax(190px,.8fr) minmax(0,2.2fr)} #career-global-content .career-top-details{grid-template-rows:auto auto;align-self:start} #career-global-content .career-overview-summary{grid-template-columns:minmax(190px,.8fr) minmax(0,2.2fr)} #career-global-content .career-community-row{grid-template-columns:repeat(2,minmax(0,1fr))} #career-global-content .career-community-row>.career-rule-explanation{grid-column:1/-1;grid-row:5} #new-card-view .new-card-plans{grid-template-columns:repeat(2,minmax(0,1fr))} .memberships-plans{grid-template-columns:repeat(3,minmax(0,1fr))} .billing-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .billing-top-row{grid-template-columns:repeat(2,minmax(0,1fr))} .billing-top-row>.billing-available-card{grid-column:1/-1} .token-management-grid,.my-card-layout{grid-template-columns:minmax(0,1fr)} .token-management-aside,.card-side-panels{grid-template-columns:repeat(2,minmax(0,1fr))} .token-widget-heading{flex-wrap:wrap} .dashboard-layout .profit .pnl-explanation-total{text-wrap:wrap;white-space:normal} } @media(max-width:1399px){ #dashboard-view .dashboard-layout{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto} #dashboard-view .dashboard-layout .panel{grid-column:auto;grid-row:auto} #dashboard-view .dashboard-layout :is(.available,.profit,.total,.calendar){grid-column:1/-1} .dashboard-layout .volume-summary,.dashboard-layout .team-summary{grid-template-rows:auto minmax(104px,1fr) auto auto;min-height:0} .dashboard-layout .volume-summary .team-count-caption,.dashboard-layout .team-summary .team-count-caption{min-height:0} } /* Drawer navigation on tablets as well as phones. JS uses this same breakpoint. */ @media(max-width:1024px){ .workspace{margin-left:0;width:100%} .sidebar{width:min(280px,calc(100vw - 48px));transform:translateX(-100%);visibility:hidden;pointer-events:none;box-shadow:none;padding:24px 14px;z-index:80;transition:transform .2s,visibility .2s} .sidebar.open{transform:translateX(0);visibility:visible;pointer-events:auto;box-shadow:20px 0 80px #0006} .sidebar .brand{padding-right:34px} .sidebar-close{display:grid;place-items:center;position:absolute;right:8px;top:22px;width:44px;height:44px} .mobile-menu{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0} header{height:auto;min-height:80px;display:grid;grid-template-columns:minmax(0,1fr) 44px 44px 40px;gap:10px 8px;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left))} .heading{grid-column:1;grid-row:1;gap:8px;min-width:0}header h1{font-size:16px;line-height:1.3} .header-actions{display:contents}.breadcrumb,.header-actions .demo-badge{display:none} .header-actions .artur-header-button{grid-column:2;grid-row:1;width:44px;height:44px;min-width:44px} .header-actions .icon-btn{display:grid;place-items:center;grid-column:3;grid-row:1;width:44px;height:44px} .header-actions .avatar{grid-column:4;grid-row:1;width:40px;height:40px} .header-actions .telegram-cta{grid-column:1/-1;grid-row:2;justify-self:stretch} main{padding:24px max(16px,env(safe-area-inset-right)) 24px max(16px,env(safe-area-inset-left))} .welcome,.career-page-heading,.card-page-top,.token-page-heading,.notification-page-heading{flex-wrap:wrap;gap:12px} .welcome .text-button{white-space:normal} .settings-layout,.support-layout{grid-template-columns:minmax(0,1fr);gap:20px;min-height:0} .settings-tabs,.support-tabs{display:flex;overflow-x:auto;gap:8px;padding:3px 2px 8px} .settings-tabs button,.support-tabs button{width:auto;flex:0 0 auto;white-space:nowrap;min-height:44px;padding:10px 16px} .settings-tabs button[aria-selected="true"],.support-tabs button[aria-selected="true"]{padding:9px 15px} .support-content{margin-top:0;padding-top:20px} .notification-center{grid-template-columns:minmax(0,1fr);min-height:0} .notification-inbox{border-right:0;border-bottom:1px solid var(--border);padding:0 0 16px} .notification-inbox .notification-list{max-height:290px;overflow:auto} .subscription-steps{grid-template-columns:repeat(2,minmax(0,1fr))} .campus-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .tutorials-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .team-tree-toolbar button{min-height:40px} .team-tree-viewport{min-height:300px;height:60vh;height:60dvh;max-height:680px} :where(input,select,textarea){font-size:16px} .billing-filters input,.billing-filters select,.support-ticket-form input:not([type="file"]),.support-ticket-form select,.support-ticket-form textarea{font-size:16px} } @media(max-width:760px){ #career-global-content .career-ranks,#career-global-content .career-overview-summary{grid-template-columns:minmax(0,1fr)} #career-global-content .career-current-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch} #career-global-content .career-deadline-card{display:flex;align-items:center;justify-content:center} #career-global-content .career-overview-summary .career-overview-metrics{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto} #career-global-content .career-users-compact{display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,.5fr);gap:14px} #career-global-content .career-users-compact .career-team-details{grid-column:1/-1;margin:0;min-height:44px} .career-objective-top{grid-template-columns:minmax(0,1fr) 110px;gap:16px} .career-ranks .career-reward-heading>div{grid-column:1;grid-row:1} .career-ranks .career-reward-heading img{grid-column:2;grid-row:1/3;align-self:center;margin-top:0} .career-ranks .career-objective-levels{grid-column:1;grid-row:2} .career-objective-requirements{grid-column:1/-1;grid-row:3;border-left:0;border-top:1px solid var(--border);padding:16px 0 0} .career-objective-requirements .career-requirement{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px} .career-rule-columns{grid-template-columns:minmax(0,1fr);gap:16px} .career-ranks .career-reward-heading h3{font-size:14px}.career-ranks .career-reward-heading p{font-size:12px} .career-overview-metrics .career-metric.compact h3{font-size:12px} .career-overview-metrics .career-metric.compact{min-height:110px;padding:14px} .career-overview-metrics .career-metric.compact>strong{font-size:20px;overflow-wrap:anywhere} .career-card-caption>span{display:inline!important} .memberships-plans{grid-template-columns:repeat(2,minmax(0,1fr))} .memberships-plans .membership-option:last-child{grid-column:auto;width:auto;justify-self:stretch} .membership-feature-columns{grid-template-columns:minmax(0,1fr);gap:12px} .subscription-plans,.subscription-tutorial{grid-template-columns:minmax(0,1fr)} .campus-access{flex-wrap:wrap;padding:20px}.campus-entry{width:100%} .token-management-aside,.card-side-panels{grid-template-columns:minmax(0,1fr)} .token-widget-heading{flex-direction:column}.token-network-summary{display:flex;flex-wrap:wrap;justify-content:space-between} .token-balance-bottom{gap:12px} .billing-top-row{grid-template-columns:minmax(0,1fr)} .billing-top-row>.panel{min-height:0} .billing-summary-card{min-height:180px} .profile{--account-detail-column:140px} .profile .account-intro,.profile .membership-with-image,.profile .subscription{column-gap:12px} .profile .account-intro>.identity{flex-wrap:wrap;align-content:center} .profile .account-intro .identity strong{font-size:18px} .profile .account-intro .identity .avatar{width:42px;height:42px;font-size:20px;flex-shrink:0} .profile .account-rank-card{height:auto;grid-template-rows:98px auto} .account-rank-countdown{grid-template-rows:auto auto} .rank-achieved-date{white-space:normal} .rank-days-button{height:auto;min-height:44px} .positions>.section-heading{grid-template-columns:minmax(0,1fr);gap:12px} .positions>.section-heading>.hyperliquid,.positions .position-investment,.positions .trading-title{grid-column:1;grid-row:auto;justify-self:start} .positions .position-investment{justify-self:center} .position-summary{gap:16px;justify-content:space-around;flex-wrap:wrap} .position-scroll table{min-width:560px} .panel-foot{flex-wrap:wrap;gap:12px} .dashboard-layout .available .token-row{height:auto;min-height:56px;flex-wrap:wrap;gap:8px} .token-amount{margin-left:auto;overflow-wrap:anywhere} .dashboard-layout .available .available-assets-region{height:auto;min-height:0} .available .network-total{flex-wrap:wrap;gap:8px} .support-copy span{min-width:0;overflow-wrap:anywhere} .support-intro{margin-bottom:24px} } @media(max-width:600px){ #dashboard-view .dashboard-layout{grid-template-columns:minmax(0,1fr);gap:14px} #dashboard-view .dashboard-layout .panel{grid-column:1;grid-row:auto} .panel{padding:18px} .dashboard-layout .volume-summary,.dashboard-layout .team-summary{padding:18px;gap:16px} .dashboard-layout .new-information{min-height:0} #career-global-content .career-community-row{grid-template-columns:minmax(0,1fr)} #career-global-content .career-community-row>.panel{grid-column:1;grid-row:auto;display:flex;flex-direction:column;min-height:0;gap:16px;padding:18px} .career-community-row>.career-team-total .career-card-caption,.career-community-row>.career-direct-total .career-card-caption{min-height:0} #career-global-content .career-current-stack{grid-template-columns:minmax(0,1fr)} #career-global-content .career-deadline-card{display:block} .career-ranks .career-reward-content{grid-template-columns:minmax(0,1fr);gap:18px} .career-ranks .career-cash-reward,.career-ranks .career-token-reward{padding:0;border-left:0} .career-ranks .career-token-reward{border-top:1px solid var(--border);padding-top:18px} .career-rule-intro,.career-rule-clarification,.career-rule-example{font-size:12px} #new-card-view .new-card-plans{grid-template-columns:minmax(0,1fr)} .billing-summary-grid,.campus-grid,.tutorials-grid{grid-template-columns:minmax(0,1fr)} .billing-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} .billing-filters label:first-child{grid-column:1/-1} .billing-filters button{width:100%;padding-inline:8px} .billing-detail-summary{padding:18px;gap:14px} .billing-detail-summary>div>strong{font-size:28px;overflow-wrap:anywhere} .billing-results-heading{align-items:flex-start;flex-direction:column;gap:8px} .billing-ledger-panel{padding:14px} .billing-pagination>div{width:100%;gap:8px;justify-content:space-between} .billing-pagination button{min-height:44px} .subscription-steps{grid-template-columns:minmax(0,1fr)} .subscription-plan{padding:20px} .membership-detail{padding:18px} .membership-detail-actions{flex-direction:column}.membership-detail-actions>*{width:100%;min-width:0} .membership-detail-actions .membership-acquire{min-width:0;width:100%;margin-left:0} .support-layout,.settings-layout{padding:16px} .support-document{gap:10px;padding:14px} .support-document h3{font-size:13px} .support-download{width:44px;height:44px;flex:0 0 44px} .support-submit{width:100%} .settings-session{flex-wrap:wrap}.session-revoke{margin-left:0;min-height:44px} .token-balance-panel,.token-deposit-panel,.token-acquire-panel,.token-stake-widget{padding:18px} .token-balance-bottom{align-items:flex-start} .token-balance-number{font-size:26px} .token-compact-action{min-height:44px} .token-widget-identity{flex-wrap:wrap} .token-amount-input{font-size:30px} .token-widget-heading h3{font-size:20px} .pnl-explanation{grid-template-columns:minmax(0,1fr)} .dashboard-layout .profit .metric-bottom{flex-wrap:wrap;gap:12px} .dashboard-layout .profit .metric-bottom button{width:100%} .section-heading{gap:10px;flex-wrap:wrap} .big-number,.total-number{font-size:32px;overflow-wrap:anywhere} .amount-value{white-space:normal;overflow-wrap:anywhere} .dashboard-layout .bonus .big-number{font-size:30px;white-space:normal} .actions.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .dashboard-layout .available .actions button{min-width:0;min-height:44px;padding:10px 6px;font-size:12px} .team-tree-panel{padding:14px}.team-tree-viewport{min-height:280px} .team-tree-toolbar{gap:10px}.team-tree-toolbar button{min-height:44px} .team-person-review dl>div{flex-wrap:wrap;gap:6px;height:auto} #modal{padding:18px;width:calc(100% - 24px)} .chat{width:calc(100vw - 24px);max-width:none;height:calc(100dvh - 24px)} .chat-top{gap:8px;min-width:0}.chat-top>div{min-width:0} footer{flex-wrap:wrap;gap:8px} } @media(max-width:380px){ header{grid-template-columns:minmax(0,1fr) 40px 40px 36px;gap:8px 4px;padding-inline:12px} header h1{font-size:14px}.heading{gap:4px} .header-actions .artur-header-button,.header-actions .icon-btn{width:40px;height:40px;min-width:40px} .header-actions .avatar{width:36px;height:36px} main{padding-inline:12px}.panel{padding:16px} .profile .account-intro{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;gap:14px} .profile .account-intro>.section-heading{grid-column:1;grid-row:1} .profile .account-intro>.identity{grid-column:1;grid-row:2;flex-wrap:nowrap} .profile .account-rank-card{grid-column:1;grid-row:3;grid-template-columns:90px minmax(0,1fr);grid-template-rows:auto;gap:12px;align-items:center} .profile .account-rank-card .account-rank-emblem{grid-column:1;grid-row:1} .profile .account-rank-card .account-rank-countdown{grid-column:2;grid-row:1} .profile .membership-with-image,.profile .subscription{grid-template-columns:minmax(0,1fr) 110px} .career-objective-top{grid-template-columns:minmax(0,1fr)} .career-ranks .career-reward-heading>div{grid-column:1;grid-row:1} .career-ranks .career-reward-heading img{grid-column:1;grid-row:2;margin:0} .career-ranks .career-objective-levels{grid-column:1;grid-row:3} .career-objective-requirements{grid-column:1;grid-row:4} .career-objective-requirements .career-requirement{grid-template-columns:minmax(0,1fr);gap:4px} .career-objective-requirements .career-requirement strong{text-align:left} .memberships-plans{grid-template-columns:minmax(0,1fr)} #career-global-content .career-overview-summary .career-overview-metrics{grid-template-columns:minmax(0,1fr)} .dashboard-layout #overall-breakdown{grid-template-columns:minmax(0,1fr)} .billing-filters{grid-template-columns:minmax(0,1fr)} .calendar-controls{flex-wrap:wrap;gap:8px}.calendar-grid{gap:2px}.day{min-width:0;padding:4px;font-size:11px} .demo-payment-card{padding:14px}.demo-card-number{font-size:15px;letter-spacing:0} } @media(hover:none),(pointer:coarse){ .profile .account-rank-emblem:hover,.profile .membership-card-image:hover,.career-current-stack .career-rank-art img:hover,.career-ranks .career-reward-heading img:hover{transform:none} .membership-option>img:hover{transform:scale(1) translate(var(--membership-art-x,0%),var(--membership-art-y,0%))} } @media(prefers-reduced-motion:reduce){.sidebar{transition:none}} /* Reference-sized desktop menu and persistent, accessible icon rail on small screens. */ :root{--sidebar-wide:clamp(280px,16.4vw,370px);--sidebar-rail:64px} .sidebar{width:var(--sidebar-wide);padding:30px 20px 20px} .workspace{margin-left:var(--sidebar-wide)} .sidebar .brand{padding:0 40px 30px 12px;gap:18px;min-height:64px} .sidebar .brand img{width:42px;height:44px} #navigation{gap:7px} #navigation>button{font-size:16px;font-weight:600;min-height:52px;padding:12px 16px;gap:18px;border-radius:28px} #navigation button>.nav-label{min-width:0;overflow-wrap:anywhere} #navigation button>:is(.reference-icon,.career-bonus-nav-icon,.career-tree-icon,.r2r-token-nav-icon,.settings-nav-icon,.card-plus-icon){transform:scale(1.2);transform-origin:center;flex-shrink:0} #navigation .nav-submenu button{font-size:15px;min-height:48px;gap:16px;padding:10px 8px} .sidebar-foot{padding:26px 0 max(8px,env(safe-area-inset-bottom));margin-top:auto} .sidebar-toggle{position:absolute;right:15px;top:32px;display:grid;place-items:center;width:36px;height:36px;background:transparent;color:var(--muted);border-radius:8px} .sidebar-toggle:hover{background:var(--raised)} .sidebar-close{display:none} body.sidebar-collapsed .sidebar{width:var(--sidebar-rail);padding:18px 8px 12px} body.sidebar-collapsed .workspace{margin-left:var(--sidebar-rail)} body.sidebar-collapsed .sidebar .brand{padding:0;min-height:38px;justify-content:center} body.sidebar-collapsed .sidebar .brand img{width:30px;height:34px} body.sidebar-collapsed .sidebar :is(.brand>span,.nav-label,.chevron,.ecosystem){display:none} body.sidebar-collapsed #navigation>.nav-submenu{display:none} body.sidebar-collapsed #navigation>button{justify-content:center;min-height:48px;padding:12px 0;gap:0;border-radius:12px} body.sidebar-collapsed .sidebar-toggle{position:static;width:44px;height:40px;order:0;margin:8px auto 12px} body.sidebar-collapsed .sidebar .brand{order:-1} body.sidebar-collapsed .sidebar-foot{padding:18px 0 max(8px,env(safe-area-inset-bottom))} body.sidebar-collapsed .theme-switch{flex-direction:column} body.sidebar-collapsed .theme-switch button{min-height:40px;flex:none} @media(max-width:1024px){ .sidebar,body.sidebar-collapsed .sidebar{width:var(--sidebar-rail);padding:18px 8px 12px;transform:none;visibility:visible;pointer-events:auto;transition:width .2s;box-shadow:none} .workspace,body.sidebar-collapsed .workspace{margin-left:var(--sidebar-rail);width:calc(100% - var(--sidebar-rail))} .sidebar .brand,body.sidebar-collapsed .sidebar .brand{order:-1;padding:0;min-height:38px;justify-content:center} .sidebar .brand img{width:30px;height:34px} .sidebar .brand>span,.sidebar .ecosystem{display:none} .sidebar-toggle,body.sidebar-collapsed .sidebar-toggle{position:static;width:44px;height:40px;order:0;margin:8px auto 12px} .sidebar:not(.open) #navigation .nav-label,.sidebar:not(.open) #navigation .chevron,.sidebar:not(.open) #navigation>.nav-submenu{display:none} .sidebar:not(.open) #navigation>button{justify-content:center;padding:12px 0;gap:0;min-height:48px;border-radius:12px} .sidebar:not(.open) .theme-switch{flex-direction:column}.sidebar:not(.open) .theme-switch button{min-height:40px;flex:none} .sidebar-foot{padding:18px 0 max(8px,env(safe-area-inset-bottom))} .sidebar.open,body.sidebar-collapsed .sidebar.open{width:min(310px,calc(100vw - 24px));padding:22px 16px;box-shadow:20px 0 80px #0006} .sidebar.open .brand{justify-content:flex-start;padding:0 42px 24px 8px;min-height:64px} .sidebar.open .brand>span,.sidebar.open #navigation .nav-label,.sidebar.open #navigation .chevron{display:block} .sidebar.open #navigation>.nav-submenu:not([hidden]){display:block} .sidebar.open #navigation>button{justify-content:flex-start;gap:18px;padding:12px 16px;border-radius:28px} .sidebar.open .sidebar-toggle{position:absolute;right:12px;top:22px;margin:0} .sidebar.open .theme-switch{flex-direction:row} .sidebar.open .theme-switch button{flex:1} .sidebar.open .brand img{width:38px;height:42px} #navigation>button{font-size:16px} header{grid-template-columns:minmax(0,1fr) 40px 40px;gap:10px 6px} .heading{grid-column:1;flex-wrap:wrap} .heading .mobile-menu{display:none} .header-actions .artur-header-button{grid-column:2;min-width:40px;width:40px;height:40px} .header-actions .icon-btn{grid-column:3;min-width:40px;width:40px;height:40px} .header-actions .avatar.small{grid-column:3;grid-row:2;min-width:36px;min-height:36px;width:36px;height:36px} .header-actions .telegram-cta{grid-column:1/3;grid-row:2;min-width:0} .telegram-content{padding:7px 8px}.telegram-content strong{white-space:normal;font-size:12px}.telegram-content>span{font-size:10px} .chat{max-width:calc(100vw - var(--sidebar-rail) - 20px);z-index:90} } /* A phone's usable width now excludes the icon rail. */ @media(max-width:480px){ .profile .account-intro{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;gap:14px} .profile .account-intro>.section-heading{grid-column:1;grid-row:1} .profile .account-intro>.identity{grid-column:1;grid-row:2;flex-wrap:wrap} .profile .account-rank-card{grid-column:1;grid-row:3;display:flex;flex-direction:column;gap:6px;height:auto} .profile .account-rank-countdown{width:100%;max-width:210px} .profile .membership-with-image,.profile .subscription{grid-template-columns:minmax(0,1fr) 100px;gap:10px} .profile .membership-card-image{max-width:100%} .profile :is(#subscription-status,#career-account-subscription-status){width:100px;min-width:0;font-size:12px} .career-objective-top{grid-template-columns:minmax(0,1fr)} .career-ranks .career-reward-heading>div{grid-column:1;grid-row:1} .career-ranks .career-reward-heading img{grid-column:1;grid-row:2;margin:0} .career-ranks .career-objective-levels{grid-column:1;grid-row:3} .career-objective-requirements{grid-column:1;grid-row:4} .career-objective-requirements .career-requirement{grid-template-columns:minmax(0,1fr);gap:4px} .career-objective-requirements .career-requirement strong{text-align:left} .memberships-plans{grid-template-columns:minmax(0,1fr)} #career-global-content .career-overview-summary .career-overview-metrics{grid-template-columns:minmax(0,1fr)} #career-global-content .career-users-compact{grid-template-columns:minmax(0,1fr)} #career-global-content .career-users-compact .career-green-count{width:100%;max-width:none} .dashboard-layout #overall-breakdown{grid-template-columns:minmax(0,1fr)} .profile .copy-field{flex-wrap:wrap;gap:8px}.profile .copy-action{margin-left:auto} .billing-filters{grid-template-columns:minmax(0,1fr)} .trading-toolbar{grid-template-columns:minmax(0,1fr)} .trading-toolbar .strategy-tabs,.trading-toolbar .position-count-summary,.trading-toolbar .strategy-pnl-summary{grid-column:1;grid-row:auto} .strategy-pnl-summary{grid-template-columns:minmax(0,1fr)} .strategy-tabs{flex-wrap:wrap} .actions.three{grid-template-columns:minmax(0,1fr)} .calendar-controls{flex-wrap:wrap;gap:6px}.calendar-grid{gap:2px}.calendar-grid>*{min-width:0;padding:4px 1px;font-size:10px} .campus-banner{aspect-ratio:2/1}.campus-access{padding:16px} .support-document{flex-wrap:wrap;padding:12px}.support-document>div{flex-basis:calc(100% - 54px)}.support-download{margin-left:auto} .token-wallet-editor{flex-direction:column;align-items:stretch}.token-wallet-editor input{flex-basis:auto} .token-amount-input{font-size:26px;flex-wrap:wrap}.token-balance-number{font-size:24px} .subscription-commercial{flex-wrap:wrap;gap:14px} .subscription-points{max-width:100%}.card-plan-heading-assets{flex-wrap:wrap} .demo-card-number{font-size:12px}.demo-payment-card{padding:12px} .big-number,.total-number{font-size:28px} .token-row .token-amount{flex-basis:100%;text-align:right} footer{text-align:center;overflow-wrap:anywhere} } @media(max-width:350px){ :root{--sidebar-rail:56px} .sidebar:not(.open){padding-inline:4px} main,header{padding-inline:10px} .panel{padding:14px} .profile .membership-with-image,.profile .subscription{grid-template-columns:minmax(0,1fr);text-align:center} .profile .subscription :is(#subscription-status,#career-account-subscription-status){grid-column:1;grid-row:3;justify-self:center} .profile .membership-card-image{justify-self:center} .token-trade-actions,.billing-available-card .actions{grid-template-columns:minmax(0,1fr)} } /* Preserve expanded branding after resizing from a collapsed desktop menu. */ @media(max-width:1024px){body.sidebar-collapsed .sidebar.open .brand>span{display:block}} @media(max-width:480px){ .token-amount-input input{max-width:100%} .token-stake-amount{padding:20px 10px} .support-copy{padding:12px;gap:8px} .settings-content>h2{font-size:22px} .card-pagination>div{flex-wrap:wrap} .career-users-compact .career-green-count{overflow-wrap:anywhere} } /* v153 — moderate desktop density, validated with Chrome at 110%. Fixed type sizes; bounded content width instead of browser/page scaling. */ :root{--sidebar-wide:clamp(264px,15vw,340px)} main{max-width:1720px} @media(min-width:1025px){ .sidebar{padding:26px 18px 18px} .sidebar .brand{padding-bottom:24px;gap:14px} .sidebar-toggle{top:28px} #navigation{gap:4px} #navigation>button{min-height:46px;padding:10px 14px;gap:15px;font-size:15px} #navigation .nav-submenu button{min-height:42px;padding:8px;font-size:14px;gap:14px} #navigation button>:is(.reference-icon,.career-bonus-nav-icon,.career-tree-icon,.r2r-token-nav-icon,.settings-nav-icon,.card-plus-icon){transform:scale(1.1)} } /* Let the objective respond to its own width, including a tiled Chrome window. */ .career-ranks>.career-reward-spotlight{container-name:career-objective} .career-objective-requirements .career-requirement{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:14px} .career-objective-requirements .career-requirement strong{max-width:none;min-width:0} .career-ranks .career-cash-reward>p,.career-ranks .career-token-reward p{max-width:38ch;margin-inline:auto} @container career-objective (min-width:601px){ .career-objective-top{grid-template-columns:minmax(140px,.85fr) 128px minmax(0,1.65fr);column-gap:18px;row-gap:20px} .career-objective-requirements{grid-column:3;grid-row:1/3;border-top:0;border-left:1px solid var(--border);padding:0 0 0 16px} } @container career-objective (min-width:431px) and (max-width:600px){ .career-objective-top{grid-template-columns:minmax(0,1fr) 128px;gap:18px} .career-ranks .career-reward-heading img{grid-column:2;grid-row:1/3;margin-top:0;align-self:center} .career-objective-requirements{grid-column:1/-1;grid-row:3;border-left:0;border-top:1px solid var(--border);padding:16px 0 0} } @media(max-width:480px){ .career-objective-requirements .career-requirement{grid-template-columns:minmax(0,1fr);gap:4px} } /* v156 — preserve original text alignment; only the two Vista Global explanations are centered. */ .career-community-row>:is(.career-team-total,.career-direct-total)>.career-card-caption{display:flex;flex-direction:column;justify-content:center;align-items:stretch;align-self:stretch;text-align:center;font-size:12.5px;line-height:1.65;padding:14px 10px;text-wrap:balance} /* v157 — explicit, reversible desktop view on mobile; native pinch zoom is retained. */ .view-mode-bar{display:none;justify-content:flex-end;padding:8px 16px 0} .view-mode-bar button{background:var(--raised);color:var(--text);border:1px solid var(--border);border-radius:20px;padding:9px 14px;font-size:12px;line-height:1.4;min-height:38px} html[data-view-mode="desktop"] .view-mode-bar{display:flex} @media(max-width:1024px){.view-mode-bar{display:flex}} /* v159: decorative tree-card reflections; preserve the 226 × 160 card geometry. */ .team-tree .team-person{--team-spark-color:var(--team-tier);isolation:isolate} .team-tree .team-person[data-team-membership="free"]{--team-spark-color:#bfc9d4} .team-tree .team-person.team-sparkle-active{animation:team-card-glint 1.8s ease-out both} .team-sparkles{position:absolute;top:3px;left:10px;width:0;height:0;pointer-events:none;z-index:3;color:var(--team-spark-color)} .team-sparkles i{position:absolute;display:block;width:var(--spark-size);height:var(--spark-size);opacity:0;filter:drop-shadow(0 0 3px currentColor) drop-shadow(0 0 7px currentColor);animation:team-star-flight 1.45s ease-out var(--spark-delay) both} .team-sparkles i::before{content:"";position:absolute;inset:0;background:#fff8de;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%)} @keyframes team-star-flight{0%{opacity:0;transform:translate(0,0) scale(.25)}15%{opacity:1}45%{opacity:.95}100%{opacity:0;transform:translate(var(--spark-x),var(--spark-y)) scale(.35) rotate(var(--spark-turn))}} @keyframes team-card-glint{0%,100%{box-shadow:none}18%{box-shadow:0 0 8px color-mix(in srgb,var(--team-spark-color) 65%,transparent),0 0 21px color-mix(in srgb,var(--team-spark-color) 25%,transparent)}65%{box-shadow:0 0 7px color-mix(in srgb,var(--team-spark-color) 20%,transparent)}} @media(prefers-reduced-motion:reduce){.team-tree .team-person.team-sparkle-active{animation:none}.team-sparkles{display:none}} /* v161 — use desktop width within the original 163px account introduction. */ .profile .account-intro.account-intro-split{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(82px,1fr) minmax(80px,1fr);grid-template-rows:28px 101px 22px;gap:6px 10px;min-height:0;height:163px;margin-bottom:14px;align-items:center} .profile .account-intro-split>.section-heading{grid-column:1;grid-row:1} .profile .account-intro-split>.identity{grid-column:1;grid-row:2;flex-wrap:nowrap;gap:10px;align-items:center} .profile .account-intro-split .identity .avatar{width:52px;height:52px;flex:0 0 52px;font-size:24px} .profile .account-intro-split .identity strong{font-size:20px;line-height:1.3} .profile .account-intro-split .account-registration{font-size:11px;line-height:1.4;margin:5px 0 0;color:var(--muted)} .profile .account-intro-split .account-registration time{display:block} .profile .account-intro-split .account-rank-card,.profile .account-intro-split .account-countdown-card{grid-row:1/4;min-width:0;width:100%;height:163px;min-height:0;border:0;border-radius:0;background:none;padding:0;box-shadow:none} .profile .account-intro-split .account-rank-card{grid-column:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px} .profile .account-intro-split .rank-card-title{display:block;font-size:11px;line-height:16px} .profile .account-intro-split .account-rank-emblem{width:82px;height:98px;max-width:100%;object-fit:contain;align-self:center} .profile .account-intro-split .account-rank-emblem.rank-membership-image{width:110px;height:98px} .profile .account-intro-split .rank-achieved-date{font-size:10px;line-height:14px;white-space:normal;text-align:center} .profile .account-intro-split .rank-achieved-date time{display:block} .profile .account-intro-split .account-countdown-card{grid-column:3;display:flex;align-items:center;justify-content:center} .profile .account-intro-split .account-rank-countdown{display:block;max-width:none;width:100%;align-self:center} .profile .account-intro-split .rank-days-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;height:auto;min-height:100px;padding:3px;width:100%;text-align:center} .profile .account-intro-split .rank-days-button>strong{font-size:36px;line-height:1.05} .profile .account-intro-split .rank-days-button>span{font-size:11px;line-height:1.4;max-width:140px;text-wrap:balance} .profile .account-intro-split .account-sponsor{grid-column:1;grid-row:3;margin:0;font-size:10px;line-height:1.3;color:var(--muted);overflow-wrap:anywhere} .profile .account-intro-split .account-sponsor span{color:var(--text);font-weight:550} @media(max-width:1199px) and (min-width:481px){ .profile .account-intro.account-intro-split{grid-template-columns:minmax(0,1.4fr) minmax(82px,1fr) minmax(80px,1fr)} } @media(max-width:480px){ .profile .account-intro.account-intro-split{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:24px 52px 150px auto;height:auto;gap:10px 8px} .profile .account-intro-split>.section-heading{grid-column:1/-1;grid-row:1} .profile .account-intro-split>.identity{grid-column:1/-1;grid-row:2} .profile .account-intro-split .account-registration time{display:inline} .profile .account-intro-split .account-rank-card,.profile .account-intro-split .account-countdown-card{grid-row:3;height:150px} .profile .account-intro-split .account-rank-card{grid-column:1} .profile .account-intro-split .account-countdown-card{grid-column:2} .profile .account-intro-split .account-sponsor{grid-column:1/-1;grid-row:4} } /* v164 — header controls share the right edge of the content cards. */ :root{--content-max-width:1720px;--content-right-gutter:36px} main{max-width:var(--content-max-width)} .workspace>header{padding-right:max(var(--content-right-gutter),calc((100% - var(--content-max-width))/2 + var(--content-right-gutter)))} .header-actions .avatar.small{justify-self:end} @media(max-width:1200px){:root{--content-right-gutter:24px}} @media(max-width:1024px){:root{--content-right-gutter:max(16px,env(safe-area-inset-right))}} @media(max-width:380px){:root{--content-right-gutter:12px}} @media(max-width:350px){:root{--content-right-gutter:10px}} /* v165 — membership and annual renewal share the rank/countdown columns. Keep the existing membership row: 78px artwork + 12px vertical padding. */ .profile .membership-with-image{grid-template-columns:minmax(0,1.4fr) minmax(82px,1fr) minmax(80px,1fr);grid-template-rows:78px;column-gap:10px;padding-block:12px;align-items:center;text-align:left} .profile .membership-copy{grid-column:1;grid-row:1;min-width:0} .profile .membership-copy p{font-size:11px;line-height:1.4} .profile .membership-card-image{grid-column:2;grid-row:1;width:110px;height:78px;max-width:100%;justify-self:center;object-fit:contain} .profile .membership-renewal{grid-column:3;grid-row:1;min-width:0;max-width:100%;height:78px;display:flex;align-items:center;justify-content:center;text-align:center} .membership-days-button{background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;height:78px;padding:0 3px;border-radius:8px;color:var(--text)} .membership-days-button>strong{font-size:36px;line-height:1.05;font-weight:650;font-variant-numeric:tabular-nums} .membership-days-button>span{font-size:11px;line-height:1.4;font-weight:400;color:var(--muted);max-width:140px;text-wrap:balance} .membership-days-button.is-urgent>strong{color:var(--red)} .membership-no-renewal{font-size:11px;color:var(--muted);text-wrap:balance} @media(max-width:480px){ .profile .membership-with-image{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:31px 40px;column-gap:8px;row-gap:0} .profile .membership-copy{grid-column:1;grid-row:1;align-self:start;text-align:center} .profile .membership-label{font-size:10px;line-height:11px;display:block} .profile .membership-copy p{font-size:9px;line-height:10px;margin:2px 0 0} .profile .membership-card-image{grid-column:1;grid-row:2;width:64px;height:40px} .profile .membership-renewal{grid-column:2;grid-row:1/3;height:71px} .membership-days-button{height:71px;gap:2px} .membership-days-button>strong{font-size:30px} .membership-days-button>span{font-size:10px;line-height:1.2} } @media(max-width:350px){ .profile .membership-with-image{grid-template-rows:50px 84px} .profile .membership-copy{align-self:center} .profile .membership-label{font-size:11px;line-height:14px} .profile .membership-copy p{font-size:10px;line-height:12px} .profile .membership-card-image{width:100%;height:70px} .profile .membership-renewal,.membership-days-button{height:134px} } /* v166 — monthly subscription renewal, aligned with rank and membership. The existing desktop subscription row remains 73px plus its two borders. */ .profile .subscription{grid-template-columns:minmax(0,1.4fr) minmax(82px,1fr) minmax(80px,1fr);grid-template-rows:73px;column-gap:10px;row-gap:0;padding:0;align-items:center;text-align:left} .profile .subscription-copy{grid-column:1;grid-row:1;min-width:0} .profile .subscription-label{font-size:14px;font-weight:550} .profile .subscription :is(#subscription-date,#career-account-subscription-date){margin:5px 0 0;font-size:11px;line-height:1.4} .profile .subscription :is(#subscription-status,#career-account-subscription-status){grid-column:2;grid-row:1;justify-self:center;width:110px;min-width:0;max-width:100%;padding-inline:4px} .profile .subscription-renewal{grid-column:3;grid-row:1;min-width:0;height:73px;display:flex;align-items:center;justify-content:center;text-align:center} .subscription-days-button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:73px;padding:0 3px;background:none;color:var(--text);gap:2px;border-radius:8px} .subscription-days-button>strong{font-size:36px;line-height:1.05;font-weight:650;font-variant-numeric:tabular-nums} .subscription-days-button>span{font-size:10px;line-height:1.1;color:var(--muted);font-weight:400;max-width:140px;text-wrap:balance} .subscription-days-button.is-due>strong{color:var(--red)} .subscription-no-renewal{font-size:11px;line-height:1.3;color:var(--muted);text-wrap:balance} @media(max-width:480px){ .profile .subscription{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:52px 43px;column-gap:8px} .profile .subscription-copy{grid-column:1;grid-row:1;text-align:center} .profile .subscription-label{font-size:11px;line-height:14px} .profile .subscription :is(#subscription-date,#career-account-subscription-date){font-size:10px;line-height:12px;margin:3px 0 0} .profile .subscription :is(#subscription-status,#career-account-subscription-status){grid-column:1;grid-row:2;width:100px;font-size:12px} .profile .subscription-renewal{grid-column:2;grid-row:1/3;height:95px} .subscription-days-button{height:95px} .subscription-days-button>strong{font-size:30px} .subscription-days-button>span{font-size:10px;line-height:1.2} } @media(max-width:350px){ .profile .subscription{grid-template-rows:68px 68px} .profile .subscription-renewal,.subscription-days-button{height:136px} .profile .subscription :is(#subscription-status,#career-account-subscription-status){font-size:11px;padding-inline:2px} } .profile .subscription-renewal{container-type:inline-size} @container(min-width:125px){.subscription-days-button>span{font-size:11px;line-height:1.2}} /* v167 — all career rank scenarios, without changing the account card geometry. */ .scenario-tabs{display:flex;gap:8px;margin-bottom:18px;border-bottom:1px solid var(--border);padding-bottom:10px} .scenario-tabs button{flex:1;padding:10px 16px;border-radius:10px;background:var(--raised);color:var(--muted);border:1px solid var(--border)} .scenario-tabs button[aria-selected="true"]{color:var(--text);border-color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,var(--raised))} .scenario-rank-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0} .scenario-rank-options button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-width:0;padding:10px 6px;border:1px solid var(--border);background:var(--raised);color:var(--text);border-radius:12px;line-height:1.25;font-size:12px} .scenario-rank-options button[aria-pressed="true"]{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);background:color-mix(in srgb,var(--gold) 12%,var(--raised))} .scenario-rank-options img{width:52px;height:62px;object-fit:contain} #scenario-general[hidden],#scenario-ranks[hidden]{display:none} #apply-scenario{margin-top:12px} .career-diamond-requirement small{display:block;font-size:10px;line-height:1.3;font-weight:400;color:var(--muted);margin-top:3px} .career-rank-official .career-current-heading{flex-wrap:wrap;row-gap:3px} .career-ranks .career-reward-heading h4{overflow-wrap:normal;text-wrap:balance} .profile .rank-long-name #account-rank-name,.profile .rank-long-name #career-account-account-rank-name{font-size:10px;line-height:12px;text-wrap:balance} .career-crown{display:flex;flex-direction:column;justify-content:center;gap:16px} .career-crown>h3{font-size:15px;margin:0} .career-crown-message{display:grid;grid-template-columns:135px minmax(0,1fr);gap:22px;align-items:center} .career-crown-art{text-align:center;min-width:0} .career-crown-emblem{width:128px;height:153px;object-fit:contain;max-width:100%;transition:transform .25s,filter .25s} .career-crown-emblem:hover{transform:scale(1.12);filter:drop-shadow(0 0 14px #e8c77d70)} .career-crown-copy{min-width:0} .career-crown-eyebrow{font-size:11px;color:var(--gold);letter-spacing:.08em;margin:0 0 10px} .career-crown-copy h4{font-size:clamp(19px,1.65vw,29px);line-height:1.2;color:var(--gold);margin:0 0 14px;text-wrap:balance} .career-crown-copy .career-crown-objective{font-size:clamp(16px,1.2vw,21px);line-height:1.4;font-weight:600;color:var(--text);margin:0 0 14px;text-wrap:balance} .career-crown-copy>p:last-child{font-size:12px;line-height:1.6;color:var(--muted);margin:0} .career-crown-open{align-self:flex-end;font-size:12px} .career-crown-message.expanded{grid-template-columns:130px minmax(0,1fr);gap:20px} .career-crown-artur{display:block;width:130px;max-width:100%;height:auto;border-radius:14px;margin-bottom:12px} .career-crown-message.expanded .career-crown-emblem{width:90px;height:108px} @container career-objective (max-width:550px){.career-crown-message{grid-template-columns:1fr;gap:14px}.career-crown-art{display:flex;justify-content:center}.career-crown-copy{text-align:center}.career-crown-open{align-self:center}} @media(max-width:480px){.scenario-rank-options{grid-template-columns:repeat(2,minmax(0,1fr))}.career-crown-message.expanded{grid-template-columns:1fr}.career-crown-message.expanded .career-crown-art{display:flex;align-items:center;justify-content:center;gap:16px}.career-crown-artur{width:100px;margin:0}.career-crown-message.expanded .career-crown-copy{text-align:center}} @media(prefers-reduced-motion:reduce){.career-crown-emblem{transition:none}} .career-team-points[data-large-volume="true"] .career-green-count{font-size:26px;letter-spacing:-.6px;gap:4px} .career-team-points[data-large-volume="true"] .career-green-count small{font-size:9px} @media(min-width:521px) and (max-width:1000px){.career-team-points[data-large-volume="true"] .career-green-count{font-size:22px}} /* v168 — rank congratulations: official emblems, finite celebration, no Artur portrait. */ #modal.rank-celebration-dialog{width:650px;border-color:#b79a54} .rank-celebration{position:relative;isolation:isolate} .rank-celebration-brand{display:flex;align-items:center;justify-content:center;gap:12px;margin:4px 0 24px;color:var(--gold);font-size:13px;letter-spacing:.05em} .rank-celebration-brand img{width:44px;height:44px;object-fit:contain} .rank-celebration .expanded{grid-template-columns:160px minmax(0,1fr);gap:26px} .career-crown-message.expanded .career-crown-emblem{width:150px;height:180px} .career-crown-emblem:is(:hover,:focus-visible,:active){transform:scale(1.12);filter:drop-shadow(0 0 18px #e8c77da0)} .career-crown-emblem:focus-visible{outline:2px solid var(--gold);outline-offset:8px;border-radius:8px} .rank-celebration .career-crown-copy h4{font-size:26px} .rank-celebration .career-crown-copy .rank-team-encouragement{margin-top:12px;color:var(--gold);font-size:12px;line-height:1.6} .rank-celebration>.primary{margin-top:25px;white-space:normal;line-height:1.4} .rank-celebration-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;border-radius:12px} /* Decorative canvas: six colorful palm bursts, finite and motion-preference aware. */ @media(max-width:600px){.rank-celebration .expanded{grid-template-columns:1fr;gap:18px}.rank-celebration .career-crown-art{display:flex;justify-content:center}.rank-celebration .career-crown-copy{text-align:center}.rank-celebration .career-crown-copy h4{font-size:23px}.rank-celebration-brand{margin-bottom:14px}.rank-celebration .career-crown-emblem{width:140px;height:168px}} @media(prefers-reduced-motion:reduce){.rank-celebration-confetti{display:none}.career-crown-emblem:is(:hover,:focus-visible,:active){transform:none}} /* v170 — replay belongs to the current rank; both rewards share centered rows. */ .career-current-achievement>.rank-celebration-replay{display:block;flex:none;max-width:100%;margin:auto auto 0;padding:6px 9px;min-height:27px;font-size:10px;line-height:1.35;white-space:normal;color:var(--gold)} .career-ranks .career-reward-content{align-items:center;padding:12px 0} .career-ranks .career-cash-reward,.career-ranks .career-token-reward>div{display:grid;grid-template-rows:minmax(34px,auto) auto minmax(30px,auto);align-content:center} .career-ranks .career-cash-reward>p,.career-ranks .career-token-reward p{align-self:start} .rank-palm-fireworks{display:block;width:100%;height:100%} /* v173 — readable first-login welcome, scoped so other dialogs retain their size. */ #modal.welcome-dialog{width:min(1120px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);padding:24px 28px;border-color:#89784e;overflow:auto} .welcome-dialog .modal-top{margin-bottom:16px} .welcome-dialog .modal-top h2{font-size:21px} .r2r-welcome{font-size:14px;line-height:1.55} .welcome-hero{display:flex;gap:20px;align-items:center;margin-bottom:12px} .welcome-hero>img{width:66px;height:66px;object-fit:contain;flex:none} .welcome-hero .welcome-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:var(--gold);margin:0 0 4px} .welcome-hero h3{font-size:clamp(23px,2.6vw,32px);line-height:1.18;letter-spacing:-.5px;color:var(--gold);margin:0 0 5px} .welcome-hero p{margin:0} .welcome-intro{margin:0 0 18px;color:var(--muted);max-width:100ch} .welcome-intro strong{color:var(--text);font-weight:600} .welcome-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .welcome-info{padding:17px 19px;border:1px solid var(--border);border-radius:13px;background:var(--raised);min-width:0} .welcome-info h4{display:flex;align-items:center;gap:9px;font-size:16px;line-height:1.3;margin:0 0 10px} .welcome-info h4>span{font-size:11px;color:var(--gold);border:1px solid #dfbd7340;border-radius:50%;width:25px;height:25px;display:grid;place-items:center;flex:none} .welcome-info p{margin:0 0 9px;font-size:13px;line-height:1.55;color:var(--muted)} .welcome-info p:last-child{margin-bottom:0} .welcome-info strong{color:var(--text);font-weight:600} .welcome-risk{border-top:2px solid #df7777} .welcome-security{border-top:2px solid var(--green)} .welcome-news{border-top:2px solid #b59659} .welcome-learning{border-top:2px solid #699dcc} .welcome-info .welcome-security-emphasis{color:var(--green);font-weight:550} .welcome-info .welcome-signoff{color:var(--gold)} .welcome-confirmation{margin-top:17px;border-top:1px solid var(--border);padding-top:15px} .welcome-checks{display:grid;gap:10px;margin-bottom:16px} .welcome-checks label{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.45;cursor:pointer} #modal-content .welcome-checks input[type=checkbox]{width:19px;min-width:19px;max-width:19px;height:19px;flex:0 0 19px;margin:1px 0 0;padding:0;accent-color:var(--gold)} .welcome-checks label>span{flex:1;min-width:0} .welcome-actions{display:flex;gap:12px;justify-content:flex-end} .welcome-actions button{min-height:42px;font-size:14px;white-space:normal} @media(min-width:1500px) and (min-height:950px){.r2r-welcome{font-size:16px}.welcome-info p,.welcome-checks label{font-size:15px}.welcome-info{padding:22px}.welcome-info h4{font-size:18px}} @media(max-width:680px){#modal.welcome-dialog{width:calc(100vw - 20px);max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:18px 16px}.welcome-hero{gap:12px;align-items:flex-start}.welcome-hero>img{width:44px;height:44px}.welcome-hero h3{font-size:23px}.welcome-info-grid{grid-template-columns:minmax(0,1fr)}.welcome-info{padding:16px}.welcome-info p{font-size:14px}.welcome-intro{font-size:14px}.welcome-actions{display:grid;grid-template-columns:1fr}.welcome-actions button{width:100%;min-height:44px}.welcome-checks label{font-size:14px}.welcome-dialog .modal-top h2{font-size:19px}} #welcome-heading:focus{outline:none} /* v174 — permanent, quiet access to the shared welcome notice. */ .welcome-greeting-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px} .welcome-notice-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;max-width:100%;min-height:36px;padding:7px 11px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:12px;line-height:1.4;text-align:left;cursor:pointer} .welcome-notice-button svg{flex:none} .welcome-notice-button:hover{color:var(--text);border-color:var(--gold)} .welcome-notice-button:focus-visible{outline:2px solid var(--gold);outline-offset:3px} @media(max-width:680px){.welcome-greeting-row{gap:10px}.welcome-notice-button{min-height:44px}}