:root{--bg:#09090b;--card:#141417;--line:#242429;--text:#f4f4f5;--muted:#8b8b94;--red:#e5322b;--red2:#8e1610;--ok:#3bd16f;--warn:#f4b942;--bad:#ff6259}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font:15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
button,input,select{font:inherit}
button{-webkit-tap-highlight-color:transparent}
.app{height:100dvh;max-width:460px;margin:auto;display:flex;flex-direction:column;background:radial-gradient(100% 55% at 50% 0,#171015 0,#0b0b0e 60%,#09090b 100%)}
.top{height:52px;flex:none;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid #151519}
.brand{font-weight:850;letter-spacing:.16em}.brand span{color:var(--muted);font-weight:600;margin-left:6px}
.content{flex:1;min-height:0;overflow:auto;padding:14px 16px 18px}.view{display:none}.view.on{display:block}
.card{background:linear-gradient(180deg,#17171b,#101012);border:1px solid var(--line);border-radius:18px;padding:16px}
.hero{padding:18px;background:radial-gradient(90% 90% at 100% 100%,rgba(229,50,43,.27),transparent 60%),linear-gradient(180deg,#18181b,#101012)}
.title{font-weight:700}.muted{color:var(--muted);font-size:13px}.big{font-size:25px;font-weight:850}
.status{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;background:#111116;border:1px solid #292931;font-size:12px;font-weight:700}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.bad{background:var(--bad)}
.section{margin-top:16px}.section h3{margin:0 0 8px;font-size:12px;color:#6f6f78;letter-spacing:.12em;text-transform:uppercase}
.btn{width:100%;border:0;border-radius:14px;padding:14px 16px;color:#fff;background:linear-gradient(180deg,var(--red),var(--red2));font-weight:750;cursor:pointer}
.btn.secondary{background:#17171b;border:1px solid #292930;color:#e7e7ea}.btn:disabled{opacity:.45;cursor:default}
.tabs{flex:none;display:flex;gap:5px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));border-top:1px solid #17171c;background:#0c0c0f}
.tab{flex:1;border:0;background:transparent;color:#71717a;border-radius:12px;padding:9px 4px;font-size:11px;font-weight:750}.tab.on{background:linear-gradient(180deg,var(--red),var(--red2));color:#fff}
.metric{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.metric .card{padding:13px}.metric b{display:block;font-size:18px}
.linkbox{display:flex;gap:8px;align-items:center}.linkbox code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#b9b9c2}
.smallbtn{border:1px solid #2a2a31;background:#17171b;color:#fff;border-radius:10px;padding:8px 10px}.smallbtn:disabled{opacity:.45}
.list{background:#111114;border:1px solid var(--line);border-radius:16px;padding:0 14px}.payment{padding:12px 0;border-bottom:1px solid #222228}.payment:last-child{border-bottom:0}
.paytop{display:flex;justify-content:space-between;gap:12px}.price{font-weight:800}
.empty{padding:18px;color:var(--muted);text-align:center;border:1px dashed #2b2b31;border-radius:14px}.error{color:#ff8b84;font-size:13px;margin-top:8px}
.profile{display:flex;align-items:center;gap:12px}.avatar{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(150deg,var(--red),var(--red2));font-weight:850;font-size:20px}
.notice{padding:12px;border-radius:12px;background:#17171b;border:1px solid #292930;color:#c8c8cf;font-size:13px}.spinner{opacity:.75}
.kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;margin-top:10px}.kv .v{font-weight:750;text-align:right;word-break:break-all}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.actions .smallbtn{padding:10px}
.payment-state{display:flex;align-items:center;justify-content:space-between;gap:10px}.payment-state .status{flex:none}.inline-note{margin-top:9px}.latest{cursor:pointer}
.banner{display:none;margin-bottom:12px}.banner.on{display:block}.banner .smallbtn{margin-top:9px}
.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.guide{padding:13px}.guide .smallbtn{width:100%;margin-top:10px}
.ref-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.balance-row{padding:10px 0;border-bottom:1px solid #222228}.balance-row:last-child{border:0}
.ref-balance-amount{font-size:31px;font-weight:850;letter-spacing:-.02em;margin:3px 0 5px}.ref-balance-copy{margin-bottom:10px}
.ref-how{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:#9b9ba5;padding:4px 0 12px;font-size:12px}.ref-how .q{width:19px;height:19px;border:1px solid #4a4a52;border-radius:50%;display:grid;place-items:center;font-weight:800}
.ref-minimum{text-align:center;margin-top:8px}.modal-copy{color:#b8b8c1;font-size:14px}.modal-copy p{margin:0 0 10px}.modal-copy p:last-child{margin-bottom:0}.payout-history-title{margin-top:16px;font-weight:700}.ref-card-note{margin-top:12px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:flex-end;justify-content:center;z-index:20}.modal.on{display:flex}
.sheet{width:100%;max-width:460px;max-height:88dvh;overflow:auto;background:#101012;border:1px solid #292930;border-radius:22px 22px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
.sheethead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.sheethead h2{margin:0;font-size:20px}.close{border:0;background:#1c1c21;color:#fff;width:34px;height:34px;border-radius:10px}
.modal.center{align-items:center;padding:18px}.modal.center .sheet{border-radius:20px;max-width:390px;padding:18px;max-height:80dvh}
.field{margin:14px 0}.field label{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}.field input,.field select{width:100%;background:#0d0d10;border:1px solid #292930;color:#fff;border-radius:12px;padding:12px}
#buyModal{align-items:stretch;background:#09090b}
#buyModal .sheet{height:100dvh;max-height:none;max-width:460px;border:0;border-radius:0;padding:0;background:radial-gradient(90% 45% at 100% 0,rgba(117,21,24,.22),transparent 52%),#09090b;overflow-y:auto;overflow-x:hidden}
.checkout-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:12px;padding:14px 16px;background:rgba(9,9,11,.95);backdrop-filter:blur(14px);border-bottom:1px solid #17171c}
.checkout-back{border:0;background:transparent;color:#fff;font-size:30px;line-height:1;padding:2px 8px 2px 0}.checkout-title{font-size:20px;font-weight:850}
.checkout-body{padding:18px 16px calc(22px + env(safe-area-inset-bottom))}.checkout-body>h1{font-size:28px;line-height:1.1;margin:4px 0 18px}
.checkout-card{background:linear-gradient(180deg,#14161a,#0f1013);border:1px solid #262a31;border-radius:20px;padding:14px;margin-bottom:14px}
.checkout-card h3{font-size:18px;margin:0 0 12px;color:#c6cad4}
.option-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.option-card{position:relative;min-width:0;border:1px solid #2c3038;background:#111318;color:#fff;border-radius:15px;padding:11px 4px;min-height:84px;text-align:center}
.option-card.sel{border-color:#ff3d43;box-shadow:0 0 0 1px #ff3d43 inset;background:linear-gradient(145deg,rgba(229,50,43,.28),#131419 72%)}
.option-card:disabled{opacity:.38}.option-main{font-size:19px;font-weight:850;line-height:1.15}.option-sub{font-size:11px;color:#b2b5bd;margin-top:5px;line-height:1.2}.option-price{font-size:11px;font-weight:750;margin-top:5px;white-space:nowrap}
.discount{display:inline-block;margin-top:5px;padding:2px 7px;border-radius:999px;background:#bd2929;color:#fff;font-size:11px;font-weight:800}
.pay-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pay-card{min-width:0;border:1px solid #2b2f36;background:#111318;color:#fff;border-radius:16px;padding:11px 5px;text-align:center;min-height:126px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;padding-top:14px}
.pay-card.sel{border-color:#ff3d43;box-shadow:0 0 0 1px #ff3d43 inset;background:linear-gradient(145deg,rgba(229,50,43,.2),#111318 70%)}.pay-card:disabled{opacity:.38}
.pay-icon{width:52px;height:52px;min-width:52px;min-height:52px;flex:0 0 52px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:28px;overflow:hidden}
.pay-icon.stars{background:#ffcb2f;color:#fff}.pay-icon.crypto{background:#35aee2;color:#fff;font-size:22px}.pay-icon.now{background:#24262a}
.pay-icon.now img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.pay-name{font-size:14px;font-weight:800;line-height:1.15;min-height:32px;display:flex;align-items:flex-start;justify-content:center;white-space:normal;overflow:visible;text-overflow:clip;max-width:100%}.pay-note{font-size:11px;color:#979ba4}
.checkout-summary{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:end;background:#111318;border:1px solid #282c33;border-radius:18px;padding:14px;margin:14px 0}
.summary-label{font-size:12px;color:#a9adb6}.summary-total{font-size:26px;font-weight:900}.summary-saving{font-size:13px;color:#55dd7c;font-weight:800;text-align:right}
.checkout-pay{position:sticky;bottom:0;padding-top:8px;background:linear-gradient(180deg,rgba(9,9,11,0),#09090b 25%)}.checkout-pay .btn{font-size:17px;padding:15px}
#paymentResult.checkout-result{margin:14px 0 0}
@media(max-width:370px){.checkout-body{padding-left:12px;padding-right:12px}.option-grid{gap:6px}.option-card{padding:10px 2px}.option-main{font-size:17px}.option-price{font-size:10px}.pay-grid{gap:6px}.pay-card{padding:9px 3px;padding-top:12px}.pay-name{font-size:12px}}
.pay-icon.crypto{font-size:0!important;color:transparent!important;background:#35aee2 url('cryptobot-logo.png') center/cover no-repeat!important}

/* Give the home cards more vertical room without changing the other views. */
.view[data-view="home"] > .hero{padding-top:26px;padding-bottom:26px}
.view[data-view="home"] .metric{margin-top:20px}
.view[data-view="home"] .metric .card{padding-top:20px;padding-bottom:20px}
.view[data-view="home"] > .section{margin-top:22px}
.view[data-view="home"] .section h3{margin-bottom:12px}
.view[data-view="home"] .section.card,
.view[data-view="home"] .section > .card{padding-top:22px;padding-bottom:22px}
.view[data-view="home"] .btn{min-height:56px;padding-top:18px;padding-bottom:18px}

/* Connection design approved by the owner on 2026-10-10. */

    #connectionPanel {
      --orin-bg: #0c0b0d;
      --orin-panel: #18171a;
      --orin-field: #111013;
      --orin-line: #29262c;
      --orin-text: #f6f3f5;
      --orin-muted: #a8a0aa;
      --orin-red: #ed3029;
      --orin-red-deep: #aa1819;
      --orin-red-soft: #352024;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 14px; line-height: 1.5;}
    #connectionPanel * { box-sizing: border-box; }
    #connectionPanel [hidden] { display: none !important; }
    #connectionPanel button, #connectionPanel a { font-family: inherit; }
    #connectionPanel button { font-size: inherit; }
    #connectionPanel .orin-title { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -.5px; }
    #connectionPanel .orin-subtitle { margin: 8px 0 20px; color: var(--orin-muted); font-size: 13px; }
    #connectionPanel .orin-platforms {
      display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px;
      padding: 5px; background: var(--orin-field); border: 1px solid var(--orin-line);
      border-radius: 12px; margin-bottom: 20px;
    }
    #connectionPanel .orin-platform {
      min-height: 40px; border: 0; border-radius: 8px; padding: 6px 2px;
      color: var(--orin-muted); background: transparent; font-size: 12px;
    }
    #connectionPanel .orin-platform[aria-pressed="true"] {
      color: var(--orin-text); background: var(--orin-red-soft);
      box-shadow: inset 0 0 0 1px #9c353a;
    }
    #connectionPanel .orin-steps { display: flex; flex-direction: column; gap: 12px; }
    #connectionPanel .orin-step {
      background: var(--orin-panel); border: 1px solid var(--orin-line); border-radius: 15px; padding: 16px;
    }
    #connectionPanel .orin-step-heading { display: flex; align-items: center; gap: 10px; }
    #connectionPanel .orin-number {
      display: flex; justify-content: center; align-items: center; flex: 0 0 28px;
      height: 28px; border-radius: 9px; background: var(--orin-red-soft); color: #ff7770; font-size: 13px;
    }
    #connectionPanel .orin-step h3 { margin: 0; font-size: 15px; font-weight: 500; }
    #connectionPanel .orin-step p { margin: 10px 0 0; color: var(--orin-muted); font-size: 13px; }
    #connectionPanel .orin-action {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%; min-height: 43px; margin-top: 14px; padding: 10px 12px;
      border: 1px solid var(--orin-line); border-radius: 10px;
      background: var(--orin-field); color: var(--orin-text); font-weight: 500;
      text-decoration: none; font-size: 13px;
    }
    #connectionPanel .orin-action-primary {
      background: linear-gradient(180deg, var(--orin-red), var(--orin-red-deep));
      border-color: transparent;
    }
    #connectionPanel .orin-action:disabled {
      color: #8b818c; background: #222025; border-color: #302c32;
    }
    #connectionPanel .orin-action svg { width: 16px; height: 16px; }
    #connectionPanel .orin-small {
      font-size: 12px; color: var(--orin-muted); margin: 8px 0 0; text-align: center;
    }
    #connectionPanel .orin-support {
      display: flex; justify-content: center; align-items: center; gap: 7px;
      margin: 20px auto 0; padding: 5px 0; border: 0; color: var(--orin-muted);
      background: transparent; font-size: 12px;
    }
    #connectionPanel .orin-support svg { width: 15px; height: 15px; }
    #connectionPanel .orin-back {
      display: flex; align-items: center; gap: 5px; padding: 0 0 12px;
      border: 0; background: transparent; color: var(--orin-muted); font-size: 12px;
    }
    #connectionPanel .orin-back svg { width: 14px; height: 14px; }
    #connectionPanel .orin-status {
      padding: 13px 14px; border-radius: 12px; border: 1px solid var(--orin-line);
      background: var(--orin-panel); color: var(--orin-muted); font-size: 13px;
      margin: 16px 0 20px;
    }
    #connectionPanel .orin-caption {
      margin: 22px 0 10px; font-size: 11px; font-weight: 500; letter-spacing: 1.4px; color: var(--orin-muted);
    }
    #connectionPanel .orin-device-grid {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
    }
    #connectionPanel .orin-device {
      min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
      padding: 16px 14px; background: var(--orin-panel); border: 1px solid var(--orin-line);
      border-radius: 14px; color: var(--orin-text); text-align: left; min-height: 141px;
    }
    #connectionPanel .orin-device svg { color: var(--orin-muted); width: 22px; height: 22px; margin-bottom: 3px; }
    #connectionPanel .orin-device strong { font-weight: 500; font-size: 15px; }
    #connectionPanel .orin-device span { font-size: 12px; color: var(--orin-muted); }
    #connectionPanel .orin-device .orin-device-link { color: #ff7770; margin-top: 3px; }
    #connectionPanel .orin-help-note {
      padding: 12px 14px; border: 1px solid var(--orin-line); border-radius: 11px;
      background: var(--orin-field); color: var(--orin-muted); font-size: 13px; margin-top: 12px;
    }
#connectionPanel .orin-import-help{margin-top:12px;font-size:12px;color:var(--orin-muted)}
#connectionPanel .orin-import-help summary{padding:4px 0;cursor:pointer}
#connectionPanel .orin-import-help p{font-size:12px}
@media(max-width:380px){#connectionPanel .orin-step{padding:14px}#connectionPanel .orin-title{font-size:22px}#connectionPanel .orin-platform{font-size:11px}}
@media(pointer:coarse){#connectionPanel .orin-platform,#connectionPanel .orin-back,#connectionPanel .orin-support,#connectionPanel .orin-action,#connectionPanel .orin-import-help summary{min-height:44px}}

/* Approved subscription status and separate upgrade checkout. */
.change-tariff-control{position:relative;margin-top:12px}
.change-tariff-control .btn:disabled{background:#29292e;color:#85858f;opacity:1;box-shadow:none}
.change-tariff-help{position:absolute;right:8px;top:5px;width:20px;height:20px;border:1px solid #85858f;border-radius:50%;background:transparent;color:#bbb;font-size:12px;cursor:pointer}
.change-tariff-help[hidden],.change-tariff-hint[hidden]{display:none}
.change-tariff-hint{position:absolute;right:0;bottom:calc(100% + 8px);max-width:270px;padding:12px;border:1px solid #34343a;border-radius:12px;background:#202025;color:#ddd;font-size:13px;box-shadow:0 8px 24px #0008;z-index:2}
#checkoutSubscriptionExpiry{margin-top:-10px;margin-bottom:20px;font-variant-numeric:tabular-nums}
.option-card:disabled{opacity:.35;cursor:default}
.option-card.current-term{grid-column:1/-1}
.option-card.upgrade-comparison{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:6px 12px;align-items:baseline;padding:14px;min-height:0;text-align:left;background:#111318;box-shadow:none;line-height:1.4;font-family:inherit;font-size:13px;font-weight:400}
.option-card.upgrade-comparison.sel{border-color:#454951;background:#111318;box-shadow:none}
.upgrade-comparison:focus-visible{outline:2px solid #ff3d43;outline-offset:2px}
.upgrade-comparison>span{min-width:0;text-align:left}
.comparison-before{grid-column:1}.comparison-after{grid-column:3}
.comparison-label{grid-row:1;color:#9299a5;font-size:11px;font-weight:500}
.comparison-term{grid-row:2}.comparison-date{grid-row:3;color:#9299a5;font-size:11px}
.comparison-devices{grid-row:4;padding-top:3px}.comparison-price{grid-row:5;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.comparison-arrow{grid-column:2;grid-row:1/6;align-self:center;width:20px;height:20px;color:#ff3d43}
@media(max-width:370px){.option-card.upgrade-comparison{padding:12px 10px;column-gap:8px;font-size:12px}.comparison-label,.comparison-date{font-size:10px}}

/* Referral profile and its withdrawal page share the Mini App's navigation. */
.ref-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ref-icon { width: 1.35em; height: 1.35em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ref-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.app:is([data-page="profile"],[data-page="withdraw"],[data-page="promo"]) {
  background: radial-gradient(90% 32% at 75% 0%, #230e14 0%, transparent 85%), #0a090c;
}
.app[data-page="profile"] .top { height: 27px; padding: 0 clamp(12px, 4vw, 18px); border: 0; }
.app:is([data-page="withdraw"],[data-page="promo"]) .top { display: none; }
.app[data-page="profile"] .content { display: flex; flex-direction: column; padding: 0 clamp(12px, 4vw, 18px) 8px; }
.view[data-view="profile"].on { display: grid; flex: 1 0 auto; }
.app[data-page="withdraw"] .content { padding: 10px 5.8% 30px; }
.app:is([data-page="profile"],[data-page="withdraw"],[data-page="promo"]) .tabs { padding: 8px 12px calc(14px + env(safe-area-inset-bottom)); background: #0e0c10; }
.app:is([data-page="profile"],[data-page="withdraw"],[data-page="promo"]) .tab { font-size: 11px; border-radius: 999px; }
.ref-profile, .ref-withdraw { --ref-muted: #b9b1ba; --ref-border: #332a31; --ref-accent: #ff525a; }
.ref-profile { display: grid; gap: clamp(6px, 1.3vh, 12px); line-height: 1.22; }
.ref-profile small, .ref-withdraw small { display: block; font-size: 10px; color: var(--ref-muted); }
.ref-profile strong { display: block; font-size: 11px; font-weight: 650; }
.ref-card { min-width: 0; padding: 8px 10px; border: 1px solid var(--ref-border); border-radius: 12px; background: linear-gradient(125deg, #20171c, #171317 65%, #181519); }
.ref-identity, .ref-row, .ref-stat, .ref-action button, .ref-share-actions button { display: flex; align-items: center; gap: 9px; }
.ref-identity { width: 100%; text-align: left; color: inherit; padding-block: 5px; }
.ref-identity > .ref-icon { margin-left: auto; width: 11px; color: var(--ref-muted); }
.ref-identity .avatar { width: 30px; height: 30px; flex: none; font-size: 18px; background: linear-gradient(145deg,#f34038,#800810); }
.ref-identity > div:last-child, .ref-row > :nth-child(2), .ref-stat > div { min-width: 0; overflow-wrap: anywhere; }
.ref-identity small { margin-top: 2px; }
.ref-card.ref-hero { position: relative; isolation: isolate; overflow: hidden; padding: 10px 12px; border-color: #642329; background: radial-gradient(75% 120% at 98% 20%,#3a1119 0%,transparent 80%),linear-gradient(155deg,#36171d,#190d12 65%,#210e14); }
.ref-hero::after { position: absolute; z-index: -1; content: ""; bottom: -43%; right: -8%; width: 58%; height: 67%; border-radius: 50%; transform: rotate(-8deg); background: radial-gradient(ellipse at 55% 0%,#b21823,#521015 30%,#200e13 65%); }
.ref-profile .ref-hero, .ref-chart, .ref-share { display: flex; flex-direction: column; justify-content: center; }
.ref-profile .ref-hero { padding-block: 10px; }
.ref-profile .ref-hero .ref-change { display: block; margin-top: 2px; line-height: 1.15; }
.ref-profile .ref-hero .ref-total { line-height: 1.08; }
.ref-hero small, .ref-hero .ref-total, .ref-hero .ref-change { position: relative; z-index: 1; }
.ref-hero .ref-total { display: block; font-size: clamp(27px,8.1vw,37px); letter-spacing: -.025em; line-height: 1.16; font-weight: 750; font-variant-numeric: tabular-nums; max-width: 75%; overflow-wrap: anywhere; }
.ref-change { color: #66e17c; font-size: 9px; font-weight: 550; }
.ref-art { position: absolute; right: 5%; bottom: 0; width: 24%; height: 87%; z-index: -1; }
.ref-art i, .ref-art i::before, .ref-art i::after { position: absolute; display: block; }
.ref-people { bottom: 21%; height: 62%; }
.ref-people i { bottom: 0; width: 43%; height: 65%; }
.ref-people i::before, .ref-people i::after { content: ""; background: radial-gradient(circle at 32% 12%,#ff4246,#bd1b26 65%,#650f17); box-shadow: inset 1px 1px 1px #f75b5b60; }
.ref-people i::before { width: 50%; aspect-ratio: 1; border-radius: 50%; top: -8%; left: 25%; }
.ref-people i::after { border-radius: 65% 65% 6% 6%; bottom: 0; width: 100%; height: 49%; }
.ref-people i:nth-child(2) { right: 0; }
.ref-people i:last-child { left: 20%; width: 58%; height: 100%; }
.ref-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.ref-disc { display: grid; place-items: center; flex: none; width: 25px; height: 25px; border-radius: 50%; color: var(--ref-accent); background: linear-gradient(145deg,#442126,#301419); }
.ref-stat { padding: 5px 8px; gap: 9px; }
.ref-stat small { line-height: 1.1; font-size: 9px; margin-bottom: 2px; }
.ref-stat > div { line-height: 1.1; }
.ref-stat b { font-size: 14px; margin-right: 3px; }
.ref-stat .ref-change { font-size: 8px; white-space: nowrap; }
.ref-action { display: grid; padding: 6px 8px; }
.ref-action button, .ref-share-actions button { justify-content: center; width: 100%; font-size: 11px; font-weight: 650; color: #fff; }
.ref-action button { min-height: 25px; border-radius: 999px; border: 1px solid #822c34; background: linear-gradient(#40191e,#2a1217); }
.ref-action button .ref-icon { color: var(--ref-accent); }
.ref-chart { padding: 7px 12px 5px; background: radial-gradient(90% 60% at 72% 0,#2c131a,transparent 90%),#151115; }
.ref-chart-head, .ref-switch { display: flex; align-items: center; }
.ref-chart-head { justify-content: space-between; gap: 4px; }
.ref-chart h3 { margin: 0; font-size: 12px; }
.ref-chart-head small { font-size: 9px; }
.ref-switch { background: #252024; border-radius: 8px; overflow: hidden; }
.ref-switch button { padding: 5px 9px; font-size: 9px; color: #e8e5e8; border: 0; background: transparent; border-radius: 7px; }
.ref-switch [aria-pressed="true"], .ref-primary { color: #fff; background: linear-gradient(#fa302e,#b00d17); }
#activityGraph { margin-top: 5px; }
#activityGraph svg { width: 100%; height: clamp(51px, 11vh, 90px); display: block; overflow: visible; }
#activityGraph text { fill: #b9b1ba; font: 9px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.ref-share { padding: 8px 10px; }
.ref-share .ref-disc { width: 25px; height: 25px; }
.ref-link { flex: 1; }
.ref-link span { display: block; color: var(--ref-muted); font-size: 10px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-share-actions { display: grid; grid-template-columns: 1fr 1.12fr; gap: 6px; margin-top: 4px; }
.ref-share-actions button { font-size: clamp(8px,2.45vw,11px); gap: 4px; padding: 4px 3px; min-height: clamp(27px, 5vh, 38px); border: 1px solid var(--ref-border); border-radius: 8px; background-color: #1d191e; }
.ref-share-actions button:disabled { opacity: .55; }
.view[data-view="withdraw"].on { min-height: 100%; display: flex; }
.ref-withdraw { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ref-withdraw header { display: flex; gap: 13px; align-items: center; margin: 0 0 clamp(12px,2.4vh,22px); }
.ref-withdraw header button { display: grid; place-items: center; width: 29px; height: 34px; padding: 0; border: none; color: #fff; background: transparent; }
.ref-withdraw h2 { font-size: 17px; margin: 0; }
.ref-withdraw .ref-withdraw-hero { padding: 10px 15px; border-color: #a2282d; }
.ref-withdraw-hero small { font-size: 12px; }
.ref-withdraw-hero::after { z-index: -2; }
.ref-withdraw-hero .ref-total { font-size: 32px; }
.ref-coins { width: 26%; height: 76%; bottom: 0; right: 5%; }
.ref-coins i { bottom: 0; right: 0; width: 55%; height: 90%; border-radius: 50% / 18%; background: repeating-linear-gradient(to bottom,transparent 0 13%,#fd424a 14%,#6f0810 20%,transparent 28%),linear-gradient(90deg,#e52430,#901119 68%,#470a11); }
.ref-coins i::before { content: ""; inset: 0 0 auto; height: 37%; border-radius: 50%; border: 1px solid #ff5a5d; box-shadow: 0 4px 0 #96101a, 0 6px 0 #de242e, 0 10px 0 #8c101a, 0 12px 0 #dd242e; background: linear-gradient(120deg,#fa3c40,#ad1a20 80%); }
.ref-coins i:last-child { left: 0; height: 61%; width: 58%; }
.ref-methods { padding: 0; border: 0; margin: clamp(15px,2.7vh,24px) 0 0; min-width: 0; }
.ref-methods legend { padding: 0; margin-bottom: 8px; font-weight: 650; font-size: 13px; }
.ref-methods label { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--ref-border); border-radius: 13px; font-weight: 650; font-size: 12px; line-height: 1.2; background: #121013; }
.ref-methods input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ref-methods label:has(input:checked) { background: linear-gradient(120deg,#2a1016,#190c10); border-color: #fd323a; box-shadow: inset 0 0 8px #9c101c55; }
.ref-methods label:has(input:focus-visible) { outline: 2px solid #fff; }
.ref-methods label i { border: 1.5px solid #867d87; border-radius: 50%; width: 17px; height: 17px; margin-left: auto; flex: none; }
.ref-methods input:checked ~ i { border: 2px solid #f5323b; background: radial-gradient(circle,#ff2b38 0 43%,transparent 47%); }
.ref-methods small { font-weight: 400; line-height: 1.1; }
.token { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #fff; flex: none; }
.token.gram { background: #009ee9; }.token.usdt { background: #1ca88a; }
.ref-field { display: block; position: relative; }
.ref-field input, .ref-source select { border: 1px solid #443a43; border-radius: 12px; background: #1b181d; color: #f4f2f5; width: 100%; padding: 8px 11px; min-height: 36px; font-size: 13px; }
.ref-field input::placeholder { color: #aaa3ad; }
.ref-field input:focus, .ref-source select:focus { outline: 1px solid #e54850; }
.ref-address-field input { padding-right: 85px; }
.ref-address-field button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 28px; padding: 4px 9px; border: 1px solid #64343c; border-radius: 7px; background: #2b181e; color: #ff8b91; font-size: 11px; cursor: pointer; }
.ref-address-field button:disabled { opacity: .5; cursor: default; }
.ref-methods + .ref-field, .ref-amount-field { margin-top: clamp(16px,5.3vh,46px); }
.ref-amount-field input { padding-right: 46px; }
.ref-suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--ref-muted); pointer-events: none; }
#payoutMinimum { margin: 4px 2px; }
.ref-source { display: grid; gap: 4px; margin-top: 9px; font-size: 12px; }
.ref-source[hidden], #payoutHistory[hidden] { display: none; }
.ref-feedback { color: #d8acb0; font-size: 12px; margin: 2px 2px 12px; }
.ref-submit { width: 100%; border: 0; border-radius: 14px; min-height: 45px; padding: 10px; margin-top: auto; font-weight: 700; font-size: 16px; }
.ref-submit:disabled { cursor: default; background: linear-gradient(#fa302e,#ad1018); }
#payoutHistory { margin-top: 12px; font-size: 13px; overflow-wrap: anywhere; }
.app[data-page="promo"] .content { padding: 12px 4% 10px; }
.view.promo-page.on { min-height: 100%; display: flex; flex-direction: column; gap: clamp(9px, 2vh, 16px); }
.promo-page header { display: flex; align-items: center; gap: 10px; }
.promo-page header h2 { margin: 0; font-size: 17px; }
.promo-page header button { display: grid; place-items: center; width: 30px; height: 32px; padding: 0; background: transparent; color: inherit; border: 0; }
.promo-picker { display: flex; gap: 7px; overflow-x: auto; }
.promo-picker button { flex: 0 0 calc((100% - 14px) / 3); height: clamp(48px, 9vh, 70px); padding: 0; overflow: hidden; border-radius: 10px; border: 2px solid #352a31; background: #1c1319; }
.promo-picker button[aria-pressed="true"] { border-color: #f43a45; }
.promo-picker img { display: block; width: 100%; height: 100%; object-fit: cover; }
.promo-preview { display: block; align-self: center; width: min(100%, max(160px, calc(100dvh - 320px))); aspect-ratio: 1; object-fit: contain; border-radius: 12px; background: #191117; margin-block: auto; }
.promo-send p { margin: 0 0 7px; font-size: 12px; color: #c0b7c0; }
.promo-send .promo-hint { font-size: 11px; line-height: 1.4; }
.promo-send button { width: 100%; display: flex; justify-content: center; align-items: center; gap: 7px; min-height: 41px; border: 0; border-radius: 12px; font-size: 15px; font-weight: 650; }
.promo-send small:not(:empty) { display: block; margin-top: 5px; color: #efb5ba; }
@media (max-width:350px) {
  .ref-profile strong, .ref-chart h3 { font-size: 11px; }
  .ref-stat { gap: 5px; padding-inline: 5px; }.ref-stat .ref-disc { width: 24px; height: 24px; }
  .ref-methods label { font-size: 12px; gap: 5px; padding: 8px 6px; }
  .ref-switch button { padding-inline: 6px; }
}
@media (max-height:560px) {
  .app[data-page="withdraw"] .content { padding-block: 8px 12px; }
  .ref-withdraw header { margin-bottom: 10px; }
  .ref-methods + .ref-field, .ref-amount-field { margin-top: 16px; }
}