/* Layout concept: a dark trading console — fixed top bar, left rail nav,
     a hero landing panel that hands off to a live-feeling dashboard preview
     with an order ticket, open positions table and an area-chart card. */
  :root{
    --bg:#f6f5f2;
    --surface:#ffffff;
    --surface-2:#eeece6;
    --border:#dcd9d1;
    --fg:#1c1b19;
    --fg-muted:#6b685f;
    --accent:#0f6b5c;
    --accent-fg:#f3fbf8;
    --buy:#0f8a5f;
    --sell:#b3412c;
    --warn:#a5790f;
    --font-display:'Fraunces',Georgia,'Times New Roman',serif;
    --font-body:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
    --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0e1210;
      --surface:#151a17;
      --surface-2:#1c2220;
      --border:#2a322e;
      --fg:#eef1ee;
      --fg-muted:#9aa39c;
      --accent:#3fcfa6;
      --accent-fg:#06211a;
      --buy:#3fcfa6;
      --sell:#e2765f;
      --warn:#e0b75c;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:#0e1210;
    --surface:#151a17;
    --surface-2:#1c2220;
    --border:#2a322e;
    --fg:#eef1ee;
    --fg-muted:#9aa39c;
    --accent:#3fcfa6;
    --accent-fg:#06211a;
    --buy:#3fcfa6;
    --sell:#e2765f;
    --warn:#e0b75c;
    color-scheme: dark;
  }

  *{box-sizing:border-box;}
  body{
    background:var(--bg);
    color:var(--fg);
    font-family:var(--font-body);
    margin:0;
    padding-left:max(16px, env(safe-area-inset-left,0px));
    padding-right:max(16px, env(safe-area-inset-right,0px));
  }
  h1,h2,h3{font-family:var(--font-display); text-wrap:balance; margin:0;}
  .mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
  a{color:inherit;}
  button{font-family:inherit;}

  .wrap{max-width:1180px; margin:0 auto;}

  /* Top bar */
  .topbar{
    position:sticky; top:env(safe-area-inset-top,0px); z-index:10;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  body::before{
    content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px);
    z-index:10; background:var(--bg);
  }
  .topbar-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding-block:14px; gap:16px; max-width:1180px; margin:0 auto;
  }
  .brand{display:flex; align-items:center; font-family:var(--font-display); font-size:1.25rem; font-weight:600; letter-spacing:-.01em;}
  .brand .brand-accent{color:var(--accent);}
  .nav-links{display:flex; gap:28px; font-size:.92rem; color:var(--fg-muted);}
  .nav-links a{text-decoration:none;}
  .nav-links a:hover{color:var(--fg);}
  .topbar-cta{display:flex; gap:10px; align-items:center;}
  .btn{
    border-radius:8px; padding:9px 16px; font-size:.88rem; font-weight:600;
    border:1px solid var(--border); background:transparent; color:var(--fg);
    cursor:pointer; transition:transform .15s ease, border-color .15s ease;
  }
  .btn:hover{border-color:var(--accent);}
  .btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .btn-primary{
    background:var(--accent); color:var(--accent-fg); border-color:var(--accent);
  }
  .btn-primary:hover{transform:translateY(-1px);}

  @media (max-width:720px){ .nav-links{display:none;} }

  .user-avatar{
    width:26px; height:26px; border-radius:50%; background:var(--accent); color:var(--accent-fg);
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.78rem; flex-shrink:0;
  }

  .wallet-total{
    display:flex; align-items:center; gap:7px; padding:8px 12px; border-radius:8px;
    border:1px solid var(--border); background:var(--surface); font-family:var(--font-mono);
    font-size:.84rem; font-weight:600; color:var(--fg); white-space:nowrap;
  }
  .wallet-total svg{width:15px; height:15px; color:var(--fg-muted); flex-shrink:0;}
  @media (max-width:640px){ .wallet-total{padding:8px; } .wallet-total span{display:none;} }

  .profile-menu-wrap{position:relative;}
  .profile-btn{
    width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:var(--surface);
    cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
  }
  .profile-btn:hover{border-color:var(--accent);}
  .profile-btn .user-avatar{width:30px; height:30px; font-size:.84rem;}
  .profile-dropdown{
    display:none; position:absolute; top:calc(100% + 10px); right:0; width:270px; z-index:50;
    background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:8px;
    box-shadow:0 16px 40px rgba(0,0,0,.35);
  }
  .profile-dropdown.open{display:block;}
  .profile-dropdown-id{display:flex; align-items:center; gap:10px; padding:10px 8px;}
  .profile-dropdown-id .user-avatar{width:34px; height:34px; font-size:.9rem;}
  .pd-name{font-size:.88rem; font-weight:600;}
  .pd-email{font-size:.76rem; color:var(--fg-muted); margin-top:1px;}
  .profile-dropdown-divider{height:1px; background:var(--border); margin:6px 2px;}
  .profile-dropdown-item{
    display:block; width:100%; text-align:left; padding:9px 10px; border-radius:8px; font-size:.86rem;
    color:var(--fg); text-decoration:none; background:none; border:none; cursor:pointer; font-family:inherit;
  }
  .profile-dropdown-item:hover{background:var(--surface-2);}
  .profile-signout{color:var(--sell);}

  .dash-wrap{padding-top:0; max-width:1500px;}
  #dashboard.section{padding-top:0; padding-bottom:40px;}

  /* Hero */
  .hero{padding-block:64px 48px; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
  @media (max-width:860px){ .hero{grid-template-columns:1fr;} }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--accent); font-weight:600; margin-bottom:16px;
  }
  .eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent);}
  .hero h1{font-size:clamp(2.1rem, 4.5vw, 3.2rem); line-height:1.08; font-weight:600; max-width:14ch;}
  .hero p{color:var(--fg-muted); font-size:1.05rem; line-height:1.6; max-width:46ch; margin-top:18px;}
  .hero-actions{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap;}
  .hero-actions .btn{padding:12px 22px; font-size:.95rem;}
  .trust-row{display:flex; gap:28px; margin-top:36px; flex-wrap:wrap;}
  .trust-item{display:flex; flex-direction:column; gap:2px;}
  .trust-item .num{font-family:var(--font-mono); font-size:1.3rem; font-weight:600;}
  .trust-item .label{font-size:.78rem; color:var(--fg-muted);}

  /* Hero chart card */
  .hero-card{
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    padding:20px; min-width:0;
  }
  .hero-card-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px;}
  .pair-name{font-weight:600; font-size:1.05rem;}
  .pair-sub{font-size:.78rem; color:var(--fg-muted); margin-top:2px;}
  .price-now{font-family:var(--font-mono); font-size:1.5rem; font-weight:600; text-align:right;}
  .price-delta{font-size:.8rem; text-align:right; margin-top:2px; font-family:var(--font-mono);}
  .up{color:var(--buy);} .down{color:var(--sell);}
  .chart-box{width:100%; height:160px; margin-top:6px;}
  .chip-row{display:flex; gap:6px; margin-top:12px;}
  .chip{
    font-size:.74rem; padding:4px 10px; border-radius:999px; border:1px solid var(--border);
    color:var(--fg-muted); background:var(--surface-2);
  }
  .chip.active{color:var(--accent-fg); background:var(--accent); border-color:var(--accent); font-weight:600;}

  /* Section header */
  .section{padding-block:40px;}
  .section-head{margin-bottom:28px; max-width:56ch;}
  .section-head .eyebrow{margin-bottom:10px;}
  .section-head h2{font-size:1.7rem; font-weight:600;}
  .section-head p{color:var(--fg-muted); margin-top:10px; line-height:1.6;}

  /* Feature grid */
  .feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  @media (max-width:860px){ .feature-grid{grid-template-columns:1fr;} }
  .feature{
    border:1px solid var(--border); border-radius:14px; padding:22px;
    background:var(--surface);
  }
  .feature .f-icon{
    width:36px; height:36px; border-radius:9px; background:var(--surface-2);
    display:flex; align-items:center; justify-content:center; margin-bottom:14px;
    color:var(--accent); font-family:var(--font-mono); font-weight:600; font-size:.95rem;
  }
  .feature h3{font-size:1.02rem; font-weight:600; margin-bottom:8px;}
  .feature p{font-size:.88rem; color:var(--fg-muted); line-height:1.55; margin:0;}

  /* Dashboard preview */
  .dash-shell{
    border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--surface);
  }
  .dash-toolbar{
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 18px; border-bottom:1px solid var(--border); background:var(--surface-2);
  }
  .dash-toolbar .tabs{display:flex; gap:4px;}
  .tab-btn{
    border:none; background:transparent; color:var(--fg-muted); font-size:.85rem; font-weight:600;
    padding:7px 13px; border-radius:7px; cursor:pointer;
  }
  .tab-btn.active{background:var(--surface); color:var(--fg);}
  .dash-grid{display:grid; grid-template-columns:1.3fr .9fr; gap:0;}
  @media (max-width:860px){ .dash-grid{grid-template-columns:1fr;} }
  .dash-main{padding:18px; border-right:1px solid var(--border); min-width:0;}
  @media (max-width:860px){ .dash-main{border-right:none; border-bottom:1px solid var(--border);} }
  .dash-side{padding:18px; min-width:0;}

  table{width:100%; border-collapse:collapse; font-size:.86rem;}
  thead th{
    text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
    color:var(--fg-muted); font-weight:600; padding-bottom:10px; border-bottom:1px solid var(--border);
  }
  tbody td{padding:11px 0; border-bottom:1px solid var(--border); vertical-align:middle;}
  tbody tr:last-child td{border-bottom:none;}
  .sym-cell{display:flex; flex-direction:column;}
  .sym-cell .s-name{font-weight:600;}
  .sym-cell .s-sub{font-size:.72rem; color:var(--fg-muted);}
  .side-pill{
    font-size:.68rem; font-weight:700; padding:3px 8px; border-radius:5px; letter-spacing:.03em;
  }
  .side-pill.buy{background:color-mix(in srgb, var(--buy) 18%, transparent); color:var(--buy);}
  .side-pill.sell{background:color-mix(in srgb, var(--sell) 18%, transparent); color:var(--sell);}
  .table-wrap{overflow-x:auto;}

  .ticket{
    border:1px solid var(--border); border-radius:12px; padding:16px; background:var(--surface-2);
  }
  .ticket h3{font-size:.92rem; margin-bottom:14px;}
  .ticket-row{display:flex; gap:8px; margin-bottom:10px;}
  .ticket-toggle{
    flex:1; text-align:center; padding:9px; border-radius:8px; border:1px solid var(--border);
    background:var(--surface); font-weight:700; font-size:.82rem; cursor:pointer; color:var(--fg-muted);
  }
  .ticket-toggle.buy.active{background:var(--buy); color:#06211a; border-color:var(--buy);}
  .ticket-toggle.sell.active{background:var(--sell); color:#2a0b03; border-color:var(--sell);}
  .field{margin-bottom:12px;}
  .field label{display:block; font-size:.72rem; color:var(--fg-muted); margin-bottom:5px;}
  .field input{
    width:100%; background:var(--surface); border:1px solid var(--border); border-radius:8px;
    padding:9px 10px; color:var(--fg); font-family:var(--font-mono); font-size:.9rem;
  }
  .field input:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
  .field select{
    width:100%; background:var(--surface); border:1px solid var(--border); border-radius:8px;
    padding:9px 10px; color:var(--fg); font-family:inherit; font-size:.88rem;
  }
  .field select:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
  .field-hint{font-size:.74rem; color:var(--fg-muted); margin-top:6px;}
  .field-error{font-size:.78rem; color:var(--sell); margin-top:8px; display:flex; align-items:center; gap:6px;}
  .field-error::before{content:"!"; width:15px; height:15px; border-radius:50%; background:var(--sell); color:var(--bg); font-size:.68rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;}
  .field-note{
    font-size:.78rem; color:var(--fg-muted); line-height:1.5; background:var(--surface-2);
    border:1px solid var(--border); border-radius:8px; padding:11px 12px; margin:4px 0 14px;
  }

  .tr-method-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:720px;}
  @media (max-width:600px){ .tr-method-grid{grid-template-columns:1fr;} }
  .tr-method-card{
    border:1px solid var(--border); border-radius:12px; padding:18px; cursor:pointer;
    display:flex; gap:12px; align-items:flex-start; transition:border-color .15s ease;
  }
  .tr-method-card:hover{border-color:var(--accent);}
  .tr-method-title{font-weight:600; font-size:.95rem; margin-bottom:8px;}

  .tr-back{display:inline-block; font-size:.82rem; color:var(--accent); text-decoration:none; margin-bottom:16px; cursor:pointer;}
  .tr-back:hover{text-decoration:underline;}

  .tr-form-grid{display:grid; grid-template-columns:1fr .7fr; gap:28px; max-width:820px;}
  @media (max-width:760px){ .tr-form-grid{grid-template-columns:1fr;} }
  .tr-form{max-width:420px;}
  .tr-amount-row{position:relative;}
  .tr-amount-row input{padding-right:52px;}
  .tr-amount-suffix{
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    font-size:.78rem; color:var(--fg-muted); font-family:var(--font-mono); pointer-events:none;
  }
  .tr-terms{font-size:.84rem;}
  .tr-terms h4{font-size:.9rem; margin:0 0 14px;}
  .tr-terms-row{margin-bottom:14px;}
  .tr-terms-row .t-label{color:var(--fg-muted); font-size:.78rem; margin-bottom:3px;}
  .tr-terms-row .t-val{font-weight:600;}
  .tr-terms a{color:var(--accent); font-size:.82rem; text-decoration:none;}
  .tr-terms a:hover{text-decoration:underline;}

  .wd-method-recap{
    display:flex; align-items:center; gap:10px; border:1px solid var(--border); border-radius:8px;
    padding:9px 12px; background:var(--surface-2); font-size:.88rem; font-weight:600;
  }
  .wd-method-recap .pay-icon{width:24px; height:24px; font-size:.8rem;}
  .pay-card[data-wd-method]{cursor:pointer;}
  .pay-card[data-dp-method]{cursor:pointer;}

  .dp-qr-wrap{display:flex; gap:16px; align-items:flex-start; border:1px solid var(--border); border-radius:12px; padding:16px; flex-wrap:wrap;}
  .dp-qr-img{width:150px; height:150px; border-radius:8px; background:#fff; padding:8px; flex-shrink:0; border:1px solid var(--border);}
  .dp-address-box{flex:1; min-width:180px; display:flex; flex-direction:column; gap:4px; justify-content:center;}
  .dp-address-val{font-family:var(--font-mono); font-size:.86rem; word-break:break-all; line-height:1.5;}
  .dp-address-caption{font-size:.78rem; color:var(--warn); font-weight:600; margin-bottom:6px;}
  .dp-copy-btn{width:auto; padding:7px 16px; font-size:.8rem; align-self:flex-start;}

  /* ---- Transaction history & Admin ---- */
  .tx-table{width:100%; border-collapse:collapse; font-size:.86rem;}
  .tx-table th{text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-muted); font-weight:600; padding-bottom:10px; border-bottom:1px solid var(--border);}
  .tx-table td{padding:12px 10px 12px 0; border-bottom:1px solid var(--border); vertical-align:middle;}
  .tx-table tr:last-child td{border-bottom:none;}
  .tx-status{font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:999px; display:inline-block;}
  .tx-status.pending{background:color-mix(in srgb, var(--warn) 18%, transparent); color:var(--warn);}
  .tx-status.completed{background:color-mix(in srgb, var(--buy) 18%, transparent); color:var(--buy);}
  .tx-status.rejected{background:color-mix(in srgb, var(--sell) 18%, transparent); color:var(--sell);}
  .tx-empty{color:var(--fg-muted); font-size:.86rem; padding:18px 0;}

  .admin-banner{
    display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:10px;
    background:color-mix(in srgb, var(--warn) 12%, transparent); border:1px solid color-mix(in srgb, var(--warn) 40%, var(--border));
    font-size:.82rem; color:var(--fg-muted); margin-bottom:20px;
  }
  .admin-row{
    border:1px solid var(--border); border-radius:12px; padding:16px 18px; margin-bottom:12px;
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  }
  .admin-row-main{display:flex; flex-direction:column; gap:4px; min-width:0;}
  .admin-row-title{font-weight:600; font-size:.92rem;}
  .admin-row-sub{font-size:.78rem; color:var(--fg-muted); font-family:var(--font-mono);}
  .admin-row-amount{font-family:var(--font-mono); font-weight:600; font-size:1.05rem;}
  .admin-row-actions{display:flex; gap:8px;}
  .admin-row-actions .btn{width:auto; padding:8px 16px; font-size:.84rem;}
  .admin-row-actions .btn-reject{border-color:color-mix(in srgb, var(--sell) 50%, var(--border)); color:var(--sell);}
  .admin-row-actions .btn-reject:hover{border-color:var(--sell);}

  /* ---- Open account modal ---- */
  .modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:100;
    align-items:center; justify-content:center; padding:20px;
    padding-top:max(20px, env(safe-area-inset-top,0px));
  }
  .modal-overlay.open{display:flex;}
  .modal-card{
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    width:100%; max-width:780px; max-height:88vh; overflow-y:auto; padding:26px 28px 28px;
  }
  @media (max-width:600px){ .modal-card{padding:20px 18px 22px;} }
  .modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px;}
  .modal-head h2{font-size:1.4rem; font-weight:600;}
  .modal-close{
    background:var(--surface-2); border:1px solid var(--border); color:var(--fg-muted);
    width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:.95rem; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .modal-close:hover{color:var(--fg); border-color:var(--accent);}
  .modal-step{display:none;}
  .modal-step.active{display:block;}

  .acct-group-label{
    font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-muted);
    font-weight:700; margin:18px 0 8px;
  }
  .acct-group-label:first-child{margin-top:0;}
  .acct-type-row{
    display:flex; align-items:center; gap:14px; border:1px solid var(--border); border-radius:12px;
    padding:14px 16px; margin-bottom:10px; cursor:pointer; transition:border-color .15s ease, background .15s ease;
  }
  .acct-type-row:hover{border-color:var(--accent);}
  .acct-type-row.selected{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, transparent);}
  .acct-type-row input[type="radio"]{accent-color:var(--accent); width:17px; height:17px; flex-shrink:0;}
  .acct-type-main{flex:1; min-width:0;}
  .acct-type-title{display:flex; align-items:center; gap:8px; font-weight:600; font-size:.95rem; flex-wrap:wrap;}
  .acct-type-badge{
    font-size:.66rem; font-weight:700; padding:2px 8px; border-radius:999px;
    background:color-mix(in srgb, var(--buy) 20%, transparent); color:var(--buy);
  }
  .acct-type-desc{font-size:.8rem; color:var(--fg-muted); margin-top:3px; line-height:1.45;}
  .acct-type-stats{display:flex; gap:14px; flex-wrap:wrap; margin-top:9px;}
  .acct-type-stat{font-size:.74rem; color:var(--fg-muted);}
  .acct-type-stat b{color:var(--fg); font-weight:600;}

  .modal-foot{display:flex; gap:10px; margin-top:20px;}
  .modal-foot .btn{width:auto; padding:10px 20px;}

  .seg-toggle{display:flex; gap:8px; margin-bottom:16px; max-width:300px;}
  .seg-btn{
    flex:1; text-align:center; padding:9px; border-radius:8px; border:1px solid var(--border);
    background:var(--surface-2); font-weight:600; font-size:.84rem; cursor:pointer; color:var(--fg-muted);
  }
  .seg-btn.active{background:var(--accent); color:var(--accent-fg); border-color:var(--accent);}

  .pw-field-row{position:relative;}
  .pw-field-row input{padding-right:44px;}
  .pw-toggle-btn{
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    width:30px; height:30px; border-radius:6px; border:none; background:transparent;
    color:var(--fg-muted); cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .pw-toggle-btn:hover{color:var(--fg);}
  .pw-count{font-size:.72rem; color:var(--fg-muted); font-family:var(--font-mono);}
  .pw-rules{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:5px;}
  .pw-rule{font-size:.76rem; color:var(--fg-muted); display:flex; align-items:center; gap:7px;}
  .pw-rule::before{
    content:""; width:14px; height:14px; border-radius:50%; border:1.5px solid var(--border);
    flex-shrink:0; background-size:9px 9px; background-position:center; background-repeat:no-repeat;
  }
  .pw-rule.met{color:var(--fg);}
  .pw-rule.met::before{
    border-color:var(--buy); background-color:var(--buy);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306211a' stroke-width='3'%3E%3Cpath d='M4 12l5 5L20 7'/%3E%3C/svg%3E");
  }
  .acct-summary-box{font-size:.84rem;}
  .acct-summary-box h4{font-size:.9rem; margin:0 0 14px;}
  .acct-summary-row{margin-bottom:14px;}
  .acct-summary-row .s-label{color:var(--fg-muted); font-size:.78rem; margin-bottom:3px;}
  .acct-summary-row .s-val{font-weight:600;}
  .acct-summary-box a{color:var(--accent); font-size:.82rem; text-decoration:none;}
  .acct-summary-box a:hover{text-decoration:underline;}

  @keyframes rowHighlight{
    0%{background:color-mix(in srgb, var(--accent) 16%, transparent);}
    100%{background:transparent;}
  }
  .account-row.just-added{animation:rowHighlight 1.8s ease-out;}

  /* ---- Account settings drawer ---- */
  .settings-overlay{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:110;
    justify-content:flex-end;
  }
  .settings-overlay.open{display:flex;}
  .settings-panel{
    width:430px; max-width:92vw; height:100%; background:var(--surface); border-left:1px solid var(--border);
    overflow-y:auto; padding:26px 24px 100px; position:relative;
  }
  .settings-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:2px;}
  .settings-head h2{font-size:1.4rem; font-weight:600;}
  .settings-sub{font-size:.82rem; color:var(--fg-muted); margin-bottom:20px;}
  .settings-view{display:none;}
  .settings-view.active{display:block;}
  .settings-back{display:inline-flex; align-items:center; gap:4px; font-size:.82rem; color:var(--accent); text-decoration:none; cursor:pointer; margin-bottom:14px; background:none; border:none; padding:0;}
  .settings-back:hover{text-decoration:underline;}

  .settings-info-card{border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:22px;}
  .settings-info-top{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
  .settings-info-top .s-icon{
    width:38px; height:38px; border-radius:10px; background:var(--surface-2); color:var(--accent);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .settings-info-top .s-icon svg{width:19px; height:19px;}
  .settings-dotted-row{
    display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.84rem;
    padding:8px 0; border-top:1px dashed var(--border);
  }
  .settings-dotted-row .d-label{color:var(--fg-muted);}
  .settings-dotted-row .d-val{display:flex; align-items:center; gap:7px; font-family:var(--font-mono);}
  .settings-copy-btn{background:none; border:none; color:var(--fg-muted); cursor:pointer; padding:2px; display:flex;}
  .settings-copy-btn:hover{color:var(--accent);}
  .settings-copy-btn svg{width:14px; height:14px;}

  .settings-row{
    display:flex; align-items:center; gap:12px; padding:14px 2px; border-bottom:1px solid var(--border);
    cursor:pointer; background:none; border-left:none; border-right:none; border-top:none; width:100%; text-align:left;
    color:var(--fg); font-family:inherit;
  }
  .settings-row:last-of-type{border-bottom:1px solid var(--border);}
  .settings-row:hover{background:var(--surface-2);}
  .settings-row .s-icon{
    width:36px; height:36px; border-radius:50%; background:var(--surface-2); color:var(--fg-muted);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .settings-row .s-icon svg{width:17px; height:17px;}
  .settings-row .s-main{flex:1; min-width:0;}
  .settings-row .s-row-label{font-weight:600; font-size:.9rem;}
  .settings-row .s-row-sub{font-size:.72rem; color:var(--fg-muted); margin-top:1px;}
  .settings-row .s-value{color:var(--fg-muted); font-size:.84rem; flex-shrink:0;}
  .settings-row .s-chev{color:var(--fg-muted); font-size:1rem; flex-shrink:0;}
  .settings-row.danger .s-row-label{color:var(--sell);}
  .settings-row.danger .s-icon{color:var(--sell);}

  .settings-foot{
    position:sticky; bottom:-100px; margin:22px -24px -100px; padding:16px 24px;
    background:var(--surface); border-top:1px solid var(--border); display:flex; gap:10px;
  }
  .settings-foot .btn{flex:1; padding:10px;}
  .settings-foot .btn-danger{border-color:color-mix(in srgb, var(--sell) 50%, var(--border)); color:var(--sell);}
  .settings-foot .btn-danger:hover{border-color:var(--sell);}

  .lev-group-label{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-muted); font-weight:700; margin:16px 0 6px;}
  .lev-group-label:first-of-type{margin-top:0;}
  .lev-option{
    display:flex; align-items:center; gap:10px; padding:11px 4px; border-bottom:1px solid var(--border);
    cursor:pointer; font-size:.88rem;
  }
  .lev-option:hover{background:var(--surface-2);}
  .lev-option input[type="radio"]{accent-color:var(--accent); width:16px; height:16px;}
  .lev-option.selected{color:var(--accent); font-weight:600;}
  .lev-custom-row{display:flex; align-items:center; gap:8px; margin-bottom:4px;}
  .lev-custom-row span{color:var(--fg-muted); font-family:var(--font-mono);}
  .lev-custom-row input{
    flex:1; background:var(--surface-2); border:1px solid var(--border); border-radius:8px;
    padding:9px 10px; color:var(--fg); font-family:var(--font-mono); font-size:.9rem;
  }

  .settings-toggle-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px;}
  .settings-switch{
    width:44px; height:25px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border);
    position:relative; cursor:pointer; flex-shrink:0;
  }
  .settings-switch::after{
    content:""; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%;
    background:var(--fg-muted); transition:transform .15s ease, background .15s ease;
  }
  .settings-switch.on{background:color-mix(in srgb, var(--accent) 30%, var(--surface-2)); border-color:var(--accent);}
  .settings-switch.on::after{transform:translateX(19px); background:var(--accent);}
  .settings-success{
    font-size:.82rem; color:var(--buy); background:color-mix(in srgb, var(--buy) 12%, transparent);
    border:1px solid color-mix(in srgb, var(--buy) 35%, var(--border)); border-radius:8px; padding:10px 12px; margin-top:14px;
  }

  .tr-confirm-card, .tr-success-card{border:1px solid var(--border); border-radius:12px; padding:24px; max-width:420px;}
  .tr-confirm-card h3, .tr-success-card h3{font-size:1.05rem; margin-bottom:18px;}
  .confirm-rows{display:flex; flex-direction:column; gap:12px; margin-bottom:20px;}
  .confirm-rows > div{display:flex; justify-content:space-between; gap:10px; font-size:.86rem; padding-bottom:12px; border-bottom:1px solid var(--border);}
  .confirm-rows > div:last-child{border-bottom:none; padding-bottom:0;}
  .confirm-rows dt{color:var(--fg-muted); margin:0;}
  .confirm-rows dd{margin:0; font-weight:600; font-family:var(--font-mono); text-align:right;}

  .tr-success-card{text-align:center;}
  .tr-success-icon{
    width:48px; height:48px; border-radius:50%; background:color-mix(in srgb, var(--buy) 18%, transparent);
    color:var(--buy); display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:700;
    margin:0 auto 16px;
  }
  .tr-success-card p{color:var(--fg-muted); font-size:.86rem; line-height:1.6; margin-bottom:20px;}
  .ticket-submit{
    width:100%; padding:11px; border-radius:8px; border:none; font-weight:700; font-size:.9rem;
    background:var(--accent); color:var(--accent-fg); cursor:pointer; margin-top:4px;
  }
  .ticket-submit:hover{filter:brightness(1.05);}
  .ticket-note{font-size:.72rem; color:var(--fg-muted); margin-top:10px; line-height:1.5;}

  .stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:18px;}
  .stat{background:var(--surface); padding:14px 16px;}
  .stat .label{font-size:.72rem; color:var(--fg-muted); margin-bottom:6px;}
  .stat .val{font-family:var(--font-mono); font-size:1.15rem; font-weight:600;}
  @media (max-width:560px){ .stat-row{grid-template-columns:1fr 1fr;} }

  footer{border-top:1px solid var(--border); padding-block:28px; margin-top:20px;}
  .foot-row{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;}
  .foot-row p{font-size:.78rem; color:var(--fg-muted); margin:0; max-width:60ch; line-height:1.6;}
  .foot-links{display:flex; gap:18px; font-size:.8rem; color:var(--fg-muted);}
  .foot-links a{text-decoration:none;}
  .foot-links a:hover{color:var(--fg);}

  /* ---- logo + site footer ---- */
  .brand-mark{width:1.2em; height:1.2em; border-radius:.28em; margin-right:.4em; flex:none;}
  .site-footer{padding-block:36px 28px;}
  .foot-top{display:grid; grid-template-columns:1.6fr repeat(3, 1fr); gap:28px; padding-bottom:26px; border-bottom:1px solid var(--border);}
  .foot-brand p{font-size:.85rem; color:var(--fg-muted); margin:10px 0 14px; max-width:36ch; line-height:1.55;}
  .foot-pay{display:flex; flex-wrap:wrap; gap:6px;}
  .foot-pay span{font-size:.7rem; font-weight:600; letter-spacing:.02em; padding:4px 8px; border:1px solid var(--border); border-radius:6px; color:var(--fg-muted); background:var(--surface-2);}
  .foot-col{display:flex; flex-direction:column; gap:9px; font-size:.84rem;}
  .foot-col h4{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--fg-muted); margin:0 0 4px; font-weight:600;}
  .foot-col a{text-decoration:none; color:var(--fg);}
  .foot-col a:hover{color:var(--accent);}
  .foot-legal{padding-top:20px; display:flex; flex-direction:column; gap:10px;}
  .foot-legal p{font-size:.76rem; line-height:1.65; color:var(--fg-muted); margin:0; max-width:none;}
  .foot-legal b{color:var(--fg);}
  .foot-copy{padding-top:6px;}
  @media (max-width:820px){ .foot-top{grid-template-columns:1fr 1fr;} .foot-brand{grid-column:1 / -1;} }
  @media (max-width:420px){ .foot-top{grid-template-columns:1fr;} }

  [hidden]{display:none !important;}

  /* ---- Accounts dashboard ---- */
  .app-shell{
    border:1px solid var(--border); border-top:none; border-radius:0 0 16px 16px; position:relative;
    display:grid; grid-template-columns:230px 1fr; background:var(--surface);
    transition:grid-template-columns .2s ease;
  }
  .app-shell.sidebar-collapsed{grid-template-columns:56px 1fr;}

  .app-sidebar{
    background:var(--surface-2); border-right:1px solid var(--border);
    padding:18px 12px; display:flex; flex-direction:column; gap:22px;
    min-width:0; overflow-y:auto; border-radius:0 0 0 16px;
    position:sticky; top:65px; align-self:start;
    max-height:calc(100vh - 65px - env(safe-area-inset-top,0px) - 16px);
  }
  .app-shell.sidebar-collapsed .app-sidebar{display:none;}

  .sidebar-collapse-row{margin-top:6px; border-top:1px solid var(--border); padding-top:10px;}
  .sidebar-collapse-btn{
    display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px; border-radius:8px;
    background:transparent; border:none; color:var(--fg-muted); font-size:.8rem; font-weight:600; cursor:pointer;
  }
  .sidebar-collapse-btn:hover{background:var(--surface); color:var(--fg);}

  /* Collapsed state: a slim icon-only rail, same spirit as the full sidebar but iconic */
  .sidebar-rail{
    display:none; flex-direction:column; align-items:center; gap:4px; padding:16px 0;
    background:var(--surface-2); border-right:1px solid var(--border); border-radius:0 0 0 16px;
    position:sticky; top:65px; align-self:start;
    max-height:calc(100vh - 65px - env(safe-area-inset-top,0px) - 16px); overflow-y:auto;
  }
  .app-shell.sidebar-collapsed .sidebar-rail{display:flex;}
  .rail-icon-btn{
    width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center;
    background:transparent; border:none; color:var(--fg-muted); cursor:pointer;
  }
  .rail-icon-btn:hover{background:var(--surface); color:var(--fg);}
  .rail-icon-btn svg{width:18px; height:18px;}
  .rail-spacer{flex:1;}
  .rail-refer{color:var(--accent);}
  .rail-expand{
    margin-top:4px; border-top:1px solid var(--border); padding-top:12px; width:36px;
  }

  .hamburger-btn{display:none;}
  .sidebar-backdrop{display:none;}

  @media (max-width:820px){
    .app-shell{grid-template-columns:1fr; overflow:visible;}
    .app-shell.sidebar-collapsed{grid-template-columns:1fr;}
    .sidebar-collapse-row{display:none;}
    .sidebar-rail{display:none !important;}

    .hamburger-btn{
      display:flex; align-items:center; justify-content:center; width:34px; height:34px;
      border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--fg);
      cursor:pointer; font-size:1rem;
    }

    .app-sidebar{
      position:fixed; top:0; left:0; height:100%; max-height:none; width:270px; max-width:85vw;
      border-right:1px solid var(--border); border-radius:0;
      transform:translateX(-100%); transition:transform .25s ease;
      z-index:60; overflow-y:auto; padding-top:max(18px, env(safe-area-inset-top,0px));
      padding-left:max(12px, env(safe-area-inset-left,0px));
    }
    .app-shell.sidebar-open .app-sidebar{transform:translateX(0);}

    .sidebar-backdrop{
      display:block; position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; pointer-events:none;
      transition:opacity .2s ease; z-index:55;
    }
    .app-shell.sidebar-open .sidebar-backdrop{opacity:1; pointer-events:auto;}

    .sidebar-mobile-close{
      display:flex; align-items:center; justify-content:space-between; margin-bottom:4px;
    }
    .sidebar-mobile-close button{
      background:var(--surface); border:1px solid var(--border); color:var(--fg); width:28px; height:28px;
      border-radius:7px; cursor:pointer; font-size:.9rem;
    }
  }
  .sidebar-mobile-close{display:none;}
  @media (max-width:820px){ .sidebar-mobile-close{display:flex;} }
  .nav-group{display:flex; flex-direction:column; gap:2px;}
  .nav-group-label{
    font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--fg-muted);
    font-weight:700; padding:6px 10px; margin-bottom:2px;
  }
  .nav-item{
    display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
    font-size:.87rem; color:var(--fg-muted); text-decoration:none; font-weight:500;
  }
  .nav-item:hover{background:var(--surface); color:var(--fg);}
  .nav-item.active{background:var(--surface); color:var(--fg); font-weight:600;}
  .nav-item .dot{width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.5; flex-shrink:0;}
  .nav-item{justify-content:space-between;}
  .nav-item .nav-item-label{display:flex; align-items:center; gap:10px;}
  .nav-badge{font-size:.65rem; font-weight:700; padding:2px 7px; border-radius:999px; background:color-mix(in srgb, var(--accent) 22%, transparent); color:var(--accent);}
  .nav-ext{color:var(--fg-muted); opacity:.7;}
  .nav-divider{height:1px; background:var(--border); margin:4px 10px;}
  .refer-banner{
    margin:4px 2px 0; padding:14px; border-radius:12px; cursor:pointer;
    background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 24%, var(--surface-2)), var(--surface-2));
    border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    display:flex; gap:10px; align-items:flex-start;
  }
  .refer-banner .r-icon{color:var(--accent); font-size:1.1rem; line-height:1;}
  .refer-banner .r-text{font-size:.82rem; font-weight:600; line-height:1.35;}
  .sidebar-foot{margin-top:auto;}

  .app-main{padding:22px; min-width:0; border-radius:0 0 16px 0;}
  .app-main-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; gap:12px; flex-wrap:wrap;}
  .app-main-head h2{font-size:1.5rem; font-weight:600;}
  .app-main-head .sub{font-size:.82rem; color:var(--fg-muted); margin-top:4px;}

  .account-row{
    border:1px solid var(--border); border-radius:12px; padding:16px 18px; margin-bottom:12px;
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  }
  .account-left{display:flex; flex-direction:column; gap:8px; min-width:0;}
  .account-tags{display:flex; gap:7px; align-items:center; flex-wrap:wrap;}
  .tag{font-size:.72rem; padding:3px 9px; border-radius:6px; background:var(--surface-2); border:1px solid var(--border); color:var(--fg-muted); font-weight:600;}
  .tag.platform{color:var(--accent); border-color:color-mix(in srgb, var(--accent) 40%, var(--border));}
  .account-id{font-size:.8rem; color:var(--fg-muted); font-family:var(--font-mono);}
  .account-balance{font-family:var(--font-mono); font-size:1.5rem; font-weight:600;}
  .account-balance .cents{font-size:1rem; color:var(--fg-muted);}
  .account-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .account-actions{display:flex; gap:8px; flex-wrap:wrap;}
  .acct-kebab-btn{
    width:36px; height:36px; border-radius:8px; border:1px solid var(--border); background:var(--surface-2);
    color:var(--fg-muted); cursor:pointer; font-size:1.2rem; line-height:1; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .acct-kebab-btn:hover{color:var(--fg); border-color:var(--accent);}
  .account-row.archived{opacity:.6;}
  .account-row.archived .account-actions{display:none;}
  .archived-note{font-size:.82rem; color:var(--fg-muted);}
  .archived-note b{color:var(--fg); font-weight:600;}
  .act-btn{
    border-radius:8px; padding:9px 14px; font-size:.82rem; font-weight:600; border:1px solid var(--border);
    background:var(--surface-2); color:var(--fg); cursor:pointer; display:flex; align-items:center; gap:6px;
  }
  .act-btn:hover{border-color:var(--accent);}
  .act-btn.primary{background:var(--accent); color:var(--accent-fg); border-color:var(--accent);}

  .period-select{
    background:var(--surface-2); border:1px solid var(--border); border-radius:8px; color:var(--fg);
    font-size:.84rem; padding:8px 12px; font-family:inherit;
  }

  .perf-stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px;}
  @media (max-width:860px){ .perf-stat-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:480px){ .perf-stat-grid{grid-template-columns:1fr;} }
  .perf-stat-card{border:1px solid var(--border); border-radius:12px; padding:16px;}
  .perf-stat-label{font-size:.78rem; color:var(--fg-muted); margin-bottom:8px;}
  .perf-stat-value{font-family:var(--font-mono); font-size:1.35rem; font-weight:600; margin-bottom:10px;}
  .perf-stat-sub{display:flex; flex-direction:column; gap:4px; font-size:.76rem; color:var(--fg-muted); border-top:1px solid var(--border); padding-top:10px;}
  .perf-stat-sub span{display:flex; justify-content:space-between; gap:8px;}
  .perf-stat-sub .mono{font-weight:600; color:var(--fg);}

  .perf-chart-card{border:1px solid var(--border); border-radius:12px; padding:18px;}
  .chart-tabs{display:inline-flex; gap:4px; margin-bottom:18px; flex-wrap:wrap; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:3px;}
  .chart-tab{
    border:none; background:transparent; color:var(--fg-muted); font-size:.82rem; font-weight:600;
    padding:7px 13px; border-radius:6px; cursor:pointer;
  }
  .chart-tab.active{background:var(--surface); color:var(--fg);}
  .chart-svg{width:100%; height:auto; display:block;}
  .chart-axis-label{font-family:var(--font-mono); font-size:9px; fill:var(--fg-muted);}
  .chart-grid-line{stroke:var(--border); stroke-width:1;}
  .chart-legend{display:flex; gap:18px; margin-top:12px; font-size:.78rem; color:var(--fg-muted);}
  .chart-legend span{display:flex; align-items:center; gap:6px;}
  .chart-legend i{width:9px; height:9px; border-radius:2px; display:inline-block;}

  .hist-filters{display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap;}
  .hist-toggle{display:flex; gap:4px; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:3px;}
  .hist-toggle button{
    border:none; background:transparent; color:var(--fg-muted); font-size:.82rem; font-weight:600;
    padding:7px 13px; border-radius:6px; cursor:pointer;
  }
  .hist-toggle button.active{background:var(--surface); color:var(--fg);}
  .hist-table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:12px;}
  .hist-table{width:100%; border-collapse:collapse; font-size:.83rem; min-width:720px;}
  .hist-table th{
    text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--fg-muted);
    font-weight:700; padding:12px 14px; border-bottom:1px solid var(--border); background:var(--surface-2); white-space:nowrap;
  }
  .hist-table td{padding:11px 14px; border-bottom:1px solid var(--border); white-space:nowrap;}
  .hist-table tbody tr:last-child td{border-bottom:none;}
  .hist-table tbody tr:hover{background:var(--surface-2);}
  .hist-sym{display:flex; align-items:center; gap:8px; font-weight:600;}
  .hist-sym-dot{width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0;}

  .pay-section-label{font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-muted); margin-bottom:12px;}
  .pay-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  @media (max-width:600px){ .pay-grid{grid-template-columns:1fr;} }
  .pay-card{border:1px solid var(--border); border-radius:12px; padding:16px; cursor:pointer; transition:border-color .15s ease;}
  .pay-card.disabled{cursor:not-allowed; opacity:.5; filter:grayscale(.6);}
  .pay-card.disabled:hover{border-color:var(--border);}
  .pay-unavailable{margin-left:auto; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:3px 8px; border-radius:999px; border:1px solid var(--border); color:var(--fg-muted); white-space:nowrap;}
  .pay-card:hover{border-color:var(--accent);}
  .pay-card-top{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
  .pay-card.disabled{cursor:not-allowed; pointer-events:none; opacity:.42;}
  .pay-card.disabled:hover{border-color:var(--border);}
  .pay-card-top{position:relative;}
  .pay-soon{
    margin-left:auto; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    color:var(--fg-muted); background:var(--surface-2); border:1px solid var(--border); padding:3px 8px; border-radius:6px;
  }
  .pay-icon{
    width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:.95rem; color:#0b0f0d; flex-shrink:0;
  }
  .pay-name{font-weight:600; font-size:.92rem;}
  .pay-meta{display:flex; flex-direction:column; gap:6px; margin:0;}
  .pay-meta > div{display:flex; justify-content:space-between; gap:10px; font-size:.8rem;}
  .pay-meta dt{color:var(--fg-muted); margin:0;}
  .pay-meta dd{margin:0; font-weight:600; font-family:var(--font-mono); text-align:right;}

  .profile-note{
    display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:10px;
    background:var(--surface-2); border:1px solid var(--border); font-size:.82rem; color:var(--fg-muted);
    margin-bottom:18px; flex-wrap:wrap;
  }
  .profile-note .badge-ok{color:var(--buy); font-weight:700;}
  .profile-note .badge-warn{color:var(--warn); font-weight:700;}
  .profile-note.warn{border-color:color-mix(in srgb, var(--warn) 45%, var(--border));}
  .profile-note a, .profile-note button.pn-link{
    color:var(--accent); text-decoration:none; font-weight:600; font-size:.82rem; background:none; border:none;
    cursor:pointer; padding:0; font-family:inherit; margin-left:auto;
  }
  .profile-note a:hover, .profile-note button.pn-link:hover{text-decoration:underline;}

  /* ---- Verification pages ---- */
  .verify-top-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:640px; margin-bottom:28px;}
  @media (max-width:560px){ .verify-top-grid{grid-template-columns:1fr;} }
  .verify-stat-card{border:1px solid var(--border); border-radius:12px; padding:16px;}
  .verify-stat-card .s-label{font-size:.78rem; color:var(--fg-muted); margin-bottom:6px;}
  .verify-status-val{font-size:1.3rem; font-weight:600;}
  .verify-status-val.ok{color:var(--buy);}
  .verify-status-val.warn{color:var(--warn);}
  .verify-stat-card .s-sub{font-size:.78rem; color:var(--fg-muted); margin-top:5px;}

  .verify-step-row{
    display:flex; align-items:center; gap:14px; border:1px solid var(--border); border-radius:12px;
    padding:14px 16px; margin-bottom:10px; max-width:640px; flex-wrap:wrap;
  }
  .verify-step-num{
    width:26px; height:26px; border-radius:50%; background:var(--surface-2); color:var(--fg-muted);
    display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700; flex-shrink:0;
  }
  .verify-step-num.done{background:var(--buy); color:#06211a;}
  .verify-step-main{flex:1; min-width:160px;}
  .verify-step-title{font-weight:600; font-size:.92rem;}
  .verify-step-sub{font-size:.78rem; color:var(--fg-muted); margin-top:2px;}

  .verify-submit-grid{display:flex; gap:30px; flex-wrap:wrap; margin-bottom:22px;}
  .field input[type="file"]{padding:7px 10px; cursor:pointer;}

  .verify-pending-card, .verify-done-card{
    border:1px solid var(--border); border-radius:14px; padding:32px; text-align:center; max-width:440px;
  }
  .verify-pending-icon, .verify-done-icon{font-size:2rem; margin-bottom:10px;}
  .verify-pending-card h3, .verify-done-card h3{font-size:1.05rem; margin-bottom:8px;}
  .verify-done-card{border-color:color-mix(in srgb, var(--buy) 40%, var(--border));}
  .verify-done-card .verify-done-icon{color:var(--buy);}
  .verify-done-card .btn{margin-top:16px; padding:9px 20px; width:auto;}

  /* ---- Funding wallet ---- */
  .fw-banner{position:relative; border:1px solid var(--border); border-radius:14px; padding:20px 44px 20px 20px; margin-bottom:22px; background:var(--surface-2); max-width:640px;}
  .fw-banner-title{font-weight:600; margin-bottom:10px;}
  .fw-banner-list{margin:0; padding-left:18px; font-size:.86rem; color:var(--fg-muted); display:flex; flex-direction:column; gap:4px;}
  .fw-banner-close{position:absolute; top:14px; right:14px; background:none; border:none; color:var(--fg-muted); font-size:1rem; cursor:pointer; padding:4px;}
  .fw-banner-close:hover{color:var(--fg);}
  .fw-balance-card{max-width:640px; margin-bottom:28px;}
  .fw-balance-top{margin-bottom:16px;}
  .fw-balance-val-wrap{font-family:var(--font-mono); font-size:2rem; font-weight:600; margin-top:4px;}
  .fw-balance-actions{display:flex; gap:10px; flex-wrap:wrap;}
  .fw-balance-actions .btn{width:auto; padding:9px 18px;}
  .fw-how-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:900px; margin-bottom:28px;}
  @media (max-width:720px){ .fw-how-grid{grid-template-columns:1fr;} }
  .fw-how-card{border:1px solid var(--border); border-radius:12px; padding:16px;}
  .fw-how-num{width:24px; height:24px; border-radius:50%; background:var(--surface-2); color:var(--fg-muted); display:flex; align-items:center; justify-content:center; font-size:.76rem; font-weight:700; margin-bottom:10px;}
  .fw-how-card h4{margin:0 0 6px; font-size:.92rem;}
  .fw-how-card p{margin:0; font-size:.82rem; color:var(--fg-muted); line-height:1.4;}

  /* ---- Rewards ---- */
  .rw-grid{display:grid; grid-template-columns:1.6fr 1fr; gap:20px; align-items:start; margin-bottom:28px;}
  @media (max-width:820px){ .rw-grid{grid-template-columns:1fr;} }
  .rw-tier-card{border-radius:14px; padding:20px; background:linear-gradient(135deg, color-mix(in srgb, var(--warn) 22%, var(--surface)), var(--surface)); border:1px solid var(--border);}
  .rw-tier-top{font-size:.78rem; color:var(--fg-muted); margin-bottom:4px;}
  .rw-tier-name{font-size:1.6rem; font-weight:700; display:flex; align-items:center; gap:8px;}
  .rw-tier-mult{font-size:.72rem; background:var(--surface-2); border-radius:6px; padding:2px 7px; font-weight:600;}
  .rw-tier-meta{display:flex; justify-content:space-between; gap:14px; margin:14px 0 8px; font-size:.82rem; flex-wrap:wrap;}
  .rw-tier-meta b{display:block; font-size:.95rem;}
  .rw-progress-track{height:6px; border-radius:4px; background:var(--surface-2); overflow:hidden;}
  .rw-progress-fill{height:100%; background:var(--warn); border-radius:4px;}
  .rw-side-card{border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:14px;}
  .rw-side-card .s-label{font-size:.78rem; color:var(--fg-muted); margin-bottom:6px;}
  .rw-side-val{font-family:var(--font-mono); font-size:1.4rem; font-weight:600; margin-bottom:12px;}
  .rw-earn-card{display:flex; align-items:center; gap:16px; border-radius:12px; padding:18px; background:color-mix(in srgb, var(--accent) 14%, var(--surface)); border:1px solid var(--border); max-width:640px; margin-bottom:22px; cursor:pointer;}
  .rw-earn-card h4{margin:0 0 4px;}
  .rw-earn-card p{margin:0; font-size:.82rem; color:var(--fg-muted);}
  .rw-activity-row{display:flex; align-items:center; gap:12px; border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-bottom:8px; max-width:640px;}
  .rw-activity-icon{width:30px; height:30px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .rw-activity-main{flex:1; min-width:0;}
  .rw-activity-title{font-size:.86rem; font-weight:600;}
  .rw-activity-sub{font-size:.76rem; color:var(--fg-muted);}
  .rw-activity-amount{font-family:var(--font-mono); font-weight:600; font-size:.88rem; text-align:right; flex-shrink:0;}
  .rw-activity-date{font-size:.74rem; color:var(--fg-muted); text-align:right; flex-shrink:0;}

  /* ---- Trading conditions ---- */
  .tc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:900px;}
  @media (max-width:680px){ .tc-grid{grid-template-columns:1fr;} }
  .tc-card{border:1px solid var(--border); border-radius:14px; padding:20px; cursor:pointer; transition:border-color .15s;}
  .tc-card:hover{border-color:var(--accent);}
  .tc-card-top{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
  .tc-card h4{margin:0; font-size:.98rem;}
  .tc-ext-tag{font-size:.68rem; background:var(--surface-2); border-radius:6px; padding:2px 7px; font-weight:600; color:var(--fg-muted);}
  .tc-card p{margin:0 0 14px; font-size:.84rem; color:var(--fg-muted); line-height:1.45;}
  .tc-card-arrow{width:28px; height:28px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.9rem;}

  /* ---- Savings ---- */
  .sv-ring-wrap{display:flex; gap:28px; align-items:center; flex-wrap:wrap; margin-bottom:28px;}
  .sv-ring{width:220px; height:220px; border-radius:50%; border:14px solid color-mix(in srgb, var(--accent) 55%, var(--border)); display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center;}
  .sv-ring-val{font-family:var(--font-mono); font-size:1.7rem; font-weight:700;}
  .sv-nbp-card{border:1px solid var(--border); border-radius:12px; padding:18px; min-width:260px; cursor:pointer;}
  .sv-nbp-card .s-label{font-size:.78rem; color:var(--fg-muted); margin-bottom:8px; display:flex; align-items:center; gap:5px;}
  .sv-nbp-row{display:flex; align-items:center; justify-content:space-between; gap:12px;}
  .sv-nbp-val{font-family:var(--font-mono); font-size:1.5rem; font-weight:700;}

  /* ---- VPS ---- */
  .vps-head-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px;}
  .vps-dot{width:8px; height:8px; border-radius:50%; background:var(--buy); display:inline-block; margin-right:5px;}
  .vps-dot.off{background:var(--sell);}
  .vps-status-tag{font-size:.82rem; color:var(--fg-muted);}
  .vps-actions{display:flex; gap:8px; margin-left:auto; flex-wrap:wrap; position:relative;}
  .vps-more-menu{position:absolute; top:calc(100% + 6px); right:0; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.18); min-width:180px; z-index:20; overflow:hidden;}
  .vps-more-menu button{display:block; width:100%; text-align:left; padding:10px 14px; background:none; border:none; font:inherit; color:var(--fg); cursor:pointer;}
  .vps-more-menu button:hover{background:var(--surface-2);}
  .vps-more-menu button.danger{color:var(--sell);}
  .vps-banner{border:1px solid color-mix(in srgb, var(--buy) 40%, var(--border)); background:color-mix(in srgb, var(--buy) 12%, var(--surface)); border-radius:12px; padding:14px 18px; margin-bottom:22px; max-width:760px; position:relative;}
  .vps-banner a{color:var(--accent);}
  .vps-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:900px;}
  @media (max-width:720px){ .vps-grid{grid-template-columns:1fr;} }
  .vps-card{border:1px solid var(--border); border-radius:12px; padding:18px;}
  .vps-card h4{margin:0 0 14px; font-size:.92rem;}
  .vps-row{display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px dashed var(--border); font-size:.84rem;}
  .vps-row:last-child{border-bottom:none;}
  .vps-row .k{color:var(--fg-muted);}
  .vps-row .v{font-weight:600;}
  .vps-status-ok{color:var(--buy);}

  /* ---- Benefit detail modal (shared by Trading conditions / Savings) ---- */
  .detail-modal .modal-card{max-width:480px;}

  /* ---- Simple "coming soon" style pages (Support hub / Security) ---- */
  .soon-card{border:1px solid var(--border); border-radius:14px; padding:28px; max-width:520px; text-align:center;}
  .soon-card .soon-icon{font-size:1.8rem; margin-bottom:10px;}
  .soon-card p{color:var(--fg-muted); font-size:.88rem; line-height:1.5;}

  /* ---- Trading terminal ---- */
  .term-topbar{display:flex; align-items:center; gap:14px; border:1px solid var(--border); border-radius:12px 12px 0 0; padding:10px 16px; flex-wrap:wrap; background:var(--surface);}
  .term-symbol-tab{display:flex; align-items:center; gap:8px; font-weight:700; font-size:.95rem; border-bottom:2px solid var(--accent); padding-bottom:4px;}
  .term-symbol-icon{font-size:1.1rem;}
  .term-topbar-spacer{flex:1;}
  .term-acct-select{max-width:220px; padding:6px 10px; font-size:.82rem; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--fg);}
  .term-topbar-balance{font-family:var(--font-mono); font-weight:700; font-size:.95rem;}
  .term-body{display:grid; grid-template-columns:190px 1fr 230px; border:1px solid var(--border); border-top:none;}
  @media (max-width:980px){ .term-body{grid-template-columns:1fr;} }
  .term-watchlist{border-right:1px solid var(--border); overflow-y:auto; max-height:640px;}
  @media (max-width:980px){ .term-watchlist{border-right:none; border-bottom:1px solid var(--border); max-height:220px;} }
  .term-watch-row{display:flex; justify-content:space-between; align-items:center; padding:9px 12px; cursor:pointer; border-bottom:1px solid var(--border); font-size:.8rem;}
  .term-watch-row:hover{background:var(--surface-2);}
  .term-watch-row.active{background:color-mix(in srgb, var(--accent) 16%, var(--surface));}
  .term-watch-name{font-weight:600;}
  .term-watch-price{font-family:var(--font-mono); text-align:right; transition:color .3s;}
  .term-watch-price.up{color:var(--buy);}
  .term-watch-price.down{color:var(--sell);}
  .term-chart-area{min-width:0; display:flex; flex-direction:column; border-right:1px solid var(--border);}
  @media (max-width:980px){ .term-chart-area{border-right:none; border-bottom:1px solid var(--border);} }
  .term-toolbar{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; border-bottom:1px solid var(--border); flex-wrap:wrap;}
  .term-ohlc{font-family:var(--font-mono); font-size:.76rem; color:var(--fg-muted);}
  .term-ohlc b{color:var(--fg); font-weight:600;}
  .term-tf-group{display:flex; gap:4px;}
  .term-tf-group button{border:1px solid var(--border); background:var(--surface); color:var(--fg-muted); border-radius:6px; padding:4px 9px; font-size:.76rem; cursor:pointer; font-weight:600;}
  .term-tf-group button.active{background:var(--accent); color:var(--accent-fg); border-color:var(--accent);}
  .term-chart-wrap{padding:10px 12px;}
  #termChart{width:100%; height:300px; display:block;}
  .term-positions-panel{border-top:1px solid var(--border); padding:10px 12px 14px;}
  .term-tabs{display:flex; gap:4px; margin-bottom:10px;}
  .term-tab{border:none; background:none; color:var(--fg-muted); font-weight:600; font-size:.84rem; padding:6px 12px; border-radius:7px; cursor:pointer;}
  .term-tab.active{background:var(--surface-2); color:var(--fg);}
  .term-ticket{padding:16px;}
  .term-vol-field label{display:block; font-size:.76rem; color:var(--fg-muted); margin-bottom:5px;}
  .term-vol-controls{display:flex; align-items:center; gap:4px;}
  .term-vol-controls button{width:30px; height:36px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--fg); cursor:pointer; font-size:1rem;}
  .term-vol-controls input{flex:1; width:0; text-align:center; padding:8px 4px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--fg); font:inherit;}
  .term-ticket-row{display:flex; gap:10px; margin-top:14px;}
  .term-sell-btn, .term-buy-btn{flex:1; border:none; border-radius:10px; padding:14px 8px; font-weight:700; font-size:.88rem; cursor:pointer; color:#fff; display:flex; flex-direction:column; align-items:center; gap:2px;}
  .term-sell-btn{background:var(--sell);}
  .term-buy-btn{background:var(--buy);}
  .term-sell-btn span, .term-buy-btn span{font-family:var(--font-mono); font-weight:600; font-size:.8rem; opacity:.92;}
  .term-sltp-row .field{margin-bottom:0;}
  .term-pos-side{font-weight:700; font-size:.76rem; border-radius:6px; padding:3px 7px; display:inline-block;}
  .term-pos-side.buy{color:var(--buy); background:color-mix(in srgb, var(--buy) 16%, transparent);}
  .term-pos-side.sell{color:var(--sell); background:color-mix(in srgb, var(--sell) 16%, transparent);}
  .term-bottom-bar{display:flex; gap:26px; flex-wrap:wrap; border:1px solid var(--border); border-top:none; border-radius:0 0 12px 12px; padding:10px 18px; font-size:.82rem; background:var(--surface-2);}
  .term-bottom-bar .k{color:var(--fg-muted); margin-right:5px;}
  .term-bottom-bar span:last-child{font-family:var(--font-mono); font-weight:600;}
  .term-pl.pos{color:var(--buy);}
  .term-pl.neg{color:var(--sell);}

  /* ---- Real-app additions ---- */
  body{background:var(--bg); color:var(--fg); font-family:var(--font-body);}
  .auth-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px; background:var(--bg);}
  .auth-card{width:100%; max-width:420px; border:1px solid var(--border); border-radius:16px; padding:28px; background:var(--surface);}
  .auth-card .brand{font-size:1.4rem; margin-bottom:6px;}
  .auth-card h1{font-size:1.25rem; margin:14px 0 6px;}
  .auth-card .auth-sub{color:var(--fg-muted); font-size:.86rem; margin-bottom:18px; line-height:1.5;}
  .auth-tabs{display:flex; gap:6px; margin:18px 0 4px;}
  .auth-tabs button{flex:1; border:1px solid var(--border); background:var(--surface); color:var(--fg-muted); border-radius:8px; padding:9px; font:inherit; font-weight:600; cursor:pointer;}
  .auth-tabs button.active{background:var(--accent); color:var(--accent-fg); border-color:var(--accent);}
  .auth-link{background:none; border:none; color:var(--accent); font:inherit; font-size:.84rem; cursor:pointer; padding:0;}
  .auth-foot{margin-top:16px; font-size:.78rem; color:var(--fg-muted); line-height:1.5;}
  .app-loading{min-height:60vh; display:flex; align-items:center; justify-content:center; color:var(--fg-muted);}
  .toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); opacity:0; pointer-events:none;
         background:var(--fg); color:var(--bg); padding:12px 18px; border-radius:10px; font-size:.88rem; max-width:min(92vw,520px);
         box-shadow:0 10px 30px rgba(0,0,0,.25); transition:opacity .2s, transform .2s; z-index:200;}
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
  .toast.error{background:var(--sell); color:#fff;}
  .btn[disabled], button[disabled]{opacity:.55; cursor:not-allowed;}
  .acct-nick{font-size:.8rem; color:var(--fg-muted); margin-top:2px;}
  .archived-toggle{margin-top:18px;}
  .admin-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px;}
  .admin-tabs button{border:1px solid var(--border); background:var(--surface); color:var(--fg-muted); border-radius:8px; padding:7px 12px; font:inherit; font-size:.84rem; font-weight:600; cursor:pointer;}
  .admin-tabs button.active{background:var(--surface-2); color:var(--fg); border-color:var(--accent);}
  .admin-tabs .count{display:inline-block; min-width:18px; padding:0 5px; margin-left:4px; border-radius:999px; background:var(--accent); color:var(--accent-fg); font-size:.72rem;}
  .admin-row{flex-wrap:wrap;}
  .admin-row-sub.wrap{white-space:normal; word-break:break-all;}
  .admin-search{max-width:320px; margin-bottom:12px; width:100%; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:9px 10px; color:var(--fg); font:inherit; font-size:.88rem;}
  .admin-search:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
  a.btn{text-decoration:none; display:inline-flex; align-items:center; justify-content:center;}
  .btn{white-space:nowrap;}
  input[type=file]::file-selector-button{border-radius:6px; padding:6px 12px; margin-right:10px; font:inherit; font-size:.82rem; font-weight:600; border:1px solid var(--border); background:var(--surface-2); color:var(--fg); cursor:pointer;}
  .msg-body{white-space:pre-wrap; font-size:.86rem; line-height:1.5; margin-top:4px;}
  .term-chart-host{height:520px; position:relative;}
  .term-ohlc-bar{margin-left:10px;}
  @media (max-width:640px){ .term-chart-host{height:360px;} }
  .term-chart-note{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; color:var(--fg-muted); font-size:.86rem;}
  .term-ticket-disabled{border:1px dashed var(--border); border-radius:10px; padding:12px; font-size:.82rem; color:var(--fg-muted); line-height:1.5; margin-top:12px;}
  .term-live{font-size:.6rem; font-weight:700; color:var(--buy); border:1px solid var(--buy); border-radius:4px; padding:0 4px; margin-left:4px; vertical-align:middle;}
  .term-acts{display:flex; gap:6px;}
  .term-acts .btn{width:auto; padding:5px 10px; font-size:.78rem;}
  .faq-row{cursor:pointer; align-items:flex-start;}
  .perf-filters{display:flex; gap:10px; flex-wrap:wrap;}
  .perf-filters select{width:auto;}
  .chart-empty{padding:50px 10px; text-align:center; color:var(--fg-muted); font-size:.86rem;}
  .ledger-amt.pos{color:var(--buy);}
  .ledger-amt.neg{color:var(--sell);}
  .demo-ribbon{display:none;}
  .term-body{grid-template-columns:220px 1fr 240px;}
  @media (max-width:980px){ .term-body{grid-template-columns:1fr;} }
  .term-watch-name{white-space:nowrap; display:flex; align-items:center; gap:5px; min-width:0;}
  .term-watch-price{white-space:nowrap; font-size:.78rem;}

  /* ---- insufficient funds popup ---- */
  .funds-icon{width:46px; height:46px; margin:0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.3rem;
    background:color-mix(in srgb, var(--warn) 18%, transparent); color:var(--warn);}

  /* ---- terminal: full width, closable symbol list, quick trade on small screens ---- */
  body.page-terminal .dash-wrap{max-width:none; padding-inline:12px;}
  .term-pairs-btn{border:1px solid var(--border); background:var(--surface-2); color:var(--fg); border-radius:8px; padding:6px 10px; font-size:.78rem; font-weight:600; cursor:pointer; white-space:nowrap;}
  .term-pairs-btn[aria-pressed="false"]{background:var(--surface); color:var(--fg-muted);}
  .term-body.no-pairs{grid-template-columns:1fr 240px;}
  .term-body.no-pairs .term-watchlist{display:none;}
  @media (max-width:980px){ .term-body.no-pairs{grid-template-columns:1fr;} }
  .term-quick{display:none; position:absolute; top:8px; right:70px; z-index:5; gap:6px; align-items:stretch;}
  .term-quick-vol{display:flex; align-items:center; border:1px solid var(--border); border-radius:8px; background:var(--surface); overflow:hidden;}
  .term-quick-vol button{width:26px; height:100%; border:none; background:none; color:var(--fg); font-size:1rem; cursor:pointer;}
  .term-quick-vol input{width:44px; border:none; background:none; color:var(--fg); text-align:center; font:600 .8rem var(--font-mono); padding:0;}
  .term-quick-btn{border:none; border-radius:8px; color:#fff; font-weight:700; font-size:.72rem; padding:5px 10px; display:flex; flex-direction:column; align-items:center; line-height:1.2; cursor:pointer; min-width:72px;}
  .term-quick-btn span{font-family:var(--font-mono); font-size:.74rem; font-weight:600;}
  .term-quick-btn.sell{background:var(--sell);}
  .term-quick-btn.buy{background:var(--buy);}
  .term-quick-btn:disabled{opacity:.5; cursor:not-allowed;}
  @media (max-width:980px){ .term-quick{display:flex;} }
  @media (max-width:420px){ .term-quick{right:56px; top:6px;} .term-quick-btn{min-width:62px; padding:4px 7px;} .term-quick-vol input{width:36px;} }

  /* ---- chart legend (top-left of the chart, like TradingView) ---- */
  .term-legend{position:absolute; top:8px; left:10px; z-index:4; pointer-events:none; font:12px/1.5 -apple-system, BlinkMacSystemFont, "Trebuchet MS", Roboto, sans-serif;
    color:#a3a6af; display:flex; flex-wrap:wrap; gap:4px 10px; max-width:calc(100% - 330px);}
  .term-legend .lg-sym{color:var(--fg); font-weight:600;}
  .term-legend b{font-weight:500; margin:0 6px 0 2px;}
  .term-legend .lg-up b{color:#22ab94;} .term-legend .lg-down b{color:#f23645;}
  @media (max-width:980px){ .term-legend{max-width:calc(100% - 20px); top:46px;} }
  .term-tf-sep{width:1px; align-self:stretch; background:var(--border); margin:0 4px;}
  .term-chart-wrap{background:#131722;}
  :root[data-theme="light"] .term-chart-wrap{background:#fff;}

  /* ---- refer a friend ---- */
  .rf-hero{display:grid; grid-template-columns:1fr 1.3fr; gap:24px; align-items:center; border:1px solid var(--border); border-radius:16px; padding:24px; margin-bottom:20px;
    background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface));}
  .rf-big{font-family:var(--font-display); font-size:3rem; font-weight:600; color:var(--accent); line-height:1;}
  .rf-big-sub{font-size:.9rem; color:var(--fg-muted); margin-top:8px; line-height:1.5; max-width:34ch;}
  .rf-link-box label{display:block; font-size:.72rem; color:var(--fg-muted); margin-bottom:6px;}
  .rf-link-row{display:flex; gap:8px; margin-bottom:8px;}
  .rf-link-row input{flex:1; min-width:0; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--fg); font:500 .85rem var(--font-mono); padding:10px 12px;}
  .rf-link-row .btn{width:auto; padding:10px 18px;}
  @media (max-width:760px){ .rf-hero{grid-template-columns:1fr;} }
  /* ---- share performance ---- */
  .share-card{display:flex; gap:18px; align-items:flex-start; justify-content:space-between; border:1px solid var(--border); border-radius:14px; padding:16px 18px; margin-bottom:18px;}
  .share-card-main{flex:1; min-width:0;}
  .share-title{font-weight:600; margin-bottom:4px;}
  .share-row{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}
  .share-row input{border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--fg); font:inherit; font-size:.85rem; padding:9px 12px;}
  .share-row #shareName{width:170px;}
  .share-row #shareLink{flex:1; min-width:200px; font-family:var(--font-mono);}
  .share-row .btn{width:auto; padding:9px 14px; text-decoration:none;}

  /* ================= Trading terminal: phone layout (edge to edge, app-like) ================= */
  .term-symbol-tab{border:none; border-bottom:2px solid var(--accent); background:none; color:inherit; font:inherit; font-weight:700; font-size:.95rem; cursor:pointer;}
  .term-m-head, .term-m-icon, .term-m-sheet-head, .term-m-backdrop, .term-m-caret, .term-m-status, .term-m-metrics{display:none;}
  .term-quick-btn em{font-style:normal;}
  .term-quick-mid{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;}
  .term-quick-spread{font-size:.62rem; color:var(--fg-muted); font-family:var(--font-mono); display:none;}

  @media (max-width:760px){
    body.page-terminal{overflow-x:hidden; padding-bottom:calc(86px + env(safe-area-inset-bottom,0px));}
    body.page-terminal .topbar, body.page-terminal .site-footer{display:none;}
    body.page-terminal .dash-wrap{padding:0 !important; max-width:none; margin:0;}
    body.page-terminal #dashboard.section{padding:0;}
    body.page-terminal .app-shell{border:none; border-radius:0; background:var(--bg);}
    body.page-terminal .app-main{padding:0; border-radius:0;}

    /* header: menu · account + balance · Deposit */
    .term-m-head{display:flex; align-items:center; gap:12px; padding:8px 12px; background:var(--surface); border-bottom:1px solid var(--border);
      position:sticky; top:env(safe-area-inset-top,0px); z-index:25;}
    .term-m-menu{width:42px; height:42px; flex:none; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); color:var(--fg); font-size:1.15rem; cursor:pointer;}
    .term-m-acct{position:relative; flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; cursor:pointer;}
    .term-m-acct-top{display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--fg-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
    .term-m-badge{background:color-mix(in srgb, #f0b90b 22%, transparent); color:#e8b100; font-weight:700; font-size:.7rem; border-radius:5px; padding:2px 6px;}
    .term-m-bal{font-family:var(--font-mono); font-weight:700; font-size:1.02rem; color:var(--fg);}
    .term-m-acct select{position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; font-size:16px;}
    .term-m-caret{display:inline; font-size:.7rem; opacity:.7;}
    .term-m-dep{flex:none; border:1px solid var(--border); background:var(--surface-2); color:var(--fg); border-radius:10px; padding:10px 18px; font-weight:600; font-size:.9rem; cursor:pointer;}

    /* symbol row */
    .term-topbar{border:none; border-radius:0; border-bottom:1px solid var(--border); padding:6px 8px 6px 12px; flex-wrap:nowrap; gap:6px; background:var(--surface);}
    .term-topbar .term-pairs-btn, .term-topbar .term-acct-select, .term-topbar .term-topbar-balance{display:none;}
    .term-symbol-tab{border:none; display:flex; align-items:center; gap:8px; font-size:1.05rem; padding:6px 4px;}
    .term-m-status{display:inline-block; font-size:.62rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--fg-muted); border:1px solid var(--border); border-radius:4px; padding:1px 5px;}
    .term-m-icon{display:flex; align-items:center; justify-content:center; position:relative; width:40px; height:40px; border:none; background:none; color:var(--fg); font-size:1.1rem; cursor:pointer; border-radius:8px;}
    .term-m-count{position:absolute; top:3px; right:2px; min-width:16px; height:16px; border-radius:8px; background:var(--accent); color:var(--accent-fg); font-size:.62rem; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 4px;}

    /* timeframes: one clean scrollable row */
    .term-body, .term-body.no-pairs{border:none; grid-template-columns:1fr;}
    .term-chart-area{border:none;}
    .term-toolbar{padding:2px 6px; flex-wrap:nowrap; background:var(--surface);}
    .term-ohlc{display:none;}
    .term-tf-group{flex-wrap:nowrap; overflow-x:auto; gap:0; scrollbar-width:none; width:100%;}
    .term-tf-group::-webkit-scrollbar{display:none;}
    .term-tf-group button{border:none; background:none; padding:9px 11px; font-size:.86rem; flex:none; border-radius:0;}
    .term-tf-group button.active{background:none; color:var(--accent); border-color:transparent;}

    /* chart fills the screen */
    .term-chart-host{height:calc(100vh - 262px); height:calc(100dvh - 262px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); min-height:300px;}
    .term-legend{top:8px; max-width:calc(100% - 80px);}

    /* bottom trade bar: Sell | lots | Buy */
    .term-quick{display:grid !important; position:fixed; left:0; right:0; top:auto; bottom:0; z-index:30; grid-template-columns:1fr auto 1fr; gap:8px; align-items:stretch;
      padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px)); background:var(--surface); border-top:1px solid var(--border);}
    .term-quick-btn{min-width:0; border-radius:10px; padding:9px 14px; align-items:flex-start; justify-content:center; gap:2px; font-size:.78rem; font-weight:500;}
    .term-quick-btn em{opacity:.85;}
    .term-quick-btn span{font-size:1.05rem; font-weight:600;}
    .term-quick-btn.buy{align-items:flex-end;}
    .term-quick-vol{height:38px; border-radius:9px; background:var(--surface-2);}
    .term-quick-vol button{width:32px; font-size:1.1rem;}
    .term-quick-vol input{width:46px; font-size:.9rem;}
    .term-quick-spread{display:block;}

    /* account figures above the positions */
    .term-m-metrics{display:flex; justify-content:space-between; gap:8px; padding:10px 2px 12px; font-family:var(--font-mono); font-size:.8rem; font-weight:600;}
    .term-m-metrics span{display:flex; flex-direction:column; gap:2px; min-width:0;}
    .term-m-metrics span:last-child{text-align:right;}
    .term-m-metrics i{font-style:normal; font-family:var(--font-body, inherit); font-weight:400; font-size:.7rem; color:var(--fg-muted);}
    .term-positions-panel{padding:0 12px 16px; background:var(--bg); scroll-margin-top:calc(64px + env(safe-area-inset-top,0px));}
    .term-bottom-bar{display:none;}

    /* symbol list: a full-height sheet */
    .term-watchlist{display:none;}
    body.m-symbols .term-m-sheet-head#termSymHead{display:flex;}
    body.m-symbols .term-watchlist{display:block; position:fixed; left:0; right:0; bottom:0; top:calc(env(safe-area-inset-top,0px) + 112px); z-index:42; max-height:none;
      background:var(--surface); border:none; overflow-y:auto; padding-bottom:env(safe-area-inset-bottom,0px);}
    #termSymHead{position:fixed; left:0; right:0; top:calc(env(safe-area-inset-top,0px) + 60px); height:52px; z-index:42; background:var(--surface); border-bottom:1px solid var(--border); border-radius:16px 16px 0 0;}
    .term-m-sheet-head{align-items:center; justify-content:space-between; padding:0 8px 0 16px; font-size:1rem;}
    .term-m-sheet-head button{width:40px; height:40px; border:none; background:none; color:var(--fg-muted); font-size:1.1rem; cursor:pointer;}
    body.m-symbols .term-watch-row{padding:15px 16px; font-size:.95rem;}
    body.m-symbols .term-watch-price{font-size:.95rem;}

    /* order settings (pending orders, SL/TP): a bottom sheet */
    .term-ticket{display:none;}
    body.m-ticket .term-ticket{display:block; position:fixed; left:0; right:0; bottom:0; z-index:42; max-height:86vh; overflow-y:auto; background:var(--surface);
      border-radius:16px 16px 0 0; padding:0 16px calc(18px + env(safe-area-inset-bottom,0px)); box-shadow:0 -10px 40px rgba(0,0,0,.35);}
    body.m-ticket .term-m-ticket-head{display:flex; position:sticky; top:0; background:var(--surface); margin:0 -16px 10px; padding:6px 8px 6px 16px; border-bottom:1px solid var(--border); z-index:1;}
    body.m-symbols .term-m-backdrop, body.m-ticket .term-m-backdrop{display:block; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:41;}
  }

  /* Phones: content reaches the screen edges (no double gutters) */
  @media (max-width:760px){
    body{padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px);}
    .topbar-inner{padding-inline:12px;}
    .dash-wrap{padding-inline:0 !important;}
    .app-shell{border:none; border-radius:0;}
    .app-main{padding:18px 14px;}
    .site-footer{padding-inline:16px;}

    /* terminal positions as clean cards instead of a cramped table */
    body.page-terminal .term-tab-panel .table-wrap{overflow-x:auto;}
    body.page-terminal [data-pos-panel="pending"] table, body.page-terminal [data-pos-panel="closed"] table{white-space:nowrap; font-size:.8rem;}
    body.page-terminal [data-pos-panel="open"] thead{display:none;}
    body.page-terminal [data-pos-panel="open"] table, body.page-terminal [data-pos-panel="open"] tbody{display:block; width:100%;}
    body.page-terminal #termOpenBody tr{display:grid; grid-template-columns:auto auto auto 1fr auto; column-gap:8px; row-gap:4px; align-items:center;
      grid-template-areas:"sym side lots . pl" "open open cur cur act" "sltp sltp sltp sltp act"; padding:12px 2px; border-bottom:1px solid var(--border);}
    body.page-terminal #termOpenBody td{padding:0; border:none; font-size:.8rem;}
    body.page-terminal #termOpenBody td:nth-child(1){grid-area:sym; font-weight:700; font-size:.92rem;}
    body.page-terminal #termOpenBody td:nth-child(2){grid-area:side;}
    body.page-terminal #termOpenBody td:nth-child(3){grid-area:lots; font-family:var(--font-mono); color:var(--fg-muted);}
    body.page-terminal #termOpenBody td:nth-child(3)::after{content:" lot";}
    body.page-terminal #termOpenBody td:nth-child(4){grid-area:open; color:var(--fg-muted);}
    body.page-terminal #termOpenBody td:nth-child(4)::after{content:" →";}
    body.page-terminal #termOpenBody td:nth-child(5){grid-area:cur; color:var(--fg-muted);}
    body.page-terminal #termOpenBody td:nth-child(6){grid-area:sltp; color:var(--fg-muted); font-size:.72rem;}
    body.page-terminal #termOpenBody td:nth-child(7){grid-area:pl; text-align:right; font-weight:700; font-size:.98rem;}
    body.page-terminal #termOpenBody td:nth-child(8){grid-area:act; justify-self:end;}
  }
  .imp-tag{display:inline-block; font-size:.66rem; font-weight:600; color:#c99a1a; background:color-mix(in srgb, #f0b90b 14%, transparent); border-radius:4px; padding:1px 6px; white-space:nowrap; vertical-align:middle;}

  /* ================= Terminal: one screen (chart, divider, trades) + account bar fixed at the bottom ================= */
  .term-real-badge{background:color-mix(in srgb, #f0b90b 22%, transparent); color:#e8b100; font-weight:700; font-size:.72rem; border-radius:5px; padding:3px 8px; letter-spacing:.02em;}
  .term-split{flex:none; height:9px; cursor:row-resize; display:flex; align-items:center; justify-content:center; background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); touch-action:none; user-select:none;}
  .term-split span{width:44px; height:3px; border-radius:2px; background:var(--border);}
  .term-split:hover span, body.term-resizing .term-split span{background:var(--accent);}
  body.term-resizing{cursor:row-resize; user-select:none;}
  body.term-resizing .term-chart-host{pointer-events:none;}
  .mod-pos-live{display:flex; justify-content:space-between; gap:10px; padding:10px 12px; margin-bottom:12px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); font-size:.8rem; color:var(--fg-muted);}
  .mod-pos-live b{display:block; font-family:var(--font-mono); color:var(--fg); font-size:.92rem; margin-top:2px;}
  .mod-pos-live b.up{color:var(--buy);} .mod-pos-live b.down{color:var(--sell);}
  .mod-close-pos{border-color:var(--sell); color:var(--sell);}
  .mod-close-pos:hover{background:var(--sell); color:#fff;}

  @media (min-width:761px){
    body.page-terminal{padding-bottom:46px;}
    body.page-terminal .site-footer{display:none;}
    body.page-terminal .term-bottom-bar{position:fixed; left:0; right:0; bottom:0; z-index:20; border:none; border-top:1px solid var(--border); border-radius:0;
      padding:10px 22px; gap:28px; background:var(--surface-2); box-shadow:0 -6px 18px rgba(0,0,0,.18);}
    body.page-terminal .term-split{display:flex;}
  }
  @media (min-width:981px){
    .term-body{height:calc(100vh - var(--term-top, 150px) - 54px); min-height:460px;}
    .term-watchlist{max-height:none; overflow-y:auto;}
    .term-ticket{overflow-y:auto;}
    .term-chart-area{display:flex; flex-direction:column; min-height:0;}
    .term-chart-wrap{flex:1 1 auto; min-height:180px; display:flex; flex-direction:column;}
    .term-chart-host{flex:1; height:auto; min-height:160px;}
    .term-positions-panel{flex:none; height:var(--pos-h, 34%); overflow-y:auto; border-top:none; padding-top:8px;}
  }
  @media (max-width:980px) and (min-width:761px){ .term-split{display:none !important;} }

  @media (max-width:760px){
    /* chart · divider · trades, then the account bar and Sell/Buy fixed at the bottom */
    body.page-terminal{padding-bottom:calc(142px + env(safe-area-inset-bottom,0px));}
    .term-chart-host{height:calc(100vh - 300px - var(--pos-h, 170px)); height:calc(100dvh - 300px - var(--pos-h, 170px) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); min-height:200px;}
    .term-positions-panel{height:var(--pos-h, 170px); overflow-y:auto;}
    .term-m-metrics{display:none !important;}
    .term-bottom-bar{display:grid !important; grid-template-columns:repeat(3, 1fr); gap:4px 10px; position:fixed; left:0; right:0; z-index:29;
      bottom:calc(76px + env(safe-area-inset-bottom,0px)); padding:7px 12px; margin:0; border:none; border-top:1px solid var(--border); border-radius:0;
      background:var(--surface-2); font-size:.68rem;}
    .term-bottom-bar > div{display:flex; flex-direction:column; min-width:0;}
    .term-bottom-bar .k{margin:0; font-size:.64rem;}
    .term-bottom-bar span:last-child{font-size:.74rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  }

  /* Desktop terminal: full screen like a trading platform (own header, no site frame) */
  .term-logo, .term-deposit-btn{display:none;}
  @media (min-width:761px){
    body.page-terminal .topbar{display:none;}
    body.page-terminal .dash-wrap{padding:0 !important; max-width:none; margin:0;}
    body.page-terminal #dashboard.section{padding:0;}
    body.page-terminal .app-shell{border:none; border-radius:0;}
    body.page-terminal .app-main{padding:0; border-radius:0;}
    body.page-terminal .app-sidebar, body.page-terminal .sidebar-rail{top:0; max-height:calc(100vh - 46px);}
    body.page-terminal .term-topbar{border-radius:0; border-left:none; border-right:none; border-top:none; padding:8px 14px; gap:12px; position:sticky; top:0; z-index:15;}
    body.page-terminal .term-body{border-left:none; border-right:none;}
    .term-logo{display:flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:600; font-size:1.08rem; color:var(--fg); text-decoration:none; margin-right:6px;}
    .term-deposit-btn{display:inline-block; width:auto; padding:8px 18px;}
    .term-topbar-balance{font-size:1rem;}
  }
  @media (min-width:761px){ body.page-terminal{padding-left:0; padding-right:0;} }

  /* ================= Chart drawing tools ================= */
  .term-chart-row{display:flex; position:relative; min-height:0;}
  .term-chart-row .term-chart-host{flex:1; min-width:0;}
  .draw-bar{flex:none; width:42px; display:flex; flex-direction:column; align-items:center; gap:1px; padding:6px 0; background:var(--surface);
    border-right:1px solid var(--border); overflow-y:auto; scrollbar-width:none;}
  .draw-bar::-webkit-scrollbar{display:none;}
  .draw-btn{flex:none; width:32px; height:30px; border:none; background:none; color:var(--fg-muted); border-radius:6px; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;}
  .draw-btn svg{width:19px; height:19px;}
  .draw-btn:hover{background:var(--surface-2); color:var(--fg);}
  .draw-btn.active{color:#f0b90b; background:color-mix(in srgb, #f0b90b 13%, transparent);}
  .draw-sep{flex:none; width:22px; height:1px; background:var(--border); margin:5px 0;}
  .draw-emoji-pick{position:absolute; left:46px; top:8px; z-index:30; display:grid; grid-template-columns:repeat(4, 36px); gap:2px; padding:6px; background:var(--surface);
    border:1px solid var(--border); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.35);}
  .draw-emoji-pick[hidden]{display:none;}
  .draw-emoji-pick button{width:36px; height:36px; border:none; background:none; font-size:20px; cursor:pointer; border-radius:6px;}
  .draw-emoji-pick button:hover{background:var(--surface-2);}
  .draw-layer{position:absolute; left:0; top:0; z-index:3; pointer-events:none; overflow:hidden;}
  .draw-layer.drawing{pointer-events:all; cursor:crosshair; touch-action:none;}
  .draw-layer *{pointer-events:none;}
  .draw-layer .draw-hitline{stroke:transparent; stroke-width:12; fill:none; pointer-events:stroke; cursor:pointer;}
  .draw-layer .draw-hitbox{fill:transparent; pointer-events:all; cursor:move;}
  .draw-layer .draw-fill{pointer-events:all; cursor:move;}
  .draw-layer .draw-handle{fill:#131722; stroke:#f0b90b; stroke-width:2; pointer-events:all; cursor:grab;}
  .draw-layer.drawing .draw-hitline, .draw-layer.drawing .draw-hitbox, .draw-layer.drawing .draw-fill, .draw-layer.drawing .draw-handle{pointer-events:none;}
  .draw-label{font:11px -apple-system, BlinkMacSystemFont, "Trebuchet MS", Roboto, sans-serif;}
  .draw-text{font:600 14px -apple-system, BlinkMacSystemFont, "Trebuchet MS", Roboto, sans-serif;}
  .draw-emoji{font-size:22px;}
  .draw-text-input{position:absolute; z-index:6; width:200px; padding:5px 8px; font:13px var(--font-body); border:1px solid #f0b90b; border-radius:6px; background:var(--surface); color:var(--fg);}
  .term-draw-toggle{display:none;}
  @media (max-width:760px){
    .draw-bar{display:none; position:absolute; left:0; top:0; bottom:0; z-index:8; box-shadow:4px 0 16px rgba(0,0,0,.3);}
    body.m-draw .draw-bar{display:flex;}
    .term-draw-toggle{display:inline-block;}
    .term-draw-toggle.active{color:#f0b90b !important;}
  }
  .term-closeall-btn{margin-left:auto; border:1px solid var(--border); background:var(--surface); color:var(--fg); border-radius:7px; padding:4px 12px; font-size:.8rem; font-weight:600; cursor:pointer; white-space:nowrap;}
  .term-closeall-btn:hover{border-color:var(--sell); color:var(--sell);}
  .term-closeall-tabs{display:none;}
  .term-closeall-menu{position:fixed; z-index:60; min-width:250px; padding:6px; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 12px 34px rgba(0,0,0,.4);}
  .term-closeall-menu[hidden]{display:none;}
  .term-closeall-menu button{display:flex; width:100%; justify-content:space-between; gap:14px; align-items:center; border:none; background:none; color:var(--fg); padding:9px 10px; border-radius:7px; font-size:.86rem; cursor:pointer; text-align:left;}
  .term-closeall-menu button:hover:not(:disabled){background:var(--surface-2);}
  .term-closeall-menu button:disabled{opacity:.45; cursor:default;}
  .term-closeall-menu i{font-style:normal; color:var(--fg-muted);}
  .term-closeall-menu b{font-family:var(--font-mono); font-weight:600;}
  .term-closeall-menu b.up{color:var(--buy);} .term-closeall-menu b.down{color:var(--sell);}
  .term-tabs{align-items:center;}
  @media (max-width:760px){ .term-bottom-bar .term-closeall-btn{display:none;} .term-closeall-tabs{display:inline-block;} }
  /* phones: the menu drawer must open even when the terminal has collapsed the desktop sidebar */
  @media (max-width:820px){ .app-shell.sidebar-collapsed .app-sidebar{display:flex;} }
  @media (max-width:760px){ .term-topbar .term-real-badge{display:none;} }

  /* ================= Drawing toolbar v2: groups with menus, favourites, edit bar ================= */
  .draw-bar{width:46px; gap:2px; padding:6px 0 10px;}
  .draw-btn{position:relative; width:36px; height:34px;}
  .draw-btn svg{width:21px; height:21px;}
  .draw-btn .draw-more{position:absolute; right:0; bottom:0; width:12px; height:12px; cursor:pointer;}
  .draw-btn .draw-more::after{content:""; position:absolute; right:2px; bottom:2px; border:3px solid transparent; border-right-color:currentColor; border-bottom-color:currentColor; opacity:.55;}
  .draw-btn:hover .draw-more::after{opacity:1;}
  .draw-emoji-ic{font-size:18px; line-height:1;}
  .draw-fav{color:#f0b90b;}
  .draw-fly{position:absolute; z-index:40; width:290px; overflow-y:auto; padding:6px 0; background:var(--surface); border:1px solid var(--border);
    border-radius:10px; box-shadow:0 14px 40px rgba(0,0,0,.45); scrollbar-width:thin;}
  .draw-fly-h{padding:9px 16px 5px; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-muted);}
  .draw-fly-sep{height:1px; margin:5px 0; background:var(--border);}
  .draw-fly-row{display:flex; align-items:center; gap:12px; padding:7px 10px 7px 14px; cursor:pointer; color:var(--fg); font-size:.88rem; user-select:none;}
  .draw-fly-row:hover{background:var(--surface-2);}
  .draw-fly-row.active{color:#f0b90b;}
  .draw-fly-row.disabled{opacity:.45; pointer-events:none;}
  .draw-fly-ic{flex:none; width:24px; height:24px; display:flex;}
  .draw-fly-ic svg{width:24px; height:24px;}
  .draw-fly-name{flex:1; min-width:0;}
  .draw-fly-key{font-size:.74rem; color:var(--fg-muted); white-space:nowrap;}
  .draw-fly-star{flex:none; width:24px; height:24px; padding:2px; border:none; background:none; color:var(--fg-muted); cursor:pointer; opacity:0;}
  .draw-fly-row:hover .draw-fly-star, .draw-fly-star.on{opacity:1;}
  .draw-fly-star.on{color:#f0b90b;} .draw-fly-star.on svg{fill:#f0b90b;}
  .draw-fly-star svg{width:18px; height:18px;}
  .draw-fly-emoji{width:280px;}
  .draw-emoji-grid{display:grid; grid-template-columns:repeat(6, 1fr); gap:2px; padding:4px 10px 6px;}
  .draw-emoji-grid button{height:38px; border:none; background:none; font-size:21px; cursor:pointer; border-radius:6px; color:var(--fg);}
  .draw-emoji-grid button:hover{background:var(--surface-2);}
  .draw-layer{z-index:4;}
  .draw-layer .draw-handle{fill:#131722; stroke:#2962ff; stroke-width:2;}
  .draw-item.locked{opacity:.85;}
  .term-chart-host[data-cursor="dot"]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Ccircle cx='6' cy='6' r='3' fill='%23d1d4dc' stroke='%23131722'/%3E%3C/svg%3E") 6 6, default;}
  .term-chart-host[data-cursor="arrowcur"]{cursor:default;}
  .term-chart-host[data-cursor="eraser"] .draw-item{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23f23645'%3E%3Cpath d='M8.5 19.5L3.8 14.8a1.5 1.5 0 010-2.1l8.9-8.9a1.5 1.5 0 012.1 0l5.3 5.3a1.5 1.5 0 010 2.1l-8.4 8.3z'/%3E%3C/svg%3E") 4 16, pointer;}
  .term-chart-host[data-cursor="eraser"] .draw-layer .draw-hitline, .term-chart-host[data-cursor="eraser"] .draw-layer .draw-fill, .term-chart-host[data-cursor="eraser"] .draw-layer .draw-hitbox{cursor:inherit;}
  .draw-text-input{width:220px; resize:none; font:13px/1.35 var(--font-body);}
  .draw-done{position:absolute; z-index:9; top:10px; left:50%; transform:translateX(-50%); padding:7px 18px; border:none; border-radius:18px; background:#2962ff; color:#fff; font-weight:600; font-size:.85rem; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.35);}
  /* floating edit bar of the selected drawing */
  .dtb{position:absolute; z-index:12; top:10px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:2px; padding:4px 6px; background:var(--surface);
    border:1px solid var(--border); border-radius:9px; box-shadow:0 8px 26px rgba(0,0,0,.4); white-space:nowrap;}
  .dtb button, .dtb-grip{display:inline-flex; align-items:center; gap:6px; height:32px; min-width:32px; padding:0 6px; border:none; border-radius:6px; background:none; color:var(--fg); cursor:pointer; font-size:.82rem; position:relative;}
  .dtb button:hover:not(:disabled){background:var(--surface-2);}
  .dtb button:disabled{opacity:.4; cursor:default;}
  .dtb button.on{color:#f0b90b;}
  .dtb svg{width:20px; height:20px;}
  .dtb-grip{cursor:grab; color:var(--fg-muted); min-width:20px; padding:0 2px; touch-action:none;}
  .dtb-swatch{position:absolute; left:7px; right:7px; bottom:3px; height:3px; border-radius:2px;}
  .dtb-wl{display:inline-block; width:16px; background:currentColor; border-radius:1px;}
  .dtb-dash{display:inline-block; width:22px; border-top:2px solid currentColor;}
  .dtb-dash.dashed{border-top-style:dashed;} .dtb-dash.dotted{border-top-style:dotted;}
  .dtb-lots{display:inline-flex; align-items:center; gap:5px; font-size:.78rem; color:var(--fg-muted); padding:0 4px;}
  .dtb-lots input{width:64px; height:26px; padding:0 6px; border:1px solid var(--border); border-radius:5px; background:var(--surface-2); color:var(--fg); font-size:.8rem;}
  .dtb-pop{position:absolute; z-index:13; min-width:150px; padding:8px; background:var(--surface); border:1px solid var(--border); border-radius:9px; box-shadow:0 12px 30px rgba(0,0,0,.45);}
  .dtb-pal{display:grid; grid-template-columns:repeat(10, 20px); gap:4px;}
  .dtb-pal button{width:20px; height:20px; border-radius:4px; border:1px solid rgba(255,255,255,.15); cursor:pointer; padding:0;}
  .dtb-pal button.on{outline:2px solid #2962ff; outline-offset:1px;}
  .dtb-row{margin-top:8px; font-size:.8rem; color:var(--fg-muted);}
  .dtb-row label{display:flex; align-items:center; gap:8px; justify-content:space-between;}
  .dtb-row input[type=color]{width:36px; height:24px; border:none; background:none; padding:0;}
  .dtb-opt{display:flex; width:100%; align-items:center; gap:10px; padding:7px 10px; border:none; background:none; color:var(--fg); border-radius:6px; cursor:pointer; font-size:.85rem; text-align:left;}
  .dtb-opt:hover{background:var(--surface-2);} .dtb-opt.on{color:#f0b90b;}
  /* settings windows (drawing settings + chart settings) */
  .dset-back{position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:16px;}
  .dset{width:420px; max-width:100%; max-height:calc(100vh - 32px); display:flex; flex-direction:column; background:var(--surface); color:var(--fg); border:1px solid var(--border); border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.5);}
  .dset-head{display:flex; align-items:center; justify-content:space-between; padding:14px 18px 8px; font-size:1rem;}
  .dset-head button{border:none; background:none; color:var(--fg-muted); font-size:1.1rem; cursor:pointer;}
  .dset-tabs{display:flex; gap:18px; padding:0 18px; border-bottom:1px solid var(--border);}
  .dset-tabs button{border:none; background:none; color:var(--fg-muted); padding:9px 0; font-size:.88rem; cursor:pointer; border-bottom:2px solid transparent;}
  .dset-tabs button.on{color:var(--fg); border-bottom-color:var(--fg);}
  .dset-body{padding:12px 18px; overflow-y:auto;}
  .dset-body label{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:9px 0; font-size:.86rem;}
  .dset-body label small{color:var(--fg-muted); font-size:.72rem;}
  .dset-body label.chk{justify-content:flex-start;}
  .dset-body input[type=number], .dset-body select{width:150px; height:32px; padding:0 8px; border:1px solid var(--border); border-radius:6px; background:var(--surface-2); color:var(--fg); font-size:.85rem;}
  .dset-body input[type=color]{width:46px; height:28px; border:1px solid var(--border); border-radius:5px; background:none; padding:1px;}
  .dset-body textarea{width:100%; padding:8px; border:1px solid var(--border); border-radius:6px; background:var(--surface-2); color:var(--fg); font:14px var(--font-body); resize:vertical;}
  .dset-sub{margin:12px 0 4px; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-muted);}
  .dset-levels label.lvl{justify-content:flex-start; gap:8px; margin:5px 0;}
  .dset-levels label.lvl input[type=number]{width:90px;}
  .dset-note{font-size:.78rem; color:var(--fg-muted); line-height:1.45;}
  .dset-foot{display:flex; gap:8px; justify-content:flex-end; padding:10px 18px 16px; border-top:1px solid var(--border);}
  .dset-btn{height:34px; padding:0 16px; border:1px solid var(--border); border-radius:7px; background:none; color:var(--fg); cursor:pointer; font-size:.85rem;}
  .dset-btn.primary{background:var(--fg); color:var(--surface); border-color:var(--fg); font-weight:600;}

  /* ================= Chart controls ================= */
  .cui-nav{position:absolute; z-index:6; transform:translateX(-50%); display:flex; gap:6px; opacity:0; transition:opacity .2s; pointer-events:none;}
  .term-chart-host:hover .cui-nav, .term-chart-host.cui-touch .cui-nav{opacity:1; pointer-events:auto;}
  .cui-nav button{width:34px; height:30px; border:none; border-radius:6px; background:rgba(42,46,57,.88); color:#d1d4dc; display:flex; align-items:center; justify-content:center; cursor:pointer; touch-action:none;}
  .cui-nav button:nth-child(3){margin-left:10px;} .cui-nav button:nth-child(5){margin-left:10px;}
  .cui-nav button:hover{background:#3a3e4a; color:#fff;}
  .cui-nav svg{width:18px; height:18px;}
  :root[data-theme="light"] .cui-nav button{background:rgba(255,255,255,.95); color:#131722; box-shadow:0 1px 4px rgba(0,0,0,.18);}
  .cui-gear{position:absolute; bottom:0; z-index:5; display:flex; align-items:center; justify-content:center; border:none; background:transparent; color:var(--fg-muted); cursor:pointer; padding:0;}
  .cui-gear:hover{color:var(--fg); background:rgba(127,127,127,.12);}
  .cui-gear svg{width:17px; height:17px;}
  .cui-menu{position:absolute; z-index:50; width:300px; overflow-y:auto; padding:6px 0; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 14px 40px rgba(0,0,0,.45); font-size:.88rem;}
  .cui-menu hr{border:none; height:1px; background:var(--border); margin:5px 0;}
  .cui-menu button{display:flex; align-items:center; gap:8px; width:100%; padding:6px 14px; border:none; background:none; color:var(--fg); cursor:pointer; text-align:left; font-size:.88rem;}
  .cui-menu button:hover{background:var(--surface-2);}
  .cui-menu button svg{width:20px; height:20px; flex:none;}
  .cui-chk{flex:none; width:20px; text-align:center; color:var(--fg);}
  .cui-arrow{margin-left:auto; color:var(--fg-muted); font-size:.8rem;}
  .cui-menu button.open .cui-arrow{color:var(--fg);}
  .cui-sub{background:color-mix(in srgb, var(--surface-2) 60%, transparent);}
  .cui-sub button{padding-left:26px;}
  .cui-tzlist{max-height:260px; overflow-y:auto;}
  .cui-tzn{flex:1;} .cui-tzo{color:var(--fg-muted); font-size:.78rem;}
  .cui-mh{padding:8px 14px 6px; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-muted);}
  .cui-menu.foot{position:fixed; width:290px;}
  .cui-menu.foot.tz{max-height:420px;}
  .cui-goto{display:flex; gap:6px; padding:4px 14px 6px; flex-wrap:wrap;}
  .cui-goto input{height:32px; padding:0 8px; border:1px solid var(--border); border-radius:6px; background:var(--surface-2); color:var(--fg);}
  .cui-goto .dset-btn{width:auto;}
  .cui-note{padding:2px 14px 6px; font-size:.74rem; color:var(--fg-muted);}
  .cui-foot{flex:none; display:flex; align-items:center; justify-content:space-between; gap:8px; height:32px; padding:0 6px; border-top:1px solid var(--border);
    font-size:.78rem; overflow-x:auto; scrollbar-width:none;}
  .cui-foot::-webkit-scrollbar{display:none;}
  .cui-ranges, .cui-right{display:flex; align-items:center; gap:1px; flex:none;}
  .cui-foot button{height:26px; min-width:26px; padding:0 7px; border:none; border-radius:5px; background:none; color:var(--fg-muted); cursor:pointer; font-size:.78rem; display:inline-flex; align-items:center; justify-content:center;}
  .cui-foot button:hover{background:var(--surface-2); color:var(--fg);}
  .cui-foot button.on{color:#2962ff;}
  .cui-foot svg{width:17px; height:17px;}
  .cui-foot .cui-clock{font-variant-numeric:tabular-nums; color:var(--fg);}
  .cui-sep{width:1px; height:16px; background:var(--border); margin:0 4px;}
  body.chart-max .term-chart-area{position:fixed; inset:0; z-index:250; background:var(--bg, #131722);}
  body.chart-max .term-chart-area .term-chart-wrap{height:100%; display:flex; flex-direction:column;}
  body.chart-max .term-chart-row{flex:1; min-height:0;}
  body.chart-max .term-chart-row .term-chart-host{height:auto !important;}
  body.chart-max .term-quick{display:none;}
  @media (min-width:981px){ .term-chart-wrap > .term-chart-row{flex:1 1 auto; min-height:0;} }
  @media (max-width:760px){
    .cui-foot{display:none;}
    body.chart-max .cui-foot{display:flex;}
    .dtb{max-width:calc(100% - 12px); overflow-x:auto; scrollbar-width:none;}
    .draw-fly{width:250px;}
  }

  /* ================= Trade labels on the chart (live P/L, drag TP / SL) ================= */
  .trade-tags{position:absolute; top:0; z-index:5; pointer-events:none;}
  .trade-tag{position:absolute; right:10px; transform:translateY(-50%); display:flex; align-items:stretch; height:22px; pointer-events:auto; border-radius:4px;
    font:600 11px/1 -apple-system, BlinkMacSystemFont, "Trebuchet MS", Roboto, sans-serif; box-shadow:0 2px 8px rgba(0,0,0,.35); cursor:pointer; user-select:none; touch-action:none; overflow:hidden;}
  .trade-tag > *{display:flex; align-items:center; padding:0 7px; white-space:nowrap;}
  .trade-tag.pos{background:#2a2e39; color:#d1d4dc;}
  .trade-tag.pos.buy{box-shadow:0 0 0 1px #089981, 0 2px 8px rgba(0,0,0,.35);}
  .trade-tag.pos.sell{box-shadow:0 0 0 1px #f23645, 0 2px 8px rgba(0,0,0,.35);}
  .tt-side.buy{background:#089981; color:#fff;} .tt-side.sell{background:#f23645; color:#fff;}
  .tt-pl{font-variant-numeric:tabular-nums;} .tt-pl.up{color:#22d3a6;} .tt-pl.down{color:#ff6b78;}
  .trade-tag.tp, .trade-tag.sl, .trade-tag.ord{background:#2a2e39; color:#d1d4dc; cursor:ns-resize;}
  .trade-tag.tp{box-shadow:0 0 0 1px #089981, 0 2px 8px rgba(0,0,0,.35);} .trade-tag.sl{box-shadow:0 0 0 1px #f23645, 0 2px 8px rgba(0,0,0,.35);}
  .trade-tag.ord{box-shadow:0 0 0 1px #787b86, 0 2px 8px rgba(0,0,0,.35);}
  .tt-kind.tp{background:#089981; color:#fff;} .tt-kind.sl{background:#f23645; color:#fff;} .tt-kind.ord{background:#5d606b; color:#fff;}
  .tt-px{color:#fff; font-variant-numeric:tabular-nums;}
  .trade-tag button{border:none; background:none; color:inherit; font:inherit; cursor:pointer; padding:0 7px;}
  .trade-tag .tt-add{border-left:1px solid rgba(255,255,255,.12); cursor:ns-resize;}
  .trade-tag .tt-add.tp{color:#22d3a6;} .trade-tag .tt-add.sl{color:#ff6b78;}
  .trade-tag .tt-add:hover{background:rgba(255,255,255,.08);}
  .trade-tag .tt-x{border-left:1px solid rgba(255,255,255,.12); font-size:14px; color:#9598a1;}
  .trade-tag .tt-x:hover{color:#fff; background:rgba(242,54,69,.5);}
  .trade-tag.dragging{z-index:2; box-shadow:0 0 0 1px #f0b90b, 0 4px 14px rgba(0,0,0,.5); right:auto; left:50%; transform:translate(-50%, -50%);}
  .trade-tag.saving{opacity:.6;}
  .trade-tag[hidden]{display:none;}
  :root[data-theme="light"] .trade-tag.pos, :root[data-theme="light"] .trade-tag.tp, :root[data-theme="light"] .trade-tag.sl, :root[data-theme="light"] .trade-tag.ord{background:#fff; color:#131722;}
  :root[data-theme="light"] .tt-px{color:#131722;} :root[data-theme="light"] .tt-pl.up{color:#089981;} :root[data-theme="light"] .tt-pl.down{color:#f23645;}

  /* time labels after the last candle + crosshair time there */
  .cui-future{position:absolute; bottom:0; z-index:3; pointer-events:none; overflow:hidden;}
  .cui-ft{position:absolute; top:50%; transform:translate(-50%, -50%); font:11px -apple-system, BlinkMacSystemFont, "Trebuchet MS", Roboto, Ubuntu, sans-serif; white-space:nowrap;}
  .cui-ft.day{font-weight:600;}
  .cui-xlabel{position:absolute; bottom:0; z-index:4; transform:translateX(-50%); padding:0 8px; background:#2a2e39; color:#fff; border-radius:2px;
    font:11px -apple-system, BlinkMacSystemFont, "Trebuchet MS", Roboto, Ubuntu, sans-serif; white-space:nowrap; pointer-events:none;}
  :root[data-theme="light"] .cui-xlabel{background:#5d606b;}

  /* ================= Refer a friend: reward ladder ================= */
  .rf-stats{grid-template-columns:repeat(3, 1fr); max-width:760px;}
  .rf-q{font-size:.8rem; color:var(--fg-muted);} .rf-q.yes{color:var(--buy); font-weight:600;}
  .rf-ladder-card{margin:22px 0 26px; padding:22px 24px; border:1px solid var(--border); border-radius:14px; background:var(--surface);}
  .rf-ladder-head{display:flex; justify-content:space-between; gap:18px; align-items:flex-start; flex-wrap:wrap; margin-bottom:14px;}
  .rf-ladder-head h3{margin:0 0 4px; font-size:1.15rem;}
  .rf-ladder-head .sub{color:var(--fg-muted); font-size:.85rem; max-width:520px; line-height:1.45;}
  .rf-next{min-width:220px; padding:12px 16px; border-radius:12px; background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);}
  .rf-next-k{font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-muted);}
  .rf-next-v{font-weight:700; margin:3px 0 2px;}
  .rf-next-s{font-size:.82rem; color:var(--fg-muted);} .rf-next-s b{color:var(--fg);}
  .rf-ladder{display:grid; grid-template-columns:22px 6px 1fr; gap:0 14px;}
  .rf-axis{position:relative;}
  .rf-axis span{position:absolute; top:0; left:50%; transform:translateX(-50%) rotate(180deg); writing-mode:vertical-rl; white-space:nowrap; font-size:.72rem; color:var(--fg-muted); letter-spacing:.03em;}
  .rf-track{position:relative; background:color-mix(in srgb, var(--fg-muted) 30%, transparent); border-radius:3px; overflow:hidden;}
  .rf-track-fill{position:absolute; left:0; right:0; bottom:0; height:0; background:var(--accent); transition:height .6s;}
  .rf-steps{min-width:0;}
  .rf-step{display:grid; grid-template-columns:110px 92px 1fr auto; align-items:center; gap:12px; padding:14px 4px; border-top:1px dashed color-mix(in srgb, #8b5cf6 55%, transparent);}
  .rf-step:last-child{border-bottom:1px dashed color-mix(in srgb, #8b5cf6 55%, transparent);}
  .rf-step-n{font-size:1.25rem; font-weight:700; line-height:1.1;}
  .rf-step-n small{display:block; font-size:.72rem; font-weight:500; color:var(--fg-muted);}
  .rf-step-ic{position:relative; width:76px; height:76px; border-radius:50%; background:#dfe1e6; display:flex; align-items:center; justify-content:center;}
  .rf-step-ic svg{width:52px; height:52px;}
  .rf-badge{position:absolute; top:-2px; right:-2px; width:26px; height:26px; border-radius:50%; background:#8b5cf6; color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; border:3px solid var(--surface);}
  .rf-step.ok .rf-badge{background:var(--buy);}
  .rf-step:not(.ok) .rf-step-ic{opacity:.75;}
  .rf-step-name{font-size:.98rem; color:var(--fg);}
  .rf-step-sub{font-size:.74rem; color:var(--fg-muted); margin-top:2px;}
  .rf-step.next{background:color-mix(in srgb, var(--accent) 7%, transparent); border-radius:10px;}
  .rf-step-act{text-align:right; white-space:nowrap;}
  .rf-st{font-size:.82rem; color:var(--fg-muted);}
  .rf-st.done{color:var(--buy); font-weight:600;} .rf-st.wait{color:#f0b90b; font-weight:600;} .rf-st.bad{color:var(--sell); white-space:normal;}
  .rf-claim{width:auto; padding:8px 18px;}
  @media (max-width:640px){
    .rf-stats{grid-template-columns:repeat(3, 1fr);}
    .rf-ladder-card{padding:16px 14px;}
    .rf-ladder{grid-template-columns:16px 5px 1fr; gap:0 9px;}
    .rf-step{grid-template-columns:62px 54px 1fr; gap:4px 10px; padding:12px 2px;}
    .rf-step-n{font-size:1rem;}
    .rf-step-ic{width:50px; height:50px;} .rf-step-ic svg{width:34px; height:34px;}
    .rf-badge{width:20px; height:20px; font-size:9px; border-width:2px;}
    .rf-step-name{font-size:.88rem;}
    .rf-step-act{grid-column:2 / 4; text-align:left;}
    .rf-next{min-width:0; width:100%;}
  }

  /* Phones: account and wallet action buttons sit in one even row instead of wrapping. */
  @media (max-width:600px){
    .account-right{flex-wrap:nowrap; width:100%;}
    .account-actions{display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; flex:1; min-width:0;}
    .account-actions .act-btn{justify-content:center; padding:9px 4px; font-size:.8rem;}
    .fw-balance-actions{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;}
    .fw-balance-actions .btn{padding:9px 6px; font-size:.84rem;}
    .term-m-dep{background:var(--accent); color:var(--accent-fg); border-color:var(--accent);}
  }